@stackcraftmx/calcita 0.47.0 → 0.51.0

package/dist/forms/security/TwoStepVerificationCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TwoStepVerificationCard.js","sources":["../../../src/forms/security/TwoStepVerificationCard.jsx"],"sourcesContent":["// «Verificación en dos pasos» de «Mi perfil»: las llaves de acceso, la app autenticadora y los códigos de recuperación.\n//\n// Lo que QUITA protección (desactivar la app, quitar una llave, generar códigos nuevos) pide la contraseña: una sesión que\n// alguien dejó abierta no debe bastar para desarmar la cuenta. Activar no la pide.\n//\n// La tarjeta no sabe del servidor: el proyecto le pasa el estado (security) y qué hacer en cada caso (actions); cada\n// acción regresa {security, recoveryCodes?} y la tarjeta avisa el estado nuevo con onSecurityChange. Las llaves de acceso\n// las crea el proyecto con createPasskey (@stackcraftmx/calcita/passkeys) dentro de actions.addPasskey: así esta puerta no\n// carga la librería de llaves.\n//\n//   <TwoStepVerificationCard security={security} onSecurityChange={setSecurity} account={session.email}\n//                            canUsePasskeys={passkeysSupported()} actions={securityActions} />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTwoStepVerification con defaultProps y\n// styleOverrides de sus partes: qr, secret, secretCode, header, headerTitle, headerText, menuIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {Form, Formik} from 'formik';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogContentText from '@mui/material/DialogContentText';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';\nimport FingerprintOutlinedIcon from '@mui/icons-material/FingerprintOutlined';\nimport PhonelinkLockOutlinedIcon from '@mui/icons-material/PhonelinkLockOutlined';\nimport VpnKeyOutlinedIcon from '@mui/icons-material/VpnKeyOutlined';\n\nimport {toastSuccess} from '@/feedback/toast.jsx';\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport FormTextField from '@/forms/FormTextField.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport {applyServerProblem} from '@/forms/applyServerProblem.js';\nimport {Yup} from '@/forms/validation.js';\nimport {\n    CURRENT_PASSWORD_MAX_LENGTH, PASSKEY_NAME_MAX_LENGTH, TOTP_CODE_MAX_LENGTH, TOTP_CODE_MIN_LENGTH, TOTP_CODE_PATTERN, normalizeTotpCode,\n} from '@/forms/security/securityRules.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport RecoveryCodesDialog from '@/security/RecoveryCodesDialog.jsx';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport CopyButton from '@/ui/actions/CopyButton.jsx';\nimport Tag from '@/ui/labels/Tag.jsx';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaTwoStepVerification)\nconst THEME_NAME = 'CalcitaTwoStepVerification';\nconst TwoStepQr = piecePart(THEME_NAME, 'Qr', Box);\nconst TwoStepSecret = piecePart(THEME_NAME, 'Secret', Stack);\nconst TwoStepSecretCode = piecePart(THEME_NAME, 'SecretCode', Box);\nconst TwoStepHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst TwoStepHeaderTitle = piecePart(THEME_NAME, 'HeaderTitle', Stack);\nconst TwoStepHeaderText = piecePart(THEME_NAME, 'HeaderText', Box);\nconst TwoStepMenuIcon = piecePart(THEME_NAME, 'MenuIcon', ListItemIcon);\n\n// los códigos que quedan desde donde se avisa en ámbar que ya son pocos\nconst FEW_CODES_LEFT = 2;\nconst QR_SIZE_PIXELS = 200;\nconst CODE_FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * Lo que hace un formulario de la tarjeta con un error: un ApiError va a su campo o arriba (applyServerProblem); un\n * error del navegador (la llave de acceso) va arriba; si la persona solo canceló, nada.\n *\n * @param {Error & {cancelled?: boolean, status?: number}} error\n * @param {object} formikHelpers\n * @param {object} values\n */\nfunction showFormError(error, formikHelpers, values) {\n    if (error?.cancelled) {\n        return;\n    }\n    if (error?.status === undefined) {\n        formikHelpers.setStatus(error?.message);\n        return;\n    }\n    applyServerProblem(error, {...formikHelpers, values});\n}\n\n/** Confirmar con la contraseña antes de quitar protección. */\nfunction PasswordDialog({open, title, description, confirmLabel, onConfirm, onClose}) {\n    const {t} = useToolkitTranslation('security');\n    const passwordSchema = Yup.object({password: Yup.string().max(CURRENT_PASSWORD_MAX_LENGTH).required(t('twoStep.passwordRequired'))});\n\n    return (\n        <Dialog open={open} onClose={onClose} maxWidth=\"xs\" fullWidth>\n            <Formik initialValues={{password: ''}} validationSchema={passwordSchema} enableReinitialize\n                    onSubmit={async (values, helpers) => {\n                        try {\n                            await onConfirm(values.password);\n                        } catch (error) {\n                            showFormError(error, helpers, values);\n                        }\n                    }}>\n                {() => (\n                    <Form noValidate>\n                        <DialogTitle>{title}</DialogTitle>\n                        <DialogContent>\n                            <Stack spacing={2}>\n                                <DialogContentText>{description}</DialogContentText>\n                                <FormProblemAlert />\n                                <FormTextField name=\"password\" label={t('twoStep.passwordLabel')} type=\"password\" autoComplete=\"current-password\" autoFocus />\n                            </Stack>\n                        </DialogContent>\n                        <DialogActions>\n                            <Button onClick={onClose}>{t('common:actions.cancel')}</Button>\n                            <SubmitButton size=\"medium\" color=\"error\">{confirmLabel}</SubmitButton>\n                        </DialogActions>\n                    </Form>\n                )}\n            </Formik>\n        </Dialog>\n    );\n}\n\n/** Activar la app: escanear el QR (o teclear la clave) y confirmar con un código. */\nfunction TotpDialog({setup, onConfirm, onClose}) {\n    const {t} = useToolkitTranslation('security');\n    const codeSchema = Yup.object({\n        code: Yup.string().trim().required(t('twoStep.codeRequired')).min(TOTP_CODE_MIN_LENGTH).max(TOTP_CODE_MAX_LENGTH)\n            .matches(TOTP_CODE_PATTERN, t('twoStep.codeFormat')),\n    });\n\n    return (\n        <Dialog open={Boolean(setup)} onClose={onClose} maxWidth=\"xs\" fullWidth>\n            <Formik initialValues={{code: ''}} validationSchema={codeSchema}\n                    onSubmit={async (values, helpers) => {\n                        try {\n                            await onConfirm(normalizeTotpCode(values.code));\n                        } catch (error) {\n                            showFormError(error, helpers, values);\n                        }\n                    }}>\n                {() => (\n                    <Form noValidate>\n                        <DialogTitle>{t('twoStep.totpDialogTitle')}</DialogTitle>\n                        <DialogContent>\n                            <Stack spacing={2}>\n                                <Typography variant=\"body2\">{t('twoStep.totpStep1')}</Typography>\n                                {setup?.qrImageUrl && (\n                                    <TwoStepQr component=\"img\" src={setup.qrImageUrl} alt={t('twoStep.totpQrAlt')}\n                                         ownSx={{width: QR_SIZE_PIXELS, height: QR_SIZE_PIXELS, alignSelf: 'center', borderRadius: 1, bgcolor: 'common.white'}} />\n                                )}\n                                <Typography variant=\"caption\" color=\"text.secondary\">{t('twoStep.totpCantScan')}</Typography>\n                                <TwoStepSecret direction=\"row\" spacing={1} ownSx={{alignItems: 'center'}}>\n                                    <TwoStepSecretCode component=\"code\" ownSx={{fontFamily: CODE_FONT, fontSize: 13, wordBreak: 'break-all'}}>{setup?.secret}</TwoStepSecretCode>\n                                    <CopyButton value={setup?.secret ?? ''} />\n                                </TwoStepSecret>\n                                <Typography variant=\"body2\">{t('twoStep.totpStep2')}</Typography>\n                                <FormProblemAlert />\n                                <FormTextField name=\"code\" label={t('twoStep.codeLabel')} autoComplete=\"one-time-code\" clearable={false}\n                                               slotProps={{htmlInput: {inputMode: 'numeric', maxLength: TOTP_CODE_MAX_LENGTH}}} />\n                                {setup?.extra}\n                            </Stack>\n                        </DialogContent>\n                        <DialogActions>\n                            <Button onClick={onClose}>{t('common:actions.cancel')}</Button>\n                            <SubmitButton size=\"medium\">{t('twoStep.activate')}</SubmitButton>\n                        </DialogActions>\n                    </Form>\n                )}\n            </Formik>\n        </Dialog>\n    );\n}\n\n/** Nombrar y crear una llave nueva (el navegador pide la huella, el rostro o el PIN); notice va arriba del nombre. */\nfunction PasskeyDialog({open, onAdd, onClose, notice}) {\n    const {t} = useToolkitTranslation('security');\n    const nameSchema = Yup.object({name: Yup.string().trim().max(PASSKEY_NAME_MAX_LENGTH)});\n\n    return (\n        <Dialog open={open} onClose={onClose} maxWidth=\"xs\" fullWidth>\n            <Formik initialValues={{name: ''}} validationSchema={nameSchema}\n                    onSubmit={async (values, helpers) => {\n                        try {\n                            await onAdd(values.name.trim());\n                        } catch (error) {\n                            showFormError(error, helpers, values);\n                        }\n                    }}>\n                {() => (\n                    <Form noValidate>\n                        <DialogTitle>{t('twoStep.passkeyDialogTitle')}</DialogTitle>\n                        <DialogContent>\n                            <Stack spacing={2}>\n                                <DialogContentText>{t('twoStep.passkeyDialogText')}</DialogContentText>\n                                {notice && <Alert severity=\"info\">{notice}</Alert>}\n                                <FormProblemAlert />\n                                <FormTextField name=\"name\" label={t('twoStep.passkeyName')} placeholder={t('twoStep.passkeyNamePlaceholder')} autoFocus\n                                               slotProps={{htmlInput: {maxLength: PASSKEY_NAME_MAX_LENGTH}}} />\n                            </Stack>\n                        </DialogContent>\n                        <DialogActions>\n                            <Button onClick={onClose}>{t('common:actions.cancel')}</Button>\n                            <SubmitButton size=\"medium\" startIcon={<FingerprintOutlinedIcon />}>{t('twoStep.createPasskey')}</SubmitButton>\n                        </DialogActions>\n                    </Form>\n                )}\n            </Formik>\n        </Dialog>\n    );\n}\n\n/**\n * Un renglón de la tarjeta: ícono, nombre, explicación chica y su botón a la derecha.\n *\n * @param {{Icon: import('react').ElementType, title: string, caption?: import('react').ReactNode, captionColor?: string, action?: import('react').ReactNode}} props\n */\nfunction SettingRow({Icon, title, caption, captionColor = 'text.secondary', action}) {\n    return (\n        <TwoStepHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', justifyContent: 'space-between'}}>\n            <TwoStepHeaderTitle direction=\"row\" spacing={1.5} ownSx={{alignItems: 'center', minWidth: 0}}>\n                <Icon color=\"action\" />\n                <TwoStepHeaderText ownSx={{minWidth: 0}}>\n                    <Typography variant=\"subtitle2\">{title}</Typography>\n                    {caption && <Typography variant=\"caption\" color={captionColor} component=\"p\">{caption}</Typography>}\n                </TwoStepHeaderText>\n            </TwoStepHeaderTitle>\n            {action}\n        </TwoStepHeader>\n    );\n}\n\n/**\n * @param {object} props\n * @param {{isEnabled: boolean, enabledAt?: string|null, passkeys: Array<{id: string, name: string, createdAt: string, lastUsedAt?: string|null}>, totp: {isEnabled: boolean, enabledAt?: string|null}, recoveryCodesRemaining: number}} props.security\n * @param {(security: {isEnabled: boolean, enabledAt?: string|null, passkeys: Array<{id: string, name: string, createdAt: string, lastUsedAt?: string|null}>, totp: {isEnabled: boolean, enabledAt?: string|null}, recoveryCodesRemaining: number}) => void} props.onSecurityChange\n * @param {object} props.actions lo que hace el proyecto en cada caso; cada una regresa {security, recoveryCodes?}\n * @param {(name: string) => Promise<{security: object, recoveryCodes?: string[]}>} props.actions.addPasskey crea la llave\n *     (createPasskey) y la guarda en el servidor\n * @param {(passkey: {id: string, name: string}, password: string) => Promise<{security: object}>} props.actions.removePasskey\n * @param {() => Promise<{secret: string, qrImageUrl: string, extra?: import('react').ReactNode}>} props.actions.startTotp\n *     la clave y su QR; extra va abajo del campo (p. ej. un atajo de los ejemplos)\n * @param {(code: string) => Promise<{security: object, recoveryCodes?: string[]}>} props.actions.confirmTotp\n * @param {(password: string) => Promise<{security: object}>} props.actions.disableTotp\n * @param {(password: string) => Promise<{security: object, recoveryCodes: string[]}>} props.actions.regenerateRecoveryCodes\n * @param {boolean} [props.canUsePasskeys] passkeysSupported() de /passkeys; sin él no se ofrece agregar llaves\n * @param {string} [props.account] la cuenta (el correo), para el archivo de los códigos\n * @param {import('react').ReactNode} [props.passkeyNotice] un aviso en el diálogo de crear la llave, antes de que el\n *     navegador la guarde (p. ej. el de la demostración: la llave queda de verdad en el llavero de la persona)\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function TwoStepVerificationCard(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaTwoStepVerification.defaultProps) y encima lo que llega aquí\n    const {security, onSecurityChange, actions, canUsePasskeys = false, account, passkeyNotice, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('security', texts);\n    const {formatDateTime} = useFormatters();\n    // qué diálogo está abierto: uno a la vez\n    const [dialog, setDialog] = useState(null);\n    const [totpSetup, setTotpSetup] = useState(null);\n    const [recoveryCodes, setRecoveryCodes] = useState(null);\n    const [error, setError] = useState(null);\n\n    const close = () => setDialog(null);\n    // lo que regresa cada acción: el estado nuevo, los códigos si hubo, el aviso y cerrar el diálogo\n    const apply = (result, message) => {\n        onSecurityChange(result.security);\n        if (result.recoveryCodes?.length) {\n            setRecoveryCodes(result.recoveryCodes);\n        }\n        if (message) {\n            toastSuccess(message);\n        }\n        close();\n    };\n\n    const startTotp = async () => {\n        setError(null);\n        try {\n            setTotpSetup(await actions.startTotp());\n        } catch (caught) {\n            setError(caught.message);\n        }\n    };\n\n    const passkeyBeingRemoved = dialog?.passkey;\n    const codesLeft = security.recoveryCodesRemaining;\n\n    return (\n        <ComponentTexts namespace=\"security\" texts={texts}>\n            <SectionCard title={t('twoStep.title')}>\n                <Stack spacing={2}>\n                    <Typography variant=\"body2\" color=\"text.secondary\">{t('twoStep.description')}</Typography>\n                    <Box>\n                        {security.isEnabled\n                            ? <Tag label={t('twoStep.active')} color=\"success\" tooltip={t('twoStep.activeSince', {date: formatDateTime(security.enabledAt)})} />\n                            : <Tag label={t('twoStep.inactive')} color=\"warning\" tooltip={t('twoStep.inactiveTooltip')} />}\n                    </Box>\n                    {error && <Alert severity=\"error\" onClose={() => setError(null)}>{error}</Alert>}\n\n                    <Divider />\n                    <SettingRow Icon={FingerprintOutlinedIcon} title={t('twoStep.passkeysTitle')}\n                                caption={security.passkeys.length === 0 ? (canUsePasskeys ? t('twoStep.passkeysEmpty') : t('passkeys.unsupported')) : null}\n                                action={canUsePasskeys && <Button size=\"small\" onClick={() => setDialog({kind: 'passkey'})}>{t('twoStep.add')}</Button>} />\n                    {security.passkeys.length > 0 && (\n                        <List dense disablePadding>\n                            {security.passkeys.map((passkey) => (\n                                <ListItem key={passkey.id} disableGutters secondaryAction={(\n                                    <Tooltip title={t('twoStep.removePasskeyTooltip')}>\n                                        <IconButton edge=\"end\" aria-label={t('twoStep.removePasskey', {name: passkey.name})}\n                                                    onClick={() => setDialog({kind: 'removePasskey', passkey})}>\n                                            <DeleteOutlineOutlinedIcon fontSize=\"small\" />\n                                        </IconButton>\n                                    </Tooltip>\n                                )}>\n                                    <TwoStepMenuIcon ownSx={{minWidth: 32}}><VpnKeyOutlinedIcon fontSize=\"small\" /></TwoStepMenuIcon>\n                                    <ListItemText primary={passkey.name}\n                                                  secondary={passkey.lastUsedAt\n                                                      ? t('twoStep.passkeyUsed', {date: formatDateTime(passkey.lastUsedAt)})\n                                                      : t('twoStep.passkeyCreated', {date: formatDateTime(passkey.createdAt)})} />\n                                </ListItem>\n                            ))}\n                        </List>\n                    )}\n\n                    <Divider />\n                    <SettingRow Icon={PhonelinkLockOutlinedIcon} title={t('twoStep.appTitle')}\n                                caption={security.totp.isEnabled ? t('twoStep.appActiveSince', {date: formatDateTime(security.totp.enabledAt)}) : t('twoStep.appDescription')}\n                                action={security.totp.isEnabled\n                                    ? <Button size=\"small\" color=\"error\" onClick={() => setDialog({kind: 'disableTotp'})}>{t('twoStep.deactivate')}</Button>\n                                    : <Button size=\"small\" onClick={startTotp}>{t('twoStep.activate')}</Button>} />\n\n                    {/* los códigos de recuperación solo existen con la verificación activa */}\n                    {security.isEnabled && (\n                        <>\n                            <Divider />\n                            <SettingRow Icon={VpnKeyOutlinedIcon} title={t('twoStep.codesTitle')}\n                                        caption={codesLeft ? t('twoStep.codesRemaining', {count: codesLeft}) : t('twoStep.codesNone')}\n                                        captionColor={codesLeft <= FEW_CODES_LEFT ? 'warning.main' : 'text.secondary'}\n                                        action={<Button size=\"small\" onClick={() => setDialog({kind: 'regenerateCodes'})}>{t('twoStep.regenerate')}</Button>} />\n                        </>\n                    )}\n                </Stack>\n\n                <PasskeyDialog open={dialog?.kind === 'passkey'} onClose={close} notice={passkeyNotice}\n                               onAdd={async (name) => apply(await actions.addPasskey(name), t('twoStep.passkeyAdded'))} />\n                <TotpDialog setup={totpSetup} onClose={() => setTotpSetup(null)}\n                            onConfirm={async (code) => {\n                                const result = await actions.confirmTotp(code);\n                                setTotpSetup(null);\n                                apply(result, t('twoStep.appActivated'));\n                            }} />\n                <PasswordDialog open={dialog?.kind === 'disableTotp'} onClose={close} title={t('twoStep.disableTitle')}\n                                description={t('twoStep.disableText')} confirmLabel={t('twoStep.deactivate')}\n                                onConfirm={async (password) => apply(await actions.disableTotp(password), t('twoStep.appDeactivated'))} />\n                <PasswordDialog open={dialog?.kind === 'removePasskey'} onClose={close}\n                                title={t('twoStep.removeTitle', {name: passkeyBeingRemoved?.name ?? ''})} description={t('twoStep.removeText')}\n                                confirmLabel={t('twoStep.remove')}\n                                onConfirm={async (password) => apply(await actions.removePasskey(passkeyBeingRemoved, password), t('twoStep.passkeyRemoved'))} />\n                <PasswordDialog open={dialog?.kind === 'regenerateCodes'} onClose={close} title={t('twoStep.regenerateTitle')}\n                                description={t('twoStep.regenerateText')} confirmLabel={t('twoStep.generate')}\n                                onConfirm={async (password) => apply(await actions.regenerateRecoveryCodes(password))} />\n                <RecoveryCodesDialog codes={recoveryCodes} account={account} onClose={() => setRecoveryCodes(null)} />\n            </SectionCard>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TwoStepVerificationCard.js","sources":["../../../src/forms/security/TwoStepVerificationCard.jsx"],"sourcesContent":["// «Verificación en dos pasos» de «Mi perfil»: las llaves de acceso, la app autenticadora y los códigos de recuperación.\n//\n// Lo que QUITA protección (desactivar la app, quitar una llave, generar códigos nuevos) pide la contraseña: una sesión que\n// alguien dejó abierta no debe bastar para desarmar la cuenta. Activar no la pide.\n//\n// La tarjeta no sabe del servidor: el proyecto le pasa el estado (security) y qué hacer en cada caso (actions); cada\n// acción regresa {security, recoveryCodes?} y la tarjeta avisa el estado nuevo con onSecurityChange. Las llaves de acceso\n// las crea el proyecto con createPasskey (@stackcraftmx/calcita/passkeys) dentro de actions.addPasskey: así esta puerta no\n// carga la librería de llaves.\n//\n//   <TwoStepVerificationCard security={security} onSecurityChange={setSecurity} account={session.email}\n//                            canUsePasskeys={passkeysSupported()} actions={securityActions} />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTwoStepVerification con defaultProps y\n// styleOverrides de sus partes: qr, secret, secretCode, header, headerTitle, headerText, menuIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {Form, Formik} from 'formik';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogContentText from '@mui/material/DialogContentText';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';\nimport FingerprintOutlinedIcon from '@mui/icons-material/FingerprintOutlined';\nimport PhonelinkLockOutlinedIcon from '@mui/icons-material/PhonelinkLockOutlined';\nimport VpnKeyOutlinedIcon from '@mui/icons-material/VpnKeyOutlined';\n\nimport {toastSuccess} from '@/feedback/toast.jsx';\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport FormTextField from '@/forms/FormTextField.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport {applyServerProblem} from '@/forms/applyServerProblem.js';\nimport {Yup} from '@/forms/validation.js';\nimport {\n    CURRENT_PASSWORD_MAX_LENGTH, PASSKEY_NAME_MAX_LENGTH, TOTP_CODE_MAX_LENGTH, TOTP_CODE_MIN_LENGTH, TOTP_CODE_PATTERN, normalizeTotpCode,\n} from '@/forms/security/securityRules.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport RecoveryCodesDialog from '@/security/RecoveryCodesDialog.jsx';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport CopyButton from '@/ui/actions/CopyButton.jsx';\nimport Tag from '@/ui/labels/Tag.jsx';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaTwoStepVerification)\nconst THEME_NAME = 'CalcitaTwoStepVerification';\nconst TwoStepQr = piecePart(THEME_NAME, 'Qr', Box);\nconst TwoStepSecret = piecePart(THEME_NAME, 'Secret', Stack);\nconst TwoStepSecretCode = piecePart(THEME_NAME, 'SecretCode', Box);\nconst TwoStepHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst TwoStepHeaderTitle = piecePart(THEME_NAME, 'HeaderTitle', Stack);\nconst TwoStepHeaderText = piecePart(THEME_NAME, 'HeaderText', Box);\nconst TwoStepMenuIcon = piecePart(THEME_NAME, 'MenuIcon', ListItemIcon);\n\n// los códigos que quedan desde donde se avisa en ámbar que ya son pocos\nconst FEW_CODES_LEFT = 2;\nconst QR_SIZE_PIXELS = 200;\nconst CODE_FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * Lo que hace un formulario de la tarjeta con un error: un ApiError va a su campo o arriba (applyServerProblem); un\n * error del navegador (la llave de acceso) va arriba; si la persona solo canceló, nada.\n *\n * @param {Error & {cancelled?: boolean, status?: number}} error\n * @param {object} formikHelpers\n * @param {object} values\n */\nfunction showFormError(error, formikHelpers, values) {\n    if (error?.cancelled) {\n        return;\n    }\n    if (error?.status === undefined) {\n        formikHelpers.setStatus(error?.message);\n        return;\n    }\n    applyServerProblem(error, {...formikHelpers, values});\n}\n\n/** Confirmar con la contraseña antes de quitar protección. */\nfunction PasswordDialog({open, title, description, confirmLabel, onConfirm, onClose}) {\n    const {t} = useToolkitTranslation('security');\n    const passwordSchema = Yup.object({password: Yup.string().max(CURRENT_PASSWORD_MAX_LENGTH).required(t('twoStep.passwordRequired'))});\n\n    return (\n        <Dialog open={open} onClose={onClose} maxWidth=\"xs\" fullWidth>\n            <Formik initialValues={{password: ''}} validationSchema={passwordSchema} enableReinitialize\n                    onSubmit={async (values, helpers) => {\n                        try {\n                            await onConfirm(values.password);\n                        } catch (error) {\n                            showFormError(error, helpers, values);\n                        }\n                    }}>\n                {() => (\n                    <Form noValidate>\n                        <DialogTitle>{title}</DialogTitle>\n                        <DialogContent>\n                            <Stack spacing={2}>\n                                <DialogContentText>{description}</DialogContentText>\n                                <FormProblemAlert />\n                                <FormTextField name=\"password\" label={t('twoStep.passwordLabel')} type=\"password\" autoComplete=\"current-password\" autoFocus />\n                            </Stack>\n                        </DialogContent>\n                        <DialogActions>\n                            <Button onClick={onClose}>{t('common:actions.cancel')}</Button>\n                            <SubmitButton size=\"medium\" color=\"error\">{confirmLabel}</SubmitButton>\n                        </DialogActions>\n                    </Form>\n                )}\n            </Formik>\n        </Dialog>\n    );\n}\n\n/** Activar la app: escanear el QR (o teclear la clave) y confirmar con un código. */\nfunction TotpDialog({setup, onConfirm, onClose}) {\n    const {t} = useToolkitTranslation('security');\n    const codeSchema = Yup.object({\n        code: Yup.string().trim().required(t('twoStep.codeRequired')).min(TOTP_CODE_MIN_LENGTH).max(TOTP_CODE_MAX_LENGTH)\n            .matches(TOTP_CODE_PATTERN, t('twoStep.codeFormat')),\n    });\n\n    return (\n        <Dialog open={Boolean(setup)} onClose={onClose} maxWidth=\"xs\" fullWidth>\n            <Formik initialValues={{code: ''}} validationSchema={codeSchema}\n                    onSubmit={async (values, helpers) => {\n                        try {\n                            await onConfirm(normalizeTotpCode(values.code));\n                        } catch (error) {\n                            showFormError(error, helpers, values);\n                        }\n                    }}>\n                {() => (\n                    <Form noValidate>\n                        <DialogTitle>{t('twoStep.totpDialogTitle')}</DialogTitle>\n                        <DialogContent>\n                            <Stack spacing={2}>\n                                <Typography variant=\"body2\">{t('twoStep.totpStep1')}</Typography>\n                                {setup?.qrImageUrl && (\n                                    <TwoStepQr component=\"img\" src={setup.qrImageUrl} alt={t('twoStep.totpQrAlt')}\n                                         ownSx={{width: QR_SIZE_PIXELS, height: QR_SIZE_PIXELS, alignSelf: 'center', borderRadius: 1, bgcolor: 'common.white'}} />\n                                )}\n                                <Typography variant=\"caption\" color=\"text.secondary\">{t('twoStep.totpCantScan')}</Typography>\n                                <TwoStepSecret direction=\"row\" spacing={1} ownSx={{alignItems: 'center'}}>\n                                    <TwoStepSecretCode component=\"code\" ownSx={{fontFamily: CODE_FONT, fontSize: 13, wordBreak: 'break-all'}}>{setup?.secret}</TwoStepSecretCode>\n                                    <CopyButton value={setup?.secret ?? ''} />\n                                </TwoStepSecret>\n                                <Typography variant=\"body2\">{t('twoStep.totpStep2')}</Typography>\n                                <FormProblemAlert />\n                                <FormTextField name=\"code\" label={t('twoStep.codeLabel')} autoComplete=\"one-time-code\" clearable={false}\n                                               slotProps={{htmlInput: {inputMode: 'numeric', maxLength: TOTP_CODE_MAX_LENGTH}}} />\n                                {setup?.extra}\n                            </Stack>\n                        </DialogContent>\n                        <DialogActions>\n                            <Button onClick={onClose}>{t('common:actions.cancel')}</Button>\n                            <SubmitButton size=\"medium\">{t('twoStep.activate')}</SubmitButton>\n                        </DialogActions>\n                    </Form>\n                )}\n            </Formik>\n        </Dialog>\n    );\n}\n\n/** Nombrar y crear una llave nueva (el navegador pide la huella, el rostro o el PIN); notice va arriba del nombre. */\nfunction PasskeyDialog({open, onAdd, onClose, notice}) {\n    const {t} = useToolkitTranslation('security');\n    const nameSchema = Yup.object({name: Yup.string().trim().max(PASSKEY_NAME_MAX_LENGTH)});\n\n    return (\n        <Dialog open={open} onClose={onClose} maxWidth=\"xs\" fullWidth>\n            <Formik initialValues={{name: ''}} validationSchema={nameSchema}\n                    onSubmit={async (values, helpers) => {\n                        try {\n                            await onAdd(values.name.trim());\n                        } catch (error) {\n                            showFormError(error, helpers, values);\n                        }\n                    }}>\n                {() => (\n                    <Form noValidate>\n                        <DialogTitle>{t('twoStep.passkeyDialogTitle')}</DialogTitle>\n                        <DialogContent>\n                            <Stack spacing={2}>\n                                <DialogContentText>{t('twoStep.passkeyDialogText')}</DialogContentText>\n                                {notice && <Alert severity=\"info\">{notice}</Alert>}\n                                <FormProblemAlert />\n                                <FormTextField name=\"name\" label={t('twoStep.passkeyName')} placeholder={t('twoStep.passkeyNamePlaceholder')} autoFocus\n                                               slotProps={{htmlInput: {maxLength: PASSKEY_NAME_MAX_LENGTH}}} />\n                            </Stack>\n                        </DialogContent>\n                        <DialogActions>\n                            <Button onClick={onClose}>{t('common:actions.cancel')}</Button>\n                            <SubmitButton size=\"medium\" startIcon={<FingerprintOutlinedIcon />}>{t('twoStep.createPasskey')}</SubmitButton>\n                        </DialogActions>\n                    </Form>\n                )}\n            </Formik>\n        </Dialog>\n    );\n}\n\n/**\n * Un renglón de la tarjeta: ícono, nombre, explicación chica y su botón a la derecha.\n *\n * @param {{Icon: import('react').ElementType, title: string, caption?: import('react').ReactNode, captionColor?: string, action?: import('react').ReactNode}} props\n */\nfunction SettingRow({Icon, title, caption, captionColor = 'text.secondary', action}) {\n    return (\n        <TwoStepHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', justifyContent: 'space-between'}}>\n            <TwoStepHeaderTitle direction=\"row\" spacing={1.5} ownSx={{alignItems: 'center', minWidth: 0}}>\n                <Icon color=\"action\" />\n                <TwoStepHeaderText ownSx={{minWidth: 0}}>\n                    <Typography variant=\"subtitle2\">{title}</Typography>\n                    {caption && <Typography variant=\"caption\" color={captionColor} component=\"p\">{caption}</Typography>}\n                </TwoStepHeaderText>\n            </TwoStepHeaderTitle>\n            {action}\n        </TwoStepHeader>\n    );\n}\n\n/**\n * @param {object} props\n * @param {{isEnabled: boolean, enabledAt?: string|null, passkeys: Array<{id: string, name: string, createdAt: string, lastUsedAt?: string|null}>, totp: {isEnabled: boolean, enabledAt?: string|null}, recoveryCodesRemaining: number}} props.security\n * @param {(security: {isEnabled: boolean, enabledAt?: string|null, passkeys: Array<{id: string, name: string, createdAt: string, lastUsedAt?: string|null}>, totp: {isEnabled: boolean, enabledAt?: string|null}, recoveryCodesRemaining: number}) => void} props.onSecurityChange\n * @param {object} props.actions lo que hace el proyecto en cada caso; cada una regresa {security, recoveryCodes?}\n * @param {(name: string) => Promise<{security: object, recoveryCodes?: string[]}>} props.actions.addPasskey crea la llave\n *     (createPasskey) y la guarda en el servidor\n * @param {(passkey: {id: string, name: string}, password: string) => Promise<{security: object}>} props.actions.removePasskey\n * @param {() => Promise<{secret: string, qrImageUrl: string, extra?: import('react').ReactNode}>} props.actions.startTotp\n *     la clave y su QR; extra va abajo del campo (p. ej. un atajo de los ejemplos)\n * @param {(code: string) => Promise<{security: object, recoveryCodes?: string[]}>} props.actions.confirmTotp\n * @param {(password: string) => Promise<{security: object}>} props.actions.disableTotp\n * @param {(password: string) => Promise<{security: object, recoveryCodes: string[]}>} props.actions.regenerateRecoveryCodes\n * @param {boolean} [props.canUsePasskeys] passkeysSupported() de /passkeys; sin él no se ofrece agregar llaves\n * @param {string} [props.account] la cuenta (el correo), para el archivo de los códigos\n * @param {import('react').ReactNode} [props.passkeyNotice] un aviso en el diálogo de crear la llave, antes de que el\n *     navegador la guarde (p. ej. el de la demostración: la llave queda de verdad en el llavero de la persona)\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nfunction TwoStepVerificationCardContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaTwoStepVerification.defaultProps) y encima lo que llega aquí\n    const {security, onSecurityChange, actions, canUsePasskeys = false, account, passkeyNotice, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('security', texts);\n    const {formatDateTime} = useFormatters();\n    // qué diálogo está abierto: uno a la vez\n    const [dialog, setDialog] = useState(null);\n    const [totpSetup, setTotpSetup] = useState(null);\n    const [recoveryCodes, setRecoveryCodes] = useState(null);\n    const [error, setError] = useState(null);\n\n    const close = () => setDialog(null);\n    // lo que regresa cada acción: el estado nuevo, los códigos si hubo, el aviso y cerrar el diálogo\n    const apply = (result, message) => {\n        onSecurityChange(result.security);\n        if (result.recoveryCodes?.length) {\n            setRecoveryCodes(result.recoveryCodes);\n        }\n        if (message) {\n            toastSuccess(message);\n        }\n        close();\n    };\n\n    const startTotp = async () => {\n        setError(null);\n        try {\n            setTotpSetup(await actions.startTotp());\n        } catch (caught) {\n            setError(caught.message);\n        }\n    };\n\n    const passkeyBeingRemoved = dialog?.passkey;\n    const codesLeft = security.recoveryCodesRemaining;\n\n    return (\n        <ComponentTexts namespace=\"security\" texts={texts}>\n            <SectionCard title={t('twoStep.title')}>\n                <Stack spacing={2}>\n                    <Typography variant=\"body2\" color=\"text.secondary\">{t('twoStep.description')}</Typography>\n                    <Box>\n                        {security.isEnabled\n                            ? <Tag label={t('twoStep.active')} color=\"success\" tooltip={t('twoStep.activeSince', {date: formatDateTime(security.enabledAt)})} />\n                            : <Tag label={t('twoStep.inactive')} color=\"warning\" tooltip={t('twoStep.inactiveTooltip')} />}\n                    </Box>\n                    {error && <Alert severity=\"error\" onClose={() => setError(null)}>{error}</Alert>}\n\n                    <Divider />\n                    <SettingRow Icon={FingerprintOutlinedIcon} title={t('twoStep.passkeysTitle')}\n                                caption={security.passkeys.length === 0 ? (canUsePasskeys ? t('twoStep.passkeysEmpty') : t('passkeys.unsupported')) : null}\n                                action={canUsePasskeys && <Button size=\"small\" onClick={() => setDialog({kind: 'passkey'})}>{t('twoStep.add')}</Button>} />\n                    {security.passkeys.length > 0 && (\n                        <List dense disablePadding>\n                            {security.passkeys.map((passkey) => (\n                                <ListItem key={passkey.id} disableGutters secondaryAction={(\n                                    <Tooltip title={t('twoStep.removePasskeyTooltip')}>\n                                        <IconButton edge=\"end\" aria-label={t('twoStep.removePasskey', {name: passkey.name})}\n                                                    onClick={() => setDialog({kind: 'removePasskey', passkey})}>\n                                            <DeleteOutlineOutlinedIcon fontSize=\"small\" />\n                                        </IconButton>\n                                    </Tooltip>\n                                )}>\n                                    <TwoStepMenuIcon ownSx={{minWidth: 32}}><VpnKeyOutlinedIcon fontSize=\"small\" /></TwoStepMenuIcon>\n                                    <ListItemText primary={passkey.name}\n                                                  secondary={passkey.lastUsedAt\n                                                      ? t('twoStep.passkeyUsed', {date: formatDateTime(passkey.lastUsedAt)})\n                                                      : t('twoStep.passkeyCreated', {date: formatDateTime(passkey.createdAt)})} />\n                                </ListItem>\n                            ))}\n                        </List>\n                    )}\n\n                    <Divider />\n                    <SettingRow Icon={PhonelinkLockOutlinedIcon} title={t('twoStep.appTitle')}\n                                caption={security.totp.isEnabled ? t('twoStep.appActiveSince', {date: formatDateTime(security.totp.enabledAt)}) : t('twoStep.appDescription')}\n                                action={security.totp.isEnabled\n                                    ? <Button size=\"small\" color=\"error\" onClick={() => setDialog({kind: 'disableTotp'})}>{t('twoStep.deactivate')}</Button>\n                                    : <Button size=\"small\" onClick={startTotp}>{t('twoStep.activate')}</Button>} />\n\n                    {/* los códigos de recuperación solo existen con la verificación activa */}\n                    {security.isEnabled && (\n                        <>\n                            <Divider />\n                            <SettingRow Icon={VpnKeyOutlinedIcon} title={t('twoStep.codesTitle')}\n                                        caption={codesLeft ? t('twoStep.codesRemaining', {count: codesLeft}) : t('twoStep.codesNone')}\n                                        captionColor={codesLeft <= FEW_CODES_LEFT ? 'warning.main' : 'text.secondary'}\n                                        action={<Button size=\"small\" onClick={() => setDialog({kind: 'regenerateCodes'})}>{t('twoStep.regenerate')}</Button>} />\n                        </>\n                    )}\n                </Stack>\n\n                <PasskeyDialog open={dialog?.kind === 'passkey'} onClose={close} notice={passkeyNotice}\n                               onAdd={async (name) => apply(await actions.addPasskey(name), t('twoStep.passkeyAdded'))} />\n                <TotpDialog setup={totpSetup} onClose={() => setTotpSetup(null)}\n                            onConfirm={async (code) => {\n                                const result = await actions.confirmTotp(code);\n                                setTotpSetup(null);\n                                apply(result, t('twoStep.appActivated'));\n                            }} />\n                <PasswordDialog open={dialog?.kind === 'disableTotp'} onClose={close} title={t('twoStep.disableTitle')}\n                                description={t('twoStep.disableText')} confirmLabel={t('twoStep.deactivate')}\n                                onConfirm={async (password) => apply(await actions.disableTotp(password), t('twoStep.appDeactivated'))} />\n                <PasswordDialog open={dialog?.kind === 'removePasskey'} onClose={close}\n                                title={t('twoStep.removeTitle', {name: passkeyBeingRemoved?.name ?? ''})} description={t('twoStep.removeText')}\n                                confirmLabel={t('twoStep.remove')}\n                                onConfirm={async (password) => apply(await actions.removePasskey(passkeyBeingRemoved, password), t('twoStep.passkeyRemoved'))} />\n                <PasswordDialog open={dialog?.kind === 'regenerateCodes'} onClose={close} title={t('twoStep.regenerateTitle')}\n                                description={t('twoStep.regenerateText')} confirmLabel={t('twoStep.generate')}\n                                onConfirm={async (password) => apply(await actions.regenerateRecoveryCodes(password))} />\n                <RecoveryCodesDialog codes={recoveryCodes} account={account} onClose={() => setRecoveryCodes(null)} />\n            </SectionCard>\n        </ComponentTexts>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst TwoStepVerificationCard = withPieceSlots(TwoStepVerificationCardContent, THEME_NAME);\nexport default TwoStepVerificationCard;\n"],"names":[],"mappings":"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"}

