@stackcraftmx/calcita 0.0.0-stage → 0.23.0

package/dist/forms.js

@@ -0,0 +1,57 @@
+"use client";
+import { FieldArray, Form, Formik, useField, useFormikContext } from "formik";
+import { default as default2 } from "./forms/FormCatalogField.js";
+import { default as default3 } from "./forms/FormColorField.js";
+import { default as default4 } from "./forms/FormNumberField.js";
+import { default as default5 } from "./forms/FormProblemAlert.js";
+import { default as default6 } from "./forms/FormSelectField.js";
+import { default as default7 } from "./forms/FormServerProblem.js";
+import { default as default8 } from "./forms/FormTextField.js";
+import { default as default9 } from "./forms/FormWizard.js";
+import { default as default10 } from "./forms/auth/ChangePasswordForm.js";
+import { default as default11 } from "./forms/auth/ForgotPasswordForm.js";
+import { default as default12 } from "./forms/auth/SignInForm.js";
+import { SECOND_STEP_METHOD, default as default13 } from "./forms/security/SecondStepForm.js";
+import { default as default14 } from "./forms/security/TwoStepVerificationCard.js";
+import { RECOVERY_CODE_PATTERN, TOTP_CODE_PATTERN, normalizeRecoveryCode, normalizeTotpCode } from "./forms/security/securityRules.js";
+import { default as default15 } from "./forms/SubmitButton.js";
+import { applyServerProblem } from "./forms/applyServerProblem.js";
+import { formLevelMessageOf, splitServerFieldErrors } from "./forms/serverProblemFields.js";
+import { useFormikField } from "./forms/useFormikField.js";
+import { buildYupLocale } from "./forms/validation.js";
+import * as Yup from "yup";
+import { translateValidationMessage } from "./forms/validationMessages.js";
+export {
+  default10 as ChangePasswordForm,
+  FieldArray,
+  default11 as ForgotPasswordForm,
+  Form,
+  default2 as FormCatalogField,
+  default3 as FormColorField,
+  default4 as FormNumberField,
+  default5 as FormProblemAlert,
+  default6 as FormSelectField,
+  default7 as FormServerProblem,
+  default8 as FormTextField,
+  default9 as FormWizard,
+  Formik,
+  RECOVERY_CODE_PATTERN,
+  SECOND_STEP_METHOD,
+  default13 as SecondStepForm,
+  default12 as SignInForm,
+  default15 as SubmitButton,
+  TOTP_CODE_PATTERN,
+  default14 as TwoStepVerificationCard,
+  Yup,
+  applyServerProblem,
+  buildYupLocale,
+  formLevelMessageOf,
+  normalizeRecoveryCode,
+  normalizeTotpCode,
+  splitServerFieldErrors,
+  translateValidationMessage,
+  useField,
+  useFormikContext,
+  useFormikField
+};
+//# sourceMappingURL=forms.js.map

package/dist/forms.js.map

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

package/dist/hookForm/FormCatalogField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import CatalogInput from "../inputs/CatalogInput.js";
+import { useHookFormField } from "./useHookFormField.js";
+function FormCatalogField({ name, control, ...inputProps }) {
+  const fieldProps = useHookFormField(name, control);
+  return /* @__PURE__ */ jsx(CatalogInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormCatalogField as default
+};
+//# sourceMappingURL=FormCatalogField.js.map

package/dist/hookForm/FormCatalogField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCatalogField.js","sources":["../../src/hookForm/FormCatalogField.jsx"],"sourcesContent":["// Campo de catálogo de react-hook-form: CatalogInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormCatalogField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport CatalogInput from '@/inputs/CatalogInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/CatalogInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormCatalogField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <CatalogInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,iBAAiB,EAAC,MAAM,SAAS,GAAG,cAAa;AACrE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,cAAA,EAAc,GAAG,YAAa,GAAG,WAAA,CAAY;AACzD;"}

package/dist/hookForm/FormColorField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import ColorInput from "../inputs/ColorInput.js";
+import { useHookFormField } from "./useHookFormField.js";
+function FormColorField({ name, control, ...inputProps }) {
+  const fieldProps = useHookFormField(name, control);
+  return /* @__PURE__ */ jsx(ColorInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormColorField as default
+};
+//# sourceMappingURL=FormColorField.js.map

package/dist/hookForm/FormColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormColorField.js","sources":["../../src/hookForm/FormColorField.jsx"],"sourcesContent":["// Campo de color de react-hook-form: ColorInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormColorField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport ColorInput from '@/inputs/ColorInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/ColorInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormColorField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <ColorInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,eAAe,EAAC,MAAM,SAAS,GAAG,cAAa;AACnE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,WAAA,CAAY;AACvD;"}

package/dist/hookForm/FormNumberField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import NumberInput from "../inputs/NumberInput.js";
+import { useHookFormField } from "./useHookFormField.js";
+function FormNumberField({ name, control, ...inputProps }) {
+  const fieldProps = useHookFormField(name, control);
+  return /* @__PURE__ */ jsx(NumberInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormNumberField as default
+};
+//# sourceMappingURL=FormNumberField.js.map

package/dist/hookForm/FormNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormNumberField.js","sources":["../../src/hookForm/FormNumberField.jsx"],"sourcesContent":["// Campo de número de react-hook-form: NumberInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormNumberField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport NumberInput from '@/inputs/NumberInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/NumberInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormNumberField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <NumberInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,gBAAgB,EAAC,MAAM,SAAS,GAAG,cAAa;AACpE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,aAAA,EAAa,GAAG,YAAa,GAAG,WAAA,CAAY;AACxD;"}

package/dist/hookForm/FormProblemAlert.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, useFormState } from "react-hook-form";
+import Alert from "@mui/material/Alert";
+function FormProblemAlert({ control, sx }) {
+  const formContext = useFormContext();
+  const { errors } = useFormState({ control: control ?? formContext?.control });
+  const message = errors.root?.server?.message;
+  if (!message) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Alert, { severity: "error", role: "alert", sx, children: message });
+}
+export {
+  FormProblemAlert as default
+};
+//# sourceMappingURL=FormProblemAlert.js.map

package/dist/hookForm/FormProblemAlert.js.map

@@ -0,0 +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// Genérico del paquete: function (regla de la casa).\nimport {useFormContext, useFormState} from 'react-hook-form';\nimport Alert from '@mui/material/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}) {\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 <Alert severity=\"error\" role=\"alert\" sx={sx}>{message}</Alert>;\n}\n"],"names":[],"mappings":";;;;AAUA,SAAwB,iBAAiB,EAAC,SAAS,MAAK;AACpD,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,OAAA,EAAM,UAAS,SAAQ,MAAK,SAAQ,IAAS,UAAA,SAAQ;AACjE;"}

package/dist/hookForm/FormSelectField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import SelectInput from "../inputs/SelectInput.js";
+import { useHookFormField } from "./useHookFormField.js";
+function FormSelectField({ name, control, ...inputProps }) {
+  const fieldProps = useHookFormField(name, control);
+  return /* @__PURE__ */ jsx(SelectInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormSelectField as default
+};
+//# sourceMappingURL=FormSelectField.js.map

package/dist/hookForm/FormSelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelectField.js","sources":["../../src/hookForm/FormSelectField.jsx"],"sourcesContent":["// Campo de lista desplegable de react-hook-form: SelectInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormSelectField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport SelectInput from '@/inputs/SelectInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/SelectInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormSelectField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <SelectInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,gBAAgB,EAAC,MAAM,SAAS,GAAG,cAAa;AACpE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,aAAA,EAAa,GAAG,YAAa,GAAG,WAAA,CAAY;AACxD;"}

package/dist/hookForm/FormTextField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import TextInput from "../inputs/TextInput.js";
+import { useHookFormField } from "./useHookFormField.js";
+function FormTextField({ name, control, ...inputProps }) {
+  const fieldProps = useHookFormField(name, control);
+  return /* @__PURE__ */ jsx(TextInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormTextField as default
+};
+//# sourceMappingURL=FormTextField.js.map

package/dist/hookForm/FormTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextField.js","sources":["../../src/hookForm/FormTextField.jsx"],"sourcesContent":["// Campo de texto de react-hook-form: TextInput (inputs/) conectado a su campo con useController. Se ve y se porta igual que\n// el FormTextField de formik (@stackcraftmx/calcita/forms).\n//\n// Genérico del paquete: function (regla de la casa).\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {useHookFormField} from '@/hookForm/useHookFormField.js';\n\n/**\n * @param {{name: string, control?: object} & Omit<Parameters<typeof import('@/inputs/TextInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las del campo de la casa, sin\n *     value / onChange / onBlur / error; control: el de useForm, si la pantalla no usa FormProvider\n */\nexport default function FormTextField({name, control, ...inputProps}) {\n    const fieldProps = useHookFormField(name, control);\n    return <TextInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAWA,SAAwB,cAAc,EAAC,MAAM,SAAS,GAAG,cAAa;AAClE,QAAM,aAAa,iBAAiB,MAAM,OAAO;AACjD,SAAO,oBAAC,WAAA,EAAW,GAAG,YAAa,GAAG,WAAA,CAAY;AACtD;"}

package/dist/hookForm/SubmitButton.js

@@ -0,0 +1,15 @@
+"use client";
+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 }) {
+  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 });
+}
+export {
+  SubmitButton as default
+};
+//# sourceMappingURL=SubmitButton.js.map

