@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/dist/account/DemoTotpCodeButton.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import ScienceOutlinedIcon from "@mui/icons-material/ScienceOutlined";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+function DemoTotpCodeButton({ loadCode }) {
+  const { t } = useToolkitTranslation("account");
+  const { setFieldValue } = useFormikContext();
+  const fillCode = async () => {
+    const code = await loadCode();
+    if (code) {
+      setFieldValue("code", code);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(Button, { size: "small", startIcon: /* @__PURE__ */ jsx(ScienceOutlinedIcon, {}), onClick: fillCode, children: t("demo.totpCode") }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { textAlign: "center" }, children: t("demo.totpCodeHelp") })
+  ] });
+}
+export {
+  DemoTotpCodeButton as default
+};
+//# sourceMappingURL=DemoTotpCodeButton.js.map

package/dist/account/DemoTotpCodeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoTotpCodeButton.js","sources":["../../src/account/DemoTotpCodeButton.jsx"],"sourcesContent":["// El atajo de la DEMOSTRACIÓN para la app autenticadora: llena el campo «code» del formulario con el código que enseñaría\n// la app ahorita. Para quien prueba sin la app en su teléfono (y para las pruebas automáticas, que no escanean QR). Solo\n// sale cuando el conector trae demoTotpCode: con un backend de verdad no existe (el código solo lo conoce la app).\n//\n// Va dentro del formulario de formik (abajo del segundo paso o en el diálogo de activar la app).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormikContext} from 'formik';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ScienceOutlinedIcon from '@mui/icons-material/ScienceOutlined';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n/**\n * @param {{loadCode: () => Promise<string|null>}} props\n */\nexport default function DemoTotpCodeButton({loadCode}) {\n    const {t} = useToolkitTranslation('account');\n    const {setFieldValue} = useFormikContext();\n\n    const fillCode = async () => {\n        const code = await loadCode();\n        if (code) {\n            setFieldValue('code', code);\n        }\n    };\n\n    return (\n        <Stack spacing={0.5} sx={{alignItems: 'center'}}>\n            <Button size=\"small\" startIcon={<ScienceOutlinedIcon />} onClick={fillCode}>{t('demo.totpCode')}</Button>\n            <Typography variant=\"caption\" color=\"text.secondary\" sx={{textAlign: 'center'}}>{t('demo.totpCodeHelp')}</Typography>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAkBA,SAAwB,mBAAmB,EAAC,YAAW;AACnD,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS;AAC3C,QAAM,EAAC,cAAA,IAAiB,iBAAA;AAExB,QAAM,WAAW,YAAY;AACzB,UAAM,OAAO,MAAM,SAAA;AACnB,QAAI,MAAM;AACN,oBAAc,QAAQ,IAAI;AAAA,IAC9B;AAAA,EACJ;AAEA,SACI,qBAAC,SAAM,SAAS,KAAK,IAAI,EAAC,YAAY,YAClC,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,MAAK,SAAQ,WAAW,oBAAC,qBAAA,CAAA,CAAoB,GAAI,SAAS,UAAW,UAAA,EAAE,eAAe,GAAE;AAAA,IAChG,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,IAAI,EAAC,WAAW,SAAA,GAAY,UAAA,EAAE,mBAAmB,EAAA,CAAE;AAAA,EAAA,GAC5G;AAER;"}

package/dist/account/ForgotPasswordScreen.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useAccount } from "./AccountProvider.js";
+import { AuthLayout } from "../appShell/AuthLayout.js";
+import ForgotPasswordForm from "../forms/auth/ForgotPasswordForm.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import ComponentTexts from "../toolkit/ComponentTexts.js";
+function ForgotPasswordScreen({ signInPath, logo, brandName, showLanguageToggle = true, showColorSchemeToggle = true, texts }) {
+  const { t } = useToolkitTranslation("auth", texts);
+  const { connector } = useAccount();
+  return /* @__PURE__ */ jsx(ComponentTexts, { namespace: "auth", texts, children: /* @__PURE__ */ jsx(
+    AuthLayout,
+    {
+      logo,
+      brandName,
+      title: t("forgotPassword.title"),
+      description: t("forgotPassword.subtitle"),
+      showLanguageToggle,
+      showColorSchemeToggle,
+      children: /* @__PURE__ */ jsx(ForgotPasswordForm, { onSubmit: connector.requestPasswordReset, signInPath })
+    }
+  ) });
+}
+export {
+  ForgotPasswordScreen as default
+};
+//# sourceMappingURL=ForgotPasswordScreen.js.map

package/dist/account/ForgotPasswordScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPasswordScreen.js","sources":["../../src/account/ForgotPasswordScreen.jsx"],"sourcesContent":["// «¿Olvidó su contraseña?», completa: pide el correo y avisa que revise su bandeja (ForgotPasswordForm). Lo del servidor\n// sale del conector de la cuenta (requestPasswordReset).\n//\n//   <ForgotPasswordScreen signInPath=\"/sign-in\" logo={<AppLogo />} />\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useAccount} from '@/account/AccountProvider.jsx';\nimport {AuthLayout} from '@/appShell/AuthLayout.jsx';\nimport ForgotPasswordForm from '@/forms/auth/ForgotPasswordForm.jsx';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\n\n/**\n * @param {object} props\n * @param {string} [props.signInPath] la liga para regresar a entrar\n * @param {import('react').ReactNode} [props.logo]\n * @param {string} [props.brandName]\n * @param {boolean} [props.showLanguageToggle]\n * @param {boolean} [props.showColorSchemeToggle]\n * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete\n */\nexport default function ForgotPasswordScreen({signInPath, logo, brandName, showLanguageToggle = true, showColorSchemeToggle = true, texts}) {\n    const {t} = useToolkitTranslation('auth', texts);\n    const {connector} = useAccount();\n\n    return (\n        <ComponentTexts namespace=\"auth\" texts={texts}>\n            <AuthLayout logo={logo} brandName={brandName} title={t('forgotPassword.title')} description={t('forgotPassword.subtitle')}\n                        showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle}>\n                <ForgotPasswordForm onSubmit={connector.requestPasswordReset} signInPath={signInPath} />\n            </AuthLayout>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAqBA,SAAwB,qBAAqB,EAAC,YAAY,MAAM,WAAW,qBAAqB,MAAM,wBAAwB,MAAM,SAAQ;AACxI,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ,KAAK;AAC/C,QAAM,EAAC,UAAA,IAAa,WAAA;AAEpB,SACI,oBAAC,gBAAA,EAAe,WAAU,QAAO,OAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAW;AAAA,MAAY;AAAA,MAAsB,OAAO,EAAE,sBAAsB;AAAA,MAAG,aAAa,EAAE,yBAAyB;AAAA,MAC5G;AAAA,MAAwC;AAAA,MAChD,UAAA,oBAAC,oBAAA,EAAmB,UAAU,UAAU,sBAAsB,WAAA,CAAwB;AAAA,IAAA;AAAA,EAAA,GAE9F;AAER;"}

