@stackcraftmx/calcita 0.47.0 → 0.52.0

package/dist/account/SignInScreen.js.map

@@ -1 +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// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSignInScreen con defaultProps y\n// styleOverrides de sus partes: alert.\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';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSignInScreen)\nconst THEME_NAME = 'CalcitaSignInScreen';\nconst SignInAlert = piecePart(THEME_NAME, 'Alert', Alert);\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(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSignInScreen.defaultProps) y encima lo que llega aquí\n    const {homePath = '/', forgotPasswordPath, logo, brandName, footer, showLanguageToggle = true, showColorSchemeToggle = true, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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 && <SignInAlert severity=\"warning\" ownSx={{mb: 2}}>{notice}</SignInAlert>}\n                <SignInForm onSubmit={signIn} forgotPasswordPath={forgotPasswordPath} />\n            </AuthLayout>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"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// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSignInScreen con defaultProps y\n// styleOverrides de sus partes: alert.\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';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSignInScreen)\nconst THEME_NAME = 'CalcitaSignInScreen';\nconst SignInAlert = piecePart(THEME_NAME, 'Alert', Alert);\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 */\nfunction SignInScreenContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSignInScreen.defaultProps) y encima lo que llega aquí\n    const {homePath = '/', forgotPasswordPath, logo, brandName, footer, showLanguageToggle = true, showColorSchemeToggle = true, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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 && <SignInAlert severity=\"warning\" ownSx={{mb: 2}}>{notice}</SignInAlert>}\n                <SignInForm onSubmit={signIn} forgotPasswordPath={forgotPasswordPath} />\n            </AuthLayout>\n        </ComponentTexts>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst SignInScreen = withPieceSlots(SignInScreenContent, THEME_NAME);\nexport default SignInScreen;\n"],"names":[],"mappings":"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"}

package/dist/appShell/AccountMenu.js

@@ -19,7 +19,7 @@ import { barMenuPlacementOf } from "./barMenuPlacement.js";
 import MenuLinks from "./MenuLinks.js";
 import { WHITE_LABEL, MONOGRAM_GRAY } from "../theme/components/glassComponents.js";
 import { isGlassTheme } from "../theme/glassSurface.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaAccountMenu";
 const AccountButton = piecePart(THEME_NAME, "Button", IconButton);
@@ -27,7 +27,7 @@ const AccountAvatar = piecePart(THEME_NAME, "Avatar", Avatar);
 const AccountHeader = piecePart(THEME_NAME, "Header", Box);
 const AccountName = piecePart(THEME_NAME, "Name", Typography);
 const AccountSettings = piecePart(THEME_NAME, "Settings", Box);
-function AccountMenu(props) {
+function AccountMenuContent(props) {
   const { user, profilePath, accountMenuItems = [], onSignOut, isSigningOut = false, settings, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("layout");
@@ -82,6 +82,7 @@ function AccountMenu(props) {
     )
   ] });
 }
+const AccountMenu = withPieceSlots(AccountMenuContent, THEME_NAME);
 export {
   AccountMenu as default
 };

package/dist/appShell/AccountMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountMenu.js","sources":["../../src/appShell/AccountMenu.jsx"],"sourcesContent":["// La cuenta de quien está dentro, arriba a la derecha (como en las plantillas de MUI): un avatar con sus iniciales (o su\n// foto) que abre un menú con su nombre y correo, Mi perfil, lo que el proyecto agregue (accountMenuItems: Facturación,\n// Mis llaves…) y Salir.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAccountMenu con defaultProps y\n// styleOverrides de sus partes: button, avatar, header, name, settings.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport LogoutIcon from '@mui/icons-material/Logout';\nimport PersonOutlineIcon from '@mui/icons-material/PersonOutline';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {barMenuPlacementOf} from '@/appShell/barMenuPlacement.js';\nimport MenuLinks from '@/appShell/MenuLinks.jsx';\nimport {MONOGRAM_GRAY, WHITE_LABEL} from '@/theme/components/glassComponents.js';\nimport {isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAccountMenu)\nconst THEME_NAME = 'CalcitaAccountMenu';\nconst AccountButton = piecePart(THEME_NAME, 'Button', IconButton);\nconst AccountAvatar = piecePart(THEME_NAME, 'Avatar', Avatar);\nconst AccountHeader = piecePart(THEME_NAME, 'Header', Box);\nconst AccountName = piecePart(THEME_NAME, 'Name', Typography);\nconst AccountSettings = piecePart(THEME_NAME, 'Settings', Box);\n\n/**\n * @param {object} props\n * @param {{name: string, email?: string, subtitle?: string, avatarUrl?: string}} props.user\n * @param {string} [props.profilePath] sin ella no sale «Mi perfil»\n * @param {Array<{to?: string, onClick?: Function, label?: string, labelKey?: string, Icon?: import('react').ElementType}>} [props.accountMenuItems]\n * @param {() => void} [props.onSignOut] sin él no sale «Salir»\n * @param {boolean} [props.isSigningOut]\n * @param {import('react').ReactNode} [props.settings] los ajustes de la app, entre los datos de la persona y sus ligas\n */\nexport default function AccountMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAccountMenu.defaultProps) y encima lo que llega aquí\n    const {user, profilePath, accountMenuItems = [], onSignOut, isSigningOut = false, settings, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('layout');\n    const [anchorElement, setAnchorElement] = useState(null);\n    const closeMenu = () => setAnchorElement(null);\n    const menuLinks = [\n        ...(profilePath ? [{to: profilePath, labelKey: 'layout:account.myProfile', Icon: PersonOutlineIcon}] : []),\n        ...accountMenuItems,\n    ];\n\n    // hacia arriba si la barra está abajo (teléfono con vidrio)\n    const placement = barMenuPlacementOf(anchorElement);\n\n    const signOut = () => {\n        closeMenu();\n        onSignOut();\n    };\n\n    return (\n        <>\n            <Tooltip title={t('account.open')}>\n                <AccountButton size=\"small\" aria-label={t('account.open')} aria-haspopup=\"menu\" onClick={(event) => setAnchorElement(event.currentTarget)} ownSx={{p: 0.5}}>\n                    <AccountAvatar src={user.avatarUrl} alt=\"\" ownSx={(theme) => ({\n                        width: 32, height: 32, fontSize: '0.875rem', bgcolor: 'secondary.main', color: 'secondary.contrastText',\n                        // con vidrio, en oscuro el monograma de Apple (gris oscuro con letra blanca), el que se aprobó. Antes lo\n                        // ponía el tema porque su regla de oscuro le ganaba a este sx; ahora el sx gana en los dos modos\n                        ...(isGlassTheme(theme) && theme.applyStyles('dark', {bgcolor: MONOGRAM_GRAY.dark, color: WHITE_LABEL})),\n                    })}>\n                        {initialsOf(user.name)}\n                    </AccountAvatar>\n                </AccountButton>\n            </Tooltip>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={closeMenu}\n                  anchorOrigin={placement.anchorOrigin} transformOrigin={placement.transformOrigin}\n                  slotProps={{paper: {sx: {minWidth: settings ? 300 : 240, maxWidth: 360, ...placement.gapSx}}}}>\n                <AccountHeader ownSx={{px: 2, py: 1.25}}>\n                    <AccountName variant=\"subtitle2\" noWrap ownSx={{fontWeight: 600}}>{user.name}</AccountName>\n                    {user.email && <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{user.email}</Typography>}\n                    {user.subtitle && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\" noWrap>{user.subtitle}</Typography>}\n                </AccountHeader>\n                {/* los ajustes de la app (letra, idioma, claro u oscuro y los del proyecto): en la cuenta y no sueltos en la barra */}\n                {settings && <Divider />}\n                {settings && <AccountSettings ownSx={{py: 0.5}}>{settings}</AccountSettings>}\n                {menuLinks.length > 0 && <Divider />}\n                <MenuLinks links={menuLinks} onClose={closeMenu} />\n                {onSignOut && <Divider />}\n                {onSignOut && (\n                    <MenuItem onClick={signOut} disabled={isSigningOut}>\n                        <ListItemIcon><LogoutIcon fontSize=\"small\" /></ListItemIcon>\n                        <ListItemText primary={t('signOut')} />\n                    </MenuItem>\n                )}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccountMenu.js","sources":["../../src/appShell/AccountMenu.jsx"],"sourcesContent":["// La cuenta de quien está dentro, arriba a la derecha (como en las plantillas de MUI): un avatar con sus iniciales (o su\n// foto) que abre un menú con su nombre y correo, Mi perfil, lo que el proyecto agregue (accountMenuItems: Facturación,\n// Mis llaves…) y Salir.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAccountMenu con defaultProps y\n// styleOverrides de sus partes: button, avatar, header, name, settings.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport LogoutIcon from '@mui/icons-material/Logout';\nimport PersonOutlineIcon from '@mui/icons-material/PersonOutline';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {barMenuPlacementOf} from '@/appShell/barMenuPlacement.js';\nimport MenuLinks from '@/appShell/MenuLinks.jsx';\nimport {MONOGRAM_GRAY, WHITE_LABEL} from '@/theme/components/glassComponents.js';\nimport {isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAccountMenu)\nconst THEME_NAME = 'CalcitaAccountMenu';\nconst AccountButton = piecePart(THEME_NAME, 'Button', IconButton);\nconst AccountAvatar = piecePart(THEME_NAME, 'Avatar', Avatar);\nconst AccountHeader = piecePart(THEME_NAME, 'Header', Box);\nconst AccountName = piecePart(THEME_NAME, 'Name', Typography);\nconst AccountSettings = piecePart(THEME_NAME, 'Settings', Box);\n\n/**\n * @param {object} props\n * @param {{name: string, email?: string, subtitle?: string, avatarUrl?: string}} props.user\n * @param {string} [props.profilePath] sin ella no sale «Mi perfil»\n * @param {Array<{to?: string, onClick?: Function, label?: string, labelKey?: string, Icon?: import('react').ElementType}>} [props.accountMenuItems]\n * @param {() => void} [props.onSignOut] sin él no sale «Salir»\n * @param {boolean} [props.isSigningOut]\n * @param {import('react').ReactNode} [props.settings] los ajustes de la app, entre los datos de la persona y sus ligas\n */\nfunction AccountMenuContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAccountMenu.defaultProps) y encima lo que llega aquí\n    const {user, profilePath, accountMenuItems = [], onSignOut, isSigningOut = false, settings, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('layout');\n    const [anchorElement, setAnchorElement] = useState(null);\n    const closeMenu = () => setAnchorElement(null);\n    const menuLinks = [\n        ...(profilePath ? [{to: profilePath, labelKey: 'layout:account.myProfile', Icon: PersonOutlineIcon}] : []),\n        ...accountMenuItems,\n    ];\n\n    // hacia arriba si la barra está abajo (teléfono con vidrio)\n    const placement = barMenuPlacementOf(anchorElement);\n\n    const signOut = () => {\n        closeMenu();\n        onSignOut();\n    };\n\n    return (\n        <>\n            <Tooltip title={t('account.open')}>\n                <AccountButton size=\"small\" aria-label={t('account.open')} aria-haspopup=\"menu\" onClick={(event) => setAnchorElement(event.currentTarget)} ownSx={{p: 0.5}}>\n                    <AccountAvatar src={user.avatarUrl} alt=\"\" ownSx={(theme) => ({\n                        width: 32, height: 32, fontSize: '0.875rem', bgcolor: 'secondary.main', color: 'secondary.contrastText',\n                        // con vidrio, en oscuro el monograma de Apple (gris oscuro con letra blanca), el que se aprobó. Antes lo\n                        // ponía el tema porque su regla de oscuro le ganaba a este sx; ahora el sx gana en los dos modos\n                        ...(isGlassTheme(theme) && theme.applyStyles('dark', {bgcolor: MONOGRAM_GRAY.dark, color: WHITE_LABEL})),\n                    })}>\n                        {initialsOf(user.name)}\n                    </AccountAvatar>\n                </AccountButton>\n            </Tooltip>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={closeMenu}\n                  anchorOrigin={placement.anchorOrigin} transformOrigin={placement.transformOrigin}\n                  slotProps={{paper: {sx: {minWidth: settings ? 300 : 240, maxWidth: 360, ...placement.gapSx}}}}>\n                <AccountHeader ownSx={{px: 2, py: 1.25}}>\n                    <AccountName variant=\"subtitle2\" noWrap ownSx={{fontWeight: 600}}>{user.name}</AccountName>\n                    {user.email && <Typography variant=\"body2\" color=\"text.secondary\" noWrap>{user.email}</Typography>}\n                    {user.subtitle && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\" noWrap>{user.subtitle}</Typography>}\n                </AccountHeader>\n                {/* los ajustes de la app (letra, idioma, claro u oscuro y los del proyecto): en la cuenta y no sueltos en la barra */}\n                {settings && <Divider />}\n                {settings && <AccountSettings ownSx={{py: 0.5}}>{settings}</AccountSettings>}\n                {menuLinks.length > 0 && <Divider />}\n                <MenuLinks links={menuLinks} onClose={closeMenu} />\n                {onSignOut && <Divider />}\n                {onSignOut && (\n                    <MenuItem onClick={signOut} disabled={isSigningOut}>\n                        <ListItemIcon><LogoutIcon fontSize=\"small\" /></ListItemIcon>\n                        <ListItemText primary={t('signOut')} />\n                    </MenuItem>\n                )}\n            </Menu>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst AccountMenu = withPieceSlots(AccountMenuContent, THEME_NAME);\nexport default AccountMenu;\n"],"names":[],"mappings":"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"}

package/dist/appShell/AppLayout.js

@@ -37,7 +37,7 @@ import { THEME_LOOK, TOP_BAR } from "../theme/createToolkitTheme.js";
 import { isGlassTheme, ambientBackgroundOf, scrollEdgeStylesOf, PANEL_RADIUS } from "../theme/glassSurface.js";
 import GlassLensFilter from "../ui/layout/GlassLensFilter.js";
 import { useAppBarHeightPublisher, APP_BAR_HEIGHT } from "../ui/layout/appBarHeight.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaAppLayout";
 const LayoutSkipLink = piecePart(THEME_NAME, "SkipLink", Link);
@@ -474,7 +474,7 @@ const AppLayoutFrame = ({
     )
   ] }) });
 };
-const AppLayout = (props) => {
+const AppLayoutContent = (props) => {
   const {
     logo,
     wordmark,
@@ -545,6 +545,7 @@ const AppLayout = (props) => {
     }
   ) }) }) });
 };