package/dist/hookForm/SubmitButton.js.map

@@ -0,0 +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;"}

package/dist/hookForm/applyServerProblem.js

@@ -0,0 +1,21 @@
+import { splitServerFieldErrors, formLevelMessageOf } from "../forms/serverProblemFields.js";
+import { fieldErrorsOf } from "../problems.js";
+const SERVER_PROBLEM_ROOT = "root.server";
+const SERVER_ERROR_TYPE = "server";
+function applyServerProblem(error, { setError, getValues }) {
+  const errorsByField = fieldErrorsOf(error?.problem);
+  const formFieldNames = Object.keys(getValues() ?? {});
+  const { fieldErrors } = splitServerFieldErrors(errorsByField, formFieldNames);
+  for (const [fieldName, message] of Object.entries(fieldErrors)) {
+    setError(fieldName, { type: SERVER_ERROR_TYPE, message }, { shouldFocus: false });
+  }
+  const formLevelMessage = formLevelMessageOf(errorsByField, formFieldNames, error?.message);
+  if (formLevelMessage) {
+    setError(SERVER_PROBLEM_ROOT, { type: SERVER_ERROR_TYPE, message: formLevelMessage });
+  }
+}
+export {
+  SERVER_PROBLEM_ROOT,
+  applyServerProblem
+};
+//# sourceMappingURL=applyServerProblem.js.map

package/dist/hookForm/applyServerProblem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyServerProblem.js","sources":["../../src/hookForm/applyServerProblem.js"],"sourcesContent":["// Del error del servidor (RFC 9457) a react-hook-form, con las mismas reglas que el applyServerProblem de formik:\n//   - el 422 trae `errors` por campo y cada uno se pinta EN su campo (setError);\n//   - lo que no es de un campo (401, 409, 500, sin conexión) o el error de un campo que el formulario no tiene va al aviso\n//     de arriba: errors.root.server, que pinta FormProblemAlert.\n//\n//   const form = useForm({...});\n//   const submit = form.handleSubmit(async (values) => {\n//       try { await api.save(values); } catch (error) { applyServerProblem(error, form); }\n//   });\n//\n// Función pura, no renderiza: function (regla de la casa).\nimport {formLevelMessageOf, splitServerFieldErrors} from '@/forms/serverProblemFields.js';\nimport {fieldErrorsOf} from '@/problems.js';\n\n/** Dónde queda el aviso de arriba en los errores de react-hook-form. */\nexport const SERVER_PROBLEM_ROOT = 'root.server';\nconst SERVER_ERROR_TYPE = 'server';\n\n/**\n * @param {unknown} error normalmente un ApiError (trae problem y message ya traducidos)\n * @param {{setError: Function, getValues: Function}} form lo que regresa useForm\n */\nexport function applyServerProblem(error, {setError, getValues}) {\n    const errorsByField = fieldErrorsOf(error?.problem);\n    const formFieldNames = Object.keys(getValues() ?? {});\n    const {fieldErrors} = splitServerFieldErrors(errorsByField, formFieldNames);\n\n    for (const [fieldName, message] of Object.entries(fieldErrors)) {\n        setError(fieldName, {type: SERVER_ERROR_TYPE, message}, {shouldFocus: false});\n    }\n\n    const formLevelMessage = formLevelMessageOf(errorsByField, formFieldNames, error?.message);\n    if (formLevelMessage) {\n        setError(SERVER_PROBLEM_ROOT, {type: SERVER_ERROR_TYPE, message: formLevelMessage});\n    }\n}\n"],"names":[],"mappings":";;AAeY,MAAC,sBAAsB;AACnC,MAAM,oBAAoB;AAMnB,SAAS,mBAAmB,OAAO,EAAC,UAAU,UAAS,GAAG;AAC7D,QAAM,gBAAgB,cAAc,OAAO,OAAO;AAClD,QAAM,iBAAiB,OAAO,KAAK,UAAS,KAAM,CAAA,CAAE;AACpD,QAAM,EAAC,YAAW,IAAI,uBAAuB,eAAe,cAAc;AAE1E,aAAW,CAAC,WAAW,OAAO,KAAK,OAAO,QAAQ,WAAW,GAAG;AAC5D,aAAS,WAAW,EAAC,MAAM,mBAAmB,QAAO,GAAG,EAAC,aAAa,MAAK,CAAC;AAAA,EAChF;AAEA,QAAM,mBAAmB,mBAAmB,eAAe,gBAAgB,OAAO,OAAO;AACzF,MAAI,kBAAkB;AAClB,aAAS,qBAAqB,EAAC,MAAM,mBAAmB,SAAS,iBAAgB,CAAC;AAAA,EACtF;AACJ;"}