package/dist/forms/useValidationText.js

@@ -0,0 +1,18 @@
+"use client";
+import { useCallback } from "react";
+import { translateValidationMessage } from "./validationMessages.js";
+import { useToolkitSettings } from "../toolkit/toolkitContext.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+function useValidationText({ name, label, messages } = {}) {
+  const { readValidationMessage } = useToolkitSettings();
+  const { t } = useToolkitTranslation(["validation"]);
+  const labelText = typeof label === "string" ? label : void 0;
+  return useCallback(
+    (error) => translateValidationMessage(t, error, { label: labelText, messages, readMessage: readValidationMessage, fieldName: name }),
+    [t, name, labelText, messages, readValidationMessage]
+  );
+}
+export {
+  useValidationText
+};
+//# sourceMappingURL=useValidationText.js.map

package/dist/forms/useValidationText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidationText.js","sources":["../../src/forms/useValidationText.js"],"sourcesContent":["// El texto del error de un campo, dentro de un componente: con el idioma, los textos y la lectura de mensajes\n// (readValidationMessage) del proveedor más cercano. Lo usan todos los campos de la casa; un campo propio del proyecto\n// también:\n//\n//   const validationTextOf = useValidationText({name, label, messages});\n//   const errorText = validationTextOf(error);\n//\n// No importa yup (validationMessages.js tampoco): sirve en un proyecto que valida con otra cosa.\n//\n// Hook genérico: function (regla de la casa).\nimport {useCallback} from 'react';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n/**\n * @param {object} [options]\n * @param {string} [options.name] el name del campo: para su texto propio (validation:fields.<campo>.<regla>)\n * @param {string} [options.label] el nombre del campo, para los textos que lo dicen ({{label}})\n * @param {Record<string, string|object>} [options.messages] los textos de la pantalla para este campo, por regla\n * @returns {(error: unknown) => string|undefined}\n */\nexport function useValidationText({name, label, messages} = {}) {\n    const {readValidationMessage} = useToolkitSettings();\n    const {t} = useToolkitTranslation(['validation']);\n    const labelText = typeof label === 'string' ? label : undefined;\n    return useCallback(\n        (error) => translateValidationMessage(t, error, {label: labelText, messages, readMessage: readValidationMessage, fieldName: name}),\n        [t, name, labelText, messages, readValidationMessage],\n    );\n}\n"],"names":[],"mappings":";;;;;AAuBO,SAAS,kBAAkB,EAAC,MAAM,OAAO,SAAQ,IAAI,CAAA,GAAI;AAC5D,QAAM,EAAC,sBAAqB,IAAI,mBAAkB;AAClD,QAAM,EAAC,EAAC,IAAI,sBAAsB,CAAC,YAAY,CAAC;AAChD,QAAM,YAAY,OAAO,UAAU,WAAW,QAAQ;AACtD,SAAO;AAAA,IACH,CAAC,UAAU,2BAA2B,GAAG,OAAO,EAAC,OAAO,WAAW,UAAU,aAAa,uBAAuB,WAAW,KAAI,CAAC;AAAA,IACjI,CAAC,GAAG,MAAM,WAAW,UAAU,qBAAqB;AAAA,EAC5D;AACA;"}