+const AppLayout = withPieceSlots(AppLayoutContent, THEME_NAME);
 export {
   AppLayout,
   MENU_POSITION

package/dist/appShell/AppLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.js","sources":["../../src/appShell/AppLayout.jsx"],"sourcesContent":["// El marco de las pantallas con sesión, al estilo de las plantillas de MUI (y del marco de walk-ot). Dos estilos de\n// barra con las mismas props, para que el proyecto (o el `init` del CLI) solo elija:\n//\n//   menuPosition=\"side\" (por omisión)                 menuPosition=\"top\" (apps de pocos módulos)\n//   ┌──────────────────────────────────────────┐       ┌──────────────────────────────────────────┐\n//   │ ☰ Logo Nombre · Título al deslizar · ⚙ (A)│       │ Logo · Inicio Pedidos Clientes ▾ · ⚙ (A) │\n//   ├────────┬─────────────────────────────────┤       ├──────────────────────────────────────────┤\n//   │ Menú   │ contenido                       │       │ contenido                                │\n//   │ por    │                                 │       │                                          │\n//   │ secc.  │                                 │       │                                          │\n//   └────────┴─────────────────────────────────┘       └──────────────────────────────────────────┘\n//\n// En el teléfono los dos son iguales: hamburguesa, título y ajustes en la barra; el menú sale en un cajón con el logo.\n//\n// Lo que trae, con su porqué:\n//   - La barra va a todo lo ancho, con el logo y el nombre de la app a la izquierda, y el menú lateral debajo de ella\n//     (como el DashboardLayout de MUI). La ☰ de la barra encoge el menú a solo íconos y lo recuerda (useDrawerCollapsed);\n//     antes era un botón montado en la orilla del menú y se encimaba con él.\n//   - El título de la página sube a la barra cuando su título grande sale de la vista (pageTitle.jsx).\n//   - Escritorio y teléfono se eligen con CSS, no con useMediaQuery: el servidor (Next.js) ya pinta lo correcto.\n//   - Dentro de la barra, para que se queden pegados al deslizar: los avisos del proyecto (ribbons), el de versión nueva\n//     (NewBuildNotice; con vidrio flota aparte en su cápsula, ver NewBuildNotice.jsx) y la rayita de «cargando la pantalla»\n//     (isNavigating). La barra publica su alto real, y el menú lateral empieza justo debajo de ella aunque crezca con un aviso.\n//   - Con vidrio, en el teléfono la barra flota ABAJO en una cápsula, como la de Safari en el iPhone; y en escritorio, con\n//     el menú encogido, la barra desaparece y se funde con el menú (☰ y logo arriba, ajustes y cuenta abajo).\n//   - El primer Tab lleva a «Saltar al contenido» (WCAG 2.4.1) y el contenido es <main>. Respeta el área segura del\n//     iPhone (la muesca) cuando la app corre instalada.\n//   - Huecos para extender sin tocar el framework: headerActions, sidebarFooter, accountMenuItems, accountSettings, ribbons.\n//   - Los ajustes de la app (letra, idioma, claro u oscuro y los del proyecto) van DENTRO del menú de la cuenta, no sueltos\n//     en la barra (HeaderTools).\n//   - El menú queda al alcance de las páginas (appMenuContext): PageHeading arma sus migas sola.\n//   - Con el vidrio del tema (createToolkitTheme({glass: true})): el lienzo lleva manchas de color, y en escritorio la\n//     barra y el menú lateral flotan a 8 px de la orilla y entre ellos, con esquinas redondas, para que el contenido pase\n//     por detrás y se vea desenfocado; encogido, el menú es una cápsula. En el teléfono la barra sigue de orilla a orilla\n//     (como en iOS). Sin vidrio, todo igual que siempre: el marco lo sabe por el tema (isGlassTheme), sin otra prop.\n//   - Con vidrio y con el minimalista la barra no lleva franja, como las ventanas de macOS Tahoe (TOP_BAR.capsules, lo de\n//     omisión): la ☰ con el nombre, el menú de arriba y la cuenta van cada uno en su cápsula, y el título queda suelto.\n//     Con vidrio las cápsulas son de vidrio y el contenido pasa por debajo, desenfocado en la orilla (scrollEdgeStylesOf);\n//     con el minimalista son bloques del tono de las tarjetas sobre la barra del color del fondo, también en el teléfono.\n//     Con cápsulas el menú encogido ya no se funde con la barra: la cuenta y los ajustes se quedan arriba. Con\n//     bar: TOP_BAR.band, la franja de lado a lado. Mismo alto y mismo lugar las dos: el menú lateral y las páginas no se\n//     mueven.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAppLayout con defaultProps y\n// styleOverrides de sus partes: skipLink, brand, brandLogo, brandText, brandName, brandCaption, titleArea, phoneTitle,\n// desktopTitle, railBrand, railLogo, collapseButton, root, scrollEdge, bar, toolbar, menuButton, spacer, tools,\n// progress, body, drawer, main, phoneSlot, content, phoneDrawer.\n//\n// Lo renderiza la app: arrow (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation, useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport AppBar from '@mui/material/AppBar';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Drawer from '@mui/material/Drawer';\nimport Fade from '@mui/material/Fade';\nimport IconButton from '@mui/material/IconButton';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport Link from '@mui/material/Link';\nimport Toolbar from '@mui/material/Toolbar';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport MenuOpenIcon from '@mui/icons-material/MenuOpen';\n\nimport {AppMenuContext} from '@/appShell/appMenuContext.js';\nimport BarCapsule from '@/appShell/BarCapsule.jsx';\nimport {BarActionsSlotContext} from '@/appShell/barActionsSlot.js';\nimport HeaderTools from '@/appShell/HeaderTools.jsx';\nimport MobileTabBar from '@/appShell/MobileTabBar.jsx';\nimport Wordmark from '@/appShell/Wordmark.jsx';\nimport {PageTitleProvider, usePageTitle} from '@/appShell/pageTitle.jsx';\nimport {\n    APP_BAR_HEIGHT_PIXELS, DESKTOP_MEDIA_QUERY, DRAWER_WIDTH_COLLAPSED, DRAWER_WIDTH_EXPANDED, GLASS_PANEL_GAP_PIXELS, MAIN_CONTENT_ID,\n    FLOATING_BOTTOM_SPACE_CSS_VARIABLE, MOBILE_TAB_BAR_HEIGHT_PIXELS, PHONE_MEDIA_QUERY, drawerTransitionOf,\n} from '@/appShell/shellSizes.js';\nimport SideMenu from '@/appShell/SideMenu.jsx';\nimport {usesMobileTabBar} from '@/appShell/tabBarRule.js';\nimport TopMenu from '@/appShell/TopMenu.jsx';\nimport {useDrawerCollapsed} from '@/appShell/useDrawerCollapsed.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\nimport NewBuildNotice, {NEW_BUILD_NOTICE_VARIANT} from '@/feedback/NewBuildNotice.jsx';\nimport {activeMenuItemOf, menuItemsWithIconsOf} from '@/navigation/appMenu.js';\nimport {useNavigationTrail} from '@/navigationTrail.js';\nimport {THEME_LOOK, TOP_BAR} from '@/theme/createToolkitTheme.js';\nimport {PANEL_RADIUS, ambientBackgroundOf, isGlassTheme, scrollEdgeStylesOf} from '@/theme/glassSurface.js';\nimport GlassLensFilter from '@/ui/layout/GlassLensFilter.jsx';\nimport {APP_BAR_HEIGHT, useAppBarHeightPublisher} from '@/ui/layout/appBarHeight.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAppLayout)\nconst THEME_NAME = 'CalcitaAppLayout';\nconst LayoutSkipLink = piecePart(THEME_NAME, 'SkipLink', Link);\nconst LayoutBrand = piecePart(THEME_NAME, 'Brand', ButtonBase);\nconst LayoutBrandLogo = piecePart(THEME_NAME, 'BrandLogo', Box);\nconst LayoutBrandText = piecePart(THEME_NAME, 'BrandText', Box);\nconst LayoutBrandName = piecePart(THEME_NAME, 'BrandName', Typography);\nconst LayoutBrandCaption = piecePart(THEME_NAME, 'BrandCaption', Typography);\nconst LayoutTitleArea = piecePart(THEME_NAME, 'TitleArea', Box);\nconst LayoutPhoneTitle = piecePart(THEME_NAME, 'PhoneTitle', Typography);\nconst LayoutDesktopTitle = piecePart(THEME_NAME, 'DesktopTitle', Typography);\nconst LayoutRailBrand = piecePart(THEME_NAME, 'RailBrand', ButtonBase);\nconst LayoutRailLogo = piecePart(THEME_NAME, 'RailLogo', Box);\nconst LayoutCollapseButton = piecePart(THEME_NAME, 'CollapseButton', IconButton);\nconst LayoutRoot = piecePart(THEME_NAME, 'Root', Box);\nconst LayoutScrollEdge = piecePart(THEME_NAME, 'ScrollEdge', Box);\nconst LayoutBar = piecePart(THEME_NAME, 'Bar', AppBar);\nconst LayoutToolbar = piecePart(THEME_NAME, 'Toolbar', Toolbar);\nconst LayoutMenuButton = piecePart(THEME_NAME, 'MenuButton', IconButton);\nconst LayoutSpacer = piecePart(THEME_NAME, 'Spacer', Box);\nconst LayoutTools = piecePart(THEME_NAME, 'Tools', Box);\nconst LayoutProgress = piecePart(THEME_NAME, 'Progress', LinearProgress);\nconst LayoutBody = piecePart(THEME_NAME, 'Body', Box);\nconst LayoutDrawer = piecePart(THEME_NAME, 'Drawer', Drawer);\nconst LayoutMain = piecePart(THEME_NAME, 'Main', Box);\nconst LayoutPhoneSlot = piecePart(THEME_NAME, 'PhoneSlot', Box);\nconst LayoutContent = piecePart(THEME_NAME, 'Content', Box);\nconst LayoutPhoneDrawer = piecePart(THEME_NAME, 'PhoneDrawer', Drawer);\n\n/** Los dos estilos de barra. */\nexport const MENU_POSITION = Object.freeze({side: 'side', top: 'top'});\n\nconst NAVIGATING_BAR_PIXELS = 2;\n\n/**\n * Un grupo de la barra: con la barra en cápsulas, su cápsula (BarCapsule: de vidrio, o con el minimalista un bloque del\n * tono de las tarjetas); con la franja, sus piezas tal cual (sin caja de más, para que la franja se quede idéntica).\n */\nconst BarGroup = ({isCapsule, sx, children}) => {\n    if (!isCapsule) {\n        return children;\n    }\n    // presentation: lo de adentro (la ☰, el nombre, la cuenta) ya se anuncia solo; el grupo es solo la forma\n    return <BarCapsule role=\"presentation\" sx={sx}>{children}</BarCapsule>;\n};\n\n/** «Saltar al contenido»: escondido arriba hasta que llega el foco del teclado. */\nconst SkipToContentLink = () => {\n    const {t} = useToolkitTranslation('layout');\n    return (\n        <LayoutSkipLink href={`#${MAIN_CONTENT_ID}`} ownSx={{\n            position: 'absolute', left: 8, top: -48, zIndex: (theme) => theme.zIndex.tooltip + 1, bgcolor: 'background.paper',\n            px: 1.5, py: 0.75, borderRadius: 1, boxShadow: 3, '&:focus': {top: 8},\n        }}>\n            {t('skipToContent')}\n        </LayoutSkipLink>\n    );\n};\n\n/** El logo y el nombre de la app en la barra (con su renglón chico, si lo hay), o el logo ancho; lleva al inicio. */\nconst BarBrand = ({logo, wordmark, brandName, brandCaption, homePath, sx}) => {\n    const {Link: RouterLink} = useToolkitNavigation();\n    return (\n        <LayoutBrand component={RouterLink} to={homePath} aria-label={wordmark ? brandName : undefined}\n                    ownSx={[{alignItems: 'center', gap: 1.25, borderRadius: 1, flexShrink: 0, minWidth: 0, pr: 1, textAlign: 'left'}, sx]}>\n            {wordmark ? <Wordmark>{wordmark}</Wordmark> : (\n                <>\n                    {logo && <LayoutBrandLogo ownSx={{width: 28, height: 28, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</LayoutBrandLogo>}\n                    <LayoutBrandText ownSx={{minWidth: 0}}>\n                        <LayoutBrandName variant=\"subtitle2\" component=\"span\" noWrap ownSx={{display: 'block', fontWeight: 600, lineHeight: 1.3}}>{brandName}</LayoutBrandName>\n                        {/* el renglón chico hereda el color de la barra (sobre el naranja, el gris del texto secundario no se leía) */}\n                        {brandCaption && <LayoutBrandCaption variant=\"caption\" component=\"span\" noWrap ownSx={{display: 'block', lineHeight: 1.3, opacity: 0.8}}>{brandCaption}</LayoutBrandCaption>}\n                    </LayoutBrandText>\n                </>\n            )}\n        </LayoutBrand>\n    );\n};\n\n/**\n * El título en la barra: en escritorio, después del nombre de la app y solo cuando el título grande ya no se ve; en el\n * teléfono siempre (o el nombre de la app).\n */\nconst BarTitle = ({brandName}) => {\n    const {title, isTitleVisible} = usePageTitle();\n    return (\n        <LayoutTitleArea ownSx={{flexGrow: 1, minWidth: 0}}>\n            <LayoutPhoneTitle variant=\"subtitle1\" component=\"p\" noWrap ownSx={{display: 'block', [DESKTOP_MEDIA_QUERY]: {display: 'none'}, fontWeight: 600}}>{title ?? brandName}</LayoutPhoneTitle>\n            <Fade in={Boolean(title) && !isTitleVisible}>\n                <LayoutDesktopTitle variant=\"subtitle1\" component=\"p\" noWrap\n                            ownSx={{display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'block'}, fontWeight: 600, ml: 1, pl: 2, borderLeft: '1px solid color-mix(in srgb, currentColor 30%, transparent)'}}>\n                    {title}\n                </LayoutDesktopTitle>\n            </Fade>\n        </LayoutTitleArea>\n    );\n};\n\n/** El logo solo, arriba del menú encogido que hace de barra; lleva al inicio. */\nconst RailBrand = ({logo, brandName, homePath}) => {\n    const {Link: RouterLink} = useToolkitNavigation();\n    return (\n        <Tooltip title={brandName} placement=\"right\">\n            <LayoutRailBrand component={RouterLink} to={homePath} aria-label={brandName}\n                        ownSx={{width: 44, height: 44, borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>\n                <LayoutRailLogo ownSx={{width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</LayoutRailLogo>\n            </LayoutRailBrand>\n        </Tooltip>\n    );\n};\n\n/** La ☰ de escritorio: encoge el menú lateral a solo íconos o lo vuelve a abrir. */\nconst CollapseMenuButton = ({collapsed, onToggle}) => {\n    const {t} = useToolkitTranslation('layout');\n    const label = collapsed ? t('drawer.expand') : t('drawer.collapse');\n    return (\n        <Tooltip title={label}>\n            <LayoutCollapseButton aria-label={label} aria-expanded={!collapsed} onClick={onToggle} ownSx={{display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'inline-flex'}, color: 'inherit'}}>\n                {collapsed ? <MenuIcon /> : <MenuOpenIcon />}\n            </LayoutCollapseButton>\n        </Tooltip>\n    );\n};\n\nconst AppLayoutFrame = ({\n    logo, wordmark, brandName, brandCaption, homePath, menuItems, menuPosition, user, profilePath, accountMenuItems, onSignOut, isSigningOut, headerActions,\n    accountSettings, menuBadges, sidebarFooter, showFontSizeToggle, showLanguageToggle, showColorSchemeToggle, ribbons, isNavigating, defaultCollapsed, minimizeTabBarOnScroll, contentMaxWidth,\n    onMenuCollapse, onMobileMenuChange, onMobileTabsChange, children,\n}) => {\n    const {t} = useToolkitTranslation('layout');\n    const {useLocation} = useToolkitNavigation();\n    const {pathname} = useLocation();\n    const {collapsed, toggle} = useDrawerCollapsed(defaultCollapsed);\n    const [isMobileMenuOpen, setIsMobileMenuOpenState] = useState(false);\n    // cada cambio del menú también sale afuera (para medir, o para que el proyecto guarde la preferencia en su servidor)\n    const toggleCollapsed = () => {\n        toggle();\n        onMenuCollapse?.(!collapsed);\n    };\n    const setIsMobileMenuOpen = (isOpen) => {\n        setIsMobileMenuOpenState(isOpen);\n        onMobileMenuChange?.(isOpen);\n    };\n    const appBarRef = useAppBarHeightPublisher();\n    useNavigationTrail();\n\n    const theme = useTheme();\n    const isGlass = isGlassTheme(theme);\n    // la barra de pestañas del teléfono (estilo Apple): con vidrio, y con el minimalista en cápsulas (usesMobileTabBar);\n    // sin vidrio, o con el minimalista en franja, se queda la barra de MUI arriba con su cajón\n    const usesTabBar = usesMobileTabBar(theme);\n\n    const isSideMenu = menuPosition !== MENU_POSITION.top;\n    // con vidrio y el menú encogido, en escritorio la barra de arriba desaparece y se funde con el menú: la ☰ y el logo van\n    // arriba del menú y los ajustes y la cuenta abajo (lo pidió el autor). Si el proyecto trae avisos en la barra (ribbons),\n    // la barra se queda: los avisos no tendrían dónde ir\n    // la barra sin franja, en cápsulas (lo de omisión con vidrio y con el minimalista; TOP_BAR.band pide la franja). El\n    // estilo de Stackcraft sin vidrio se queda con su barra de siempre\n    const isMinimalLook = theme.toolkit?.look === THEME_LOOK.minimal;\n    const usesBarCapsules = (isGlass || isMinimalLook) && theme.toolkit?.bar === TOP_BAR.capsules;\n    // con vidrio, o con cápsulas, la barra y el menú lateral van a GLASS_PANEL_GAP_PIXELS de la orilla: la columna del menú\n    // mide eso de más. OJO: con el minimalista en cápsulas era 0 y las cápsulas quedaban pegadas arriba (a 4 px) y el menú\n    // pegado a la izquierda (lo reportó el autor; medido en Chrome)\n    const panelGap = isGlass || usesBarCapsules ? GLASS_PANEL_GAP_PIXELS : 0;\n    // con cápsulas no se funde: no hay franja que esconder, y la cuenta y los ajustes se quedan arriba en su cápsula en\n    // lugar de bajar al pie del menú encogido (lo pidió el autor)\n    const isBarMerged = isGlass && isSideMenu && collapsed && !ribbons && !usesBarCapsules;\n    const drawerWidth = collapsed ? DRAWER_WIDTH_COLLAPSED : DRAWER_WIDTH_EXPANDED;\n    const activeItem = activeMenuItemOf(menuItems, pathname);\n    const sideMenuProps = {logo, wordmark, brandName, brandCaption, homePath, menuItems, activeItem, menuBadges, footer: sidebarFooter};\n    // el lugar de la barra donde caen las acciones de cada pantalla (BarActions); con la barra fundida con el menú no hay\n    // barra en escritorio y se quedan en la pantalla\n    const [barActionsSlot, setBarActionsSlot] = useState(null);\n    // en el teléfono con cápsulas no hay barra de arriba (la de pestañas va abajo): las acciones flotan arriba a la derecha\n    const usesPhoneFloatingActions = usesTabBar && usesBarCapsules;\n    const [phoneBarActionsSlot, setPhoneBarActionsSlot] = useState(null);\n    const barActions = useMemo(() => ({\n        slot: isBarMerged ? null : barActionsSlot,\n        phoneSlot: usesPhoneFloatingActions ? phoneBarActionsSlot : null,\n        usesCapsules: usesBarCapsules,\n    }), [isBarMerged, barActionsSlot, usesPhoneFloatingActions, phoneBarActionsSlot, usesBarCapsules]);\n\n    return (\n        <BarActionsSlotContext.Provider value={barActions}>\n        <LayoutRoot ownSx={[{display: 'flex', flexDirection: 'column', minHeight: '100vh', bgcolor: 'background.default'}, isGlass && ambientBackgroundOf]}>\n            <SkipToContentLink />\n            <GlassLensFilter />\n\n            {/* en cápsulas, lo que pasa por debajo de la barra se desenfoca en la orilla: debajo del menú lateral, que sigue nítido */}\n            {isGlass && usesBarCapsules && (\n                <LayoutScrollEdge aria-hidden=\"true\"\n                     ownSx={(theme) => ({\n                         ...scrollEdgeStylesOf(theme), display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'block'},\n                         position: 'fixed', top: 0, left: 0, right: 0, height: `calc(${APP_BAR_HEIGHT} + ${panelGap}px)`,\n                         zIndex: theme.zIndex.drawer - 1, pointerEvents: 'none',\n                     })} />\n            )}\n            {/* en cápsulas con vidrio la barra va transparente (color=\"transparent\": el tema no le pone vidrio) y cada grupo\n                lleva el suyo; con el minimalista se queda del color del fondo, que tapa lo que pasa por debajo */}\n            <LayoutBar ref={appBarRef} position=\"sticky\" color={isGlass && usesBarCapsules ? 'transparent' : undefined}\n                    ownSx={(theme) => ({\n                        pt: 'env(safe-area-inset-top)',\n                        // encima del menú lateral, como en el DashboardLayout de MUI\n                        zIndex: theme.zIndex.drawer + 1,\n                        // con vidrio flota: en escritorio arriba, separada de las orillas; en el teléfono ABAJO, en una cápsula,\n                        // como la barra de Safari en el iPhone (en el teléfono se veía cuadrada y pegada arriba; lo reportaron).\n                        // Abajo se suma la zona del gesto de inicio del iPhone (safe-area) a la separación\n                        ...(isGlass && {\n                            // en cápsulas no se recorta: la sombra de cada cápsula se saldría cortada\n                            overflow: usesBarCapsules ? 'visible' : 'hidden',\n                            [DESKTOP_MEDIA_QUERY]: {\n                                top: panelGap, mt: `${panelGap}px`, mx: `${panelGap}px`, width: 'auto',\n                                borderRadius: PANEL_RADIUS,\n                                // sin la raya de abajo de la barra fija: no hay franja que separar\n                                ...(usesBarCapsules && {borderBottom: 0, boxShadow: 'none'}),\n                                ...(isBarMerged && {display: 'none'}),\n                            },\n                        }),\n                        // el minimalista en cápsulas no flota (su barra es del color del fondo y tapa lo que pasa por debajo):\n                        // la separación de las orillas va por dentro, para que las cápsulas queden donde las del vidrio\n                        ...(!isGlass && usesBarCapsules && {\n                            [DESKTOP_MEDIA_QUERY]: {pt: `calc(env(safe-area-inset-top) + ${panelGap}px)`, px: `${panelGap}px`},\n                        }),\n                        // en el teléfono la barra de pestañas (MobileTabBar) la reemplaza: con ella van el menú y la cuenta\n                        ...(usesTabBar && {[PHONE_MEDIA_QUERY]: {display: 'none'}}),\n                    })}>\n                {/* a la izquierda, la ☰ queda alineada con los íconos del menú lateral (los dos a 32 px de su orilla) */}\n                <LayoutToolbar disableGutters ownSx={{minHeight: {xs: APP_BAR_HEIGHT_PIXELS, sm: APP_BAR_HEIGHT_PIXELS}, gap: 1, pl: {xs: 1.5, md: isSideMenu ? 1.5 : 3}, pr: {xs: 1.5, md: 3}}}>\n                    {/* la ☰ del teléfono va en la primera cápsula (en escritorio la de encoger el menú y el nombre). OJO: dentro de\n                        una cápsula, sin el margen negativo de «orilla de inicio» de MUI (-12 px): el botón quedaba pegado a la\n                        curva. Así su círculo queda concéntrico con la cápsula */}\n                    <BarGroup isCapsule={usesBarCapsules}>\n                        <LayoutMenuButton edge=\"start\" aria-label={t('drawer.open')} aria-expanded={isMobileMenuOpen} onClick={() => setIsMobileMenuOpen(true)}\n                                    ownSx={{display: 'inline-flex', [DESKTOP_MEDIA_QUERY]: {display: 'none'}, color: 'inherit', ...((isGlass || usesBarCapsules) && {ml: 0})}}>\n                            <MenuIcon />\n                        </LayoutMenuButton>\n                        {isSideMenu && <CollapseMenuButton collapsed={collapsed} onToggle={toggleCollapsed} />}\n                        <BarBrand logo={logo} wordmark={wordmark} brandName={brandName} brandCaption={brandCaption} homePath={homePath}\n                                  sx={isSideMenu ? {display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'flex'}} : {display: 'flex'}} />\n                    </BarGroup>\n                    {isSideMenu ? (\n                        <BarTitle brandName={brandName} />\n                    ) : (\n                        <>\n                            {/* el menú de arriba no sale en el teléfono: su cápsula tampoco (vacía se vería) */}\n                            <BarGroup isCapsule={usesBarCapsules} sx={{display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'flex'}}}>\n                                <TopMenu menuItems={menuItems} activeItem={activeItem} />\n                            </BarGroup>\n                            <LayoutSpacer ownSx={{flexGrow: 1}} />\n                        </>\n                    )}\n                    {/* las acciones de la pantalla abierta (BarActions, y las de PageHeading con cápsulas): cada grupo cae aquí,\n                        antes de la cuenta. Solo en escritorio: en el teléfono flotan arriba (phoneBarActionsSlot, en el contenido) */}\n                    <LayoutTools ref={setBarActionsSlot} ownSx={{display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'flex'}, alignItems: 'center', gap: 1, minWidth: 0}} />\n                    <BarGroup isCapsule={usesBarCapsules}>\n                        <HeaderTools headerActions={headerActions} accountSettings={accountSettings} showFontSizeToggle={showFontSizeToggle} showLanguageToggle={showLanguageToggle}\n                                     showColorSchemeToggle={showColorSchemeToggle} user={user} profilePath={profilePath} accountMenuItems={accountMenuItems}\n                                     onSignOut={onSignOut} isSigningOut={isSigningOut} />\n                    </BarGroup>\n                </LayoutToolbar>\n                {ribbons}\n                {/* con la barra de pestañas el aviso de versión nueva flota aparte, en su cápsula (en el teléfono esta barra no\n                    se ve); sin ella, franja dentro de la barra */}\n                {!usesTabBar && <NewBuildNotice />}\n                {isNavigating && (\n                    <LayoutProgress aria-label={t('navigating')} color=\"inherit\"\n                                    ownSx={{position: 'absolute', bottom: 0, left: 0, right: 0, height: NAVIGATING_BAR_PIXELS}} />\n                )}\n            </LayoutBar>\n            {usesTabBar && <NewBuildNotice variant={NEW_BUILD_NOTICE_VARIANT.floating} />}\n            {usesTabBar && (\n                <MobileTabBar menuItems={menuItems} activeItem={activeItem} menuBadges={menuBadges} moreFooter={sidebarFooter} minimizeOnScroll={minimizeTabBarOnScroll}\n                              onPinnedTabsChange={onMobileTabsChange}\n                              account={(\n                                  <HeaderTools headerActions={headerActions} accountSettings={accountSettings} showFontSizeToggle={showFontSizeToggle}\n                                               showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle} user={user}\n                                               profilePath={profilePath} accountMenuItems={accountMenuItems} onSignOut={onSignOut} isSigningOut={isSigningOut} />\n                              )} />\n            )}\n\n            <LayoutBody ownSx={{display: 'flex', flexGrow: 1, minWidth: 0}}>\n                {isSideMenu && (\n                    <LayoutDrawer variant=\"permanent\"\n                            ownSx={(theme) => ({\n                                display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'block'}, width: drawerWidth + panelGap, flexShrink: 0, whiteSpace: 'nowrap',\n                                transition: drawerTransitionOf(theme),\n                                '& .MuiDrawer-paper': {\n                                    width: drawerWidth, left: panelGap, boxSizing: 'border-box', overflowX: 'hidden', transition: drawerTransitionOf(theme, ['width']),\n                                    // justo debajo de la barra (su alto real, con avisos o sin ellos) y hasta abajo; si la barra se\n                                    // fundió con el menú, de arriba a abajo\n                                    ...(isBarMerged\n                                        ? {top: panelGap, height: `calc(100% - ${panelGap * 2}px)`}\n                                        : {top: `calc(${APP_BAR_HEIGHT} + ${panelGap}px)`, height: `calc(100% - ${APP_BAR_HEIGHT} - ${panelGap * 2}px)`}),\n                                    // el panel flotante: separado de las orillas y sin la línea de la derecha (lo separa su brillo).\n                                    // Encogido es una cápsula (radio de la mitad de su ancho), como las barras de pestañas de vidrio\n                                    ...(isGlass && {\n                                        border: 0,\n                                        borderRadius: PANEL_RADIUS,\n                                    }),\n                                },\n                            })}>\n                        <SideMenu {...sideMenuProps} showBrand={false} collapsed={collapsed}\n                                  railTop={isBarMerged ? (\n                                      <>\n                                          <CollapseMenuButton collapsed={collapsed} onToggle={toggleCollapsed} />\n                                          {logo && <RailBrand logo={logo} brandName={brandName} homePath={homePath} />}\n                                      </>\n                                  ) : undefined}\n                                  railBottom={isBarMerged ? (\n                                      <HeaderTools vertical headerActions={headerActions} accountSettings={accountSettings} showFontSizeToggle={showFontSizeToggle}\n                                                   showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle} user={user}\n                                                   profilePath={profilePath} accountMenuItems={accountMenuItems} onSignOut={onSignOut}\n                                                   isSigningOut={isSigningOut} />\n                                  ) : undefined} />\n                    </LayoutDrawer>\n                )}\n\n                <LayoutMain component=\"main\" id={MAIN_CONTENT_ID} tabIndex={-1}\n                     ownSx={(theme) => ({\n                         flexGrow: 1, minWidth: 0, outline: 'none', px: {xs: 2, md: 3, lg: 4}, pt: 3, pb: 6,\n                         // con la barra de pestañas abajo (teléfono): arriba, lugar para la hora y la cámara del iPhone; abajo,\n                         // lugar para que la barra (que flota a GLASS_PANEL_GAP_PIXELS) no tape el final de la página\n                         ...(usesTabBar && {\n                             [PHONE_MEDIA_QUERY]: {\n                                 pt: `calc(${theme.spacing(3)} + env(safe-area-inset-top))`,\n                                 pb: `calc(${MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait + GLASS_PANEL_GAP_PIXELS * 2}px + env(safe-area-inset-bottom) + ${theme.spacing(3)} + var(${FLOATING_BOTTOM_SPACE_CSS_VARIABLE}, 0px))`,\n                             },\n                         }),\n                     })}>\n                    {/* teléfono con cápsulas: el renglón de las acciones de la pantalla, arriba a la derecha. Va pegado (sticky)\n                        y no fijo: así ocupa su lugar arriba de la página (no tapa las migas ni el título) y al bajar se queda\n                        flotando. Vacío no se ve. Solo las cápsulas reciben clics: el hueco de la izquierda deja pasar el dedo\n                        a lo de abajo */}\n                    {usesPhoneFloatingActions && (\n                        <LayoutPhoneSlot ref={setPhoneBarActionsSlot} data-phone-bar-actions=\"\"\n                             ownSx={(theme) => ({\n                                 display: 'none',\n                                 [PHONE_MEDIA_QUERY]: {\n                                     display: 'flex', '&:empty': {display: 'none'},\n                                     position: 'sticky', top: `calc(env(safe-area-inset-top) + ${GLASS_PANEL_GAP_PIXELS}px)`, zIndex: theme.zIndex.appBar,\n                                     justifyContent: 'flex-end', alignItems: 'center', gap: 1, mb: 2,\n                                     pointerEvents: 'none', '& > *': {pointerEvents: 'auto'},\n                                 },\n                             })} />\n                    )}\n                    <LayoutContent ownSx={{maxWidth: contentMaxWidth, mx: 'auto'}}>{children}</LayoutContent>\n                </LayoutMain>\n            </LayoutBody>\n\n            {/* el cajón del teléfono (los dos estilos): con el logo arriba, se cierra al elegir una pantalla */}\n            <LayoutPhoneDrawer variant=\"temporary\" open={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} ModalProps={{keepMounted: true}}\n                    ownSx={{[DESKTOP_MEDIA_QUERY]: {display: 'none'}}}\n                    slotProps={{paper: {sx: {width: DRAWER_WIDTH_EXPANDED, boxSizing: 'border-box', pt: 'env(safe-area-inset-top)', pb: 'env(safe-area-inset-bottom)'}}}}>\n                <SideMenu {...sideMenuProps} collapsed={false} onNavigate={() => setIsMobileMenuOpen(false)} />\n            </LayoutPhoneDrawer>\n        </LayoutRoot>\n        </BarActionsSlotContext.Provider>\n    );\n};\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.logo] el logo chico (28 px), en la barra junto al nombre y en el cajón del teléfono\n * @param {import('react').ReactNode | {light?: import('react').ReactNode, dark?: import('react').ReactNode}} [props.wordmark] el logo\n *     ancho, la marca con su nombre en una sola imagen (como el de muchas empresas), o uno para cada modo ({light, dark}: el de\n *     color en claro y el blanco en oscuro): va en lugar del logo y el nombre en la barra y arriba del menú del teléfono, a 24 px de alto. Con el menú\n *     encogido se queda el logo chico (logo), si lo hay. brandName sigue siendo su nombre para el lector de pantalla\n * @param {string} [props.brandName] el nombre de la app; por omisión el appName de ToolkitProvider\n * @param {string} [props.brandCaption] el renglón chico debajo del nombre («Panel de administración»)\n * @param {string} [props.homePath] por omisión '/'\n * @param {object[]} [props.menuItems] lo que regresa composeMenu\n * @param {'side'|'top'} [props.menuPosition] por omisión 'side' (MENU_POSITION)\n * @param {{name: string, email?: string, subtitle?: string, avatarUrl?: string}|null} [props.user] quién está dentro\n * @param {string} [props.profilePath] la ruta de Mi perfil\n * @param {object[]} [props.accountMenuItems] renglones propios en el menú de la cuenta ({to | onClick, label | labelKey, Icon})\n * @param {() => void} [props.onSignOut] sin él no sale «Salir» (una app sin sesión)\n * @param {boolean} [props.isSigningOut]\n * @param {import('react').ReactNode} [props.headerActions] botones propios en la barra, antes de la cuenta\n * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey de cada entrada del menú\n *     (useMenuBadges): lo pendiente de cada pantalla, como numerito\n * @param {import('react').ReactNode} [props.accountSettings] ajustes propios del proyecto dentro del menú de la cuenta, debajo de\n *     letra, idioma y claro u oscuro (con SettingSection, para que se vean igual)\n * @param {import('react').ReactNode} [props.sidebarFooter] lo de abajo del menú lateral (una tarjeta de ayuda…)\n * @param {boolean} [props.showFontSizeToggle] por omisión sí\n * @param {boolean} [props.showLanguageToggle] por omisión sí\n * @param {boolean} [props.showColorSchemeToggle] por omisión sí\n * @param {import('react').ReactNode} [props.ribbons] avisos propios dentro de la barra\n * @param {boolean} [props.isNavigating] la pantalla siguiente se está descargando (react-router: useIsNavigating)\n * @param {boolean} [props.defaultCollapsed] el menú lateral empieza encogido (la persona lo cambia y se recuerda)\n * @param {boolean} [props.minimizeTabBarOnScroll] en el teléfono con vidrio, la barra de pestañas se encoge al leer hacia\n *     abajo y regresa al subir (como iOS 26); por omisión sí\n * @param {number|string} [props.contentMaxWidth] por omisión 1400\n * @param {(collapsed: boolean) => void} [props.onMenuCollapse] la persona encogió (true) o abrió (false) el menú lateral\n * @param {(isOpen: boolean) => void} [props.onMobileMenuChange] se abrió o se cerró el menú del teléfono (el cajón)\n * @param {(keys: string[]|null) => void} [props.onMobileTabsChange] la persona eligió sus pestañas del teléfono (las llaves\n *     de menuItemKeyOf; null: regresó a las de omisión). Se recuerdan en el navegador; con esto el proyecto las puede guardar\n *     en su servidor\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete (para todo el marco)\n * @param {import('react').ReactNode} props.children el contenido\n */\nexport const AppLayout = (props) => {\n    // lo que el proyecto puso en su tema (components.CalcitaAppLayout.defaultProps) y encima lo que llega aquí\n    const {\n    logo, wordmark, brandName, brandCaption, homePath = '/', menuItems = [], menuPosition = MENU_POSITION.side, user = null, profilePath, accountMenuItems = [], onSignOut,\n    isSigningOut = false, headerActions, accountSettings, menuBadges, sidebarFooter, showFontSizeToggle = true, showLanguageToggle = true, showColorSchemeToggle = true, ribbons,\n    isNavigating = false, defaultCollapsed = false, minimizeTabBarOnScroll = true, contentMaxWidth = 1400, onMenuCollapse, onMobileMenuChange, onMobileTabsChange,\n    texts, children,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {appName} = useToolkitSettings();\n    // un ícono ya pintado (icon) se vuelve componente aquí, una vez: las piezas del menú pintan siempre Icon\n    const shownMenuItems = useMemo(() => menuItemsWithIconsOf(menuItems), [menuItems]);\n    const appMenu = useMemo(() => ({menuItems: shownMenuItems}), [shownMenuItems]);\n    // los textos del marco llegan a todas sus piezas (la cuenta, el menú, las pestañas del teléfono), cada una lee los suyos\n    return (\n        <ComponentTexts namespace=\"layout\" texts={texts}>\n            <PageTitleProvider>\n                <AppMenuContext.Provider value={appMenu}>\n                    <AppLayoutFrame logo={logo} wordmark={wordmark} brandName={brandName ?? appName} brandCaption={brandCaption} homePath={homePath} menuItems={shownMenuItems} menuPosition={menuPosition}\n                                    user={user} profilePath={profilePath} accountMenuItems={accountMenuItems} onSignOut={onSignOut} isSigningOut={isSigningOut}\n                                    headerActions={headerActions} accountSettings={accountSettings} menuBadges={menuBadges} sidebarFooter={sidebarFooter} showFontSizeToggle={showFontSizeToggle}\n                                    showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle} ribbons={ribbons}\n                                    isNavigating={isNavigating} defaultCollapsed={defaultCollapsed} minimizeTabBarOnScroll={minimizeTabBarOnScroll}\n                                    contentMaxWidth={contentMaxWidth} onMenuCollapse={onMenuCollapse} onMobileMenuChange={onMobileMenuChange}\n                                    onMobileTabsChange={onMobileTabsChange}>\n                        {children}\n                    </AppLayoutFrame>\n                </AppMenuContext.Provider>\n            </PageTitleProvider>\n        </ComponentTexts>\n    );\n};\n"],"names":["theme"],"mappings":"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"}
+{"version":3,"file":"AppLayout.js","sources":["../../src/appShell/AppLayout.jsx"],"sourcesContent":["// El marco de las pantallas con sesión, al estilo de las plantillas de MUI (y del marco de walk-ot). Dos estilos de\n// barra con las mismas props, para que el proyecto (o el `init` del CLI) solo elija:\n//\n//   menuPosition=\"side\" (por omisión)                 menuPosition=\"top\" (apps de pocos módulos)\n//   ┌──────────────────────────────────────────┐       ┌──────────────────────────────────────────┐\n//   │ ☰ Logo Nombre · Título al deslizar · ⚙ (A)│       │ Logo · Inicio Pedidos Clientes ▾ · ⚙ (A) │\n//   ├────────┬─────────────────────────────────┤       ├──────────────────────────────────────────┤\n//   │ Menú   │ contenido                       │       │ contenido                                │\n//   │ por    │                                 │       │                                          │\n//   │ secc.  │                                 │       │                                          │\n//   └────────┴─────────────────────────────────┘       └──────────────────────────────────────────┘\n//\n// En el teléfono los dos son iguales: hamburguesa, título y ajustes en la barra; el menú sale en un cajón con el logo.\n//\n// Lo que trae, con su porqué:\n//   - La barra va a todo lo ancho, con el logo y el nombre de la app a la izquierda, y el menú lateral debajo de ella\n//     (como el DashboardLayout de MUI). La ☰ de la barra encoge el menú a solo íconos y lo recuerda (useDrawerCollapsed);\n//     antes era un botón montado en la orilla del menú y se encimaba con él.\n//   - El título de la página sube a la barra cuando su título grande sale de la vista (pageTitle.jsx).\n//   - Escritorio y teléfono se eligen con CSS, no con useMediaQuery: el servidor (Next.js) ya pinta lo correcto.\n//   - Dentro de la barra, para que se queden pegados al deslizar: los avisos del proyecto (ribbons), el de versión nueva\n//     (NewBuildNotice; con vidrio flota aparte en su cápsula, ver NewBuildNotice.jsx) y la rayita de «cargando la pantalla»\n//     (isNavigating). La barra publica su alto real, y el menú lateral empieza justo debajo de ella aunque crezca con un aviso.\n//   - Con vidrio, en el teléfono la barra flota ABAJO en una cápsula, como la de Safari en el iPhone; y en escritorio, con\n//     el menú encogido, la barra desaparece y se funde con el menú (☰ y logo arriba, ajustes y cuenta abajo).\n//   - El primer Tab lleva a «Saltar al contenido» (WCAG 2.4.1) y el contenido es <main>. Respeta el área segura del\n//     iPhone (la muesca) cuando la app corre instalada.\n//   - Huecos para extender sin tocar el framework: headerActions, sidebarFooter, accountMenuItems, accountSettings, ribbons.\n//   - Los ajustes de la app (letra, idioma, claro u oscuro y los del proyecto) van DENTRO del menú de la cuenta, no sueltos\n//     en la barra (HeaderTools).\n//   - El menú queda al alcance de las páginas (appMenuContext): PageHeading arma sus migas sola.\n//   - Con el vidrio del tema (createToolkitTheme({glass: true})): el lienzo lleva manchas de color, y en escritorio la\n//     barra y el menú lateral flotan a 8 px de la orilla y entre ellos, con esquinas redondas, para que el contenido pase\n//     por detrás y se vea desenfocado; encogido, el menú es una cápsula. En el teléfono la barra sigue de orilla a orilla\n//     (como en iOS). Sin vidrio, todo igual que siempre: el marco lo sabe por el tema (isGlassTheme), sin otra prop.\n//   - Con vidrio y con el minimalista la barra no lleva franja, como las ventanas de macOS Tahoe (TOP_BAR.capsules, lo de\n//     omisión): la ☰ con el nombre, el menú de arriba y la cuenta van cada uno en su cápsula, y el título queda suelto.\n//     Con vidrio las cápsulas son de vidrio y el contenido pasa por debajo, desenfocado en la orilla (scrollEdgeStylesOf);\n//     con el minimalista son bloques del tono de las tarjetas sobre la barra del color del fondo, también en el teléfono.\n//     Con cápsulas el menú encogido ya no se funde con la barra: la cuenta y los ajustes se quedan arriba. Con\n//     bar: TOP_BAR.band, la franja de lado a lado. Mismo alto y mismo lugar las dos: el menú lateral y las páginas no se\n//     mueven.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAppLayout con defaultProps y\n// styleOverrides de sus partes: skipLink, brand, brandLogo, brandText, brandName, brandCaption, titleArea, phoneTitle,\n// desktopTitle, railBrand, railLogo, collapseButton, root, scrollEdge, bar, toolbar, menuButton, spacer, tools,\n// progress, body, drawer, main, phoneSlot, content, phoneDrawer.\n//\n// Lo renderiza la app: arrow (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation, useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport AppBar from '@mui/material/AppBar';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Drawer from '@mui/material/Drawer';\nimport Fade from '@mui/material/Fade';\nimport IconButton from '@mui/material/IconButton';\nimport LinearProgress from '@mui/material/LinearProgress';\nimport Link from '@mui/material/Link';\nimport Toolbar from '@mui/material/Toolbar';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport MenuOpenIcon from '@mui/icons-material/MenuOpen';\n\nimport {AppMenuContext} from '@/appShell/appMenuContext.js';\nimport BarCapsule from '@/appShell/BarCapsule.jsx';\nimport {BarActionsSlotContext} from '@/appShell/barActionsSlot.js';\nimport HeaderTools from '@/appShell/HeaderTools.jsx';\nimport MobileTabBar from '@/appShell/MobileTabBar.jsx';\nimport Wordmark from '@/appShell/Wordmark.jsx';\nimport {PageTitleProvider, usePageTitle} from '@/appShell/pageTitle.jsx';\nimport {\n    APP_BAR_HEIGHT_PIXELS, DESKTOP_MEDIA_QUERY, DRAWER_WIDTH_COLLAPSED, DRAWER_WIDTH_EXPANDED, GLASS_PANEL_GAP_PIXELS, MAIN_CONTENT_ID,\n    FLOATING_BOTTOM_SPACE_CSS_VARIABLE, MOBILE_TAB_BAR_HEIGHT_PIXELS, PHONE_MEDIA_QUERY, drawerTransitionOf,\n} from '@/appShell/shellSizes.js';\nimport SideMenu from '@/appShell/SideMenu.jsx';\nimport {usesMobileTabBar} from '@/appShell/tabBarRule.js';\nimport TopMenu from '@/appShell/TopMenu.jsx';\nimport {useDrawerCollapsed} from '@/appShell/useDrawerCollapsed.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\nimport NewBuildNotice, {NEW_BUILD_NOTICE_VARIANT} from '@/feedback/NewBuildNotice.jsx';\nimport {activeMenuItemOf, menuItemsWithIconsOf} from '@/navigation/appMenu.js';\nimport {useNavigationTrail} from '@/navigationTrail.js';\nimport {THEME_LOOK, TOP_BAR} from '@/theme/createToolkitTheme.js';\nimport {PANEL_RADIUS, ambientBackgroundOf, isGlassTheme, scrollEdgeStylesOf} from '@/theme/glassSurface.js';\nimport GlassLensFilter from '@/ui/layout/GlassLensFilter.jsx';\nimport {APP_BAR_HEIGHT, useAppBarHeightPublisher} from '@/ui/layout/appBarHeight.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAppLayout)\nconst THEME_NAME = 'CalcitaAppLayout';\nconst LayoutSkipLink = piecePart(THEME_NAME, 'SkipLink', Link);\nconst LayoutBrand = piecePart(THEME_NAME, 'Brand', ButtonBase);\nconst LayoutBrandLogo = piecePart(THEME_NAME, 'BrandLogo', Box);\nconst LayoutBrandText = piecePart(THEME_NAME, 'BrandText', Box);\nconst LayoutBrandName = piecePart(THEME_NAME, 'BrandName', Typography);\nconst LayoutBrandCaption = piecePart(THEME_NAME, 'BrandCaption', Typography);\nconst LayoutTitleArea = piecePart(THEME_NAME, 'TitleArea', Box);\nconst LayoutPhoneTitle = piecePart(THEME_NAME, 'PhoneTitle', Typography);\nconst LayoutDesktopTitle = piecePart(THEME_NAME, 'DesktopTitle', Typography);\nconst LayoutRailBrand = piecePart(THEME_NAME, 'RailBrand', ButtonBase);\nconst LayoutRailLogo = piecePart(THEME_NAME, 'RailLogo', Box);\nconst LayoutCollapseButton = piecePart(THEME_NAME, 'CollapseButton', IconButton);\nconst LayoutRoot = piecePart(THEME_NAME, 'Root', Box);\nconst LayoutScrollEdge = piecePart(THEME_NAME, 'ScrollEdge', Box);\nconst LayoutBar = piecePart(THEME_NAME, 'Bar', AppBar);\nconst LayoutToolbar = piecePart(THEME_NAME, 'Toolbar', Toolbar);\nconst LayoutMenuButton = piecePart(THEME_NAME, 'MenuButton', IconButton);\nconst LayoutSpacer = piecePart(THEME_NAME, 'Spacer', Box);\nconst LayoutTools = piecePart(THEME_NAME, 'Tools', Box);\nconst LayoutProgress = piecePart(THEME_NAME, 'Progress', LinearProgress);\nconst LayoutBody = piecePart(THEME_NAME, 'Body', Box);\nconst LayoutDrawer = piecePart(THEME_NAME, 'Drawer', Drawer);\nconst LayoutMain = piecePart(THEME_NAME, 'Main', Box);\nconst LayoutPhoneSlot = piecePart(THEME_NAME, 'PhoneSlot', Box);\nconst LayoutContent = piecePart(THEME_NAME, 'Content', Box);\nconst LayoutPhoneDrawer = piecePart(THEME_NAME, 'PhoneDrawer', Drawer);\n\n/** Los dos estilos de barra. */\nexport const MENU_POSITION = Object.freeze({side: 'side', top: 'top'});\n\nconst NAVIGATING_BAR_PIXELS = 2;\n\n/**\n * Un grupo de la barra: con la barra en cápsulas, su cápsula (BarCapsule: de vidrio, o con el minimalista un bloque del\n * tono de las tarjetas); con la franja, sus piezas tal cual (sin caja de más, para que la franja se quede idéntica).\n */\nconst BarGroup = ({isCapsule, sx, children}) => {\n    if (!isCapsule) {\n        return children;\n    }\n    // presentation: lo de adentro (la ☰, el nombre, la cuenta) ya se anuncia solo; el grupo es solo la forma\n    return <BarCapsule role=\"presentation\" sx={sx}>{children}</BarCapsule>;\n};\n\n/** «Saltar al contenido»: escondido arriba hasta que llega el foco del teclado. */\nconst SkipToContentLink = () => {\n    const {t} = useToolkitTranslation('layout');\n    return (\n        <LayoutSkipLink href={`#${MAIN_CONTENT_ID}`} ownSx={{\n            position: 'absolute', left: 8, top: -48, zIndex: (theme) => theme.zIndex.tooltip + 1, bgcolor: 'background.paper',\n            px: 1.5, py: 0.75, borderRadius: 1, boxShadow: 3, '&:focus': {top: 8},\n        }}>\n            {t('skipToContent')}\n        </LayoutSkipLink>\n    );\n};\n\n/** El logo y el nombre de la app en la barra (con su renglón chico, si lo hay), o el logo ancho; lleva al inicio. */\nconst BarBrand = ({logo, wordmark, brandName, brandCaption, homePath, sx}) => {\n    const {Link: RouterLink} = useToolkitNavigation();\n    return (\n        <LayoutBrand component={RouterLink} to={homePath} aria-label={wordmark ? brandName : undefined}\n                    ownSx={[{alignItems: 'center', gap: 1.25, borderRadius: 1, flexShrink: 0, minWidth: 0, pr: 1, textAlign: 'left'}, sx]}>\n            {wordmark ? <Wordmark>{wordmark}</Wordmark> : (\n                <>\n                    {logo && <LayoutBrandLogo ownSx={{width: 28, height: 28, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</LayoutBrandLogo>}\n                    <LayoutBrandText ownSx={{minWidth: 0}}>\n                        <LayoutBrandName variant=\"subtitle2\" component=\"span\" noWrap ownSx={{display: 'block', fontWeight: 600, lineHeight: 1.3}}>{brandName}</LayoutBrandName>\n                        {/* el renglón chico hereda el color de la barra (sobre el naranja, el gris del texto secundario no se leía) */}\n                        {brandCaption && <LayoutBrandCaption variant=\"caption\" component=\"span\" noWrap ownSx={{display: 'block', lineHeight: 1.3, opacity: 0.8}}>{brandCaption}</LayoutBrandCaption>}\n                    </LayoutBrandText>\n                </>\n            )}\n        </LayoutBrand>\n    );\n};\n\n/**\n * El título en la barra: en escritorio, después del nombre de la app y solo cuando el título grande ya no se ve; en el\n * teléfono siempre (o el nombre de la app).\n */\nconst BarTitle = ({brandName}) => {\n    const {title, isTitleVisible} = usePageTitle();\n    return (\n        <LayoutTitleArea ownSx={{flexGrow: 1, minWidth: 0}}>\n            <LayoutPhoneTitle variant=\"subtitle1\" component=\"p\" noWrap ownSx={{display: 'block', [DESKTOP_MEDIA_QUERY]: {display: 'none'}, fontWeight: 600}}>{title ?? brandName}</LayoutPhoneTitle>\n            <Fade in={Boolean(title) && !isTitleVisible}>\n                <LayoutDesktopTitle variant=\"subtitle1\" component=\"p\" noWrap\n                            ownSx={{display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'block'}, fontWeight: 600, ml: 1, pl: 2, borderLeft: '1px solid color-mix(in srgb, currentColor 30%, transparent)'}}>\n                    {title}\n                </LayoutDesktopTitle>\n            </Fade>\n        </LayoutTitleArea>\n    );\n};\n\n/** El logo solo, arriba del menú encogido que hace de barra; lleva al inicio. */\nconst RailBrand = ({logo, brandName, homePath}) => {\n    const {Link: RouterLink} = useToolkitNavigation();\n    return (\n        <Tooltip title={brandName} placement=\"right\">\n            <LayoutRailBrand component={RouterLink} to={homePath} aria-label={brandName}\n                        ownSx={{width: 44, height: 44, borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>\n                <LayoutRailLogo ownSx={{width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</LayoutRailLogo>\n            </LayoutRailBrand>\n        </Tooltip>\n    );\n};\n\n/** La ☰ de escritorio: encoge el menú lateral a solo íconos o lo vuelve a abrir. */\nconst CollapseMenuButton = ({collapsed, onToggle}) => {\n    const {t} = useToolkitTranslation('layout');\n    const label = collapsed ? t('drawer.expand') : t('drawer.collapse');\n    return (\n        <Tooltip title={label}>\n            <LayoutCollapseButton aria-label={label} aria-expanded={!collapsed} onClick={onToggle} ownSx={{display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'inline-flex'}, color: 'inherit'}}>\n                {collapsed ? <MenuIcon /> : <MenuOpenIcon />}\n            </LayoutCollapseButton>\n        </Tooltip>\n    );\n};\n\nconst AppLayoutFrame = ({\n    logo, wordmark, brandName, brandCaption, homePath, menuItems, menuPosition, user, profilePath, accountMenuItems, onSignOut, isSigningOut, headerActions,\n    accountSettings, menuBadges, sidebarFooter, showFontSizeToggle, showLanguageToggle, showColorSchemeToggle, ribbons, isNavigating, defaultCollapsed, minimizeTabBarOnScroll, contentMaxWidth,\n    onMenuCollapse, onMobileMenuChange, onMobileTabsChange, children,\n}) => {\n    const {t} = useToolkitTranslation('layout');\n    const {useLocation} = useToolkitNavigation();\n    const {pathname} = useLocation();\n    const {collapsed, toggle} = useDrawerCollapsed(defaultCollapsed);\n    const [isMobileMenuOpen, setIsMobileMenuOpenState] = useState(false);\n    // cada cambio del menú también sale afuera (para medir, o para que el proyecto guarde la preferencia en su servidor)\n    const toggleCollapsed = () => {\n        toggle();\n        onMenuCollapse?.(!collapsed);\n    };\n    const setIsMobileMenuOpen = (isOpen) => {\n        setIsMobileMenuOpenState(isOpen);\n        onMobileMenuChange?.(isOpen);\n    };\n    const appBarRef = useAppBarHeightPublisher();\n    useNavigationTrail();\n\n    const theme = useTheme();\n    const isGlass = isGlassTheme(theme);\n    // la barra de pestañas del teléfono (estilo Apple): con vidrio, y con el minimalista en cápsulas (usesMobileTabBar);\n    // sin vidrio, o con el minimalista en franja, se queda la barra de MUI arriba con su cajón\n    const usesTabBar = usesMobileTabBar(theme);\n\n    const isSideMenu = menuPosition !== MENU_POSITION.top;\n    // con vidrio y el menú encogido, en escritorio la barra de arriba desaparece y se funde con el menú: la ☰ y el logo van\n    // arriba del menú y los ajustes y la cuenta abajo (lo pidió el autor). Si el proyecto trae avisos en la barra (ribbons),\n    // la barra se queda: los avisos no tendrían dónde ir\n    // la barra sin franja, en cápsulas (lo de omisión con vidrio y con el minimalista; TOP_BAR.band pide la franja). El\n    // estilo de Stackcraft sin vidrio se queda con su barra de siempre\n    const isMinimalLook = theme.toolkit?.look === THEME_LOOK.minimal;\n    const usesBarCapsules = (isGlass || isMinimalLook) && theme.toolkit?.bar === TOP_BAR.capsules;\n    // con vidrio, o con cápsulas, la barra y el menú lateral van a GLASS_PANEL_GAP_PIXELS de la orilla: la columna del menú\n    // mide eso de más. OJO: con el minimalista en cápsulas era 0 y las cápsulas quedaban pegadas arriba (a 4 px) y el menú\n    // pegado a la izquierda (lo reportó el autor; medido en Chrome)\n    const panelGap = isGlass || usesBarCapsules ? GLASS_PANEL_GAP_PIXELS : 0;\n    // con cápsulas no se funde: no hay franja que esconder, y la cuenta y los ajustes se quedan arriba en su cápsula en\n    // lugar de bajar al pie del menú encogido (lo pidió el autor)\n    const isBarMerged = isGlass && isSideMenu && collapsed && !ribbons && !usesBarCapsules;\n    const drawerWidth = collapsed ? DRAWER_WIDTH_COLLAPSED : DRAWER_WIDTH_EXPANDED;\n    const activeItem = activeMenuItemOf(menuItems, pathname);\n    const sideMenuProps = {logo, wordmark, brandName, brandCaption, homePath, menuItems, activeItem, menuBadges, footer: sidebarFooter};\n    // el lugar de la barra donde caen las acciones de cada pantalla (BarActions); con la barra fundida con el menú no hay\n    // barra en escritorio y se quedan en la pantalla\n    const [barActionsSlot, setBarActionsSlot] = useState(null);\n    // en el teléfono con cápsulas no hay barra de arriba (la de pestañas va abajo): las acciones flotan arriba a la derecha\n    const usesPhoneFloatingActions = usesTabBar && usesBarCapsules;\n    const [phoneBarActionsSlot, setPhoneBarActionsSlot] = useState(null);\n    const barActions = useMemo(() => ({\n        slot: isBarMerged ? null : barActionsSlot,\n        phoneSlot: usesPhoneFloatingActions ? phoneBarActionsSlot : null,\n        usesCapsules: usesBarCapsules,\n    }), [isBarMerged, barActionsSlot, usesPhoneFloatingActions, phoneBarActionsSlot, usesBarCapsules]);\n\n    return (\n        <BarActionsSlotContext.Provider value={barActions}>\n        <LayoutRoot ownSx={[{display: 'flex', flexDirection: 'column', minHeight: '100vh', bgcolor: 'background.default'}, isGlass && ambientBackgroundOf]}>\n            <SkipToContentLink />\n            <GlassLensFilter />\n\n            {/* en cápsulas, lo que pasa por debajo de la barra se desenfoca en la orilla: debajo del menú lateral, que sigue nítido */}\n            {isGlass && usesBarCapsules && (\n                <LayoutScrollEdge aria-hidden=\"true\"\n                     ownSx={(theme) => ({\n                         ...scrollEdgeStylesOf(theme), display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'block'},\n                         position: 'fixed', top: 0, left: 0, right: 0, height: `calc(${APP_BAR_HEIGHT} + ${panelGap}px)`,\n                         zIndex: theme.zIndex.drawer - 1, pointerEvents: 'none',\n                     })} />\n            )}\n            {/* en cápsulas con vidrio la barra va transparente (color=\"transparent\": el tema no le pone vidrio) y cada grupo\n                lleva el suyo; con el minimalista se queda del color del fondo, que tapa lo que pasa por debajo */}\n            <LayoutBar ref={appBarRef} position=\"sticky\" color={isGlass && usesBarCapsules ? 'transparent' : undefined}\n                    ownSx={(theme) => ({\n                        pt: 'env(safe-area-inset-top)',\n                        // encima del menú lateral, como en el DashboardLayout de MUI\n                        zIndex: theme.zIndex.drawer + 1,\n                        // con vidrio flota: en escritorio arriba, separada de las orillas; en el teléfono ABAJO, en una cápsula,\n                        // como la barra de Safari en el iPhone (en el teléfono se veía cuadrada y pegada arriba; lo reportaron).\n                        // Abajo se suma la zona del gesto de inicio del iPhone (safe-area) a la separación\n                        ...(isGlass && {\n                            // en cápsulas no se recorta: la sombra de cada cápsula se saldría cortada\n                            overflow: usesBarCapsules ? 'visible' : 'hidden',\n                            [DESKTOP_MEDIA_QUERY]: {\n                                top: panelGap, mt: `${panelGap}px`, mx: `${panelGap}px`, width: 'auto',\n                                borderRadius: PANEL_RADIUS,\n                                // sin la raya de abajo de la barra fija: no hay franja que separar\n                                ...(usesBarCapsules && {borderBottom: 0, boxShadow: 'none'}),\n                                ...(isBarMerged && {display: 'none'}),\n                            },\n                        }),\n                        // el minimalista en cápsulas no flota (su barra es del color del fondo y tapa lo que pasa por debajo):\n                        // la separación de las orillas va por dentro, para que las cápsulas queden donde las del vidrio\n                        ...(!isGlass && usesBarCapsules && {\n                            [DESKTOP_MEDIA_QUERY]: {pt: `calc(env(safe-area-inset-top) + ${panelGap}px)`, px: `${panelGap}px`},\n                        }),\n                        // en el teléfono la barra de pestañas (MobileTabBar) la reemplaza: con ella van el menú y la cuenta\n                        ...(usesTabBar && {[PHONE_MEDIA_QUERY]: {display: 'none'}}),\n                    })}>\n                {/* a la izquierda, la ☰ queda alineada con los íconos del menú lateral (los dos a 32 px de su orilla) */}\n                <LayoutToolbar disableGutters ownSx={{minHeight: {xs: APP_BAR_HEIGHT_PIXELS, sm: APP_BAR_HEIGHT_PIXELS}, gap: 1, pl: {xs: 1.5, md: isSideMenu ? 1.5 : 3}, pr: {xs: 1.5, md: 3}}}>\n                    {/* la ☰ del teléfono va en la primera cápsula (en escritorio la de encoger el menú y el nombre). OJO: dentro de\n                        una cápsula, sin el margen negativo de «orilla de inicio» de MUI (-12 px): el botón quedaba pegado a la\n                        curva. Así su círculo queda concéntrico con la cápsula */}\n                    <BarGroup isCapsule={usesBarCapsules}>\n                        <LayoutMenuButton edge=\"start\" aria-label={t('drawer.open')} aria-expanded={isMobileMenuOpen} onClick={() => setIsMobileMenuOpen(true)}\n                                    ownSx={{display: 'inline-flex', [DESKTOP_MEDIA_QUERY]: {display: 'none'}, color: 'inherit', ...((isGlass || usesBarCapsules) && {ml: 0})}}>\n                            <MenuIcon />\n                        </LayoutMenuButton>\n                        {isSideMenu && <CollapseMenuButton collapsed={collapsed} onToggle={toggleCollapsed} />}\n                        <BarBrand logo={logo} wordmark={wordmark} brandName={brandName} brandCaption={brandCaption} homePath={homePath}\n                                  sx={isSideMenu ? {display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'flex'}} : {display: 'flex'}} />\n                    </BarGroup>\n                    {isSideMenu ? (\n                        <BarTitle brandName={brandName} />\n                    ) : (\n                        <>\n                            {/* el menú de arriba no sale en el teléfono: su cápsula tampoco (vacía se vería) */}\n                            <BarGroup isCapsule={usesBarCapsules} sx={{display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'flex'}}}>\n                                <TopMenu menuItems={menuItems} activeItem={activeItem} />\n                            </BarGroup>\n                            <LayoutSpacer ownSx={{flexGrow: 1}} />\n                        </>\n                    )}\n                    {/* las acciones de la pantalla abierta (BarActions, y las de PageHeading con cápsulas): cada grupo cae aquí,\n                        antes de la cuenta. Solo en escritorio: en el teléfono flotan arriba (phoneBarActionsSlot, en el contenido) */}\n                    <LayoutTools ref={setBarActionsSlot} ownSx={{display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'flex'}, alignItems: 'center', gap: 1, minWidth: 0}} />\n                    <BarGroup isCapsule={usesBarCapsules}>\n                        <HeaderTools headerActions={headerActions} accountSettings={accountSettings} showFontSizeToggle={showFontSizeToggle} showLanguageToggle={showLanguageToggle}\n                                     showColorSchemeToggle={showColorSchemeToggle} user={user} profilePath={profilePath} accountMenuItems={accountMenuItems}\n                                     onSignOut={onSignOut} isSigningOut={isSigningOut} />\n                    </BarGroup>\n                </LayoutToolbar>\n                {ribbons}\n                {/* con la barra de pestañas el aviso de versión nueva flota aparte, en su cápsula (en el teléfono esta barra no\n                    se ve); sin ella, franja dentro de la barra */}\n                {!usesTabBar && <NewBuildNotice />}\n                {isNavigating && (\n                    <LayoutProgress aria-label={t('navigating')} color=\"inherit\"\n                                    ownSx={{position: 'absolute', bottom: 0, left: 0, right: 0, height: NAVIGATING_BAR_PIXELS}} />\n                )}\n            </LayoutBar>\n            {usesTabBar && <NewBuildNotice variant={NEW_BUILD_NOTICE_VARIANT.floating} />}\n            {usesTabBar && (\n                <MobileTabBar menuItems={menuItems} activeItem={activeItem} menuBadges={menuBadges} moreFooter={sidebarFooter} minimizeOnScroll={minimizeTabBarOnScroll}\n                              onPinnedTabsChange={onMobileTabsChange}\n                              account={(\n                                  <HeaderTools headerActions={headerActions} accountSettings={accountSettings} showFontSizeToggle={showFontSizeToggle}\n                                               showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle} user={user}\n                                               profilePath={profilePath} accountMenuItems={accountMenuItems} onSignOut={onSignOut} isSigningOut={isSigningOut} />\n                              )} />\n            )}\n\n            <LayoutBody ownSx={{display: 'flex', flexGrow: 1, minWidth: 0}}>\n                {isSideMenu && (\n                    <LayoutDrawer variant=\"permanent\"\n                            ownSx={(theme) => ({\n                                display: 'none', [DESKTOP_MEDIA_QUERY]: {display: 'block'}, width: drawerWidth + panelGap, flexShrink: 0, whiteSpace: 'nowrap',\n                                transition: drawerTransitionOf(theme),\n                                '& .MuiDrawer-paper': {\n                                    width: drawerWidth, left: panelGap, boxSizing: 'border-box', overflowX: 'hidden', transition: drawerTransitionOf(theme, ['width']),\n                                    // justo debajo de la barra (su alto real, con avisos o sin ellos) y hasta abajo; si la barra se\n                                    // fundió con el menú, de arriba a abajo\n                                    ...(isBarMerged\n                                        ? {top: panelGap, height: `calc(100% - ${panelGap * 2}px)`}\n                                        : {top: `calc(${APP_BAR_HEIGHT} + ${panelGap}px)`, height: `calc(100% - ${APP_BAR_HEIGHT} - ${panelGap * 2}px)`}),\n                                    // el panel flotante: separado de las orillas y sin la línea de la derecha (lo separa su brillo).\n                                    // Encogido es una cápsula (radio de la mitad de su ancho), como las barras de pestañas de vidrio\n                                    ...(isGlass && {\n                                        border: 0,\n                                        borderRadius: PANEL_RADIUS,\n                                    }),\n                                },\n                            })}>\n                        <SideMenu {...sideMenuProps} showBrand={false} collapsed={collapsed}\n                                  railTop={isBarMerged ? (\n                                      <>\n                                          <CollapseMenuButton collapsed={collapsed} onToggle={toggleCollapsed} />\n                                          {logo && <RailBrand logo={logo} brandName={brandName} homePath={homePath} />}\n                                      </>\n                                  ) : undefined}\n                                  railBottom={isBarMerged ? (\n                                      <HeaderTools vertical headerActions={headerActions} accountSettings={accountSettings} showFontSizeToggle={showFontSizeToggle}\n                                                   showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle} user={user}\n                                                   profilePath={profilePath} accountMenuItems={accountMenuItems} onSignOut={onSignOut}\n                                                   isSigningOut={isSigningOut} />\n                                  ) : undefined} />\n                    </LayoutDrawer>\n                )}\n\n                <LayoutMain component=\"main\" id={MAIN_CONTENT_ID} tabIndex={-1}\n                     ownSx={(theme) => ({\n                         flexGrow: 1, minWidth: 0, outline: 'none', px: {xs: 2, md: 3, lg: 4}, pt: 3, pb: 6,\n                         // con la barra de pestañas abajo (teléfono): arriba, lugar para la hora y la cámara del iPhone; abajo,\n                         // lugar para que la barra (que flota a GLASS_PANEL_GAP_PIXELS) no tape el final de la página\n                         ...(usesTabBar && {\n                             [PHONE_MEDIA_QUERY]: {\n                                 pt: `calc(${theme.spacing(3)} + env(safe-area-inset-top))`,\n                                 pb: `calc(${MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait + GLASS_PANEL_GAP_PIXELS * 2}px + env(safe-area-inset-bottom) + ${theme.spacing(3)} + var(${FLOATING_BOTTOM_SPACE_CSS_VARIABLE}, 0px))`,\n                             },\n                         }),\n                     })}>\n                    {/* teléfono con cápsulas: el renglón de las acciones de la pantalla, arriba a la derecha. Va pegado (sticky)\n                        y no fijo: así ocupa su lugar arriba de la página (no tapa las migas ni el título) y al bajar se queda\n                        flotando. Vacío no se ve. Solo las cápsulas reciben clics: el hueco de la izquierda deja pasar el dedo\n                        a lo de abajo */}\n                    {usesPhoneFloatingActions && (\n                        <LayoutPhoneSlot ref={setPhoneBarActionsSlot} data-phone-bar-actions=\"\"\n                             ownSx={(theme) => ({\n                                 display: 'none',\n                                 [PHONE_MEDIA_QUERY]: {\n                                     display: 'flex', '&:empty': {display: 'none'},\n                                     position: 'sticky', top: `calc(env(safe-area-inset-top) + ${GLASS_PANEL_GAP_PIXELS}px)`, zIndex: theme.zIndex.appBar,\n                                     justifyContent: 'flex-end', alignItems: 'center', gap: 1, mb: 2,\n                                     pointerEvents: 'none', '& > *': {pointerEvents: 'auto'},\n                                 },\n                             })} />\n                    )}\n                    <LayoutContent ownSx={{maxWidth: contentMaxWidth, mx: 'auto'}}>{children}</LayoutContent>\n                </LayoutMain>\n            </LayoutBody>\n\n            {/* el cajón del teléfono (los dos estilos): con el logo arriba, se cierra al elegir una pantalla */}\n            <LayoutPhoneDrawer variant=\"temporary\" open={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} ModalProps={{keepMounted: true}}\n                    ownSx={{[DESKTOP_MEDIA_QUERY]: {display: 'none'}}}\n                    slotProps={{paper: {sx: {width: DRAWER_WIDTH_EXPANDED, boxSizing: 'border-box', pt: 'env(safe-area-inset-top)', pb: 'env(safe-area-inset-bottom)'}}}}>\n                <SideMenu {...sideMenuProps} collapsed={false} onNavigate={() => setIsMobileMenuOpen(false)} />\n            </LayoutPhoneDrawer>\n        </LayoutRoot>\n        </BarActionsSlotContext.Provider>\n    );\n};\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.logo] el logo chico (28 px), en la barra junto al nombre y en el cajón del teléfono\n * @param {import('react').ReactNode | {light?: import('react').ReactNode, dark?: import('react').ReactNode}} [props.wordmark] el logo\n *     ancho, la marca con su nombre en una sola imagen (como el de muchas empresas), o uno para cada modo ({light, dark}: el de\n *     color en claro y el blanco en oscuro): va en lugar del logo y el nombre en la barra y arriba del menú del teléfono, a 24 px de alto. Con el menú\n *     encogido se queda el logo chico (logo), si lo hay. brandName sigue siendo su nombre para el lector de pantalla\n * @param {string} [props.brandName] el nombre de la app; por omisión el appName de ToolkitProvider\n * @param {string} [props.brandCaption] el renglón chico debajo del nombre («Panel de administración»)\n * @param {string} [props.homePath] por omisión '/'\n * @param {object[]} [props.menuItems] lo que regresa composeMenu\n * @param {'side'|'top'} [props.menuPosition] por omisión 'side' (MENU_POSITION)\n * @param {{name: string, email?: string, subtitle?: string, avatarUrl?: string}|null} [props.user] quién está dentro\n * @param {string} [props.profilePath] la ruta de Mi perfil\n * @param {object[]} [props.accountMenuItems] renglones propios en el menú de la cuenta ({to | onClick, label | labelKey, Icon})\n * @param {() => void} [props.onSignOut] sin él no sale «Salir» (una app sin sesión)\n * @param {boolean} [props.isSigningOut]\n * @param {import('react').ReactNode} [props.headerActions] botones propios en la barra, antes de la cuenta\n * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey de cada entrada del menú\n *     (useMenuBadges): lo pendiente de cada pantalla, como numerito\n * @param {import('react').ReactNode} [props.accountSettings] ajustes propios del proyecto dentro del menú de la cuenta, debajo de\n *     letra, idioma y claro u oscuro (con SettingSection, para que se vean igual)\n * @param {import('react').ReactNode} [props.sidebarFooter] lo de abajo del menú lateral (una tarjeta de ayuda…)\n * @param {boolean} [props.showFontSizeToggle] por omisión sí\n * @param {boolean} [props.showLanguageToggle] por omisión sí\n * @param {boolean} [props.showColorSchemeToggle] por omisión sí\n * @param {import('react').ReactNode} [props.ribbons] avisos propios dentro de la barra\n * @param {boolean} [props.isNavigating] la pantalla siguiente se está descargando (react-router: useIsNavigating)\n * @param {boolean} [props.defaultCollapsed] el menú lateral empieza encogido (la persona lo cambia y se recuerda)\n * @param {boolean} [props.minimizeTabBarOnScroll] en el teléfono con vidrio, la barra de pestañas se encoge al leer hacia\n *     abajo y regresa al subir (como iOS 26); por omisión sí\n * @param {number|string} [props.contentMaxWidth] por omisión 1400\n * @param {(collapsed: boolean) => void} [props.onMenuCollapse] la persona encogió (true) o abrió (false) el menú lateral\n * @param {(isOpen: boolean) => void} [props.onMobileMenuChange] se abrió o se cerró el menú del teléfono (el cajón)\n * @param {(keys: string[]|null) => void} [props.onMobileTabsChange] la persona eligió sus pestañas del teléfono (las llaves\n *     de menuItemKeyOf; null: regresó a las de omisión). Se recuerdan en el navegador; con esto el proyecto las puede guardar\n *     en su servidor\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete (para todo el marco)\n * @param {import('react').ReactNode} props.children el contenido\n */\nconst AppLayoutContent = (props) => {\n    // lo que el proyecto puso en su tema (components.CalcitaAppLayout.defaultProps) y encima lo que llega aquí\n    const {\n    logo, wordmark, brandName, brandCaption, homePath = '/', menuItems = [], menuPosition = MENU_POSITION.side, user = null, profilePath, accountMenuItems = [], onSignOut,\n    isSigningOut = false, headerActions, accountSettings, menuBadges, sidebarFooter, showFontSizeToggle = true, showLanguageToggle = true, showColorSchemeToggle = true, ribbons,\n    isNavigating = false, defaultCollapsed = false, minimizeTabBarOnScroll = true, contentMaxWidth = 1400, onMenuCollapse, onMobileMenuChange, onMobileTabsChange,\n    texts, children,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {appName} = useToolkitSettings();\n    // un ícono ya pintado (icon) se vuelve componente aquí, una vez: las piezas del menú pintan siempre Icon\n    const shownMenuItems = useMemo(() => menuItemsWithIconsOf(menuItems), [menuItems]);\n    const appMenu = useMemo(() => ({menuItems: shownMenuItems}), [shownMenuItems]);\n    // los textos del marco llegan a todas sus piezas (la cuenta, el menú, las pestañas del teléfono), cada una lee los suyos\n    return (\n        <ComponentTexts namespace=\"layout\" texts={texts}>\n            <PageTitleProvider>\n                <AppMenuContext.Provider value={appMenu}>\n                    <AppLayoutFrame logo={logo} wordmark={wordmark} brandName={brandName ?? appName} brandCaption={brandCaption} homePath={homePath} menuItems={shownMenuItems} menuPosition={menuPosition}\n                                    user={user} profilePath={profilePath} accountMenuItems={accountMenuItems} onSignOut={onSignOut} isSigningOut={isSigningOut}\n                                    headerActions={headerActions} accountSettings={accountSettings} menuBadges={menuBadges} sidebarFooter={sidebarFooter} showFontSizeToggle={showFontSizeToggle}\n                                    showLanguageToggle={showLanguageToggle} showColorSchemeToggle={showColorSchemeToggle} ribbons={ribbons}\n                                    isNavigating={isNavigating} defaultCollapsed={defaultCollapsed} minimizeTabBarOnScroll={minimizeTabBarOnScroll}\n                                    contentMaxWidth={contentMaxWidth} onMenuCollapse={onMenuCollapse} onMobileMenuChange={onMobileMenuChange}\n                                    onMobileTabsChange={onMobileTabsChange}>\n                        {children}\n                    </AppLayoutFrame>\n                </AppMenuContext.Provider>\n            </PageTitleProvider>\n        </ComponentTexts>\n    );\n};\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nexport const AppLayout = withPieceSlots(AppLayoutContent, THEME_NAME);\n"],"names":["theme"],"mappings":"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"}

package/dist/appShell/AppearanceSettings.js

@@ -16,7 +16,7 @@ import LightModeIcon from "@mui/icons-material/LightModeOutlined";
 import { useToolkitSettings } from "../toolkit/toolkitContext.js";
 import { DEFAULT_LANGUAGES } from "../toolkit/toolkitSettings.js";
 import { useFontSize } from "../ui/navigation/useFontSize.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaAppearanceSettings";
 const AppearanceSelectSection = piecePart(THEME_NAME, "SelectSection", Box);
@@ -52,7 +52,7 @@ function SettingSection({ label, value, options, onChange }) {
     )
   ] });
 }