package/dist/hookForm/useHookFormField.js

@@ -0,0 +1,19 @@
+"use client";
+import { useFormContext, useController } from "react-hook-form";
+function useHookFormField(name, control) {
+  const formContext = useFormContext();
+  const { field, fieldState } = useController({ name, control: control ?? formContext?.control });
+  return {
+    name,
+    value: field.value,
+    onChange: field.onChange,
+    onBlur: field.onBlur,
+    // react-hook-form enfoca el primer campo con error al enviar: necesita el input de verdad
+    inputRef: field.ref,
+    error: fieldState.error?.message
+  };
+}
+export {
+  useHookFormField
+};
+//# sourceMappingURL=useHookFormField.js.map

package/dist/hookForm/useHookFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHookFormField.js","sources":["../../src/hookForm/useHookFormField.js"],"sourcesContent":["// La conexión de un campo suelto (inputs/) con react-hook-form: lo que la vista necesita, sacado de useController.\n//\n// El campo se busca en el formulario de la pantalla (FormProvider); sin él, se le pasa control.\n//\n// Cuándo se enseña el error lo decide react-hook-form (por omisión, al intentar enviar y después al corregir): la vista\n// solo pinta el que llegue. Los errores de yup llegan como llave ({key, values}) y la vista los traduce.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useController, useFormContext} from 'react-hook-form';\n\n/**\n * @param {string} name el campo del formulario\n * @param {object} [control] el de useForm, si la pantalla no usa FormProvider\n * @returns {{name: string, value: unknown, onChange: (value: unknown) => void, onBlur: () => void, inputRef: Function, error: unknown}}\n */\nexport function useHookFormField(name, control) {\n    const formContext = useFormContext();\n    const {field, fieldState} = useController({name, control: control ?? formContext?.control});\n\n    return {\n        name,\n        value: field.value,\n        onChange: field.onChange,\n        onBlur: field.onBlur,\n        // react-hook-form enfoca el primer campo con error al enviar: necesita el input de verdad\n        inputRef: field.ref,\n        error: fieldState.error?.message,\n    };\n}\n"],"names":[],"mappings":";;AAeO,SAAS,iBAAiB,MAAM,SAAS;AAC5C,QAAM,cAAc,eAAc;AAClC,QAAM,EAAC,OAAO,WAAU,IAAI,cAAc,EAAC,MAAM,SAAS,WAAW,aAAa,QAAO,CAAC;AAE1F,SAAO;AAAA,IACH;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,MAAM;AAAA,IAChB,QAAQ,MAAM;AAAA;AAAA,IAEd,UAAU,MAAM;AAAA,IAChB,OAAO,WAAW,OAAO;AAAA,EACjC;AACA;"}

package/dist/i18next.js

@@ -0,0 +1,5 @@
+import { translateWithI18next } from "./adapters/i18next.js";
+export {
+  translateWithI18next
+};
+//# sourceMappingURL=i18next.js.map

package/dist/i18next.js.map

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

package/dist/identifiers.js

@@ -0,0 +1,8 @@
+import { v7 } from "uuid";
+function newIdentifier() {
+  return v7();
+}
+export {
+  newIdentifier
+};
+//# sourceMappingURL=identifiers.js.map

package/dist/identifiers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"identifiers.js","sources":["../src/identifiers.js"],"sourcesContent":["// Identificadores generados en el navegador: siempre UUID v7 (regla de la casa).\n//\n// v7 y no v4 (crypto.randomUUID): los v7 ordenan por tiempo, así que en un log o en una tabla con índice único\n// quedan en el orden en que se generaron y no fragmentan el índice B-tree de la base de datos.\n//\n// NOTA: el X-Request-Id NO se genera aquí; lo genera el backend y regresa en cada respuesta.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\nimport {v7 as uuidV7} from 'uuid';\n\n/** Un UUID v7 nuevo, p. ej. para una llave de idempotencia o una fila temporal. */\nexport function newIdentifier() {\n    return uuidV7();\n}\n"],"names":["uuidV7"],"mappings":";AAWO,SAAS,gBAAgB;AAC5B,SAAOA,GAAM;AACjB;"}

