@stackcraftmx/calcita 0.28.0 → 0.30.1

package/dist/pwa/InstallAppSetting.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstallAppSetting.js","sources":["../../src/pwa/InstallAppSetting.jsx"],"sourcesContent":["// «Instalar la app» dentro del menú de la cuenta (accountSettings de AppLayout): para quien dijo «Ahora no» a la invitación\n// y después sí la quiere. No respeta el «Ahora no» (aquí la persona la busca a propósito). Ya instalada o sin manera de\n// instalar en ese equipo, no pinta nada.\n//\n// El diálogo de los pasos va aquí mismo: el menú de la cuenta se queda abierto mientras se ve, y al cerrarlo se regresa al\n// menú.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InstallMobileRoundedIcon from '@mui/icons-material/InstallMobileRounded';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {INSTALL_VARIANT} from '@/pwa/installInstructions.js';\nimport InstallInstructionsDialog from '@/pwa/InstallInstructionsDialog.jsx';\nimport {useInstallPrompt} from '@/pwa/useInstallPrompt.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\n\n/**\n * @param {object} [props]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function InstallAppSetting({texts} = {}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {variant, promptInstall} = useInstallPrompt();\n    const [stepsOpen, setStepsOpen] = useState(false);\n\n    if (!variant) {\n        return null;\n    }\n\n    const handleClick = () => {\n        if (variant === INSTALL_VARIANT.native) {\n            promptInstall();\n        } else {\n            setStepsOpen(true);\n        }\n    };\n\n    return (\n        <ComponentTexts namespace=\"common\" texts={texts}>\n            <Box sx={{px: 1, py: 0.5}}>\n                <Button fullWidth variant=\"outlined\" startIcon={<InstallMobileRoundedIcon />} onClick={handleClick}>\n                    {t('install.menuLabel')}\n                </Button>\n                <InstallInstructionsDialog variant={variant} open={stepsOpen} onClose={() => setStepsOpen(false)} />\n            </Box>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,SAAwB,kBAAkB,EAAC,MAAA,IAAS,IAAI;AACpD,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,SAAS,cAAA,IAAiB,iBAAA;AACjC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,QAAM,cAAc,MAAM;AACtB,QAAI,YAAY,gBAAgB,QAAQ;AACpC,oBAAA;AAAA,IACJ,OAAO;AACH,mBAAa,IAAI;AAAA,IACrB;AAAA,EACJ;AAEA,SACI,oBAAC,gBAAA,EAAe,WAAU,UAAS,OAC/B,UAAA,qBAAC,KAAA,EAAI,IAAI,EAAC,IAAI,GAAG,IAAI,OACjB,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,WAAS,MAAC,SAAQ,YAAW,WAAW,oBAAC,0BAAA,CAAA,CAAyB,GAAI,SAAS,aAClF,UAAA,EAAE,mBAAmB,GAC1B;AAAA,IACA,oBAAC,6BAA0B,SAAkB,MAAM,WAAW,SAAS,MAAM,aAAa,KAAK,EAAA,CAAG;AAAA,EAAA,EAAA,CACtG,EAAA,CACJ;AAER;"}
+{"version":3,"file":"InstallAppSetting.js","sources":["../../src/pwa/InstallAppSetting.jsx"],"sourcesContent":["// «Instalar la app» dentro del menú de la cuenta (accountSettings de AppLayout): para quien dijo «Ahora no» a la invitación\n// y después sí la quiere. No respeta el «Ahora no» (aquí la persona la busca a propósito). Ya instalada o sin manera de\n// instalar en ese equipo, no pinta nada.\n//\n// El diálogo de los pasos va aquí mismo: el menú de la cuenta se queda abierto mientras se ve, y al cerrarlo se regresa al\n// menú.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaInstallAppSetting con defaultProps y\n// styleOverrides de sus partes: root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport InstallMobileRoundedIcon from '@mui/icons-material/InstallMobileRounded';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {INSTALL_VARIANT} from '@/pwa/installInstructions.js';\nimport InstallInstructionsDialog from '@/pwa/InstallInstructionsDialog.jsx';\nimport {useInstallPrompt} from '@/pwa/useInstallPrompt.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\nimport {piecePart} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaInstallAppSetting)\nconst THEME_NAME = 'CalcitaInstallAppSetting';\nconst InstallRoot = piecePart(THEME_NAME, 'Root', Box);\n\n/**\n * @param {object} [props]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function InstallAppSetting({texts} = {}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {variant, promptInstall} = useInstallPrompt();\n    const [stepsOpen, setStepsOpen] = useState(false);\n\n    if (!variant) {\n        return null;\n    }\n\n    const handleClick = () => {\n        if (variant === INSTALL_VARIANT.native) {\n            promptInstall();\n        } else {\n            setStepsOpen(true);\n        }\n    };\n\n    return (\n        <ComponentTexts namespace=\"common\" texts={texts}>\n            <InstallRoot ownSx={{px: 1, py: 0.5}}>\n                <Button fullWidth variant=\"outlined\" startIcon={<InstallMobileRoundedIcon />} onClick={handleClick}>\n                    {t('install.menuLabel')}\n                </Button>\n                <InstallInstructionsDialog variant={variant} open={stepsOpen} onClose={() => setStepsOpen(false)} />\n            </InstallRoot>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAwBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,GAAG;AAMrD,SAAwB,kBAAkB,EAAC,MAAA,IAAS,IAAI;AACpD,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,SAAS,cAAA,IAAiB,iBAAA;AACjC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,QAAM,cAAc,MAAM;AACtB,QAAI,YAAY,gBAAgB,QAAQ;AACpC,oBAAA;AAAA,IACJ,OAAO;AACH,mBAAa,IAAI;AAAA,IACrB;AAAA,EACJ;AAEA,SACI,oBAAC,gBAAA,EAAe,WAAU,UAAS,OAC/B,UAAA,qBAAC,aAAA,EAAY,OAAO,EAAC,IAAI,GAAG,IAAI,OAC5B,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,WAAS,MAAC,SAAQ,YAAW,WAAW,oBAAC,0BAAA,CAAA,CAAyB,GAAI,SAAS,aAClF,UAAA,EAAE,mBAAmB,GAC1B;AAAA,IACA,oBAAC,6BAA0B,SAAkB,MAAM,WAAW,SAAS,MAAM,aAAa,KAAK,EAAA,CAAG;AAAA,EAAA,EAAA,CACtG,EAAA,CACJ;AAER;"}

package/dist/pwa/InstallInstructionsDialog.js

@@ -8,6 +8,9 @@ import DialogTitle from "@mui/material/DialogTitle";
 import Typography from "@mui/material/Typography";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import { INSTALL_VARIANT } from "./installInstructions.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaInstallInstructions";
+const InstructionsSteps = piecePart(THEME_NAME, "Steps", Typography);
 const STEPS_BY_VARIANT = Object.freeze({
   [INSTALL_VARIANT.iosModern]: ["step1", "step2", "step3", "step4"],
   [INSTALL_VARIANT.iosClassic]: ["step1", "step2", "step3"],
@@ -16,7 +19,8 @@ const STEPS_BY_VARIANT = Object.freeze({
 function variantHasInstructions(variant) {
   return Boolean(STEPS_BY_VARIANT[variant]);
 }
-function InstallInstructionsDialog({ variant, open, onClose, texts }) {
+function InstallInstructionsDialog(props) {
+  const { variant, open, onClose, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("common", texts);
   const steps = STEPS_BY_VARIANT[variant];
   if (!steps) {
@@ -24,7 +28,7 @@ function InstallInstructionsDialog({ variant, open, onClose, texts }) {
   }
   return /* @__PURE__ */ jsxs(Dialog, { open, onClose, maxWidth: "xs", fullWidth: true, children: [
     /* @__PURE__ */ jsx(DialogTitle, { children: t(`install.${variant}.title`) }),
-    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Typography, { component: "ol", sx: { m: 0, pl: 3, display: "grid", gap: 1.25 }, children: steps.map((step) => /* @__PURE__ */ jsx(Typography, { component: "li", variant: "body1", children: t(`install.${variant}.${step}`) }, step)) }) }),
+    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(InstructionsSteps, { component: "ol", ownSx: { m: 0, pl: 3, display: "grid", gap: 1.25 }, children: steps.map((step) => /* @__PURE__ */ jsx(Typography, { component: "li", variant: "body1", children: t(`install.${variant}.${step}`) }, step)) }) }),
     /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: onClose, children: t("install.gotIt") }) })
   ] });
 }