package/dist/forms/validation.js

@@ -1,47 +1,51 @@
 import * as Yup from "yup";
 const NAMESPACE = "validation";
-function messageKey(name, values) {
-  return values === void 0 ? { key: `${NAMESPACE}:${name}` } : { key: `${NAMESPACE}:${name}`, values };
+function messageOf(name, rule, valuesOf) {
+  return (params = {}) => {
+    const values = { ...valuesOf ? valuesOf(params) : {}, ...params.label ? { label: params.label } : {} };
+    const fieldPath = params.originalPath ?? params.path;
+    return { key: `${NAMESPACE}:${name}`, values, rule, ...fieldPath ? { path: fieldPath } : {} };
+  };
 }
 const YUP_LOCALE = Object.freeze({
   mixed: {
-    default: messageKey("default"),
-    required: messageKey("required"),
-    defined: messageKey("required"),
-    notNull: messageKey("required"),
-    notType: messageKey("notType"),
-    oneOf: ({ values }) => messageKey("oneOf", { values: String(values) }),
-    notOneOf: ({ values }) => messageKey("notOneOf", { values: String(values) })
+    default: messageOf("default", "default"),
+    required: messageOf("required", "required"),
+    defined: messageOf("required", "defined"),
+    notNull: messageOf("required", "notNull"),
+    notType: messageOf("notType", "notType"),
+    oneOf: messageOf("oneOf", "oneOf", ({ values }) => ({ values: String(values) })),
+    notOneOf: messageOf("notOneOf", "notOneOf", ({ values }) => ({ values: String(values) }))
   },
   string: {
-    length: ({ length }) => messageKey("stringLength", { count: length }),
-    min: ({ min }) => messageKey("stringMin", { count: min }),
-    max: ({ max }) => messageKey("stringMax", { count: max }),
-    matches: messageKey("matches"),
-    email: messageKey("email"),
-    url: messageKey("url"),
-    uuid: messageKey("uuid"),
-    trim: messageKey("trim"),
-    lowercase: messageKey("lowercase"),
-    uppercase: messageKey("uppercase")
+    length: messageOf("stringLength", "length", ({ length }) => ({ count: length })),
+    min: messageOf("stringMin", "min", ({ min }) => ({ count: min })),
+    max: messageOf("stringMax", "max", ({ max }) => ({ count: max })),
+    matches: messageOf("matches", "matches"),
+    email: messageOf("email", "email"),
+    url: messageOf("url", "url"),
+    uuid: messageOf("uuid", "uuid"),
+    trim: messageOf("trim", "trim"),
+    lowercase: messageOf("lowercase", "lowercase"),
+    uppercase: messageOf("uppercase", "uppercase")
   },
   number: {
-    min: ({ min }) => messageKey("numberMin", { min }),
-    max: ({ max }) => messageKey("numberMax", { max }),
-    lessThan: ({ less }) => messageKey("lessThan", { less }),
-    moreThan: ({ more }) => messageKey("moreThan", { more }),
-    positive: messageKey("positive"),
-    negative: messageKey("negative"),
-    integer: messageKey("integer")
+    min: messageOf("numberMin", "min", ({ min }) => ({ min })),
+    max: messageOf("numberMax", "max", ({ max }) => ({ max })),
+    lessThan: messageOf("lessThan", "lessThan", ({ less }) => ({ less })),
+    moreThan: messageOf("moreThan", "moreThan", ({ more }) => ({ more })),
+    positive: messageOf("positive", "positive"),
+    negative: messageOf("negative", "negative"),
+    integer: messageOf("integer", "integer")
   },
   date: {
-    min: ({ min }) => messageKey("dateMin", { min: String(min) }),
-    max: ({ max }) => messageKey("dateMax", { max: String(max) })
+    min: messageOf("dateMin", "min", ({ min }) => ({ min: String(min) })),
+    max: messageOf("dateMax", "max", ({ max }) => ({ max: String(max) }))
   },
   array: {
-    min: ({ min }) => messageKey("arrayMin", { count: min }),
-    max: ({ max }) => messageKey("arrayMax", { count: max }),
-    length: ({ length }) => messageKey("arrayLength", { count: length })
+    min: messageOf("arrayMin", "min", ({ min }) => ({ count: min })),
+    max: messageOf("arrayMax", "max", ({ max }) => ({ count: max })),
+    length: messageOf("arrayLength", "length", ({ length }) => ({ count: length }))
   }
 });
 function buildYupLocale() {

package/dist/forms/validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation.js","sources":["../../src/forms/validation.js"],"sourcesContent":["// Mensajes por defecto de yup como LLAVES de i18n y no como texto.\n//\n// Por qué llaves: setLocale es global y se llama una sola vez. Con el texto en español, al cambiar a inglés los\n// errores seguirían en español hasta recargar. Con {key, values} el esquema no cambia y el texto se traduce al\n// PINTARLO (translateValidationMessage, lo usa FormTextField) en el idioma que esté activo en ese momento.\n//\n// Uso en un esquema: Yup.string().required().email()  → sin textos pegados.\n// Mensaje propio de un campo: .required({key: 'auth:login.emailRequired'}) o .test('x', {key: 'modulo:llave'}, fn).\n//\n// IMPORTANTE: toda llave de aquí existe en los textos del paquete, namespace validation de locales/{es,en}.js (lo revisa\n// validation.test.js). La validación de aquí es para no gastar un viaje al servidor en lo obvio; la que protege es la\n// del backend.\n//\n// buildYupLocale() se llama UNA vez en la entrada de la aplicación, antes del primer esquema.\n//\n// Funciones puras, no renderizan: function (regla de la casa). Solo importa yup (se prueba con node --test).\nimport * as Yup from 'yup';\n\nconst NAMESPACE = 'validation';\n\n/** {key: 'validation:<nombre>', values} */\nfunction messageKey(name, values) {\n    return values === undefined ? {key: `${NAMESPACE}:${name}`} : {key: `${NAMESPACE}:${name}`, values};\n}\n\n/** El locale de yup: cada mensaje por defecto es una llave del namespace validation. */\nexport const YUP_LOCALE = Object.freeze({\n    mixed: {\n        default: messageKey('default'),\n        required: messageKey('required'),\n        defined: messageKey('required'),\n        notNull: messageKey('required'),\n        notType: messageKey('notType'),\n        oneOf: ({values}) => messageKey('oneOf', {values: String(values)}),\n        notOneOf: ({values}) => messageKey('notOneOf', {values: String(values)}),\n    },\n    string: {\n        length: ({length}) => messageKey('stringLength', {count: length}),\n        min: ({min}) => messageKey('stringMin', {count: min}),\n        max: ({max}) => messageKey('stringMax', {count: max}),\n        matches: messageKey('matches'),\n        email: messageKey('email'),\n        url: messageKey('url'),\n        uuid: messageKey('uuid'),\n        trim: messageKey('trim'),\n        lowercase: messageKey('lowercase'),\n        uppercase: messageKey('uppercase'),\n    },\n    number: {\n        min: ({min}) => messageKey('numberMin', {min}),\n        max: ({max}) => messageKey('numberMax', {max}),\n        lessThan: ({less}) => messageKey('lessThan', {less}),\n        moreThan: ({more}) => messageKey('moreThan', {more}),\n        positive: messageKey('positive'),\n        negative: messageKey('negative'),\n        integer: messageKey('integer'),\n    },\n    date: {\n        min: ({min}) => messageKey('dateMin', {min: String(min)}),\n        max: ({max}) => messageKey('dateMax', {max: String(max)}),\n    },\n    array: {\n        min: ({min}) => messageKey('arrayMin', {count: min}),\n        max: ({max}) => messageKey('arrayMax', {count: max}),\n        length: ({length}) => messageKey('arrayLength', {count: length}),\n    },\n});\n\n/**\n * Instala el locale de llaves en yup. Se llama una vez en la entrada de la aplicación, antes del primer esquema.\n */\nexport function buildYupLocale() {\n    Yup.setLocale(YUP_LOCALE);\n}\n\nexport {Yup};\n\n// el texto de un error en el idioma activo vive aparte (sin yup) para los campos sueltos; aquí se re-exporta\nexport {translateValidationMessage} from '@/forms/validationMessages.js';\n"],"names":[],"mappings":";AAkBA,MAAM,YAAY;AAGlB,SAAS,WAAW,MAAM,QAAQ;AAC9B,SAAO,WAAW,SAAY,EAAC,KAAK,GAAG,SAAS,IAAI,IAAI,GAAE,IAAI,EAAC,KAAK,GAAG,SAAS,IAAI,IAAI,IAAI,OAAM;AACtG;AAGY,MAAC,aAAa,OAAO,OAAO;AAAA,EACpC,OAAO;AAAA,IACH,SAAS,WAAW,SAAS;AAAA,IAC7B,UAAU,WAAW,UAAU;AAAA,IAC/B,SAAS,WAAW,UAAU;AAAA,IAC9B,SAAS,WAAW,UAAU;AAAA,IAC9B,SAAS,WAAW,SAAS;AAAA,IAC7B,OAAO,CAAC,EAAC,OAAM,MAAM,WAAW,SAAS,EAAC,QAAQ,OAAO,MAAM,EAAC,CAAC;AAAA,IACjE,UAAU,CAAC,EAAC,OAAM,MAAM,WAAW,YAAY,EAAC,QAAQ,OAAO,MAAM,EAAC,CAAC;AAAA,EAC/E;AAAA,EACI,QAAQ;AAAA,IACJ,QAAQ,CAAC,EAAC,OAAM,MAAM,WAAW,gBAAgB,EAAC,OAAO,OAAM,CAAC;AAAA,IAChE,KAAK,CAAC,EAAC,IAAG,MAAM,WAAW,aAAa,EAAC,OAAO,IAAG,CAAC;AAAA,IACpD,KAAK,CAAC,EAAC,IAAG,MAAM,WAAW,aAAa,EAAC,OAAO,IAAG,CAAC;AAAA,IACpD,SAAS,WAAW,SAAS;AAAA,IAC7B,OAAO,WAAW,OAAO;AAAA,IACzB,KAAK,WAAW,KAAK;AAAA,IACrB,MAAM,WAAW,MAAM;AAAA,IACvB,MAAM,WAAW,MAAM;AAAA,IACvB,WAAW,WAAW,WAAW;AAAA,IACjC,WAAW,WAAW,WAAW;AAAA,EACzC;AAAA,EACI,QAAQ;AAAA,IACJ,KAAK,CAAC,EAAC,IAAG,MAAM,WAAW,aAAa,EAAC,IAAG,CAAC;AAAA,IAC7C,KAAK,CAAC,EAAC,IAAG,MAAM,WAAW,aAAa,EAAC,IAAG,CAAC;AAAA,IAC7C,UAAU,CAAC,EAAC,KAAI,MAAM,WAAW,YAAY,EAAC,KAAI,CAAC;AAAA,IACnD,UAAU,CAAC,EAAC,KAAI,MAAM,WAAW,YAAY,EAAC,KAAI,CAAC;AAAA,IACnD,UAAU,WAAW,UAAU;AAAA,IAC/B,UAAU,WAAW,UAAU;AAAA,IAC/B,SAAS,WAAW,SAAS;AAAA,EACrC;AAAA,EACI,MAAM;AAAA,IACF,KAAK,CAAC,EAAC,IAAG,MAAM,WAAW,WAAW,EAAC,KAAK,OAAO,GAAG,EAAC,CAAC;AAAA,IACxD,KAAK,CAAC,EAAC,IAAG,MAAM,WAAW,WAAW,EAAC,KAAK,OAAO,GAAG,EAAC,CAAC;AAAA,EAChE;AAAA,EACI,OAAO;AAAA,IACH,KAAK,CAAC,EAAC,IAAG,MAAM,WAAW,YAAY,EAAC,OAAO,IAAG,CAAC;AAAA,IACnD,KAAK,CAAC,EAAC,IAAG,MAAM,WAAW,YAAY,EAAC,OAAO,IAAG,CAAC;AAAA,IACnD,QAAQ,CAAC,EAAC,OAAM,MAAM,WAAW,eAAe,EAAC,OAAO,OAAM,CAAC;AAAA,EACvE;AACA,CAAC;AAKM,SAAS,iBAAiB;AAC7B,MAAI,UAAU,UAAU;AAC5B;"}
+{"version":3,"file":"validation.js","sources":["../../src/forms/validation.js"],"sourcesContent":["// Mensajes por defecto de yup como LLAVES de i18n y no como texto.\n//\n// Por qué llaves: setLocale es global y se llama una sola vez. Con el texto en español, al cambiar a inglés los\n// errores seguirían en español hasta recargar. Con {key, values} el esquema no cambia y el texto se traduce al\n// PINTARLO (translateValidationMessage, lo usa FormTextField) en el idioma que esté activo en ese momento.\n//\n// Uso en un esquema: Yup.string().required().email()  → sin textos pegados.\n// Mensaje propio de un campo: .required({key: 'auth:login.emailRequired'}) o .test('x', {key: 'modulo:llave'}, fn).\n// O sin tocar el esquema: cada mensaje lleva su regla y su campo, y la pantalla (messages del campo) o los textos del\n// proyecto (validation:fields.<campo>.<regla>) ponen el suyo (translateValidationMessage, en validationMessages.js).\n//\n// IMPORTANTE: toda llave de aquí existe en los textos del paquete, namespace validation de locales/{es,en}.js (lo revisa\n// validation.test.js). La validación de aquí es para no gastar un viaje al servidor en lo obvio; la que protege es la\n// del backend.\n//\n// buildYupLocale() se llama UNA vez en la entrada de la aplicación, antes del primer esquema.\n//\n// Funciones puras, no renderizan: function (regla de la casa). Solo importa yup (se prueba con node --test).\nimport * as Yup from 'yup';\n\nconst NAMESPACE = 'validation';\n\n/**\n * Un mensaje de yup como llave: {key: 'validation:<nombre>', values, rule, path}.\n *\n * `rule` (la regla de yup que falló: required, min, matches…) y `path` (el campo) dejan que la pantalla o los textos del\n * proyecto pongan un mensaje propio para ese campo y esa regla sin tocar el esquema (translateValidationMessage). `label`\n * (el de .label('RFC') del esquema) va en los valores, para los textos que dicen el nombre del campo.\n *\n * @param {string} name el nombre del texto en el namespace validation\n * @param {string} rule la regla de yup\n * @param {(params: object) => object} [valuesOf] los valores del texto, sacados de lo que da yup (min, max…)\n * @returns {(params?: object) => {key: string, values: object, rule: string, path?: string}}\n */\nfunction messageOf(name, rule, valuesOf) {\n    return (params = {}) => {\n        const values = {...(valuesOf ? valuesOf(params) : {}), ...(params.label ? {label: params.label} : {})};\n        // OJO: con .label('RFC') yup cambia params.path por el nombre visible; el campo de verdad viene en originalPath\n        const fieldPath = params.originalPath ?? params.path;\n        return {key: `${NAMESPACE}:${name}`, values, rule, ...(fieldPath ? {path: fieldPath} : {})};\n    };\n}\n\n/** El locale de yup: cada mensaje por defecto es una llave del namespace validation, con su regla y su campo. */\nexport const YUP_LOCALE = Object.freeze({\n    mixed: {\n        default: messageOf('default', 'default'),\n        required: messageOf('required', 'required'),\n        defined: messageOf('required', 'defined'),\n        notNull: messageOf('required', 'notNull'),\n        notType: messageOf('notType', 'notType'),\n        oneOf: messageOf('oneOf', 'oneOf', ({values}) => ({values: String(values)})),\n        notOneOf: messageOf('notOneOf', 'notOneOf', ({values}) => ({values: String(values)})),\n    },\n    string: {\n        length: messageOf('stringLength', 'length', ({length}) => ({count: length})),\n        min: messageOf('stringMin', 'min', ({min}) => ({count: min})),\n        max: messageOf('stringMax', 'max', ({max}) => ({count: max})),\n        matches: messageOf('matches', 'matches'),\n        email: messageOf('email', 'email'),\n        url: messageOf('url', 'url'),\n        uuid: messageOf('uuid', 'uuid'),\n        trim: messageOf('trim', 'trim'),\n        lowercase: messageOf('lowercase', 'lowercase'),\n        uppercase: messageOf('uppercase', 'uppercase'),\n    },\n    number: {\n        min: messageOf('numberMin', 'min', ({min}) => ({min})),\n        max: messageOf('numberMax', 'max', ({max}) => ({max})),\n        lessThan: messageOf('lessThan', 'lessThan', ({less}) => ({less})),\n        moreThan: messageOf('moreThan', 'moreThan', ({more}) => ({more})),\n        positive: messageOf('positive', 'positive'),\n        negative: messageOf('negative', 'negative'),\n        integer: messageOf('integer', 'integer'),\n    },\n    date: {\n        min: messageOf('dateMin', 'min', ({min}) => ({min: String(min)})),\n        max: messageOf('dateMax', 'max', ({max}) => ({max: String(max)})),\n    },\n    array: {\n        min: messageOf('arrayMin', 'min', ({min}) => ({count: min})),\n        max: messageOf('arrayMax', 'max', ({max}) => ({count: max})),\n        length: messageOf('arrayLength', 'length', ({length}) => ({count: length})),\n    },\n});\n\n/**\n * Instala el locale de llaves en yup. Se llama una vez en la entrada de la aplicación, antes del primer esquema.\n */\nexport function buildYupLocale() {\n    Yup.setLocale(YUP_LOCALE);\n}\n\nexport {Yup};\n\n// el texto de un error en el idioma activo vive aparte (sin yup) para los campos sueltos; aquí se re-exporta\nexport {translateValidationMessage} from '@/forms/validationMessages.js';\n"],"names":[],"mappings":"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"}

package/dist/forms/validationMessages.js

@@ -1,16 +1,73 @@
-function translateValidationMessage(translate, error) {
-  if (!error) {
+import { createLogger } from "../observability/logger.js";
+const NAMESPACE = "validation";
+const DEFAULT_MESSAGE_KEY = `${NAMESPACE}:default`;
+const log = createLogger("forms");
+const warnedShapes = /* @__PURE__ */ new Set();
+function fieldKeyOf(path) {
+  return String(path).replace(/\[\d+\]/g, "").split(".").filter((step) => step !== "" && !/^\d+$/.test(step)).join(".");
+}
+function normalizedValidationMessage(error) {
+  if (typeof error === "string") {
+    return { text: error };
+  }
+  if (!error || typeof error !== "object") {
+    return null;
+  }
+  const key = typeof error.key === "string" ? error.key : typeof error.msg === "string" ? error.msg : null;
+  if (key) {
+    return { key, values: error.values ?? error.params ?? {}, rule: error.rule, path: error.path };
+  }
+  if (typeof error.message === "string") {
+    return { text: error.message };
+  }
+  if (error.message && typeof error.message === "object") {
+    const inner = normalizedValidationMessage(error.message);
+    return inner && "key" in inner && !inner.rule && error.type ? { ...inner, rule: error.type } : inner;
+  }
+  return null;
+}
+function warnUnknownShape(error) {
+  const shape = Object.keys(error).sort().join(",");
+  if (warnedShapes.has(shape)) {
+    return;
+  }
+  warnedShapes.add(shape);
+  log.warn(`Un mensaje de validación con forma desconocida ({${shape}}): se enseña el mensaje general. Conéctelo con readValidationMessage de ToolkitProvider.`);
+}
+function translateValidationMessage(translate, error, { label, messages, readMessage, fieldName } = {}) {
+  if (error === void 0 || error === null || error === "" || error === false) {
     return void 0;
   }
-  if (typeof error === "string") {
-    return error;
+  const read = readMessage ? readMessage(error) : void 0;
+  const message = normalizedValidationMessage(read === void 0 || read === null ? error : read);
+  if (!message) {
+    warnUnknownShape(typeof error === "object" ? error : { value: error });
+    return translate(DEFAULT_MESSAGE_KEY);
   }
-  if (typeof error === "object" && error.key) {
-    return translate(error.key, error.values);
+  if ("text" in message) {
+    return message.text;
   }
-  return String(error);
+  const values = label && message.values.label === void 0 ? { ...message.values, label } : message.values;
+  const ownMessage = message.rule ? messages?.[message.rule] : void 0;
+  if (ownMessage !== void 0 && ownMessage !== null) {
+    return translateValidationMessage(translate, ownMessage, { label });
+  }
+  const path = message.path ?? fieldName;
+  if (message.rule && path) {
+    const fieldText = translate(`${NAMESPACE}:fields.${fieldKeyOf(path)}.${message.rule}`, { ...values, defaultValue: "" });
+    if (fieldText) {
+      return fieldText;
+    }
+  }
+  return translate(message.key, values);
+}
+function ruleMessageOf(key, rule, values = {}) {
+  return { key, values, rule };
 }
 export {
+  fieldKeyOf,
+  normalizedValidationMessage,
+  ruleMessageOf,
   translateValidationMessage
 };
 //# sourceMappingURL=validationMessages.js.map

package/dist/forms/validationMessages.js.map

@@ -1 +1 @@
-{"version":3,"file":"validationMessages.js","sources":["../../src/forms/validationMessages.js"],"sourcesContent":["// El texto de un error de validación en el idioma activo. Aparte de validation.js a propósito: no importa yup, así lo usan\n// los campos sueltos de la puerta principal (inputs/) sin cargar yup en un proyecto que no valida con él.\n//\n// Función pura, no renderiza: function (regla de la casa).\n\n/**\n * Texto de un error de validación en el idioma activo.\n * Acepta las dos formas que llegan: {key, values} de yup (buildYupLocale), o un texto ya traducido (los del backend).\n *\n * @param {(key: string, values?: object) => string} translate el t de useToolkitTranslation\n * @param {string|{key: string, values?: object}|undefined|null} error\n * @returns {string|undefined}\n */\nexport function translateValidationMessage(translate, error) {\n    if (!error) {\n        return undefined;\n    }\n    if (typeof error === 'string') {\n        return error;\n    }\n    if (typeof error === 'object' && error.key) {\n        return translate(error.key, error.values);\n    }\n    return String(error);\n}\n"],"names":[],"mappings":"AAaO,SAAS,2BAA2B,WAAW,OAAO;AACzD,MAAI,CAAC,OAAO;AACR,WAAO;AAAA,EACX;AACA,MAAI,OAAO,UAAU,UAAU;AAC3B,WAAO;AAAA,EACX;AACA,MAAI,OAAO,UAAU,YAAY,MAAM,KAAK;AACxC,WAAO,UAAU,MAAM,KAAK,MAAM,MAAM;AAAA,EAC5C;AACA,SAAO,OAAO,KAAK;AACvB;"}
+{"version":3,"file":"validationMessages.js","sources":["../../src/forms/validationMessages.js"],"sourcesContent":["// El texto de un error de validación en el idioma activo. Aparte de validation.js a propósito: no importa yup, así lo usan\n// los campos sueltos de la puerta principal (inputs/) sin cargar yup en un proyecto que no valida con él.\n//\n// De dónde sale el texto, en este orden (el primero que exista gana):\n//   1. el de la pantalla para ese campo y esa regla: <TextInput messages={{matches: 'El RFC lleva 12 o 13 caracteres'}} />\n//   2. el de los textos del proyecto para ese campo y esa regla: validation:fields.<campo>.<regla>\n//      ({es: {validation: {fields: {rfc: {matches: '…'}}}}}); el campo sin índices de lista (contacts[2].email → contacts.email)\n//   3. el del mensaje mismo: la llave que puso Calcita (buildYupLocale) o el esquema ({key: 'clientes:rfcLargo'})\n// Así el negocio pide un mensaje muy específico y se agrega un texto, sin tocar el esquema ni los mensajes de Calcita.\n//\n// Las formas de mensaje que entiende (readValidationMessage de ToolkitProvider lee cualquier otra, la de un sistema que ya\n// existe):\n//   'El correo ya existe.'               un texto ya escrito (el del backend): tal cual\n//   {key, values}                        la de Calcita (y rule y path, que pone buildYupLocale)\n//   {msg, values}                        la de muchos sistemas con i18next (su setLocale de yup)\n//   {message: 'texto'}                   un texto dentro de un objeto\n//   {message: {…}, type}                 el error entero de react-hook-form: se lee su message\n// Una forma que no entiende NO se pinta como «[object Object]»: sale el mensaje general y se avisa en la consola.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\nimport {createLogger} from '@/observability/logger.js';\n\nconst NAMESPACE = 'validation';\nconst DEFAULT_MESSAGE_KEY = `${NAMESPACE}:default`;\nconst log = createLogger('forms');\n// las formas de mensaje que no se entendieron y de las que ya se avisó (una vez por forma)\nconst warnedShapes = new Set();\n\n/**\n * El campo sin índices de lista, para buscar su texto propio: 'contacts[2].email' y 'contacts.2.email' son 'contacts.email'.\n *\n * @param {string} path\n * @returns {string}\n */\nexport function fieldKeyOf(path) {\n    return String(path)\n        .replace(/\\[\\d+\\]/g, '')\n        .split('.')\n        .filter((step) => step !== '' && !/^\\d+$/.test(step))\n        .join('.');\n}\n\n/**\n * Un mensaje en la forma de Calcita, venga como venga.\n *\n * @param {unknown} error\n * @returns {{text: string}|{key: string, values: object, rule?: string, path?: string}|null} null: no se entendió\n */\nexport function normalizedValidationMessage(error) {\n    if (typeof error === 'string') {\n        return {text: error};\n    }\n    if (!error || typeof error !== 'object') {\n        return null;\n    }\n    const key = typeof error.key === 'string' ? error.key : (typeof error.msg === 'string' ? error.msg : null);\n    if (key) {\n        return {key, values: error.values ?? error.params ?? {}, rule: error.rule, path: error.path};\n    }\n    if (typeof error.message === 'string') {\n        return {text: error.message};\n    }\n    if (error.message && typeof error.message === 'object') {\n        const inner = normalizedValidationMessage(error.message);\n        // el error de react-hook-form trae la regla en `type`\n        return inner && 'key' in inner && !inner.rule && error.type ? {...inner, rule: error.type} : inner;\n    }\n    return null;\n}\n\n/**\n * Avisa una vez por forma de un mensaje que no se entendió (sus llaves), en vez de pintar «[object Object]».\n *\n * @param {object} error\n * @returns {void}\n */\nfunction warnUnknownShape(error) {\n    const shape = Object.keys(error).sort().join(',');\n    if (warnedShapes.has(shape)) {\n        return;\n    }\n    warnedShapes.add(shape);\n    log.warn(`Un mensaje de validación con forma desconocida ({${shape}}): se enseña el mensaje general. Conéctelo con readValidationMessage de ToolkitProvider.`);\n}\n\n/**\n * Texto de un error de validación en el idioma activo.\n *\n * @param {(key: string, values?: object) => string} translate el t de useToolkitTranslation (respeta `defaultValue`, como el\n *     de i18next: con él busca los textos opcionales sin avisar que faltan)\n * @param {unknown} error lo que dejó la validación en el campo\n * @param {object} [options]\n * @param {string} [options.label] el nombre del campo, para los textos que lo dicen ({{label}}: «Escriba {{label}}»)\n * @param {Record<string, string|object>} [options.messages] los textos de la pantalla para este campo, por regla\n *     ({required: 'Escriba el RFC', matches: 'El RFC lleva 12 o 13 caracteres'}); ya traducidos o como {key, values}\n * @param {((error: unknown) => unknown)|null} [options.readMessage] cómo leer el mensaje de un sistema que ya existe\n *     (readValidationMessage de ToolkitProvider): regresa un texto, {key, values} o undefined para la lectura de siempre\n * @param {string} [options.fieldName] el name del campo que pinta el error: para el texto propio de ese campo cuando el\n *     mensaje no trae su campo (las reglas propias, los de un sistema que ya existe)\n * @returns {string|undefined}\n */\nexport function translateValidationMessage(translate, error, {label, messages, readMessage, fieldName} = {}) {\n    if (error === undefined || error === null || error === '' || error === false) {\n        return undefined;\n    }\n    const read = readMessage ? readMessage(error) : undefined;\n    const message = normalizedValidationMessage(read === undefined || read === null ? error : read);\n    if (!message) {\n        warnUnknownShape(typeof error === 'object' ? error : {value: error});\n        return translate(DEFAULT_MESSAGE_KEY);\n    }\n    if ('text' in message) {\n        return message.text;\n    }\n    const values = label && message.values.label === undefined ? {...message.values, label} : message.values;\n\n    // 1. el de la pantalla para esta regla\n    const ownMessage = message.rule ? messages?.[message.rule] : undefined;\n    if (ownMessage !== undefined && ownMessage !== null) {\n        return translateValidationMessage(translate, ownMessage, {label});\n    }\n    // 2. el de los textos del proyecto para este campo y esta regla (opcional: sin él no se avisa que falta)\n    const path = message.path ?? fieldName;\n    if (message.rule && path) {\n        const fieldText = translate(`${NAMESPACE}:fields.${fieldKeyOf(path)}.${message.rule}`, {...values, defaultValue: ''});\n        if (fieldText) {\n            return fieldText;\n        }\n    }\n    // 3. el del mensaje\n    return translate(message.key, values);\n}\n\n/**\n * El mensaje de una regla propia (.test) como lo dejan las de Calcita: su llave, sus valores y el nombre de la regla, para\n * que la pantalla (messages del campo) o los textos del proyecto (validation:fields.<campo>.<regla>) pongan el suyo sin\n * tocar el esquema. Es un objeto fijo: quien lo lea (rule.message.key) lo encuentra como siempre.\n *\n *   {name: 'percent', message: ruleMessageOf('validation:percent', 'percent', {min: 0, max: 100}), test: …}\n *\n * @param {string} key la llave del texto ('validation:percent')\n * @param {string} rule el nombre de la regla\n * @param {object} [values] los valores del texto\n * @returns {{key: string, values: object, rule: string}}\n */\nexport function ruleMessageOf(key, rule, values = {}) {\n    return {key, values, rule};\n}\n"],"names":[],"mappings":";AAsBA,MAAM,YAAY;AAClB,MAAM,sBAAsB,GAAG,SAAS;AACxC,MAAM,MAAM,aAAa,OAAO;AAEhC,MAAM,eAAe,oBAAI,IAAG;AAQrB,SAAS,WAAW,MAAM;AAC7B,SAAO,OAAO,IAAI,EACb,QAAQ,YAAY,EAAE,EACtB,MAAM,GAAG,EACT,OAAO,CAAC,SAAS,SAAS,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,EACnD,KAAK,GAAG;AACjB;AAQO,SAAS,4BAA4B,OAAO;AAC/C,MAAI,OAAO,UAAU,UAAU;AAC3B,WAAO,EAAC,MAAM,MAAK;AAAA,EACvB;AACA,MAAI,CAAC,SAAS,OAAO,UAAU,UAAU;AACrC,WAAO;AAAA,EACX;AACA,QAAM,MAAM,OAAO,MAAM,QAAQ,WAAW,MAAM,MAAO,OAAO,MAAM,QAAQ,WAAW,MAAM,MAAM;AACrG,MAAI,KAAK;AACL,WAAO,EAAC,KAAK,QAAQ,MAAM,UAAU,MAAM,UAAU,CAAA,GAAI,MAAM,MAAM,MAAM,MAAM,MAAM,KAAI;AAAA,EAC/F;AACA,MAAI,OAAO,MAAM,YAAY,UAAU;AACnC,WAAO,EAAC,MAAM,MAAM,QAAO;AAAA,EAC/B;AACA,MAAI,MAAM,WAAW,OAAO,MAAM,YAAY,UAAU;AACpD,UAAM,QAAQ,4BAA4B,MAAM,OAAO;AAEvD,WAAO,SAAS,SAAS,SAAS,CAAC,MAAM,QAAQ,MAAM,OAAO,EAAC,GAAG,OAAO,MAAM,MAAM,KAAI,IAAI;AAAA,EACjG;AACA,SAAO;AACX;AAQA,SAAS,iBAAiB,OAAO;AAC7B,QAAM,QAAQ,OAAO,KAAK,KAAK,EAAE,KAAI,EAAG,KAAK,GAAG;AAChD,MAAI,aAAa,IAAI,KAAK,GAAG;AACzB;AAAA,EACJ;AACA,eAAa,IAAI,KAAK;AACtB,MAAI,KAAK,oDAAoD,KAAK,2FAA2F;AACjK;AAkBO,SAAS,2BAA2B,WAAW,OAAO,EAAC,OAAO,UAAU,aAAa,UAAS,IAAI,IAAI;AACzG,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,MAAM,UAAU,OAAO;AAC1E,WAAO;AAAA,EACX;AACA,QAAM,OAAO,cAAc,YAAY,KAAK,IAAI;AAChD,QAAM,UAAU,4BAA4B,SAAS,UAAa,SAAS,OAAO,QAAQ,IAAI;AAC9F,MAAI,CAAC,SAAS;AACV,qBAAiB,OAAO,UAAU,WAAW,QAAQ,EAAC,OAAO,MAAK,CAAC;AACnE,WAAO,UAAU,mBAAmB;AAAA,EACxC;AACA,MAAI,UAAU,SAAS;AACnB,WAAO,QAAQ;AAAA,EACnB;AACA,QAAM,SAAS,SAAS,QAAQ,OAAO,UAAU,SAAY,EAAC,GAAG,QAAQ,QAAQ,MAAK,IAAI,QAAQ;AAGlG,QAAM,aAAa,QAAQ,OAAO,WAAW,QAAQ,IAAI,IAAI;AAC7D,MAAI,eAAe,UAAa,eAAe,MAAM;AACjD,WAAO,2BAA2B,WAAW,YAAY,EAAC,MAAK,CAAC;AAAA,EACpE;AAEA,QAAM,OAAO,QAAQ,QAAQ;AAC7B,MAAI,QAAQ,QAAQ,MAAM;AACtB,UAAM,YAAY,UAAU,GAAG,SAAS,WAAW,WAAW,IAAI,CAAC,IAAI,QAAQ,IAAI,IAAI,EAAC,GAAG,QAAQ,cAAc,GAAE,CAAC;AACpH,QAAI,WAAW;AACX,aAAO;AAAA,IACX;AAAA,EACJ;AAEA,SAAO,UAAU,QAAQ,KAAK,MAAM;AACxC;AAcO,SAAS,cAAc,KAAK,MAAM,SAAS,CAAA,GAAI;AAClD,SAAO,EAAC,KAAK,QAAQ,KAAI;AAC7B;"}

package/dist/forms.js

@@ -13,6 +13,7 @@ import { default as default11 } from "./forms/FormProblemAlert.js";
 import { default as default12 } from "./forms/FormRepeatingFields.js";
 import { default as default13 } from "./forms/FormTransferListField.js";
 import { listTotalAtMostRule, listTotalOf, orderedInListRule, uniqueInListRule } from "./forms/listRules.js";
+import { percentRule, sameAsFieldRule } from "./forms/fieldRules.js";
 import { default as default14 } from "./forms/FormSelectField.js";
 import { default as default15 } from "./forms/FormServerProblem.js";
 import { default as default16 } from "./forms/FormTextField.js";
@@ -68,6 +69,8 @@ export {
   normalizeRecoveryCode,
   normalizeTotpCode,
   orderedInListRule,
+  percentRule,
+  sameAsFieldRule,
   splitRowFieldErrors,
   splitServerFieldErrors,
   translateValidationMessage,

package/dist/forms.js.map

@@ -1 +1 @@
-{"version":3,"file":"forms.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"forms.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hookForm/FormProblemAlert.js

@@ -2,11 +2,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useFormContext, useFormState } from "react-hook-form";
 import Alert from "@mui/material/Alert";
-import { piecePart } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaFormProblemAlert";
 const ProblemAlert = piecePart(THEME_NAME, "Root", Alert);
-function FormProblemAlert({ control, sx, ...unknownProps }) {
+function FormProblemAlertContent({ control, sx, ...unknownProps }) {
   warnUnknownProps("FormProblemAlert", unknownProps);
   const formContext = useFormContext();
   const { errors } = useFormState({ control: control ?? formContext?.control });
@@ -16,6 +16,7 @@ function FormProblemAlert({ control, sx, ...unknownProps }) {
   }
   return /* @__PURE__ */ jsx(ProblemAlert, { severity: "error", role: "alert", sx, children: message });
 }
+const FormProblemAlert = withPieceSlots(FormProblemAlertContent, THEME_NAME);
 export {
   FormProblemAlert as default
 };

package/dist/hookForm/FormProblemAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormProblemAlert.js","sources":["../../src/hookForm/FormProblemAlert.jsx"],"sourcesContent":["// El aviso de arriba del formulario de react-hook-form: lo que el servidor dijo que no es de un campo. applyServerProblem\n// lo deja en errors.root.server; aquí se pinta. Sin mensaje no pinta nada ni ocupa lugar.\n//\n// Se cambia desde el tema del proyecto: components.CalcitaFormProblemAlert con styleOverrides.root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormContext, useFormState} from 'react-hook-form';\nimport Alert from '@mui/material/Alert';\nimport {piecePart} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaFormProblemAlert): el estilo del proyecto va\n// después del de MUI y el sx de la pantalla al final\nconst THEME_NAME = 'CalcitaFormProblemAlert';\nconst ProblemAlert = piecePart(THEME_NAME, 'Root', Alert);\n\n/**\n * @param {{control?: object, sx?: object}} props control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormProblemAlert({control, sx, ...unknownProps}) {\n    warnUnknownProps('FormProblemAlert', unknownProps);\n    const formContext = useFormContext();\n    const {errors} = useFormState({control: control ?? formContext?.control});\n    const message = errors.root?.server?.message;\n\n    // guard clause: sin aviso del servidor\n    if (!message) {\n        return null;\n    }\n    return <ProblemAlert severity=\"error\" role=\"alert\" sx={sx}>{message}</ProblemAlert>;\n}\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,QAAQ,KAAK;AAKxD,SAAwB,iBAAiB,EAAC,SAAS,IAAI,GAAG,gBAAe;AACrE,mBAAiB,oBAAoB,YAAY;AACjD,QAAM,cAAc,eAAA;AACpB,QAAM,EAAC,WAAU,aAAa,EAAC,SAAS,WAAW,aAAa,SAAQ;AACxE,QAAM,UAAU,OAAO,MAAM,QAAQ;AAGrC,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,6BAAQ,cAAA,EAAa,UAAS,SAAQ,MAAK,SAAQ,IAAS,UAAA,SAAQ;AACxE;"}
+{"version":3,"file":"FormProblemAlert.js","sources":["../../src/hookForm/FormProblemAlert.jsx"],"sourcesContent":["// El aviso de arriba del formulario de react-hook-form: lo que el servidor dijo que no es de un campo. applyServerProblem\n// lo deja en errors.root.server; aquí se pinta. Sin mensaje no pinta nada ni ocupa lugar.\n//\n// Se cambia desde el tema del proyecto: components.CalcitaFormProblemAlert con styleOverrides.root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormContext, useFormState} from 'react-hook-form';\nimport Alert from '@mui/material/Alert';\nimport {piecePart, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaFormProblemAlert): el estilo del proyecto va\n// después del de MUI y el sx de la pantalla al final\nconst THEME_NAME = 'CalcitaFormProblemAlert';\nconst ProblemAlert = piecePart(THEME_NAME, 'Root', Alert);\n\n/**\n * @param {{control?: object, sx?: object}} props control: el de useForm, si la pantalla no usa FormProvider\n */\nfunction FormProblemAlertContent({control, sx, ...unknownProps}) {\n    warnUnknownProps('FormProblemAlert', unknownProps);\n    const formContext = useFormContext();\n    const {errors} = useFormState({control: control ?? formContext?.control});\n    const message = errors.root?.server?.message;\n\n    // guard clause: sin aviso del servidor\n    if (!message) {\n        return null;\n    }\n    return <ProblemAlert severity=\"error\" role=\"alert\" sx={sx}>{message}</ProblemAlert>;\n}\n\nconst FormProblemAlert = withPieceSlots(FormProblemAlertContent, THEME_NAME);\nexport default FormProblemAlert;\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,QAAQ,KAAK;AAKxD,SAAS,wBAAwB,EAAC,SAAS,IAAI,GAAG,gBAAe;AAC7D,mBAAiB,oBAAoB,YAAY;AACjD,QAAM,cAAc,eAAA;AACpB,QAAM,EAAC,WAAU,aAAa,EAAC,SAAS,WAAW,aAAa,SAAQ;AACxE,QAAM,UAAU,OAAO,MAAM,QAAQ;AAGrC,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,6BAAQ,cAAA,EAAa,UAAS,SAAQ,MAAK,SAAQ,IAAS,UAAA,SAAQ;AACxE;AAEA,MAAM,mBAAmB,eAAe,yBAAyB,UAAU;"}

package/dist/hookForm/SubmitButton.js

@@ -3,12 +3,17 @@ import { jsx } from "react/jsx-runtime";
 import { useFormContext, useFormState } from "react-hook-form";
 import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
-function SubmitButton({ children, disabled, isPending, control, ...buttonProps }) {
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaSubmitButton";
+const SubmitButtonRoot = piecePart(THEME_NAME, "Root", Button);
+function SubmitButtonContent(props) {
+  const { children, disabled, isPending, control, ...buttonProps } = usePieceProps(props, THEME_NAME);
   const formContext = useFormContext();
   const { isSubmitting } = useFormState({ control: control ?? formContext?.control });
   const isBusy = Boolean(isPending ?? isSubmitting);
-  return /* @__PURE__ */ jsx(Button, { type: "submit", variant: "contained", size: "large", disabled: disabled || isBusy, "aria-busy": isBusy, ...buttonProps, children: isBusy ? /* @__PURE__ */ jsx(CircularProgress, { size: 22, color: "inherit" }) : children });
+  return /* @__PURE__ */ jsx(SubmitButtonRoot, { type: "submit", variant: "contained", size: "large", disabled: disabled || isBusy, "aria-busy": isBusy, ...buttonProps, children: isBusy ? /* @__PURE__ */ jsx(CircularProgress, { size: 22, color: "inherit" }) : children });
 }
+const SubmitButton = withPieceSlots(SubmitButtonContent, THEME_NAME);
 export {
   SubmitButton as default
 };

package/dist/hookForm/SubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","sources":["../../src/hookForm/SubmitButton.jsx"],"sourcesContent":["// Botón de enviar de react-hook-form: se bloquea y muestra su indicador mientras se envía (un doble clic no manda dos\n// peticiones). Mismo look que el SubmitButton de formik.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormContext, useFormState} from 'react-hook-form';\nimport Button from '@mui/material/Button';\nimport CircularProgress from '@mui/material/CircularProgress';\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.isPending] cuando el envío lo lleva una máquina de estados y no el handleSubmit\n * @param {object} [props.control] el de useForm, si la pantalla no usa FormProvider\n * @param {object} [props.sx] (y lo demás del Button de MUI: size, fullWidth, startIcon…)\n * @param {'small'|'medium'|'large'} [props.size]\n * @param {boolean} [props.fullWidth]\n * @param {import('react').ReactNode} [props.startIcon]\n */\nexport default function SubmitButton({children, disabled, isPending, control, ...buttonProps}) {\n    const formContext = useFormContext();\n    const {isSubmitting} = useFormState({control: control ?? formContext?.control});\n    const isBusy = Boolean(isPending ?? isSubmitting);\n\n    return (\n        <Button type=\"submit\" variant=\"contained\" size=\"large\" disabled={disabled || isBusy} aria-busy={isBusy} {...buttonProps}>\n            {isBusy ? <CircularProgress size={22} color=\"inherit\" /> : children}\n        </Button>\n    );\n}\n"],"names":[],"mappings":";;;;;AAmBA,SAAwB,aAAa,EAAC,UAAU,UAAU,WAAW,SAAS,GAAG,eAAc;AAC3F,QAAM,cAAc,eAAA;AACpB,QAAM,EAAC,iBAAgB,aAAa,EAAC,SAAS,WAAW,aAAa,SAAQ;AAC9E,QAAM,SAAS,QAAQ,aAAa,YAAY;AAEhD,SACI,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,MAAK,SAAQ,UAAU,YAAY,QAAQ,aAAW,QAAS,GAAG,aACvG,UAAA,SAAS,oBAAC,kBAAA,EAAiB,MAAM,IAAI,OAAM,WAAU,IAAK,SAAA,CAC/D;AAER;"}
+{"version":3,"file":"SubmitButton.js","sources":["../../src/hookForm/SubmitButton.jsx"],"sourcesContent":["// Botón de enviar de react-hook-form: se bloquea y muestra su indicador mientras se envía (un doble clic no manda dos\n// peticiones). Mismo look que el SubmitButton de formik.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSubmitButton con defaultProps, styleOverrides de\n// sus partes (root) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormContext, useFormState} from 'react-hook-form';\nimport Button from '@mui/material/Button';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSubmitButton)\nconst THEME_NAME = 'CalcitaSubmitButton';\nconst SubmitButtonRoot = piecePart(THEME_NAME, 'Root', Button);\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.isPending] cuando el envío lo lleva una máquina de estados y no el handleSubmit\n * @param {object} [props.control] el de useForm, si la pantalla no usa FormProvider\n * @param {object} [props.sx] (y lo demás del Button de MUI: size, fullWidth, startIcon…)\n * @param {'small'|'medium'|'large'} [props.size]\n * @param {boolean} [props.fullWidth]\n * @param {import('react').ReactNode} [props.startIcon]\n */\nfunction SubmitButtonContent(props) {\n    const {children, disabled, isPending, control, ...buttonProps} = usePieceProps(props, THEME_NAME);\n    const formContext = useFormContext();\n    const {isSubmitting} = useFormState({control: control ?? formContext?.control});\n    const isBusy = Boolean(isPending ?? isSubmitting);\n\n    return (\n        <SubmitButtonRoot type=\"submit\" variant=\"contained\" size=\"large\" disabled={disabled || isBusy} aria-busy={isBusy} {...buttonProps}>\n            {isBusy ? <CircularProgress size={22} color=\"inherit\" /> : children}\n        </SubmitButtonRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst SubmitButton = withPieceSlots(SubmitButtonContent, THEME_NAME);\nexport default SubmitButton;\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,aAAa;AACnB,MAAM,mBAAmB,UAAU,YAAY,QAAQ,MAAM;AAa7D,SAAS,oBAAoB,OAAO;AAChC,QAAM,EAAC,UAAU,UAAU,WAAW,SAAS,GAAG,gBAAe,cAAc,OAAO,UAAU;AAChG,QAAM,cAAc,eAAA;AACpB,QAAM,EAAC,iBAAgB,aAAa,EAAC,SAAS,WAAW,aAAa,SAAQ;AAC9E,QAAM,SAAS,QAAQ,aAAa,YAAY;AAEhD,SACI,oBAAC,oBAAiB,MAAK,UAAS,SAAQ,aAAY,MAAK,SAAQ,UAAU,YAAY,QAAQ,aAAW,QAAS,GAAG,aACjH,UAAA,SAAS,oBAAC,kBAAA,EAAiB,MAAM,IAAI,OAAM,WAAU,IAAK,SAAA,CAC/D;AAER;AAGA,MAAM,eAAe,eAAe,qBAAqB,UAAU;"}

package/dist/inbox/InboxLayout.js

@@ -15,7 +15,7 @@ import Typography from "@mui/material/Typography";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import { PHONE_MEDIA_QUERY, DESKTOP_MEDIA_QUERY } from "../appShell/shellSizes.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaInboxLayout";
 const InboxLabelDot = piecePart(THEME_NAME, "LabelDot", Box);
@@ -52,7 +52,7 @@ function FolderRow({ folder, isSelected, onSelect, t }) {
     unreadCount > 0 && /* @__PURE__ */ jsx(InboxFolderCount, { variant: "caption", ownSx: { fontWeight: 700 }, "aria-label": t("unreadCount", { count: unreadCount }), children: unreadCount })
   ] });
 }
-function InboxLayout(props) {
+function InboxLayoutContent(props) {
   const {
     folders,
     labels = [],
@@ -119,6 +119,7 @@ function InboxLayout(props) {
     ] })
   ] });
 }
+const InboxLayout = withPieceSlots(InboxLayoutContent, THEME_NAME);
 export {
   InboxLayout as default
 };