-function AppearanceSettings(props) {
+function AppearanceSettingsContent(props) {
   const {
     showFontSize = true,
     showLanguage = true,
@@ -120,6 +120,7 @@ function AppearanceSettings(props) {
     section
   ] }, section.key));
 }
+const AppearanceSettings = withPieceSlots(AppearanceSettingsContent, THEME_NAME);
 export {
   SettingSection,
   AppearanceSettings as default

package/dist/appShell/AppearanceSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceSettings.js","sources":["../../src/appShell/AppearanceSettings.jsx"],"sourcesContent":["// Los ajustes de cómo se ve la app para esta persona: tamaño de letra, idioma y claro u oscuro, cada uno con sus opciones\n// a la vista (botones de grupo) en lugar de un botón que cambia sin decir a qué. Los usan el engrane del teléfono\n// (SettingsMenu), el menú de la cuenta (AccountMenu) y la pantalla de «Mi perfil» del proyecto: un solo lugar para todos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAppearanceSettings con defaultProps y\n// styleOverrides de sus partes: selectSection, section, sectionLabel, option, divider.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Fragment} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\nimport ToggleButton from '@mui/material/ToggleButton';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup';\nimport Typography from '@mui/material/Typography';\nimport {useColorScheme} from '@mui/material/styles';\nimport AutomaticModeIcon from '@mui/icons-material/BrightnessAutoOutlined';\nimport DarkModeIcon from '@mui/icons-material/DarkModeOutlined';\nimport LightModeIcon from '@mui/icons-material/LightModeOutlined';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {DEFAULT_LANGUAGES} from '@/toolkit/toolkitSettings.js';\nimport {useFontSize} from '@/ui/navigation/useFontSize.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAppearanceSettings)\nconst THEME_NAME = 'CalcitaAppearanceSettings';\nconst AppearanceSelectSection = piecePart(THEME_NAME, 'SelectSection', Box);\nconst AppearanceSection = piecePart(THEME_NAME, 'Section', Box);\nconst AppearanceSectionLabel = piecePart(THEME_NAME, 'SectionLabel', Typography);\nconst AppearanceOption = piecePart(THEME_NAME, 'Option', ToggleButton);\nconst AppearanceDivider = piecePart(THEME_NAME, 'Divider', Divider);\n\n// cuántas opciones caben como botones lado a lado en el menú de la cuenta; con más, lista desplegable\nconst SETTING_BUTTONS_LIMIT = 3;\n\n/**\n * Un ajuste: su nombre y sus opciones a la vista. Es público: el proyecto agrega los suyos al menú de la cuenta con la\n * misma forma (AppLayout accountSettings), como el vidrio en los ejemplos.\n *\n * @param {object} props\n * @param {string} props.label ya traducido\n * @param {string} props.value la opción elegida\n * @param {Object[]} props.options\n * @param {string} props.options[].value\n * @param {string} props.options[].label ya traducido\n * @param {import('react').ReactNode} [props.options[].icon]\n * @param {(value: string) => void} props.onChange\n */\nexport function SettingSection({label, value, options, onChange}) {\n    // con muchas opciones (los idiomas de una app que ofrece cinco) los botones lado a lado no caben: lista desplegable\n    if (options.length > SETTING_BUTTONS_LIMIT) {\n        return (\n            <AppearanceSelectSection ownSx={{px: 1, py: 0.5}}>\n                <TextField select fullWidth size=\"small\" label={label} value={value} onChange={(event) => onChange(event.target.value)}>\n                    {options.map((option) => <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>)}\n                </TextField>\n            </AppearanceSelectSection>\n        );\n    }\n    return (\n        <AppearanceSection ownSx={{px: 1, py: 0.5}}>\n            <AppearanceSectionLabel variant=\"overline\" color=\"text.secondary\" component=\"p\" ownSx={{px: 1, lineHeight: 1.6}}>{label}</AppearanceSectionLabel>\n            <ToggleButtonGroup value={value} exclusive fullWidth size=\"small\" aria-label={label}\n                               onChange={(event, nextValue) => {\n                                   // al picar la opción ya elegida MUI manda null: se queda la que estaba\n                                   if (nextValue) {\n                                       onChange(nextValue);\n                                   }\n                               }}>\n                {options.map((option) => (\n                    <AppearanceOption key={option.value} value={option.value} ownSx={{gap: 0.75}}>{option.icon}{option.label}</AppearanceOption>\n                ))}\n            </ToggleButtonGroup>\n        </AppearanceSection>\n    );\n}\n\n/**\n * @param {object} props\n * @param {boolean} [props.showFontSize] por omisión sí\n * @param {boolean} [props.showLanguage] por omisión sí\n * @param {boolean} [props.showColorScheme] por omisión sí\n * @param {(level: string) => void} [props.onFontSizeChange] la persona eligió otro tamaño de letra (para guardarlo en su\n *     servidor; el idioma ya sale por onLanguageChange de ToolkitProvider)\n * @param {(mode: 'light'|'dark'|'system') => void} [props.onColorSchemeChange] la persona eligió otro modo\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function AppearanceSettings(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAppearanceSettings.defaultProps) y encima lo que llega aquí\n    const {\n    showFontSize = true, showLanguage = true, showColorScheme = true, onFontSizeChange, onColorSchemeChange, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t, language, changeLanguage} = useToolkitTranslation('layout', texts);\n    const {languages = DEFAULT_LANGUAGES} = useToolkitSettings();\n    const {level, setLevel, levels} = useFontSize();\n    const {mode, setMode} = useColorScheme();\n    const chooseFontSize = (nextLevel) => {\n        setLevel(nextLevel);\n        onFontSizeChange?.(nextLevel);\n    };\n    const chooseColorScheme = (nextMode) => {\n        setMode(nextMode);\n        onColorSchemeChange?.(nextMode);\n    };\n\n    const sections = [\n        showFontSize && (\n            <SettingSection key=\"fontSize\" label={t('fontSize.label')} value={level} onChange={chooseFontSize}\n                            options={levels.map((option) => ({value: option.key, label: t(option.labelKey)}))} />\n        ),\n        showLanguage && (\n            <SettingSection key=\"language\" label={t('settings.language')} value={language} onChange={changeLanguage}\n                            // los idiomas de la app; español e inglés con su nombre de siempre, los del proyecto con el suyo\n                            options={languages.map((entry) => ({value: entry.code, label: t(`languageName.${entry.code}`, {defaultValue: entry.label})}))} />\n        ),\n        // antes de montar no se sabe el modo (el servidor no lo conoce): la sección sale ya montada.\n        // Tres opciones: «Automático» (system de MUI) sigue lo que diga el equipo y es lo de omisión. Es la ÚNICA salida\n        // para volver a seguirlo: el botón de la barra (ColorSchemeToggle) fija claro u oscuro para siempre. La guía de\n        // Apple pide seguir el ajuste del equipo; el botón de la barra se queda con dos estados para no sumar una decisión.\n        showColorScheme && mode && (\n            <SettingSection key=\"colorScheme\" label={t('settings.colorScheme')} value={mode} onChange={chooseColorScheme}\n                            options={[\n                                {value: 'light', label: t('settings.light'), icon: <LightModeIcon fontSize=\"small\" />},\n                                {value: 'dark', label: t('settings.dark'), icon: <DarkModeIcon fontSize=\"small\" />},\n                                {value: 'system', label: t('settings.system'), icon: <AutomaticModeIcon fontSize=\"small\" />},\n                            ]} />\n        ),\n    ].filter(Boolean);\n\n    return sections.map((section, index) => (\n        <Fragment key={section.key}>\n            {index > 0 && <AppearanceDivider ownSx={{my: 0.5}} />}\n            {section}\n        </Fragment>\n    ));\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppearanceSettings.js","sources":["../../src/appShell/AppearanceSettings.jsx"],"sourcesContent":["// Los ajustes de cómo se ve la app para esta persona: tamaño de letra, idioma y claro u oscuro, cada uno con sus opciones\n// a la vista (botones de grupo) en lugar de un botón que cambia sin decir a qué. Los usan el engrane del teléfono\n// (SettingsMenu), el menú de la cuenta (AccountMenu) y la pantalla de «Mi perfil» del proyecto: un solo lugar para todos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAppearanceSettings con defaultProps y\n// styleOverrides de sus partes: selectSection, section, sectionLabel, option, divider.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Fragment} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\nimport ToggleButton from '@mui/material/ToggleButton';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup';\nimport Typography from '@mui/material/Typography';\nimport {useColorScheme} from '@mui/material/styles';\nimport AutomaticModeIcon from '@mui/icons-material/BrightnessAutoOutlined';\nimport DarkModeIcon from '@mui/icons-material/DarkModeOutlined';\nimport LightModeIcon from '@mui/icons-material/LightModeOutlined';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {DEFAULT_LANGUAGES} from '@/toolkit/toolkitSettings.js';\nimport {useFontSize} from '@/ui/navigation/useFontSize.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAppearanceSettings)\nconst THEME_NAME = 'CalcitaAppearanceSettings';\nconst AppearanceSelectSection = piecePart(THEME_NAME, 'SelectSection', Box);\nconst AppearanceSection = piecePart(THEME_NAME, 'Section', Box);\nconst AppearanceSectionLabel = piecePart(THEME_NAME, 'SectionLabel', Typography);\nconst AppearanceOption = piecePart(THEME_NAME, 'Option', ToggleButton);\nconst AppearanceDivider = piecePart(THEME_NAME, 'Divider', Divider);\n\n// cuántas opciones caben como botones lado a lado en el menú de la cuenta; con más, lista desplegable\nconst SETTING_BUTTONS_LIMIT = 3;\n\n/**\n * Un ajuste: su nombre y sus opciones a la vista. Es público: el proyecto agrega los suyos al menú de la cuenta con la\n * misma forma (AppLayout accountSettings), como el vidrio en los ejemplos.\n *\n * @param {object} props\n * @param {string} props.label ya traducido\n * @param {string} props.value la opción elegida\n * @param {Object[]} props.options\n * @param {string} props.options[].value\n * @param {string} props.options[].label ya traducido\n * @param {import('react').ReactNode} [props.options[].icon]\n * @param {(value: string) => void} props.onChange\n */\nexport function SettingSection({label, value, options, onChange}) {\n    // con muchas opciones (los idiomas de una app que ofrece cinco) los botones lado a lado no caben: lista desplegable\n    if (options.length > SETTING_BUTTONS_LIMIT) {\n        return (\n            <AppearanceSelectSection ownSx={{px: 1, py: 0.5}}>\n                <TextField select fullWidth size=\"small\" label={label} value={value} onChange={(event) => onChange(event.target.value)}>\n                    {options.map((option) => <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>)}\n                </TextField>\n            </AppearanceSelectSection>\n        );\n    }\n    return (\n        <AppearanceSection ownSx={{px: 1, py: 0.5}}>\n            <AppearanceSectionLabel variant=\"overline\" color=\"text.secondary\" component=\"p\" ownSx={{px: 1, lineHeight: 1.6}}>{label}</AppearanceSectionLabel>\n            <ToggleButtonGroup value={value} exclusive fullWidth size=\"small\" aria-label={label}\n                               onChange={(event, nextValue) => {\n                                   // al picar la opción ya elegida MUI manda null: se queda la que estaba\n                                   if (nextValue) {\n                                       onChange(nextValue);\n                                   }\n                               }}>\n                {options.map((option) => (\n                    <AppearanceOption key={option.value} value={option.value} ownSx={{gap: 0.75}}>{option.icon}{option.label}</AppearanceOption>\n                ))}\n            </ToggleButtonGroup>\n        </AppearanceSection>\n    );\n}\n\n/**\n * @param {object} props\n * @param {boolean} [props.showFontSize] por omisión sí\n * @param {boolean} [props.showLanguage] por omisión sí\n * @param {boolean} [props.showColorScheme] por omisión sí\n * @param {(level: string) => void} [props.onFontSizeChange] la persona eligió otro tamaño de letra (para guardarlo en su\n *     servidor; el idioma ya sale por onLanguageChange de ToolkitProvider)\n * @param {(mode: 'light'|'dark'|'system') => void} [props.onColorSchemeChange] la persona eligió otro modo\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nfunction AppearanceSettingsContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAppearanceSettings.defaultProps) y encima lo que llega aquí\n    const {\n    showFontSize = true, showLanguage = true, showColorScheme = true, onFontSizeChange, onColorSchemeChange, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t, language, changeLanguage} = useToolkitTranslation('layout', texts);\n    const {languages = DEFAULT_LANGUAGES} = useToolkitSettings();\n    const {level, setLevel, levels} = useFontSize();\n    const {mode, setMode} = useColorScheme();\n    const chooseFontSize = (nextLevel) => {\n        setLevel(nextLevel);\n        onFontSizeChange?.(nextLevel);\n    };\n    const chooseColorScheme = (nextMode) => {\n        setMode(nextMode);\n        onColorSchemeChange?.(nextMode);\n    };\n\n    const sections = [\n        showFontSize && (\n            <SettingSection key=\"fontSize\" label={t('fontSize.label')} value={level} onChange={chooseFontSize}\n                            options={levels.map((option) => ({value: option.key, label: t(option.labelKey)}))} />\n        ),\n        showLanguage && (\n            <SettingSection key=\"language\" label={t('settings.language')} value={language} onChange={changeLanguage}\n                            // los idiomas de la app; español e inglés con su nombre de siempre, los del proyecto con el suyo\n                            options={languages.map((entry) => ({value: entry.code, label: t(`languageName.${entry.code}`, {defaultValue: entry.label})}))} />\n        ),\n        // antes de montar no se sabe el modo (el servidor no lo conoce): la sección sale ya montada.\n        // Tres opciones: «Automático» (system de MUI) sigue lo que diga el equipo y es lo de omisión. Es la ÚNICA salida\n        // para volver a seguirlo: el botón de la barra (ColorSchemeToggle) fija claro u oscuro para siempre. La guía de\n        // Apple pide seguir el ajuste del equipo; el botón de la barra se queda con dos estados para no sumar una decisión.\n        showColorScheme && mode && (\n            <SettingSection key=\"colorScheme\" label={t('settings.colorScheme')} value={mode} onChange={chooseColorScheme}\n                            options={[\n                                {value: 'light', label: t('settings.light'), icon: <LightModeIcon fontSize=\"small\" />},\n                                {value: 'dark', label: t('settings.dark'), icon: <DarkModeIcon fontSize=\"small\" />},\n                                {value: 'system', label: t('settings.system'), icon: <AutomaticModeIcon fontSize=\"small\" />},\n                            ]} />\n        ),\n    ].filter(Boolean);\n\n    return sections.map((section, index) => (\n        <Fragment key={section.key}>\n            {index > 0 && <AppearanceDivider ownSx={{my: 0.5}} />}\n            {section}\n        </Fragment>\n    ));\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst AppearanceSettings = withPieceSlots(AppearanceSettingsContent, THEME_NAME);\nexport default AppearanceSettings;\n"],"names":[],"mappings":"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"}

package/dist/appShell/AuthLayout.js

@@ -11,7 +11,7 @@ import GlassLensFilter from "../ui/layout/GlassLensFilter.js";
 import DocumentTitle from "../ui/navigation/DocumentTitle.js";
 import ColorSchemeToggle from "../ui/navigation/ColorSchemeToggle.js";
 import LanguageToggle from "../ui/navigation/LanguageToggle.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaAuthLayout";
 const AuthRoot = piecePart(THEME_NAME, "Root", Box);
@@ -26,7 +26,7 @@ const AuthContent = piecePart(THEME_NAME, "Content", Box);
 const AuthFooter = piecePart(THEME_NAME, "Footer", Box);
 const CARD_MAX_WIDTH_PIXELS = 440;
 const cardSurfaceOf = (theme) => isGlassTheme(theme) ? { ...glassStylesOf(theme), borderColor: "transparent", borderRadius: PANEL_RADIUS } : {};
-const AuthLayout = (props) => {
+const AuthLayoutContent = (props) => {
   const { logo, brandName, title, description, children, footer, showLanguageToggle = true, showColorSchemeToggle = true, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { appName } = useToolkitSettings();
@@ -55,6 +55,7 @@ const AuthLayout = (props) => {
     ] })
   ] });
 };