package/dist/inbox/InboxLayout.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Paper from "@mui/material/Paper";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+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";
+const FOLDERS_WIDTH_PIXELS = 220;
+const LIST_WIDTH_PIXELS = 380;
+const DESKTOP_HEIGHT = "calc(100dvh - 220px)";
+const DESKTOP_MIN_HEIGHT_PIXELS = 480;
+function InboxLayout({ folders, selectedFolderId, onSelectFolder, toolbar, list, detail, isDetailOpen = false, onCloseDetail }) {
+  const { t } = useToolkitTranslation("inbox");
+  return /* @__PURE__ */ jsxs(Box, { sx: {
+    display: "grid",
+    gap: 2,
+    [DESKTOP_MEDIA_QUERY]: {
+      gridTemplateColumns: `${FOLDERS_WIDTH_PIXELS}px ${LIST_WIDTH_PIXELS}px minmax(0, 1fr)`,
+      height: DESKTOP_HEIGHT,
+      minHeight: DESKTOP_MIN_HEIGHT_PIXELS
+    }
+  }, children: [
+    /* @__PURE__ */ jsx(Paper, { variant: "outlined", component: "nav", "aria-label": t("folders"), sx: { p: 1, overflowY: "auto", borderRadius: 3, [PHONE_MEDIA_QUERY]: { display: "none" } }, children: /* @__PURE__ */ jsx(List, { disablePadding: true, children: folders.map(({ id, label, Icon, unreadCount }) => /* @__PURE__ */ jsxs(ListItemButton, { selected: id === selectedFolderId, onClick: () => onSelectFolder(id), sx: { borderRadius: 2 }, children: [
+      Icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 36 }, children: /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) }),
+      /* @__PURE__ */ jsx(ListItemText, { primary: label }),
+      unreadCount > 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { fontWeight: 700 }, "aria-label": t("unreadCount", { count: unreadCount }), children: unreadCount })
+    ] }, id)) }) }),
+    /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: 0,
+      borderRadius: 3,
+      overflow: "hidden",
+      [PHONE_MEDIA_QUERY]: isDetailOpen ? { display: "none" } : {}
+    }, children: [
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          value: selectedFolderId,
+          onChange: (event, folderId) => onSelectFolder(folderId),
+          variant: "scrollable",
+          "aria-label": t("folders"),
+          sx: { px: 1, [DESKTOP_MEDIA_QUERY]: { display: "none" } },
+          children: folders.map(({ id, label, unreadCount }) => /* @__PURE__ */ jsx(Tab, { value: id, label: unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { color: "primary", badgeContent: unreadCount, sx: { pr: 1.5 }, children: label }) : label }, id))
+        }
+      ),
+      toolbar && /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pb: 1 }, children: toolbar }),
+      /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minHeight: 0, overflowY: "auto", px: 1, pb: 1 }, children: list })
+    ] }),
+    /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { p: { xs: 2, md: 3 }, overflowY: "auto", borderRadius: 3, [PHONE_MEDIA_QUERY]: isDetailOpen ? {} : { display: "none" } }, children: [
+      onCloseDetail && /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(ArrowBackRoundedIcon, {}), onClick: onCloseDetail, sx: { mb: 1, [DESKTOP_MEDIA_QUERY]: { display: "none" } }, children: t("back") }),
+      detail
+    ] })
+  ] });
+}
+export {
+  InboxLayout as default
+};
+//# sourceMappingURL=InboxLayout.js.map

