@stackcraftmx/calcita 0.27.0 → 0.30.0

package/dist/appShell/MobileTabBar.js

@@ -23,6 +23,16 @@ import { accentTextStylesOf, isGlassTheme, glassStylesOf } from "../theme/glassS
 import { mergeStyles } from "../theme/mergeComponents.js";
 import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaMobileTabBar";
+const TabBarTab = piecePart(THEME_NAME, "Tab", ButtonBase);
+const TabBarTabIconPlaceholder = piecePart(THEME_NAME, "TabIconPlaceholder", Box);
+const TabBarTabLabel = piecePart(THEME_NAME, "TabLabel", Typography);
+const TabBarRoot = piecePart(THEME_NAME, "Root", Box);
+const TabBarBar = piecePart(THEME_NAME, "Bar", Box);
+const TabBarMinimized = piecePart(THEME_NAME, "Minimized", ButtonBase);
+const TabBarAccount = piecePart(THEME_NAME, "Account", Box);
+const TabBarSheetHeader = piecePart(THEME_NAME, "SheetHeader", Box);
 const TAB_LABEL_PIXELS = Object.freeze({ portrait: 10, landscape: 12 });
 const TAB_ICON_SIZE = "1.5rem";
 const TAB_BAR_MAX_WIDTH_PIXELS = 560;
