@stackcraftmx/calcita 0.32.2 → 0.51.0

package/README.md

@@ -49,6 +49,15 @@ pnpm exec calcita make:component OrderTotals --module purchase-orders
 El CLI nunca pisa un archivo que ya existe. Sus plantillas son los archivos tal cual (`cli/templates`), con
 `//#if pwa` … `//#endif` en lo que depende de una respuesta.
 
+El proyecto trae pruebas de pantalla (`pnpm test`, Vitest con jsdom y Testing Library): cada una abre la app completa en una
+dirección con el servidor de mentira (`openScreen` en `src/testing`) y pica como una persona. Vienen las del inicio, la de
+entrar y las del módulo de ejemplo, y `make:module` arma la de cada módulo nuevo.
+
+Y dos revisiones para antes de subir: `pnpm lint` (ESLint: una variable que no existe, «t is not defined», se caza al
+escribir) y `pnpm check:texts` (`calcita check:texts`: que cada `t('llave')` escrita tal cual exista en todos los idiomas y
+que los idiomas tengan las mismas llaves). Sirve también en un proyecto que no salió del CLI: lee `src/**/*Texts.js` y
+`src/**/texts.js`.
+
 ## Arrancar en un proyecto que ya existe
 
 ```bash
@@ -93,12 +102,42 @@ Sin nada más, todo sale en español, con la zona horaria del navegador, montos
 | `canAccess` | quién ve qué (menú, rutas, botones): la regla del proyecto, normalmente `createAccessChecker(...)` | solo lo que no tiene regla |
 | `buildId` | la compilación del front que corre en la pestaña, para el aviso de versión nueva | ninguna (sin aviso) |
 | `fileTypes` | tipos de archivo propios para las descargas (su ícono y su color), además de Excel, CSV y PDF | los de la casa |
+| `onMissingText` | a quién avisarle de un texto que no existe (la pantalla enseña la llave): mandarlo a Sentry, tronar una prueba | un aviso en la consola, una vez por idioma y llave |
+| `readValidationMessage` | cómo leer los mensajes de validación de un sistema que ya existe (ver «Mensajes de error propios») | `{key}`, `{msg}`, `{message}` y texto |
 
 Un `ToolkitProvider` dentro de otro (una parte de la app en otro idioma, una vista previa) toma del de afuera lo que no le
 digan, y lo de adentro usa el suyo: el más cercano. No le cambia nada al resto de la app. Dentro de un componente,
 `useFormatters()` da los formatos (`formatDate`, `formatCurrency`…) con el idioma, la zona y la moneda del proveedor más
 cercano; los sueltos usan los del proveedor de la raíz.
 
+**Fuera de un componente** (una función que arma columnas, un diccionario, un aviso): `translateToolkit(namespace, llave,
+valores)` y los formatos sueltos (`formatDate`, `formatCurrency`, `formatNumber`…) usan el idioma, la zona y la moneda del
+proveedor de la raíz, ya actualizados en la misma pintada en que cambian. Así una función auxiliar no tiene que recibir `t`
+ni los formatos por parámetro:
+
+```js
+import {formatDate, translateToolkit} from '@stackcraftmx/calcita';
+
+export const columnsOf = () => [
+    textColumn({field: 'registered_at', label: translateToolkit('clients', 'columns.registered'), valueFormatter: (value) => formatDate(value)}),
+];
+```
+
+Dos cuidados: con dos proveedores (dos islas en otro idioma) los sueltos usan el de la raíz; y si la pantalla guarda el
+resultado (`useMemo(() => columnsOf(), [])`), ponga el idioma en las dependencias o se queda en el de antes.
+
+Un texto que no existe se pinta con su llave (`clients:columns.registered`) y Calcita lo avisa en la consola una vez; con
+`onMissingText` se le avisa al proyecto. Un texto opcional se pide con `defaultValue` (`t('tips.extra', {defaultValue: ''})`)
+y no avisa.
+
+Para un texto con una palabra resaltada, una sola llave con marcas y `MarkedText` (como `<Trans>` de react-i18next, sin
+i18next). No pinta HTML: solo las marcas que se nombran; lo demás sale como texto.
+
+```jsx
+// es: {home: {headline: 'Optimiza tu negocio con <highlight>financiamiento</highlight> inteligente'}}
+<MarkedText text={t('home.headline')} marks={{highlight: <Box component="strong" sx={{color: 'primary.main'}} />}} />
+```
+
 Con react-router y i18next:
 
 ```jsx
@@ -170,10 +209,10 @@ Cada puerta pide solo sus librerías; un proyecto instala lo que usa.
 | Importar de | Trae | Pide además |
 |---|---|---|
 | `@stackcraftmx/calcita` | proveedor, marco de la app, diálogos, avisos, descargas, encabezados, filtros, chips, métricas, formatos (`useFormatters`), fechas, errores RFC 9457, la petición de la casa (`createApiClient`), la recuperación de versión vieja, la navegación sin router (`createBrowserNavigation`, `createHashNavigation`), la búsqueda de la barra (`BarSearch`), el menú «⋯» (`ActionsMenu`), las acciones de lo elegido (`SelectionActions`), la seguridad de la cuenta (códigos de recuperación, sesiones, bitácora) y la bandeja tipo correo (`InboxLayout`, `MessageList` con selección, `MessageView` con la conversación) | — |
-| `@stackcraftmx/calcita/table` | `ServerTable`: paginada, filtrada y ordenada en el servidor, con su estado en la URL | `@mui/x-data-grid`, `nuqs` |
+| `@stackcraftmx/calcita/table` | `ServerTable`: paginada, filtrada y ordenada en el servidor, con su estado en la URL; `ServerTableFilterDrawer`, su búsqueda en cajón | `@mui/x-data-grid`, `nuqs`, `react-window` |
 | `@stackcraftmx/calcita/forms` | campos de formik (texto, lista de una o varias opciones, número con miles, catálogo, color), formulario por pasos, aviso de arriba, errores del servidor pegados a cada campo | `formik`, `yup` |
 | `@stackcraftmx/calcita/react-hook-form` | los mismos campos con los mismos nombres, conectados a react-hook-form, su formulario por pasos y `yupResolver` | `react-hook-form`, `@hookform/resolvers` (y `yup` si valida con yup) |