package/dist/inbox/InboxLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxLayout.js","sources":["../../src/inbox/InboxLayout.jsx"],"sourcesContent":["// El acomodo de una bandeja tipo correo: las carpetas, la lista y la lectura. En escritorio, tres columnas; en el teléfono,\n// una a la vez: las carpetas como pestañas arriba de la lista y, al abrir un mensaje, la lectura con «Regresar».\n//\n//   <InboxLayout folders={folders} selectedFolderId={folderId} onSelectFolder={setFolderId} toolbar={<Buscar y Redactar />}\n//                list={<MessageList … />} detail={<MessageView … />} isDetailOpen={Boolean(selectedId)} onCloseDetail={() => setSelectedId(null)} />\n//\n// Escritorio o teléfono se decide con CSS (no con useMediaQuery): así el servidor pinta lo mismo que el navegador.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Paper from '@mui/material/Paper';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport Typography from '@mui/material/Typography';\nimport ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';\n\nimport {DESKTOP_MEDIA_QUERY, PHONE_MEDIA_QUERY} from '@/appShell/shellSizes.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\nconst FOLDERS_WIDTH_PIXELS = 220;\nconst LIST_WIDTH_PIXELS = 380;\n// la bandeja ocupa el alto de la ventana (menos la barra y el encabezado de la página): cada columna desliza por dentro\nconst DESKTOP_HEIGHT = 'calc(100dvh - 220px)';\nconst DESKTOP_MIN_HEIGHT_PIXELS = 480;\n\n/**\n * @param {object} props\n * @param {Array<{id: string, label: string, Icon?: import('react').ElementType, unreadCount?: number}>} props.folders\n * @param {string} props.selectedFolderId\n * @param {(folderId: string) => void} props.onSelectFolder\n * @param {import('react').ReactNode} [props.toolbar] arriba de la lista (buscar, redactar)\n * @param {import('react').ReactNode} props.list normalmente MessageList\n * @param {import('react').ReactNode} props.detail normalmente MessageView\n * @param {boolean} [props.isDetailOpen] en el teléfono, se ve la lectura en lugar de la lista\n * @param {() => void} [props.onCloseDetail] «Regresar» del teléfono\n */\nexport default function InboxLayout({folders, selectedFolderId, onSelectFolder, toolbar, list, detail, isDetailOpen = false, onCloseDetail}) {\n    const {t} = useToolkitTranslation('inbox');\n\n    return (\n        <Box sx={{\n            display: 'grid', gap: 2,\n            [DESKTOP_MEDIA_QUERY]: {\n                gridTemplateColumns: `${FOLDERS_WIDTH_PIXELS}px ${LIST_WIDTH_PIXELS}px minmax(0, 1fr)`, height: DESKTOP_HEIGHT, minHeight: DESKTOP_MIN_HEIGHT_PIXELS,\n            },\n        }}>\n            {/* las carpetas: columna en escritorio */}\n            <Paper variant=\"outlined\" component=\"nav\" aria-label={t('folders')} sx={{p: 1, overflowY: 'auto', borderRadius: 3, [PHONE_MEDIA_QUERY]: {display: 'none'}}}>\n                <List disablePadding>\n                    {folders.map(({id, label, Icon, unreadCount}) => (\n                        <ListItemButton key={id} selected={id === selectedFolderId} onClick={() => onSelectFolder(id)} sx={{borderRadius: 2}}>\n                            {Icon && <ListItemIcon sx={{minWidth: 36}}><Icon fontSize=\"small\" /></ListItemIcon>}\n                            <ListItemText primary={label} />\n                            {unreadCount > 0 && <Typography variant=\"caption\" sx={{fontWeight: 700}} aria-label={t('unreadCount', {count: unreadCount})}>{unreadCount}</Typography>}\n                        </ListItemButton>\n                    ))}\n                </List>\n            </Paper>\n\n            {/* la lista, con las carpetas como pestañas en el teléfono */}\n            <Paper variant=\"outlined\" sx={{display: 'flex', flexDirection: 'column', minHeight: 0, borderRadius: 3, overflow: 'hidden',\n                [PHONE_MEDIA_QUERY]: isDetailOpen ? {display: 'none'} : {}}}>\n                <Tabs value={selectedFolderId} onChange={(event, folderId) => onSelectFolder(folderId)} variant=\"scrollable\" aria-label={t('folders')}\n                      sx={{px: 1, [DESKTOP_MEDIA_QUERY]: {display: 'none'}}}>\n                    {folders.map(({id, label, unreadCount}) => (\n                        <Tab key={id} value={id} label={unreadCount > 0 ? <Badge color=\"primary\" badgeContent={unreadCount} sx={{pr: 1.5}}>{label}</Badge> : label} />\n                    ))}\n                </Tabs>\n                {toolbar && <Box sx={{p: 1.5, pb: 1}}>{toolbar}</Box>}\n                <Box sx={{flex: 1, minHeight: 0, overflowY: 'auto', px: 1, pb: 1}}>{list}</Box>\n            </Paper>\n\n            {/* la lectura: en el teléfono solo con un mensaje abierto, con su «Regresar» */}\n            <Paper variant=\"outlined\" sx={{p: {xs: 2, md: 3}, overflowY: 'auto', borderRadius: 3, [PHONE_MEDIA_QUERY]: isDetailOpen ? {} : {display: 'none'}}}>\n                {onCloseDetail && (\n                    <Button startIcon={<ArrowBackRoundedIcon />} onClick={onCloseDetail} sx={{mb: 1, [DESKTOP_MEDIA_QUERY]: {display: 'none'}}}>{t('back')}</Button>\n                )}\n                {detail}\n            </Paper>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAyBA,MAAM,uBAAuB;AAC7B,MAAM,oBAAoB;AAE1B,MAAM,iBAAiB;AACvB,MAAM,4BAA4B;AAalC,SAAwB,YAAY,EAAC,SAAS,kBAAkB,gBAAgB,SAAS,MAAM,QAAQ,eAAe,OAAO,cAAA,GAAgB;AACzI,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AAEzC,SACI,qBAAC,OAAI,IAAI;AAAA,IACL,SAAS;AAAA,IAAQ,KAAK;AAAA,IACtB,CAAC,mBAAmB,GAAG;AAAA,MACnB,qBAAqB,GAAG,oBAAoB,MAAM,iBAAiB;AAAA,MAAqB,QAAQ;AAAA,MAAgB,WAAW;AAAA,IAAA;AAAA,EAC/H,GAGA,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAM,SAAQ,YAAW,WAAU,OAAM,cAAY,EAAE,SAAS,GAAG,IAAI,EAAC,GAAG,GAAG,WAAW,QAAQ,cAAc,GAAG,CAAC,iBAAiB,GAAG,EAAC,SAAS,OAAA,KAC9I,UAAA,oBAAC,QAAK,gBAAc,MACf,UAAA,QAAQ,IAAI,CAAC,EAAC,IAAI,OAAO,MAAM,YAAA,MAC5B,qBAAC,gBAAA,EAAwB,UAAU,OAAO,kBAAkB,SAAS,MAAM,eAAe,EAAE,GAAG,IAAI,EAAC,cAAc,EAAA,GAC7G,UAAA;AAAA,MAAA,QAAQ,oBAAC,cAAA,EAAa,IAAI,EAAC,UAAU,GAAA,GAAK,UAAA,oBAAC,MAAA,EAAK,UAAS,QAAA,CAAQ,EAAA,CAAE;AAAA,MACpE,oBAAC,cAAA,EAAa,SAAS,MAAA,CAAO;AAAA,MAC7B,cAAc,KAAK,oBAAC,cAAW,SAAQ,WAAU,IAAI,EAAC,YAAY,OAAM,cAAY,EAAE,eAAe,EAAC,OAAO,YAAA,CAAY,GAAI,UAAA,YAAA,CAAY;AAAA,IAAA,EAAA,GAHzH,EAIrB,CACH,EAAA,CACL,GACJ;AAAA,IAGA,qBAAC,OAAA,EAAM,SAAQ,YAAW,IAAI;AAAA,MAAC,SAAS;AAAA,MAAQ,eAAe;AAAA,MAAU,WAAW;AAAA,MAAG,cAAc;AAAA,MAAG,UAAU;AAAA,MAC9G,CAAC,iBAAiB,GAAG,eAAe,EAAC,SAAS,OAAA,IAAU,CAAA;AAAA,IAAC,GACzD,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAAK,OAAO;AAAA,UAAkB,UAAU,CAAC,OAAO,aAAa,eAAe,QAAQ;AAAA,UAAG,SAAQ;AAAA,UAAa,cAAY,EAAE,SAAS;AAAA,UAC9H,IAAI,EAAC,IAAI,GAAG,CAAC,mBAAmB,GAAG,EAAC,SAAS,SAAM;AAAA,UACpD,UAAA,QAAQ,IAAI,CAAC,EAAC,IAAI,OAAO,YAAA,MACtB,oBAAC,KAAA,EAAa,OAAO,IAAI,OAAO,cAAc,IAAI,oBAAC,OAAA,EAAM,OAAM,WAAU,cAAc,aAAa,IAAI,EAAC,IAAI,IAAA,GAAO,UAAA,MAAA,CAAM,IAAW,MAAA,GAA3H,EAAkI,CAC/I;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,WAAW,oBAAC,KAAA,EAAI,IAAI,EAAC,GAAG,KAAK,IAAI,EAAA,GAAK,UAAA,QAAA,CAAQ;AAAA,MAC/C,oBAAC,KAAA,EAAI,IAAI,EAAC,MAAM,GAAG,WAAW,GAAG,WAAW,QAAQ,IAAI,GAAG,IAAI,EAAA,GAAK,UAAA,KAAA,CAAK;AAAA,IAAA,GAC7E;AAAA,IAGA,qBAAC,OAAA,EAAM,SAAQ,YAAW,IAAI,EAAC,GAAG,EAAC,IAAI,GAAG,IAAI,EAAA,GAAI,WAAW,QAAQ,cAAc,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAA,IAAK,EAAC,SAAS,OAAA,EAAM,GAC1I,UAAA;AAAA,MAAA,iBACG,oBAAC,UAAO,WAAW,oBAAC,wBAAqB,GAAI,SAAS,eAAe,IAAI,EAAC,IAAI,GAAG,CAAC,mBAAmB,GAAG,EAAC,SAAS,SAAM,GAAK,UAAA,EAAE,MAAM,GAAE;AAAA,MAE1I;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}