package/dist/account/ProfileScreen.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Formik, Form } from "formik";
+import Stack from "@mui/material/Stack";
+import Tab from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
+import Typography from "@mui/material/Typography";
+import AccountSecuritySection from "./AccountSecuritySection.js";
+import { useAccount } from "./AccountProvider.js";
+import AppearanceSettings from "../appShell/AppearanceSettings.js";
+import { toastSuccess } from "../feedback/toast.js";
+import FormProblemAlert from "../forms/FormProblemAlert.js";
+import FormTextField from "../forms/FormTextField.js";
+import SubmitButton from "../forms/SubmitButton.js";
+import { applyServerProblem } from "../forms/applyServerProblem.js";
+import * as Yup from "yup";
+import TextInput from "../inputs/TextInput.js";
+import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import ProfileHeader from "../ui/layout/ProfileHeader.js";
+import SectionCard from "../ui/layout/SectionCard.js";
+const PROFILE_TAB = Object.freeze({ data: "data", security: "security", preferences: "preferences" });
+const TAB_PARAM = "tab";
+const PHONE_PATTERN = /^\+?\d{7,15}$/;
+const FORM_MAX_WIDTH = 520;
+function ProfileDataSection({ extraFields, onProfileSaved, texts }) {
+  const { t } = useToolkitTranslation("account", texts);
+  const { connector, session, refreshSession } = useAccount();
+  const extraRules = extraFields?.rules;
+  const schema = useMemo(() => Yup.object({
+    name: Yup.string().trim().required(),
+    phone: Yup.string().trim().matches(PHONE_PATTERN, { message: { key: "account:profile.data.phoneInvalid" }, excludeEmptyString: true }),
+    ...extraRules
+  }), [extraRules]);
+  const initialValues = { name: session.user.name ?? "", phone: session.user.phone ?? "", ...extraFields?.initialValues?.(session.user) };
+  const save = async (values, formikHelpers) => {
+    const profile = { ...values, name: values.name.trim(), phone: values.phone.trim() };
+    try {
+      const response = await connector.updateProfile(profile);
+      await refreshSession();
+      toastSuccess(response?.message ?? t("profile.data.saved"));
+      onProfileSaved?.({ values: profile, response });
+    } catch (error) {
+      applyServerProblem(error, { ...formikHelpers, values });
+    }
+  };
+  return /* @__PURE__ */ jsxs(SectionCard, { title: t("profile.data.title"), children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: t("profile.data.text") }),
+    /* @__PURE__ */ jsx(Formik, { initialValues, validationSchema: schema, onSubmit: save, children: /* @__PURE__ */ jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, sx: { maxWidth: FORM_MAX_WIDTH }, children: [
+      /* @__PURE__ */ jsx(FormProblemAlert, {}),
+      /* @__PURE__ */ jsx(FormTextField, { name: "name", label: t("profile.data.name"), autoComplete: "name" }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          name: "email",
+          label: t("profile.data.email"),
+          value: session.user.email,
+          onChange: () => {
+          },
+          helperText: t("profile.data.emailHelp"),
+          disabled: true
+        }
+      ),
+      /* @__PURE__ */ jsx(FormTextField, { name: "phone", label: t("profile.data.phone"), type: "tel", autoComplete: "tel", inputMode: "tel" }),
+      extraFields?.fields,
+      /* @__PURE__ */ jsx(SubmitButton, { sx: { alignSelf: "flex-start" }, children: t("profile.data.save") })
+    ] }) }) })
+  ] });
+}
+function ProfileScreen({
+  showColorScheme = true,
+  extraFields,
+  extraTabs = [],
+  hiddenTabs = [],
+  onTabChange,
+  onProfileSaved,
+  texts
+}) {
+  const { t } = useToolkitTranslation("account", texts);
+  const { session } = useAccount();
+  const { useNavigate, useLocation } = useToolkitNavigation();
+  const navigate = useNavigate();
+  const { pathname, search } = useLocation();
+  const tabs = [
+    ...Object.values(PROFILE_TAB).filter((tab) => !hiddenTabs.includes(tab)).map((tab) => ({ key: tab, label: t(`profile.tabs.${tab}`) })),
+    ...extraTabs.map(({ key, label }) => ({ key, label }))
+  ];
+  const requestedTab = new URLSearchParams(search).get(TAB_PARAM);
+  const activeTab = tabs.some((tab) => tab.key === requestedTab) ? requestedTab : tabs[0]?.key;
+  const activeExtraTab = extraTabs.find((tab) => tab.key === activeTab);
+  const changeTab = (tab) => {
+    navigate(`${pathname}?${TAB_PARAM}=${tab}`, { replace: true });
+    onTabChange?.(tab);
+  };
+  if (!session) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(
+      ProfileHeader,
+      {
+        name: session.user.name,
+        email: session.user.email,
+        subtitle: session.user.subtitle,
+        avatarUrl: session.user.avatarUrl,
+        chips: session.labels ?? []
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: activeTab,
+        onChange: (event, tab) => changeTab(tab),
+        "aria-label": t("profile.tabs.label"),
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        children: tabs.map((tab) => /* @__PURE__ */ jsx(Tab, { value: tab.key, label: tab.label }, tab.key))
+      }
+    ),
+    activeTab === PROFILE_TAB.data && /* @__PURE__ */ jsx(ProfileDataSection, { extraFields, onProfileSaved, texts }),
+    activeTab === PROFILE_TAB.security && /* @__PURE__ */ jsx(AccountSecuritySection, {}),
+    activeTab === PROFILE_TAB.preferences && /* @__PURE__ */ jsxs(SectionCard, { title: t("profile.preferences.title"), children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: t("profile.preferences.text") }),
+      /* @__PURE__ */ jsx(Stack, { sx: { maxWidth: FORM_MAX_WIDTH, mx: -1 }, children: /* @__PURE__ */ jsx(AppearanceSettings, { showColorScheme }) })
+    ] }),
+    activeExtraTab?.content
+  ] });
+}
+export {
+  PROFILE_TAB,
+  ProfileScreen as default
+};
+//# sourceMappingURL=ProfileScreen.js.map