-| `@stackcraftmx/calcita/date-pickers` | la fecha con el DatePicker de MUI X (`DateInput`, `FormDateField`); viaja `AAAA-MM-DD` | `@mui/x-date-pickers` 8, `dayjs` |
+| `@stackcraftmx/calcita/date-pickers` | fecha, fecha con hora, hora y mes con los selectores de MUI X (`DateInput`, `DateTimeInput`, `TimeInput`, `MonthInput` y su versión de formik); cada uno viaja en texto | `@mui/x-date-pickers` 8, `dayjs` |
 | `@stackcraftmx/calcita/charts` | barras, columnas y líneas (una serie o varias), cada una con su vista de tabla, y `ChartTooltip` para las propias | `recharts` |
 | `@stackcraftmx/calcita/timeline` | línea de tiempo por grupos | `@mui/lab` |
 | `@stackcraftmx/calcita/excel` | reporte en Excel (Resumen y Datos) y CSV | `exceljs`, que se le pasa al llamarlo |
@@ -183,6 +222,8 @@ Cada puerta pide solo sus librerías; un proyecto instala lo que usa.
 | `@stackcraftmx/calcita/filepond` | `FileDropzone` con FilePond: el mismo uso que la de la puerta principal, más varios archivos, avance por archivo y `createPondServer` | `filepond`, `react-filepond`, `filepond-plugin-file-validate-type`, `filepond-plugin-file-validate-size` |
 | `@stackcraftmx/calcita/next` | la navegación de Next.js (App Router) para ToolkitProvider; los componentes ya vienen marcados con `'use client'` y los puros sirven en el servidor | `next` |
 | `@stackcraftmx/calcita/money` | `Money`: dinero exacto en centavos enteros, con suma, resta, multiplicación, división, potencia, raíz y su formato con la moneda | — |
+| `@stackcraftmx/calcita/rich-text` | el editor de texto con formato (`RichTextEditor`, `FormRichTextField`) y la vista que enseña lo guardado sin dejar pasar código (`RichTextView`); viaja HTML | `@tiptap/react`, `@tiptap/pm`, `@tiptap/starter-kit`, `@tiptap/extensions`, `@tiptap/extension-text-align` (3) |
+| `@stackcraftmx/calcita/mexico` | RFC, CURP y CLABE con su dígito verificador y sus reglas de yup; la e.firma (`EfirmaFields`: el .cer leído y la llave abierta en el navegador) y la factura (`readCfdi`, `CfdiSummary`) | `jsrsasign` |
 | `@stackcraftmx/calcita/passkeys` | llaves de acceso (passkeys): crearlas y firmar con ellas, con los errores del navegador en palabras de la persona | `@simplewebauthn/browser` 14 |
 | `@stackcraftmx/calcita/account` | la cuenta completa: `SignInScreen` (con el segundo paso), `ForgotPasswordScreen`, `ResetPasswordScreen`, `ProfileScreen` (con campos y pestañas propias), `AccountSecuritySection`, `AccountProvider` y `createRestAccountConnector` | `@simplewebauthn/browser` 14, `formik`, `yup` |
 | `@stackcraftmx/calcita/account-demo` | `createDemoAccountConnector`: la cuenta en el navegador, sin backend (y los códigos TOTP) | — |
@@ -245,6 +286,13 @@ el teléfono, con cápsulas, flotan arriba a la derecha y se quedan al bajar: la
 en un menú «⋯». Las `actions` de `PageHeading` ya suben solas, y `ServerTable` sube su búsqueda con
 `searchInBar`. «Hecho en Calcita» → «Marco y menú» lo enseña vivo.
 