package/dist/pwa/InstallInstructionsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstallInstructionsDialog.js","sources":["../../src/pwa/InstallInstructionsDialog.jsx"],"sourcesContent":["// Los pasos para instalar la app a mano, según el equipo (iOS 26 cambió el camino; Firefox usa su propio menú). Lo usan la\n// invitación (InstallPromptBanner) y la entrada del menú de la cuenta (InstallAppSetting): los dos abren el mismo diálogo.\n// Si la variante no lleva pasos (el navegador tiene su propio diálogo, o no hay nada que ofrecer) no pinta nada.\n//\n// OJO, para quien lo monte: NO dentro de un Menu de MUI que se cierra; el Menu quita a sus hijos al cerrarse y el diálogo\n// nunca aparecería. Va junto al Menu o en un lugar que se quede pintado.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Typography from '@mui/material/Typography';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {INSTALL_VARIANT} from '@/pwa/installInstructions.js';\n\n// cada variante con pasos a mano → su título y sus pasos en los textos del paquete (common:install.<variante>)\nconst STEPS_BY_VARIANT = Object.freeze({\n    [INSTALL_VARIANT.iosModern]: ['step1', 'step2', 'step3', 'step4'],\n    [INSTALL_VARIANT.iosClassic]: ['step1', 'step2', 'step3'],\n    [INSTALL_VARIANT.androidFirefox]: ['step1', 'step2', 'step3'],\n});\n\n/**\n * ¿Esta variante se instala con pasos a mano (y no con el diálogo del navegador)?\n *\n * @param {string|null} variant\n * @returns {boolean}\n */\nexport function variantHasInstructions(variant) {\n    return Boolean(STEPS_BY_VARIANT[variant]);\n}\n\n/**\n * @param {object} props\n * @param {string|null} props.variant una de INSTALL_VARIANT (useInstallPrompt)\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function InstallInstructionsDialog({variant, open, onClose, texts}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const steps = STEPS_BY_VARIANT[variant];\n    if (!steps) {\n        return null;\n    }\n\n    return (\n        <Dialog open={open} onClose={onClose} maxWidth=\"xs\" fullWidth>\n            <DialogTitle>{t(`install.${variant}.title`)}</DialogTitle>\n            <DialogContent>\n                {/* pasos numerados con palabras, sin dibujar los íconos del sistema: cambian entre versiones */}\n                <Typography component=\"ol\" sx={{m: 0, pl: 3, display: 'grid', gap: 1.25}}>\n                    {steps.map((step) => (\n                        <Typography key={step} component=\"li\" variant=\"body1\">{t(`install.${variant}.${step}`)}</Typography>\n                    ))}\n                </Typography>\n            </DialogContent>\n            <DialogActions>\n                <Button variant=\"contained\" onClick={onClose}>{t('install.gotIt')}</Button>\n            </DialogActions>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmBA,MAAM,mBAAmB,OAAO,OAAO;AAAA,EACnC,CAAC,gBAAgB,SAAS,GAAG,CAAC,SAAS,SAAS,SAAS,OAAO;AAAA,EAChE,CAAC,gBAAgB,UAAU,GAAG,CAAC,SAAS,SAAS,OAAO;AAAA,EACxD,CAAC,gBAAgB,cAAc,GAAG,CAAC,SAAS,SAAS,OAAO;AAChE,CAAC;AAQM,SAAS,uBAAuB,SAAS;AAC5C,SAAO,QAAQ,iBAAiB,OAAO,CAAC;AAC5C;AASA,SAAwB,0BAA0B,EAAC,SAAS,MAAM,SAAS,SAAQ;AAC/E,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,QAAQ,iBAAiB,OAAO;AACtC,MAAI,CAAC,OAAO;AACR,WAAO;AAAA,EACX;AAEA,8BACK,QAAA,EAAO,MAAY,SAAkB,UAAS,MAAK,WAAS,MACzD,UAAA;AAAA,IAAA,oBAAC,aAAA,EAAa,UAAA,EAAE,WAAW,OAAO,QAAQ,GAAE;AAAA,wBAC3C,eAAA,EAEG,UAAA,oBAAC,YAAA,EAAW,WAAU,MAAK,IAAI,EAAC,GAAG,GAAG,IAAI,GAAG,SAAS,QAAQ,KAAK,QAC9D,UAAA,MAAM,IAAI,CAAC,SACR,oBAAC,YAAA,EAAsB,WAAU,MAAK,SAAQ,SAAS,UAAA,EAAE,WAAW,OAAO,IAAI,IAAI,EAAE,KAApE,IAAsE,CAC1F,GACL,GACJ;AAAA,IACA,oBAAC,eAAA,EACG,UAAA,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,SAAU,UAAA,EAAE,eAAe,EAAA,CAAE,EAAA,CACtE;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"InstallInstructionsDialog.js","sources":["../../src/pwa/InstallInstructionsDialog.jsx"],"sourcesContent":["// Los pasos para instalar la app a mano, según el equipo (iOS 26 cambió el camino; Firefox usa su propio menú). Lo usan la\n// invitación (InstallPromptBanner) y la entrada del menú de la cuenta (InstallAppSetting): los dos abren el mismo diálogo.\n// Si la variante no lleva pasos (el navegador tiene su propio diálogo, o no hay nada que ofrecer) no pinta nada.\n//\n// OJO, para quien lo monte: NO dentro de un Menu de MUI que se cierra; el Menu quita a sus hijos al cerrarse y el diálogo\n// nunca aparecería. Va junto al Menu o en un lugar que se quede pintado.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaInstallInstructions con defaultProps y\n// styleOverrides de sus partes: steps.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport Typography from '@mui/material/Typography';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {INSTALL_VARIANT} from '@/pwa/installInstructions.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaInstallInstructions)\nconst THEME_NAME = 'CalcitaInstallInstructions';\nconst InstructionsSteps = piecePart(THEME_NAME, 'Steps', Typography);\n\n// cada variante con pasos a mano → su título y sus pasos en los textos del paquete (common:install.<variante>)\nconst STEPS_BY_VARIANT = Object.freeze({\n    [INSTALL_VARIANT.iosModern]: ['step1', 'step2', 'step3', 'step4'],\n    [INSTALL_VARIANT.iosClassic]: ['step1', 'step2', 'step3'],\n    [INSTALL_VARIANT.androidFirefox]: ['step1', 'step2', 'step3'],\n});\n\n/**\n * ¿Esta variante se instala con pasos a mano (y no con el diálogo del navegador)?\n *\n * @param {string|null} variant\n * @returns {boolean}\n */\nexport function variantHasInstructions(variant) {\n    return Boolean(STEPS_BY_VARIANT[variant]);\n}\n\n/**\n * @param {object} props\n * @param {string|null} props.variant una de INSTALL_VARIANT (useInstallPrompt)\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function InstallInstructionsDialog(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaInstallInstructions.defaultProps) y encima lo que llega aquí\n    const {variant, open, onClose, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const steps = STEPS_BY_VARIANT[variant];\n    if (!steps) {\n        return null;\n    }\n\n    return (\n        <Dialog open={open} onClose={onClose} maxWidth=\"xs\" fullWidth>\n            <DialogTitle>{t(`install.${variant}.title`)}</DialogTitle>\n            <DialogContent>\n                {/* pasos numerados con palabras, sin dibujar los íconos del sistema: cambian entre versiones */}\n                <InstructionsSteps component=\"ol\" ownSx={{m: 0, pl: 3, display: 'grid', gap: 1.25}}>\n                    {steps.map((step) => (\n                        <Typography key={step} component=\"li\" variant=\"body1\">{t(`install.${variant}.${step}`)}</Typography>\n                    ))}\n                </InstructionsSteps>\n            </DialogContent>\n            <DialogActions>\n                <Button variant=\"contained\" onClick={onClose}>{t('install.gotIt')}</Button>\n            </DialogActions>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,oBAAoB,UAAU,YAAY,SAAS,UAAU;AAGnE,MAAM,mBAAmB,OAAO,OAAO;AAAA,EACnC,CAAC,gBAAgB,SAAS,GAAG,CAAC,SAAS,SAAS,SAAS,OAAO;AAAA,EAChE,CAAC,gBAAgB,UAAU,GAAG,CAAC,SAAS,SAAS,OAAO;AAAA,EACxD,CAAC,gBAAgB,cAAc,GAAG,CAAC,SAAS,SAAS,OAAO;AAChE,CAAC;AAQM,SAAS,uBAAuB,SAAS;AAC5C,SAAO,QAAQ,iBAAiB,OAAO,CAAC;AAC5C;AASA,SAAwB,0BAA0B,OAAO;AAErD,QAAM,EAAC,SAAS,MAAM,SAAS,UAAS,cAAc,OAAO,UAAU;AACvE,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,QAAQ,iBAAiB,OAAO;AACtC,MAAI,CAAC,OAAO;AACR,WAAO;AAAA,EACX;AAEA,8BACK,QAAA,EAAO,MAAY,SAAkB,UAAS,MAAK,WAAS,MACzD,UAAA;AAAA,IAAA,oBAAC,aAAA,EAAa,UAAA,EAAE,WAAW,OAAO,QAAQ,GAAE;AAAA,wBAC3C,eAAA,EAEG,UAAA,oBAAC,mBAAA,EAAkB,WAAU,MAAK,OAAO,EAAC,GAAG,GAAG,IAAI,GAAG,SAAS,QAAQ,KAAK,QACxE,UAAA,MAAM,IAAI,CAAC,SACR,oBAAC,YAAA,EAAsB,WAAU,MAAK,SAAQ,SAAS,UAAA,EAAE,WAAW,OAAO,IAAI,IAAI,EAAE,KAApE,IAAsE,CAC1F,GACL,GACJ;AAAA,IACA,oBAAC,eAAA,EACG,UAAA,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,SAAU,UAAA,EAAE,eAAe,EAAA,CAAE,EAAA,CACtE;AAAA,EAAA,GACJ;AAER;"}

package/dist/pwa/InstallPromptBanner.js

@@ -14,8 +14,13 @@ import { INSTALL_VARIANT } from "./installInstructions.js";
 import InstallInstructionsDialog from "./InstallInstructionsDialog.js";
 import { useInstallPrompt } from "./useInstallPrompt.js";
 import ComponentTexts from "../toolkit/ComponentTexts.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaInstallPromptBanner";
+const PromptRoot = piecePart(THEME_NAME, "Root", Snackbar);
+const PromptAlert = piecePart(THEME_NAME, "Alert", Alert);
 const TAB_BAR_GAP_PIXELS = 8;