package/dist/inbox/MessageList.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import ListItemButton from "@mui/material/ListItemButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import AttachFileRoundedIcon from "@mui/icons-material/AttachFileRounded";
+import StarBorderRoundedIcon from "@mui/icons-material/StarBorderRounded";
+import StarRoundedIcon from "@mui/icons-material/StarRounded";
+import { initialsOf } from "../appShell/menuItemText.js";
+import { inboxDateOf } from "./inboxDates.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+const UNREAD_DOT_PIXELS = 8;
+function MessageList({ messages, selectedId = null, onSelect, onToggleStar, emptyText }) {
+  const { t } = useToolkitTranslation("inbox");
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { p: 3, textAlign: "center" }, children: emptyText ?? t("empty") });
+  }
+  return /* @__PURE__ */ jsx(List, { disablePadding: true, "aria-label": t("listLabel"), children: messages.map((message) => {
+    const weight = message.isUnread ? 700 : 400;
+    return /* @__PURE__ */ jsx(ListItem, { disablePadding: true, secondaryAction: onToggleStar && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        edge: "end",
+        size: "small",
+        onClick: () => onToggleStar(message.id),
+        "aria-pressed": Boolean(message.isStarred),
+        "aria-label": message.isStarred ? t("unstar") : t("star"),
+        sx: { color: message.isStarred ? "warning.main" : "text.secondary" },
+        children: message.isStarred ? /* @__PURE__ */ jsx(StarRoundedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(StarBorderRoundedIcon, { fontSize: "small" })
+      }
+    ), children: /* @__PURE__ */ jsxs(
+      ListItemButton,
+      {
+        selected: message.id === selectedId,
+        onClick: () => onSelect(message.id),
+        alignItems: "flex-start",
+        sx: { borderRadius: 2, pr: 6 },
+        children: [
+          /* @__PURE__ */ jsx(ListItemAvatar, { sx: { mt: 0.5 }, children: /* @__PURE__ */ jsx(Avatar, { children: initialsOf(message.from.name) }) }),
+          /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+              message.isUnread && /* @__PURE__ */ jsx(Box, { component: "span", "aria-label": t("unread"), sx: { width: UNREAD_DOT_PIXELS, height: UNREAD_DOT_PIXELS, borderRadius: "50%", bgcolor: "primary.main", flexShrink: 0 } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { fontWeight: weight, flex: 1 }, children: message.from.name }),
+              message.hasAttachments && /* @__PURE__ */ jsx(AttachFileRoundedIcon, { fontSize: "inherit", color: "action", "aria-label": t("attachments") }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { flexShrink: 0, fontVariantNumeric: "tabular-nums" }, children: inboxDateOf(message.receivedAt) })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { fontWeight: weight }, children: message.subject }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, children: message.preview })
+          ] })
+        ]
+      }
+    ) }, message.id);
+  }) });
+}
+export {
+  MessageList as default
+};
+//# sourceMappingURL=MessageList.js.map

package/dist/inbox/MessageList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.js","sources":["../../src/inbox/MessageList.jsx"],"sourcesContent":["// La lista de mensajes de una bandeja tipo correo: quién lo manda, el asunto y el principio del texto, la fecha corta, la\n// estrella y el clip si trae archivos. Los no leídos van en negritas con su punto.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemAvatar from '@mui/material/ListItemAvatar';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\nimport StarBorderRoundedIcon from '@mui/icons-material/StarBorderRounded';\nimport StarRoundedIcon from '@mui/icons-material/StarRounded';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {inboxDateOf} from '@/inbox/inboxDates.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\nconst UNREAD_DOT_PIXELS = 8;\n\n/**\n * @param {object} props\n * @param {Array<{id: string, from: {name: string, email: string}, subject: string, preview: string, receivedAt: string, isUnread?: boolean, isStarred?: boolean, hasAttachments?: boolean}>} props.messages\n * @param {string|null} [props.selectedId]\n * @param {(messageId: string) => void} props.onSelect\n * @param {(messageId: string) => void} [props.onToggleStar]\n * @param {string} [props.emptyText] ya traducido; por omisión el del paquete\n */\nexport default function MessageList({messages, selectedId = null, onSelect, onToggleStar, emptyText}) {\n    const {t} = useToolkitTranslation('inbox');\n\n    if (messages.length === 0) {\n        return <Typography variant=\"body2\" color=\"text.secondary\" sx={{p: 3, textAlign: 'center'}}>{emptyText ?? t('empty')}</Typography>;\n    }\n\n    return (\n        <List disablePadding aria-label={t('listLabel')}>\n            {messages.map((message) => {\n                const weight = message.isUnread ? 700 : 400;\n                return (\n                    <ListItem key={message.id} disablePadding secondaryAction={onToggleStar && (\n                        <IconButton edge=\"end\" size=\"small\" onClick={() => onToggleStar(message.id)} aria-pressed={Boolean(message.isStarred)}\n                                    aria-label={message.isStarred ? t('unstar') : t('star')} sx={{color: message.isStarred ? 'warning.main' : 'text.secondary'}}>\n                            {message.isStarred ? <StarRoundedIcon fontSize=\"small\" /> : <StarBorderRoundedIcon fontSize=\"small\" />}\n                        </IconButton>\n                    )}>\n                        <ListItemButton selected={message.id === selectedId} onClick={() => onSelect(message.id)} alignItems=\"flex-start\"\n                                        sx={{borderRadius: 2, pr: 6}}>\n                            <ListItemAvatar sx={{mt: 0.5}}><Avatar>{initialsOf(message.from.name)}</Avatar></ListItemAvatar>\n                            <Box sx={{minWidth: 0, flex: 1}}>\n                                <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center'}}>\n                                    {message.isUnread && (\n                                        <Box component=\"span\" aria-label={t('unread')} sx={{width: UNREAD_DOT_PIXELS, height: UNREAD_DOT_PIXELS, borderRadius: '50%', bgcolor: 'primary.main', flexShrink: 0}} />\n                                    )}\n                                    <Typography variant=\"body2\" noWrap sx={{fontWeight: weight, flex: 1}}>{message.from.name}</Typography>\n                                    {message.hasAttachments && <AttachFileRoundedIcon fontSize=\"inherit\" color=\"action\" aria-label={t('attachments')} />}\n                                    <Typography variant=\"caption\" color=\"text.secondary\" sx={{flexShrink: 0, fontVariantNumeric: 'tabular-nums'}}>\n                                        {inboxDateOf(message.receivedAt)}\n                                    </Typography>\n                                </Stack>\n                                <Typography variant=\"body2\" noWrap sx={{fontWeight: weight}}>{message.subject}</Typography>\n                                <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{message.preview}</Typography>\n                            </Box>\n                        </ListItemButton>\n                    </ListItem>\n                );\n            })}\n        </List>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,oBAAoB;AAU1B,SAAwB,YAAY,EAAC,UAAU,aAAa,MAAM,UAAU,cAAc,aAAY;AAClG,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AAEzC,MAAI,SAAS,WAAW,GAAG;AACvB,+BAAQ,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAC,GAAG,GAAG,WAAW,YAAY,UAAA,aAAa,EAAE,OAAO,GAAE;AAAA,EACxH;AAEA,SACI,oBAAC,MAAA,EAAK,gBAAc,MAAC,cAAY,EAAE,WAAW,GACzC,UAAA,SAAS,IAAI,CAAC,YAAY;AACvB,UAAM,SAAS,QAAQ,WAAW,MAAM;AACxC,WACI,oBAAC,UAAA,EAA0B,gBAAc,MAAC,iBAAiB,gBACvD;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW,MAAK;AAAA,QAAM,MAAK;AAAA,QAAQ,SAAS,MAAM,aAAa,QAAQ,EAAE;AAAA,QAAG,gBAAc,QAAQ,QAAQ,SAAS;AAAA,QACxG,cAAY,QAAQ,YAAY,EAAE,QAAQ,IAAI,EAAE,MAAM;AAAA,QAAG,IAAI,EAAC,OAAO,QAAQ,YAAY,iBAAiB,iBAAA;AAAA,QACjH,UAAA,QAAQ,YAAY,oBAAC,iBAAA,EAAgB,UAAS,SAAQ,IAAK,oBAAC,uBAAA,EAAsB,UAAS,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA,GAGxG,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAe,UAAU,QAAQ,OAAO;AAAA,QAAY,SAAS,MAAM,SAAS,QAAQ,EAAE;AAAA,QAAG,YAAW;AAAA,QACrF,IAAI,EAAC,cAAc,GAAG,IAAI,EAAA;AAAA,QACtC,UAAA;AAAA,UAAA,oBAAC,gBAAA,EAAe,IAAI,EAAC,IAAI,IAAA,GAAM,UAAA,oBAAC,QAAA,EAAQ,UAAA,WAAW,QAAQ,KAAK,IAAI,GAAE,GAAS;AAAA,UAC/E,qBAAC,OAAI,IAAI,EAAC,UAAU,GAAG,MAAM,KACzB,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,IAAI,EAAC,YAAY,SAAA,GAC/C,UAAA;AAAA,cAAA,QAAQ,gCACJ,KAAA,EAAI,WAAU,QAAO,cAAY,EAAE,QAAQ,GAAG,IAAI,EAAC,OAAO,mBAAmB,QAAQ,mBAAmB,cAAc,OAAO,SAAS,gBAAgB,YAAY,EAAA,GAAI;AAAA,cAE3K,oBAAC,YAAA,EAAW,SAAQ,SAAQ,QAAM,MAAC,IAAI,EAAC,YAAY,QAAQ,MAAM,EAAA,GAAK,UAAA,QAAQ,KAAK,MAAK;AAAA,cACxF,QAAQ,kBAAkB,oBAAC,uBAAA,EAAsB,UAAS,WAAU,OAAM,UAAS,cAAY,EAAE,aAAa,EAAA,CAAG;AAAA,kCACjH,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,IAAI,EAAC,YAAY,GAAG,oBAAoB,eAAA,GACxF,UAAA,YAAY,QAAQ,UAAU,EAAA,CACnC;AAAA,YAAA,GACJ;AAAA,YACA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,QAAM,MAAC,IAAI,EAAC,YAAY,OAAA,GAAU,UAAA,QAAQ,QAAA,CAAQ;AAAA,YAC9E,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAAiB,QAAM,MAAE,UAAA,QAAQ,QAAA,CAAQ;AAAA,UAAA,EAAA,CAC/E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACJ,GAvBW,QAAQ,EAwBvB;AAAA,EAER,CAAC,EAAA,CACL;AAER;"}