package/dist/account/ProfileScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileScreen.js","sources":["../../src/account/ProfileScreen.jsx"],"sourcesContent":["// Mi perfil, completo: quién está dentro (ProfileHeader con sus perfiles como chips) y tres pestañas:\n//   - Sus datos: nombre y teléfono (el correo se ve pero no se cambia aquí); al guardar se vuelve a leer la sesión, así la\n//     barra y el menú de la cuenta ya dicen el nombre nuevo;\n//   - Seguridad: AccountSecuritySection (contraseña, dos pasos, sesiones y bitácora);\n//   - Preferencias: AppearanceSettings (tamaño de letra, idioma y modo de color).\n// La pestaña abierta va en la dirección (?tab=): se puede compartir o recargar sin perderla. Lo del servidor sale del\n// conector de la cuenta.\n//\n// Se extiende sin tocar el framework (cada proyecto tiene su perfil «especial»):\n//   - extraFields: campos propios en «Sus datos» (el área, el número de empleado…), con su valor de inicio sacado del usuario\n//     de la sesión, sus reglas de yup y sus campos. Al guardar viajan a connector.updateProfile junto con name y phone: un\n//     backend que ya existe recibe lo suyo con sus nombres;\n//   - extraTabs: pestañas propias después de las de la casa (facturación, notificaciones…); hiddenTabs esconde las de la casa;\n//   - eventos: onTabChange y onProfileSaved (lo guardado y lo que contestó el servidor);\n//   - texts: cualquier texto, con la forma de `account` en los textos del paquete.\n//\n//   <ProfileScreen />\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo} from 'react';\nimport {Form, Formik} from 'formik';\nimport Stack from '@mui/material/Stack';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport Typography from '@mui/material/Typography';\n\nimport AccountSecuritySection from '@/account/AccountSecuritySection.jsx';\nimport {useAccount} from '@/account/AccountProvider.jsx';\nimport AppearanceSettings from '@/appShell/AppearanceSettings.jsx';\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 TextInput from '@/inputs/TextInput.jsx';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ProfileHeader from '@/ui/layout/ProfileHeader.jsx';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\n\n/** Las pestañas, en el orden en que se pintan. */\nexport const PROFILE_TAB = Object.freeze({data: 'data', security: 'security', preferences: 'preferences'});\nconst TAB_PARAM = 'tab';\n// el teléfono: dígitos, con + opcional al inicio (formato internacional); lo largo que permite el plan de numeración\nconst PHONE_PATTERN = /^\\+?\\d{7,15}$/;\n// lo ancho de los formularios: un renglón cómodo, no toda la pantalla\nconst FORM_MAX_WIDTH = 520;\n\n/**\n * Sus datos: nombre, teléfono y los campos propios del proyecto (extraFields).\n *\n * @param {object} props\n * @param {object} [props.extraFields]\n * @param {Function} [props.onProfileSaved]\n * @param {object} [props.texts]\n */\nfunction ProfileDataSection({extraFields, onProfileSaved, texts}) {\n    const {t} = useToolkitTranslation('account', texts);\n    const {connector, session, refreshSession} = useAccount();\n    const extraRules = extraFields?.rules;\n    // el esquema se arma al pintar: yup toma sus mensajes al armarlo. Las reglas propias se suman a las de la casa\n    const schema = useMemo(() => Yup.object({\n        name: Yup.string().trim().required(),\n        phone: Yup.string().trim().matches(PHONE_PATTERN, {message: {key: 'account:profile.data.phoneInvalid'}, excludeEmptyString: true}),\n        ...extraRules,\n    }), [extraRules]);\n    const initialValues = {name: session.user.name ?? '', phone: session.user.phone ?? '', ...extraFields?.initialValues?.(session.user)};\n\n    const save = async (values, formikHelpers) => {\n        // lo de la casa limpio de espacios; lo propio, tal como lo dejaron sus campos\n        const profile = {...values, name: values.name.trim(), phone: values.phone.trim()};\n        try {\n            const response = await connector.updateProfile(profile);\n            await refreshSession();\n            toastSuccess(response?.message ?? t('profile.data.saved'));\n            onProfileSaved?.({values: profile, response});\n        } catch (error) {\n            applyServerProblem(error, {...formikHelpers, values});\n        }\n    };\n\n    return (\n        <SectionCard title={t('profile.data.title')}>\n            <Typography variant=\"body2\" color=\"text.secondary\" sx={{mb: 2}}>{t('profile.data.text')}</Typography>\n            <Formik initialValues={initialValues} validationSchema={schema} onSubmit={save}>\n                <Form noValidate>\n                    <Stack spacing={2} sx={{maxWidth: FORM_MAX_WIDTH}}>\n                        <FormProblemAlert />\n                        <FormTextField name=\"name\" label={t('profile.data.name')} autoComplete=\"name\" />\n                        {/* el correo se ve con el mismo estilo de los demás campos, pero no se cambia aquí */}\n                        <TextInput name=\"email\" label={t('profile.data.email')} value={session.user.email} onChange={() => {}}\n                                   helperText={t('profile.data.emailHelp')} disabled />\n                        <FormTextField name=\"phone\" label={t('profile.data.phone')} type=\"tel\" autoComplete=\"tel\" inputMode=\"tel\" />\n                        {extraFields?.fields}\n                        <SubmitButton sx={{alignSelf: 'flex-start'}}>{t('profile.data.save')}</SubmitButton>\n                    </Stack>\n                </Form>\n            </Formik>\n        </SectionCard>\n    );\n}\n\n/** @typedef {import('@/account/accountConnector.js').AccountUser} AccountUser */\n\n/**\n * @param {object} props\n * @param {boolean} [props.showColorScheme] el ajuste de claro u oscuro en Preferencias; sin modo oscuro, false\n * @param {{initialValues?: (user: AccountUser & Record<string, any>) => Record<string, any>, rules?: Record<string, any>, fields: import('react').ReactNode}} [props.extraFields]\n *     campos propios en «Sus datos», debajo del teléfono: sus valores de inicio salen del usuario de la sesión (lo que su\n *     conector ponga en session.user), sus reglas de yup y sus campos (FormTextField, FormSelectField… de /forms). Al guardar\n *     viajan a connector.updateProfile junto con name y phone\n * @param {Array<{key: string, label: string, content: import('react').ReactNode}>} [props.extraTabs] pestañas propias,\n *     después de las de la casa; label ya traducido\n * @param {Array<'data'|'security'|'preferences'>} [props.hiddenTabs] pestañas de la casa que no se ven (PROFILE_TAB)\n * @param {(tab: string) => void} [props.onTabChange] cada que se cambia de pestaña\n * @param {(saved: {values: Record<string, any>, response: unknown}) => void} [props.onProfileSaved] después de guardar «Sus datos»\n * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete:\n *     {profile: {tabs: {data: 'Mis datos'}}}\n */\nexport default function ProfileScreen({\n    showColorScheme = true, extraFields, extraTabs = [], hiddenTabs = [], onTabChange, onProfileSaved, texts,\n}) {\n    const {t} = useToolkitTranslation('account', texts);\n    const {session} = useAccount();\n    const {useNavigate, useLocation} = useToolkitNavigation();\n    const navigate = useNavigate();\n    const {pathname, search} = useLocation();\n    // las pestañas que se ven: las de la casa que no se escondieron y luego las del proyecto\n    const tabs = [\n        ...Object.values(PROFILE_TAB).filter((tab) => !hiddenTabs.includes(tab)).map((tab) => ({key: tab, label: t(`profile.tabs.${tab}`)})),\n        ...extraTabs.map(({key, label}) => ({key, label})),\n    ];\n    const requestedTab = new URLSearchParams(search).get(TAB_PARAM);\n    const activeTab = tabs.some((tab) => tab.key === requestedTab) ? requestedTab : tabs[0]?.key;\n    const activeExtraTab = extraTabs.find((tab) => tab.key === activeTab);\n    const changeTab = (tab) => {\n        navigate(`${pathname}?${TAB_PARAM}=${tab}`, {replace: true});\n        onTabChange?.(tab);\n    };\n\n    // guard clause: sin sesión no hay perfil que enseñar (el marco de la app ya lleva a entrar)\n    if (!session) {\n        return null;\n    }\n\n    return (\n        <Stack spacing={2}>\n            <ProfileHeader name={session.user.name} email={session.user.email} subtitle={session.user.subtitle} avatarUrl={session.user.avatarUrl}\n                           chips={session.labels ?? []} />\n            <Tabs value={activeTab} onChange={(event, tab) => changeTab(tab)} aria-label={t('profile.tabs.label')}\n                  variant=\"scrollable\" allowScrollButtonsMobile>\n                {tabs.map((tab) => <Tab key={tab.key} value={tab.key} label={tab.label} />)}\n            </Tabs>\n            {activeTab === PROFILE_TAB.data && <ProfileDataSection extraFields={extraFields} onProfileSaved={onProfileSaved} texts={texts} />}\n            {activeTab === PROFILE_TAB.security && <AccountSecuritySection />}\n            {activeTab === PROFILE_TAB.preferences && (\n                <SectionCard title={t('profile.preferences.title')}>\n                    <Typography variant=\"body2\" color=\"text.secondary\" sx={{mb: 1}}>{t('profile.preferences.text')}</Typography>\n                    <Stack sx={{maxWidth: FORM_MAX_WIDTH, mx: -1}}>\n                        <AppearanceSettings showColorScheme={showColorScheme} />\n                    </Stack>\n                </SectionCard>\n            )}\n            {activeExtraTab?.content}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/account/ResetPasswordScreen.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Alert from "@mui/material/Alert";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import { useAccount } from "./AccountProvider.js";
+import { AuthLayout } from "../appShell/AuthLayout.js";
+import ChangePasswordForm from "../forms/auth/ChangePasswordForm.js";
+import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+function ResetPasswordScreen({
+  signInPath,
+  forgotPasswordPath,
+  tokenParam = "token",
+  logo,
+  brandName,
+  showLanguageToggle = true,
+  showColorSchemeToggle = true,
+  texts
+}) {
+  const { t } = useToolkitTranslation("account", texts);
+  const { connector } = useAccount();
+  const { useLocation, Link } = useToolkitNavigation();
+  const { search } = useLocation();
+  const [isDone, setIsDone] = useState(false);
+  const token = new URLSearchParams(search).get(tokenParam);
+  const save = async ({ newPassword }) => {
+    await connector.resetPassword({ token, newPassword });
+    setIsDone(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    AuthLayout,
+    {
+      logo,
+      brandName,
+      title: t("reset.title"),
+      description: t("reset.subtitle"),
+      showLanguageToggle,
+      showColorSchemeToggle,
+      children: [
+        !token && /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+          /* @__PURE__ */ jsx(Alert, { severity: "error", children: t("reset.missingToken") }),
+          forgotPasswordPath && /* @__PURE__ */ jsx(Button, { component: Link, to: forgotPasswordPath, variant: "contained", children: t("reset.askAgain") })
+        ] }),
+        token && isDone && /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+          /* @__PURE__ */ jsx(Alert, { severity: "success", role: "status", children: t("reset.done") }),
+          /* @__PURE__ */ jsx(Button, { component: Link, to: signInPath, variant: "contained", children: t("reset.goToSignIn") })
+        ] }),
+        token && !isDone && /* @__PURE__ */ jsx(ChangePasswordForm, { requireCurrentPassword: false, onSubmit: save })
+      ]
+    }
+  );
+}
+export {
+  ResetPasswordScreen as default
+};
+//# sourceMappingURL=ResetPasswordScreen.js.map