+Cuando los filtros de una lista ya no caben arriba de la tabla, la búsqueda en cajón: `FilterDrawer` sale de un lado
+(`anchor`) con los campos declarados una vez (`FILTER_FIELD_KIND`: texto, una o varias opciones, catálogo, casillas, rango de
+números, de fechas, monto con operador o uno propio); lo que se cambia adentro no mueve la lista hasta «Buscar». Con
+`ServerTableFilterDrawer` en `toolbarExtra` va conectado a la tabla: botón «Filtros (N)», filtros en la dirección y un chip
+por filtro (`filterDrawerDefaultsOf`, `filterDrawerKindsOf`, `filterDrawerChipsOf`). Un monto viaja como `gte:500`
+(`comparisonOf` lo separa en el backend o en la pantalla).
+
 ```jsx
 <BarActions label="Buscar en pedidos" order={1}>
     <IconButton aria-label="Buscar" onClick={openSearch}><SearchRoundedIcon /></IconButton>
@@ -297,6 +345,23 @@ tema del proyecto y al final el `sx` que pase la pantalla. Los números se leen
 Sirve con `createToolkitTheme` y con cualquier tema de MUI (el que ya tenía un sistema, tal cual): así un sistema puede
 dejar Calcita con su propia cara, parte por parte.
 
+Además, como en MUI, cada parte con nombre se puede **cambiar por otro componente** (`slots`) o **recibir props de más**
+(`slotProps`), con el nombre de la parte de la tabla de abajo; desde la pantalla o para toda la app desde el tema:
+
+```jsx
+<RecordCard slots={{avatar: StoreAvatar}} slotProps={{titles: {component: 'header'}}} … />
+createTheme({components: {CalcitaRecordCard: {defaultProps: {slotProps: {root: {elevation: 3}}}}}});
+```
+
+`className`, `style` y `sx` de `slotProps` se suman a los de Calcita; una pieza dentro de otra igual no toma los `slots` de la
+de afuera. `TextInput` es la excepción: su `slotProps` es el del `TextField` de MUI (`input`, `htmlInput`…). Una pieza propia
+del proyecto se arma con lo mismo: `piecePart`, `usePieceProps` y `withPieceSlots`.
+
+El `sx` de la pantalla se **combina regla por regla** con el de la pieza, no la reemplaza: en la tabla,
+`gridSx={{'& .MuiDataGrid-cell': {alignItems: 'flex-start'}}}` cambia solo la alineación y la celda conserva lo demás.
+Para hacer lo mismo en un componente propio: `sx={[{p: 2}, ...sxListOf(sx)]}` (una lista de sx, como pide MUI; nunca
+`{p: 2, ...sx}`, que pierde la llave entera cuando las dos traen la misma).
+
 <details>
 <summary>Las piezas, con su nombre en el tema y sus partes</summary>
 
@@ -308,33 +373,49 @@ dejar Calcita con su propia cara, parte por parte.
 | `CalcitaActivityLog` | `itemIcon` |
 | `CalcitaAppearanceSettings` | `selectSection`, `section`, `sectionLabel`, `option`, `divider` |
 | `CalcitaAppLayout` | `skipLink`, `brand`, `brandLogo`, `brandText`, `brandName`, `brandCaption`, `titleArea`, `phoneTitle`, `desktopTitle`, `railBrand`, `railLogo`, `collapseButton`, `root`, `scrollEdge`, `bar`, `toolbar`, `menuButton`, `spacer`, `tools`, `progress`, `body`, `drawer`, `main`, `phoneSlot`, `content`, `phoneDrawer` |
+| `CalcitaAttachmentsInput` | `root`, `actions`, `button`, `list`, `fileChip`, `limits` |
 | `CalcitaAuditTrailDialog` | `description` |
 | `CalcitaAuthLayout` | `root`, `tools`, `body`, `brand`, `logo`, `brandName`, `card`, `description`, `content`, `footer` |
+| `CalcitaBackButton` | `root` |
+| `CalcitaBarActionButton` | `button`, `iconButton`, `menuItem` |
 | `CalcitaBarActions` | `group` |
 | `CalcitaBarCapsule` | `root` |
 | `CalcitaBarList` | `row`, `chart` |
 | `CalcitaBarSearch` | `field` |
 | `CalcitaCalendarHeatmap` | `header`, `toggle`, `tableArea`, `dateCell`, `valueCell`, `descriptionCell`, `gridArea`, `grid`, `monthLabel`, `week`, `dayLabel`, `cell`, `legend`, `legendLess`, `legendCell`, `legendMore` |
+| `CalcitaCatalogInput` | `field` |
+| `CalcitaCfdiSummary` | `root`, `header`, `amounts`, `concepts` |
 | `CalcitaChart` | `tableArea`, `legend`, `legendItem`, `legendLine`, `legendSwatch`, `reference`, `referenceLine` |
 | `CalcitaChartTooltip` | `root` |
+| `CalcitaCheckboxGroupInput` | `root`, `selectAll`, `option` |
 | `CalcitaCollapsibleSection` | `root`, `accordion`, `summary`, `titleArea`, `collapsedTitle`, `expandedTitle`, `details` |
 | `CalcitaColorInput` | `swatch`, `nativeInput` |
 | `CalcitaColorSchemeToggle` | `button` |
 | `CalcitaColumnChart` | `chart` |
 | `CalcitaConfirmDialog` | `problem`, `actions` |
 | `CalcitaContentDialog` | `header`, `title`, `closeButton`, `body` |
+| `CalcitaCookieNotice` | `root`, `text`, `actions` |
+| `CalcitaCopyButton` | `button` |
+| `CalcitaCountdown` | `root` |
+| `CalcitaDateInput` | `picker` |
 | `CalcitaDateRangeFilter` | `chip`, `panel`, `actions` |
+| `CalcitaDateTimeInput` | `picker` |
 | `CalcitaDefinitionList` | `root`, `entry`, `label`, `value` |
 | `CalcitaDemoTotpCode` | `root`, `code` |
 | `CalcitaDetailHeader` | `root`, `titleArea`, `title`, `badges`, `actions` |
 | `CalcitaDownloadManager` | `doneIcon`, `failedIcon`, `canceledIcon`, `cancelButton`, `progress`, `cancelIcon`, `item`, `itemText`, `itemStatus`, `itemActions`, `panel`, `header`, `title`, `list` |
 | `CalcitaDownloadMenu` | `button` |
+| `CalcitaEfirmaFields` | `root`, `certificate`, `verify` |
 | `CalcitaEmptyState` | `root`, `icon` |
 | `CalcitaErrorPage` | `root`, `actions` |
 | `CalcitaEventCalendar` | `toolbar`, `navigation`, `title`, `calendar` |
 | `CalcitaEventDetails` | `row`, `rowContent`, `titleRow`, `toneDot`, `linkRow`, `link`, `guestsTitle`, `guest`, `guestAvatar`, `guestName`, `notes`, `actions` |
+| `CalcitaFieldFrame` | `root`, `label` |
 | `CalcitaFileDropzone` | `root`, `fileArea`, `fileChip`, `hint`, `actions`, `limits`, `extra` |
+| `CalcitaFileInput` | `root`, `button`, `fileChip`, `empty` |
+| `CalcitaFileUploadInput` | `root`, `fileName`, `status`, `button`, `helper` |
 | `CalcitaFilterChips` | `root`, `header`, `clearButton` |
+| `CalcitaFilterDrawer` | `header`, `body`, `footer` |
 | `CalcitaFontSizeToggle` | `button` |
 | `CalcitaFormProblemAlert` | `root` |
 | `CalcitaFormRow` | `root`, `label`, `control` |
@@ -345,6 +426,10 @@ dejar Calcita con su propia cara, parte por parte.
 | `CalcitaGroupedTimeline` | `group`, `groupHeader`, `groupButton`, `groupTitle`, `expandIcon`, `timeline`, `opposite`, `connector`, `content`, `entryTitle` |
 | `CalcitaHeaderFilter` | `button`, `badge`, `panel` |
 | `CalcitaHeaderTools` | `divider`, `root` |
+| `CalcitaHelpButton` | `root` |
+| `CalcitaHelpCarouselDialog` | `media`, `content`, `dots`, `actions` |
+| `CalcitaIconBadge` | `root`, `icon`, `label` |
+| `CalcitaImageInput` | `root`, `preview`, `image`, `placeholder`, `actions` |
 | `CalcitaInboxLayout` | `labelDot`, `folder`, `folderIcon`, `folderCount`, `root`, `folders`, `foldersHeader`, `labelsTitle`, `listPane`, `phoneTabs`, `phoneTabBadge`, `listHeader`, `list`, `detail`, `backButton` |
 | `CalcitaInstallAppSetting` | `root` |
 | `CalcitaInstallInstructions` | `steps` |
@@ -358,26 +443,37 @@ dejar Calcita con su propia cara, parte por parte.
 | `CalcitaMetricCard` | `root`, `action`, `header`, `icon`, `label`, `value`, `caption`, `extra`, `trend` |
 | `CalcitaMobileTabBar` | `tab`, `tabIconPlaceholder`, `tabLabel`, `root`, `bar`, `minimized`, `account`, `sheetHeader` |
 | `CalcitaModalWaiting` | `root`, `title`, `body`, `text` |
+| `CalcitaMonthInput` | `picker` |
 | `CalcitaMultiSelectFilter` | `list`, `option` |
 | `CalcitaNewBuildNotice` | `floating`, `icon`, `message`, `reloadButton`, `banner` |
+| `CalcitaNumberInput` | `field` |
 | `CalcitaPageBreadcrumbs` | `root`, `link`, `current` |
 | `CalcitaPageHeader` | `root`, `subtitle`, `action` |
 | `CalcitaPageHeading` | `root`, `breadcrumbs`, `titleRow`, `title`, `actions`, `description` |
 | `CalcitaPasswordChecklist` | `title`, `list`, `item`, `hidden` |
+| `CalcitaPdfViewerDialog` | `actions`, `frame` |
 | `CalcitaPeriodRangeSelector` | `field`, `select`, `root` |
 | `CalcitaPermissionMatrix` | `permission`, `checkbox`, `group`, `groupHeader`, `groupTitle`, `grid` |
 | `CalcitaPondDropzone` | `root`, `summary`, `limits`, `actions`, `extra` |
 | `CalcitaProfileHeader` | `root`, `cover`, `body`, `avatar`, `text`, `name`, `chips`, `actions` |
 | `CalcitaProfileScreen` | `sectionTitle`, `form`, `preferences` |
 | `CalcitaQuickFilters` | `root`, `caption`, `chip`, `chipLabel`, `chipCount` |
+| `CalcitaRecordCard` | `root`, `header`, `avatar`, `titles`, `status`, `body`, `group`, `fact`, `highlight`, `footer`, `details` |
+| `CalcitaRecordCardSkeleton` | `root` |
 | `CalcitaRecoveryCodesDialog` | `codes`, `actions` |
+| `CalcitaRepeatingFields` | `root`, `row`, `rowHeader`, `rowContent`, `addButton`, `helper` |
+| `CalcitaRichTextEditor` | `root`, `toolbar`, `content`, `footer` |
+| `CalcitaRichTextView` | `root` |
+| `CalcitaRouteTabs` | `root`, `tab`, `badge` |
 | `CalcitaScrollableRow` | `root` |
 | `CalcitaSecondStepForm` | `actions` |
+| `CalcitaSecretField` | `field` |
 | `CalcitaSectionCard` | `root`, `header`, `title` |
 | `CalcitaSegmentedControl` | `root` |
 | `CalcitaSelectInput` | `option`, `optionText` |
 | `CalcitaSelectionActions` | `bar`, `count`, `clear`, `phoneCount`, `phoneActions` |
-| `CalcitaServerTable` | `toolbar`, `summary`, `customHeader`, `count`, `countRow`, `selectionNotice`, `error`, `card`, `grid`, `pagination` |
+| `CalcitaServerTable` | `cards`, `cardsPagination`, `viewToggle`, `toolbar`, `summary`, `customHeader`, `count`, `countRow`, `selectionNotice`, `error`, `card`, `grid`, `pagination` |
+| `CalcitaServerTableFilterDrawer` | `button` |
 | `CalcitaSessionsCard` | `item`, `itemIcon`, `itemHeader`, `actions` |
 | `CalcitaSettingsMenu` | `divider` |
 | `CalcitaSideMenu` | `scrollArrow`, `root`, `brand`, `brandLogo`, `brandText`, `brandName`, `brandCaption`, `railTop`, `listArea`, `list`, `section`, `sectionTitle`, `sectionTitleText`, `footer`, `railBottom` |
@@ -385,16 +481,22 @@ dejar Calcita con su propia cara, parte por parte.
 | `CalcitaSignInForm` | `footer` |
 | `CalcitaSignInScreen` | `alert` |
 | `CalcitaSortableFilterHeader` | `title`, `root`, `sortButton`, `sortIndicator`, `clearButton` |
+| `CalcitaStackedCell` | `root`, `line`, `label`, `valueRow`, `primary`, `secondary`, `note` |
 | `CalcitaStatusChip` | `root`, `dot`, `label`, `chip` |
 | `CalcitaSubmenuActionsMenu` | `badge` |
+| `CalcitaSubmitButton` | `root` |
 | `CalcitaTabBarEditor` | `root`, `header`, `title`, `list`, `itemIcon`, `footer` |
 | `CalcitaTableToggle` | `root`, `button` |
 | `CalcitaTag` | `root` |
+| `CalcitaTemplateDownloadButton` | `root` |
+| `CalcitaTermsAcceptanceDialog` | `content`, `frame`, `footer` |
 | `CalcitaTextInput` | `field` |
+| `CalcitaTimeInput` | `picker` |
 | `CalcitaTopMenu` | `link`, `root` |
+| `CalcitaTransferListInput` | `root`, `list`, `actions` |
 | `CalcitaTwoStepVerification` | `qr`, `secret`, `secretCode`, `header`, `headerTitle`, `headerText`, `menuIcon` |
 | `CalcitaWizardLayout` | `stepper`, `phoneSteps`, `actions` |
-| `CalcitaWordmark` | `root` |
+| `CalcitaWordmark` | `root`, `mode` |
 
 </details>
 
@@ -488,6 +590,30 @@ const menuItems = composeMenu(import.meta.glob('@/modules/*/menu.js', {eager: tr
 
 En cada pantalla, `PageHeading` pone el título, la descripción y los botones, y arma las migas solo desde el menú
 (Inicio › Sección › Pantalla). `PageHeader` es el encabezado centrado de una portada y `DetailHeader` el de un registro.
+Para explicar una pantalla la primera vez que se entra, la ayuda en carrusel: `HelpCarouselDialog` (pasos con imagen o
+ilustración, título y texto; Siguiente, los puntos, las flechas o deslizando) y `useHelpCarousel({helpKey, version})`, que
+la abre sola la primera vez y por versión, hasta que se termina o se marca «No volver a mostrar» (`seen` para lo que ya sabe
+el servidor del proyecto); `HelpButton` es el «?» que la vuelve a abrir.
+
+Para listas donde una tabla se queda corta, `RecordCard`: arriba quién es (avatar con iniciales, folio, nombre) con su
+estatus, insignias, botón para abrirlo y menú «⋯»; en el cuerpo sus datos en grupos (`groups`, o `content` libre) y el dato
+principal grande; abajo lo que va a todo lo ancho y «Ver detalle», que despliega más. El orden es el que se da y nada se
+reacomoda solo: para un orden obligatorio, `trailing` pone el estatus al final y `columns` fija el ancho de cada columna.
+`RecordCardSkeleton` es su esqueleto. El menú «⋯» (`ActionsMenu`) acepta secciones, separadores, ligas, renglones propios y
+submenús (`children`), que se abren dentro del mismo menú con «Regresar». Un renglón con `to` es una pantalla de la app: va
+con la navegación del proyecto, así el clic normal no recarga la app y Cmd/Ctrl+clic o el botón de en medio la abren en otra
+pestaña (`href` es para lo de afuera). `onClick` recibe el evento del clic.
+
+Para las secciones de un registro, `RouteTabs`: pestañas donde cada una es una dirección (se comparte la liga a una
+pestaña); por ruta (cada pestaña su página, y «atrás» regresa a la anterior) o en la consulta (`mode="query"`, `?tab=pagos`,
+con `useActiveRouteTab` para pintar el panel), con ícono, conteo y permiso por pestaña. Las de la consulta son vistas de la
+misma ficha: por omisión reemplazan la entrada del historial, así «atrás» y el `BackButton` salen de la ficha en vez de pasear
+por sus pestañas (`replace={false}` lo apaga; en las de ruta, `replace` lo prende). Las tres navegaciones de Calcita (la del
+navegador, la de `#` y la de Next) y react-router saben reemplazar. Junto al título de un registro van su
+estatus (`StatusChip`) y sus insignias (`IconBadge`): un ícono y un texto corto con el
+color de lo que significan («Envío asegurado», «Pago con tarjeta»), con borde, tenue o sin caja. Mejor desde un diccionario:
+la entrada trae su ícono (`dictionaryEntryOf(value, keyPrefix, color, {icon})`) y la insignia saca de ahí texto,
+explicación, color e ícono (`<IconBadge dictionary={PAYMENT_METHOD} value={order.payment_method} />`).
 
 La misma regla protege las rutas (`withAccess(access, routes)` de `/react-router`: quien no puede ve «sin permiso», o la
 página propia que se pase en `{fallback}`) y