package/dist/inbox/MessageView.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import Divider from "@mui/material/Divider";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import AttachFileRoundedIcon from "@mui/icons-material/AttachFileRounded";
+import { initialsOf } from "../appShell/menuItemText.js";
+import { formatDateTime } from "../formatting.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+function MessageView({ message, actions }) {
+  const { t } = useToolkitTranslation("inbox");
+  if (!message) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { p: 4, textAlign: "center" }, children: t("noMessageSelected") });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, component: "article", "aria-label": message.subject, children: [
+    actions && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0.5, useFlexGap: true, sx: { flexWrap: "wrap" }, children: actions }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", children: message.subject }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(Avatar, { children: initialsOf(message.from.name) }),
+      /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", component: "p", noWrap: true, children: [
+          message.from.name,
+          " ",
+          /* @__PURE__ */ jsxs(Typography, { component: "span", variant: "body2", color: "text.secondary", children: [
+            "<",
+            message.from.email,
+            ">"
+          ] })
+        ] }),
+        message.to?.length > 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", children: t("to", { to: message.to.join(", ") }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", children: formatDateTime(message.receivedAt) })
+      ] })
+    ] }),
+    message.attachments?.length > 0 && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: "wrap" }, "aria-label": t("attachments"), children: message.attachments.map((attachment) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        icon: /* @__PURE__ */ jsx(AttachFileRoundedIcon, {}),
+        variant: "outlined",
+        label: attachment.size ? `${attachment.name} · ${attachment.size}` : attachment.name
+      },
+      attachment.name
+    )) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(Typography, { variant: "body1", component: "div", sx: { whiteSpace: "pre-wrap", overflowWrap: "anywhere" }, children: message.body })
+  ] });
+}
+export {
+  MessageView as default
+};
+//# sourceMappingURL=MessageView.js.map