package/dist/account/ResetPasswordScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResetPasswordScreen.js","sources":["../../src/account/ResetPasswordScreen.jsx"],"sourcesContent":["// Elegir una contraseña nueva desde el enlace del correo, completa: ChangePasswordForm sin la contraseña actual (quien llega\n// aquí la olvidó). El enlace trae su clave (?token=) y el servidor la revisa al guardar (connector.resetPassword). Sin\n// clave en la dirección, se dice que el enlace no sirve y cómo pedir otro.\n//\n//   <ResetPasswordScreen signInPath=\"/sign-in\" forgotPasswordPath=\"/forgot-password\" logo={<AppLogo />} />\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Alert from '@mui/material/Alert';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\n\nimport {useAccount} from '@/account/AccountProvider.jsx';\nimport {AuthLayout} from '@/appShell/AuthLayout.jsx';\nimport ChangePasswordForm from '@/forms/auth/ChangePasswordForm.jsx';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n/**\n * @param {object} props\n * @param {string} props.signInPath a dónde ir al terminar\n * @param {string} [props.forgotPasswordPath] para pedir otro enlace si este no sirve\n * @param {string} [props.tokenParam] cómo se llama la clave en la dirección; por omisión 'token'\n * @param {import('react').ReactNode} [props.logo]\n * @param {string} [props.brandName]\n * @param {boolean} [props.showLanguageToggle]\n * @param {boolean} [props.showColorSchemeToggle]\n * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete\n */\nexport default function ResetPasswordScreen({\n    signInPath, forgotPasswordPath, tokenParam = 'token', logo, brandName, showLanguageToggle = true, showColorSchemeToggle = true, texts,\n}) {\n    const {t} = useToolkitTranslation('account', texts);\n    const {connector} = useAccount();\n    const {useLocation, Link} = useToolkitNavigation();\n    const {search} = useLocation();\n    const [isDone, setIsDone] = useState(false);\n    const token = new URLSearchParams(search).get(tokenParam);\n\n    const save = async ({newPassword}) => {\n        await connector.resetPassword({token, newPassword});\n        setIsDone(true);\n    };\n\n    return (\n        <AuthLayout logo={logo} brandName={brandName} title={t('reset.title')} description={t('reset.subtitle')}\n                    showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle}>\n            {!token && (\n                <Stack spacing={2}>\n                    <Alert severity=\"error\">{t('reset.missingToken')}</Alert>\n                    {forgotPasswordPath && <Button component={Link} to={forgotPasswordPath} variant=\"contained\">{t('reset.askAgain')}</Button>}\n                </Stack>\n            )}\n            {token && isDone && (\n                <Stack spacing={2}>\n                    <Alert severity=\"success\" role=\"status\">{t('reset.done')}</Alert>\n                    <Button component={Link} to={signInPath} variant=\"contained\">{t('reset.goToSignIn')}</Button>\n                </Stack>\n            )}\n            {token && !isDone && <ChangePasswordForm requireCurrentPassword={false} onSubmit={save} />}\n        </AuthLayout>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA6BA,SAAwB,oBAAoB;AAAA,EACxC;AAAA,EAAY;AAAA,EAAoB,aAAa;AAAA,EAAS;AAAA,EAAM;AAAA,EAAW,qBAAqB;AAAA,EAAM,wBAAwB;AAAA,EAAM;AACpI,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,WAAW,KAAK;AAClD,QAAM,EAAC,UAAA,IAAa,WAAA;AACpB,QAAM,EAAC,aAAa,KAAA,IAAQ,qBAAA;AAC5B,QAAM,EAAC,OAAA,IAAU,YAAA;AACjB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,QAAQ,IAAI,gBAAgB,MAAM,EAAE,IAAI,UAAU;AAExD,QAAM,OAAO,OAAO,EAAC,kBAAiB;AAClC,UAAM,UAAU,cAAc,EAAC,OAAO,aAAY;AAClD,cAAU,IAAI;AAAA,EAClB;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAW;AAAA,MAAY;AAAA,MAAsB,OAAO,EAAE,aAAa;AAAA,MAAG,aAAa,EAAE,gBAAgB;AAAA,MAC1F;AAAA,MAAwC;AAAA,MAC/C,UAAA;AAAA,QAAA,CAAC,SACE,qBAAC,OAAA,EAAM,SAAS,GACZ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAM,UAAS,SAAS,UAAA,EAAE,oBAAoB,GAAE;AAAA,UAChD,sBAAsB,oBAAC,QAAA,EAAO,WAAW,MAAM,IAAI,oBAAoB,SAAQ,aAAa,UAAA,EAAE,gBAAgB,EAAA,CAAE;AAAA,QAAA,GACrH;AAAA,QAEH,SAAS,UACN,qBAAC,OAAA,EAAM,SAAS,GACZ,UAAA;AAAA,UAAA,oBAAC,SAAM,UAAS,WAAU,MAAK,UAAU,UAAA,EAAE,YAAY,GAAE;AAAA,UACzD,oBAAC,QAAA,EAAO,WAAW,MAAM,IAAI,YAAY,SAAQ,aAAa,UAAA,EAAE,kBAAkB,EAAA,CAAE;AAAA,QAAA,GACxF;AAAA,QAEH,SAAS,CAAC,UAAU,oBAAC,sBAAmB,wBAAwB,OAAO,UAAU,KAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpG;"}