-function InstallPromptBanner({ message, onInstallChoice, onShowSteps, onDismiss, texts }) {
+function InstallPromptBanner(props) {
+  const { message, onInstallChoice, onShowSteps, onDismiss, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("common", texts);
   const { variant, dismissed, promptInstall, dismiss } = useInstallPrompt();
   const [stepsOpen, setStepsOpen] = useState(false);
@@ -41,17 +46,17 @@ function InstallPromptBanner({ message, onInstallChoice, onShowSteps, onDismiss,
   };
   return /* @__PURE__ */ jsx(ComponentTexts, { namespace: "common", texts, children: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      Snackbar,
+      PromptRoot,
       {
         open: true,
         anchorOrigin: { vertical: "bottom", horizontal: "center" },
-        sx: (theme) => usesMobileTabBar(theme) ? aboveMobileTabBarOf(TAB_BAR_GAP_PIXELS) : { mb: "env(safe-area-inset-bottom)" },
+        ownSx: (theme) => usesMobileTabBar(theme) ? aboveMobileTabBarOf(TAB_BAR_GAP_PIXELS) : { mb: "env(safe-area-inset-bottom)" },
         children: /* @__PURE__ */ jsx(
-          Alert,
+          PromptAlert,
           {
             severity: "info",
             icon: /* @__PURE__ */ jsx(InstallMobileRoundedIcon, {}),
-            sx: { width: "100%", alignItems: "center" },
+            ownSx: { width: "100%", alignItems: "center" },
             action: /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Button, { color: "inherit", size: "small", onClick: handleAction, children: isNative ? t("install.action") : t("install.howTo") }),
               /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", "aria-label": t("install.dismiss"), onClick: handleDismiss, children: /* @__PURE__ */ jsx(CloseRoundedIcon, { fontSize: "small" }) })

package/dist/pwa/InstallPromptBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstallPromptBanner.js","sources":["../../src/pwa/InstallPromptBanner.jsx"],"sourcesContent":["// La invitación a instalar la app, abajo al centro. Según el equipo (useInstallPrompt): con el diálogo del navegador, el\n// botón «Instalar»; en iPhone, iPad y Firefox de Android, «Cómo instalar» abre los pasos (InstallInstructionsDialog).\n// Ya instalada, sin manera de instalar o después de «Ahora no», no pinta nada; quien se arrepienta la encuentra en el menú\n// de la cuenta (InstallAppSetting).\n//\n// Color de información, no de advertencia: instalar es una sugerencia, no un problema. En el teléfono con vidrio va encima\n// de la barra de pestañas; sin ella, respeta la zona del gesto de inicio del iPhone.\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 IconButton from '@mui/material/IconButton';\nimport Snackbar from '@mui/material/Snackbar';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\nimport InstallMobileRoundedIcon from '@mui/icons-material/InstallMobileRounded';\n\nimport {aboveMobileTabBarOf} from '@/appShell/shellSizes.js';\nimport {usesMobileTabBar} from '@/appShell/tabBarRule.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {INSTALL_VARIANT} from '@/pwa/installInstructions.js';\nimport InstallInstructionsDialog from '@/pwa/InstallInstructionsDialog.jsx';\nimport {useInstallPrompt} from '@/pwa/useInstallPrompt.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\n\n// lo que se separa de la barra de pestañas (px)\nconst TAB_BAR_GAP_PIXELS = 8;\n\n/**\n * @param {object} [props]\n * @param {string} [props.message] ya traducido; por omisión el del paquete con el nombre de la app (appName de ToolkitProvider)\n * @param {(outcome: 'accepted'|'dismissed'|null) => void} [props.onInstallChoice] lo que contestó la persona al diálogo de\n *     instalar del navegador (Chrome, Edge, Android)\n * @param {() => void} [props.onShowSteps] abrió los pasos para instalar (iPhone, iPad, Firefox de Android)\n * @param {() => void} [props.onDismiss] dijo «Ahora no» (o cerró los pasos): no se le vuelve a ofrecer en este navegador\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function InstallPromptBanner({message, onInstallChoice, onShowSteps, onDismiss, texts}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {variant, dismissed, promptInstall, dismiss} = useInstallPrompt();\n    const [stepsOpen, setStepsOpen] = useState(false);\n\n    // nada que ofrecer o ya dijo «Ahora no»\n    if (!variant || dismissed) {\n        return null;\n    }\n\n    const isNative = variant === INSTALL_VARIANT.native;\n\n    const handleAction = async () => {\n        if (isNative) {\n            onInstallChoice?.(await promptInstall());\n        } else {\n            setStepsOpen(true);\n            onShowSteps?.();\n        }\n    };\n    const handleDismiss = () => {\n        dismiss();\n        onDismiss?.();\n    };\n\n    // si ya vio los pasos, no se le vuelven a ofrecer en cada visita\n    const handleStepsClose = () => {\n        setStepsOpen(false);\n        handleDismiss();\n    };\n\n    return (\n        <ComponentTexts namespace=\"common\" texts={texts}>\n            <>\n                <Snackbar open anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}\n                          sx={(theme) => (usesMobileTabBar(theme)\n                              ? aboveMobileTabBarOf(TAB_BAR_GAP_PIXELS)\n                              : {mb: 'env(safe-area-inset-bottom)'})}>\n                    <Alert severity=\"info\" icon={<InstallMobileRoundedIcon />} sx={{width: '100%', alignItems: 'center'}}\n                           action={(\n                               <>\n                                   <Button color=\"inherit\" size=\"small\" onClick={handleAction}>\n                                       {isNative ? t('install.action') : t('install.howTo')}\n                                   </Button>\n                                   <IconButton size=\"small\" color=\"inherit\" aria-label={t('install.dismiss')} onClick={handleDismiss}>\n                                       <CloseRoundedIcon fontSize=\"small\" />\n                                   </IconButton>\n                               </>\n                           )}>\n                        {message ?? t('install.banner')}\n                    </Alert>\n                </Snackbar>\n                <InstallInstructionsDialog variant={variant} open={stepsOpen} onClose={handleStepsClose} />\n            </>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAM,qBAAqB;AAW3B,SAAwB,oBAAoB,EAAC,SAAS,iBAAiB,aAAa,WAAW,SAAQ;AACnG,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,SAAS,WAAW,eAAe,QAAA,IAAW,iBAAA;AACrD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAGhD,MAAI,CAAC,WAAW,WAAW;AACvB,WAAO;AAAA,EACX;AAEA,QAAM,WAAW,YAAY,gBAAgB;AAE7C,QAAM,eAAe,YAAY;AAC7B,QAAI,UAAU;AACV,wBAAkB,MAAM,eAAe;AAAA,IAC3C,OAAO;AACH,mBAAa,IAAI;AACjB,oBAAA;AAAA,IACJ;AAAA,EACJ;AACA,QAAM,gBAAgB,MAAM;AACxB,YAAA;AACA,gBAAA;AAAA,EACJ;AAGA,QAAM,mBAAmB,MAAM;AAC3B,iBAAa,KAAK;AAClB,kBAAA;AAAA,EACJ;AAEA,SACI,oBAAC,gBAAA,EAAe,WAAU,UAAS,OAC/B,UAAA,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAS,MAAI;AAAA,QAAC,cAAc,EAAC,UAAU,UAAU,YAAY,SAAA;AAAA,QACpD,IAAI,CAAC,UAAW,iBAAiB,KAAK,IAChC,oBAAoB,kBAAkB,IACtC,EAAC,IAAI,8BAAA;AAAA,QACjB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAAM,UAAS;AAAA,YAAO,0BAAO,0BAAA,EAAyB;AAAA,YAAI,IAAI,EAAC,OAAO,QAAQ,YAAY,SAAA;AAAA,YACpF,QACI,qBAAA,UAAA,EACI,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAO,OAAM,WAAU,MAAK,SAAQ,SAAS,cACzC,UAAA,WAAW,EAAE,gBAAgB,IAAI,EAAE,eAAe,GACvD;AAAA,kCACC,YAAA,EAAW,MAAK,SAAQ,OAAM,WAAU,cAAY,EAAE,iBAAiB,GAAG,SAAS,eAChF,UAAA,oBAAC,kBAAA,EAAiB,UAAS,SAAQ,EAAA,CACvC;AAAA,YAAA,GACJ;AAAA,YAEN,UAAA,WAAW,EAAE,gBAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MAClC;AAAA,IAAA;AAAA,wBAEH,2BAAA,EAA0B,SAAkB,MAAM,WAAW,SAAS,iBAAA,CAAkB;AAAA,EAAA,EAAA,CAC7F,EAAA,CACJ;AAER;"}
+{"version":3,"file":"InstallPromptBanner.js","sources":["../../src/pwa/InstallPromptBanner.jsx"],"sourcesContent":["// La invitación a instalar la app, abajo al centro. Según el equipo (useInstallPrompt): con el diálogo del navegador, el\n// botón «Instalar»; en iPhone, iPad y Firefox de Android, «Cómo instalar» abre los pasos (InstallInstructionsDialog).\n// Ya instalada, sin manera de instalar o después de «Ahora no», no pinta nada; quien se arrepienta la encuentra en el menú\n// de la cuenta (InstallAppSetting).\n//\n// Color de información, no de advertencia: instalar es una sugerencia, no un problema. En el teléfono con vidrio va encima\n// de la barra de pestañas; sin ella, respeta la zona del gesto de inicio del iPhone.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaInstallPromptBanner con defaultProps y\n// styleOverrides de sus partes: root, alert.\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 IconButton from '@mui/material/IconButton';\nimport Snackbar from '@mui/material/Snackbar';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\nimport InstallMobileRoundedIcon from '@mui/icons-material/InstallMobileRounded';\n\nimport {aboveMobileTabBarOf} from '@/appShell/shellSizes.js';\nimport {usesMobileTabBar} from '@/appShell/tabBarRule.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {INSTALL_VARIANT} from '@/pwa/installInstructions.js';\nimport InstallInstructionsDialog from '@/pwa/InstallInstructionsDialog.jsx';\nimport {useInstallPrompt} from '@/pwa/useInstallPrompt.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaInstallPromptBanner)\nconst THEME_NAME = 'CalcitaInstallPromptBanner';\nconst PromptRoot = piecePart(THEME_NAME, 'Root', Snackbar);\nconst PromptAlert = piecePart(THEME_NAME, 'Alert', Alert);\n\n// lo que se separa de la barra de pestañas (px)\nconst TAB_BAR_GAP_PIXELS = 8;\n\n/**\n * @param {object} [props]\n * @param {string} [props.message] ya traducido; por omisión el del paquete con el nombre de la app (appName de ToolkitProvider)\n * @param {(outcome: 'accepted'|'dismissed'|null) => void} [props.onInstallChoice] lo que contestó la persona al diálogo de\n *     instalar del navegador (Chrome, Edge, Android)\n * @param {() => void} [props.onShowSteps] abrió los pasos para instalar (iPhone, iPad, Firefox de Android)\n * @param {() => void} [props.onDismiss] dijo «Ahora no» (o cerró los pasos): no se le vuelve a ofrecer en este navegador\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function InstallPromptBanner(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaInstallPromptBanner.defaultProps) y encima lo que llega aquí\n    const {message, onInstallChoice, onShowSteps, onDismiss, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const {variant, dismissed, promptInstall, dismiss} = useInstallPrompt();\n    const [stepsOpen, setStepsOpen] = useState(false);\n\n    // nada que ofrecer o ya dijo «Ahora no»\n    if (!variant || dismissed) {\n        return null;\n    }\n\n    const isNative = variant === INSTALL_VARIANT.native;\n\n    const handleAction = async () => {\n        if (isNative) {\n            onInstallChoice?.(await promptInstall());\n        } else {\n            setStepsOpen(true);\n            onShowSteps?.();\n        }\n    };\n    const handleDismiss = () => {\n        dismiss();\n        onDismiss?.();\n    };\n\n    // si ya vio los pasos, no se le vuelven a ofrecer en cada visita\n    const handleStepsClose = () => {\n        setStepsOpen(false);\n        handleDismiss();\n    };\n\n    return (\n        <ComponentTexts namespace=\"common\" texts={texts}>\n            <>\n                <PromptRoot open anchorOrigin={{vertical: 'bottom', horizontal: 'center'}}\n                          ownSx={(theme) => (usesMobileTabBar(theme)\n                              ? aboveMobileTabBarOf(TAB_BAR_GAP_PIXELS)\n                              : {mb: 'env(safe-area-inset-bottom)'})}>\n                    <PromptAlert severity=\"info\" icon={<InstallMobileRoundedIcon />} ownSx={{width: '100%', alignItems: 'center'}}\n                           action={(\n                               <>\n                                   <Button color=\"inherit\" size=\"small\" onClick={handleAction}>\n                                       {isNative ? t('install.action') : t('install.howTo')}\n                                   </Button>\n                                   <IconButton size=\"small\" color=\"inherit\" aria-label={t('install.dismiss')} onClick={handleDismiss}>\n                                       <CloseRoundedIcon fontSize=\"small\" />\n                                   </IconButton>\n                               </>\n                           )}>\n                        {message ?? t('install.banner')}\n                    </PromptAlert>\n                </PromptRoot>\n                <InstallInstructionsDialog variant={variant} open={stepsOpen} onClose={handleStepsClose} />\n            </>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA8BA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,QAAQ;AACzD,MAAM,cAAc,UAAU,YAAY,SAAS,KAAK;AAGxD,MAAM,qBAAqB;AAW3B,SAAwB,oBAAoB,OAAO;AAE/C,QAAM,EAAC,SAAS,iBAAiB,aAAa,WAAW,UAAS,cAAc,OAAO,UAAU;AACjG,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,SAAS,WAAW,eAAe,QAAA,IAAW,iBAAA;AACrD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAGhD,MAAI,CAAC,WAAW,WAAW;AACvB,WAAO;AAAA,EACX;AAEA,QAAM,WAAW,YAAY,gBAAgB;AAE7C,QAAM,eAAe,YAAY;AAC7B,QAAI,UAAU;AACV,wBAAkB,MAAM,eAAe;AAAA,IAC3C,OAAO;AACH,mBAAa,IAAI;AACjB,oBAAA;AAAA,IACJ;AAAA,EACJ;AACA,QAAM,gBAAgB,MAAM;AACxB,YAAA;AACA,gBAAA;AAAA,EACJ;AAGA,QAAM,mBAAmB,MAAM;AAC3B,iBAAa,KAAK;AAClB,kBAAA;AAAA,EACJ;AAEA,SACI,oBAAC,gBAAA,EAAe,WAAU,UAAS,OAC/B,UAAA,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW,MAAI;AAAA,QAAC,cAAc,EAAC,UAAU,UAAU,YAAY,SAAA;AAAA,QACtD,OAAO,CAAC,UAAW,iBAAiB,KAAK,IACnC,oBAAoB,kBAAkB,IACtC,EAAC,IAAI,8BAAA;AAAA,QACjB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAAY,UAAS;AAAA,YAAO,0BAAO,0BAAA,EAAyB;AAAA,YAAI,OAAO,EAAC,OAAO,QAAQ,YAAY,SAAA;AAAA,YAC7F,QACI,qBAAA,UAAA,EACI,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAO,OAAM,WAAU,MAAK,SAAQ,SAAS,cACzC,UAAA,WAAW,EAAE,gBAAgB,IAAI,EAAE,eAAe,GACvD;AAAA,kCACC,YAAA,EAAW,MAAK,SAAQ,OAAM,WAAU,cAAY,EAAE,iBAAiB,GAAG,SAAS,eAChF,UAAA,oBAAC,kBAAA,EAAiB,UAAS,SAAQ,EAAA,CACvC;AAAA,YAAA,GACJ;AAAA,YAEN,UAAA,WAAW,EAAE,gBAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MAClC;AAAA,IAAA;AAAA,wBAEH,2BAAA,EAA0B,SAAkB,MAAM,WAAW,SAAS,iBAAA,CAAkB;AAAA,EAAA,EAAA,CAC7F,EAAA,CACJ;AAER;"}

package/dist/security/ActivityLog.js

@@ -21,6 +21,9 @@ import SyncLockOutlinedIcon from "@mui/icons-material/SyncLockOutlined";
 import { useFormatters } from "../toolkit/useFormatters.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import SectionCard from "../ui/layout/SectionCard.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaActivityLog";
+const ActivityItemIcon = piecePart(THEME_NAME, "ItemIcon", ListItemIcon);
 const ACCOUNT_EVENT_KIND = Object.freeze({
   signedIn: "signedIn",
   signInFailed: "signInFailed",
@@ -49,7 +52,8 @@ const EVENT_LOOK = Object.freeze({
 });
 const DEFAULT_LOOK = Object.freeze({ Icon: EventNoteOutlinedIcon });
 const LOADING_HEIGHT_PIXELS = 160;
-function ActivityLog({ events, error = null, texts }) {
+function ActivityLog(props) {
+  const { events, error = null, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("security", texts);
   const { formatDateTime } = useFormatters();
   return /* @__PURE__ */ jsx(SectionCard, { title: t("activity.title"), children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
@@ -61,7 +65,7 @@ function ActivityLog({ events, error = null, texts }) {
       const look = EVENT_LOOK[event.kind] ?? DEFAULT_LOOK;
       const where = event.device && event.network ? ` · ${t("activity.from", { device: event.device, network: event.network })}` : "";
       return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, children: [
-        /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 36 }, children: /* @__PURE__ */ jsx(look.Icon, { fontSize: "small", color: look.color ?? "action" }) }),
+        /* @__PURE__ */ jsx(ActivityItemIcon, { ownSx: { minWidth: 36 }, children: /* @__PURE__ */ jsx(look.Icon, { fontSize: "small", color: look.color ?? "action" }) }),
         /* @__PURE__ */ jsx(
           ListItemText,
           {

package/dist/security/ActivityLog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityLog.js","sources":["../../src/security/ActivityLog.jsx"],"sourcesContent":["// La bitácora de la cuenta: lo último que pasó (entró, contraseña equivocada, cambió su contraseña, activó la verificación,\n// agregó una llave…), con la hora, el equipo y la red a medias. Para que la persona reconozca lo que no fue ella.\n//\n// Cada evento llega con su tipo (kind) y el texto sale de los textos del paquete (security:activity.kinds.<kind>); un tipo\n// propio del proyecto trae su texto en description.\n//\n//   <ActivityLog events={events} />\n//\n// Genérico del paquete: function (regla de la casa).\nimport Alert from '@mui/material/Alert';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';\nimport EventNoteOutlinedIcon from '@mui/icons-material/EventNoteOutlined';\nimport FingerprintOutlinedIcon from '@mui/icons-material/FingerprintOutlined';\nimport KeyOutlinedIcon from '@mui/icons-material/KeyOutlined';\nimport LoginOutlinedIcon from '@mui/icons-material/LoginOutlined';\nimport LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';\nimport PasswordOutlinedIcon from '@mui/icons-material/PasswordOutlined';\nimport PhonelinkLockOutlinedIcon from '@mui/icons-material/PhonelinkLockOutlined';\nimport PhonelinkEraseOutlinedIcon from '@mui/icons-material/PhonelinkEraseOutlined';\nimport SyncLockOutlinedIcon from '@mui/icons-material/SyncLockOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\n\n/** Los tipos de evento que el paquete conoce, con su texto en security:activity.kinds. */\nexport const ACCOUNT_EVENT_KIND = Object.freeze({\n    signedIn: 'signedIn',\n    signInFailed: 'signInFailed',\n    signedOut: 'signedOut',\n    passwordChanged: 'passwordChanged',\n    twoStepEnabled: 'twoStepEnabled',\n    twoStepDisabled: 'twoStepDisabled',\n    passkeyAdded: 'passkeyAdded',\n    passkeyRemoved: 'passkeyRemoved',\n    recoveryCodesGenerated: 'recoveryCodesGenerated',\n    recoveryCodeUsed: 'recoveryCodeUsed',\n    sessionsClosed: 'sessionsClosed',\n});\n\n// el ícono de cada tipo, y en rojo lo que pide atención (un intento con contraseña equivocada, quitar protección)\nconst EVENT_LOOK = Object.freeze({\n    [ACCOUNT_EVENT_KIND.signedIn]: {Icon: LoginOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.signInFailed]: {Icon: CancelOutlinedIcon, color: 'error'},\n    [ACCOUNT_EVENT_KIND.signedOut]: {Icon: LogoutOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.passwordChanged]: {Icon: PasswordOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.twoStepEnabled]: {Icon: PhonelinkLockOutlinedIcon, color: 'success'},\n    [ACCOUNT_EVENT_KIND.twoStepDisabled]: {Icon: PhonelinkEraseOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.passkeyAdded]: {Icon: FingerprintOutlinedIcon, color: 'success'},\n    [ACCOUNT_EVENT_KIND.passkeyRemoved]: {Icon: FingerprintOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.recoveryCodesGenerated]: {Icon: KeyOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.recoveryCodeUsed]: {Icon: KeyOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.sessionsClosed]: {Icon: SyncLockOutlinedIcon},\n});\nconst DEFAULT_LOOK = Object.freeze({Icon: EventNoteOutlinedIcon});\nconst LOADING_HEIGHT_PIXELS = 160;\n\n/**\n * @param {object} props\n * @param {Array<{id: string, kind: string, occurredAt: string, device?: string|null, network?: string|null, description?: string}>|null} props.events\n *     del más nuevo al más viejo; null mientras llegan\n * @param {string|null} [props.error] ya traducido si no se pudieron traer\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function ActivityLog({events, error = null, texts}) {\n    const {t} = useToolkitTranslation('security', texts);\n    const {formatDateTime} = useFormatters();\n\n    return (\n        <SectionCard title={t('activity.title')}>\n            <Stack spacing={2}>\n                <Typography variant=\"body2\" color=\"text.secondary\">{t('activity.description')}</Typography>\n                {error && <Alert severity=\"error\">{error}</Alert>}\n                {!events && !error && <Skeleton variant=\"rounded\" height={LOADING_HEIGHT_PIXELS} />}\n                {events?.length === 0 && <Typography variant=\"body2\" color=\"text.secondary\">{t('activity.empty')}</Typography>}\n                {events?.length > 0 && (\n                    <List dense disablePadding>\n                        {events.map((event) => {\n                            const look = EVENT_LOOK[event.kind] ?? DEFAULT_LOOK;\n                            const where = event.device && event.network ? ` · ${t('activity.from', {device: event.device, network: event.network})}` : '';\n                            return (\n                                <ListItem key={event.id} disableGutters>\n                                    <ListItemIcon sx={{minWidth: 36}}><look.Icon fontSize=\"small\" color={look.color ?? 'action'} /></ListItemIcon>\n                                    <ListItemText primary={event.description ?? t(`activity.kinds.${event.kind}`)}\n                                                  secondary={`${formatDateTime(event.occurredAt)}${where}`} />\n                                </ListItem>\n                            );\n                        })}\n                    </List>\n                )}\n            </Stack>\n        </SectionCard>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCO,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC5C,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,wBAAwB;AAAA,EACxB,kBAAkB;AAAA,EAClB,gBAAgB;AACpB,CAAC;AAGD,MAAM,aAAa,OAAO,OAAO;AAAA,EAC7B,CAAC,mBAAmB,QAAQ,GAAG,EAAC,MAAM,kBAAA;AAAA,EACtC,CAAC,mBAAmB,YAAY,GAAG,EAAC,MAAM,oBAAoB,OAAO,QAAA;AAAA,EACrE,CAAC,mBAAmB,SAAS,GAAG,EAAC,MAAM,mBAAA;AAAA,EACvC,CAAC,mBAAmB,eAAe,GAAG,EAAC,MAAM,qBAAA;AAAA,EAC7C,CAAC,mBAAmB,cAAc,GAAG,EAAC,MAAM,2BAA2B,OAAO,UAAA;AAAA,EAC9E,CAAC,mBAAmB,eAAe,GAAG,EAAC,MAAM,4BAA4B,OAAO,UAAA;AAAA,EAChF,CAAC,mBAAmB,YAAY,GAAG,EAAC,MAAM,yBAAyB,OAAO,UAAA;AAAA,EAC1E,CAAC,mBAAmB,cAAc,GAAG,EAAC,MAAM,yBAAyB,OAAO,UAAA;AAAA,EAC5E,CAAC,mBAAmB,sBAAsB,GAAG,EAAC,MAAM,gBAAA;AAAA,EACpD,CAAC,mBAAmB,gBAAgB,GAAG,EAAC,MAAM,iBAAiB,OAAO,UAAA;AAAA,EACtE,CAAC,mBAAmB,cAAc,GAAG,EAAC,MAAM,qBAAA;AAChD,CAAC;AACD,MAAM,eAAe,OAAO,OAAO,EAAC,MAAM,uBAAsB;AAChE,MAAM,wBAAwB;AAS9B,SAAwB,YAAY,EAAC,QAAQ,QAAQ,MAAM,SAAQ;AAC/D,QAAM,EAAC,EAAA,IAAK,sBAAsB,YAAY,KAAK;AACnD,QAAM,EAAC,eAAA,IAAkB,cAAA;AAEzB,SACI,oBAAC,eAAY,OAAO,EAAE,gBAAgB,GAClC,UAAA,qBAAC,OAAA,EAAM,SAAS,GACZ,UAAA;AAAA,IAAA,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,EAAE,sBAAsB,GAAE;AAAA,IAC7E,SAAS,oBAAC,OAAA,EAAM,UAAS,SAAS,UAAA,OAAM;AAAA,IACxC,CAAC,UAAU,CAAC,6BAAU,UAAA,EAAS,SAAQ,WAAU,QAAQ,uBAAuB;AAAA,IAChF,QAAQ,WAAW,KAAK,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,EAAE,gBAAgB,EAAA,CAAE;AAAA,IAChG,QAAQ,SAAS,KACd,oBAAC,MAAA,EAAK,OAAK,MAAC,gBAAc,MACrB,UAAA,OAAO,IAAI,CAAC,UAAU;AACnB,YAAM,OAAO,WAAW,MAAM,IAAI,KAAK;AACvC,YAAM,QAAQ,MAAM,UAAU,MAAM,UAAU,MAAM,EAAE,iBAAiB,EAAC,QAAQ,MAAM,QAAQ,SAAS,MAAM,QAAA,CAAQ,CAAC,KAAK;AAC3H,aACI,qBAAC,UAAA,EAAwB,gBAAc,MACnC,UAAA;AAAA,QAAA,oBAAC,gBAAa,IAAI,EAAC,UAAU,GAAA,GAAK,UAAA,oBAAC,KAAK,MAAL,EAAU,UAAS,SAAQ,OAAO,KAAK,SAAS,UAAU,GAAE;AAAA,QAC/F;AAAA,UAAC;AAAA,UAAA;AAAA,YAAa,SAAS,MAAM,eAAe,EAAE,kBAAkB,MAAM,IAAI,EAAE;AAAA,YAC9D,WAAW,GAAG,eAAe,MAAM,UAAU,CAAC,GAAG,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAI,EAAA,GAH7D,MAAM,EAIrB;AAAA,IAER,CAAC,EAAA,CACL;AAAA,EAAA,EAAA,CAER,EAAA,CACJ;AAER;"}
+{"version":3,"file":"ActivityLog.js","sources":["../../src/security/ActivityLog.jsx"],"sourcesContent":["// La bitácora de la cuenta: lo último que pasó (entró, contraseña equivocada, cambió su contraseña, activó la verificación,\n// agregó una llave…), con la hora, el equipo y la red a medias. Para que la persona reconozca lo que no fue ella.\n//\n// Cada evento llega con su tipo (kind) y el texto sale de los textos del paquete (security:activity.kinds.<kind>); un tipo\n// propio del proyecto trae su texto en description.\n//\n//   <ActivityLog events={events} />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaActivityLog con defaultProps y\n// styleOverrides de sus partes: itemIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Alert from '@mui/material/Alert';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';\nimport EventNoteOutlinedIcon from '@mui/icons-material/EventNoteOutlined';\nimport FingerprintOutlinedIcon from '@mui/icons-material/FingerprintOutlined';\nimport KeyOutlinedIcon from '@mui/icons-material/KeyOutlined';\nimport LoginOutlinedIcon from '@mui/icons-material/LoginOutlined';\nimport LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';\nimport PasswordOutlinedIcon from '@mui/icons-material/PasswordOutlined';\nimport PhonelinkLockOutlinedIcon from '@mui/icons-material/PhonelinkLockOutlined';\nimport PhonelinkEraseOutlinedIcon from '@mui/icons-material/PhonelinkEraseOutlined';\nimport SyncLockOutlinedIcon from '@mui/icons-material/SyncLockOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaActivityLog)\nconst THEME_NAME = 'CalcitaActivityLog';\nconst ActivityItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\n\n/** Los tipos de evento que el paquete conoce, con su texto en security:activity.kinds. */\nexport const ACCOUNT_EVENT_KIND = Object.freeze({\n    signedIn: 'signedIn',\n    signInFailed: 'signInFailed',\n    signedOut: 'signedOut',\n    passwordChanged: 'passwordChanged',\n    twoStepEnabled: 'twoStepEnabled',\n    twoStepDisabled: 'twoStepDisabled',\n    passkeyAdded: 'passkeyAdded',\n    passkeyRemoved: 'passkeyRemoved',\n    recoveryCodesGenerated: 'recoveryCodesGenerated',\n    recoveryCodeUsed: 'recoveryCodeUsed',\n    sessionsClosed: 'sessionsClosed',\n});\n\n// el ícono de cada tipo, y en rojo lo que pide atención (un intento con contraseña equivocada, quitar protección)\nconst EVENT_LOOK = Object.freeze({\n    [ACCOUNT_EVENT_KIND.signedIn]: {Icon: LoginOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.signInFailed]: {Icon: CancelOutlinedIcon, color: 'error'},\n    [ACCOUNT_EVENT_KIND.signedOut]: {Icon: LogoutOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.passwordChanged]: {Icon: PasswordOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.twoStepEnabled]: {Icon: PhonelinkLockOutlinedIcon, color: 'success'},\n    [ACCOUNT_EVENT_KIND.twoStepDisabled]: {Icon: PhonelinkEraseOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.passkeyAdded]: {Icon: FingerprintOutlinedIcon, color: 'success'},\n    [ACCOUNT_EVENT_KIND.passkeyRemoved]: {Icon: FingerprintOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.recoveryCodesGenerated]: {Icon: KeyOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.recoveryCodeUsed]: {Icon: KeyOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.sessionsClosed]: {Icon: SyncLockOutlinedIcon},\n});\nconst DEFAULT_LOOK = Object.freeze({Icon: EventNoteOutlinedIcon});\nconst LOADING_HEIGHT_PIXELS = 160;\n\n/**\n * @param {object} props\n * @param {Array<{id: string, kind: string, occurredAt: string, device?: string|null, network?: string|null, description?: string}>|null} props.events\n *     del más nuevo al más viejo; null mientras llegan\n * @param {string|null} [props.error] ya traducido si no se pudieron traer\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function ActivityLog(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaActivityLog.defaultProps) y encima lo que llega aquí\n    const {events, error = null, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('security', texts);\n    const {formatDateTime} = useFormatters();\n\n    return (\n        <SectionCard title={t('activity.title')}>\n            <Stack spacing={2}>\n                <Typography variant=\"body2\" color=\"text.secondary\">{t('activity.description')}</Typography>\n                {error && <Alert severity=\"error\">{error}</Alert>}\n                {!events && !error && <Skeleton variant=\"rounded\" height={LOADING_HEIGHT_PIXELS} />}\n                {events?.length === 0 && <Typography variant=\"body2\" color=\"text.secondary\">{t('activity.empty')}</Typography>}\n                {events?.length > 0 && (\n                    <List dense disablePadding>\n                        {events.map((event) => {\n                            const look = EVENT_LOOK[event.kind] ?? DEFAULT_LOOK;\n                            const where = event.device && event.network ? ` · ${t('activity.from', {device: event.device, network: event.network})}` : '';\n                            return (\n                                <ListItem key={event.id} disableGutters>\n                                    <ActivityItemIcon ownSx={{minWidth: 36}}><look.Icon fontSize=\"small\" color={look.color ?? 'action'} /></ActivityItemIcon>\n                                    <ListItemText primary={event.description ?? t(`activity.kinds.${event.kind}`)}\n                                                  secondary={`${formatDateTime(event.occurredAt)}${where}`} />\n                                </ListItem>\n                            );\n                        })}\n                    </List>\n                )}\n            </Stack>\n        </SectionCard>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/security/RecoveryCodesDialog.js

@@ -16,11 +16,16 @@ import { saveBlob } from "../files.js";
 import { useToolkitSettings } from "../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import CopyButton from "../ui/actions/CopyButton.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaRecoveryCodesDialog";
+const RecoveryCodes = piecePart(THEME_NAME, "Codes", Box);
+const RecoveryActions = piecePart(THEME_NAME, "Actions", Stack);
 const CODE_FONT = "ui-monospace, SFMono-Regular, Menlo, monospace";
 function todayText() {
   return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
 }
-function RecoveryCodesDialog({ codes, account = "", onClose, onCodesSaved, texts }) {
+function RecoveryCodesDialog(props) {
+  const { codes, account = "", onClose, onCodesSaved, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("security", texts);
   const { appName } = useToolkitSettings();
   const [isSaved, setIsSaved] = useState(false);
@@ -52,7 +57,7 @@ function RecoveryCodesDialog({ codes, account = "", onClose, onCodesSaved, texts
       /* @__PURE__ */ jsx(DialogTitle, { children: t("recoveryCodes.title") }),
       /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
         /* @__PURE__ */ jsx(Alert, { severity: "warning", children: t("recoveryCodes.warning") }),
-        /* @__PURE__ */ jsx(Box, { component: "ol", sx: {
+        /* @__PURE__ */ jsx(RecoveryCodes, { component: "ol", ownSx: {
           m: 0,
           p: 2,
           pl: 5,
@@ -63,7 +68,7 @@ function RecoveryCodesDialog({ codes, account = "", onClose, onCodesSaved, texts
           columns: 2,
           columnGap: 4
         }, children: (codes ?? []).map((code) => /* @__PURE__ */ jsx("li", { children: code }, code)) }),
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(RecoveryActions, { direction: "row", spacing: 1, ownSx: { alignItems: "center" }, children: [
           /* @__PURE__ */ jsx(CopyButton, { value: (codes ?? []).join("\n"), label: t("recoveryCodes.copyAll"), onCopied: () => onCodesSaved?.("copy") }),
           /* @__PURE__ */ jsx(Button, { size: "small", startIcon: /* @__PURE__ */ jsx(DownloadIcon, {}), onClick: download, children: t("recoveryCodes.download") })
         ] }),

package/dist/security/RecoveryCodesDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecoveryCodesDialog.js","sources":["../../src/security/RecoveryCodesDialog.jsx"],"sourcesContent":["// Los códigos de recuperación, que se enseñan UNA sola vez (el servidor solo guarda su huella, no los códigos).\n//\n// No se puede cerrar sin marcar «Ya los guardé»: es la única salida que tiene la persona el día que pierda su teléfono,\n// y un aviso que se cierra con Esc o con un clic afuera se cierra sin leer. Se pueden copiar todos o bajar en un .txt con\n// el nombre de la app, la cuenta y la fecha.\n//\n//   <RecoveryCodesDialog codes={codes} account={session.email} onClose={() => setCodes(null)} />\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Checkbox from '@mui/material/Checkbox';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Stack from '@mui/material/Stack';\nimport DownloadIcon from '@mui/icons-material/Download';\n\nimport {saveBlob} from '@/files.js';\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport CopyButton from '@/ui/actions/CopyButton.jsx';\n\nconst CODE_FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * La fecha de hoy como AAAA-MM-DD, para el nombre y el encabezado del archivo.\n *\n * @returns {string}\n */\nfunction todayText() {\n    return new Date().toISOString().slice(0, 10);\n}\n\n/**\n * @param {object} props\n * @param {string[]|null} props.codes los códigos recién generados; sin códigos el diálogo está cerrado\n * @param {string} [props.account] la cuenta (normalmente el correo), para el archivo\n * @param {() => void} props.onClose solo se llama después de «Ya los guardé»\n * @param {(method: 'copy'|'download') => void} [props.onCodesSaved] la persona los copió o los descargó (para la bitácora de\n *     seguridad)\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function RecoveryCodesDialog({codes, account = '', onClose, onCodesSaved, texts}) {\n    const {t} = useToolkitTranslation('security', texts);\n    const {appName} = useToolkitSettings();\n    const [isSaved, setIsSaved] = useState(false);\n    const isOpen = Boolean(codes?.length);\n\n    const download = () => {\n        const date = todayText();\n        const lines = [\n            t('recoveryCodes.fileTitle', {appName}),\n            t('recoveryCodes.fileAccount', {account}),\n            t('recoveryCodes.fileGenerated', {date}),\n            '',\n            t('recoveryCodes.fileHowTo'),\n            t('recoveryCodes.fileKeepSafe'),\n            '',\n            ...codes,\n            '',\n        ];\n        saveBlob(new Blob([lines.join('\\n')], {type: 'text/plain;charset=utf-8'}), t('recoveryCodes.fileName', {date}));\n        onCodesSaved?.('download');\n    };\n\n    const close = () => {\n        setIsSaved(false);\n        onClose();\n    };\n\n    return (\n        // ni Esc ni un clic afuera lo cierran: solo «Listo», después de marcar que los guardó\n        <Dialog open={isOpen} maxWidth=\"xs\" fullWidth disableEscapeKeyDown onClose={() => {}}>\n            <DialogTitle>{t('recoveryCodes.title')}</DialogTitle>\n            <DialogContent>\n                <Stack spacing={2}>\n                    <Alert severity=\"warning\">{t('recoveryCodes.warning')}</Alert>\n                    <Box component=\"ol\" sx={{\n                        m: 0, p: 2, pl: 5, borderRadius: 2, bgcolor: 'action.hover', fontFamily: CODE_FONT, fontSize: 15,\n                        columns: 2, columnGap: 4,\n                    }}>\n                        {(codes ?? []).map((code) => <li key={code}>{code}</li>)}\n                    </Box>\n                    <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center'}}>\n                        <CopyButton value={(codes ?? []).join('\\n')} label={t('recoveryCodes.copyAll')} onCopied={() => onCodesSaved?.('copy')} />\n                        <Button size=\"small\" startIcon={<DownloadIcon />} onClick={download}>{t('recoveryCodes.download')}</Button>\n                    </Stack>\n                    <FormControlLabel control={<Checkbox checked={isSaved} onChange={(event) => setIsSaved(event.target.checked)} />}\n                                      label={t('recoveryCodes.saved')} />\n                </Stack>\n            </DialogContent>\n            <DialogActions>\n                <Button variant=\"contained\" disabled={!isSaved} onClick={close}>{t('recoveryCodes.done')}</Button>\n            </DialogActions>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,MAAM,YAAY;AAOlB,SAAS,YAAY;AACjB,8BAAW,QAAO,cAAc,MAAM,GAAG,EAAE;AAC/C;AAWA,SAAwB,oBAAoB,EAAC,OAAO,UAAU,IAAI,SAAS,cAAc,SAAQ;AAC7F,QAAM,EAAC,EAAA,IAAK,sBAAsB,YAAY,KAAK;AACnD,QAAM,EAAC,QAAA,IAAW,mBAAA;AAClB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,SAAS,QAAQ,OAAO,MAAM;AAEpC,QAAM,WAAW,MAAM;AACnB,UAAM,OAAO,UAAA;AACb,UAAM,QAAQ;AAAA,MACV,EAAE,2BAA2B,EAAC,SAAQ;AAAA,MACtC,EAAE,6BAA6B,EAAC,SAAQ;AAAA,MACxC,EAAE,+BAA+B,EAAC,MAAK;AAAA,MACvC;AAAA,MACA,EAAE,yBAAyB;AAAA,MAC3B,EAAE,4BAA4B;AAAA,MAC9B;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IAAA;AAEJ,aAAS,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,GAAG,EAAC,MAAM,2BAAA,CAA2B,GAAG,EAAE,0BAA0B,EAAC,KAAA,CAAK,CAAC;AAC9G,mBAAe,UAAU;AAAA,EAC7B;AAEA,QAAM,QAAQ,MAAM;AAChB,eAAW,KAAK;AAChB,YAAA;AAAA,EACJ;AAEA;AAAA;AAAA,IAEI,qBAAC,QAAA,EAAO,MAAM,QAAQ,UAAS,MAAK,WAAS,MAAC,sBAAoB,MAAC,SAAS,MAAM;AAAA,IAAC,GAC/E,UAAA;AAAA,MAAA,oBAAC,aAAA,EAAa,UAAA,EAAE,qBAAqB,EAAA,CAAE;AAAA,MACvC,oBAAC,eAAA,EACG,UAAA,qBAAC,OAAA,EAAM,SAAS,GACZ,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAM,UAAS,WAAW,UAAA,EAAE,uBAAuB,GAAE;AAAA,QACtD,oBAAC,KAAA,EAAI,WAAU,MAAK,IAAI;AAAA,UACpB,GAAG;AAAA,UAAG,GAAG;AAAA,UAAG,IAAI;AAAA,UAAG,cAAc;AAAA,UAAG,SAAS;AAAA,UAAgB,YAAY;AAAA,UAAW,UAAU;AAAA,UAC9F,SAAS;AAAA,UAAG,WAAW;AAAA,QAAA,GAErB,WAAA,SAAS,CAAA,GAAI,IAAI,CAAC,SAAS,oBAAC,MAAA,EAAe,UAAA,KAAA,GAAP,IAAY,CAAK,EAAA,CAC3D;AAAA,QACA,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,IAAI,EAAC,YAAY,SAAA,GAChD,UAAA;AAAA,UAAA,oBAAC,cAAW,QAAQ,SAAS,CAAA,GAAI,KAAK,IAAI,GAAG,OAAO,EAAE,uBAAuB,GAAG,UAAU,MAAM,eAAe,MAAM,GAAG;AAAA,UACxH,oBAAC,QAAA,EAAO,MAAK,SAAQ,WAAW,oBAAC,cAAA,CAAA,CAAa,GAAI,SAAS,UAAW,UAAA,EAAE,wBAAwB,EAAA,CAAE;AAAA,QAAA,GACtG;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YAAiB,SAAS,oBAAC,UAAA,EAAS,SAAS,SAAS,UAAU,CAAC,UAAU,WAAW,MAAM,OAAO,OAAO,EAAA,CAAG;AAAA,YAC5F,OAAO,EAAE,qBAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAG,EAAA,CACvD,EAAA,CACJ;AAAA,MACA,oBAAC,eAAA,EACG,UAAA,oBAAC,QAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,SAAS,SAAS,OAAQ,UAAA,EAAE,oBAAoB,GAAE,EAAA,CAC7F;AAAA,IAAA,EAAA,CACJ;AAAA;AAER;"}
+{"version":3,"file":"RecoveryCodesDialog.js","sources":["../../src/security/RecoveryCodesDialog.jsx"],"sourcesContent":["// Los códigos de recuperación, que se enseñan UNA sola vez (el servidor solo guarda su huella, no los códigos).\n//\n// No se puede cerrar sin marcar «Ya los guardé»: es la única salida que tiene la persona el día que pierda su teléfono,\n// y un aviso que se cierra con Esc o con un clic afuera se cierra sin leer. Se pueden copiar todos o bajar en un .txt con\n// el nombre de la app, la cuenta y la fecha.\n//\n//   <RecoveryCodesDialog codes={codes} account={session.email} onClose={() => setCodes(null)} />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaRecoveryCodesDialog con defaultProps y\n// styleOverrides de sus partes: codes, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Alert from '@mui/material/Alert';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Checkbox from '@mui/material/Checkbox';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Stack from '@mui/material/Stack';\nimport DownloadIcon from '@mui/icons-material/Download';\n\nimport {saveBlob} from '@/files.js';\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport CopyButton from '@/ui/actions/CopyButton.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaRecoveryCodesDialog)\nconst THEME_NAME = 'CalcitaRecoveryCodesDialog';\nconst RecoveryCodes = piecePart(THEME_NAME, 'Codes', Box);\nconst RecoveryActions = piecePart(THEME_NAME, 'Actions', Stack);\n\nconst CODE_FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * La fecha de hoy como AAAA-MM-DD, para el nombre y el encabezado del archivo.\n *\n * @returns {string}\n */\nfunction todayText() {\n    return new Date().toISOString().slice(0, 10);\n}\n\n/**\n * @param {object} props\n * @param {string[]|null} props.codes los códigos recién generados; sin códigos el diálogo está cerrado\n * @param {string} [props.account] la cuenta (normalmente el correo), para el archivo\n * @param {() => void} props.onClose solo se llama después de «Ya los guardé»\n * @param {(method: 'copy'|'download') => void} [props.onCodesSaved] la persona los copió o los descargó (para la bitácora de\n *     seguridad)\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function RecoveryCodesDialog(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaRecoveryCodesDialog.defaultProps) y encima lo que llega aquí\n    const {codes, account = '', onClose, onCodesSaved, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('security', texts);\n    const {appName} = useToolkitSettings();\n    const [isSaved, setIsSaved] = useState(false);\n    const isOpen = Boolean(codes?.length);\n\n    const download = () => {\n        const date = todayText();\n        const lines = [\n            t('recoveryCodes.fileTitle', {appName}),\n            t('recoveryCodes.fileAccount', {account}),\n            t('recoveryCodes.fileGenerated', {date}),\n            '',\n            t('recoveryCodes.fileHowTo'),\n            t('recoveryCodes.fileKeepSafe'),\n            '',\n            ...codes,\n            '',\n        ];\n        saveBlob(new Blob([lines.join('\\n')], {type: 'text/plain;charset=utf-8'}), t('recoveryCodes.fileName', {date}));\n        onCodesSaved?.('download');\n    };\n\n    const close = () => {\n        setIsSaved(false);\n        onClose();\n    };\n\n    return (\n        // ni Esc ni un clic afuera lo cierran: solo «Listo», después de marcar que los guardó\n        <Dialog open={isOpen} maxWidth=\"xs\" fullWidth disableEscapeKeyDown onClose={() => {}}>\n            <DialogTitle>{t('recoveryCodes.title')}</DialogTitle>\n            <DialogContent>\n                <Stack spacing={2}>\n                    <Alert severity=\"warning\">{t('recoveryCodes.warning')}</Alert>\n                    <RecoveryCodes component=\"ol\" ownSx={{\n                        m: 0, p: 2, pl: 5, borderRadius: 2, bgcolor: 'action.hover', fontFamily: CODE_FONT, fontSize: 15,\n                        columns: 2, columnGap: 4,\n                    }}>\n                        {(codes ?? []).map((code) => <li key={code}>{code}</li>)}\n                    </RecoveryCodes>\n                    <RecoveryActions direction=\"row\" spacing={1} ownSx={{alignItems: 'center'}}>\n                        <CopyButton value={(codes ?? []).join('\\n')} label={t('recoveryCodes.copyAll')} onCopied={() => onCodesSaved?.('copy')} />\n                        <Button size=\"small\" startIcon={<DownloadIcon />} onClick={download}>{t('recoveryCodes.download')}</Button>\n                    </RecoveryActions>\n                    <FormControlLabel control={<Checkbox checked={isSaved} onChange={(event) => setIsSaved(event.target.checked)} />}\n                                      label={t('recoveryCodes.saved')} />\n                </Stack>\n            </DialogContent>\n            <DialogActions>\n                <Button variant=\"contained\" disabled={!isSaved} onClick={close}>{t('recoveryCodes.done')}</Button>\n            </DialogActions>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/security/SessionsCard.js

@@ -20,6 +20,12 @@ import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import Tag from "../ui/labels/Tag.js";
 import SectionCard from "../ui/layout/SectionCard.js";
 import ComponentTexts from "../toolkit/ComponentTexts.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaSessionsCard";
+const SessionsItem = piecePart(THEME_NAME, "Item", ListItem);
+const SessionsItemIcon = piecePart(THEME_NAME, "ItemIcon", ListItemIcon);
+const SessionsItemHeader = piecePart(THEME_NAME, "ItemHeader", Stack);
+const SessionsActions = piecePart(THEME_NAME, "Actions", Stack);
 const LOADING_HEIGHT_PIXELS = 96;
 function SessionRow({ session }) {
   const { t } = useToolkitTranslation("security");
@@ -33,15 +39,16 @@ function SessionRow({ session }) {
   if (session.network) {
     details.push(t("sessions.network", { network: session.network }));
   }
-  return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, alignItems: "flex-start", sx: { gap: 1 }, children: [
-    /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 36, mt: 0.5 }, children: /* @__PURE__ */ jsx(DeviceIcon, {}) }),
-    /* @__PURE__ */ jsx(ListItemText, { primary: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { alignItems: "center", flexWrap: "wrap" }, children: [
+  return /* @__PURE__ */ jsxs(SessionsItem, { disableGutters: true, alignItems: "flex-start", ownSx: { gap: 1 }, children: [
+    /* @__PURE__ */ jsx(SessionsItemIcon, { ownSx: { minWidth: 36, mt: 0.5 }, children: /* @__PURE__ */ jsx(DeviceIcon, {}) }),
+    /* @__PURE__ */ jsx(ListItemText, { primary: /* @__PURE__ */ jsxs(SessionsItemHeader, { direction: "row", spacing: 1, useFlexGap: true, ownSx: { alignItems: "center", flexWrap: "wrap" }, children: [
       /* @__PURE__ */ jsx("span", { children: device }),
       session.isCurrent && /* @__PURE__ */ jsx(Tag, { label: t("sessions.current"), color: "success" })
     ] }), secondary: details.join(" · "), slotProps: { primary: { sx: { fontWeight: 600 } } } })
   ] });
 }
-function SessionsCard({ sessions, error = null, onCloseOthers, onClosed, texts }) {
+function SessionsCard(props) {
+  const { sessions, error = null, onCloseOthers, onClosed, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("security", texts);
   const othersCount = (sessions ?? []).filter((session) => !session.isCurrent).length;
   const confirmation = useConfirmAction({
@@ -60,7 +67,7 @@ function SessionsCard({ sessions, error = null, onCloseOthers, onClosed, texts }
         index > 0 && /* @__PURE__ */ jsx(Divider, { component: "div" }),
         /* @__PURE__ */ jsx(SessionRow, { session })
       ] }, session.id)) }),
-      /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsxs(SessionsActions, { spacing: 1, ownSx: { alignItems: "flex-start" }, children: [
         sessions && othersCount === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("sessions.onlyThis") }),
         /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "warning", disabled: !sessions || othersCount === 0, onClick: () => confirmation.open({}), children: t("sessions.closeOthers") })
       ] })

package/dist/security/SessionsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SessionsCard.js","sources":["../../src/security/SessionsCard.jsx"],"sourcesContent":["// «Mis sesiones»: los equipos donde la cuenta sigue abierta (este, marcado) y «Cerrar la sesión en los demás equipos».\n//\n// No pide la contraseña: cerrar sesiones no da acceso a nada, solo lo quita. Nunca se pinta la IP completa ni el user\n// agent: el servidor manda el navegador, el sistema y la red a medias (p. ej. «187.190.x.x»), que bastan para reconocer\n// un equipo sin exponer datos.\n//\n//   <SessionsCard sessions={sessions} onCloseOthers={async () => (await api.post('/sessions/close-others')).closed} />\n//\n// Genérico del paquete: function (regla de la casa).\nimport Alert from '@mui/material/Alert';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ComputerOutlinedIcon from '@mui/icons-material/ComputerOutlined';\nimport PhoneIphoneOutlinedIcon from '@mui/icons-material/PhoneIphoneOutlined';\n\nimport ConfirmDialog from '@/feedback/ConfirmDialog.jsx';\nimport {toastSuccess} from '@/feedback/toast.jsx';\nimport {useConfirmAction} from '@/feedback/useConfirmAction.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Tag from '@/ui/labels/Tag.jsx';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\n\nconst LOADING_HEIGHT_PIXELS = 96;\n\n/**\n * Un renglón: el equipo (navegador en sistema), desde cuándo y su red a medias.\n *\n * @param {{session: object}} props\n */\nfunction SessionRow({session}) {\n    const {t} = useToolkitTranslation('security');\n    const {formatDateTime} = useFormatters();\n    const DeviceIcon = session.isMobile ? PhoneIphoneOutlinedIcon : ComputerOutlinedIcon;\n    const device = t('sessions.device', {\n        browser: session.browser ?? t('sessions.otherBrowser'), platform: session.platform ?? t('sessions.otherPlatform'),\n    });\n    const details = [t('sessions.since', {date: formatDateTime(session.startedAt)})];\n    if (session.network) {\n        details.push(t('sessions.network', {network: session.network}));\n    }\n\n    return (\n        <ListItem disableGutters alignItems=\"flex-start\" sx={{gap: 1}}>\n            <ListItemIcon sx={{minWidth: 36, mt: 0.5}}><DeviceIcon /></ListItemIcon>\n            <ListItemText primary={(\n                <Stack direction=\"row\" spacing={1} useFlexGap sx={{alignItems: 'center', flexWrap: 'wrap'}}>\n                    <span>{device}</span>\n                    {session.isCurrent && <Tag label={t('sessions.current')} color=\"success\" />}\n                </Stack>\n            )} secondary={details.join(' · ')} slotProps={{primary: {sx: {fontWeight: 600}}}} />\n        </ListItem>\n    );\n}\n\n/**\n * @param {object} props\n * @param {Array<{id: string, browser?: string|null, platform?: string|null, isMobile?: boolean, startedAt: string, network?: string|null, isCurrent?: boolean}>|null} props.sessions\n *     null mientras llegan\n * @param {string|null} [props.error] ya traducido (ApiError.message) si no se pudieron traer\n * @param {() => Promise<number>} props.onCloseOthers cierra las demás; regresa cuántas cerró\n * @param {() => void} [props.onClosed] p. ej. volver a pedir la lista\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function SessionsCard({sessions, error = null, onCloseOthers, onClosed, texts}) {\n    const {t} = useToolkitTranslation('security', texts);\n    const othersCount = (sessions ?? []).filter((session) => !session.isCurrent).length;\n    const confirmation = useConfirmAction({\n        run: () => onCloseOthers(),\n        onDone: (closedCount) => {\n            toastSuccess(closedCount ? t('sessions.closed', {count: closedCount}) : t('sessions.noneClosed'));\n            onClosed?.();\n        },\n    });\n\n    return (\n        <ComponentTexts namespace=\"security\" texts={texts}>\n            <SectionCard title={t('sessions.title')}>\n                <Stack spacing={2}>\n                    <Typography variant=\"body2\" color=\"text.secondary\">{t('sessions.description')}</Typography>\n                    {error && <Alert severity=\"error\">{error}</Alert>}\n                    {!sessions && !error && <Skeleton variant=\"rounded\" height={LOADING_HEIGHT_PIXELS} />}\n                    {sessions && (\n                        <List disablePadding>\n                            {sessions.map((session, index) => (\n                                <li key={session.id}>\n                                    {index > 0 && <Divider component=\"div\" />}\n                                    <SessionRow session={session} />\n                                </li>\n                            ))}\n                        </List>\n                    )}\n                    <Stack spacing={1} sx={{alignItems: 'flex-start'}}>\n                        {sessions && othersCount === 0 && <Typography variant=\"caption\" color=\"text.secondary\">{t('sessions.onlyThis')}</Typography>}\n                        <Button variant=\"outlined\" color=\"warning\" disabled={!sessions || othersCount === 0} onClick={() => confirmation.open({})}>\n                            {t('sessions.closeOthers')}\n                        </Button>\n                    </Stack>\n                </Stack>\n                <ConfirmDialog {...confirmation.dialogProps} tone=\"warning\" title={t('sessions.confirmTitle')}\n                               description={t('sessions.confirmText', {count: othersCount})} confirmLabel={t('sessions.confirm')} />\n            </SectionCard>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SessionsCard.js","sources":["../../src/security/SessionsCard.jsx"],"sourcesContent":["// «Mis sesiones»: los equipos donde la cuenta sigue abierta (este, marcado) y «Cerrar la sesión en los demás equipos».\n//\n// No pide la contraseña: cerrar sesiones no da acceso a nada, solo lo quita. Nunca se pinta la IP completa ni el user\n// agent: el servidor manda el navegador, el sistema y la red a medias (p. ej. «187.190.x.x»), que bastan para reconocer\n// un equipo sin exponer datos.\n//\n//   <SessionsCard sessions={sessions} onCloseOthers={async () => (await api.post('/sessions/close-others')).closed} />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSessionsCard con defaultProps y\n// styleOverrides de sus partes: item, itemIcon, itemHeader, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Alert from '@mui/material/Alert';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ComputerOutlinedIcon from '@mui/icons-material/ComputerOutlined';\nimport PhoneIphoneOutlinedIcon from '@mui/icons-material/PhoneIphoneOutlined';\n\nimport ConfirmDialog from '@/feedback/ConfirmDialog.jsx';\nimport {toastSuccess} from '@/feedback/toast.jsx';\nimport {useConfirmAction} from '@/feedback/useConfirmAction.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Tag from '@/ui/labels/Tag.jsx';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSessionsCard)\nconst THEME_NAME = 'CalcitaSessionsCard';\nconst SessionsItem = piecePart(THEME_NAME, 'Item', ListItem);\nconst SessionsItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\nconst SessionsItemHeader = piecePart(THEME_NAME, 'ItemHeader', Stack);\nconst SessionsActions = piecePart(THEME_NAME, 'Actions', Stack);\n\nconst LOADING_HEIGHT_PIXELS = 96;\n\n/**\n * Un renglón: el equipo (navegador en sistema), desde cuándo y su red a medias.\n *\n * @param {{session: object}} props\n */\nfunction SessionRow({session}) {\n    const {t} = useToolkitTranslation('security');\n    const {formatDateTime} = useFormatters();\n    const DeviceIcon = session.isMobile ? PhoneIphoneOutlinedIcon : ComputerOutlinedIcon;\n    const device = t('sessions.device', {\n        browser: session.browser ?? t('sessions.otherBrowser'), platform: session.platform ?? t('sessions.otherPlatform'),\n    });\n    const details = [t('sessions.since', {date: formatDateTime(session.startedAt)})];\n    if (session.network) {\n        details.push(t('sessions.network', {network: session.network}));\n    }\n\n    return (\n        <SessionsItem disableGutters alignItems=\"flex-start\" ownSx={{gap: 1}}>\n            <SessionsItemIcon ownSx={{minWidth: 36, mt: 0.5}}><DeviceIcon /></SessionsItemIcon>\n            <ListItemText primary={(\n                <SessionsItemHeader direction=\"row\" spacing={1} useFlexGap ownSx={{alignItems: 'center', flexWrap: 'wrap'}}>\n                    <span>{device}</span>\n                    {session.isCurrent && <Tag label={t('sessions.current')} color=\"success\" />}\n                </SessionsItemHeader>\n            )} secondary={details.join(' · ')} slotProps={{primary: {sx: {fontWeight: 600}}}} />\n        </SessionsItem>\n    );\n}\n\n/**\n * @param {object} props\n * @param {Array<{id: string, browser?: string|null, platform?: string|null, isMobile?: boolean, startedAt: string, network?: string|null, isCurrent?: boolean}>|null} props.sessions\n *     null mientras llegan\n * @param {string|null} [props.error] ya traducido (ApiError.message) si no se pudieron traer\n * @param {() => Promise<number>} props.onCloseOthers cierra las demás; regresa cuántas cerró\n * @param {() => void} [props.onClosed] p. ej. volver a pedir la lista\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function SessionsCard(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSessionsCard.defaultProps) y encima lo que llega aquí\n    const {sessions, error = null, onCloseOthers, onClosed, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('security', texts);\n    const othersCount = (sessions ?? []).filter((session) => !session.isCurrent).length;\n    const confirmation = useConfirmAction({\n        run: () => onCloseOthers(),\n        onDone: (closedCount) => {\n            toastSuccess(closedCount ? t('sessions.closed', {count: closedCount}) : t('sessions.noneClosed'));\n            onClosed?.();\n        },\n    });\n\n    return (\n        <ComponentTexts namespace=\"security\" texts={texts}>\n            <SectionCard title={t('sessions.title')}>\n                <Stack spacing={2}>\n                    <Typography variant=\"body2\" color=\"text.secondary\">{t('sessions.description')}</Typography>\n                    {error && <Alert severity=\"error\">{error}</Alert>}\n                    {!sessions && !error && <Skeleton variant=\"rounded\" height={LOADING_HEIGHT_PIXELS} />}\n                    {sessions && (\n                        <List disablePadding>\n                            {sessions.map((session, index) => (\n                                <li key={session.id}>\n                                    {index > 0 && <Divider component=\"div\" />}\n                                    <SessionRow session={session} />\n                                </li>\n                            ))}\n                        </List>\n                    )}\n                    <SessionsActions spacing={1} ownSx={{alignItems: 'flex-start'}}>\n                        {sessions && othersCount === 0 && <Typography variant=\"caption\" color=\"text.secondary\">{t('sessions.onlyThis')}</Typography>}\n                        <Button variant=\"outlined\" color=\"warning\" disabled={!sessions || othersCount === 0} onClick={() => confirmation.open({})}>\n                            {t('sessions.closeOthers')}\n                        </Button>\n                    </SessionsActions>\n                </Stack>\n                <ConfirmDialog {...confirmation.dialogProps} tone=\"warning\" title={t('sessions.confirmTitle')}\n                               description={t('sessions.confirmText', {count: othersCount})} confirmLabel={t('sessions.confirm')} />\n            </SectionCard>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/theme/components/glassComponents.js

@@ -1,8 +1,9 @@
-import { GLASS_MENU_RADIUS_PIXELS, GLASS_PANEL_RADIUS_PIXELS, GLASS_INSET_PIXELS, solidFallbackOf, glassDropOf, accentTextStylesOf, glassStylesOf, insideContentSelectorOf, canvasFieldStylesOf, GLASS_LENS_FLAG_SELECTOR, glassSurfaceOf, materialStylesOf, whiteLabelFillOf, fieldWellStylesOf, glassOpacityOf } from "../glassSurface.js";
+import { MENU_RADIUS, PANEL_RADIUS, GLASS_INSET_PIXELS, solidFallbackOf, glassDropOf, accentTextStylesOf, glassStylesOf, insideContentSelectorOf, canvasFieldStylesOf, GLASS_LENS_FLAG_SELECTOR, glassSurfaceOf, materialStylesOf, whiteLabelFillOf, fieldWellStylesOf, glassOpacityOf } from "../glassSurface.js";
 import { mergeStyles } from "../mergeComponents.js";
 import { lightDarkStylesOf } from "../lightDarkStyles.js";
 import { textSizeOf } from "../appleTracking.js";
 import { paletteOf } from "./paletteOf.js";
+import { cssTokenOf } from "../cssTokens.js";
 const MENU_ROW_INSET_PIXELS = 4;
 const PRESSED_SCALE = 0.97;
 const PRESSED_THUMB_SCALE = 1.25;
@@ -33,6 +34,8 @@ const SWITCH_LABEL_GAP_PIXELS = 12;
 const MONOGRAM_GRAY = Object.freeze({ light: "#6E6E73", dark: "#636366" });
 const PROMINENT_GLASS_OPACITY = 1;
 const FIELD_RADIUS_PIXELS = 12;
+const FIELD_RADIUS = cssTokenOf("fieldRadius", `${FIELD_RADIUS_PIXELS}px`);
+const MENU_ROW_RADIUS = `max(0px, calc(${MENU_RADIUS} - ${MENU_ROW_INSET_PIXELS}px))`;
 const FIELD_RING_PERCENT = 40;
 const FIELD_RING_PIXELS = Object.freeze({ focused: 3, error: 2 });
 const COMBO_BUTTON_PIXELS = 28;
@@ -141,7 +144,7 @@ function floatingDrawerOf(anchor) {
     top: { top: inset, left: inset, right: inset, maxHeight: fullLength, ...centeredSheet },
     bottom: { bottom: inset, left: inset, right: inset, maxHeight: fullLength, ...centeredSheet }
   };
-  return { ...placementByAnchor[anchor], borderRadius: GLASS_PANEL_RADIUS_PIXELS };
+  return { ...placementByAnchor[anchor], borderRadius: PANEL_RADIUS };
 }
 function glassComponents({ surfaces = false } = {}) {
   return {
@@ -163,7 +166,7 @@ function glassComponents({ surfaces = false } = {}) {
         styleOverrides: {
           root: ({ theme }) => ({
             ...contentMaterialOf(theme),
-            "&, &:first-of-type, &:last-of-type": { borderRadius: GLASS_MENU_RADIUS_PIXELS },
+            "&, &:first-of-type, &:last-of-type": { borderRadius: MENU_RADIUS },
             "&::before": { display: "none" },
             "&, &.Mui-expanded": { margin: `0 0 ${GLASS_INSET_PIXELS}px` },
             "&:last-of-type, &.Mui-expanded:last-of-type": { marginBottom: 0 }
@@ -214,7 +217,7 @@ function glassComponents({ surfaces = false } = {}) {
     },
     MuiPopover: {
       styleOverrides: {
-        paper: ({ theme }) => ({ ...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS })
+        paper: ({ theme }) => ({ ...glassStylesOf(theme), borderRadius: MENU_RADIUS })
       }
     },
     // los renglones de un menú: concéntricos con el menú, y el elegido (la opción actual de una lista) con su palomita
@@ -224,7 +227,7 @@ function glassComponents({ surfaces = false } = {}) {
       styleOverrides: {
         root: ({ theme }) => ({
           marginInline: MENU_ROW_INSET_PIXELS,
-          borderRadius: GLASS_MENU_RADIUS_PIXELS - MENU_ROW_INSET_PIXELS,
+          borderRadius: MENU_ROW_RADIUS,
           "&.Mui-selected": { backgroundColor: "transparent" },
           "&.Mui-selected:hover": { backgroundColor: paletteOf(theme).action.hover },
           // con el teclado encima, el renglón elegido sí se marca: si no, no se ve dónde está el foco
@@ -243,8 +246,8 @@ function glassComponents({ surfaces = false } = {}) {
     // al final; abierto, el ⌄ no gira (en Apple se queda igual)
     MuiAutocomplete: {
       styleOverrides: {
-        paper: ({ theme }) => ({ ...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS }),
-        option: { marginInline: MENU_ROW_INSET_PIXELS, borderRadius: GLASS_MENU_RADIUS_PIXELS - MENU_ROW_INSET_PIXELS },
+        paper: ({ theme }) => ({ ...glassStylesOf(theme), borderRadius: MENU_RADIUS }),
+        option: { marginInline: MENU_ROW_INSET_PIXELS, borderRadius: MENU_ROW_RADIUS },
         popupIndicator: ({ theme }) => ({
           width: COMBO_BUTTON_PIXELS,
           height: COMBO_BUTTON_PIXELS,
@@ -284,7 +287,7 @@ function glassComponents({ surfaces = false } = {}) {
     // el calendario de MUI X (/date-pickers) en escritorio; en el teléfono sale en un diálogo (MuiDialog)
     MuiPickerPopper: {
       styleOverrides: {
-        paper: ({ theme }) => ({ ...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS })
+        paper: ({ theme }) => ({ ...glassStylesOf(theme), borderRadius: MENU_RADIUS })
       }
     },
     // la tabla (MUI X Data Grid): el menú de cada columna y los paneles de filtros y columnas
@@ -299,8 +302,8 @@ function glassComponents({ surfaces = false } = {}) {
         ...surfaces && {
           root: { "&.MuiDataGrid-root": { "--DataGrid-t-color-background-base": "transparent", "--DataGrid-t-header-background-base": "transparent" } }
         },
-        panelContent: ({ theme }) => ({ ...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS }),
-        menu: ({ theme }) => ({ "& .MuiPaper-root": { ...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS } })
+        panelContent: ({ theme }) => ({ ...glassStylesOf(theme), borderRadius: MENU_RADIUS }),
+        menu: ({ theme }) => ({ "& .MuiPaper-root": { ...glassStylesOf(theme), borderRadius: MENU_RADIUS } })
       }
     },
     // los cajones: de vidrio; los que salen encima del contenido flotan separados de la orilla (Adopting Liquid Glass:
@@ -315,7 +318,7 @@ function glassComponents({ surfaces = false } = {}) {
     },
     MuiDialog: {
       styleOverrides: {
-        paper: ({ ownerState, theme }) => ownerState.fullScreen ? {} : { ...glassStylesOf(theme), borderRadius: GLASS_PANEL_RADIUS_PIXELS },
+        paper: ({ ownerState, theme }) => ownerState.fullScreen ? {} : { ...glassStylesOf(theme), borderRadius: PANEL_RADIUS },
         // la hoja de lectura (ContentDialog) deja la barra de arriba a la vista para no perder dónde se está: sin
         // desenfoque detrás, o la barra se volvía ilegible
         backdrop: ({ ownerState }) => ownerState.fullScreen ? { "&:not(.MuiBackdrop-invisible)": { backdropFilter: "none", WebkitBackdropFilter: "none" } } : {}
@@ -342,7 +345,7 @@ function glassComponents({ surfaces = false } = {}) {
     },
     MuiSnackbarContent: {
       styleOverrides: {
-        root: ({ theme }) => ({ ...darkGlassOf(paletteOf(theme).SnackbarContent?.bg ?? paletteOf(theme).grey[900]), borderRadius: GLASS_MENU_RADIUS_PIXELS })
+        root: ({ theme }) => ({ ...darkGlassOf(paletteOf(theme).SnackbarContent?.bg ?? paletteOf(theme).grey[900]), borderRadius: MENU_RADIUS })
       }
     },
     MuiFab: {
@@ -447,7 +450,7 @@ function glassComponents({ surfaces = false } = {}) {
     MuiButtonGroup: {
       styleOverrides: {
         root: ({ ownerState, theme }) => {
-          const borderRadius = ownerState.orientation === "vertical" ? GLASS_MENU_RADIUS_PIXELS : PILL_RADIUS;
+          const borderRadius = ownerState.orientation === "vertical" ? MENU_RADIUS : PILL_RADIUS;
           if (ownerState.variant !== "outlined") {
             return { borderRadius };
           }
@@ -567,7 +570,7 @@ function glassComponents({ surfaces = false } = {}) {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
           ...canvasFieldStylesOf(theme),
-          borderRadius: ownerState.type === "search" ? PILL_RADIUS : FIELD_RADIUS_PIXELS,
+          borderRadius: ownerState.type === "search" ? PILL_RADIUS : FIELD_RADIUS,
           "& .MuiOutlinedInput-notchedOutline": { borderColor: "transparent" },
           "&:hover .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiOutlinedInput-notchedOutline, &.Mui-error .MuiOutlinedInput-notchedOutline": {
             borderColor: "transparent"
@@ -599,7 +602,7 @@ function glassComponents({ surfaces = false } = {}) {
       styleOverrides: {
         root: ({ theme }) => ({
           ...canvasFieldStylesOf(theme),
-          borderRadius: FIELD_RADIUS_PIXELS,
+          borderRadius: FIELD_RADIUS,
           "& .MuiPickersOutlinedInput-notchedOutline": { borderColor: "transparent" },
           "&:hover .MuiPickersOutlinedInput-notchedOutline, &.Mui-focused .MuiPickersOutlinedInput-notchedOutline, &.Mui-error .MuiPickersOutlinedInput-notchedOutline": {
             borderColor: "transparent"
@@ -721,7 +724,7 @@ function glassComponents({ surfaces = false } = {}) {
           paddingRight: theme.spacing(1),
           "& .MuiTab-root": {
             minHeight: 40,
-            borderRadius: GLASS_MENU_RADIUS_PIXELS,
+            borderRadius: MENU_RADIUS,
             alignItems: "flex-start",
             marginBlock: 3,
             paddingInline: theme.spacing(2)