+const AuthLayout = withPieceSlots(AuthLayoutContent, THEME_NAME);
 export {
   AuthLayout
 };

package/dist/appShell/AuthLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthLayout.js","sources":["../../src/appShell/AuthLayout.jsx"],"sourcesContent":["// La pantalla de entrada (iniciar sesión, «¿olvidó su contraseña?», elegir una contraseña nueva): el logo y el nombre de\n// la app, una tarjeta al centro con su título y lo que lleve adentro, y arriba a la derecha el idioma y claro u oscuro\n// (quien no ha entrado también los necesita). Como la plantilla «Sign in» de MUI.\n//\n//   <AuthLayout logo={<Logo />} title={t('auth:signIn.title')} description={t('auth:signIn.subtitle')}>\n//       <SignInForm onSubmit={signIn} forgotPasswordPath=\"/forgot-password\" />\n//   </AuthLayout>\n//\n// Con el vidrio del tema (createToolkitTheme({glass: true})), el lienzo lleva sus manchas de color y la tarjeta es de\n// vidrio; sin vidrio, una tarjeta con borde sobre el lienzo.\n//\n// También pinta el aviso de versión nueva (cápsula flotante), como el marco: quien abre la app sin sesión (o la deja abierta\n// en esta pantalla) también debe enterarse; antes solo salía en las pantallas con sesión.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAuthLayout con defaultProps y\n// styleOverrides de sus partes: root, tools, body, brand, logo, brandName, card, description, content, footer.\n//\n// Lo renderiza la app: arrow (regla de la casa).\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {PANEL_RADIUS, ambientBackgroundOf, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport NewBuildNotice, {NEW_BUILD_NOTICE_VARIANT} from '@/feedback/NewBuildNotice.jsx';\nimport GlassLensFilter from '@/ui/layout/GlassLensFilter.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport ColorSchemeToggle from '@/ui/navigation/ColorSchemeToggle.jsx';\nimport LanguageToggle from '@/ui/navigation/LanguageToggle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAuthLayout)\nconst THEME_NAME = 'CalcitaAuthLayout';\nconst AuthRoot = piecePart(THEME_NAME, 'Root', Box);\nconst AuthTools = piecePart(THEME_NAME, 'Tools', Stack);\nconst AuthBody = piecePart(THEME_NAME, 'Body', Box);\nconst AuthBrand = piecePart(THEME_NAME, 'Brand', Stack);\nconst AuthLogo = piecePart(THEME_NAME, 'Logo', Box);\nconst AuthBrandName = piecePart(THEME_NAME, 'BrandName', Typography);\nconst AuthCard = piecePart(THEME_NAME, 'Card', Paper);\nconst AuthDescription = piecePart(THEME_NAME, 'Description', Typography);\nconst AuthContent = piecePart(THEME_NAME, 'Content', Box);\nconst AuthFooter = piecePart(THEME_NAME, 'Footer', Box);\n\n// lo ancho de la tarjeta: lo que cabe cómodo un correo largo\nconst CARD_MAX_WIDTH_PIXELS = 440;\n\n/**\n * La tarjeta: de vidrio si el tema lo trae; si no, con borde.\n *\n * @param {object} theme\n * @returns {object}\n */\nconst cardSurfaceOf = (theme) => (isGlassTheme(theme)\n    ? {...glassStylesOf(theme), borderColor: 'transparent', borderRadius: PANEL_RADIUS}\n    : {});\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.logo] el logo chico (28 px)\n * @param {string} [props.brandName] por omisión el appName de ToolkitProvider\n * @param {string} props.title el título de la tarjeta y de la pestaña, ya traducido\n * @param {import('react').ReactNode} [props.description] el renglón debajo del título\n * @param {import('react').ReactNode} props.children el formulario\n * @param {import('react').ReactNode} [props.footer] debajo de la tarjeta (los botones de prueba, el aviso de privacidad…)\n * @param {boolean} [props.showLanguageToggle] por omisión sí\n * @param {boolean} [props.showColorSchemeToggle] por omisión sí\n */\nexport const AuthLayout = (props) => {\n    // lo que el proyecto puso en su tema (components.CalcitaAuthLayout.defaultProps) y encima lo que llega aquí\n    const {logo, brandName, title, description, children, footer, showLanguageToggle = true, showColorSchemeToggle = true, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {appName} = useToolkitSettings();\n    return (\n        <AuthRoot ownSx={[{minHeight: '100vh', display: 'flex', flexDirection: 'column', bgcolor: 'background.default'},\n            (theme) => (isGlassTheme(theme) ? ambientBackgroundOf(theme) : {})]}>\n            <DocumentTitle title={title} />\n            <GlassLensFilter />\n            <NewBuildNotice variant={NEW_BUILD_NOTICE_VARIANT.floating} />\n            <AuthTools direction=\"row\" spacing={1} ownSx={{justifyContent: 'flex-end', p: 2, pt: 'max(16px, env(safe-area-inset-top))'}}>\n                {showLanguageToggle && <LanguageToggle />}\n                {showColorSchemeToggle && <ColorSchemeToggle />}\n            </AuthTools>\n            <AuthBody component=\"main\" ownSx={{flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', px: 2, pb: 6}}>\n                <AuthBrand direction=\"row\" spacing={1.25} ownSx={{alignItems: 'center', mb: 3}}>\n                    {logo && <AuthLogo ownSx={{width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</AuthLogo>}\n                    <AuthBrandName variant=\"subtitle1\" component=\"p\" ownSx={{fontWeight: 600}}>{brandName ?? appName}</AuthBrandName>\n                </AuthBrand>\n                <AuthCard variant=\"outlined\" ownSx={[{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, p: {xs: 3, sm: 4}}, cardSurfaceOf]}>\n                    <Typography variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {description && <AuthDescription variant=\"body2\" color=\"text.secondary\" ownSx={{mt: 1}}>{description}</AuthDescription>}\n                    <AuthContent ownSx={{mt: 3}}>{children}</AuthContent>\n                </AuthCard>\n                {footer && <AuthFooter ownSx={{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, mt: 2}}>{footer}</AuthFooter>}\n            </AuthBody>\n        </AuthRoot>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AuthLayout.js","sources":["../../src/appShell/AuthLayout.jsx"],"sourcesContent":["// La pantalla de entrada (iniciar sesión, «¿olvidó su contraseña?», elegir una contraseña nueva): el logo y el nombre de\n// la app, una tarjeta al centro con su título y lo que lleve adentro, y arriba a la derecha el idioma y claro u oscuro\n// (quien no ha entrado también los necesita). Como la plantilla «Sign in» de MUI.\n//\n//   <AuthLayout logo={<Logo />} title={t('auth:signIn.title')} description={t('auth:signIn.subtitle')}>\n//       <SignInForm onSubmit={signIn} forgotPasswordPath=\"/forgot-password\" />\n//   </AuthLayout>\n//\n// Con el vidrio del tema (createToolkitTheme({glass: true})), el lienzo lleva sus manchas de color y la tarjeta es de\n// vidrio; sin vidrio, una tarjeta con borde sobre el lienzo.\n//\n// También pinta el aviso de versión nueva (cápsula flotante), como el marco: quien abre la app sin sesión (o la deja abierta\n// en esta pantalla) también debe enterarse; antes solo salía en las pantallas con sesión.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAuthLayout con defaultProps y\n// styleOverrides de sus partes: root, tools, body, brand, logo, brandName, card, description, content, footer.\n//\n// Lo renderiza la app: arrow (regla de la casa).\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {PANEL_RADIUS, ambientBackgroundOf, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport NewBuildNotice, {NEW_BUILD_NOTICE_VARIANT} from '@/feedback/NewBuildNotice.jsx';\nimport GlassLensFilter from '@/ui/layout/GlassLensFilter.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport ColorSchemeToggle from '@/ui/navigation/ColorSchemeToggle.jsx';\nimport LanguageToggle from '@/ui/navigation/LanguageToggle.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAuthLayout)\nconst THEME_NAME = 'CalcitaAuthLayout';\nconst AuthRoot = piecePart(THEME_NAME, 'Root', Box);\nconst AuthTools = piecePart(THEME_NAME, 'Tools', Stack);\nconst AuthBody = piecePart(THEME_NAME, 'Body', Box);\nconst AuthBrand = piecePart(THEME_NAME, 'Brand', Stack);\nconst AuthLogo = piecePart(THEME_NAME, 'Logo', Box);\nconst AuthBrandName = piecePart(THEME_NAME, 'BrandName', Typography);\nconst AuthCard = piecePart(THEME_NAME, 'Card', Paper);\nconst AuthDescription = piecePart(THEME_NAME, 'Description', Typography);\nconst AuthContent = piecePart(THEME_NAME, 'Content', Box);\nconst AuthFooter = piecePart(THEME_NAME, 'Footer', Box);\n\n// lo ancho de la tarjeta: lo que cabe cómodo un correo largo\nconst CARD_MAX_WIDTH_PIXELS = 440;\n\n/**\n * La tarjeta: de vidrio si el tema lo trae; si no, con borde.\n *\n * @param {object} theme\n * @returns {object}\n */\nconst cardSurfaceOf = (theme) => (isGlassTheme(theme)\n    ? {...glassStylesOf(theme), borderColor: 'transparent', borderRadius: PANEL_RADIUS}\n    : {});\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.logo] el logo chico (28 px)\n * @param {string} [props.brandName] por omisión el appName de ToolkitProvider\n * @param {string} props.title el título de la tarjeta y de la pestaña, ya traducido\n * @param {import('react').ReactNode} [props.description] el renglón debajo del título\n * @param {import('react').ReactNode} props.children el formulario\n * @param {import('react').ReactNode} [props.footer] debajo de la tarjeta (los botones de prueba, el aviso de privacidad…)\n * @param {boolean} [props.showLanguageToggle] por omisión sí\n * @param {boolean} [props.showColorSchemeToggle] por omisión sí\n */\nconst AuthLayoutContent = (props) => {\n    // lo que el proyecto puso en su tema (components.CalcitaAuthLayout.defaultProps) y encima lo que llega aquí\n    const {logo, brandName, title, description, children, footer, showLanguageToggle = true, showColorSchemeToggle = true, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {appName} = useToolkitSettings();\n    return (\n        <AuthRoot ownSx={[{minHeight: '100vh', display: 'flex', flexDirection: 'column', bgcolor: 'background.default'},\n            (theme) => (isGlassTheme(theme) ? ambientBackgroundOf(theme) : {})]}>\n            <DocumentTitle title={title} />\n            <GlassLensFilter />\n            <NewBuildNotice variant={NEW_BUILD_NOTICE_VARIANT.floating} />\n            <AuthTools direction=\"row\" spacing={1} ownSx={{justifyContent: 'flex-end', p: 2, pt: 'max(16px, env(safe-area-inset-top))'}}>\n                {showLanguageToggle && <LanguageToggle />}\n                {showColorSchemeToggle && <ColorSchemeToggle />}\n            </AuthTools>\n            <AuthBody component=\"main\" ownSx={{flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', px: 2, pb: 6}}>\n                <AuthBrand direction=\"row\" spacing={1.25} ownSx={{alignItems: 'center', mb: 3}}>\n                    {logo && <AuthLogo ownSx={{width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</AuthLogo>}\n                    <AuthBrandName variant=\"subtitle1\" component=\"p\" ownSx={{fontWeight: 600}}>{brandName ?? appName}</AuthBrandName>\n                </AuthBrand>\n                <AuthCard variant=\"outlined\" ownSx={[{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, p: {xs: 3, sm: 4}}, cardSurfaceOf]}>\n                    <Typography variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {description && <AuthDescription variant=\"body2\" color=\"text.secondary\" ownSx={{mt: 1}}>{description}</AuthDescription>}\n                    <AuthContent ownSx={{mt: 3}}>{children}</AuthContent>\n                </AuthCard>\n                {footer && <AuthFooter ownSx={{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, mt: 2}}>{footer}</AuthFooter>}\n            </AuthBody>\n        </AuthRoot>\n    );\n};\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nexport const AuthLayout = withPieceSlots(AuthLayoutContent, THEME_NAME);\n"],"names":[],"mappings":"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"}