@@ -83,13 +93,13 @@ function activeTabOf(theme) {
 }
 function TabButton({ label, Icon, isActive, badge, linkProps = {}, onClick, hasPopup = false }) {
   return /* @__PURE__ */ jsxs(
-    ButtonBase,
+    TabBarTab,
     {
       ...linkProps,
       onClick,
       "aria-haspopup": hasPopup ? "menu" : void 0,
       "aria-current": isActive ? "page" : void 0,
-      sx: (theme) => mergeStyles({
+      ownSx: (theme) => mergeStyles({
         flex: "1 1 0",
         minWidth: 0,
         height: "100%",
@@ -105,13 +115,13 @@ function TabButton({ label, Icon, isActive, badge, linkProps = {}, onClick, hasP
         [PHONE_LANDSCAPE_MEDIA_QUERY]: { flexDirection: "row", gap: 0.75 }
       }, isActive ? activeTabOf(theme) : {}),
       children: [
-        /* @__PURE__ */ jsx(Badge, { invisible: !badge?.isCount, color: "error", max: BADGE_MAX, overlap: "circular", badgeContent: badge?.isCount ? badge.content : void 0, children: Icon ? /* @__PURE__ */ jsx(Icon, { sx: { fontSize: TAB_ICON_SIZE } }) : /* @__PURE__ */ jsx(Box, { sx: { width: TAB_ICON_SIZE, height: TAB_ICON_SIZE } }) }),
+        /* @__PURE__ */ jsx(Badge, { invisible: !badge?.isCount, color: "error", max: BADGE_MAX, overlap: "circular", badgeContent: badge?.isCount ? badge.content : void 0, children: Icon ? /* @__PURE__ */ jsx(Icon, { sx: { fontSize: TAB_ICON_SIZE } }) : /* @__PURE__ */ jsx(TabBarTabIconPlaceholder, { ownSx: { width: TAB_ICON_SIZE, height: TAB_ICON_SIZE } }) }),
         /* @__PURE__ */ jsx(
-          Typography,
+          TabBarTabLabel,
           {
             component: "span",
             noWrap: true,
-            sx: {
+            ownSx: {
               ...textSizeOf(TAB_LABEL_PIXELS.portrait),
               fontWeight: 500,
               maxWidth: "100%",
@@ -144,7 +154,8 @@ function useFittingTabCount(capsule, minTabPixels) {
   }, [capsule, minTabPixels]);
   return tabCount;
 }
-function MobileTabBar({ menuItems, activeItem, menuBadges, account, moreFooter, minimizeOnScroll = true, onPinnedTabsChange }) {
+function MobileTabBar(props) {
+  const { menuItems, activeItem, menuBadges, account, moreFooter, minimizeOnScroll = true, onPinnedTabsChange } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("layout");
   const { Link: RouterLink } = useToolkitNavigation();
   const { pinnedKeys, setPinnedKeys } = usePinnedMobileTabs();
@@ -179,11 +190,11 @@ function MobileTabBar({ menuItems, activeItem, menuBadges, account, moreFooter,
   const glassSurfaceSx = floatingSurfaceOf;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      Box,
+      TabBarRoot,
       {
         component: "nav",
         "aria-label": t("drawer.ariaLabel"),
-        sx: (theme) => ({
+        ownSx: (theme) => ({
           display: "none",
           [PHONE_MEDIA_QUERY]: { display: "flex" },
           position: "fixed",
@@ -198,11 +209,11 @@ function MobileTabBar({ menuItems, activeItem, menuBadges, account, moreFooter,
         }),
         children: [
           /* @__PURE__ */ jsxs(
-            Box,
+            TabBarBar,
             {
               ref: setTabsCapsule,
               inert: isMinimized,
-              sx: (theme) => ({
+              ownSx: (theme) => ({
                 ...glassSurfaceSx(theme),
                 display: "flex",
                 flex: 1,
@@ -242,13 +253,13 @@ function MobileTabBar({ menuItems, activeItem, menuBadges, account, moreFooter,
             }
           ),
           /* @__PURE__ */ jsx(
-            ButtonBase,
+            TabBarMinimized,
             {
               inert: !isMinimized,
               onClick: expand,
               "aria-label": t("drawer.showTabs"),
               "aria-expanded": false,
-              sx: (theme) => mergeStyles({
+              ownSx: (theme) => mergeStyles({
                 ...glassSurfaceSx(theme),
                 position: "absolute",
                 left: 0,
@@ -261,7 +272,7 @@ function MobileTabBar({ menuItems, activeItem, menuBadges, account, moreFooter,
               children: /* @__PURE__ */ jsx(MinimizedIcon, { sx: { fontSize: TAB_ICON_SIZE } })
             }
           ),
-          account && /* @__PURE__ */ jsx(Box, { sx: (theme) => ({
+          account && /* @__PURE__ */ jsx(TabBarAccount, { ownSx: (theme) => ({
             ...glassSurfaceSx(theme),
             flexShrink: 0,
             minWidth: MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait,
@@ -324,7 +335,7 @@ function MobileTabBar({ menuItems, activeItem, menuBadges, account, moreFooter,
             }
           }
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end", px: 1.5, pt: 1, flexShrink: 0 }, children: /* @__PURE__ */ jsx(Button, { size: "small", autoFocus: returnsFromEditor, onClick: () => setIsEditingTabs(true), children: t("drawer.editTabs") }) }),
+          /* @__PURE__ */ jsx(TabBarSheetHeader, { ownSx: { display: "flex", justifyContent: "flex-end", px: 1.5, pt: 1, flexShrink: 0 }, children: /* @__PURE__ */ jsx(Button, { size: "small", autoFocus: returnsFromEditor, onClick: () => setIsEditingTabs(true), children: t("drawer.editTabs") }) }),
           /* @__PURE__ */ jsx(
             SideMenu,
             {

package/dist/appShell/MobileTabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileTabBar.js","sources":["../../src/appShell/MobileTabBar.jsx"],"sourcesContent":["// La barra de pestañas del teléfono con vidrio, como la de iOS 26: una cápsula de vidrio flotando abajo con las secciones\n// principales (mobileTabsOf: las que caben a lo ancho, y «Más» con el resto), y aparte, en su círculo de vidrio, la cuenta\n// (con todos los ajustes adentro). La reemplaza a la barra de abajo con ☰ y al cajón del menú (lo pidió el autor: «estilo\n// Apple pero con sus submenús de acciones»). También va con el minimalista cuando la barra va en cápsulas (usesMobileTabBar), sólida y\n// del gris de lo que flota (minimalFloatingStylesOf).\n//\n//   - Una pestaña con submenú no navega: abre el menú de acciones de Apple arriba de ella (SubmenuActionsMenu).\n//   - «Más» abre una hoja desde abajo con el resto del menú, por secciones (SideMenu, el mismo del escritorio). Arriba trae\n//     «Editar la barra»: cada quien elige qué pantallas van abajo (TabBarEditor; se recuerda con usePinnedMobileTabs),\n//     como pide la guía de Apple. Sin elegir, van las que marca el proyecto (mobileTab en menu.js).\n//   - Cada pestaña lleva su badge como los de Apple (HIG «Tab bars»): ROJO con el número en blanco y solo para conteos (lo\n//     pendiente, del servidor); un badge de texto («Nuevo») no va en la pestaña, se queda en el menú: Apple los reserva para\n//     lo que pide atención.\n//   - Cuántas pestañas van se mide (useFittingTabCount): las que caben con al menos MIN_TAB_PIXELS cada una; las demás van\n//     a «Más». En una ventana angosta salen menos y en una ancha más, y los nombres no se cortan («Compone…»).\n//   - Acostado (pantalla bajita), la barra va compacta: ícono y nombre lado a lado, para dejarle el alto al contenido.\n//   - Al leer hacia abajo se encoge (como iOS 26): queda una cápsula chica con la pestaña donde está la persona, y la cuenta\n//     más chica; al subir un poco, o al tocar la cápsula, regresa completa (cuándo: tabBarScroll.js). Se mueve solo con\n//     opacidad y escala, lo que el navegador anima sin volver a acomodar la página: en un teléfono barato no se traba.\n// Solo se ve en el teléfono (PHONE_MEDIA_QUERY); en escritorio no ocupa nada.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useLayoutEffect, useState} from 'react';\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Drawer from '@mui/material/Drawer';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\n\nimport {menuItemLabelOf, menuLinkPropsOf} from '@/appShell/menuItemText.js';\nimport {\n    GLASS_PANEL_GAP_PIXELS, MOBILE_TAB_BAR_HEIGHT_PIXELS, PHONE_LANDSCAPE_MEDIA_QUERY, PHONE_MEDIA_QUERY,\n} from '@/appShell/shellSizes.js';\nimport SideMenu from '@/appShell/SideMenu.jsx';\nimport SubmenuActionsMenu, {SUBMENU_PLACEMENT} from '@/appShell/SubmenuActionsMenu.jsx';\nimport TabBarEditor from '@/appShell/TabBarEditor.jsx';\nimport {usePinnedMobileTabs} from '@/appShell/usePinnedMobileTabs.js';\nimport {useTabBarMinimized} from '@/appShell/useTabBarMinimized.js';\nimport {menuBadgeOf, menuItemKeyOf, mobileTabsOf} from '@/navigation/appMenu.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport {minimalFloatingStylesOf} from '@/theme/components/minimalComponents.js';\nimport {accentTextStylesOf, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {mergeStyles} from '@/theme/mergeComponents.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n// el nombre de la pestaña parado y acostado (px), lo ancho máximo de la cápsula y lo alto de la hoja de «Más»\nconst TAB_LABEL_PIXELS = Object.freeze({portrait: 10, landscape: 12});\nconst TAB_ICON_SIZE = '1.5rem';\nconst TAB_BAR_MAX_WIDTH_PIXELS = 560;\n// lo menos que mide una pestaña (px) para que su nombre se lea entero: parada, un nombre de unas 11 letras («Formularios»\n// pide 61 px, medido en Chrome); acostada, ícono y nombre lado a lado. Con menos, la pestaña se va a «Más»\nconst MIN_TAB_PIXELS = Object.freeze({portrait: 60, landscape: 104});\n// antes de medir (o si la barra no se ve): las de siempre, 4 y «Más»\nconst DEFAULT_TAB_COUNT = 5;\nconst MORE_SHEET_MAX_WIDTH_PIXELS = 640;\nconst MORE_SHEET_MAX_HEIGHT = '75vh';\nconst BADGE_MAX = 99;\n// la barra flota sobre el contenido: vidrio más opaco que el de los controles, una línea fina en la orilla y una sombra\n// debajo. Con el vidrio de siempre, en claro se perdía sobre las tarjetas blancas y no parecía flotar (lo reportaron)\nconst FLOATING_GLASS_OPACITY = 0.8;\nconst FLOATING_EDGE = Object.freeze({\n    light: {outline: 'rgba(15, 23, 42, 0.12)', shadow: '0 10px 30px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.10)'},\n    dark: {outline: 'rgba(255, 255, 255, 0.16)', shadow: '0 10px 30px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4)'},\n});\n// la pestaña elegida: un tinte del acento (en claro una gota blanca sobre la cápsula blanca no se distinguía)\nconst ACTIVE_TINT_PERCENT = Object.freeze({light: 14, dark: 24});\n// encogida: lo alto de la cápsula chica (px) y a qué tamaño se va lo que desaparece\nconst MINIMIZED_PIXELS = Object.freeze({portrait: 48, landscape: 40});\nconst HIDDEN_SCALE = 0.6;\n\n/**\n * Lo que aparece o desaparece al encoger la barra: solo opacidad y escala. visibility espera a que termine la animación\n * para esconderlo, y así lo que ya no se ve tampoco se puede tocar.\n *\n * @param {object} theme\n * @param {boolean} isShown\n * @param {string} transformOrigin hacia dónde se encoge ('left bottom')\n * @returns {object}\n */\nfunction appearStylesOf(theme, isShown, transformOrigin) {\n    const duration = theme.transitions.duration.short;\n    return {\n        transformOrigin,\n        opacity: isShown ? 1 : 0,\n        transform: isShown ? 'none' : `scale(${HIDDEN_SCALE})`,\n        visibility: isShown ? 'visible' : 'hidden',\n        transition: `${theme.transitions.create(['opacity', 'transform'], {duration})}, visibility 0s linear ${isShown ? 0 : duration}ms`,\n    };\n}\n\n/**\n * La superficie de la barra y del círculo de la cuenta: vidrio más opaco, su línea fina y su sombra (la sombra va en una\n * capa detrás, ::before, para no pisar el filo de luz del vidrio, que también es una sombra). Con el minimalista, sólida.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction floatingSurfaceOf(theme) {\n    // con el minimalista (barra en cápsulas) la barra es sólida: su gris de lo que flota, sin línea ni sombra\n    if (!isGlassTheme(theme)) {\n        return {...minimalFloatingStylesOf(theme), position: 'relative', borderRadius: '999px', height: '100%'};\n    }\n    return {\n        ...glassStylesOf(theme, {opacity: FLOATING_GLASS_OPACITY}),\n        position: 'relative',\n        borderRadius: '999px',\n        height: '100%',\n        outline: `1px solid ${FLOATING_EDGE.light.outline}`,\n        '&::before': {\n            content: '\"\"', position: 'absolute', inset: 0, borderRadius: 'inherit', zIndex: -1, pointerEvents: 'none',\n            boxShadow: FLOATING_EDGE.light.shadow,\n        },\n        ...theme.applyStyles('dark', {\n            outline: `1px solid ${FLOATING_EDGE.dark.outline}`,\n            '&::before': {boxShadow: FLOATING_EDGE.dark.shadow},\n        }),\n    };\n}\n\n/**\n * La pestaña elegida: el tinte del acento y su letra legible.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction activeTabOf(theme) {\n    const primary = (theme.vars ?? theme).palette.primary.main;\n    return mergeStyles({\n        backgroundColor: `color-mix(in srgb, ${primary} ${ACTIVE_TINT_PERCENT.light}%, transparent)`,\n        ...theme.applyStyles('dark', {backgroundColor: `color-mix(in srgb, ${primary} ${ACTIVE_TINT_PERCENT.dark}%, transparent)`}),\n    }, accentTextStylesOf(theme));\n}\n\n/**\n * Una pestaña: liga a su pantalla o, con submenú, botón que abre el menú de acciones.\n *\n * @param {object} props\n * @param {string} props.label ya traducido\n * @param {import('react').ElementType} [props.Icon]\n * @param {boolean} props.isActive\n * @param {{content: number|string, isCount: boolean}|null} props.badge\n * @param {object} [props.linkProps] {component, to} si navega\n * @param {(event: object) => void} [props.onClick]\n * @param {boolean} [props.hasPopup] abre un menú\n */\nfunction TabButton({label, Icon, isActive, badge, linkProps = {}, onClick, hasPopup = false}) {\n    return (\n        <ButtonBase {...linkProps} onClick={onClick} aria-haspopup={hasPopup ? 'menu' : undefined} aria-current={isActive ? 'page' : undefined}\n                    sx={(theme) => mergeStyles({\n                        flex: '1 1 0', minWidth: 0, height: '100%', borderRadius: '999px', px: 0,\n                        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 0.25,\n                        color: 'text.primary',\n                        transition: theme.transitions.create(['background-color', 'color'], {duration: theme.transitions.duration.shortest}),\n                        [PHONE_LANDSCAPE_MEDIA_QUERY]: {flexDirection: 'row', gap: 0.75},\n                    }, isActive ? activeTabOf(theme) : {})}>\n            <Badge invisible={!badge?.isCount} color=\"error\" max={BADGE_MAX} overlap=\"circular\" badgeContent={badge?.isCount ? badge.content : undefined}>\n                {Icon ? <Icon sx={{fontSize: TAB_ICON_SIZE}} /> : <Box sx={{width: TAB_ICON_SIZE, height: TAB_ICON_SIZE}} />}\n            </Badge>\n            <Typography component=\"span\" noWrap\n                        sx={{...textSizeOf(TAB_LABEL_PIXELS.portrait), fontWeight: 500, maxWidth: '100%',\n                             [PHONE_LANDSCAPE_MEDIA_QUERY]: textSizeOf(TAB_LABEL_PIXELS.landscape)}}>\n                {label}\n            </Typography>\n        </ButtonBase>\n    );\n}\n\n/**\n * Cuántas pestañas caben en la cápsula (contando «Más»). Se mide la cápsula, que no cambia de ancho con sus pestañas (se\n * estira hasta su tope), así que la cuenta no da vueltas. Se vuelve a medir al girar el teléfono o cambiar la ventana.\n *\n * @param {HTMLElement|null} capsule\n * @param {number} minTabPixels lo menos que mide una pestaña\n * @returns {number}\n */\nfunction useFittingTabCount(capsule, minTabPixels) {\n    const [tabCount, setTabCount] = useState(DEFAULT_TAB_COUNT);\n    // antes de pintar: así no se ve un momento con las pestañas apretadas\n    useLayoutEffect(() => {\n        if (!capsule) {\n            return undefined;\n        }\n        const measure = () => {\n            const style = window.getComputedStyle(capsule);\n            const innerWidth = capsule.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);\n            // en escritorio la barra no se ve (ancho 0): se quedan las de siempre\n            if (innerWidth > 0) {\n                setTabCount(Math.max(2, Math.floor(innerWidth / minTabPixels)));\n            }\n        };\n        measure();\n        const observer = new ResizeObserver(measure);\n        observer.observe(capsule);\n        return () => observer.disconnect();\n    }, [capsule, minTabPixels]);\n    return tabCount;\n}\n\n/**\n * @param {object} props\n * @param {object[]} props.menuItems lo que regresa composeMenu\n * @param {object|null} props.activeItem la entrada de la pantalla abierta\n * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey\n * @param {import('react').ReactNode} [props.account] la cuenta (o el engrane), en su círculo junto a la barra\n * @param {import('react').ReactNode} [props.moreFooter] lo que va al final de la hoja de «Más» (la tarjeta del menú lateral)\n * @param {boolean} [props.minimizeOnScroll] se encoge al leer hacia abajo; por omisión sí\n * @param {(keys: string[]|null) => void} [props.onPinnedTabsChange] la persona eligió sus pestañas (null: regresó a las de\n *     omisión)\n */\nexport default function MobileTabBar({menuItems, activeItem, menuBadges, account, moreFooter, minimizeOnScroll = true, onPinnedTabsChange}) {\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const {pinnedKeys, setPinnedKeys} = usePinnedMobileTabs();\n    const [tabsCapsule, setTabsCapsule] = useState(null);\n    const isLandscape = useMediaQuery(PHONE_LANDSCAPE_MEDIA_QUERY);\n    const tabCount = useFittingTabCount(tabsCapsule, isLandscape ? MIN_TAB_PIXELS.landscape : MIN_TAB_PIXELS.portrait);\n    const {tabs, more} = mobileTabsOf(menuItems, pinnedKeys, tabCount);\n    const [submenu, setSubmenu] = useState({anchorElement: null, menuItem: null});\n    const [isMoreOpen, setIsMoreOpen] = useState(false);\n    const [isEditingTabs, setIsEditingTabs] = useState(false);\n    // al salir del editor su botón desaparece con el foco adentro: el foco regresa a «Editar la barra» (sin eso se perdía\n    // y Escape ya no cerraba la hoja; también lo necesita quien usa lector de pantalla)\n    const [returnsFromEditor, setReturnsFromEditor] = useState(false);\n    const leaveEditor = () => {\n        setIsEditingTabs(false);\n        setReturnsFromEditor(true);\n    };\n    const closeMore = () => {\n        setIsMoreOpen(false);\n        setIsEditingTabs(false);\n        setReturnsFromEditor(false);\n    };\n    const {isMinimized, expand} = useTabBarMinimized(minimizeOnScroll);\n    const closeSubmenu = () => setSubmenu({anchorElement: null, menuItem: null});\n    const isInside = (menuItem) => menuItem === activeItem || (menuItem.children ?? []).includes(activeItem);\n    const moreHasActive = more.some(isInside);\n    // la cápsula chica enseña dónde está la persona: su pestaña, «Más» si está en algo de ahí, o la primera\n    const activeTab = tabs.find(isInside);\n    const MinimizedIcon = (!activeTab && moreHasActive ? MoreHorizRoundedIcon : (activeTab ?? tabs[0])?.Icon) ?? MoreHorizRoundedIcon;\n    // «Más» suma los conteos de lo que guarda (solo conteos: los de texto no van en la pestaña)\n    const moreCount = more.reduce((total, menuItem) => {\n        const badge = menuBadgeOf(menuItem, menuBadges);\n        return total + (badge?.isCount ? badge.content : 0);\n    }, 0);\n    const moreBadge = moreCount > 0 ? {content: moreCount, isCount: true} : null;\n\n    const glassSurfaceSx = floatingSurfaceOf;\n\n    return (\n        <>\n            <Box component=\"nav\" aria-label={t('drawer.ariaLabel')}\n                 sx={(theme) => ({\n                     display: 'none',\n                     [PHONE_MEDIA_QUERY]: {display: 'flex'},\n                     position: 'fixed', zIndex: theme.zIndex.appBar, gap: 0.75, justifyContent: 'center',\n                     left: GLASS_PANEL_GAP_PIXELS, right: GLASS_PANEL_GAP_PIXELS,\n                     bottom: `calc(${GLASS_PANEL_GAP_PIXELS}px + env(safe-area-inset-bottom))`,\n                     height: MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait,\n                     [PHONE_LANDSCAPE_MEDIA_QUERY]: {height: MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape},\n                 })}>\n                <Box ref={setTabsCapsule} inert={isMinimized}\n                     sx={(theme) => ({...glassSurfaceSx(theme), display: 'flex', flex: 1, maxWidth: TAB_BAR_MAX_WIDTH_PIXELS, p: 0.375,\n                                      ...appearStylesOf(theme, !isMinimized, 'left bottom')})}>\n                    {tabs.map((menuItem) => {\n                        const hasChildren = (menuItem.children ?? []).length > 0;\n                        return (\n                            <TabButton key={menuItem.to ?? menuItem.href ?? menuItemLabelOf(menuItem, t)} label={menuItemLabelOf(menuItem, t)} Icon={menuItem.Icon}\n                                       isActive={isInside(menuItem)} badge={menuBadgeOf(menuItem, menuBadges)} hasPopup={hasChildren}\n                                       linkProps={hasChildren ? {} : menuLinkPropsOf(menuItem, RouterLink)}\n                                       onClick={hasChildren ? (event) => setSubmenu({anchorElement: event.currentTarget, menuItem}) : undefined} />\n                        );\n                    })}\n                    {more.length > 0 && (\n                        <TabButton label={t('drawer.more')} Icon={MoreHorizRoundedIcon} isActive={moreHasActive} badge={moreBadge} hasPopup\n                                   onClick={() => setIsMoreOpen(true)} />\n                    )}\n                </Box>\n                {/* encogida: la cápsula chica en la esquina, con la pestaña de ahorita; tocarla regresa la barra completa */}\n                <ButtonBase inert={!isMinimized} onClick={expand} aria-label={t('drawer.showTabs')} aria-expanded={false}\n                            sx={(theme) => mergeStyles({\n                                ...glassSurfaceSx(theme), position: 'absolute', left: 0, bottom: 0,\n                                width: MINIMIZED_PIXELS.portrait, height: MINIMIZED_PIXELS.portrait,\n                                [PHONE_LANDSCAPE_MEDIA_QUERY]: {width: MINIMIZED_PIXELS.landscape, height: MINIMIZED_PIXELS.landscape},\n                                ...appearStylesOf(theme, isMinimized, 'left bottom'),\n                            }, accentTextStylesOf(theme))}>\n                    <MinimizedIcon sx={{fontSize: TAB_ICON_SIZE}} />\n                </ButtonBase>\n                {account && (\n                    <Box sx={(theme) => ({\n                        ...glassSurfaceSx(theme), flexShrink: 0, minWidth: MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait, px: 0.5, display: 'flex', alignItems: 'center',\n                        justifyContent: 'center', [PHONE_LANDSCAPE_MEDIA_QUERY]: {minWidth: MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape},\n                        '& .MuiButtonBase-root': {color: 'inherit'},\n                        // encogida, la cuenta se queda pero del alto de la cápsula chica, pegada a su esquina\n                        transformOrigin: 'right bottom',\n                        transform: isMinimized ? `scale(${MINIMIZED_PIXELS.portrait / MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait})` : 'none',\n                        transition: theme.transitions.create('transform', {duration: theme.transitions.duration.short}),\n                        ...(isMinimized && {[PHONE_LANDSCAPE_MEDIA_QUERY]: {\n                            minWidth: MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape,\n                            transform: `scale(${MINIMIZED_PIXELS.landscape / MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape})`,\n                        }}),\n                    })}>\n                        {account}\n                    </Box>\n                )}\n            </Box>\n\n            {submenu.menuItem && (\n                <SubmenuActionsMenu anchorElement={submenu.anchorElement} onClose={closeSubmenu} menuItem={submenu.menuItem} activeItem={activeItem}\n                                    menuBadges={menuBadges} placement={SUBMENU_PLACEMENT.above} />\n            )}\n\n            {/* «Más»: el resto del menú en una hoja desde abajo, separada de las orillas como las hojas de iOS */}\n            <Drawer anchor=\"bottom\" open={isMoreOpen} onClose={closeMore}\n                    slotProps={{paper: {sx: {\n                        m: `${GLASS_PANEL_GAP_PIXELS}px auto calc(${GLASS_PANEL_GAP_PIXELS}px + env(safe-area-inset-bottom))`,\n                        width: `min(${MORE_SHEET_MAX_WIDTH_PIXELS}px, calc(100% - ${GLASS_PANEL_GAP_PIXELS * 2}px))`,\n                        maxHeight: MORE_SHEET_MAX_HEIGHT, borderRadius: '20px', overflow: 'hidden',\n                    }}}}>\n                {isEditingTabs ? (\n                    <TabBarEditor menuItems={menuItems} pinnedKeys={tabs.map(menuItemKeyOf)}\n                                  onDone={(keys) => {\n                                      setPinnedKeys(keys);\n                                      onPinnedTabsChange?.(keys);\n                                      leaveEditor();\n                                  }}\n                                  onReset={() => {\n                                      setPinnedKeys(null);\n                                      onPinnedTabsChange?.(null);\n                                      leaveEditor();\n                                  }} />\n                ) : (\n                    <>\n                        <Box sx={{display: 'flex', justifyContent: 'flex-end', px: 1.5, pt: 1, flexShrink: 0}}>\n                            <Button size=\"small\" autoFocus={returnsFromEditor} onClick={() => setIsEditingTabs(true)}>{t('drawer.editTabs')}</Button>\n                        </Box>\n                        <SideMenu menuItems={more} activeItem={activeItem} menuBadges={menuBadges} collapsed={false} showBrand={false} footer={moreFooter}\n                                  onNavigate={closeMore} />\n                    </>\n                )}\n            </Drawer>\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MobileTabBar.js","sources":["../../src/appShell/MobileTabBar.jsx"],"sourcesContent":["// La barra de pestañas del teléfono con vidrio, como la de iOS 26: una cápsula de vidrio flotando abajo con las secciones\n// principales (mobileTabsOf: las que caben a lo ancho, y «Más» con el resto), y aparte, en su círculo de vidrio, la cuenta\n// (con todos los ajustes adentro). La reemplaza a la barra de abajo con ☰ y al cajón del menú (lo pidió el autor: «estilo\n// Apple pero con sus submenús de acciones»). También va con el minimalista cuando la barra va en cápsulas (usesMobileTabBar), sólida y\n// del gris de lo que flota (minimalFloatingStylesOf).\n//\n//   - Una pestaña con submenú no navega: abre el menú de acciones de Apple arriba de ella (SubmenuActionsMenu).\n//   - «Más» abre una hoja desde abajo con el resto del menú, por secciones (SideMenu, el mismo del escritorio). Arriba trae\n//     «Editar la barra»: cada quien elige qué pantallas van abajo (TabBarEditor; se recuerda con usePinnedMobileTabs),\n//     como pide la guía de Apple. Sin elegir, van las que marca el proyecto (mobileTab en menu.js).\n//   - Cada pestaña lleva su badge como los de Apple (HIG «Tab bars»): ROJO con el número en blanco y solo para conteos (lo\n//     pendiente, del servidor); un badge de texto («Nuevo») no va en la pestaña, se queda en el menú: Apple los reserva para\n//     lo que pide atención.\n//   - Cuántas pestañas van se mide (useFittingTabCount): las que caben con al menos MIN_TAB_PIXELS cada una; las demás van\n//     a «Más». En una ventana angosta salen menos y en una ancha más, y los nombres no se cortan («Compone…»).\n//   - Acostado (pantalla bajita), la barra va compacta: ícono y nombre lado a lado, para dejarle el alto al contenido.\n//   - Al leer hacia abajo se encoge (como iOS 26): queda una cápsula chica con la pestaña donde está la persona, y la cuenta\n//     más chica; al subir un poco, o al tocar la cápsula, regresa completa (cuándo: tabBarScroll.js). Se mueve solo con\n//     opacidad y escala, lo que el navegador anima sin volver a acomodar la página: en un teléfono barato no se traba.\n// Solo se ve en el teléfono (PHONE_MEDIA_QUERY); en escritorio no ocupa nada.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMobileTabBar con defaultProps y\n// styleOverrides de sus partes: tab, tabIconPlaceholder, tabLabel, root, bar, minimized, account, sheetHeader.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useLayoutEffect, useState} from 'react';\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Drawer from '@mui/material/Drawer';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\n\nimport {menuItemLabelOf, menuLinkPropsOf} from '@/appShell/menuItemText.js';\nimport {\n    GLASS_PANEL_GAP_PIXELS, MOBILE_TAB_BAR_HEIGHT_PIXELS, PHONE_LANDSCAPE_MEDIA_QUERY, PHONE_MEDIA_QUERY,\n} from '@/appShell/shellSizes.js';\nimport SideMenu from '@/appShell/SideMenu.jsx';\nimport SubmenuActionsMenu, {SUBMENU_PLACEMENT} from '@/appShell/SubmenuActionsMenu.jsx';\nimport TabBarEditor from '@/appShell/TabBarEditor.jsx';\nimport {usePinnedMobileTabs} from '@/appShell/usePinnedMobileTabs.js';\nimport {useTabBarMinimized} from '@/appShell/useTabBarMinimized.js';\nimport {menuBadgeOf, menuItemKeyOf, mobileTabsOf} from '@/navigation/appMenu.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport {minimalFloatingStylesOf} from '@/theme/components/minimalComponents.js';\nimport {accentTextStylesOf, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {mergeStyles} from '@/theme/mergeComponents.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaMobileTabBar)\nconst THEME_NAME = 'CalcitaMobileTabBar';\nconst TabBarTab = piecePart(THEME_NAME, 'Tab', ButtonBase);\nconst TabBarTabIconPlaceholder = piecePart(THEME_NAME, 'TabIconPlaceholder', Box);\nconst TabBarTabLabel = piecePart(THEME_NAME, 'TabLabel', Typography);\nconst TabBarRoot = piecePart(THEME_NAME, 'Root', Box);\nconst TabBarBar = piecePart(THEME_NAME, 'Bar', Box);\nconst TabBarMinimized = piecePart(THEME_NAME, 'Minimized', ButtonBase);\nconst TabBarAccount = piecePart(THEME_NAME, 'Account', Box);\nconst TabBarSheetHeader = piecePart(THEME_NAME, 'SheetHeader', Box);\n\n// el nombre de la pestaña parado y acostado (px), lo ancho máximo de la cápsula y lo alto de la hoja de «Más»\nconst TAB_LABEL_PIXELS = Object.freeze({portrait: 10, landscape: 12});\nconst TAB_ICON_SIZE = '1.5rem';\nconst TAB_BAR_MAX_WIDTH_PIXELS = 560;\n// lo menos que mide una pestaña (px) para que su nombre se lea entero: parada, un nombre de unas 11 letras («Formularios»\n// pide 61 px, medido en Chrome); acostada, ícono y nombre lado a lado. Con menos, la pestaña se va a «Más»\nconst MIN_TAB_PIXELS = Object.freeze({portrait: 60, landscape: 104});\n// antes de medir (o si la barra no se ve): las de siempre, 4 y «Más»\nconst DEFAULT_TAB_COUNT = 5;\nconst MORE_SHEET_MAX_WIDTH_PIXELS = 640;\nconst MORE_SHEET_MAX_HEIGHT = '75vh';\nconst BADGE_MAX = 99;\n// la barra flota sobre el contenido: vidrio más opaco que el de los controles, una línea fina en la orilla y una sombra\n// debajo. Con el vidrio de siempre, en claro se perdía sobre las tarjetas blancas y no parecía flotar (lo reportaron)\nconst FLOATING_GLASS_OPACITY = 0.8;\nconst FLOATING_EDGE = Object.freeze({\n    light: {outline: 'rgba(15, 23, 42, 0.12)', shadow: '0 10px 30px rgba(15, 23, 42, 0.20), 0 2px 6px rgba(15, 23, 42, 0.10)'},\n    dark: {outline: 'rgba(255, 255, 255, 0.16)', shadow: '0 10px 30px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4)'},\n});\n// la pestaña elegida: un tinte del acento (en claro una gota blanca sobre la cápsula blanca no se distinguía)\nconst ACTIVE_TINT_PERCENT = Object.freeze({light: 14, dark: 24});\n// encogida: lo alto de la cápsula chica (px) y a qué tamaño se va lo que desaparece\nconst MINIMIZED_PIXELS = Object.freeze({portrait: 48, landscape: 40});\nconst HIDDEN_SCALE = 0.6;\n\n/**\n * Lo que aparece o desaparece al encoger la barra: solo opacidad y escala. visibility espera a que termine la animación\n * para esconderlo, y así lo que ya no se ve tampoco se puede tocar.\n *\n * @param {object} theme\n * @param {boolean} isShown\n * @param {string} transformOrigin hacia dónde se encoge ('left bottom')\n * @returns {object}\n */\nfunction appearStylesOf(theme, isShown, transformOrigin) {\n    const duration = theme.transitions.duration.short;\n    return {\n        transformOrigin,\n        opacity: isShown ? 1 : 0,\n        transform: isShown ? 'none' : `scale(${HIDDEN_SCALE})`,\n        visibility: isShown ? 'visible' : 'hidden',\n        transition: `${theme.transitions.create(['opacity', 'transform'], {duration})}, visibility 0s linear ${isShown ? 0 : duration}ms`,\n    };\n}\n\n/**\n * La superficie de la barra y del círculo de la cuenta: vidrio más opaco, su línea fina y su sombra (la sombra va en una\n * capa detrás, ::before, para no pisar el filo de luz del vidrio, que también es una sombra). Con el minimalista, sólida.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction floatingSurfaceOf(theme) {\n    // con el minimalista (barra en cápsulas) la barra es sólida: su gris de lo que flota, sin línea ni sombra\n    if (!isGlassTheme(theme)) {\n        return {...minimalFloatingStylesOf(theme), position: 'relative', borderRadius: '999px', height: '100%'};\n    }\n    return {\n        ...glassStylesOf(theme, {opacity: FLOATING_GLASS_OPACITY}),\n        position: 'relative',\n        borderRadius: '999px',\n        height: '100%',\n        outline: `1px solid ${FLOATING_EDGE.light.outline}`,\n        '&::before': {\n            content: '\"\"', position: 'absolute', inset: 0, borderRadius: 'inherit', zIndex: -1, pointerEvents: 'none',\n            boxShadow: FLOATING_EDGE.light.shadow,\n        },\n        ...theme.applyStyles('dark', {\n            outline: `1px solid ${FLOATING_EDGE.dark.outline}`,\n            '&::before': {boxShadow: FLOATING_EDGE.dark.shadow},\n        }),\n    };\n}\n\n/**\n * La pestaña elegida: el tinte del acento y su letra legible.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction activeTabOf(theme) {\n    const primary = (theme.vars ?? theme).palette.primary.main;\n    return mergeStyles({\n        backgroundColor: `color-mix(in srgb, ${primary} ${ACTIVE_TINT_PERCENT.light}%, transparent)`,\n        ...theme.applyStyles('dark', {backgroundColor: `color-mix(in srgb, ${primary} ${ACTIVE_TINT_PERCENT.dark}%, transparent)`}),\n    }, accentTextStylesOf(theme));\n}\n\n/**\n * Una pestaña: liga a su pantalla o, con submenú, botón que abre el menú de acciones.\n *\n * @param {object} props\n * @param {string} props.label ya traducido\n * @param {import('react').ElementType} [props.Icon]\n * @param {boolean} props.isActive\n * @param {{content: number|string, isCount: boolean}|null} props.badge\n * @param {object} [props.linkProps] {component, to} si navega\n * @param {(event: object) => void} [props.onClick]\n * @param {boolean} [props.hasPopup] abre un menú\n */\nfunction TabButton({label, Icon, isActive, badge, linkProps = {}, onClick, hasPopup = false}) {\n    return (\n        <TabBarTab {...linkProps} onClick={onClick} aria-haspopup={hasPopup ? 'menu' : undefined} aria-current={isActive ? 'page' : undefined}\n                    ownSx={(theme) => mergeStyles({\n                        flex: '1 1 0', minWidth: 0, height: '100%', borderRadius: '999px', px: 0,\n                        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 0.25,\n                        color: 'text.primary',\n                        transition: theme.transitions.create(['background-color', 'color'], {duration: theme.transitions.duration.shortest}),\n                        [PHONE_LANDSCAPE_MEDIA_QUERY]: {flexDirection: 'row', gap: 0.75},\n                    }, isActive ? activeTabOf(theme) : {})}>\n            <Badge invisible={!badge?.isCount} color=\"error\" max={BADGE_MAX} overlap=\"circular\" badgeContent={badge?.isCount ? badge.content : undefined}>\n                {Icon ? <Icon sx={{fontSize: TAB_ICON_SIZE}} /> : <TabBarTabIconPlaceholder ownSx={{width: TAB_ICON_SIZE, height: TAB_ICON_SIZE}} />}\n            </Badge>\n            <TabBarTabLabel component=\"span\" noWrap\n                        ownSx={{...textSizeOf(TAB_LABEL_PIXELS.portrait), fontWeight: 500, maxWidth: '100%',\n                             [PHONE_LANDSCAPE_MEDIA_QUERY]: textSizeOf(TAB_LABEL_PIXELS.landscape)}}>\n                {label}\n            </TabBarTabLabel>\n        </TabBarTab>\n    );\n}\n\n/**\n * Cuántas pestañas caben en la cápsula (contando «Más»). Se mide la cápsula, que no cambia de ancho con sus pestañas (se\n * estira hasta su tope), así que la cuenta no da vueltas. Se vuelve a medir al girar el teléfono o cambiar la ventana.\n *\n * @param {HTMLElement|null} capsule\n * @param {number} minTabPixels lo menos que mide una pestaña\n * @returns {number}\n */\nfunction useFittingTabCount(capsule, minTabPixels) {\n    const [tabCount, setTabCount] = useState(DEFAULT_TAB_COUNT);\n    // antes de pintar: así no se ve un momento con las pestañas apretadas\n    useLayoutEffect(() => {\n        if (!capsule) {\n            return undefined;\n        }\n        const measure = () => {\n            const style = window.getComputedStyle(capsule);\n            const innerWidth = capsule.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);\n            // en escritorio la barra no se ve (ancho 0): se quedan las de siempre\n            if (innerWidth > 0) {\n                setTabCount(Math.max(2, Math.floor(innerWidth / minTabPixels)));\n            }\n        };\n        measure();\n        const observer = new ResizeObserver(measure);\n        observer.observe(capsule);\n        return () => observer.disconnect();\n    }, [capsule, minTabPixels]);\n    return tabCount;\n}\n\n/**\n * @param {object} props\n * @param {object[]} props.menuItems lo que regresa composeMenu\n * @param {object|null} props.activeItem la entrada de la pantalla abierta\n * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey\n * @param {import('react').ReactNode} [props.account] la cuenta (o el engrane), en su círculo junto a la barra\n * @param {import('react').ReactNode} [props.moreFooter] lo que va al final de la hoja de «Más» (la tarjeta del menú lateral)\n * @param {boolean} [props.minimizeOnScroll] se encoge al leer hacia abajo; por omisión sí\n * @param {(keys: string[]|null) => void} [props.onPinnedTabsChange] la persona eligió sus pestañas (null: regresó a las de\n *     omisión)\n */\nexport default function MobileTabBar(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMobileTabBar.defaultProps) y encima lo que llega aquí\n    const {menuItems, activeItem, menuBadges, account, moreFooter, minimizeOnScroll = true, onPinnedTabsChange} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const {pinnedKeys, setPinnedKeys} = usePinnedMobileTabs();\n    const [tabsCapsule, setTabsCapsule] = useState(null);\n    const isLandscape = useMediaQuery(PHONE_LANDSCAPE_MEDIA_QUERY);\n    const tabCount = useFittingTabCount(tabsCapsule, isLandscape ? MIN_TAB_PIXELS.landscape : MIN_TAB_PIXELS.portrait);\n    const {tabs, more} = mobileTabsOf(menuItems, pinnedKeys, tabCount);\n    const [submenu, setSubmenu] = useState({anchorElement: null, menuItem: null});\n    const [isMoreOpen, setIsMoreOpen] = useState(false);\n    const [isEditingTabs, setIsEditingTabs] = useState(false);\n    // al salir del editor su botón desaparece con el foco adentro: el foco regresa a «Editar la barra» (sin eso se perdía\n    // y Escape ya no cerraba la hoja; también lo necesita quien usa lector de pantalla)\n    const [returnsFromEditor, setReturnsFromEditor] = useState(false);\n    const leaveEditor = () => {\n        setIsEditingTabs(false);\n        setReturnsFromEditor(true);\n    };\n    const closeMore = () => {\n        setIsMoreOpen(false);\n        setIsEditingTabs(false);\n        setReturnsFromEditor(false);\n    };\n    const {isMinimized, expand} = useTabBarMinimized(minimizeOnScroll);\n    const closeSubmenu = () => setSubmenu({anchorElement: null, menuItem: null});\n    const isInside = (menuItem) => menuItem === activeItem || (menuItem.children ?? []).includes(activeItem);\n    const moreHasActive = more.some(isInside);\n    // la cápsula chica enseña dónde está la persona: su pestaña, «Más» si está en algo de ahí, o la primera\n    const activeTab = tabs.find(isInside);\n    const MinimizedIcon = (!activeTab && moreHasActive ? MoreHorizRoundedIcon : (activeTab ?? tabs[0])?.Icon) ?? MoreHorizRoundedIcon;\n    // «Más» suma los conteos de lo que guarda (solo conteos: los de texto no van en la pestaña)\n    const moreCount = more.reduce((total, menuItem) => {\n        const badge = menuBadgeOf(menuItem, menuBadges);\n        return total + (badge?.isCount ? badge.content : 0);\n    }, 0);\n    const moreBadge = moreCount > 0 ? {content: moreCount, isCount: true} : null;\n\n    const glassSurfaceSx = floatingSurfaceOf;\n\n    return (\n        <>\n            <TabBarRoot component=\"nav\" aria-label={t('drawer.ariaLabel')}\n                 ownSx={(theme) => ({\n                     display: 'none',\n                     [PHONE_MEDIA_QUERY]: {display: 'flex'},\n                     position: 'fixed', zIndex: theme.zIndex.appBar, gap: 0.75, justifyContent: 'center',\n                     left: GLASS_PANEL_GAP_PIXELS, right: GLASS_PANEL_GAP_PIXELS,\n                     bottom: `calc(${GLASS_PANEL_GAP_PIXELS}px + env(safe-area-inset-bottom))`,\n                     height: MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait,\n                     [PHONE_LANDSCAPE_MEDIA_QUERY]: {height: MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape},\n                 })}>\n                <TabBarBar ref={setTabsCapsule} inert={isMinimized}\n                     ownSx={(theme) => ({...glassSurfaceSx(theme), display: 'flex', flex: 1, maxWidth: TAB_BAR_MAX_WIDTH_PIXELS, p: 0.375,\n                                      ...appearStylesOf(theme, !isMinimized, 'left bottom')})}>\n                    {tabs.map((menuItem) => {\n                        const hasChildren = (menuItem.children ?? []).length > 0;\n                        return (\n                            <TabButton key={menuItem.to ?? menuItem.href ?? menuItemLabelOf(menuItem, t)} label={menuItemLabelOf(menuItem, t)} Icon={menuItem.Icon}\n                                       isActive={isInside(menuItem)} badge={menuBadgeOf(menuItem, menuBadges)} hasPopup={hasChildren}\n                                       linkProps={hasChildren ? {} : menuLinkPropsOf(menuItem, RouterLink)}\n                                       onClick={hasChildren ? (event) => setSubmenu({anchorElement: event.currentTarget, menuItem}) : undefined} />\n                        );\n                    })}\n                    {more.length > 0 && (\n                        <TabButton label={t('drawer.more')} Icon={MoreHorizRoundedIcon} isActive={moreHasActive} badge={moreBadge} hasPopup\n                                   onClick={() => setIsMoreOpen(true)} />\n                    )}\n                </TabBarBar>\n                {/* encogida: la cápsula chica en la esquina, con la pestaña de ahorita; tocarla regresa la barra completa */}\n                <TabBarMinimized inert={!isMinimized} onClick={expand} aria-label={t('drawer.showTabs')} aria-expanded={false}\n                            ownSx={(theme) => mergeStyles({\n                                ...glassSurfaceSx(theme), position: 'absolute', left: 0, bottom: 0,\n                                width: MINIMIZED_PIXELS.portrait, height: MINIMIZED_PIXELS.portrait,\n                                [PHONE_LANDSCAPE_MEDIA_QUERY]: {width: MINIMIZED_PIXELS.landscape, height: MINIMIZED_PIXELS.landscape},\n                                ...appearStylesOf(theme, isMinimized, 'left bottom'),\n                            }, accentTextStylesOf(theme))}>\n                    <MinimizedIcon sx={{fontSize: TAB_ICON_SIZE}} />\n                </TabBarMinimized>\n                {account && (\n                    <TabBarAccount ownSx={(theme) => ({\n                        ...glassSurfaceSx(theme), flexShrink: 0, minWidth: MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait, px: 0.5, display: 'flex', alignItems: 'center',\n                        justifyContent: 'center', [PHONE_LANDSCAPE_MEDIA_QUERY]: {minWidth: MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape},\n                        '& .MuiButtonBase-root': {color: 'inherit'},\n                        // encogida, la cuenta se queda pero del alto de la cápsula chica, pegada a su esquina\n                        transformOrigin: 'right bottom',\n                        transform: isMinimized ? `scale(${MINIMIZED_PIXELS.portrait / MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait})` : 'none',\n                        transition: theme.transitions.create('transform', {duration: theme.transitions.duration.short}),\n                        ...(isMinimized && {[PHONE_LANDSCAPE_MEDIA_QUERY]: {\n                            minWidth: MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape,\n                            transform: `scale(${MINIMIZED_PIXELS.landscape / MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape})`,\n                        }}),\n                    })}>\n                        {account}\n                    </TabBarAccount>\n                )}\n            </TabBarRoot>\n\n            {submenu.menuItem && (\n                <SubmenuActionsMenu anchorElement={submenu.anchorElement} onClose={closeSubmenu} menuItem={submenu.menuItem} activeItem={activeItem}\n                                    menuBadges={menuBadges} placement={SUBMENU_PLACEMENT.above} />\n            )}\n\n            {/* «Más»: el resto del menú en una hoja desde abajo, separada de las orillas como las hojas de iOS */}\n            <Drawer anchor=\"bottom\" open={isMoreOpen} onClose={closeMore}\n                    slotProps={{paper: {sx: {\n                        m: `${GLASS_PANEL_GAP_PIXELS}px auto calc(${GLASS_PANEL_GAP_PIXELS}px + env(safe-area-inset-bottom))`,\n                        width: `min(${MORE_SHEET_MAX_WIDTH_PIXELS}px, calc(100% - ${GLASS_PANEL_GAP_PIXELS * 2}px))`,\n                        maxHeight: MORE_SHEET_MAX_HEIGHT, borderRadius: '20px', overflow: 'hidden',\n                    }}}}>\n                {isEditingTabs ? (\n                    <TabBarEditor menuItems={menuItems} pinnedKeys={tabs.map(menuItemKeyOf)}\n                                  onDone={(keys) => {\n                                      setPinnedKeys(keys);\n                                      onPinnedTabsChange?.(keys);\n                                      leaveEditor();\n                                  }}\n                                  onReset={() => {\n                                      setPinnedKeys(null);\n                                      onPinnedTabsChange?.(null);\n                                      leaveEditor();\n                                  }} />\n                ) : (\n                    <>\n                        <TabBarSheetHeader ownSx={{display: 'flex', justifyContent: 'flex-end', px: 1.5, pt: 1, flexShrink: 0}}>\n                            <Button size=\"small\" autoFocus={returnsFromEditor} onClick={() => setIsEditingTabs(true)}>{t('drawer.editTabs')}</Button>\n                        </TabBarSheetHeader>\n                        <SideMenu menuItems={more} activeItem={activeItem} menuBadges={menuBadges} collapsed={false} showBrand={false} footer={moreFooter}\n                                  onNavigate={closeMore} />\n                    </>\n                )}\n            </Drawer>\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/appShell/SettingsMenu.js

@@ -10,7 +10,11 @@ import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import AppearanceSettings from "./AppearanceSettings.js";
 import { barMenuPlacementOf } from "./barMenuPlacement.js";
 import MenuLinks from "./MenuLinks.js";
-function SettingsMenu({ showFontSize = true, showLanguage = true, showColorScheme = true, extraSettings, menuLinks = [] }) {
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaSettingsMenu";
+const SettingsDivider = piecePart(THEME_NAME, "Divider", Divider);
+function SettingsMenu(props) {
+  const { showFontSize = true, showLanguage = true, showColorScheme = true, extraSettings, menuLinks = [] } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("layout");
   const [anchorElement, setAnchorElement] = useState(null);
   const placement = barMenuPlacementOf(anchorElement);
@@ -30,10 +34,10 @@ function SettingsMenu({ showFontSize = true, showLanguage = true, showColorSchem
         children: [
           hasAppearance && /* @__PURE__ */ jsx(AppearanceSettings, { showFontSize, showLanguage, showColorScheme }),
           extraSettings && /* @__PURE__ */ jsxs(Fragment, { children: [
-            hasAppearance && /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }),
+            hasAppearance && /* @__PURE__ */ jsx(SettingsDivider, { ownSx: { my: 0.5 } }),
             extraSettings
           ] }),
-          menuLinks.length > 0 && (hasAppearance || extraSettings) && /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }),
+          menuLinks.length > 0 && (hasAppearance || extraSettings) && /* @__PURE__ */ jsx(SettingsDivider, { ownSx: { my: 0.5 } }),
           /* @__PURE__ */ jsx(MenuLinks, { links: menuLinks, onClose: closeMenu })
         ]
       }

package/dist/appShell/SettingsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsMenu.js","sources":["../../src/appShell/SettingsMenu.jsx"],"sourcesContent":["// Los ajustes sin sesión (del marco de walk-ot): tres botones de configuración que casi no se usan van juntos detrás de un\n// engrane (AppearanceSettings: tamaño de letra, idioma y claro / oscuro), con los del proyecto y sus ligas (las de la cuenta:\n// sin sesión siguen a la mano, como «Regresar al sistema»).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Divider from '@mui/material/Divider';\nimport Menu from '@mui/material/Menu';\nimport Tooltip from '@mui/material/Tooltip';\nimport SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';\n\nimport AppearanceSettings from '@/appShell/AppearanceSettings.jsx';\nimport {barMenuPlacementOf} from '@/appShell/barMenuPlacement.js';\nimport MenuLinks from '@/appShell/MenuLinks.jsx';\n\n/**\n * @param {object} props\n * @param {boolean} [props.showFontSize]\n * @param {boolean} [props.showLanguage]\n * @param {boolean} [props.showColorScheme]\n * @param {import('react').ReactNode} [props.extraSettings] los ajustes del proyecto, debajo de los del paquete\n * @param {object[]} [props.menuLinks] las ligas propias (accountMenuItems), al final\n */\nexport default function SettingsMenu({showFontSize = true, showLanguage = true, showColorScheme = true, extraSettings, menuLinks = []}) {\n    const {t} = useToolkitTranslation('layout');\n    const [anchorElement, setAnchorElement] = useState(null);\n    // hacia arriba si la barra está abajo (teléfono con vidrio)\n    const placement = barMenuPlacementOf(anchorElement);\n    const hasAppearance = showFontSize || showLanguage || showColorScheme;\n    const closeMenu = () => setAnchorElement(null);\n\n    return (\n        <>\n            <Tooltip title={t('settings.open')}>\n                <IconButton size=\"small\" aria-label={t('settings.open')} aria-haspopup=\"menu\" onClick={(event) => setAnchorElement(event.currentTarget)}>\n                    <SettingsOutlinedIcon fontSize=\"small\" />\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={closeMenu}\n                  anchorOrigin={placement.anchorOrigin} transformOrigin={placement.transformOrigin}\n                  slotProps={{paper: {sx: {minWidth: 280, maxWidth: 360, py: 0.5, ...placement.gapSx}}}}>\n                {hasAppearance && <AppearanceSettings showFontSize={showFontSize} showLanguage={showLanguage} showColorScheme={showColorScheme} />}\n                {extraSettings && <>{hasAppearance && <Divider sx={{my: 0.5}} />}{extraSettings}</>}\n                {menuLinks.length > 0 && (hasAppearance || extraSettings) && <Divider sx={{my: 0.5}} />}\n                <MenuLinks links={menuLinks} onClose={closeMenu} />\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAyBA,SAAwB,aAAa,EAAC,eAAe,MAAM,eAAe,MAAM,kBAAkB,MAAM,eAAe,YAAY,CAAA,EAAC,GAAI;AACpI,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AAEvD,QAAM,YAAY,mBAAmB,aAAa;AAClD,QAAM,gBAAgB,gBAAgB,gBAAgB;AACtD,QAAM,YAAY,MAAM,iBAAiB,IAAI;AAE7C,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,EAAE,eAAe,GAC7B,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,EAAE,eAAe,GAAG,iBAAc,QAAO,SAAS,CAAC,UAAU,iBAAiB,MAAM,aAAa,GAClI,UAAA,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ,EAAA,CAC3C,GACJ;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAK,UAAU;AAAA,QAAe,MAAM,QAAQ,aAAa;AAAA,QAAG,SAAS;AAAA,QAChE,cAAc,UAAU;AAAA,QAAc,iBAAiB,UAAU;AAAA,QACjE,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,KAAK,UAAU,KAAK,IAAI,KAAK,GAAG,UAAU,MAAA,IAAM;AAAA,QACpF,UAAA;AAAA,UAAA,iBAAiB,oBAAC,oBAAA,EAAmB,cAA4B,cAA4B,iBAAkC;AAAA,UAC/H,iBAAiB,qBAAA,UAAA,EAAG,UAAA;AAAA,YAAA,qCAAkB,SAAA,EAAQ,IAAI,EAAC,IAAI,OAAM;AAAA,YAAI;AAAA,UAAA,GAAc;AAAA,UAC/E,UAAU,SAAS,MAAM,iBAAiB,kBAAkB,oBAAC,SAAA,EAAQ,IAAI,EAAC,IAAI,IAAA,EAAG,CAAG;AAAA,UACrF,oBAAC,WAAA,EAAU,OAAO,WAAW,SAAS,UAAA,CAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACrD,GACJ;AAER;"}
+{"version":3,"file":"SettingsMenu.js","sources":["../../src/appShell/SettingsMenu.jsx"],"sourcesContent":["// Los ajustes sin sesión (del marco de walk-ot): tres botones de configuración que casi no se usan van juntos detrás de un\n// engrane (AppearanceSettings: tamaño de letra, idioma y claro / oscuro), con los del proyecto y sus ligas (las de la cuenta:\n// sin sesión siguen a la mano, como «Regresar al sistema»).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSettingsMenu con defaultProps y\n// styleOverrides de sus partes: divider.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Divider from '@mui/material/Divider';\nimport Menu from '@mui/material/Menu';\nimport Tooltip from '@mui/material/Tooltip';\nimport SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';\n\nimport AppearanceSettings from '@/appShell/AppearanceSettings.jsx';\nimport {barMenuPlacementOf} from '@/appShell/barMenuPlacement.js';\nimport MenuLinks from '@/appShell/MenuLinks.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSettingsMenu)\nconst THEME_NAME = 'CalcitaSettingsMenu';\nconst SettingsDivider = piecePart(THEME_NAME, 'Divider', Divider);\n\n/**\n * @param {object} props\n * @param {boolean} [props.showFontSize]\n * @param {boolean} [props.showLanguage]\n * @param {boolean} [props.showColorScheme]\n * @param {import('react').ReactNode} [props.extraSettings] los ajustes del proyecto, debajo de los del paquete\n * @param {object[]} [props.menuLinks] las ligas propias (accountMenuItems), al final\n */\nexport default function SettingsMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSettingsMenu.defaultProps) y encima lo que llega aquí\n    const {showFontSize = true, showLanguage = true, showColorScheme = true, extraSettings, menuLinks = []} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout');\n    const [anchorElement, setAnchorElement] = useState(null);\n    // hacia arriba si la barra está abajo (teléfono con vidrio)\n    const placement = barMenuPlacementOf(anchorElement);\n    const hasAppearance = showFontSize || showLanguage || showColorScheme;\n    const closeMenu = () => setAnchorElement(null);\n\n    return (\n        <>\n            <Tooltip title={t('settings.open')}>\n                <IconButton size=\"small\" aria-label={t('settings.open')} aria-haspopup=\"menu\" onClick={(event) => setAnchorElement(event.currentTarget)}>\n                    <SettingsOutlinedIcon fontSize=\"small\" />\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={closeMenu}\n                  anchorOrigin={placement.anchorOrigin} transformOrigin={placement.transformOrigin}\n                  slotProps={{paper: {sx: {minWidth: 280, maxWidth: 360, py: 0.5, ...placement.gapSx}}}}>\n                {hasAppearance && <AppearanceSettings showFontSize={showFontSize} showLanguage={showLanguage} showColorScheme={showColorScheme} />}\n                {extraSettings && <>{hasAppearance && <SettingsDivider ownSx={{my: 0.5}} />}{extraSettings}</>}\n                {menuLinks.length > 0 && (hasAppearance || extraSettings) && <SettingsDivider ownSx={{my: 0.5}} />}\n                <MenuLinks links={menuLinks} onClose={closeMenu} />\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,WAAW,OAAO;AAUhE,SAAwB,aAAa,OAAO;AAExC,QAAM,EAAC,eAAe,MAAM,eAAe,MAAM,kBAAkB,MAAM,eAAe,YAAY,CAAA,EAAC,IAAK,cAAc,OAAO,UAAU;AACzI,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AAEvD,QAAM,YAAY,mBAAmB,aAAa;AAClD,QAAM,gBAAgB,gBAAgB,gBAAgB;AACtD,QAAM,YAAY,MAAM,iBAAiB,IAAI;AAE7C,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,EAAE,eAAe,GAC7B,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,EAAE,eAAe,GAAG,iBAAc,QAAO,SAAS,CAAC,UAAU,iBAAiB,MAAM,aAAa,GAClI,UAAA,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ,EAAA,CAC3C,GACJ;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAK,UAAU;AAAA,QAAe,MAAM,QAAQ,aAAa;AAAA,QAAG,SAAS;AAAA,QAChE,cAAc,UAAU;AAAA,QAAc,iBAAiB,UAAU;AAAA,QACjE,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,KAAK,UAAU,KAAK,IAAI,KAAK,GAAG,UAAU,MAAA,IAAM;AAAA,QACpF,UAAA;AAAA,UAAA,iBAAiB,oBAAC,oBAAA,EAAmB,cAA4B,cAA4B,iBAAkC;AAAA,UAC/H,iBAAiB,qBAAA,UAAA,EAAG,UAAA;AAAA,YAAA,qCAAkB,iBAAA,EAAgB,OAAO,EAAC,IAAI,OAAM;AAAA,YAAI;AAAA,UAAA,GAAc;AAAA,UAC1F,UAAU,SAAS,MAAM,iBAAiB,kBAAkB,oBAAC,iBAAA,EAAgB,OAAO,EAAC,IAAI,IAAA,EAAG,CAAG;AAAA,UAChG,oBAAC,WAAA,EAAU,OAAO,WAAW,SAAS,UAAA,CAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACrD,GACJ;AAER;"}

package/dist/appShell/SideMenu.js

@@ -19,18 +19,35 @@ import Wordmark from "./Wordmark.js";
 import { APP_BAR_HEIGHT_PIXELS } from "./shellSizes.js";
 import SideMenuEntry from "./SideMenuEntry.js";
 import { isGlassTheme, glassStylesOf } from "../theme/glassSurface.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaSideMenu";
+const MenuScrollArrow = piecePart(THEME_NAME, "ScrollArrow", IconButton);
+const MenuRoot = piecePart(THEME_NAME, "Root", Box);
+const MenuBrand = piecePart(THEME_NAME, "Brand", ButtonBase);
+const MenuBrandLogo = piecePart(THEME_NAME, "BrandLogo", Box);
+const MenuBrandText = piecePart(THEME_NAME, "BrandText", Box);
+const MenuBrandName = piecePart(THEME_NAME, "BrandName", Typography);
+const MenuBrandCaption = piecePart(THEME_NAME, "BrandCaption", Typography);
+const MenuRailTop = piecePart(THEME_NAME, "RailTop", Box);
+const MenuListArea = piecePart(THEME_NAME, "ListArea", Box);
+const MenuList = piecePart(THEME_NAME, "List", List);
+const MenuSection = piecePart(THEME_NAME, "Section", Box);
+const MenuSectionTitle = piecePart(THEME_NAME, "SectionTitle", ListSubheader);
+const MenuSectionTitleText = piecePart(THEME_NAME, "SectionTitleText", Box);
+const MenuFooter = piecePart(THEME_NAME, "Footer", Box);
+const MenuRailBottom = piecePart(THEME_NAME, "RailBottom", Box);
 const SCROLL_FADE_PIXELS = 28;
 const MINIMAL_LOOK = "minimal";
 const SCROLL_ARROW_INSET_PIXELS = 4;
 const SCROLL_STEP_OVERLAP_PIXELS = 44;
 function ScrollArrow({ label, onClick, sx, children }) {
   return /* @__PURE__ */ jsx(Tooltip, { title: label, placement: "right", children: /* @__PURE__ */ jsx(
-    IconButton,
+    MenuScrollArrow,
     {
       size: "small",
       "aria-label": label,
       onClick,
-      sx: [(theme) => ({
+      ownSx: [(theme) => ({
         position: "absolute",
         left: "50%",
         transform: "translateX(-50%)",
@@ -46,22 +63,23 @@ function ScrollArrow({ label, onClick, sx, children }) {
 }
 const BRAND_LEFT_PADDING = "18px";
 const SECTION_TITLE_FONT_REM = Object.freeze({ solid: 0.6875, glass: 0.75 });
-function SideMenu({
-  logo,
-  wordmark,
-  brandName,
-  brandCaption,
-  homePath,
-  menuItems,
-  activeItem,
-  collapsed,
-  footer,
-  showBrand = true,
-  onNavigate,
-  railTop,
-  railBottom,
-  menuBadges
-}) {
+function SideMenu(props) {
+  const {
+    logo,
+    wordmark,
+    brandName,
+    brandCaption,
+    homePath,
+    menuItems,
+    activeItem,
+    collapsed,
+    footer,
+    showBrand = true,
+    onNavigate,
+    railTop,
+    railBottom,
+    menuBadges
+  } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("layout");
   const { Link: RouterLink } = useToolkitNavigation();
   const theme = useTheme();
@@ -93,16 +111,16 @@ function SideMenu({
   return (
     // OJO: flex y no height 100%: dentro de la hoja de «Más» (que solo tiene alto máximo) un 100 % no se resuelve, el menú
     // crecía sin límite y la hoja no se deslizaba (lo reportaron con el teléfono acostado)
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsxs(MenuRoot, { ownSx: { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0 }, children: [
       showBrand && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
-          ButtonBase,
+          MenuBrand,
           {
             component: RouterLink,
             to: homePath,
             onClick: onNavigate,
             "aria-label": brandName,
-            sx: {
+            ownSx: {
               display: "flex",
               justifyContent: "flex-start",
               alignItems: "center",
@@ -113,27 +131,27 @@ function SideMenu({
               flexShrink: 0
             },
             children: wordmark ? /* @__PURE__ */ jsx(Wordmark, { children: wordmark }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Box, { sx: { width: 28, height: 28, flex: "0 0 auto", display: "flex", alignItems: "center", justifyContent: "center" }, children: logo }),
-              /* @__PURE__ */ jsxs(Box, { sx: (theme2) => ({ minWidth: 0, textAlign: "left", ...fadeWhenCollapsed(theme2) }), children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", component: "span", noWrap: true, sx: { display: "block", fontWeight: 600, lineHeight: 1.3 }, children: brandName }),
-                brandCaption && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", color: "text.secondary", noWrap: true, sx: { display: "block", lineHeight: 1.3 }, children: brandCaption })
+              /* @__PURE__ */ jsx(MenuBrandLogo, { ownSx: { width: 28, height: 28, flex: "0 0 auto", display: "flex", alignItems: "center", justifyContent: "center" }, children: logo }),
+              /* @__PURE__ */ jsxs(MenuBrandText, { ownSx: (theme2) => ({ minWidth: 0, textAlign: "left", ...fadeWhenCollapsed(theme2) }), children: [
+                /* @__PURE__ */ jsx(MenuBrandName, { variant: "subtitle2", component: "span", noWrap: true, ownSx: { display: "block", fontWeight: 600, lineHeight: 1.3 }, children: brandName }),
+                brandCaption && /* @__PURE__ */ jsx(MenuBrandCaption, { variant: "caption", component: "span", color: "text.secondary", noWrap: true, ownSx: { display: "block", lineHeight: 1.3 }, children: brandCaption })
               ] })
             ] })
           }
         ),
         /* @__PURE__ */ jsx(Divider, {})
       ] }),
-      railTop && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, pt: 1.25, pb: 0.5, flexShrink: 0 }, children: railTop }),
-      /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+      railTop && /* @__PURE__ */ jsx(MenuRailTop, { ownSx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, pt: 1.25, pb: 0.5, flexShrink: 0 }, children: railTop }),
+      /* @__PURE__ */ jsxs(MenuListArea, { ownSx: { position: "relative", flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
         /* @__PURE__ */ jsxs(
-          List,
+          MenuList,
           {
             ref: listRef,
             component: "nav",
             "aria-label": t("drawer.ariaLabel"),
             dense: true,
             disablePadding: true,
-            sx: {
+            ownSx: {
               px: 1,
               pt: 1,
               pb: 2,
@@ -151,17 +169,17 @@ function SideMenu({
               "&::-webkit-scrollbar": { display: "none" }
             },
             children: [
-              menuSectionsOf(menuItems, t).map((section, sectionIndex) => /* @__PURE__ */ jsx(Box, { component: "li", sx: { listStyle: "none" }, children: /* @__PURE__ */ jsx(
+              menuSectionsOf(menuItems, t).map((section, sectionIndex) => /* @__PURE__ */ jsx(MenuSection, { component: "li", ownSx: { listStyle: "none" }, children: /* @__PURE__ */ jsx(
                 List,
                 {
                   dense: true,
                   disablePadding: true,
                   subheader: section.title ? /* @__PURE__ */ jsx(
-                    ListSubheader,
+                    MenuSectionTitle,
                     {
                       disableSticky: true,
                       component: "div",
-                      sx: (theme2) => ({
+                      ownSx: (theme2) => ({
                         position: "relative",
                         bgcolor: "transparent",
                         px: 1.5,
@@ -186,7 +204,7 @@ function SideMenu({
                           transition: theme2.transitions.create("opacity")
                         }
                       }),
-                      children: /* @__PURE__ */ jsx(Box, { component: "span", sx: fadeWhenCollapsed, children: section.title })
+                      children: /* @__PURE__ */ jsx(MenuSectionTitleText, { component: "span", ownSx: fadeWhenCollapsed, children: section.title })
                     }
                   ) : null,
                   children: section.menuItems.map((menuItem) => /* @__PURE__ */ jsx(
@@ -202,14 +220,14 @@ function SideMenu({
                   ))
                 }
               ) }, section.title ?? `section-${sectionIndex}`)),
-              footer && /* @__PURE__ */ jsx(Box, { component: "li", sx: { listStyle: "none", pt: 2, px: 0.5, display: collapsed ? "none" : "block" }, children: footer })
+              footer && /* @__PURE__ */ jsx(MenuFooter, { component: "li", ownSx: { listStyle: "none", pt: 2, px: 0.5, display: collapsed ? "none" : "block" }, children: footer })
             ]
           }
         ),
         hiddenEdges.top && /* @__PURE__ */ jsx(ScrollArrow, { label: t("drawer.scrollUp"), onClick: () => scrollMenu(-1), sx: { top: SCROLL_ARROW_INSET_PIXELS }, children: /* @__PURE__ */ jsx(KeyboardArrowUpRoundedIcon, { fontSize: "small" }) }),
         hiddenEdges.bottom && /* @__PURE__ */ jsx(ScrollArrow, { label: t("drawer.scrollDown"), onClick: () => scrollMenu(1), sx: { bottom: SCROLL_ARROW_INSET_PIXELS }, children: /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" }) })
       ] }),
-      railBottom && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", pt: 1, pb: 1.25, flexShrink: 0, borderTop: 1, borderColor: "divider" }, children: railBottom })
+      railBottom && /* @__PURE__ */ jsx(MenuRailBottom, { ownSx: { display: "flex", justifyContent: "center", pt: 1, pb: 1.25, flexShrink: 0, borderTop: 1, borderColor: "divider" }, children: railBottom })
     ] })
   );
 }

package/dist/appShell/SideMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenu.js","sources":["../../src/appShell/SideMenu.jsx"],"sourcesContent":["// Lo de adentro del menú lateral (el fijo de escritorio y el cajón del teléfono): arriba el logo y el nombre de la app\n// (solo en el cajón del teléfono: en escritorio van en la barra), en medio las secciones del menú (composeMenu, con el\n// título de cada sección) y abajo lo que el proyecto quiera (sidebarFooter: una tarjeta de ayuda, el plan contratado…).\n//\n// Es una columna de toda la altura: el menú crece y se desliza solo, y el pie se queda abajo.\n// Encogido (solo íconos): el título de cada sección se vuelve una rayita del mismo alto (los huecos entre secciones se\n// quedan parejos y nada brinca al abrirlo), el pie se quita (escondido seguía ocupando su lugar y sacaba la barra de\n// desplazamiento). La barra de desplazamiento no se pinta nunca: se comía el ancho de los nombres (la rueda sigue).\n// Con el vidrio del tema, los títulos de sección van como se escriben («Operación») y no en mayúsculas: la guía de Liquid\n// Glass de Apple los dejó de poner en mayúsculas porque se leen mejor.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\nimport ListSubheader from '@mui/material/ListSubheader';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\nimport KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';\nimport KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded';\n\nimport {menuItemLabelOf, menuSectionsOf} from '@/appShell/menuItemText.js';\nimport Wordmark from '@/appShell/Wordmark.jsx';\nimport {APP_BAR_HEIGHT_PIXELS} from '@/appShell/shellSizes.js';\nimport SideMenuEntry from '@/appShell/SideMenuEntry.jsx';\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\n\n// lo alto del desvanecido en la orilla del menú que tiene más (px)\nconst SCROLL_FADE_PIXELS = 28;\n// el estilo minimalista del tema (THEME_LOOK.minimal; se repite el texto para no importar el tema desde el menú)\nconst MINIMAL_LOOK = 'minimal';\n// la flecha: a cuánto de la orilla va y cuánto se repite al deslizar un tramo (px)\nconst SCROLL_ARROW_INSET_PIXELS = 4;\nconst SCROLL_STEP_OVERLAP_PIXELS = 44;\n\n/** La flecha de una orilla del menú: un botoncito de vidrio centrado que lo desliza un tramo. */\nfunction ScrollArrow({label, onClick, sx, children}) {\n    return (\n        <Tooltip title={label} placement=\"right\">\n            <IconButton size=\"small\" aria-label={label} onClick={onClick}\n                        sx={[(theme) => ({\n                            position: 'absolute', left: '50%', transform: 'translateX(-50%)', zIndex: 1, width: 32, height: 24, borderRadius: '999px',\n                            ...(isGlassTheme(theme) ? glassStylesOf(theme, {isControl: true}) : {bgcolor: 'background.paper', boxShadow: 2}),\n                        }), sx]}>\n                {children}\n            </IconButton>\n        </Tooltip>\n    );\n}\n\n// el logo de 28 px queda centrado en el menú encogido de 64 px: (64 - 28) / 2\nconst BRAND_LEFT_PADDING = '18px';\n// la letra del título de sección (rem): en mayúsculas, más chica; con vidrio, como se escribe, un poco más grande. Con\n// alto de renglón 2, la mitad del renglón mide lo mismo que la letra: ahí va la rayita del encogido\nconst SECTION_TITLE_FONT_REM = Object.freeze({solid: 0.6875, glass: 0.75});\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.logo] el logo chico (28 px), el que se queda con el menú encogido\n * @param {import('react').ReactNode} [props.wordmark] el logo ancho (en lugar del logo y el nombre arriba)\n * @param {string} props.brandName el nombre de la app\n * @param {string} [props.brandCaption] el renglón chico debajo del nombre («Panel de administración»)\n * @param {string} props.homePath\n * @param {object[]} props.menuItems lo que regresa composeMenu\n * @param {object|null} props.activeItem\n * @param {boolean} props.collapsed\n * @param {import('react').ReactNode} [props.footer]\n * @param {boolean} [props.showBrand] el logo y el nombre arriba; por omisión sí (en escritorio van en la barra)\n * @param {() => void} [props.onNavigate]\n * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey\n * @param {import('react').ReactNode} [props.railTop] arriba del menú encogido que hace de barra: la ☰ y el logo\n * @param {import('react').ReactNode} [props.railBottom] abajo de ese menú: los ajustes y la cuenta\n */\nexport default function SideMenu({\n    logo, wordmark, brandName, brandCaption, homePath, menuItems, activeItem, collapsed, footer, showBrand = true, onNavigate, railTop, railBottom, menuBadges,\n}) {\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const theme = useTheme();\n    // con vidrio y con el minimalista (los dos siguen a Apple) los títulos de sección van como se escriben, no en mayúsculas\n    const isAppleStyle = isGlassTheme(theme) || theme.toolkit?.look === MINIMAL_LOOK;\n    const sectionTitleFontRem = isAppleStyle ? SECTION_TITLE_FONT_REM.glass : SECTION_TITLE_FONT_REM.solid;\n    const fadeWhenCollapsed = (theme) => ({opacity: collapsed ? 0 : 1, transition: theme.transitions.create('opacity')});\n    // el menú no lleva barra de desplazamiento (ver abajo): cuando no cabe, se desvanece en la orilla de donde hay más, para\n    // que se entienda que se desliza (lo reportaron: «no se entiende que scrollea»)\n    const listRef = useRef(null);\n    const [hiddenEdges, setHiddenEdges] = useState({top: false, bottom: false});\n    useEffect(() => {\n        const list = listRef.current;\n        if (!list) {\n            return undefined;\n        }\n        const measure = () => setHiddenEdges({\n            top: list.scrollTop > 1,\n            bottom: list.scrollTop + list.clientHeight < list.scrollHeight - 1,\n        });\n        measure();\n        list.addEventListener('scroll', measure, {passive: true});\n        const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n        resizeObserver?.observe(list);\n        return () => {\n            list.removeEventListener('scroll', measure);\n            resizeObserver?.disconnect();\n        };\n    }, [menuItems, collapsed]);\n    // la flecha desliza el menú lo que mide su parte visible, menos un renglón para no perder de vista dónde se iba\n    const scrollMenu = (direction) => listRef.current?.scrollBy({top: direction * (listRef.current.clientHeight - SCROLL_STEP_OVERLAP_PIXELS), behavior: 'smooth'});\n    const fadeMask = `linear-gradient(to bottom, ${hiddenEdges.top ? 'transparent' : 'black'}, black ${SCROLL_FADE_PIXELS}px, black calc(100% - ${SCROLL_FADE_PIXELS}px), ${hiddenEdges.bottom ? 'transparent' : 'black'})`;\n\n    return (\n        // OJO: flex y no height 100%: dentro de la hoja de «Más» (que solo tiene alto máximo) un 100 % no se resuelve, el menú\n        // crecía sin límite y la hoja no se deslizaba (lo reportaron con el teléfono acostado)\n        <Box sx={{display: 'flex', flexDirection: 'column', flex: '1 1 auto', minHeight: 0}}>\n            {showBrand && (\n                <>\n                    <ButtonBase component={RouterLink} to={homePath} onClick={onNavigate} aria-label={brandName}\n                                sx={{display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 1.25, minHeight: APP_BAR_HEIGHT_PIXELS,\n                                     pl: BRAND_LEFT_PADDING, pr: 2, flexShrink: 0}}>\n                        {wordmark ? <Wordmark>{wordmark}</Wordmark> : (\n                            <>\n                                <Box sx={{width: 28, height: 28, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</Box>\n                                <Box sx={(theme) => ({minWidth: 0, textAlign: 'left', ...fadeWhenCollapsed(theme)})}>\n                                    <Typography variant=\"subtitle2\" component=\"span\" noWrap sx={{display: 'block', fontWeight: 600, lineHeight: 1.3}}>{brandName}</Typography>\n                                    {brandCaption && <Typography variant=\"caption\" component=\"span\" color=\"text.secondary\" noWrap sx={{display: 'block', lineHeight: 1.3}}>{brandCaption}</Typography>}\n                                </Box>\n                            </>\n                        )}\n                    </ButtonBase>\n                    <Divider />\n                </>\n            )}\n\n            {railTop && <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, pt: 1.25, pb: 0.5, flexShrink: 0}}>{railTop}</Box>}\n\n            {/* la lista y sus flechas: cuando no cabe, una flecha en la orilla de donde hay más (como los menús largos de la Mac)\n                que la desliza un tramo; el desvanecido la refuerza. Sin barra de desplazamiento no se entendía que había más */}\n            <Box sx={{position: 'relative', flexGrow: 1, minHeight: 0, display: 'flex', flexDirection: 'column'}}>\n                <List ref={listRef} component=\"nav\" aria-label={t('drawer.ariaLabel')} dense disablePadding\n                      sx={{\n                          px: 1, pt: 1, pb: 2, flexGrow: 1, minHeight: 0, height: '100%', overflowY: 'auto', overflowX: 'hidden',\n                          // sin barra de desplazamiento, abierto o encogido (se desliza igual con la rueda, el trackpad o el\n                          // teclado, como en la Mac, donde la barra solo sale al deslizar): a la vista se veía una raya junto a\n                          // los nombres, y aunque fuera transparente se comía su ancho y cortaba «Alta con react-hook-form»\n                          scrollbarWidth: 'none',\n                          maskImage: fadeMask,\n                          WebkitMaskImage: fadeMask,\n                          '&::-webkit-scrollbar': {display: 'none'},\n                      }}>\n                    {menuSectionsOf(menuItems, t).map((section, sectionIndex) => (\n                        <Box component=\"li\" key={section.title ?? `section-${sectionIndex}`} sx={{listStyle: 'none'}}>\n                            <List dense disablePadding\n                                  subheader={section.title ? (\n                                      <ListSubheader disableSticky component=\"div\"\n                                                     sx={(theme) => ({position: 'relative', bgcolor: 'transparent', px: 1.5, pt: 1.5, lineHeight: 2, fontSize: `${sectionTitleFontRem}rem`,\n                                                                      fontWeight: 600, letterSpacing: isAppleStyle ? 0 : '0.08em', textTransform: isAppleStyle ? 'none' : 'uppercase',\n                                                                      color: 'text.secondary', whiteSpace: 'nowrap',\n                                                                      // encogido: en lugar del título, una rayita a media altura del renglón\n                                                                      '&::after': {\n                                                                          content: '\"\"', position: 'absolute', left: '25%', right: '25%', height: '1px',\n                                                                          top: `calc(${theme.spacing(1.5)} + ${sectionTitleFontRem}rem)`, bgcolor: 'divider',\n                                                                          opacity: collapsed ? 1 : 0, transition: theme.transitions.create('opacity'),\n                                                                      }})}>\n                                          <Box component=\"span\" sx={fadeWhenCollapsed}>{section.title}</Box>\n                                      </ListSubheader>\n                                  ) : null}>\n                                {section.menuItems.map((menuItem) => (\n                                    <SideMenuEntry key={menuItem.to ?? menuItemLabelOf(menuItem, t)} menuItem={menuItem} activeItem={activeItem} collapsed={collapsed}\n                                                   onNavigate={onNavigate} menuBadges={menuBadges} />\n                                ))}\n                            </List>\n                        </Box>\n                    ))}\n                    {/* la tarjeta de abajo va al final de lo que se desliza, no fija: en una pantalla baja (el teléfono acostado) se\n                        comía el menú y solo se veía «Inicio» (lo reportaron) */}\n                    {footer && (\n                        <Box component=\"li\" sx={{listStyle: 'none', pt: 2, px: 0.5, display: collapsed ? 'none' : 'block'}}>{footer}</Box>\n                    )}\n                </List>\n                {hiddenEdges.top && (\n                    <ScrollArrow label={t('drawer.scrollUp')} onClick={() => scrollMenu(-1)} sx={{top: SCROLL_ARROW_INSET_PIXELS}}>\n                        <KeyboardArrowUpRoundedIcon fontSize=\"small\" />\n                    </ScrollArrow>\n                )}\n                {hiddenEdges.bottom && (\n                    <ScrollArrow label={t('drawer.scrollDown')} onClick={() => scrollMenu(1)} sx={{bottom: SCROLL_ARROW_INSET_PIXELS}}>\n                        <KeyboardArrowDownRoundedIcon fontSize=\"small\" />\n                    </ScrollArrow>\n                )}\n            </Box>\n\n            {railBottom && <Box sx={{display: 'flex', justifyContent: 'center', pt: 1, pb: 1.25, flexShrink: 0, borderTop: 1, borderColor: 'divider'}}>{railBottom}</Box>}\n        </Box>\n    );\n}\n"],"names":["theme"],"mappings":"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"}
+{"version":3,"file":"SideMenu.js","sources":["../../src/appShell/SideMenu.jsx"],"sourcesContent":["// Lo de adentro del menú lateral (el fijo de escritorio y el cajón del teléfono): arriba el logo y el nombre de la app\n// (solo en el cajón del teléfono: en escritorio van en la barra), en medio las secciones del menú (composeMenu, con el\n// título de cada sección) y abajo lo que el proyecto quiera (sidebarFooter: una tarjeta de ayuda, el plan contratado…).\n//\n// Es una columna de toda la altura: el menú crece y se desliza solo, y el pie se queda abajo.\n// Encogido (solo íconos): el título de cada sección se vuelve una rayita del mismo alto (los huecos entre secciones se\n// quedan parejos y nada brinca al abrirlo), el pie se quita (escondido seguía ocupando su lugar y sacaba la barra de\n// desplazamiento). La barra de desplazamiento no se pinta nunca: se comía el ancho de los nombres (la rueda sigue).\n// Con el vidrio del tema, los títulos de sección van como se escriben («Operación») y no en mayúsculas: la guía de Liquid\n// Glass de Apple los dejó de poner en mayúsculas porque se leen mejor.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSideMenu con defaultProps y\n// styleOverrides de sus partes: scrollArrow, root, brand, brandLogo, brandText, brandName, brandCaption, railTop,\n// listArea, list, section, sectionTitle, sectionTitleText, footer, railBottom.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport List from '@mui/material/List';\nimport ListSubheader from '@mui/material/ListSubheader';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\nimport KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';\nimport KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded';\n\nimport {menuItemLabelOf, menuSectionsOf} from '@/appShell/menuItemText.js';\nimport Wordmark from '@/appShell/Wordmark.jsx';\nimport {APP_BAR_HEIGHT_PIXELS} from '@/appShell/shellSizes.js';\nimport SideMenuEntry from '@/appShell/SideMenuEntry.jsx';\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSideMenu)\nconst THEME_NAME = 'CalcitaSideMenu';\nconst MenuScrollArrow = piecePart(THEME_NAME, 'ScrollArrow', IconButton);\nconst MenuRoot = piecePart(THEME_NAME, 'Root', Box);\nconst MenuBrand = piecePart(THEME_NAME, 'Brand', ButtonBase);\nconst MenuBrandLogo = piecePart(THEME_NAME, 'BrandLogo', Box);\nconst MenuBrandText = piecePart(THEME_NAME, 'BrandText', Box);\nconst MenuBrandName = piecePart(THEME_NAME, 'BrandName', Typography);\nconst MenuBrandCaption = piecePart(THEME_NAME, 'BrandCaption', Typography);\nconst MenuRailTop = piecePart(THEME_NAME, 'RailTop', Box);\nconst MenuListArea = piecePart(THEME_NAME, 'ListArea', Box);\nconst MenuList = piecePart(THEME_NAME, 'List', List);\nconst MenuSection = piecePart(THEME_NAME, 'Section', Box);\nconst MenuSectionTitle = piecePart(THEME_NAME, 'SectionTitle', ListSubheader);\nconst MenuSectionTitleText = piecePart(THEME_NAME, 'SectionTitleText', Box);\nconst MenuFooter = piecePart(THEME_NAME, 'Footer', Box);\nconst MenuRailBottom = piecePart(THEME_NAME, 'RailBottom', Box);\n\n// lo alto del desvanecido en la orilla del menú que tiene más (px)\nconst SCROLL_FADE_PIXELS = 28;\n// el estilo minimalista del tema (THEME_LOOK.minimal; se repite el texto para no importar el tema desde el menú)\nconst MINIMAL_LOOK = 'minimal';\n// la flecha: a cuánto de la orilla va y cuánto se repite al deslizar un tramo (px)\nconst SCROLL_ARROW_INSET_PIXELS = 4;\nconst SCROLL_STEP_OVERLAP_PIXELS = 44;\n\n/** La flecha de una orilla del menú: un botoncito de vidrio centrado que lo desliza un tramo. */\nfunction ScrollArrow({label, onClick, sx, children}) {\n    return (\n        <Tooltip title={label} placement=\"right\">\n            <MenuScrollArrow size=\"small\" aria-label={label} onClick={onClick}\n                        ownSx={[(theme) => ({\n                            position: 'absolute', left: '50%', transform: 'translateX(-50%)', zIndex: 1, width: 32, height: 24, borderRadius: '999px',\n                            ...(isGlassTheme(theme) ? glassStylesOf(theme, {isControl: true}) : {bgcolor: 'background.paper', boxShadow: 2}),\n                        }), sx]}>\n                {children}\n            </MenuScrollArrow>\n        </Tooltip>\n    );\n}\n\n// el logo de 28 px queda centrado en el menú encogido de 64 px: (64 - 28) / 2\nconst BRAND_LEFT_PADDING = '18px';\n// la letra del título de sección (rem): en mayúsculas, más chica; con vidrio, como se escribe, un poco más grande. Con\n// alto de renglón 2, la mitad del renglón mide lo mismo que la letra: ahí va la rayita del encogido\nconst SECTION_TITLE_FONT_REM = Object.freeze({solid: 0.6875, glass: 0.75});\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.logo] el logo chico (28 px), el que se queda con el menú encogido\n * @param {import('react').ReactNode} [props.wordmark] el logo ancho (en lugar del logo y el nombre arriba)\n * @param {string} props.brandName el nombre de la app\n * @param {string} [props.brandCaption] el renglón chico debajo del nombre («Panel de administración»)\n * @param {string} props.homePath\n * @param {object[]} props.menuItems lo que regresa composeMenu\n * @param {object|null} props.activeItem\n * @param {boolean} props.collapsed\n * @param {import('react').ReactNode} [props.footer]\n * @param {boolean} [props.showBrand] el logo y el nombre arriba; por omisión sí (en escritorio van en la barra)\n * @param {() => void} [props.onNavigate]\n * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey\n * @param {import('react').ReactNode} [props.railTop] arriba del menú encogido que hace de barra: la ☰ y el logo\n * @param {import('react').ReactNode} [props.railBottom] abajo de ese menú: los ajustes y la cuenta\n */\nexport default function SideMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSideMenu.defaultProps) y encima lo que llega aquí\n    const {\n    logo, wordmark, brandName, brandCaption, homePath, menuItems, activeItem, collapsed, footer, showBrand = true, onNavigate, railTop, railBottom, menuBadges,\n} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const theme = useTheme();\n    // con vidrio y con el minimalista (los dos siguen a Apple) los títulos de sección van como se escriben, no en mayúsculas\n    const isAppleStyle = isGlassTheme(theme) || theme.toolkit?.look === MINIMAL_LOOK;\n    const sectionTitleFontRem = isAppleStyle ? SECTION_TITLE_FONT_REM.glass : SECTION_TITLE_FONT_REM.solid;\n    const fadeWhenCollapsed = (theme) => ({opacity: collapsed ? 0 : 1, transition: theme.transitions.create('opacity')});\n    // el menú no lleva barra de desplazamiento (ver abajo): cuando no cabe, se desvanece en la orilla de donde hay más, para\n    // que se entienda que se desliza (lo reportaron: «no se entiende que scrollea»)\n    const listRef = useRef(null);\n    const [hiddenEdges, setHiddenEdges] = useState({top: false, bottom: false});\n    useEffect(() => {\n        const list = listRef.current;\n        if (!list) {\n            return undefined;\n        }\n        const measure = () => setHiddenEdges({\n            top: list.scrollTop > 1,\n            bottom: list.scrollTop + list.clientHeight < list.scrollHeight - 1,\n        });\n        measure();\n        list.addEventListener('scroll', measure, {passive: true});\n        const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n        resizeObserver?.observe(list);\n        return () => {\n            list.removeEventListener('scroll', measure);\n            resizeObserver?.disconnect();\n        };\n    }, [menuItems, collapsed]);\n    // la flecha desliza el menú lo que mide su parte visible, menos un renglón para no perder de vista dónde se iba\n    const scrollMenu = (direction) => listRef.current?.scrollBy({top: direction * (listRef.current.clientHeight - SCROLL_STEP_OVERLAP_PIXELS), behavior: 'smooth'});\n    const fadeMask = `linear-gradient(to bottom, ${hiddenEdges.top ? 'transparent' : 'black'}, black ${SCROLL_FADE_PIXELS}px, black calc(100% - ${SCROLL_FADE_PIXELS}px), ${hiddenEdges.bottom ? 'transparent' : 'black'})`;\n\n    return (\n        // OJO: flex y no height 100%: dentro de la hoja de «Más» (que solo tiene alto máximo) un 100 % no se resuelve, el menú\n        // crecía sin límite y la hoja no se deslizaba (lo reportaron con el teléfono acostado)\n        <MenuRoot ownSx={{display: 'flex', flexDirection: 'column', flex: '1 1 auto', minHeight: 0}}>\n            {showBrand && (\n                <>\n                    <MenuBrand component={RouterLink} to={homePath} onClick={onNavigate} aria-label={brandName}\n                                ownSx={{display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 1.25, minHeight: APP_BAR_HEIGHT_PIXELS,\n                                     pl: BRAND_LEFT_PADDING, pr: 2, flexShrink: 0}}>\n                        {wordmark ? <Wordmark>{wordmark}</Wordmark> : (\n                            <>\n                                <MenuBrandLogo ownSx={{width: 28, height: 28, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</MenuBrandLogo>\n                                <MenuBrandText ownSx={(theme) => ({minWidth: 0, textAlign: 'left', ...fadeWhenCollapsed(theme)})}>\n                                    <MenuBrandName variant=\"subtitle2\" component=\"span\" noWrap ownSx={{display: 'block', fontWeight: 600, lineHeight: 1.3}}>{brandName}</MenuBrandName>\n                                    {brandCaption && <MenuBrandCaption variant=\"caption\" component=\"span\" color=\"text.secondary\" noWrap ownSx={{display: 'block', lineHeight: 1.3}}>{brandCaption}</MenuBrandCaption>}\n                                </MenuBrandText>\n                            </>\n                        )}\n                    </MenuBrand>\n                    <Divider />\n                </>\n            )}\n\n            {railTop && <MenuRailTop ownSx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, pt: 1.25, pb: 0.5, flexShrink: 0}}>{railTop}</MenuRailTop>}\n\n            {/* la lista y sus flechas: cuando no cabe, una flecha en la orilla de donde hay más (como los menús largos de la Mac)\n                que la desliza un tramo; el desvanecido la refuerza. Sin barra de desplazamiento no se entendía que había más */}\n            <MenuListArea ownSx={{position: 'relative', flexGrow: 1, minHeight: 0, display: 'flex', flexDirection: 'column'}}>\n                <MenuList ref={listRef} component=\"nav\" aria-label={t('drawer.ariaLabel')} dense disablePadding\n                      ownSx={{\n                          px: 1, pt: 1, pb: 2, flexGrow: 1, minHeight: 0, height: '100%', overflowY: 'auto', overflowX: 'hidden',\n                          // sin barra de desplazamiento, abierto o encogido (se desliza igual con la rueda, el trackpad o el\n                          // teclado, como en la Mac, donde la barra solo sale al deslizar): a la vista se veía una raya junto a\n                          // los nombres, y aunque fuera transparente se comía su ancho y cortaba «Alta con react-hook-form»\n                          scrollbarWidth: 'none',\n                          maskImage: fadeMask,\n                          WebkitMaskImage: fadeMask,\n                          '&::-webkit-scrollbar': {display: 'none'},\n                      }}>\n                    {menuSectionsOf(menuItems, t).map((section, sectionIndex) => (\n                        <MenuSection component=\"li\" key={section.title ?? `section-${sectionIndex}`} ownSx={{listStyle: 'none'}}>\n                            <List dense disablePadding\n                                  subheader={section.title ? (\n                                      <MenuSectionTitle disableSticky component=\"div\"\n                                                     ownSx={(theme) => ({position: 'relative', bgcolor: 'transparent', px: 1.5, pt: 1.5, lineHeight: 2, fontSize: `${sectionTitleFontRem}rem`,\n                                                                      fontWeight: 600, letterSpacing: isAppleStyle ? 0 : '0.08em', textTransform: isAppleStyle ? 'none' : 'uppercase',\n                                                                      color: 'text.secondary', whiteSpace: 'nowrap',\n                                                                      // encogido: en lugar del título, una rayita a media altura del renglón\n                                                                      '&::after': {\n                                                                          content: '\"\"', position: 'absolute', left: '25%', right: '25%', height: '1px',\n                                                                          top: `calc(${theme.spacing(1.5)} + ${sectionTitleFontRem}rem)`, bgcolor: 'divider',\n                                                                          opacity: collapsed ? 1 : 0, transition: theme.transitions.create('opacity'),\n                                                                      }})}>\n                                          <MenuSectionTitleText component=\"span\" ownSx={fadeWhenCollapsed}>{section.title}</MenuSectionTitleText>\n                                      </MenuSectionTitle>\n                                  ) : null}>\n                                {section.menuItems.map((menuItem) => (\n                                    <SideMenuEntry key={menuItem.to ?? menuItemLabelOf(menuItem, t)} menuItem={menuItem} activeItem={activeItem} collapsed={collapsed}\n                                                   onNavigate={onNavigate} menuBadges={menuBadges} />\n                                ))}\n                            </List>\n                        </MenuSection>\n                    ))}\n                    {/* la tarjeta de abajo va al final de lo que se desliza, no fija: en una pantalla baja (el teléfono acostado) se\n                        comía el menú y solo se veía «Inicio» (lo reportaron) */}\n                    {footer && (\n                        <MenuFooter component=\"li\" ownSx={{listStyle: 'none', pt: 2, px: 0.5, display: collapsed ? 'none' : 'block'}}>{footer}</MenuFooter>\n                    )}\n                </MenuList>\n                {hiddenEdges.top && (\n                    <ScrollArrow label={t('drawer.scrollUp')} onClick={() => scrollMenu(-1)} sx={{top: SCROLL_ARROW_INSET_PIXELS}}>\n                        <KeyboardArrowUpRoundedIcon fontSize=\"small\" />\n                    </ScrollArrow>\n                )}\n                {hiddenEdges.bottom && (\n                    <ScrollArrow label={t('drawer.scrollDown')} onClick={() => scrollMenu(1)} sx={{bottom: SCROLL_ARROW_INSET_PIXELS}}>\n                        <KeyboardArrowDownRoundedIcon fontSize=\"small\" />\n                    </ScrollArrow>\n                )}\n            </MenuListArea>\n\n            {railBottom && <MenuRailBottom ownSx={{display: 'flex', justifyContent: 'center', pt: 1, pb: 1.25, flexShrink: 0, borderTop: 1, borderColor: 'divider'}}>{railBottom}</MenuRailBottom>}\n        </MenuRoot>\n    );\n}\n"],"names":["theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,eAAe,UAAU;AACvE,MAAM,WAAW,UAAU,YAAY,QAAQ,GAAG;AAClD,MAAM,YAAY,UAAU,YAAY,SAAS,UAAU;AAC3D,MAAM,gBAAgB,UAAU,YAAY,aAAa,GAAG;AAC5D,MAAM,gBAAgB,UAAU,YAAY,aAAa,GAAG;AAC5D,MAAM,gBAAgB,UAAU,YAAY,aAAa,UAAU;AACnE,MAAM,mBAAmB,UAAU,YAAY,gBAAgB,UAAU;AACzE,MAAM,cAAc,UAAU,YAAY,WAAW,GAAG;AACxD,MAAM,eAAe,UAAU,YAAY,YAAY,GAAG;AAC1D,MAAM,WAAW,UAAU,YAAY,QAAQ,IAAI;AACnD,MAAM,cAAc,UAAU,YAAY,WAAW,GAAG;AACxD,MAAM,mBAAmB,UAAU,YAAY,gBAAgB,aAAa;AAC5E,MAAM,uBAAuB,UAAU,YAAY,oBAAoB,GAAG;AAC1E,MAAM,aAAa,UAAU,YAAY,UAAU,GAAG;AACtD,MAAM,iBAAiB,UAAU,YAAY,cAAc,GAAG;AAG9D,MAAM,qBAAqB;AAE3B,MAAM,eAAe;AAErB,MAAM,4BAA4B;AAClC,MAAM,6BAA6B;AAGnC,SAAS,YAAY,EAAC,OAAO,SAAS,IAAI,YAAW;AACjD,SACI,oBAAC,SAAA,EAAQ,OAAO,OAAO,WAAU,SAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAgB,MAAK;AAAA,MAAQ,cAAY;AAAA,MAAO;AAAA,MACrC,OAAO,CAAC,CAAC,WAAW;AAAA,QAChB,UAAU;AAAA,QAAY,MAAM;AAAA,QAAO,WAAW;AAAA,QAAoB,QAAQ;AAAA,QAAG,OAAO;AAAA,QAAI,QAAQ;AAAA,QAAI,cAAc;AAAA,QAClH,GAAI,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,WAAW,KAAA,CAAK,IAAI,EAAC,SAAS,oBAAoB,WAAW,EAAA;AAAA,MAAC,IAC9G,EAAE;AAAA,MACb;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AAGA,MAAM,qBAAqB;AAG3B,MAAM,yBAAyB,OAAO,OAAO,EAAC,OAAO,QAAQ,OAAO,MAAK;AAmBzE,SAAwB,SAAS,OAAO;AAEpC,QAAM;AAAA,IACN;AAAA,IAAM;AAAA,IAAU;AAAA,IAAW;AAAA,IAAc;AAAA,IAAU;AAAA,IAAW;AAAA,IAAY;AAAA,IAAW;AAAA,IAAQ,YAAY;AAAA,IAAM;AAAA,IAAY;AAAA,IAAS;AAAA,IAAY;AAAA,EAAA,IAChJ,cAAc,OAAO,UAAU;AAC/B,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,QAAM,QAAQ,SAAA;AAEd,QAAM,eAAe,aAAa,KAAK,KAAK,MAAM,SAAS,SAAS;AACpE,QAAM,sBAAsB,eAAe,uBAAuB,QAAQ,uBAAuB;AACjG,QAAM,oBAAoB,CAACA,YAAW,EAAC,SAAS,YAAY,IAAI,GAAG,YAAYA,OAAM,YAAY,OAAO,SAAS,EAAA;AAGjH,QAAM,UAAU,OAAO,IAAI;AAC3B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAC,KAAK,OAAO,QAAQ,OAAM;AAC1E,YAAU,MAAM;AACZ,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,MAAM;AACP,aAAO;AAAA,IACX;AACA,UAAM,UAAU,MAAM,eAAe;AAAA,MACjC,KAAK,KAAK,YAAY;AAAA,MACtB,QAAQ,KAAK,YAAY,KAAK,eAAe,KAAK,eAAe;AAAA,IAAA,CACpE;AACD,YAAA;AACA,SAAK,iBAAiB,UAAU,SAAS,EAAC,SAAS,MAAK;AACxD,UAAM,iBAAiB,OAAO,mBAAmB,cAAc,OAAO,IAAI,eAAe,OAAO;AAChG,oBAAgB,QAAQ,IAAI;AAC5B,WAAO,MAAM;AACT,WAAK,oBAAoB,UAAU,OAAO;AAC1C,sBAAgB,WAAA;AAAA,IACpB;AAAA,EACJ,GAAG,CAAC,WAAW,SAAS,CAAC;AAEzB,QAAM,aAAa,CAAC,cAAc,QAAQ,SAAS,SAAS,EAAC,KAAK,aAAa,QAAQ,QAAQ,eAAe,6BAA6B,UAAU,UAAS;AAC9J,QAAM,WAAW,8BAA8B,YAAY,MAAM,gBAAgB,OAAO,WAAW,kBAAkB,yBAAyB,kBAAkB,QAAQ,YAAY,SAAS,gBAAgB,OAAO;AAEpN;AAAA;AAAA;AAAA,IAGI,qBAAC,UAAA,EAAS,OAAO,EAAC,SAAS,QAAQ,eAAe,UAAU,MAAM,YAAY,WAAW,EAAA,GACpF,UAAA;AAAA,MAAA,aACG,qBAAA,UAAA,EACI,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAAU,WAAW;AAAA,YAAY,IAAI;AAAA,YAAU,SAAS;AAAA,YAAY,cAAY;AAAA,YACrE,OAAO;AAAA,cAAC,SAAS;AAAA,cAAQ,gBAAgB;AAAA,cAAc,YAAY;AAAA,cAAU,KAAK;AAAA,cAAM,WAAW;AAAA,cAC9F,IAAI;AAAA,cAAoB,IAAI;AAAA,cAAG,YAAY;AAAA,YAAA;AAAA,YACvD,UAAA,WAAW,oBAAC,UAAA,EAAU,UAAA,SAAA,CAAS,IAC5B,qBAAA,UAAA,EACI,UAAA;AAAA,cAAA,oBAAC,iBAAc,OAAO,EAAC,OAAO,IAAI,QAAQ,IAAI,MAAM,YAAY,SAAS,QAAQ,YAAY,UAAU,gBAAgB,SAAA,GAAY,UAAA,MAAK;AAAA,cACxI,qBAAC,eAAA,EAAc,OAAO,CAACA,YAAW,EAAC,UAAU,GAAG,WAAW,QAAQ,GAAG,kBAAkBA,MAAK,MACzF,UAAA;AAAA,gBAAA,oBAAC,iBAAc,SAAQ,aAAY,WAAU,QAAO,QAAM,MAAC,OAAO,EAAC,SAAS,SAAS,YAAY,KAAK,YAAY,IAAA,GAAO,UAAA,WAAU;AAAA,gBAClI,gBAAgB,oBAAC,kBAAA,EAAiB,SAAQ,WAAU,WAAU,QAAO,OAAM,kBAAiB,QAAM,MAAC,OAAO,EAAC,SAAS,SAAS,YAAY,IAAA,GAAO,UAAA,aAAA,CAAa;AAAA,cAAA,EAAA,CAClK;AAAA,YAAA,EAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,4BAGP,SAAA,CAAA,CAAQ;AAAA,MAAA,GACb;AAAA,MAGH,+BAAY,aAAA,EAAY,OAAO,EAAC,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,KAAK,GAAG,IAAI,MAAM,IAAI,KAAK,YAAY,EAAA,GAAK,UAAA,SAAQ;AAAA,MAIrJ,qBAAC,cAAA,EAAa,OAAO,EAAC,UAAU,YAAY,UAAU,GAAG,WAAW,GAAG,SAAS,QAAQ,eAAe,YACnG,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAAS,KAAK;AAAA,YAAS,WAAU;AAAA,YAAM,cAAY,EAAE,kBAAkB;AAAA,YAAG,OAAK;AAAA,YAAC,gBAAc;AAAA,YACzF,OAAO;AAAA,cACH,IAAI;AAAA,cAAG,IAAI;AAAA,cAAG,IAAI;AAAA,cAAG,UAAU;AAAA,cAAG,WAAW;AAAA,cAAG,QAAQ;AAAA,cAAQ,WAAW;AAAA,cAAQ,WAAW;AAAA;AAAA;AAAA;AAAA,cAI9F,gBAAgB;AAAA,cAChB,WAAW;AAAA,cACX,iBAAiB;AAAA,cACjB,wBAAwB,EAAC,SAAS,OAAA;AAAA,YAAM;AAAA,YAE7C,UAAA;AAAA,cAAA,eAAe,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS,iBACxC,oBAAC,aAAA,EAAY,WAAU,MAAsD,OAAO,EAAC,WAAW,UAC5F,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAAK,OAAK;AAAA,kBAAC,gBAAc;AAAA,kBACpB,WAAW,QAAQ,QACf;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAAiB,eAAa;AAAA,sBAAC,WAAU;AAAA,sBAC3B,OAAO,CAACA,YAAW;AAAA,wBAAC,UAAU;AAAA,wBAAY,SAAS;AAAA,wBAAe,IAAI;AAAA,wBAAK,IAAI;AAAA,wBAAK,YAAY;AAAA,wBAAG,UAAU,GAAG,mBAAmB;AAAA,wBAClH,YAAY;AAAA,wBAAK,eAAe,eAAe,IAAI;AAAA,wBAAU,eAAe,eAAe,SAAS;AAAA,wBACpG,OAAO;AAAA,wBAAkB,YAAY;AAAA;AAAA,wBAErC,YAAY;AAAA,0BACR,SAAS;AAAA,0BAAM,UAAU;AAAA,0BAAY,MAAM;AAAA,0BAAO,OAAO;AAAA,0BAAO,QAAQ;AAAA,0BACxE,KAAK,QAAQA,OAAM,QAAQ,GAAG,CAAC,MAAM,mBAAmB;AAAA,0BAAQ,SAAS;AAAA,0BACzE,SAAS,YAAY,IAAI;AAAA,0BAAG,YAAYA,OAAM,YAAY,OAAO,SAAS;AAAA,wBAAA;AAAA,sBAC9E;AAAA,sBAC5B,8BAAC,sBAAA,EAAqB,WAAU,QAAO,OAAO,mBAAoB,kBAAQ,MAAA,CAAM;AAAA,oBAAA;AAAA,kBAAA,IAEpF;AAAA,kBACL,UAAA,QAAQ,UAAU,IAAI,CAAC,aACpB;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAAgE;AAAA,sBAAoB;AAAA,sBAAwB;AAAA,sBAC9F;AAAA,sBAAwB;AAAA,oBAAA;AAAA,oBADnB,SAAS,MAAM,gBAAgB,UAAU,CAAC;AAAA,kBAAA,CAEjE;AAAA,gBAAA;AAAA,cAAA,KAnBwB,QAAQ,SAAS,WAAW,YAAY,EAqBzE,CACH;AAAA,cAGA,UACG,oBAAC,YAAA,EAAW,WAAU,MAAK,OAAO,EAAC,WAAW,QAAQ,IAAI,GAAG,IAAI,KAAK,SAAS,YAAY,SAAS,QAAA,GAAW,UAAA,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG7H,YAAY,OACT,oBAAC,aAAA,EAAY,OAAO,EAAE,iBAAiB,GAAG,SAAS,MAAM,WAAW,EAAE,GAAG,IAAI,EAAC,KAAK,0BAAA,GAC/E,UAAA,oBAAC,4BAAA,EAA2B,UAAS,QAAA,CAAQ,EAAA,CACjD;AAAA,QAEH,YAAY,UACT,oBAAC,aAAA,EAAY,OAAO,EAAE,mBAAmB,GAAG,SAAS,MAAM,WAAW,CAAC,GAAG,IAAI,EAAC,QAAQ,0BAAA,GACnF,UAAA,oBAAC,8BAAA,EAA6B,UAAS,QAAA,CAAQ,EAAA,CACnD;AAAA,MAAA,GAER;AAAA,MAEC,kCAAe,gBAAA,EAAe,OAAO,EAAC,SAAS,QAAQ,gBAAgB,UAAU,IAAI,GAAG,IAAI,MAAM,YAAY,GAAG,WAAW,GAAG,aAAa,UAAA,GAAa,UAAA,WAAA,CAAW;AAAA,IAAA,EAAA,CACzK;AAAA;AAER;"}