package/dist/inbox/MessageView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageView.js","sources":["../../src/inbox/MessageView.jsx"],"sourcesContent":["// La lectura de un mensaje: el asunto, quién lo manda (con su correo), para quién, la fecha completa, sus archivos y el\n// texto. Arriba, las acciones que quiera el proyecto (responder, archivar, marcar como no leído, borrar).\n//\n// El texto se pinta como TEXTO, con sus saltos de renglón: nunca como HTML (un correo con HTML adentro sería un XSS).\n//\n// Genérico del paquete: function (regla de la casa).\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Divider from '@mui/material/Divider';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {formatDateTime} from '@/formatting.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n/**\n * @param {object} props\n * @param {{subject: string, from: {name: string, email: string}, to?: string[], receivedAt: string, body: string, attachments?: Array<{name: string, size?: string}>}|null} props.message\n *     null: todavía no se elige ninguno\n * @param {import('react').ReactNode} [props.actions] los botones de arriba\n */\nexport default function MessageView({message, actions}) {\n    const {t} = useToolkitTranslation('inbox');\n\n    if (!message) {\n        return <Typography variant=\"body2\" color=\"text.secondary\" sx={{p: 4, textAlign: 'center'}}>{t('noMessageSelected')}</Typography>;\n    }\n\n    return (\n        <Stack spacing={2} component=\"article\" aria-label={message.subject}>\n            {actions && <Stack direction=\"row\" spacing={0.5} useFlexGap sx={{flexWrap: 'wrap'}}>{actions}</Stack>}\n            <Typography variant=\"h5\" component=\"h2\">{message.subject}</Typography>\n            <Stack direction=\"row\" spacing={1.5} sx={{alignItems: 'center'}}>\n                <Avatar>{initialsOf(message.from.name)}</Avatar>\n                <Box sx={{minWidth: 0, flex: 1}}>\n                    <Typography variant=\"subtitle2\" component=\"p\" noWrap>\n                        {message.from.name} <Typography component=\"span\" variant=\"body2\" color=\"text.secondary\">&lt;{message.from.email}&gt;</Typography>\n                    </Typography>\n                    {message.to?.length > 0 && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{t('to', {to: message.to.join(', ')})}</Typography>}\n                    {/* la fecha debajo y no a la derecha: en el teléfono apretaba el «Para» a dos renglones */}\n                    <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{formatDateTime(message.receivedAt)}</Typography>\n                </Box>\n            </Stack>\n            {message.attachments?.length > 0 && (\n                <Stack direction=\"row\" spacing={1} useFlexGap sx={{flexWrap: 'wrap'}} aria-label={t('attachments')}>\n                    {message.attachments.map((attachment) => (\n                        <Chip key={attachment.name} icon={<AttachFileRoundedIcon />} variant=\"outlined\"\n                              label={attachment.size ? `${attachment.name} · ${attachment.size}` : attachment.name} />\n                    ))}\n                </Stack>\n            )}\n            <Divider />\n            <Typography variant=\"body1\" component=\"div\" sx={{whiteSpace: 'pre-wrap', overflowWrap: 'anywhere'}}>{message.body}</Typography>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAwBA,SAAwB,YAAY,EAAC,SAAS,WAAU;AACpD,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AAEzC,MAAI,CAAC,SAAS;AACV,WAAO,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAC,GAAG,GAAG,WAAW,SAAA,GAAY,UAAA,EAAE,mBAAmB,GAAE;AAAA,EACvH;AAEA,SACI,qBAAC,SAAM,SAAS,GAAG,WAAU,WAAU,cAAY,QAAQ,SACtD,UAAA;AAAA,IAAA,WAAW,oBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,IAAI,EAAC,UAAU,OAAA,GAAU,UAAA,SAAQ;AAAA,wBAC5F,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAM,kBAAQ,SAAQ;AAAA,IACzD,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,KAAK,IAAI,EAAC,YAAY,SAAA,GAClD,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAQ,UAAA,WAAW,QAAQ,KAAK,IAAI,GAAE;AAAA,MACvC,qBAAC,OAAI,IAAI,EAAC,UAAU,GAAG,MAAM,KACzB,UAAA;AAAA,QAAA,qBAAC,cAAW,SAAQ,aAAY,WAAU,KAAI,QAAM,MAC/C,UAAA;AAAA,UAAA,QAAQ,KAAK;AAAA,UAAK;AAAA,+BAAE,YAAA,EAAW,WAAU,QAAO,SAAQ,SAAQ,OAAM,kBAAiB,UAAA;AAAA,YAAA;AAAA,YAAK,QAAQ,KAAK;AAAA,YAAM;AAAA,UAAA,EAAA,CAAI;AAAA,QAAA,GACxH;AAAA,QACC,QAAQ,IAAI,SAAS,yBAAM,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,WAAU,KAAK,UAAA,EAAE,MAAM,EAAC,IAAI,QAAQ,GAAG,KAAK,IAAI,EAAA,CAAE,EAAA,CAAE;AAAA,QAEpI,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,WAAU,KAAK,UAAA,eAAe,QAAQ,UAAU,EAAA,CAAE;AAAA,MAAA,EAAA,CAC3G;AAAA,IAAA,GACJ;AAAA,IACC,QAAQ,aAAa,SAAS,KAC3B,oBAAC,SAAM,WAAU,OAAM,SAAS,GAAG,YAAU,MAAC,IAAI,EAAC,UAAU,OAAA,GAAS,cAAY,EAAE,aAAa,GAC5F,UAAA,QAAQ,YAAY,IAAI,CAAC,eACtB;AAAA,MAAC;AAAA,MAAA;AAAA,QAA2B,0BAAO,uBAAA,EAAsB;AAAA,QAAI,SAAQ;AAAA,QAC/D,OAAO,WAAW,OAAO,GAAG,WAAW,IAAI,MAAM,WAAW,IAAI,KAAK,WAAW;AAAA,MAAA;AAAA,MAD3E,WAAW;AAAA,IAAA,CAEzB,GACL;AAAA,wBAEH,SAAA,EAAQ;AAAA,IACT,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,OAAM,IAAI,EAAC,YAAY,YAAY,cAAc,WAAA,GAAc,kBAAQ,KAAA,CAAK;AAAA,EAAA,GACtH;AAER;"}

package/dist/inbox/inboxDates.js

@@ -0,0 +1,8 @@
+import { formatDate, formatTime } from "../formatting.js";
+function inboxDateOf(receivedAt, now = /* @__PURE__ */ new Date()) {
+  return formatDate(receivedAt) === formatDate(now.toISOString()) ? formatTime(receivedAt) : formatDate(receivedAt);
+}
+export {
+  inboxDateOf
+};
+//# sourceMappingURL=inboxDates.js.map

package/dist/inbox/inboxDates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inboxDates.js","sources":["../../src/inbox/inboxDates.js"],"sourcesContent":["// La fecha corta de un mensaje en la lista, como la pintan los correos: si llegó hoy, la hora («09:14»); si no, el día\n// («14 oct 2026»). «Hoy» es en la zona del negocio (la de ToolkitProvider), no la del servidor.\n//\n// Función pura (lee la zona vigente del paquete): function (regla de la casa).\nimport {formatDate, formatTime} from '@/formatting.js';\n\n/**\n * @param {string} receivedAt el instante ISO\n * @param {Date} [now] para las pruebas; por omisión, ahora\n * @returns {string}\n */\nexport function inboxDateOf(receivedAt, now = new Date()) {\n    return formatDate(receivedAt) === formatDate(now.toISOString()) ? formatTime(receivedAt) : formatDate(receivedAt);\n}\n"],"names":[],"mappings":";AAWO,SAAS,YAAY,YAAY,MAAM,oBAAI,KAAI,GAAI;AACtD,SAAO,WAAW,UAAU,MAAM,WAAW,IAAI,aAAa,IAAI,WAAW,UAAU,IAAI,WAAW,UAAU;AACpH;"}