package/dist/account/SignInScreen.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Alert from "@mui/material/Alert";
+import { useAccount } from "./AccountProvider.js";
+import DemoTotpCodeButton from "./DemoTotpCodeButton.js";
+import { AuthLayout } from "../appShell/AuthLayout.js";
+import SignInForm from "../forms/auth/SignInForm.js";
+import SecondStepForm, { SECOND_STEP_METHOD } from "../forms/security/SecondStepForm.js";
+import { readRedirectParam } from "../navigation.js";
+import { signWithPasskey, passkeysSupported } from "../security/passkeys.js";
+import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import ComponentTexts from "../toolkit/ComponentTexts.js";
+function SignInScreen({ homePath = "/", forgotPasswordPath, logo, brandName, footer, showLanguageToggle = true, showColorSchemeToggle = true, texts }) {
+  const { t } = useToolkitTranslation("auth", texts);
+  const { connector, session, refreshSession } = useAccount();
+  const { useNavigate, useLocation } = useToolkitNavigation();
+  const navigate = useNavigate();
+  const { search } = useLocation();
+  const [secondStep, setSecondStep] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const destination = readRedirectParam(search) ?? homePath;
+  useEffect(() => {
+    if (session) {
+      navigate(destination, { replace: true });
+    }
+  }, [session, destination, navigate]);
+  const signIn = async (credentials) => {
+    setNotice(null);
+    const result = await connector.signIn({ remember: false, ...credentials });
+    if (result?.secondStep) {
+      setSecondStep(result.secondStep);
+      return;
+    }
+    await refreshSession();
+  };
+  const signInFromFooter = async (credentials) => {
+    try {
+      await signIn(credentials);
+    } catch (error) {
+      setNotice(error?.message ?? null);
+    }
+  };
+  const backToPassword = (message) => {
+    setSecondStep(null);
+    setNotice(message);
+  };
+  if (session) {
+    return null;
+  }
+  if (secondStep) {
+    const showsDemoCode = typeof connector.demoTotpCode === "function" && secondStep.methods.includes(SECOND_STEP_METHOD.totp);
+    return /* @__PURE__ */ jsx(ComponentTexts, { namespace: "auth", texts, children: /* @__PURE__ */ jsx(
+      AuthLayout,
+      {
+        logo,
+        brandName,
+        title: t("security:twoStep.title"),
+        showLanguageToggle,
+        showColorSchemeToggle,
+        children: /* @__PURE__ */ jsx(
+          SecondStepForm,
+          {
+            methods: secondStep.methods,
+            canUsePasskeys: passkeysSupported(),
+            onUsePasskey: async () => {
+              await connector.signInWithPasskey(await signWithPasskey(await connector.secondStepPasskeyOptions()));
+              await refreshSession();
+            },
+            onSubmitCode: async ({ method, code }) => {
+              await connector.signInSecondStep({ method, code });
+              await refreshSession();
+            },
+            onCancel: backToPassword,
+            footer: showsDemoCode && /* @__PURE__ */ jsx(DemoTotpCodeButton, { loadCode: connector.demoTotpCode })
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(ComponentTexts, { namespace: "auth", texts, children: /* @__PURE__ */ jsxs(
+    AuthLayout,
+    {
+      logo,
+      brandName,
+      title: t("signIn.title"),
+      description: t("signIn.subtitle"),
+      showLanguageToggle,
+      showColorSchemeToggle,
+      footer: typeof footer === "function" ? footer({ signIn: signInFromFooter }) : footer,
+      children: [
+        notice && /* @__PURE__ */ jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: notice }),
+        /* @__PURE__ */ jsx(SignInForm, { onSubmit: signIn, forgotPasswordPath })
+      ]
+    }
+  ) });
+}
+export {
+  SignInScreen as default
+};
+//# sourceMappingURL=SignInScreen.js.map

package/dist/account/SignInScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInScreen.js","sources":["../../src/account/SignInScreen.jsx"],"sourcesContent":["// Entrar, completo: la contraseña (SignInForm) y, si la cuenta tiene verificación en dos pasos, el segundo paso\n// (SecondStepForm: la llave de acceso, el código de la app o uno de recuperación). Al terminar se vuelve a leer la sesión y\n// se va a la pantalla que se quería abrir (readRedirectParam: solo si es de esta app) o al inicio.\n//\n// Lo del servidor sale del conector de la cuenta (useAccount): en el proyecto la pantalla solo se pone en su ruta.\n//\n//   <SignInScreen forgotPasswordPath=\"/forgot-password\" logo={<AppLogo />} />\n//\n// footer va abajo de la tarjeta. Si es una función, recibe signIn para entrar desde un botón propio (p. ej. «Entrar con la\n// cuenta de ejemplo»), con el mismo segundo paso; si falla, el motivo sale arriba del formulario.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useState} from 'react';\nimport Alert from '@mui/material/Alert';\n\nimport {useAccount} from '@/account/AccountProvider.jsx';\nimport DemoTotpCodeButton from '@/account/DemoTotpCodeButton.jsx';\nimport {AuthLayout} from '@/appShell/AuthLayout.jsx';\nimport SignInForm from '@/forms/auth/SignInForm.jsx';\nimport SecondStepForm, {SECOND_STEP_METHOD} from '@/forms/security/SecondStepForm.jsx';\nimport {readRedirectParam} from '@/navigation.js';\nimport {passkeysSupported, signWithPasskey} from '@/security/passkeys.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\n\n/**\n * @param {object} props\n * @param {string} [props.homePath] a dónde ir si no se quería abrir otra pantalla; por omisión '/'\n * @param {string} [props.forgotPasswordPath] sin ella no sale «¿Olvidó su contraseña?»\n * @param {import('react').ReactNode} [props.logo]\n * @param {string} [props.brandName] por omisión el appName de ToolkitProvider\n * @param {import('react').ReactNode | ((helpers: {signIn: (credentials: {email: string, password: string, remember?: boolean}) => Promise<void>}) => import('react').ReactNode)} [props.footer]\n * @param {boolean} [props.showLanguageToggle] por omisión sí\n * @param {boolean} [props.showColorSchemeToggle] por omisión sí\n * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete\n */\nexport default function SignInScreen({homePath = '/', forgotPasswordPath, logo, brandName, footer, showLanguageToggle = true, showColorSchemeToggle = true, texts}) {\n    const {t} = useToolkitTranslation('auth', texts);\n    const {connector, session, refreshSession} = useAccount();\n    const {useNavigate, useLocation} = useToolkitNavigation();\n    const navigate = useNavigate();\n    const {search} = useLocation();\n    // con verificación en dos pasos: los métodos del segundo paso (la contraseña ya fue correcta)\n    const [secondStep, setSecondStep] = useState(null);\n    const [notice, setNotice] = useState(null);\n    const destination = readRedirectParam(search) ?? homePath;\n\n    // ya hay sesión (acaba de entrar, o abrió esta pantalla estando dentro): a donde iba\n    useEffect(() => {\n        if (session) {\n            navigate(destination, {replace: true});\n        }\n    }, [session, destination, navigate]);\n\n    // después de la contraseña: el segundo paso si lo pide el servidor; si no, ya está dentro\n    const signIn = async (credentials) => {\n        setNotice(null);\n        const result = await connector.signIn({remember: false, ...credentials});\n        if (result?.secondStep) {\n            setSecondStep(result.secondStep);\n            return;\n        }\n        await refreshSession();\n    };\n    // desde un botón propio del footer: el error no tiene formulario donde salir, sale arriba\n    const signInFromFooter = async (credentials) => {\n        try {\n            await signIn(credentials);\n        } catch (error) {\n            setNotice(error?.message ?? null);\n        }\n    };\n    // se acabaron los intentos o se venció el tiempo: de regreso a la contraseña, con el motivo\n    const backToPassword = (message) => {\n        setSecondStep(null);\n        setNotice(message);\n    };\n\n    if (session) {\n        return null;\n    }\n\n    if (secondStep) {\n        const showsDemoCode = typeof connector.demoTotpCode === 'function' && secondStep.methods.includes(SECOND_STEP_METHOD.totp);\n        return (\n            <ComponentTexts namespace=\"auth\" texts={texts}>\n                <AuthLayout logo={logo} brandName={brandName} title={t('security:twoStep.title')}\n                            showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle}>\n                    <SecondStepForm methods={secondStep.methods} canUsePasskeys={passkeysSupported()}\n                                    onUsePasskey={async () => {\n                                        await connector.signInWithPasskey(await signWithPasskey(await connector.secondStepPasskeyOptions()));\n                                        await refreshSession();\n                                    }}\n                                    onSubmitCode={async ({method, code}) => {\n                                        await connector.signInSecondStep({method, code});\n                                        await refreshSession();\n                                    }}\n                                    onCancel={backToPassword}\n                                    footer={showsDemoCode && <DemoTotpCodeButton loadCode={connector.demoTotpCode} />} />\n                </AuthLayout>\n            </ComponentTexts>\n        );\n    }\n\n    return (\n        <ComponentTexts namespace=\"auth\" texts={texts}>\n            <AuthLayout logo={logo} brandName={brandName} title={t('signIn.title')} description={t('signIn.subtitle')}\n                        showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle}\n                        footer={typeof footer === 'function' ? footer({signIn: signInFromFooter}) : footer}>\n                {notice && <Alert severity=\"warning\" sx={{mb: 2}}>{notice}</Alert>}\n                <SignInForm onSubmit={signIn} forgotPasswordPath={forgotPasswordPath} />\n            </AuthLayout>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqCA,SAAwB,aAAa,EAAC,WAAW,KAAK,oBAAoB,MAAM,WAAW,QAAQ,qBAAqB,MAAM,wBAAwB,MAAM,SAAQ;AAChK,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ,KAAK;AAC/C,QAAM,EAAC,WAAW,SAAS,eAAA,IAAkB,WAAA;AAC7C,QAAM,EAAC,aAAa,YAAA,IAAe,qBAAA;AACnC,QAAM,WAAW,YAAA;AACjB,QAAM,EAAC,OAAA,IAAU,YAAA;AAEjB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,QAAM,cAAc,kBAAkB,MAAM,KAAK;AAGjD,YAAU,MAAM;AACZ,QAAI,SAAS;AACT,eAAS,aAAa,EAAC,SAAS,KAAA,CAAK;AAAA,IACzC;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,QAAQ,CAAC;AAGnC,QAAM,SAAS,OAAO,gBAAgB;AAClC,cAAU,IAAI;AACd,UAAM,SAAS,MAAM,UAAU,OAAO,EAAC,UAAU,OAAO,GAAG,aAAY;AACvE,QAAI,QAAQ,YAAY;AACpB,oBAAc,OAAO,UAAU;AAC/B;AAAA,IACJ;AACA,UAAM,eAAA;AAAA,EACV;AAEA,QAAM,mBAAmB,OAAO,gBAAgB;AAC5C,QAAI;AACA,YAAM,OAAO,WAAW;AAAA,IAC5B,SAAS,OAAO;AACZ,gBAAU,OAAO,WAAW,IAAI;AAAA,IACpC;AAAA,EACJ;AAEA,QAAM,iBAAiB,CAAC,YAAY;AAChC,kBAAc,IAAI;AAClB,cAAU,OAAO;AAAA,EACrB;AAEA,MAAI,SAAS;AACT,WAAO;AAAA,EACX;AAEA,MAAI,YAAY;AACZ,UAAM,gBAAgB,OAAO,UAAU,iBAAiB,cAAc,WAAW,QAAQ,SAAS,mBAAmB,IAAI;AACzH,WACI,oBAAC,gBAAA,EAAe,WAAU,QAAO,OAC7B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW;AAAA,QAAY;AAAA,QAAsB,OAAO,EAAE,wBAAwB;AAAA,QACnE;AAAA,QAAwC;AAAA,QAChD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAAe,SAAS,WAAW;AAAA,YAAS,gBAAgB,kBAAA;AAAA,YAC7C,cAAc,YAAY;AACtB,oBAAM,UAAU,kBAAkB,MAAM,gBAAgB,MAAM,UAAU,yBAAA,CAA0B,CAAC;AACnG,oBAAM,eAAA;AAAA,YACV;AAAA,YACA,cAAc,OAAO,EAAC,QAAQ,WAAU;AACpC,oBAAM,UAAU,iBAAiB,EAAC,QAAQ,MAAK;AAC/C,oBAAM,eAAA;AAAA,YACV;AAAA,YACA,UAAU;AAAA,YACV,QAAQ,iBAAiB,oBAAC,oBAAA,EAAmB,UAAU,UAAU,aAAA,CAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAAI;AAAA,IAAA,GAE3G;AAAA,EAER;AAEA,SACI,oBAAC,gBAAA,EAAe,WAAU,QAAO,OAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAW;AAAA,MAAY;AAAA,MAAsB,OAAO,EAAE,cAAc;AAAA,MAAG,aAAa,EAAE,iBAAiB;AAAA,MAC5F;AAAA,MAAwC;AAAA,MACxC,QAAQ,OAAO,WAAW,aAAa,OAAO,EAAC,QAAQ,iBAAA,CAAiB,IAAI;AAAA,MACnF,UAAA;AAAA,QAAA,UAAU,oBAAC,SAAM,UAAS,WAAU,IAAI,EAAC,IAAI,EAAA,GAAK,UAAA,OAAA,CAAO;AAAA,QAC1D,oBAAC,YAAA,EAAW,UAAU,QAAQ,mBAAA,CAAwC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE9E;AAER;"}

package/dist/account/accountConnector.js

@@ -0,0 +1,31 @@
+const ACCOUNT_CONNECTOR_FUNCTIONS = Object.freeze([
+  "loadSession",
+  "signIn",
+  "signInSecondStep",
+  "secondStepPasskeyOptions",
+  "signInWithPasskey",
+  "signOut",
+  "requestPasswordReset",
+  "resetPassword",
+  "updateProfile",
+  "changePassword",
+  "loadSecurity",
+  "startTotp",
+  "confirmTotp",
+  "disableTotp",
+  "passkeyRegistrationOptions",
+  "savePasskey",
+  "removePasskey",
+  "regenerateRecoveryCodes",
+  "listSessions",
+  "closeOtherSessions",
+  "listActivity"
+]);
+function missingConnectorFunctionsOf(connector) {
+  return ACCOUNT_CONNECTOR_FUNCTIONS.filter((name) => typeof connector?.[name] !== "function");
+}
+export {
+  ACCOUNT_CONNECTOR_FUNCTIONS,
+  missingConnectorFunctionsOf
+};
+//# sourceMappingURL=accountConnector.js.map

package/dist/account/accountConnector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accountConnector.js","sources":["../../src/account/accountConnector.js"],"sourcesContent":["// El conector de la cuenta: lo ÚNICO que un proyecto escribe para tener entrar (con su segundo paso), «¿Olvidó su\n// contraseña?», elegir una contraseña nueva, Mi perfil y su seguridad (@stackcraftmx/calcita/account). Las pantallas solo\n// llaman estas funciones; cada una habla con el backend del proyecto.\n//\n// Tres formas de tenerlo:\n//   - createRestAccountConnector(apiClient): si el backend sigue el contrato REST (restAccountConnector.js), ya está;\n//   - createDemoAccountConnector() de @stackcraftmx/calcita/account-demo: todo en la memoria del navegador, para arrancar\n//     sin backend;\n//   - uno propio: un objeto con estas funciones, o el REST con las que no coincidan cambiadas ({...rest, signIn: …}).\n//\n// Cada función regresa una promesa y, si el servidor dice que no, truena con un ApiError (RFC 9457): la pantalla enseña su\n// mensaje, y lo de cada campo en su campo. Las llaves van en camelCase: la traducción desde el backend va en el conector.\n//\n// Funciones puras, no renderizan: function (regla de la casa). Pruebas en accountConnector.test.js.\n\n/**\n * Quien está dentro, como lo pintan la barra y Mi perfil.\n *\n * @typedef {object} AccountUser\n * @property {string} id\n * @property {string} name\n * @property {string} email\n * @property {string} [subtitle] el renglón bajo el nombre (puesto · sucursal)\n * @property {string} [phone]\n * @property {string} [avatarUrl]\n */\n\n/**\n * La sesión: quién está dentro y sus permisos (los lee createAccessChecker).\n *\n * @typedef {object} AccountSession\n * @property {AccountUser} user\n * @property {string[]} [roles]\n * @property {string[]} [abilities]\n * @property {string[]} [labels] sus perfiles o etiquetas, ya traducidos (salen como chips en Mi perfil)\n */\n\n/**\n * El estado de la verificación en dos pasos (el que pinta TwoStepVerificationCard).\n *\n * @typedef {object} AccountSecurity\n * @property {boolean} isEnabled\n * @property {string|null} [enabledAt]\n * @property {Array<{id: string, name: string, createdAt: string, lastUsedAt?: string|null}>} passkeys\n * @property {{isEnabled: boolean, enabledAt?: string|null}} totp\n * @property {number} recoveryCodesRemaining\n */\n\n/**\n * Lo que regresa un cambio de seguridad: el estado nuevo y, si se generaron, los códigos de recuperación (se enseñan una\n * sola vez).\n *\n * @typedef {object} AccountSecurityChange\n * @property {AccountSecurity} security\n * @property {string[]} [recoveryCodes]\n */\n\n/**\n * Un equipo donde la cuenta está abierta.\n *\n * @typedef {object} AccountDeviceSession\n * @property {string} id\n * @property {string|null} [browser]\n * @property {string|null} [platform]\n * @property {boolean} [isMobile]\n * @property {string} startedAt instante ISO\n * @property {string|null} [network] a medias (187.190.x.x), nunca la IP completa\n * @property {boolean} [isCurrent]\n */\n\n/**\n * Un renglón de la bitácora de la cuenta.\n *\n * @typedef {object} AccountEvent\n * @property {string} id\n * @property {string} kind uno de ACCOUNT_EVENT_KIND\n * @property {string} occurredAt instante ISO\n * @property {string|null} [device]\n * @property {string|null} [network]\n */\n\n/**\n * El conector completo.\n *\n * @typedef {object} AccountConnector\n * @property {() => Promise<AccountSession|null>} loadSession quién está dentro; null si nadie\n * @property {(credentials: {email: string, password: string, remember: boolean}) => Promise<{secondStep: {methods: string[]}|null}>} signIn\n *     con verificación en dos pasos regresa los métodos del segundo paso (SECOND_STEP_METHOD); sin ella, secondStep null\n *     y ya está dentro\n * @property {(input: {method: string, code: string}) => Promise<void>} signInSecondStep el código de la app (totp) o uno\n *     de recuperación (recoveryCode)\n * @property {() => Promise<object>} secondStepPasskeyOptions las opciones de WebAuthn para firmar (JSON del servidor)\n * @property {(credential: any) => Promise<void>} signInWithPasskey la firma del navegador (JSON de WebAuthn)\n * @property {() => Promise<void>} signOut\n * @property {(input: {email: string}) => Promise<void>} requestPasswordReset contesta igual exista o no el correo\n * @property {(input: {token: string, newPassword: string}) => Promise<void>} resetPassword desde el enlace del correo\n * @property {(input: {name: string, phone: string} & Record<string, any>) => Promise<{message?: string}|void>} updateProfile name, phone y\n *     los campos propios de ProfileScreen (extraFields)\n * @property {(input: {currentPassword?: string, newPassword: string}) => Promise<void>} changePassword\n * @property {() => Promise<AccountSecurity>} loadSecurity\n * @property {() => Promise<{secret: string, qrImageUrl?: string|null}>} startTotp una clave nueva (todavía sin activar)\n * @property {(code: string) => Promise<AccountSecurityChange>} confirmTotp\n * @property {(password: string) => Promise<AccountSecurityChange>} disableTotp\n * @property {() => Promise<object>} passkeyRegistrationOptions las opciones de WebAuthn para crear una llave\n * @property {(input: {name: string, credential: any}) => Promise<AccountSecurityChange>} savePasskey\n * @property {(input: {passkeyId: string, password: string}) => Promise<AccountSecurityChange>} removePasskey\n * @property {(password: string) => Promise<AccountSecurityChange>} regenerateRecoveryCodes\n * @property {() => Promise<AccountDeviceSession[]>} listSessions\n * @property {() => Promise<number>} closeOtherSessions cuántas cerró\n * @property {() => Promise<AccountEvent[]>} listActivity de lo más nuevo a lo más viejo\n * @property {() => Promise<string|null>} [demoTotpCode] SOLO en la demostración: el código que enseñaría la app ahorita\n *     (con él sale el botón «Usar el código de ejemplo»)\n */\n\n/** Las funciones que todo conector trae (demoTotpCode es opcional: solo la demostración). */\nexport const ACCOUNT_CONNECTOR_FUNCTIONS = Object.freeze([\n    'loadSession', 'signIn', 'signInSecondStep', 'secondStepPasskeyOptions', 'signInWithPasskey', 'signOut', 'requestPasswordReset',\n    'resetPassword', 'updateProfile', 'changePassword', 'loadSecurity', 'startTotp', 'confirmTotp', 'disableTotp',\n    'passkeyRegistrationOptions', 'savePasskey', 'removePasskey', 'regenerateRecoveryCodes', 'listSessions', 'closeOtherSessions',\n    'listActivity',\n]);\n\n/**\n * Las funciones que le faltan al conector (un error de quien lo escribió: se avisa al arrancar, no al picar un botón).\n *\n * @param {object|null|undefined} connector\n * @returns {string[]}\n */\nexport function missingConnectorFunctionsOf(connector) {\n    return ACCOUNT_CONNECTOR_FUNCTIONS.filter((name) => typeof connector?.[name] !== 'function');\n}\n"],"names":[],"mappings":"AAmHY,MAAC,8BAA8B,OAAO,OAAO;AAAA,EACrD;AAAA,EAAe;AAAA,EAAU;AAAA,EAAoB;AAAA,EAA4B;AAAA,EAAqB;AAAA,EAAW;AAAA,EACzG;AAAA,EAAiB;AAAA,EAAiB;AAAA,EAAkB;AAAA,EAAgB;AAAA,EAAa;AAAA,EAAe;AAAA,EAChG;AAAA,EAA8B;AAAA,EAAe;AAAA,EAAiB;AAAA,EAA2B;AAAA,EAAgB;AAAA,EACzG;AACJ,CAAC;AAQM,SAAS,4BAA4B,WAAW;AACnD,SAAO,4BAA4B,OAAO,CAAC,SAAS,OAAO,YAAY,IAAI,MAAM,UAAU;AAC/F;"}