@@ -501,6 +627,42 @@ El marco avisa cuando la persona encoge el menú (`onMenuCollapse`), abre el men
 sus pestañas (`onMobileTabsChange`), para guardar esas preferencias en el servidor del proyecto si se quiere; sus textos se
 cambian con `texts`.
 
+## La tabla de servidor (`/table`)
+
+`ServerTable` pagina, filtra y ordena en el servidor (`fetchPage` recibe `{filters, sortOrders, page, pageSize}` y regresa
+`{rows, total, facets}`); con `prefix` su estado va en la dirección. Lo que piden casi todas las listas de administración
+viene listo:
+
+```jsx
+import {ACTIONS_COLUMN_FIELD, ServerTable, actionsColumn, stackedColumn, statusColumn} from '@stackcraftmx/calcita/table';
+
+const columns = [
+    actionsColumn({label: 'Acciones', actionsOf: (row) => [{key: 'open', label: 'Abrir', to: `/clientes/${row.id}`}]}),
+    stackedColumn({field: 'business_name', label: 'Empresa', entries: (row) => [row.business_name, row.rfc, row.regime]}),
+    stackedColumn({field: 'created_at', label: 'Fechas', entries: (row) => [                       // con etiqueta
+        {label: 'Alta', value: formatDate(row.created_at)}, {label: 'Último cambio', value: formatDate(row.updated_at)},
+    ]}),
+    statusColumn({field: 'status', label: 'Estado', dictionary: REGISTRATION_STATUS, t}),           // el ancho, medido
+];
+
+<ServerTable prefix="clientes" fetchPage={fetchClients} columns={columns} ariaLabel="Clientes"
+             fixedColumn={[ACTIONS_COLUMN_FIELD, 'business_name']}                               // fijas al deslizar
+             renderCard={(row) => <RecordCard title={row.business_name} … />} />                 // también en tarjetas
+```
+
+- `stackedColumn`: los datos que se leen de corrido en una celda, uno debajo del otro, los que hagan falta (el primero en
+  negritas, los demás en gris). Cada dato va solo, si el encabezado ya dice qué son, o con su etiqueta arriba
+  (`{label, value, note}`) si el encabezado nombra al grupo. Un dato vacío no se pinta, salvo el principal o uno con
+  etiqueta, que enseñan «—» (`texts={{cells: {empty: '- - -'}}}` lo cambia). Los renglones toman su alto solos;
+  `getRowHeight` también acepta `'auto'`. `StackedCell` es la misma celda para un `renderCell` propio.
+- `statusColumn`: el estatus desde su diccionario, con filtro de facetas y, con `t`, el ancho de su etiqueta más larga.
+- `actionsColumn`: el «⋯» de cada renglón en su columna, de ancho fijo.
+- `fixedColumn` acepta una lista: cada una se pega donde termina la anterior (las que no son la última llevan `width`).
+- `renderCard`: la misma lista en tarjetas, con la misma búsqueda, filtros, orden y páginas; un botón cambia de vista y con
+  `prefix` la vista va en la dirección (`?clientes_view=cards`). `view`, `defaultView`, `onViewChange` y `showViewToggle`
+  para decidirlo desde la pantalla.
+- `gridSx` se combina con los estilos de la tabla regla por regla; `gridProps` pasa lo demás al DataGrid.
+
 ## Eventos y textos de cada componente
 
 Cada componente de la casa avisa hacia afuera todo lo que pasa adentro (`onSelect`, `onChange`, `onViewChange`,
@@ -591,6 +753,29 @@ location /ventas/ {
 }
 ```
 
+Si el prefijo lo decide el servidor al servir la página (Laravel con `config('app.url')`, un proxy con su ruta), se construye
+UNA vez con archivos relativos (`ASSET_URL=./`) y la página trae `<base href="/ventas/">`: `documentBasePath()` lo lee al
+abrirla (`null` si no hay `<base>`) y el proyecto de `calcita new` ya lo usa para el router y `publicUrlOf`.
+
+## Direcciones con nombre y textos que se juntan solos
+
+Cuando una pantalla lleva a la de otro módulo (el detalle de un cliente regresa a la lista de donde salió), cada módulo
+publica sus direcciones en su archivo y un índice las junta; se piden por nombre, sin importar el otro módulo:
+
+```js
+// src/app/appPaths.js — el glob tiene que ser un texto literal: Vite lo resuelve al compilar
+export const {pathOf} = createPathIndex(import.meta.glob('@/modules/**/paths.js', {eager: true}));
+
+pathOf('admin:profile:detail', {groupId: 2, userId: 7675, tab: 'documentos'})   // '/admin/user/detail/2/7675?tab=documentos'
+```
+
+Lo que la ruta pide (`:userId`) se sustituye y lo que sobra va como consulta; un nombre que no existe o una parte que falta
+truena y dice qué sí hay. Las direcciones del API de cada módulo, igual: `createPathIndex(glob, {exportName: 'uris'})`.
+`fillPath(ruta, partes)` llena una suelta.
+
+Los textos de cada módulo se juntan con `combineTexts`: por idioma y namespace, los objetos de adentro se suman
+(`validation.fields` de dos módulos) y un texto repetido entre módulos truena en vez de pisarse.
+
 ## La petición de la casa
 
 Todo lo que habla con el servidor pasa por un cliente, armado una vez por proyecto con `fetch` del navegador (sin axios):
@@ -819,6 +1004,137 @@ import {FormRow, FormSection} from '@stackcraftmx/calcita';
 Los campos van directo dentro de la `FormSection` (sin Grid ni Stack en medio): la línea entre renglones se dibuja entre
 hermanos.
 
+### Mensajes de error propios (sin tocar el esquema)
+
+Los mensajes de `buildYupLocale()` son llaves que se traducen al pintarse, y cada uno lleva **su regla y su campo**. Cuando
+el negocio pide un mensaje muy específico no hace falta tocar el esquema ni los mensajes de Calcita. El primero que exista
+gana:
+
+1. el de la pantalla, en el campo: `<FormTextField name="rfc" messages={{matches: 'El RFC lleva 12 o 13 caracteres'}} />`;
+2. el de los textos del proyecto para ese campo y esa regla, en todas las pantallas:
+   `{es: {validation: {fields: {rfc: {matches: 'El RFC lleva 12 o 13 caracteres'}}}}}` (dentro de una lista,
+   `contacts[2].email` busca `contacts.email`);
+3. el general de Calcita (o el del esquema: `.required({key: 'clientes:rfcObligatorio'})`).
+
+Los textos pueden decir el nombre del campo: `{{label}}` (el de `.label('RFC')` del esquema o, si no, la etiqueta del campo).
+
+**Un sistema que ya existe** con su propio `setLocale` de yup: Calcita entiende sola `{key, values}`, `{msg, values}` (la de
+muchos sistemas con i18next), `{message: 'texto'}`, el error entero de react-hook-form y un texto ya escrito. Para otra
+forma, una función en el proveedor; los esquemas viejos entran sin reescribirse:
+
+```jsx
+<ToolkitProvider readValidationMessage={(error) => (error?.codigo ? {key: `legado:${error.codigo}`, values: error.datos} : undefined)}>
+```
+
+Una forma que no entiende no se pinta como «[object Object]»: sale el mensaje general y se avisa en la consola. Un campo
+propio del proyecto usa lo mismo con `useValidationText({label, messages})`.
+
+Reglas listas, con su mensaje en el idioma activo: `sameAsFieldRule('password', {otherLabel: 'la contraseña'})` (confirmar
+una contraseña, una CLABE o un correo), `percentRule({max: 30})` y, en `/mexico`, `postalCodeRule()` junto a `rfcRule()`,
+`curpRule()` y `clabeRule()`.
+
+### Campos con máscara
+
+`MaskedInput` (y `FormMaskedField` en `/forms` y `/react-hook-form`) es el campo de texto de la casa con una máscara: mientras
+se escribe se ven los separadores («555 123 4567») y al formulario llega el valor limpio («5551234567»). Pegar un número con
+otros separadores también sirve. Las de siempre vienen con nombre en `INPUT_MASK` (`phone`, `postalCode`, `clabe`, `card`,
+`rfc`, `curp`, `uuid`); una propia es un patrón donde `9` es un dígito, `A` una letra, `X` letra o dígito y `H` hexadecimal
+(`mask="AAA-9999"`). El RFC y la CURP solo se filtran y se pasan a mayúsculas mientras se escriben.
+
+```jsx
+<FormMaskedField name="phone" mask={INPUT_MASK.phone} label="Teléfono" placeholder="555 123 4567" />
+<FormMaskedField name="clabe" mask="clabe" label="CLABE" />
+```
+
+### Fechas y horas
+
+Cuatro campos en `/date-pickers`, con los selectores de MUI X. Cada uno viaja en texto con una sola forma y se ve en el
+idioma de la persona; la pantalla no convierte nada:
+
+| Campo (suelto · formik) | Para qué | Viaja |
+|---|---|---|
+| `DateInput` · `FormDateField` | una fecha de calendario (un nacimiento, una entrega) | `'2026-11-01'` |
+| `DateTimeInput` · `FormDateTimeField` | un momento que pasa una vez (un envío programado, una cita) | `'2026-11-01T18:30:00Z'`, en UTC |
+| `TimeInput` · `FormTimeField` | una hora del día sin fecha (un horario) | `'09:30'`, de 24 horas |
+| `MonthInput` · `FormMonthField` | el mes de un reporte o de un cierre | `'2026-11'` |
+
+La fecha con hora se ve en la zona del proyecto (`ToolkitProvider timeZone`) con el nombre de la zona abajo («Hora estándar
+central»), para que nadie dude en qué hora está escribiendo; `timeZone` la cambia en un solo campo (la hora de una
+sucursal) y el momento que viaja es el mismo. La hora sale de 24 horas o con a. m. y p. m. según `ToolkitProvider
+hourCycle`, y viaja igual. Lo que el selector de MUI X acepta y aquí no tiene nombre va en `pickerProps`.
+
+```jsx
+import {FormDateTimeField, FormMonthField, FormTimeField} from '@stackcraftmx/calcita/date-pickers';
+
+<FormDateTimeField name="visitAt" label="Fecha y hora" disablePast />
+<FormTimeField name="opensAt" label="Abre a las" minTime="07:00" maxTime="21:00" />
+<FormMonthField name="billingMonth" label="Se cobra en" disableFuture />
+```
+
+Con react-hook-form, el campo suelto va dentro de un `Controller` (la puerta de fechas no pide react-hook-form).
+
+Los minutos van de uno en uno (MUI X trae de 5 en 5); `minutesStep` los cambia. Para algo que se publica con
+anticipación y dura un mínimo (una promoción, una venta especial), el inicio lleva `minimumMinutesFromNow` (el mínimo se recorre
+solo con el reloj mientras la pantalla está abierta) y el fin `minDateTime={instantPlusMinutes(startsAt, 30)}`; en yup,
+las mismas reglas con su mensaje. El servidor vuelve a revisar: entre llenar el formulario y guardarlo pasa el tiempo.
+
+```jsx
+import {FormDateTimeField, instantPlusMinutes, minutesAfterRule, minutesFromNowRule} from '@stackcraftmx/calcita/date-pickers';
+
+const schema = Yup.object({
+    startsAt: Yup.string().required().test(minutesFromNowRule(5)),
+    endsAt: Yup.string().required().test(minutesAfterRule('startsAt', 30)),
+});
+
+<FormDateTimeField name="startsAt" label="Empieza" minimumMinutesFromNow={5} />
+<FormDateTimeField name="endsAt" label="Termina" minDateTime={instantPlusMinutes(values.startsAt, 30)} />
+```
+
+### Renglones que se repiten
+
+`FormRepeatingFields` (de formik y de react-hook-form, con el mismo uso) pinta una lista del formulario: cada renglón con
+su número y «Quitar», y «Agregar» al final. `minRows` (por omisión 1: con el mínimo, «Quitar» limpia el renglón) y
+`maxRows`; si un renglón se puede quitar lo decide la pantalla (`removeBlockedReason` da el motivo, `confirmRemove` pide
+confirmar uno guardado). En escritorio los campos de un renglón van lado a lado (`columns`) y en el teléfono uno debajo de
+otro. Las reglas de listas marcan el error en SU renglón:
+
+```jsx
+import {FormNumberField, FormRepeatingFields, Yup, listTotalAtMostRule, orderedInListRule, uniqueInListRule} from '@stackcraftmx/calcita/forms';
+
+const schema = Yup.object({
+    prices: Yup.array().of(Yup.object({
+        min_quantity: Yup.string().required()
+            .test(uniqueInListRule('prices', 'min_quantity'))      // «Ya está en el renglón 2»
+            .test(orderedInListRule('prices', 'min_quantity')),    // «Debe ir entre 10 (renglón 1) y 50 (renglón 3)»
+    })),
+    split: Yup.array().test(listTotalAtMostRule('amount', (values) => values.credit_limit)),  // con Money, sin floats
+});
+
+<FormRepeatingFields name="prices" label="Precios por volumen" emptyRow={{min_quantity: '', unit_price: ''}} maxRows={6}
+                     renderRow={({nameOf}) => (<>
+                         <FormNumberField name={nameOf('min_quantity')} label="Desde (piezas)" decimals={0} />
+                         <FormNumberField name={nameOf('unit_price')} label="Precio" prefix="$" />
+                     </>)} />
+```
+
+### Elegir varios
+
+Tres formas, según cuántas opciones hay, y cada una con su versión de formik y de react-hook-form:
+
+| Pieza | Para qué | Opciones de varias |
+|---|---|---|
+| `CheckboxGroupInput` · `FormCheckboxGroupField` | pocas opciones a la vista (los canales de aviso) | `selectAll`, `row`, `options[].description` |
+| `SelectInput` · `FormSelectField` con `multiple` | una lista corta (los días) | `selectAll`, `checkboxes` |
+| `CatalogInput` · `FormCatalogField` con `multiple` | un catálogo largo con buscador (los estados) | `selectAll` (con algo buscado, «Elegir los N que coinciden»), `checkboxes`, `limitTags` |
+| `TransferListInput` · `FormTransferListField` | elegir muchos viendo qué quedó de cada lado (compradores, sucursales) | `availableTitle`, `chosenTitle`, `searchable`, `listHeight` |
+
+«Elegir todos» lleva su casilla a medias cuando hay algunos elegidos y no cuenta las opciones apagadas (`disabled`). La
+lista de transferencia va fuera de una FormSection: necesita el ancho completo.
+
+Un 422 del servidor en `contacts.2.email` llega a ese renglón (`applyServerProblem`). Con formik, el error de toda la lista
+(el tope) sale cuando los renglones ya no tienen errores: formik guarda los dos en el mismo lugar; para verlo mientras se
+escribe va un resumen en vivo en `footer` con `listTotalOf`.
+
 ## Subir archivos
 
 Dos zonas para soltar archivos con el mismo uso: la de la puerta principal, con puro MUI (un archivo), y la de
@@ -835,6 +1151,112 @@ import {FileDropzone, buildUploadActors, uploadMachine, uploadWithProgress} from
 `accept` acepta nombres (`'excel'`, `['pdf', 'image']`) o lo de siempre del input (`'.xlsx,.xls'`); `maxSize` va en bytes
 o con unidades (`'10 MB'`, en base 1000 como el navegador).
 
+Para otros acomodos, con las mismas reglas y los mismos avisos:
+
+| Pieza (suelta · formik y react-hook-form) | Para qué | Al formulario llega |
+|---|---|---|
+| `FileInput` · `FormFileField` | un archivo del tamaño de un campo (la constancia, el contrato) | el `File`, lo ya guardado (`{name, size}`) o `null` |
+| `AttachmentsInput` · `FormAttachmentsField` | varios, como en un correo: «Adjuntar» y un chip por archivo | la lista (nuevos y guardados) |
+| `ImageInput` · `FormImageField` | una foto con su vista previa, en círculo o recuadro | el `File`, la dirección de la guardada o `null` |
+| `TemplateDownloadButton` | «Descargar la plantilla» (un archivo fijo con `href` o su API con `request`) | — |
+
+Los cuatro cargadores aceptan `template` para poner «Descargar la plantilla» junto a su botón, y `AttachmentsInput` suma
+`maxFiles` y `maxTotalSize`. Para armar uno propio (una tarjeta, un botón en la barra) está `useFilePicker`, que da el
+input, abrir la ventana, soltar encima y la revisión con sus avisos.
+
+```jsx
+import {AttachmentsInput, FileInput} from '@stackcraftmx/calcita';
+
+<FileInput label="Constancia fiscal" value={file} onChange={setFile} accept="pdf" maxSize="2 MB"
+           template={{href: '/plantillas/constancia.pdf'}} />
+<AttachmentsInput value={files} onChange={setFiles} accept={['pdf', 'image']} maxFiles={5} maxTotalSize="10 MB" />
+```
+
+### El cargador mini: sube en cuanto se elige
+
+Los de arriba solo eligen y el archivo viaja con el formulario. `FileUploadInput` (y `FormFileUploadField` de formik y de
+react-hook-form) SUBE el archivo en cuanto se elige, en su renglón: para una lista de documentos (lo que pide una solicitud,
+el expediente de un cliente). Enseña su estado (Por cargar, Subiendo 40 %, Procesando, Cargado, No se cargó), «Cargar» que ya
+cargado dice «Sustituir», bajar el subido y quitarlo, y abajo el avance en palabras o el motivo del error. Al formulario
+llega solo el id que da el servidor (`''` mientras sube): `Yup.string().required()` pide el documento.
+
+```jsx
+import {FormFileUploadField} from '@stackcraftmx/calcita/forms';
+
+<FormFileUploadField name="identification_file_id" label="Identificación oficial" accept={['pdf', 'image']} maxSize="5 MB"
+                     upload={(file, {signal, onUploadProgress, idempotencyKey}) => documentsApi.upload(file, {signal, onUploadProgress, idempotencyKey})}
+                     download={(fileId, transferOptions) => documentsApi.download(fileId, transferOptions)} />
+```
+
+`upload` es la subida del proyecto (`uploadWithProgress`, axios o su cliente) y `idOf` dice qué guardar de la respuesta (por
+omisión `result.id`). Lo del negocio (Aprobado, Falta información) va junto al estado con `actions`, y `onStatusChange`
+dice en qué va cada renglón para contar «2 de 3 cargados».
+
+## Documentos, avisos legales y cuenta regresiva
+
+- `PdfViewerDialog`: un PDF en una ventana con el visor del navegador (sin librerías), con «Abrir en otra pestaña» y
+  «Descargar» siempre a la vista (en el iPhone el visor dentro de la página enseña solo la primera hoja). `src` es la
+  dirección o el archivo (un Blob de su API).
+- `CookieNotice`: el aviso de cookies abajo, hasta que se acepta ESA versión en el navegador; no bloquea la pantalla.
+  `useCookieConsent` para pintar uno propio.
+- `TermsAcceptanceDialog`: aceptar los términos antes de seguir; pide leerlos hasta el final, marcar la casilla y «Acepto»,
+  y no se cierra con Escape. Quién aceptó qué versión lo registra su API en `onAccept` (la ventana espera y, si falla, dice
+  el motivo).
+- `Countdown`: «02:14:30» hasta un momento, con días cuando faltan, lo que dice al llegar a cero y `onComplete`;
+  `useCountdown` da las partes para pintarla a su manera.
+
+```jsx
+<CookieNotice version="2026-11" policyHref="/legal/cookies" />
+<TermsAcceptanceDialog open={!session.terms.accepted} version={session.terms.current} onAccept={({version}) => api.acceptTerms(version)}
+                       onDecline={signOut}>
+    <TermsText />
+</TermsAcceptanceDialog>
+<Countdown until={registration.closes_at} onComplete={reloadRegistration} completedText="Cerradas" />
+```
+
+## Texto con formato
+
+`@stackcraftmx/calcita/rich-text` trae el editor con Tiptap: estilo (texto, título, subtítulo), negrita, cursiva,
+subrayado, tachado, listas, cita, código, ligas, alineación, quitar el formato y deshacer, con contador si hay `maxLength`.
+Viaja HTML; vacío es `''` (así `required()` funciona). Las ligas solo con https, http, mailto o tel (un dominio suelto se
+completa con https://). `RichTextView` enseña lo guardado pasándolo por el mismo esquema del editor: un `<script>`, un
+`onclick` o una liga `javascript:` no llegan a la página.
+
+```jsx
+import {FormRichTextField, RICH_TEXT_FEATURE, RichTextView} from '@stackcraftmx/calcita/rich-text';
+
+<FormRichTextField name="notes" label="Notas" maxLength={2000}
+                   features={[RICH_TEXT_FEATURE.bold, RICH_TEXT_FEATURE.bulletList, RICH_TEXT_FEATURE.link]} />
+<RichTextView value={order.notes} />
+```
+
+Para lo que la barra no trae: `toolbarActions` (botones propios), `onEditorReady` (el editor de Tiptap) y `extensions`
+(extensiones de Tiptap del proyecto). Pesa unos 420 kB (134 kB comprimido) y solo se baja en las pantallas que lo usan.
+
+## México: RFC, CURP, CLABE, e.firma y facturas
+
+`@stackcraftmx/calcita/mexico` trae lo que casi cualquier sistema en México pide (pide `jsrsasign` solo para abrir la llave):
+
+- `isValidRfc`, `isValidCurp`, `isValidClabe`: la forma, que la fecha exista y el dígito verificador (el del RFC, con
+  `{strict: true}`). En yup, como reglas con su mensaje: `Yup.string().test(clabeRule())`.
+- `readCfdi(xmlText)` / `readCfdiFile(file)`: la factura (CFDI 3.3 y 4.0) leída del XML, con los montos en texto para
+  `Money`; `null` si no es factura. `CfdiSummary` la enseña, con el aviso si no es para su RFC o si no está timbrada.
+- `EfirmaFields`: el .cer, el .key y la contraseña. El certificado se lee en el navegador (`readCertificate`: RFC, CURP, nombre,
+  número de certificado, vigencia) y avisa si venció o es de otro RFC. «Revisar la e.firma» abre la llave con su contraseña y
+  comprueba que es la del certificado, también en el navegador (`verifyEfirmaKey`, con jsrsasign, que se baja hasta que se
+  usa: la llave del SAT va cifrada con 3DES y el navegador no lo trae), y dice el motivo de un «no». Con `onVerifyKey` la
+  revisión la hace su API. Calcita no manda la llave a ningún lado.
+
+```jsx
+import {CfdiSummary, EfirmaFields, clabeRule, readCfdiFile} from '@stackcraftmx/calcita/mexico';
+
+const cfdi = await readCfdiFile(file);  // null si no es factura
+<CfdiSummary cfdi={cfdi} expectedReceiverRfc={company.rfc} />
+<EfirmaFields value={efirma} onChange={setEfirma} expectedRfc={company.rfc} />   {/* revisa la llave en el navegador */}
+```
+
+Revisan la forma y leen los archivos; si el RFC existe, si la factura sigue vigente y si la llave abre lo dice su servidor.
+
 ## Dinero sin problemas de decimales
 
 En JavaScript `0.1 + 0.2` da `0.30000000000000004`. `Money` guarda los montos en centavos enteros (como el Money de PHP

package/cli/calcita.js

@@ -14,6 +14,7 @@ import {argv, cwd, exit, stdin, stdout} from 'node:process';
 import {parseArgs} from 'node:util';
 
 import {askQuestions} from './askQuestions.js';
+import {checkTexts} from './checkTexts.js';
 import {makeComponent} from './makeComponent.js';
 import {makeForm} from './makeForm.js';
 import {makeModule} from './makeModule.js';
@@ -33,6 +34,8 @@ const HELP = `Calcita: proyectos y esqueletos con la forma de los ejemplos.
   calcita make:form <módulo> <Formulario>    un formulario con sus reglas y sus textos
   calcita make:component <Componente>        un componente en src/core (lo usan varios módulos)
        --module <módulo>                     … o solo de un módulo
+  calcita check:texts                        revisa que cada t('llave') exista en todos los idiomas, y que los idiomas tengan
+                                             las mismas llaves (lo que si no se descubre en la pantalla)
 
 Opciones:
   -y, --yes                 sin preguntas: lo recomendado, más lo que diga cada opción
@@ -125,6 +128,17 @@ async function runMakeComponent(componentName) {
     stdout.write('\nListo.\n');
 }
 
+async function runCheckTexts() {
+    const {problems, checkedKeys, textFiles, languages} = await checkTexts({projectRoot: cwd()});
+    stdout.write(`Revisé ${checkedKeys} llaves escritas en el código contra ${textFiles.length} archivos de textos (${languages.join(', ') || 'sin idiomas'}).\n`);
+    if (problems.length === 0) {
+        stdout.write('Todo en su lugar.\n');
+        return;
+    }
+    stdout.write(`\n${problems.map((problem) => `  ✗ ${problem}`).join('\n')}\n`);
+    throw new CliError(`${problems.length} problema(s) con los textos.`);
+}
+
 const COMMANDS = Object.freeze({
     'new': runNew,
     'init': () => runNew('.'),
@@ -132,6 +146,7 @@ const COMMANDS = Object.freeze({
     'make:page': runMakePage,
     'make:form': runMakeForm,
     'make:component': runMakeComponent,
+    'check:texts': runCheckTexts,
 });
 
 try {