@stackcraftmx/calcita 0.27.0 → 0.30.0

package/dist/appShell/SideMenuEntry.js

@@ -21,6 +21,14 @@ import { menuBadgeOf } from "../navigation/appMenu.js";
 import { isGlassTheme, accentTextStylesOf, glassDropOf } from "../theme/glassSurface.js";
 import { mergeStyles } from "../theme/mergeComponents.js";
 import { textSizeOf } from "../theme/appleTracking.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaSideMenuEntry";
+const EntryButton = piecePart(THEME_NAME, "Button", ListItemButton);
+const EntryIcon = piecePart(THEME_NAME, "Icon", ListItemIcon);
+const EntryIconPlaceholder = piecePart(THEME_NAME, "IconPlaceholder", Box);
+const EntryText = piecePart(THEME_NAME, "Text", ListItemText);
+const EntryBadge = piecePart(THEME_NAME, "Badge", Chip);
+const EntryExpand = piecePart(THEME_NAME, "Expand", Box);
 const ROW_LEFT_PADDING = 1.5;
 const ROW_RIGHT_PADDING = 1.5;
 const CHILD_RIGHT_PADDING = 1;
@@ -36,7 +44,8 @@ const MENU_TEXT_PIXELS = 13;
 const MENU_BADGE_PIXELS = 11;
 const BADGE_MAX = 99;
 const RAIL_BUTTON_RADIUS_PIXELS = 10;
-function SideMenuEntry({ menuItem, activeItem, collapsed, onNavigate, menuBadges, depth = 0 }) {
+function SideMenuEntry(props) {
+  const { menuItem, activeItem, collapsed, onNavigate, menuBadges, depth = 0 } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("layout");
   const { Link: RouterLink } = useToolkitNavigation();
   const theme = useTheme();
@@ -66,12 +75,12 @@ function SideMenuEntry({ menuItem, activeItem, collapsed, onNavigate, menuBadges
   const activeText = accentTextStylesOf(theme);
   const selectedStyle = mergeStyles(isGlass ? glassDropOf(theme) : { bgcolor: "action.selected" }, activeText);
   const entryButton = /* @__PURE__ */ jsxs(
-    ListItemButton,
+    EntryButton,
     {
       ...linkProps,
       selected: !hasChildren && isActive,
       "aria-expanded": hasChildren ? collapsed ? Boolean(flyoutAnchor) : isOpen : void 0,
-      sx: {
+      ownSx: {
         borderRadius: isRailButton ? `${RAIL_BUTTON_RADIUS_PIXELS}px` : 1.5,
         pl: leftPadding,
         pr: isChild ? CHILD_RIGHT_PADDING : ROW_RIGHT_PADDING,
@@ -81,7 +90,7 @@ function SideMenuEntry({ menuItem, activeItem, collapsed, onNavigate, menuBadges
         "&.Mui-selected, &.Mui-selected:hover": selectedStyle
       },
       children: [
-        (!isChild || Icon) && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, mr: isChild ? CHILD_ICON_GAP : ICON_GAP, color: "inherit" }, children: /* @__PURE__ */ jsx(
+        (!isChild || Icon) && /* @__PURE__ */ jsx(EntryIcon, { ownSx: { minWidth: 0, mr: isChild ? CHILD_ICON_GAP : ICON_GAP, color: "inherit" }, children: /* @__PURE__ */ jsx(
           Badge,
           {
             invisible: !collapsed || !badge,
@@ -90,19 +99,19 @@ function SideMenuEntry({ menuItem, activeItem, collapsed, onNavigate, menuBadges
             badgeContent: badge?.isCount ? badge.content : void 0,
             variant: badge?.isCount ? "standard" : "dot",
             overlap: "circular",
-            children: Icon ? /* @__PURE__ */ jsx(Icon, { sx: { fontSize: isChild ? CHILD_ICON_SIZE : ICON_SIZE } }) : /* @__PURE__ */ jsx(Box, { sx: { width: ICON_SIZE, height: ICON_SIZE } })
+            children: Icon ? /* @__PURE__ */ jsx(Icon, { sx: { fontSize: isChild ? CHILD_ICON_SIZE : ICON_SIZE } }) : /* @__PURE__ */ jsx(EntryIconPlaceholder, { ownSx: { width: ICON_SIZE, height: ICON_SIZE } })
           }
         ) }),
         /* @__PURE__ */ jsx(
-          ListItemText,
+          EntryText,
           {
             primary: label,
-            sx: fadeWhenCollapsed,
+            ownSx: fadeWhenCollapsed,
             slotProps: { primary: { noWrap: true, sx: { ...textSizeOf(MENU_TEXT_PIXELS), fontWeight: isActive ? 600 : 400 } } }
           }
         ),
-        badge && /* @__PURE__ */ jsx(Chip, { label: badge.isCount && badge.content > BADGE_MAX ? `${BADGE_MAX}+` : badge.content, size: "small", color: "primary", sx: (theme2) => ({ height: 20, ...textSizeOf(MENU_BADGE_PIXELS), ml: 1, ...fadeWhenCollapsed(theme2) }) }),
-        hasChildren && /* @__PURE__ */ jsx(Box, { sx: (theme2) => ({ display: "flex", alignItems: "center", ...fadeWhenCollapsed(theme2) }), children: isOpen ? /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" }) })
+        badge && /* @__PURE__ */ jsx(EntryBadge, { label: badge.isCount && badge.content > BADGE_MAX ? `${BADGE_MAX}+` : badge.content, size: "small", color: "primary", ownSx: (theme2) => ({ height: 20, ...textSizeOf(MENU_BADGE_PIXELS), ml: 1, ...fadeWhenCollapsed(theme2) }) }),
+        hasChildren && /* @__PURE__ */ jsx(EntryExpand, { ownSx: (theme2) => ({ display: "flex", alignItems: "center", ...fadeWhenCollapsed(theme2) }), children: isOpen ? /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" }) })
       ]
     }
   );

package/dist/appShell/SideMenuEntry.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuEntry.js","sources":["../../src/appShell/SideMenuEntry.jsx"],"sourcesContent":["// Un renglón del menú lateral: ícono, nombre y (si trae) su numerito; si tiene submenú, se abre y se cierra en su lugar.\n// Con el menú encogido, el submenú sale como un menú flotante a la derecha del ícono (el de acciones de Apple: ícono y\n// nombre, la pantalla abierta marcada) en lugar de abrir todo el menú. Muestra un nivel: las hijas directas.\n//\n// Reglas que vienen del menú lateral de walk-ot, ya pagadas:\n//   - La estructura es FIJA: al encoger el menú, el nombre y la flecha NO se desmontan, solo se vuelven transparentes. Si\n//     se desmontaran, React los quita en el mismo cuadro en que el menú anima su ancho y el ojo lo lee como un salto.\n//   - Encogido, el nombre sale en un tooltip a la derecha.\n//   - Los tamaños van en rem, no en px: así crecen con el tamaño de letra que elige la persona (FontSizeToggle).\n//   - El renglón es una liga de verdad (clic con la rueda, «abrir en otra pestaña»), no un onClick que navega.\n//   - Una hija del submenú con ícono se mete un escalón; una sin ícono no deja hueco vacío: su nombre queda justo debajo\n//     del de su madre (con el hueco, el nombre se cortaba: «Alta con react-hook-fo…»).\n//\n// Con el vidrio del tema, lo que pide la guía de Liquid Glass de Apple:\n//   - lo elegido va en la «gota» (la misma de las pestañas), no en un fondo plano;\n//   - encogido, el menú es un panel con las esquinas del expandido (20) y cada renglón un botón de 44 px (el mínimo para el\n//     dedo) con esquina concéntrica: el radio del panel (20) menos el margen entre botón y orilla (10) da 10. Antes era una\n//     cápsula con botones redondos y se veía demasiado redondo (lo reportaron).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Collapse from '@mui/material/Collapse';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Tooltip from '@mui/material/Tooltip';\nimport {useTheme} from '@mui/material/styles';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\n\nimport {menuItemLabelOf, menuLinkPropsOf} from '@/appShell/menuItemText.js';\nimport SubmenuActionsMenu, {SUBMENU_PLACEMENT} from '@/appShell/SubmenuActionsMenu.jsx';\nimport {menuBadgeOf} from '@/navigation/appMenu.js';\nimport {accentTextStylesOf, glassDropOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {mergeStyles} from '@/theme/mergeComponents.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\n\n// las medidas del renglón, en unidades de spacing: los márgenes, el escalón de cada nivel de submenú y el espacio entre el\n// ícono y el nombre. Las hijas van más apretadas (ícono más chico, menos espacio, renglón más bajo): medido en Chrome, con\n// las medidas de las madres, «Alta con react-hook-form» en negritas pedía 160 px, tenía 154 y se cortaba.\nconst ROW_LEFT_PADDING = 1.5;\nconst ROW_RIGHT_PADDING = 1.5;\nconst CHILD_RIGHT_PADDING = 1;\nconst INDENT_PER_LEVEL = 1.5;\nconst ICON_GAP = 1.75;\nconst CHILD_ICON_GAP = 1;\nconst ICON_SIZE = '1.375rem';\nconst CHILD_ICON_SIZE = '1.25rem';\nconst ROW_MIN_HEIGHT_PIXELS = 40;\nconst CHILD_ROW_MIN_HEIGHT_PIXELS = 36;\n// encogido con vidrio: el botón de 44 px (lo mínimo para tocar con el dedo, WCAG 2.5.5) con su esquina concéntrica\nconst RAIL_BUTTON_PIXELS = 44;\n// el nombre del renglón y su numerito (px), con su espaciado de Apple (textSizeOf)\nconst MENU_TEXT_PIXELS = 13;\nconst MENU_BADGE_PIXELS = 11;\n// de ahí para arriba se lee «99+»\nconst BADGE_MAX = 99;\nconst RAIL_BUTTON_RADIUS_PIXELS = 10;\n\n/**\n * @param {object} props\n * @param {object} props.menuItem una entrada de composeMenu\n * @param {object|null} props.activeItem la entrada de la pantalla abierta\n * @param {boolean} props.collapsed el menú está encogido (solo íconos)\n * @param {() => void} [props.onNavigate] al elegir una pantalla (el cajón del teléfono se cierra)\n * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey (menuBadgeOf)\n * @param {number} [props.depth]\n */\nexport default function SideMenuEntry({menuItem, activeItem, collapsed, onNavigate, menuBadges, depth = 0}) {\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const theme = useTheme();\n    const isGlass = isGlassTheme(theme);\n    const isRailButton = isGlass && collapsed;\n    const hasChildren = Array.isArray(menuItem.children) && menuItem.children.length > 0;\n    const containsActive = hasChildren && menuItem.children.includes(activeItem);\n    const isActive = menuItem === activeItem || containsActive;\n    // abierto si la persona lo abrió, o solo si ahí está la pantalla abierta\n    const [openedByPerson, setOpenedByPerson] = useState(null);\n    // encogido: el botón del que cuelga el menú flotante del submenú (null = cerrado)\n    const [flyoutAnchor, setFlyoutAnchor] = useState(null);\n    const isOpen = openedByPerson ?? containsActive;\n    const label = menuItemLabelOf(menuItem, t);\n    // el badge: el conteo del servidor, la suma de las hijas o el fijo del menu.js; encogido va sobre el ícono\n    const badge = menuBadgeOf(menuItem, menuBadges);\n    const Icon = menuItem.Icon;\n\n    const toggleChildren = (event) => {\n        if (collapsed) {\n            setFlyoutAnchor(event.currentTarget);\n            return;\n        }\n        setOpenedByPerson(!isOpen);\n    };\n    const closeFlyout = () => setFlyoutAnchor(null);\n\n    const linkProps = hasChildren\n        ? {onClick: toggleChildren, ...(collapsed && {'aria-haspopup': 'menu'})}\n        : {...menuLinkPropsOf(menuItem, RouterLink), onClick: onNavigate};\n    const fadeWhenCollapsed = (theme) => ({opacity: collapsed ? 0 : 1, transition: theme.transitions.create('opacity')});\n\n    const isChild = depth > 0;\n    // una hija sin ícono empieza donde empieza el nombre de su madre: margen + ícono + espacio, más los escalones de en medio\n    const leftPadding = !isChild || Icon\n        ? theme.spacing(ROW_LEFT_PADDING + depth * INDENT_PER_LEVEL)\n        : `calc(${theme.spacing(ROW_LEFT_PADDING + ICON_GAP + (depth - 1) * INDENT_PER_LEVEL)} + ${ICON_SIZE})`;\n    // el renglón de la pantalla abierta va del color del tema, pero legible (accentTextStylesOf): el naranja tal cual sobre\n    // blanco daba 2.78 : 1\n    const activeText = accentTextStylesOf(theme);\n    // OJO: se SUMAN con mergeStyles, no con {...a, ...b}: los dos traen su parte de modo oscuro y con la suma simple la segunda\n    // borraba la primera (el elegido salía en oscuro con el fondo de claro, casi negro y con línea blanca; error mío)\n    const selectedStyle = mergeStyles(isGlass ? glassDropOf(theme) : {bgcolor: 'action.selected'}, activeText);\n\n    const entryButton = (\n        <ListItemButton {...linkProps} selected={!hasChildren && isActive} aria-expanded={hasChildren ? (collapsed ? Boolean(flyoutAnchor) : isOpen) : undefined}\n                        sx={{\n                            borderRadius: isRailButton ? `${RAIL_BUTTON_RADIUS_PIXELS}px` : 1.5, pl: leftPadding, pr: isChild ? CHILD_RIGHT_PADDING : ROW_RIGHT_PADDING,\n                            minHeight: isRailButton ? RAIL_BUTTON_PIXELS : (isChild ? CHILD_ROW_MIN_HEIGHT_PIXELS : ROW_MIN_HEIGHT_PIXELS),\n                            transition: theme.transitions.create(['background-color', 'border-radius', 'min-height']),\n                            ...(isActive ? activeText : {color: 'text.primary'}),\n                            '&.Mui-selected, &.Mui-selected:hover': selectedStyle,\n                        }}>\n            {(!isChild || Icon) && (\n                <ListItemIcon sx={{minWidth: 0, mr: isChild ? CHILD_ICON_GAP : ICON_GAP, color: 'inherit'}}>\n                    <Badge invisible={!collapsed || !badge} color=\"primary\" max={BADGE_MAX} badgeContent={badge?.isCount ? badge.content : undefined}\n                           variant={badge?.isCount ? 'standard' : 'dot'} overlap=\"circular\">\n                        {Icon ? <Icon sx={{fontSize: isChild ? CHILD_ICON_SIZE : ICON_SIZE}} /> : <Box sx={{width: ICON_SIZE, height: ICON_SIZE}} />}\n                    </Badge>\n                </ListItemIcon>\n            )}\n            <ListItemText primary={label} sx={fadeWhenCollapsed}\n                          slotProps={{primary: {noWrap: true, sx: {...textSizeOf(MENU_TEXT_PIXELS), fontWeight: isActive ? 600 : 400}}}} />\n            {badge && (\n                <Chip label={badge.isCount && badge.content > BADGE_MAX ? `${BADGE_MAX}+` : badge.content} size=\"small\" color=\"primary\" sx={(theme) => ({height: 20, ...textSizeOf(MENU_BADGE_PIXELS), ml: 1, ...fadeWhenCollapsed(theme)})} />\n            )}\n            {hasChildren && (\n                <Box sx={(theme) => ({display: 'flex', alignItems: 'center', ...fadeWhenCollapsed(theme)})}>\n                    {isOpen ? <ExpandMoreIcon fontSize=\"small\" /> : <ChevronRightIcon fontSize=\"small\" />}\n                </Box>\n            )}\n        </ListItemButton>\n    );\n\n    return (\n        <>\n            {collapsed ? <Tooltip title={label} placement=\"right\">{entryButton}</Tooltip> : entryButton}\n            {hasChildren && collapsed && (\n                <SubmenuActionsMenu anchorElement={flyoutAnchor} onClose={closeFlyout} menuItem={menuItem} activeItem={activeItem} menuBadges={menuBadges}\n                                    onNavigate={onNavigate} placement={SUBMENU_PLACEMENT.side} />\n            )}\n            {hasChildren && (\n                <Collapse in={isOpen && !collapsed} unmountOnExit>\n                    <List dense disablePadding>\n                        {menuItem.children.map((child) => (\n                            <SideMenuEntry key={child.to ?? child.href ?? menuItemLabelOf(child, t)} menuItem={child} activeItem={activeItem} collapsed={collapsed}\n                                           onNavigate={onNavigate} menuBadges={menuBadges} depth={depth + 1} />\n                        ))}\n                    </List>\n                </Collapse>\n            )}\n        </>\n    );\n}\n"],"names":["theme"],"mappings":"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"}
+{"version":3,"file":"SideMenuEntry.js","sources":["../../src/appShell/SideMenuEntry.jsx"],"sourcesContent":["// Un renglón del menú lateral: ícono, nombre y (si trae) su numerito; si tiene submenú, se abre y se cierra en su lugar.\n// Con el menú encogido, el submenú sale como un menú flotante a la derecha del ícono (el de acciones de Apple: ícono y\n// nombre, la pantalla abierta marcada) en lugar de abrir todo el menú. Muestra un nivel: las hijas directas.\n//\n// Reglas que vienen del menú lateral de walk-ot, ya pagadas:\n//   - La estructura es FIJA: al encoger el menú, el nombre y la flecha NO se desmontan, solo se vuelven transparentes. Si\n//     se desmontaran, React los quita en el mismo cuadro en que el menú anima su ancho y el ojo lo lee como un salto.\n//   - Encogido, el nombre sale en un tooltip a la derecha.\n//   - Los tamaños van en rem, no en px: así crecen con el tamaño de letra que elige la persona (FontSizeToggle).\n//   - El renglón es una liga de verdad (clic con la rueda, «abrir en otra pestaña»), no un onClick que navega.\n//   - Una hija del submenú con ícono se mete un escalón; una sin ícono no deja hueco vacío: su nombre queda justo debajo\n//     del de su madre (con el hueco, el nombre se cortaba: «Alta con react-hook-fo…»).\n//\n// Con el vidrio del tema, lo que pide la guía de Liquid Glass de Apple:\n//   - lo elegido va en la «gota» (la misma de las pestañas), no en un fondo plano;\n//   - encogido, el menú es un panel con las esquinas del expandido (20) y cada renglón un botón de 44 px (el mínimo para el\n//     dedo) con esquina concéntrica: el radio del panel (20) menos el margen entre botón y orilla (10) da 10. Antes era una\n//     cápsula con botones redondos y se veía demasiado redondo (lo reportaron).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSideMenuEntry con defaultProps y\n// styleOverrides de sus partes: button, icon, iconPlaceholder, text, badge, expand.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Badge from '@mui/material/Badge';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Collapse from '@mui/material/Collapse';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Tooltip from '@mui/material/Tooltip';\nimport {useTheme} from '@mui/material/styles';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\n\nimport {menuItemLabelOf, menuLinkPropsOf} from '@/appShell/menuItemText.js';\nimport SubmenuActionsMenu, {SUBMENU_PLACEMENT} from '@/appShell/SubmenuActionsMenu.jsx';\nimport {menuBadgeOf} from '@/navigation/appMenu.js';\nimport {accentTextStylesOf, glassDropOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {mergeStyles} from '@/theme/mergeComponents.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSideMenuEntry)\nconst THEME_NAME = 'CalcitaSideMenuEntry';\nconst EntryButton = piecePart(THEME_NAME, 'Button', ListItemButton);\nconst EntryIcon = piecePart(THEME_NAME, 'Icon', ListItemIcon);\nconst EntryIconPlaceholder = piecePart(THEME_NAME, 'IconPlaceholder', Box);\nconst EntryText = piecePart(THEME_NAME, 'Text', ListItemText);\nconst EntryBadge = piecePart(THEME_NAME, 'Badge', Chip);\nconst EntryExpand = piecePart(THEME_NAME, 'Expand', Box);\n\n// las medidas del renglón, en unidades de spacing: los márgenes, el escalón de cada nivel de submenú y el espacio entre el\n// ícono y el nombre. Las hijas van más apretadas (ícono más chico, menos espacio, renglón más bajo): medido en Chrome, con\n// las medidas de las madres, «Alta con react-hook-form» en negritas pedía 160 px, tenía 154 y se cortaba.\nconst ROW_LEFT_PADDING = 1.5;\nconst ROW_RIGHT_PADDING = 1.5;\nconst CHILD_RIGHT_PADDING = 1;\nconst INDENT_PER_LEVEL = 1.5;\nconst ICON_GAP = 1.75;\nconst CHILD_ICON_GAP = 1;\nconst ICON_SIZE = '1.375rem';\nconst CHILD_ICON_SIZE = '1.25rem';\nconst ROW_MIN_HEIGHT_PIXELS = 40;\nconst CHILD_ROW_MIN_HEIGHT_PIXELS = 36;\n// encogido con vidrio: el botón de 44 px (lo mínimo para tocar con el dedo, WCAG 2.5.5) con su esquina concéntrica\nconst RAIL_BUTTON_PIXELS = 44;\n// el nombre del renglón y su numerito (px), con su espaciado de Apple (textSizeOf)\nconst MENU_TEXT_PIXELS = 13;\nconst MENU_BADGE_PIXELS = 11;\n// de ahí para arriba se lee «99+»\nconst BADGE_MAX = 99;\nconst RAIL_BUTTON_RADIUS_PIXELS = 10;\n\n/**\n * @param {object} props\n * @param {object} props.menuItem una entrada de composeMenu\n * @param {object|null} props.activeItem la entrada de la pantalla abierta\n * @param {boolean} props.collapsed el menú está encogido (solo íconos)\n * @param {() => void} [props.onNavigate] al elegir una pantalla (el cajón del teléfono se cierra)\n * @param {Record<string, number>} [props.menuBadges] los conteos del servidor por badgeKey (menuBadgeOf)\n * @param {number} [props.depth]\n */\nexport default function SideMenuEntry(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSideMenuEntry.defaultProps) y encima lo que llega aquí\n    const {menuItem, activeItem, collapsed, onNavigate, menuBadges, depth = 0} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const theme = useTheme();\n    const isGlass = isGlassTheme(theme);\n    const isRailButton = isGlass && collapsed;\n    const hasChildren = Array.isArray(menuItem.children) && menuItem.children.length > 0;\n    const containsActive = hasChildren && menuItem.children.includes(activeItem);\n    const isActive = menuItem === activeItem || containsActive;\n    // abierto si la persona lo abrió, o solo si ahí está la pantalla abierta\n    const [openedByPerson, setOpenedByPerson] = useState(null);\n    // encogido: el botón del que cuelga el menú flotante del submenú (null = cerrado)\n    const [flyoutAnchor, setFlyoutAnchor] = useState(null);\n    const isOpen = openedByPerson ?? containsActive;\n    const label = menuItemLabelOf(menuItem, t);\n    // el badge: el conteo del servidor, la suma de las hijas o el fijo del menu.js; encogido va sobre el ícono\n    const badge = menuBadgeOf(menuItem, menuBadges);\n    const Icon = menuItem.Icon;\n\n    const toggleChildren = (event) => {\n        if (collapsed) {\n            setFlyoutAnchor(event.currentTarget);\n            return;\n        }\n        setOpenedByPerson(!isOpen);\n    };\n    const closeFlyout = () => setFlyoutAnchor(null);\n\n    const linkProps = hasChildren\n        ? {onClick: toggleChildren, ...(collapsed && {'aria-haspopup': 'menu'})}\n        : {...menuLinkPropsOf(menuItem, RouterLink), onClick: onNavigate};\n    const fadeWhenCollapsed = (theme) => ({opacity: collapsed ? 0 : 1, transition: theme.transitions.create('opacity')});\n\n    const isChild = depth > 0;\n    // una hija sin ícono empieza donde empieza el nombre de su madre: margen + ícono + espacio, más los escalones de en medio\n    const leftPadding = !isChild || Icon\n        ? theme.spacing(ROW_LEFT_PADDING + depth * INDENT_PER_LEVEL)\n        : `calc(${theme.spacing(ROW_LEFT_PADDING + ICON_GAP + (depth - 1) * INDENT_PER_LEVEL)} + ${ICON_SIZE})`;\n    // el renglón de la pantalla abierta va del color del tema, pero legible (accentTextStylesOf): el naranja tal cual sobre\n    // blanco daba 2.78 : 1\n    const activeText = accentTextStylesOf(theme);\n    // OJO: se SUMAN con mergeStyles, no con {...a, ...b}: los dos traen su parte de modo oscuro y con la suma simple la segunda\n    // borraba la primera (el elegido salía en oscuro con el fondo de claro, casi negro y con línea blanca; error mío)\n    const selectedStyle = mergeStyles(isGlass ? glassDropOf(theme) : {bgcolor: 'action.selected'}, activeText);\n\n    const entryButton = (\n        <EntryButton {...linkProps} selected={!hasChildren && isActive} aria-expanded={hasChildren ? (collapsed ? Boolean(flyoutAnchor) : isOpen) : undefined}\n                        ownSx={{\n                            borderRadius: isRailButton ? `${RAIL_BUTTON_RADIUS_PIXELS}px` : 1.5, pl: leftPadding, pr: isChild ? CHILD_RIGHT_PADDING : ROW_RIGHT_PADDING,\n                            minHeight: isRailButton ? RAIL_BUTTON_PIXELS : (isChild ? CHILD_ROW_MIN_HEIGHT_PIXELS : ROW_MIN_HEIGHT_PIXELS),\n                            transition: theme.transitions.create(['background-color', 'border-radius', 'min-height']),\n                            ...(isActive ? activeText : {color: 'text.primary'}),\n                            '&.Mui-selected, &.Mui-selected:hover': selectedStyle,\n                        }}>\n            {(!isChild || Icon) && (\n                <EntryIcon ownSx={{minWidth: 0, mr: isChild ? CHILD_ICON_GAP : ICON_GAP, color: 'inherit'}}>\n                    <Badge invisible={!collapsed || !badge} color=\"primary\" max={BADGE_MAX} badgeContent={badge?.isCount ? badge.content : undefined}\n                           variant={badge?.isCount ? 'standard' : 'dot'} overlap=\"circular\">\n                        {Icon ? <Icon sx={{fontSize: isChild ? CHILD_ICON_SIZE : ICON_SIZE}} /> : <EntryIconPlaceholder ownSx={{width: ICON_SIZE, height: ICON_SIZE}} />}\n                    </Badge>\n                </EntryIcon>\n            )}\n            <EntryText primary={label} ownSx={fadeWhenCollapsed}\n                          slotProps={{primary: {noWrap: true, sx: {...textSizeOf(MENU_TEXT_PIXELS), fontWeight: isActive ? 600 : 400}}}} />\n            {badge && (\n                <EntryBadge label={badge.isCount && badge.content > BADGE_MAX ? `${BADGE_MAX}+` : badge.content} size=\"small\" color=\"primary\" ownSx={(theme) => ({height: 20, ...textSizeOf(MENU_BADGE_PIXELS), ml: 1, ...fadeWhenCollapsed(theme)})} />\n            )}\n            {hasChildren && (\n                <EntryExpand ownSx={(theme) => ({display: 'flex', alignItems: 'center', ...fadeWhenCollapsed(theme)})}>\n                    {isOpen ? <ExpandMoreIcon fontSize=\"small\" /> : <ChevronRightIcon fontSize=\"small\" />}\n                </EntryExpand>\n            )}\n        </EntryButton>\n    );\n\n    return (\n        <>\n            {collapsed ? <Tooltip title={label} placement=\"right\">{entryButton}</Tooltip> : entryButton}\n            {hasChildren && collapsed && (\n                <SubmenuActionsMenu anchorElement={flyoutAnchor} onClose={closeFlyout} menuItem={menuItem} activeItem={activeItem} menuBadges={menuBadges}\n                                    onNavigate={onNavigate} placement={SUBMENU_PLACEMENT.side} />\n            )}\n            {hasChildren && (\n                <Collapse in={isOpen && !collapsed} unmountOnExit>\n                    <List dense disablePadding>\n                        {menuItem.children.map((child) => (\n                            <SideMenuEntry key={child.to ?? child.href ?? menuItemLabelOf(child, t)} menuItem={child} activeItem={activeItem} collapsed={collapsed}\n                                           onNavigate={onNavigate} menuBadges={menuBadges} depth={depth + 1} />\n                        ))}\n                    </List>\n                </Collapse>\n            )}\n        </>\n    );\n}\n"],"names":["theme"],"mappings":"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"}

package/dist/appShell/SubmenuActionsMenu.js

@@ -10,6 +10,9 @@ import { menuBadgeOf } from "../navigation/appMenu.js";
 import { textSizeOf } from "../theme/appleTracking.js";
 import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaSubmenuActionsMenu";
+const SubmenuBadge = piecePart(THEME_NAME, "Badge", Chip);
 const SUBMENU_PLACEMENT = Object.freeze({ side: "side", above: "above" });
 const GAP_PIXELS = 12;
 const MIN_WIDTH_PIXELS = 220;
@@ -26,7 +29,8 @@ const PLACEMENTS = Object.freeze({
     gapSx: { mt: `-${GAP_PIXELS}px` }
   }
 });
-function SubmenuActionsMenu({ anchorElement, onClose, menuItem, activeItem, menuBadges, onNavigate, placement = SUBMENU_PLACEMENT.side }) {
+function SubmenuActionsMenu(props) {
+  const { anchorElement, onClose, menuItem, activeItem, menuBadges, onNavigate, placement = SUBMENU_PLACEMENT.side } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("layout");
   const { Link: RouterLink } = useToolkitNavigation();
   const position = PLACEMENTS[placement] ?? PLACEMENTS[SUBMENU_PLACEMENT.side];
@@ -54,7 +58,7 @@ function SubmenuActionsMenu({ anchorElement, onClose, menuItem, activeItem, menu
             children: [
               ChildIcon && /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ChildIcon, { fontSize: "small" }) }),
               /* @__PURE__ */ jsx(ListItemText, { children: menuItemLabelOf(child, t) }),
-              badge && /* @__PURE__ */ jsx(Chip, { label: badge.content, size: "small", color: "primary", sx: { height: 20, ml: 1.5, ...textSizeOf(BADGE_PIXELS) } })
+              badge && /* @__PURE__ */ jsx(SubmenuBadge, { label: badge.content, size: "small", color: "primary", ownSx: { height: 20, ml: 1.5, ...textSizeOf(BADGE_PIXELS) } })
             ]
           },
           child.to ?? child.href ?? menuItemLabelOf(child, t)

package/dist/appShell/SubmenuActionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmenuActionsMenu.js","sources":["../../src/appShell/SubmenuActionsMenu.jsx"],"sourcesContent":["// El submenú de una entrada como menú de acciones de Apple: un menú flotante con las hijas (ícono, nombre y su badge) y\n// la pantalla abierta marcada. Lo usan el menú lateral encogido (sale a la DERECHA del ícono) y la barra de pestañas del\n// teléfono (sale ARRIBA de la pestaña): un solo lugar para los dos.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Chip from '@mui/material/Chip';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\n\nimport {menuItemLabelOf, menuLinkPropsOf} from '@/appShell/menuItemText.js';\nimport {menuBadgeOf} from '@/navigation/appMenu.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n/** Hacia dónde sale el menú: a la derecha del botón (menú lateral) o arriba de él (pestañas del teléfono). */\nexport const SUBMENU_PLACEMENT = Object.freeze({side: 'side', above: 'above'});\n\n// lo que se separa el menú de su botón, lo ancho mínimo y el tamaño del badge (px)\nconst GAP_PIXELS = 12;\nconst MIN_WIDTH_PIXELS = 220;\nconst BADGE_PIXELS = 11;\n\nconst PLACEMENTS = Object.freeze({\n    [SUBMENU_PLACEMENT.side]: {\n        anchorOrigin: {vertical: 'top', horizontal: 'right'}, transformOrigin: {vertical: 'top', horizontal: 'left'}, gapSx: {ml: `${GAP_PIXELS}px`},\n    },\n    [SUBMENU_PLACEMENT.above]: {\n        anchorOrigin: {vertical: 'top', horizontal: 'center'}, transformOrigin: {vertical: 'bottom', horizontal: 'center'}, gapSx: {mt: `-${GAP_PIXELS}px`},\n    },\n});\n\n/**\n * @param {object} props\n * @param {Element|null} props.anchorElement el botón del que cuelga (null = cerrado)\n * @param {() => void} props.onClose\n * @param {object} props.menuItem la entrada con sus hijas (children)\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 {() => void} [props.onNavigate] al elegir una hija\n * @param {'side'|'above'} [props.placement] SUBMENU_PLACEMENT; por omisión a la derecha\n */\nexport default function SubmenuActionsMenu({anchorElement, onClose, menuItem, activeItem, menuBadges, onNavigate, placement = SUBMENU_PLACEMENT.side}) {\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const position = PLACEMENTS[placement] ?? PLACEMENTS[SUBMENU_PLACEMENT.side];\n\n    return (\n        <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={onClose}\n              anchorOrigin={position.anchorOrigin} transformOrigin={position.transformOrigin}\n              slotProps={{paper: {sx: {minWidth: MIN_WIDTH_PIXELS, ...position.gapSx}}}}>\n            {(menuItem.children ?? []).map((child) => {\n                const ChildIcon = child.Icon;\n                const badge = menuBadgeOf(child, menuBadges);\n                return (\n                    <MenuItem key={child.to ?? child.href ?? menuItemLabelOf(child, t)} {...menuLinkPropsOf(child, RouterLink)} selected={child === activeItem}\n                              onClick={() => {\n                                  onClose();\n                                  onNavigate?.();\n                              }}>\n                        {ChildIcon && <ListItemIcon><ChildIcon fontSize=\"small\" /></ListItemIcon>}\n                        <ListItemText>{menuItemLabelOf(child, t)}</ListItemText>\n                        {badge && <Chip label={badge.content} size=\"small\" color=\"primary\" sx={{height: 20, ml: 1.5, ...textSizeOf(BADGE_PIXELS)}} />}\n                    </MenuItem>\n                );\n            })}\n        </Menu>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBO,MAAM,oBAAoB,OAAO,OAAO,EAAC,MAAM,QAAQ,OAAO,SAAQ;AAG7E,MAAM,aAAa;AACnB,MAAM,mBAAmB;AACzB,MAAM,eAAe;AAErB,MAAM,aAAa,OAAO,OAAO;AAAA,EAC7B,CAAC,kBAAkB,IAAI,GAAG;AAAA,IACtB,cAAc,EAAC,UAAU,OAAO,YAAY,QAAA;AAAA,IAAU,iBAAiB,EAAC,UAAU,OAAO,YAAY,OAAA;AAAA,IAAS,OAAO,EAAC,IAAI,GAAG,UAAU,KAAA;AAAA,EAAI;AAAA,EAE/I,CAAC,kBAAkB,KAAK,GAAG;AAAA,IACvB,cAAc,EAAC,UAAU,OAAO,YAAY,SAAA;AAAA,IAAW,iBAAiB,EAAC,UAAU,UAAU,YAAY,SAAA;AAAA,IAAW,OAAO,EAAC,IAAI,IAAI,UAAU,KAAA;AAAA,EAAI;AAE1J,CAAC;AAYD,SAAwB,mBAAmB,EAAC,eAAe,SAAS,UAAU,YAAY,YAAY,YAAY,YAAY,kBAAkB,KAAA,GAAO;AACnJ,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,QAAM,WAAW,WAAW,SAAS,KAAK,WAAW,kBAAkB,IAAI;AAE3E,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAK,UAAU;AAAA,MAAe,MAAM,QAAQ,aAAa;AAAA,MAAG;AAAA,MACvD,cAAc,SAAS;AAAA,MAAc,iBAAiB,SAAS;AAAA,MAC/D,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,kBAAkB,GAAG,SAAS,MAAA,IAAM;AAAA,MACvE,oBAAS,YAAY,CAAA,GAAI,IAAI,CAAC,UAAU;AACtC,cAAM,YAAY,MAAM;AACxB,cAAM,QAAQ,YAAY,OAAO,UAAU;AAC3C,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAAoE,GAAG,gBAAgB,OAAO,UAAU;AAAA,YAAG,UAAU,UAAU;AAAA,YACtH,SAAS,MAAM;AACX,sBAAA;AACA,2BAAA;AAAA,YACJ;AAAA,YACL,UAAA;AAAA,cAAA,iCAAc,cAAA,EAAa,UAAA,oBAAC,WAAA,EAAU,UAAS,SAAQ,GAAE;AAAA,cAC1D,oBAAC,cAAA,EAAc,UAAA,gBAAgB,OAAO,CAAC,GAAE;AAAA,cACxC,6BAAU,MAAA,EAAK,OAAO,MAAM,SAAS,MAAK,SAAQ,OAAM,WAAU,IAAI,EAAC,QAAQ,IAAI,IAAI,KAAK,GAAG,WAAW,YAAY,IAAC,CAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAPhH,MAAM,MAAM,MAAM,QAAQ,gBAAgB,OAAO,CAAC;AAAA,QAAA;AAAA,MAUzE,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"SubmenuActionsMenu.js","sources":["../../src/appShell/SubmenuActionsMenu.jsx"],"sourcesContent":["// El submenú de una entrada como menú de acciones de Apple: un menú flotante con las hijas (ícono, nombre y su badge) y\n// la pantalla abierta marcada. Lo usan el menú lateral encogido (sale a la DERECHA del ícono) y la barra de pestañas del\n// teléfono (sale ARRIBA de la pestaña): un solo lugar para los dos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSubmenuActionsMenu con defaultProps y\n// styleOverrides de sus partes: badge.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Chip from '@mui/material/Chip';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\n\nimport {menuItemLabelOf, menuLinkPropsOf} from '@/appShell/menuItemText.js';\nimport {menuBadgeOf} from '@/navigation/appMenu.js';\nimport {textSizeOf} from '@/theme/appleTracking.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.CalcitaSubmenuActionsMenu)\nconst THEME_NAME = 'CalcitaSubmenuActionsMenu';\nconst SubmenuBadge = piecePart(THEME_NAME, 'Badge', Chip);\n\n/** Hacia dónde sale el menú: a la derecha del botón (menú lateral) o arriba de él (pestañas del teléfono). */\nexport const SUBMENU_PLACEMENT = Object.freeze({side: 'side', above: 'above'});\n\n// lo que se separa el menú de su botón, lo ancho mínimo y el tamaño del badge (px)\nconst GAP_PIXELS = 12;\nconst MIN_WIDTH_PIXELS = 220;\nconst BADGE_PIXELS = 11;\n\nconst PLACEMENTS = Object.freeze({\n    [SUBMENU_PLACEMENT.side]: {\n        anchorOrigin: {vertical: 'top', horizontal: 'right'}, transformOrigin: {vertical: 'top', horizontal: 'left'}, gapSx: {ml: `${GAP_PIXELS}px`},\n    },\n    [SUBMENU_PLACEMENT.above]: {\n        anchorOrigin: {vertical: 'top', horizontal: 'center'}, transformOrigin: {vertical: 'bottom', horizontal: 'center'}, gapSx: {mt: `-${GAP_PIXELS}px`},\n    },\n});\n\n/**\n * @param {object} props\n * @param {Element|null} props.anchorElement el botón del que cuelga (null = cerrado)\n * @param {() => void} props.onClose\n * @param {object} props.menuItem la entrada con sus hijas (children)\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 {() => void} [props.onNavigate] al elegir una hija\n * @param {'side'|'above'} [props.placement] SUBMENU_PLACEMENT; por omisión a la derecha\n */\nexport default function SubmenuActionsMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSubmenuActionsMenu.defaultProps) y encima lo que llega aquí\n    const {anchorElement, onClose, menuItem, activeItem, menuBadges, onNavigate, placement = SUBMENU_PLACEMENT.side} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const position = PLACEMENTS[placement] ?? PLACEMENTS[SUBMENU_PLACEMENT.side];\n\n    return (\n        <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={onClose}\n              anchorOrigin={position.anchorOrigin} transformOrigin={position.transformOrigin}\n              slotProps={{paper: {sx: {minWidth: MIN_WIDTH_PIXELS, ...position.gapSx}}}}>\n            {(menuItem.children ?? []).map((child) => {\n                const ChildIcon = child.Icon;\n                const badge = menuBadgeOf(child, menuBadges);\n                return (\n                    <MenuItem key={child.to ?? child.href ?? menuItemLabelOf(child, t)} {...menuLinkPropsOf(child, RouterLink)} selected={child === activeItem}\n                              onClick={() => {\n                                  onClose();\n                                  onNavigate?.();\n                              }}>\n                        {ChildIcon && <ListItemIcon><ChildIcon fontSize=\"small\" /></ListItemIcon>}\n                        <ListItemText>{menuItemLabelOf(child, t)}</ListItemText>\n                        {badge && <SubmenuBadge label={badge.content} size=\"small\" color=\"primary\" ownSx={{height: 20, ml: 1.5, ...textSizeOf(BADGE_PIXELS)}} />}\n                    </MenuItem>\n                );\n            })}\n        </Menu>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,SAAS,IAAI;AAGjD,MAAM,oBAAoB,OAAO,OAAO,EAAC,MAAM,QAAQ,OAAO,SAAQ;AAG7E,MAAM,aAAa;AACnB,MAAM,mBAAmB;AACzB,MAAM,eAAe;AAErB,MAAM,aAAa,OAAO,OAAO;AAAA,EAC7B,CAAC,kBAAkB,IAAI,GAAG;AAAA,IACtB,cAAc,EAAC,UAAU,OAAO,YAAY,QAAA;AAAA,IAAU,iBAAiB,EAAC,UAAU,OAAO,YAAY,OAAA;AAAA,IAAS,OAAO,EAAC,IAAI,GAAG,UAAU,KAAA;AAAA,EAAI;AAAA,EAE/I,CAAC,kBAAkB,KAAK,GAAG;AAAA,IACvB,cAAc,EAAC,UAAU,OAAO,YAAY,SAAA;AAAA,IAAW,iBAAiB,EAAC,UAAU,UAAU,YAAY,SAAA;AAAA,IAAW,OAAO,EAAC,IAAI,IAAI,UAAU,KAAA;AAAA,EAAI;AAE1J,CAAC;AAYD,SAAwB,mBAAmB,OAAO;AAE9C,QAAM,EAAC,eAAe,SAAS,UAAU,YAAY,YAAY,YAAY,YAAY,kBAAkB,KAAA,IAAQ,cAAc,OAAO,UAAU;AAClJ,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,QAAM,WAAW,WAAW,SAAS,KAAK,WAAW,kBAAkB,IAAI;AAE3E,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAK,UAAU;AAAA,MAAe,MAAM,QAAQ,aAAa;AAAA,MAAG;AAAA,MACvD,cAAc,SAAS;AAAA,MAAc,iBAAiB,SAAS;AAAA,MAC/D,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,kBAAkB,GAAG,SAAS,MAAA,IAAM;AAAA,MACvE,oBAAS,YAAY,CAAA,GAAI,IAAI,CAAC,UAAU;AACtC,cAAM,YAAY,MAAM;AACxB,cAAM,QAAQ,YAAY,OAAO,UAAU;AAC3C,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAAoE,GAAG,gBAAgB,OAAO,UAAU;AAAA,YAAG,UAAU,UAAU;AAAA,YACtH,SAAS,MAAM;AACX,sBAAA;AACA,2BAAA;AAAA,YACJ;AAAA,YACL,UAAA;AAAA,cAAA,iCAAc,cAAA,EAAa,UAAA,oBAAC,WAAA,EAAU,UAAS,SAAQ,GAAE;AAAA,cAC1D,oBAAC,cAAA,EAAc,UAAA,gBAAgB,OAAO,CAAC,GAAE;AAAA,cACxC,6BAAU,cAAA,EAAa,OAAO,MAAM,SAAS,MAAK,SAAQ,OAAM,WAAU,OAAO,EAAC,QAAQ,IAAI,IAAI,KAAK,GAAG,WAAW,YAAY,IAAC,CAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAP3H,MAAM,MAAM,MAAM,QAAQ,gBAAgB,OAAO,CAAC;AAAA,QAAA;AAAA,MAUzE,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/appShell/TabBarEditor.js

@@ -12,18 +12,27 @@ import Typography from "@mui/material/Typography";
 import { menuItemLabelOf } from "./menuItemText.js";
 import { PINNABLE_TAB_LIMIT, menuItemKeyOf } from "../navigation/appMenu.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
-function TabBarEditor({ menuItems, pinnedKeys, onDone, onReset }) {
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaTabBarEditor";
+const EditorRoot = piecePart(THEME_NAME, "Root", Box);
+const EditorHeader = piecePart(THEME_NAME, "Header", Box);
+const EditorTitle = piecePart(THEME_NAME, "Title", Typography);
+const EditorList = piecePart(THEME_NAME, "List", List);
+const EditorItemIcon = piecePart(THEME_NAME, "ItemIcon", ListItemIcon);
+const EditorFooter = piecePart(THEME_NAME, "Footer", Box);
+function TabBarEditor(props) {
+  const { menuItems, pinnedKeys, onDone, onReset } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("layout");
   const [chosenKeys, setChosenKeys] = useState(pinnedKeys);
   const isFull = chosenKeys.length >= PINNABLE_TAB_LIMIT;
   const toggle = (key, isOn) => setChosenKeys((current) => isOn ? [...current, key] : current.filter((chosenKey) => chosenKey !== key));
   const chosenInMenuOrder = () => menuItems.map(menuItemKeyOf).filter((key) => chosenKeys.includes(key));
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsxs(Box, { sx: { px: 2, pt: 2, pb: 1, flexShrink: 0 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", component: "h2", sx: { fontWeight: 600 }, children: t("drawer.editTabs") }),
+  return /* @__PURE__ */ jsxs(EditorRoot, { ownSx: { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsxs(EditorHeader, { ownSx: { px: 2, pt: 2, pb: 1, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(EditorTitle, { variant: "subtitle1", component: "h2", ownSx: { fontWeight: 600 }, children: t("drawer.editTabs") }),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("drawer.editTabsHint", { count: PINNABLE_TAB_LIMIT }) })
     ] }),
-    /* @__PURE__ */ jsx(List, { dense: true, sx: { overflowY: "auto", flex: "1 1 auto", minHeight: 0, px: 1 }, children: menuItems.map((menuItem) => {
+    /* @__PURE__ */ jsx(EditorList, { dense: true, ownSx: { overflowY: "auto", flex: "1 1 auto", minHeight: 0, px: 1 }, children: menuItems.map((menuItem) => {
       const key = menuItemKeyOf(menuItem);
       const label = menuItemLabelOf(menuItem, t);
       const isOn = chosenKeys.includes(key);
@@ -39,11 +48,11 @@ function TabBarEditor({ menuItems, pinnedKeys, onDone, onReset }) {
           slotProps: { input: { id: switchId, "aria-label": t("drawer.tabInBar", { label }) } }
         }
       ), children: [
-        menuItem.Icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 40 }, children: /* @__PURE__ */ jsx(menuItem.Icon, {}) }),
+        menuItem.Icon && /* @__PURE__ */ jsx(EditorItemIcon, { ownSx: { minWidth: 40 }, children: /* @__PURE__ */ jsx(menuItem.Icon, {}) }),
         /* @__PURE__ */ jsx(ListItemText, { primary: /* @__PURE__ */ jsx("label", { htmlFor: switchId, children: label }) })
       ] }, key);
     }) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", gap: 1, px: 2, py: 1.5, flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsxs(EditorFooter, { ownSx: { display: "flex", justifyContent: "space-between", gap: 1, px: 2, py: 1.5, flexShrink: 0 }, children: [
       /* @__PURE__ */ jsx(Button, { onClick: onReset, children: t("drawer.resetTabs") }),
       /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: () => onDone(chosenInMenuOrder()), children: t("drawer.doneEditing") })
     ] })

package/dist/appShell/TabBarEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabBarEditor.js","sources":["../../src/appShell/TabBarEditor.jsx"],"sourcesContent":["// Elegir qué pantallas van en la barra de pestañas del teléfono: una lista de todo el menú con un interruptor por renglón.\n// Sale dentro de la hoja de «Más» (MobileTabBar) al picar «Editar la barra».\n//\n//   - Hasta PINNABLE_TAB_LIMIT (las que caben junto a «Más»); llenas, las demás se apagan hasta quitar una.\n//   - Al menos una: el interruptor de la última no se puede apagar (sin ninguna, la barra volvería sola a las del proyecto\n//     y parecería que no hizo caso).\n//   - Lo elegido se guarda al picar «Listo»; «Como venía» regresa a las que eligió el proyecto.\n//   - Van en el orden del menú: acomodarlas arrastrando sería otra decisión para la persona y otra cosa que probar.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Switch from '@mui/material/Switch';\nimport Typography from '@mui/material/Typography';\n\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\nimport {PINNABLE_TAB_LIMIT, menuItemKeyOf} from '@/navigation/appMenu.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n/**\n * @param {object} props\n * @param {object[]} props.menuItems todo el menú (lo que regresa composeMenu)\n * @param {string[]} props.pinnedKeys las que van hoy en la barra (menuItemKeyOf)\n * @param {(keys: string[]) => void} props.onDone con las elegidas, en el orden del menú\n * @param {() => void} props.onReset regresar a las del proyecto\n */\nexport default function TabBarEditor({menuItems, pinnedKeys, onDone, onReset}) {\n    const {t} = useToolkitTranslation('layout');\n    const [chosenKeys, setChosenKeys] = useState(pinnedKeys);\n    const isFull = chosenKeys.length >= PINNABLE_TAB_LIMIT;\n\n    const toggle = (key, isOn) => setChosenKeys((current) => (isOn ? [...current, key] : current.filter((chosenKey) => chosenKey !== key)));\n    // en el orden del menú, no en el que se fueron picando\n    const chosenInMenuOrder = () => menuItems.map(menuItemKeyOf).filter((key) => chosenKeys.includes(key));\n\n    return (\n        <Box sx={{display: 'flex', flexDirection: 'column', flex: '1 1 auto', minHeight: 0}}>\n            <Box sx={{px: 2, pt: 2, pb: 1, flexShrink: 0}}>\n                <Typography variant=\"subtitle1\" component=\"h2\" sx={{fontWeight: 600}}>{t('drawer.editTabs')}</Typography>\n                <Typography variant=\"body2\" color=\"text.secondary\">{t('drawer.editTabsHint', {count: PINNABLE_TAB_LIMIT})}</Typography>\n            </Box>\n            <List dense sx={{overflowY: 'auto', flex: '1 1 auto', minHeight: 0, px: 1}}>\n                {menuItems.map((menuItem) => {\n                    const key = menuItemKeyOf(menuItem);\n                    const label = menuItemLabelOf(menuItem, t);\n                    const isOn = chosenKeys.includes(key);\n                    const isLastOne = isOn && chosenKeys.length === 1;\n                    const switchId = `tab-bar-editor-${key}`;\n                    return (\n                        <ListItem key={key} secondaryAction={(\n                            <Switch edge=\"end\" checked={isOn} disabled={(!isOn && isFull) || isLastOne}\n                                    onChange={(event) => toggle(key, event.target.checked)}\n                                    slotProps={{input: {id: switchId, 'aria-label': t('drawer.tabInBar', {label})}}} />\n                        )}>\n                            {menuItem.Icon && <ListItemIcon sx={{minWidth: 40}}><menuItem.Icon /></ListItemIcon>}\n                            <ListItemText primary={<label htmlFor={switchId}>{label}</label>} />\n                        </ListItem>\n                    );\n                })}\n            </List>\n            <Box sx={{display: 'flex', justifyContent: 'space-between', gap: 1, px: 2, py: 1.5, flexShrink: 0}}>\n                <Button onClick={onReset}>{t('drawer.resetTabs')}</Button>\n                <Button variant=\"contained\" onClick={() => onDone(chosenInMenuOrder())}>{t('drawer.doneEditing')}</Button>\n            </Box>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA+BA,SAAwB,aAAa,EAAC,WAAW,YAAY,QAAQ,WAAU;AAC3E,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,UAAU;AACvD,QAAM,SAAS,WAAW,UAAU;AAEpC,QAAM,SAAS,CAAC,KAAK,SAAS,cAAc,CAAC,YAAa,OAAO,CAAC,GAAG,SAAS,GAAG,IAAI,QAAQ,OAAO,CAAC,cAAc,cAAc,GAAG,CAAE;AAEtI,QAAM,oBAAoB,MAAM,UAAU,IAAI,aAAa,EAAE,OAAO,CAAC,QAAQ,WAAW,SAAS,GAAG,CAAC;AAErG,SACI,qBAAC,KAAA,EAAI,IAAI,EAAC,SAAS,QAAQ,eAAe,UAAU,MAAM,YAAY,WAAW,EAAA,GAC7E,UAAA;AAAA,IAAA,qBAAC,KAAA,EAAI,IAAI,EAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,EAAA,GACvC,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,aAAY,WAAU,MAAK,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,EAAE,iBAAiB,EAAA,CAAE;AAAA,MAC5F,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,EAAE,uBAAuB,EAAC,OAAO,mBAAA,CAAmB,EAAA,CAAE;AAAA,IAAA,GAC9G;AAAA,wBACC,MAAA,EAAK,OAAK,MAAC,IAAI,EAAC,WAAW,QAAQ,MAAM,YAAY,WAAW,GAAG,IAAI,EAAA,GACnE,UAAA,UAAU,IAAI,CAAC,aAAa;AACzB,YAAM,MAAM,cAAc,QAAQ;AAClC,YAAM,QAAQ,gBAAgB,UAAU,CAAC;AACzC,YAAM,OAAO,WAAW,SAAS,GAAG;AACpC,YAAM,YAAY,QAAQ,WAAW,WAAW;AAChD,YAAM,WAAW,kBAAkB,GAAG;AACtC,aACI,qBAAC,YAAmB,iBAChB;AAAA,QAAC;AAAA,QAAA;AAAA,UAAO,MAAK;AAAA,UAAM,SAAS;AAAA,UAAM,UAAW,CAAC,QAAQ,UAAW;AAAA,UACzD,UAAU,CAAC,UAAU,OAAO,KAAK,MAAM,OAAO,OAAO;AAAA,UACrD,WAAW,EAAC,OAAO,EAAC,IAAI,UAAU,cAAc,EAAE,mBAAmB,EAAC,MAAA,CAAM,IAAC;AAAA,QAAC;AAAA,MAAA,GAErF,UAAA;AAAA,QAAA,SAAS,QAAQ,oBAAC,cAAA,EAAa,IAAI,EAAC,UAAU,GAAA,GAAK,UAAA,oBAAC,SAAS,MAAT,CAAA,CAAc,EAAA,CAAE;AAAA,QACrE,oBAAC,gBAAa,SAAS,oBAAC,WAAM,SAAS,UAAW,iBAAM,EAAA,CAAU;AAAA,MAAA,EAAA,GANvD,GAOf;AAAA,IAER,CAAC,EAAA,CACL;AAAA,yBACC,KAAA,EAAI,IAAI,EAAC,SAAS,QAAQ,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,GAAG,IAAI,KAAK,YAAY,KAC5F,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAO,SAAS,SAAU,UAAA,EAAE,kBAAkB,GAAE;AAAA,MACjD,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,MAAM,OAAO,kBAAA,CAAmB,GAAI,UAAA,EAAE,oBAAoB,EAAA,CAAE;AAAA,IAAA,EAAA,CACrG;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"TabBarEditor.js","sources":["../../src/appShell/TabBarEditor.jsx"],"sourcesContent":["// Elegir qué pantallas van en la barra de pestañas del teléfono: una lista de todo el menú con un interruptor por renglón.\n// Sale dentro de la hoja de «Más» (MobileTabBar) al picar «Editar la barra».\n//\n//   - Hasta PINNABLE_TAB_LIMIT (las que caben junto a «Más»); llenas, las demás se apagan hasta quitar una.\n//   - Al menos una: el interruptor de la última no se puede apagar (sin ninguna, la barra volvería sola a las del proyecto\n//     y parecería que no hizo caso).\n//   - Lo elegido se guarda al picar «Listo»; «Como venía» regresa a las que eligió el proyecto.\n//   - Van en el orden del menú: acomodarlas arrastrando sería otra decisión para la persona y otra cosa que probar.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTabBarEditor con defaultProps y\n// styleOverrides de sus partes: root, header, title, list, itemIcon, footer.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Switch from '@mui/material/Switch';\nimport Typography from '@mui/material/Typography';\n\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\nimport {PINNABLE_TAB_LIMIT, menuItemKeyOf} from '@/navigation/appMenu.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.CalcitaTabBarEditor)\nconst THEME_NAME = 'CalcitaTabBarEditor';\nconst EditorRoot = piecePart(THEME_NAME, 'Root', Box);\nconst EditorHeader = piecePart(THEME_NAME, 'Header', Box);\nconst EditorTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst EditorList = piecePart(THEME_NAME, 'List', List);\nconst EditorItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\nconst EditorFooter = piecePart(THEME_NAME, 'Footer', Box);\n\n/**\n * @param {object} props\n * @param {object[]} props.menuItems todo el menú (lo que regresa composeMenu)\n * @param {string[]} props.pinnedKeys las que van hoy en la barra (menuItemKeyOf)\n * @param {(keys: string[]) => void} props.onDone con las elegidas, en el orden del menú\n * @param {() => void} props.onReset regresar a las del proyecto\n */\nexport default function TabBarEditor(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaTabBarEditor.defaultProps) y encima lo que llega aquí\n    const {menuItems, pinnedKeys, onDone, onReset} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout');\n    const [chosenKeys, setChosenKeys] = useState(pinnedKeys);\n    const isFull = chosenKeys.length >= PINNABLE_TAB_LIMIT;\n\n    const toggle = (key, isOn) => setChosenKeys((current) => (isOn ? [...current, key] : current.filter((chosenKey) => chosenKey !== key)));\n    // en el orden del menú, no en el que se fueron picando\n    const chosenInMenuOrder = () => menuItems.map(menuItemKeyOf).filter((key) => chosenKeys.includes(key));\n\n    return (\n        <EditorRoot ownSx={{display: 'flex', flexDirection: 'column', flex: '1 1 auto', minHeight: 0}}>\n            <EditorHeader ownSx={{px: 2, pt: 2, pb: 1, flexShrink: 0}}>\n                <EditorTitle variant=\"subtitle1\" component=\"h2\" ownSx={{fontWeight: 600}}>{t('drawer.editTabs')}</EditorTitle>\n                <Typography variant=\"body2\" color=\"text.secondary\">{t('drawer.editTabsHint', {count: PINNABLE_TAB_LIMIT})}</Typography>\n            </EditorHeader>\n            <EditorList dense ownSx={{overflowY: 'auto', flex: '1 1 auto', minHeight: 0, px: 1}}>\n                {menuItems.map((menuItem) => {\n                    const key = menuItemKeyOf(menuItem);\n                    const label = menuItemLabelOf(menuItem, t);\n                    const isOn = chosenKeys.includes(key);\n                    const isLastOne = isOn && chosenKeys.length === 1;\n                    const switchId = `tab-bar-editor-${key}`;\n                    return (\n                        <ListItem key={key} secondaryAction={(\n                            <Switch edge=\"end\" checked={isOn} disabled={(!isOn && isFull) || isLastOne}\n                                    onChange={(event) => toggle(key, event.target.checked)}\n                                    slotProps={{input: {id: switchId, 'aria-label': t('drawer.tabInBar', {label})}}} />\n                        )}>\n                            {menuItem.Icon && <EditorItemIcon ownSx={{minWidth: 40}}><menuItem.Icon /></EditorItemIcon>}\n                            <ListItemText primary={<label htmlFor={switchId}>{label}</label>} />\n                        </ListItem>\n                    );\n                })}\n            </EditorList>\n            <EditorFooter ownSx={{display: 'flex', justifyContent: 'space-between', gap: 1, px: 2, py: 1.5, flexShrink: 0}}>\n                <Button onClick={onReset}>{t('drawer.resetTabs')}</Button>\n                <Button variant=\"contained\" onClick={() => onDone(chosenInMenuOrder())}>{t('drawer.doneEditing')}</Button>\n            </EditorFooter>\n        </EditorRoot>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/appShell/TopMenu.js

@@ -11,6 +11,10 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { menuItemLabelOf, menuLinkPropsOf } from "./menuItemText.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaTopMenu";
+const TopMenuLink = piecePart(THEME_NAME, "Link", Button);
+const TopMenuRoot = piecePart(THEME_NAME, "Root", Box);
 const ACTIVE_UNDERLINE_PIXELS = 2;
 function TopMenuEntry({ menuItem, activeItem }) {
   const { t } = useToolkitTranslation("layout");
@@ -29,26 +33,26 @@ function TopMenuEntry({ menuItem, activeItem }) {
   };
   if (!hasChildren) {
     return /* @__PURE__ */ jsx(
-      Button,
+      TopMenuLink,
       {
         ...menuLinkPropsOf(menuItem, RouterLink),
         startIcon: Icon ? /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) : void 0,
         "aria-current": isActive ? "page" : void 0,
-        sx: buttonSx,
+        ownSx: buttonSx,
         children: menuItemLabelOf(menuItem, t)
       }
     );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      Button,
+      TopMenuLink,
       {
         onClick: (event) => setAnchorElement(event.currentTarget),
         "aria-haspopup": "menu",
         "aria-expanded": Boolean(anchorElement),
         startIcon: Icon ? /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) : void 0,
         endIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }),
-        sx: buttonSx,
+        ownSx: buttonSx,
         children: menuItemLabelOf(menuItem, t)
       }
     ),
@@ -61,14 +65,15 @@ function TopMenuEntry({ menuItem, activeItem }) {
     }) })
   ] });
 }
-function TopMenu({ menuItems, activeItem }) {
+function TopMenu(props) {
+  const { menuItems, activeItem } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("layout");
   return /* @__PURE__ */ jsx(
-    Box,
+    TopMenuRoot,
     {
       component: "nav",
       "aria-label": t("drawer.ariaLabel"),
-      sx: { display: { xs: "none", md: "flex" }, alignItems: "stretch", alignSelf: "stretch", gap: 0.5, minWidth: 0, overflowX: "auto" },
+      ownSx: { display: { xs: "none", md: "flex" }, alignItems: "stretch", alignSelf: "stretch", gap: 0.5, minWidth: 0, overflowX: "auto" },
       children: menuItems.map((menuItem) => /* @__PURE__ */ jsx(TopMenuEntry, { menuItem, activeItem }, menuItem.to ?? menuItem.href ?? menuItemLabelOf(menuItem, t)))
     }
   );

package/dist/appShell/TopMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopMenu.js","sources":["../../src/appShell/TopMenu.jsx"],"sourcesContent":["// El menú dentro de la barra (menuPosition=\"top\"), para apps de pocos módulos: cada entrada es un botón; la que tiene\n// submenú abre una lista debajo. Las secciones no se pintan aquí (en una fila no hay dónde); en el teléfono el menú es\n// el mismo cajón del estilo lateral, con sus secciones.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport {menuItemLabelOf, menuLinkPropsOf} from '@/appShell/menuItemText.js';\n\n// la entrada abierta se marca con una raya abajo, del color principal (en la barra naranja, del color del texto)\nconst ACTIVE_UNDERLINE_PIXELS = 2;\n\n/**\n * Un botón del menú de arriba, con su lista si tiene submenú.\n *\n * @param {{menuItem: object, activeItem: object|null}} props\n */\nfunction TopMenuEntry({menuItem, activeItem}) {\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const [anchorElement, setAnchorElement] = useState(null);\n    const hasChildren = Array.isArray(menuItem.children) && menuItem.children.length > 0;\n    const isActive = menuItem === activeItem || (hasChildren && menuItem.children.includes(activeItem));\n    const Icon = menuItem.Icon;\n    const buttonSx = {\n        color: 'inherit', borderRadius: 1, px: 1.5, whiteSpace: 'nowrap', fontWeight: isActive ? 600 : 500,\n        boxShadow: isActive ? `inset 0 -${ACTIVE_UNDERLINE_PIXELS}px 0 currentColor` : 'none',\n    };\n\n    if (!hasChildren) {\n        return (\n            <Button {...menuLinkPropsOf(menuItem, RouterLink)} startIcon={Icon ? <Icon fontSize=\"small\" /> : undefined}\n                    aria-current={isActive ? 'page' : undefined} sx={buttonSx}>\n                {menuItemLabelOf(menuItem, t)}\n            </Button>\n        );\n    }\n    return (\n        <>\n            <Button onClick={(event) => setAnchorElement(event.currentTarget)} aria-haspopup=\"menu\" aria-expanded={Boolean(anchorElement)}\n                    startIcon={Icon ? <Icon fontSize=\"small\" /> : undefined} endIcon={<ExpandMoreIcon fontSize=\"small\" />} sx={buttonSx}>\n                {menuItemLabelOf(menuItem, t)}\n            </Button>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={() => setAnchorElement(null)} slotProps={{paper: {sx: {minWidth: 220, mt: 0.5}}}}>\n                {menuItem.children.map((child) => {\n                    const ChildIcon = child.Icon;\n                    return (\n                        <MenuItem key={child.to ?? child.href} {...menuLinkPropsOf(child, RouterLink)} selected={child === activeItem} onClick={() => setAnchorElement(null)}>\n                            {ChildIcon && <ListItemIcon><ChildIcon fontSize=\"small\" /></ListItemIcon>}\n                            <ListItemText primary={menuItemLabelOf(child, t)} />\n                        </MenuItem>\n                    );\n                })}\n            </Menu>\n        </>\n    );\n}\n\n/**\n * @param {{menuItems: object[], activeItem: object|null}} props\n */\nexport default function TopMenu({menuItems, activeItem}) {\n    const {t} = useToolkitTranslation('layout');\n    return (\n        <Box component=\"nav\" aria-label={t('drawer.ariaLabel')}\n             sx={{display: {xs: 'none', md: 'flex'}, alignItems: 'stretch', alignSelf: 'stretch', gap: 0.5, minWidth: 0, overflowX: 'auto'}}>\n            {menuItems.map((menuItem) => (\n                <TopMenuEntry key={menuItem.to ?? menuItem.href ?? menuItemLabelOf(menuItem, t)} menuItem={menuItem} activeItem={activeItem} />\n            ))}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAmBA,MAAM,0BAA0B;AAOhC,SAAS,aAAa,EAAC,UAAU,cAAa;AAC1C,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,QAAM,cAAc,MAAM,QAAQ,SAAS,QAAQ,KAAK,SAAS,SAAS,SAAS;AACnF,QAAM,WAAW,aAAa,cAAe,eAAe,SAAS,SAAS,SAAS,UAAU;AACjG,QAAM,OAAO,SAAS;AACtB,QAAM,WAAW;AAAA,IACb,OAAO;AAAA,IAAW,cAAc;AAAA,IAAG,IAAI;AAAA,IAAK,YAAY;AAAA,IAAU,YAAY,WAAW,MAAM;AAAA,IAC/F,WAAW,WAAW,YAAY,uBAAuB,sBAAsB;AAAA,EAAA;AAGnF,MAAI,CAAC,aAAa;AACd,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAAQ,GAAG,gBAAgB,UAAU,UAAU;AAAA,QAAG,WAAW,OAAO,oBAAC,MAAA,EAAK,UAAS,SAAQ,IAAK;AAAA,QACzF,gBAAc,WAAW,SAAS;AAAA,QAAW,IAAI;AAAA,QACpD,UAAA,gBAAgB,UAAU,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxC;AACA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAO,SAAS,CAAC,UAAU,iBAAiB,MAAM,aAAa;AAAA,QAAG,iBAAc;AAAA,QAAO,iBAAe,QAAQ,aAAa;AAAA,QACpH,WAAW,OAAO,oBAAC,MAAA,EAAK,UAAS,SAAQ,IAAK;AAAA,QAAW,SAAS,oBAAC,gBAAA,EAAe,UAAS,QAAA,CAAQ;AAAA,QAAI,IAAI;AAAA,QAC9G,UAAA,gBAAgB,UAAU,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhC,oBAAC,MAAA,EAAK,UAAU,eAAe,MAAM,QAAQ,aAAa,GAAG,SAAS,MAAM,iBAAiB,IAAI,GAAG,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,KAAK,IAAI,IAAA,IAAI,GAC/I,UAAA,SAAS,SAAS,IAAI,CAAC,UAAU;AAC9B,YAAM,YAAY,MAAM;AACxB,aACI,qBAAC,UAAA,EAAuC,GAAG,gBAAgB,OAAO,UAAU,GAAG,UAAU,UAAU,YAAY,SAAS,MAAM,iBAAiB,IAAI,GAC9I,UAAA;AAAA,QAAA,iCAAc,cAAA,EAAa,UAAA,oBAAC,WAAA,EAAU,UAAS,SAAQ,GAAE;AAAA,4BACzD,cAAA,EAAa,SAAS,gBAAgB,OAAO,CAAC,EAAA,CAAG;AAAA,MAAA,EAAA,GAFvC,MAAM,MAAM,MAAM,IAGjC;AAAA,IAER,CAAC,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AAKA,SAAwB,QAAQ,EAAC,WAAW,cAAa;AACrD,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI,WAAU;AAAA,MAAM,cAAY,EAAE,kBAAkB;AAAA,MAChD,IAAI,EAAC,SAAS,EAAC,IAAI,QAAQ,IAAI,OAAA,GAAS,YAAY,WAAW,WAAW,WAAW,KAAK,KAAK,UAAU,GAAG,WAAW,OAAA;AAAA,MACvH,oBAAU,IAAI,CAAC,aACZ,oBAAC,gBAAgF,UAAoB,WAAA,GAAlF,SAAS,MAAM,SAAS,QAAQ,gBAAgB,UAAU,CAAC,CAA+C,CAChI;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"TopMenu.js","sources":["../../src/appShell/TopMenu.jsx"],"sourcesContent":["// El menú dentro de la barra (menuPosition=\"top\"), para apps de pocos módulos: cada entrada es un botón; la que tiene\n// submenú abre una lista debajo. Las secciones no se pintan aquí (en una fila no hay dónde); en el teléfono el menú es\n// el mismo cajón del estilo lateral, con sus secciones.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTopMenu con defaultProps y\n// styleOverrides de sus partes: link, root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport {menuItemLabelOf, menuLinkPropsOf} from '@/appShell/menuItemText.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaTopMenu)\nconst THEME_NAME = 'CalcitaTopMenu';\nconst TopMenuLink = piecePart(THEME_NAME, 'Link', Button);\nconst TopMenuRoot = piecePart(THEME_NAME, 'Root', Box);\n\n// la entrada abierta se marca con una raya abajo, del color principal (en la barra naranja, del color del texto)\nconst ACTIVE_UNDERLINE_PIXELS = 2;\n\n/**\n * Un botón del menú de arriba, con su lista si tiene submenú.\n *\n * @param {{menuItem: object, activeItem: object|null}} props\n */\nfunction TopMenuEntry({menuItem, activeItem}) {\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const [anchorElement, setAnchorElement] = useState(null);\n    const hasChildren = Array.isArray(menuItem.children) && menuItem.children.length > 0;\n    const isActive = menuItem === activeItem || (hasChildren && menuItem.children.includes(activeItem));\n    const Icon = menuItem.Icon;\n    const buttonSx = {\n        color: 'inherit', borderRadius: 1, px: 1.5, whiteSpace: 'nowrap', fontWeight: isActive ? 600 : 500,\n        boxShadow: isActive ? `inset 0 -${ACTIVE_UNDERLINE_PIXELS}px 0 currentColor` : 'none',\n    };\n\n    if (!hasChildren) {\n        return (\n            <TopMenuLink {...menuLinkPropsOf(menuItem, RouterLink)} startIcon={Icon ? <Icon fontSize=\"small\" /> : undefined}\n                    aria-current={isActive ? 'page' : undefined} ownSx={buttonSx}>\n                {menuItemLabelOf(menuItem, t)}\n            </TopMenuLink>\n        );\n    }\n    return (\n        <>\n            <TopMenuLink onClick={(event) => setAnchorElement(event.currentTarget)} aria-haspopup=\"menu\" aria-expanded={Boolean(anchorElement)}\n                    startIcon={Icon ? <Icon fontSize=\"small\" /> : undefined} endIcon={<ExpandMoreIcon fontSize=\"small\" />} ownSx={buttonSx}>\n                {menuItemLabelOf(menuItem, t)}\n            </TopMenuLink>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={() => setAnchorElement(null)} slotProps={{paper: {sx: {minWidth: 220, mt: 0.5}}}}>\n                {menuItem.children.map((child) => {\n                    const ChildIcon = child.Icon;\n                    return (\n                        <MenuItem key={child.to ?? child.href} {...menuLinkPropsOf(child, RouterLink)} selected={child === activeItem} onClick={() => setAnchorElement(null)}>\n                            {ChildIcon && <ListItemIcon><ChildIcon fontSize=\"small\" /></ListItemIcon>}\n                            <ListItemText primary={menuItemLabelOf(child, t)} />\n                        </MenuItem>\n                    );\n                })}\n            </Menu>\n        </>\n    );\n}\n\n/**\n * @param {{menuItems: object[], activeItem: object|null}} props\n */\nexport default function TopMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaTopMenu.defaultProps) y encima lo que llega aquí\n    const {menuItems, activeItem} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout');\n    return (\n        <TopMenuRoot component=\"nav\" aria-label={t('drawer.ariaLabel')}\n             ownSx={{display: {xs: 'none', md: 'flex'}, alignItems: 'stretch', alignSelf: 'stretch', gap: 0.5, minWidth: 0, overflowX: 'auto'}}>\n            {menuItems.map((menuItem) => (\n                <TopMenuEntry key={menuItem.to ?? menuItem.href ?? menuItemLabelOf(menuItem, t)} menuItem={menuItem} activeItem={activeItem} />\n            ))}\n        </TopMenuRoot>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/appShell/Wordmark.js

@@ -1,9 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaWordmark";
+const WordmarkRoot = piecePart(THEME_NAME, "Root", Box);
 const WORDMARK_HEIGHT_PIXELS = 24;
-function Wordmark({ children }) {
-  return /* @__PURE__ */ jsx(Box, { sx: { height: WORDMARK_HEIGHT_PIXELS, display: "flex", alignItems: "center", flex: "0 0 auto", "& > img, & > svg": { height: "100%", width: "auto", display: "block" } }, children });
+function Wordmark(props) {
+  const { children } = usePieceProps(props, THEME_NAME);
+  return /* @__PURE__ */ jsx(WordmarkRoot, { ownSx: { height: WORDMARK_HEIGHT_PIXELS, display: "flex", alignItems: "center", flex: "0 0 auto", "& > img, & > svg": { height: "100%", width: "auto", display: "block" } }, children });
 }
 export {
   Wordmark as default

package/dist/appShell/Wordmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wordmark.js","sources":["../../src/appShell/Wordmark.jsx"],"sourcesContent":["// El logo ancho de la app (la marca con su nombre en una sola imagen, como el de muchas empresas) en la barra y arriba del\n// menú del teléfono: a 24 px de alto y lo ancho que pida, sin deformarse. Una imagen o un svg sueltos toman ese alto solos.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Box from '@mui/material/Box';\n\n// el alto del logo ancho: el de la letra del nombre con su renglón, para que la barra no crezca\nconst WORDMARK_HEIGHT_PIXELS = 24;\n\n/**\n * @param {{children: import('react').ReactNode}} props el logo (una <img>, un <svg> o lo que pinte el proyecto)\n */\nexport default function Wordmark({children}) {\n    return (\n        <Box sx={{height: WORDMARK_HEIGHT_PIXELS, display: 'flex', alignItems: 'center', flex: '0 0 auto', '& > img, & > svg': {height: '100%', width: 'auto', display: 'block'}}}>\n            {children}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;AAOA,MAAM,yBAAyB;AAK/B,SAAwB,SAAS,EAAC,YAAW;AACzC,SACI,oBAAC,OAAI,IAAI,EAAC,QAAQ,wBAAwB,SAAS,QAAQ,YAAY,UAAU,MAAM,YAAY,oBAAoB,EAAC,QAAQ,QAAQ,OAAO,QAAQ,SAAS,QAAA,KAC3J,UACL;AAER;"}
+{"version":3,"file":"Wordmark.js","sources":["../../src/appShell/Wordmark.jsx"],"sourcesContent":["// El logo ancho de la app (la marca con su nombre en una sola imagen, como el de muchas empresas) en la barra y arriba del\n// menú del teléfono: a 24 px de alto y lo ancho que pida, sin deformarse. Una imagen o un svg sueltos toman ese alto solos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaWordmark con defaultProps y\n// styleOverrides de sus partes: root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Box from '@mui/material/Box';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaWordmark)\nconst THEME_NAME = 'CalcitaWordmark';\nconst WordmarkRoot = piecePart(THEME_NAME, 'Root', Box);\n\n// el alto del logo ancho: el de la letra del nombre con su renglón, para que la barra no crezca\nconst WORDMARK_HEIGHT_PIXELS = 24;\n\n/**\n * @param {{children: import('react').ReactNode}} props el logo (una <img>, un <svg> o lo que pinte el proyecto)\n */\nexport default function Wordmark(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaWordmark.defaultProps) y encima lo que llega aquí\n    const {children} = usePieceProps(props, THEME_NAME);\n    return (\n        <WordmarkRoot ownSx={{height: WORDMARK_HEIGHT_PIXELS, display: 'flex', alignItems: 'center', flex: '0 0 auto', '& > img, & > svg': {height: '100%', width: 'auto', display: 'block'}}}>\n            {children}\n        </WordmarkRoot>\n    );\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,QAAQ,GAAG;AAGtD,MAAM,yBAAyB;AAK/B,SAAwB,SAAS,OAAO;AAEpC,QAAM,EAAC,SAAA,IAAY,cAAc,OAAO,UAAU;AAClD,SACI,oBAAC,gBAAa,OAAO,EAAC,QAAQ,wBAAwB,SAAS,QAAQ,YAAY,UAAU,MAAM,YAAY,oBAAoB,EAAC,QAAQ,QAAQ,OAAO,QAAQ,SAAS,QAAA,KACvK,UACL;AAER;"}

package/dist/auth/PasswordChecklist.js

@@ -5,7 +5,13 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
-import { passwordChecksOf, DEFAULT_PASSWORD_POLICY } from "./passwordRules.js";
+import { DEFAULT_PASSWORD_POLICY, passwordChecksOf } from "./passwordRules.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaPasswordChecklist";
+const ChecklistTitle = piecePart(THEME_NAME, "Title", Typography);
+const ChecklistList = piecePart(THEME_NAME, "List", Box);
+const ChecklistItem = piecePart(THEME_NAME, "Item", Box);
+const ChecklistHidden = piecePart(THEME_NAME, "Hidden", Box);
 const SCREEN_READER_ONLY_SX = {
   position: "absolute",
   width: "1px",
@@ -17,21 +23,22 @@ const SCREEN_READER_ONLY_SX = {
   whiteSpace: "nowrap",
   border: 0
 };
-function PasswordChecklist({ password, policy = DEFAULT_PASSWORD_POLICY, id, texts }) {
+function PasswordChecklist(props) {
+  const { password, policy = DEFAULT_PASSWORD_POLICY, id, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("auth", texts);
   return /* @__PURE__ */ jsxs(Box, { id, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", sx: { mb: 0.5 }, children: t("passwordRules.title") }),
-    /* @__PURE__ */ jsx(Box, { component: "ul", sx: { listStyle: "none", m: 0, p: 0, display: "grid", gap: 0.5 }, children: passwordChecksOf(password, policy).map((check) => /* @__PURE__ */ jsxs(
-      Box,
+    /* @__PURE__ */ jsx(ChecklistTitle, { variant: "caption", color: "text.secondary", component: "p", ownSx: { mb: 0.5 }, children: t("passwordRules.title") }),
+    /* @__PURE__ */ jsx(ChecklistList, { component: "ul", ownSx: { listStyle: "none", m: 0, p: 0, display: "grid", gap: 0.5 }, children: passwordChecksOf(password, policy).map((check) => /* @__PURE__ */ jsxs(
+      ChecklistItem,
       {
         component: "li",
         "data-rule": check.rule,
         "data-met": check.isMet,
-        sx: { display: "flex", alignItems: "center", gap: 1, color: check.isMet ? "text.primary" : "text.secondary" },
+        ownSx: { display: "flex", alignItems: "center", gap: 1, color: check.isMet ? "text.primary" : "text.secondary" },
         children: [
           check.isMet ? /* @__PURE__ */ jsx(CheckCircleIcon, { fontSize: "small", color: "success", "aria-hidden": true }) : /* @__PURE__ */ jsx(RadioButtonUncheckedIcon, { fontSize: "small", color: "disabled", "aria-hidden": true }),
           /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "span", children: t(`passwordRules.${check.rule}`, check.values) }),
-          /* @__PURE__ */ jsx(Box, { component: "span", sx: SCREEN_READER_ONLY_SX, children: check.isMet ? t("passwordRules.met") : t("passwordRules.missing") })
+          /* @__PURE__ */ jsx(ChecklistHidden, { component: "span", ownSx: SCREEN_READER_ONLY_SX, children: check.isMet ? t("passwordRules.met") : t("passwordRules.missing") })
         ]
       },
       check.rule

package/dist/auth/PasswordChecklist.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordChecklist.js","sources":["../../src/auth/PasswordChecklist.jsx"],"sourcesContent":["// La lista de lo que debe tener una contraseña nueva, que se va palomeando mientras la persona escribe: dice qué falta\n// ANTES de enviar, en lugar de un «contraseña inválida» después.\n//\n// Para el lector de pantalla cada renglón dice si ya cumple o falta (con el ícono solo, se oía la regla sin saber cómo\n// iba). Va justo debajo del campo de la contraseña nueva.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport CheckCircleIcon from '@mui/icons-material/CheckCircle';\nimport RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';\n\nimport {DEFAULT_PASSWORD_POLICY, passwordChecksOf} from '@/auth/passwordRules.js';\n\n// texto que solo oye el lector de pantalla (el mismo truco que usa MUI)\nconst SCREEN_READER_ONLY_SX = {\n    position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap', border: 0,\n};\n\n/**\n * @param {object} props\n * @param {string} props.password lo que lleva escrito la persona\n * @param {object} [props.policy] las reglas; por omisión DEFAULT_PASSWORD_POLICY\n * @param {string} [props.id]\n * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete\n */\nexport default function PasswordChecklist({password, policy = DEFAULT_PASSWORD_POLICY, id, texts}) {\n    const {t} = useToolkitTranslation('auth', texts);\n    return (\n        <Box id={id}>\n            <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\" sx={{mb: 0.5}}>{t('passwordRules.title')}</Typography>\n            <Box component=\"ul\" sx={{listStyle: 'none', m: 0, p: 0, display: 'grid', gap: 0.5}}>\n                {passwordChecksOf(password, policy).map((check) => (\n                    <Box component=\"li\" key={check.rule} data-rule={check.rule} data-met={check.isMet}\n                         sx={{display: 'flex', alignItems: 'center', gap: 1, color: check.isMet ? 'text.primary' : 'text.secondary'}}>\n                        {check.isMet\n                            ? <CheckCircleIcon fontSize=\"small\" color=\"success\" aria-hidden />\n                            : <RadioButtonUncheckedIcon fontSize=\"small\" color=\"disabled\" aria-hidden />}\n                        <Typography variant=\"body2\" component=\"span\">{t(`passwordRules.${check.rule}`, check.values)}</Typography>\n                        <Box component=\"span\" sx={SCREEN_READER_ONLY_SX}>{check.isMet ? t('passwordRules.met') : t('passwordRules.missing')}</Box>\n                    </Box>\n                ))}\n            </Box>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAgBA,MAAM,wBAAwB;AAAA,EAC1B,UAAU;AAAA,EAAY,OAAO;AAAA,EAAO,QAAQ;AAAA,EAAO,SAAS;AAAA,EAAG,QAAQ;AAAA,EAAQ,UAAU;AAAA,EAAU,MAAM;AAAA,EAAiB,YAAY;AAAA,EAAU,QAAQ;AAC5J;AASA,SAAwB,kBAAkB,EAAC,UAAU,SAAS,yBAAyB,IAAI,SAAQ;AAC/F,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ,KAAK;AAC/C,SACI,qBAAC,OAAI,IACD,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,WAAU,KAAI,IAAI,EAAC,IAAI,IAAA,GAAO,UAAA,EAAE,qBAAqB,GAAE;AAAA,IAC5G,oBAAC,OAAI,WAAU,MAAK,IAAI,EAAC,WAAW,QAAQ,GAAG,GAAG,GAAG,GAAG,SAAS,QAAQ,KAAK,IAAA,GACzE,UAAA,iBAAiB,UAAU,MAAM,EAAE,IAAI,CAAC,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAI,WAAU;AAAA,QAAsB,aAAW,MAAM;AAAA,QAAM,YAAU,MAAM;AAAA,QACvE,IAAI,EAAC,SAAS,QAAQ,YAAY,UAAU,KAAK,GAAG,OAAO,MAAM,QAAQ,iBAAiB,iBAAA;AAAA,QAC1F,UAAA;AAAA,UAAA,MAAM,QACD,oBAAC,iBAAA,EAAgB,UAAS,SAAQ,OAAM,WAAU,eAAW,KAAA,CAAC,wBAC7D,0BAAA,EAAyB,UAAS,SAAQ,OAAM,YAAW,eAAW,MAAC;AAAA,UAC9E,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,QAAQ,UAAA,EAAE,iBAAiB,MAAM,IAAI,IAAI,MAAM,MAAM,GAAE;AAAA,UAC7F,oBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,uBAAwB,UAAA,MAAM,QAAQ,EAAE,mBAAmB,IAAI,EAAE,uBAAuB,EAAA,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,MAN/F,MAAM;AAAA,IAAA,CAQlC,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"PasswordChecklist.js","sources":["../../src/auth/PasswordChecklist.jsx"],"sourcesContent":["// La lista de lo que debe tener una contraseña nueva, que se va palomeando mientras la persona escribe: dice qué falta\n// ANTES de enviar, en lugar de un «contraseña inválida» después.\n//\n// Para el lector de pantalla cada renglón dice si ya cumple o falta (con el ícono solo, se oía la regla sin saber cómo\n// iba). Va justo debajo del campo de la contraseña nueva.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPasswordChecklist con defaultProps y\n// styleOverrides de sus partes: title, list, item, hidden.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport CheckCircleIcon from '@mui/icons-material/CheckCircle';\nimport RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';\n\nimport {DEFAULT_PASSWORD_POLICY, passwordChecksOf} from '@/auth/passwordRules.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPasswordChecklist)\nconst THEME_NAME = 'CalcitaPasswordChecklist';\nconst ChecklistTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst ChecklistList = piecePart(THEME_NAME, 'List', Box);\nconst ChecklistItem = piecePart(THEME_NAME, 'Item', Box);\nconst ChecklistHidden = piecePart(THEME_NAME, 'Hidden', Box);\n\n// texto que solo oye el lector de pantalla (el mismo truco que usa MUI)\nconst SCREEN_READER_ONLY_SX = {\n    position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap', border: 0,\n};\n\n/**\n * @param {object} props\n * @param {string} props.password lo que lleva escrito la persona\n * @param {object} [props.policy] las reglas; por omisión DEFAULT_PASSWORD_POLICY\n * @param {string} [props.id]\n * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete\n */\nexport default function PasswordChecklist(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPasswordChecklist.defaultProps) y encima lo que llega aquí\n    const {password, policy = DEFAULT_PASSWORD_POLICY, id, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('auth', texts);\n    return (\n        <Box id={id}>\n            <ChecklistTitle variant=\"caption\" color=\"text.secondary\" component=\"p\" ownSx={{mb: 0.5}}>{t('passwordRules.title')}</ChecklistTitle>\n            <ChecklistList component=\"ul\" ownSx={{listStyle: 'none', m: 0, p: 0, display: 'grid', gap: 0.5}}>\n                {passwordChecksOf(password, policy).map((check) => (\n                    <ChecklistItem component=\"li\" key={check.rule} data-rule={check.rule} data-met={check.isMet}\n                         ownSx={{display: 'flex', alignItems: 'center', gap: 1, color: check.isMet ? 'text.primary' : 'text.secondary'}}>\n                        {check.isMet\n                            ? <CheckCircleIcon fontSize=\"small\" color=\"success\" aria-hidden />\n                            : <RadioButtonUncheckedIcon fontSize=\"small\" color=\"disabled\" aria-hidden />}\n                        <Typography variant=\"body2\" component=\"span\">{t(`passwordRules.${check.rule}`, check.values)}</Typography>\n                        <ChecklistHidden component=\"span\" ownSx={SCREEN_READER_ONLY_SX}>{check.isMet ? t('passwordRules.met') : t('passwordRules.missing')}</ChecklistHidden>\n                    </ChecklistItem>\n                ))}\n            </ChecklistList>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,SAAS,UAAU;AAChE,MAAM,gBAAgB,UAAU,YAAY,QAAQ,GAAG;AACvD,MAAM,gBAAgB,UAAU,YAAY,QAAQ,GAAG;AACvD,MAAM,kBAAkB,UAAU,YAAY,UAAU,GAAG;AAG3D,MAAM,wBAAwB;AAAA,EAC1B,UAAU;AAAA,EAAY,OAAO;AAAA,EAAO,QAAQ;AAAA,EAAO,SAAS;AAAA,EAAG,QAAQ;AAAA,EAAQ,UAAU;AAAA,EAAU,MAAM;AAAA,EAAiB,YAAY;AAAA,EAAU,QAAQ;AAC5J;AASA,SAAwB,kBAAkB,OAAO;AAE7C,QAAM,EAAC,UAAU,SAAS,yBAAyB,IAAI,UAAS,cAAc,OAAO,UAAU;AAC/F,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ,KAAK;AAC/C,SACI,qBAAC,OAAI,IACD,UAAA;AAAA,IAAA,oBAAC,gBAAA,EAAe,SAAQ,WAAU,OAAM,kBAAiB,WAAU,KAAI,OAAO,EAAC,IAAI,IAAA,GAAO,UAAA,EAAE,qBAAqB,GAAE;AAAA,IACnH,oBAAC,iBAAc,WAAU,MAAK,OAAO,EAAC,WAAW,QAAQ,GAAG,GAAG,GAAG,GAAG,SAAS,QAAQ,KAAK,IAAA,GACtF,UAAA,iBAAiB,UAAU,MAAM,EAAE,IAAI,CAAC,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAc,WAAU;AAAA,QAAsB,aAAW,MAAM;AAAA,QAAM,YAAU,MAAM;AAAA,QACjF,OAAO,EAAC,SAAS,QAAQ,YAAY,UAAU,KAAK,GAAG,OAAO,MAAM,QAAQ,iBAAiB,iBAAA;AAAA,QAC7F,UAAA;AAAA,UAAA,MAAM,QACD,oBAAC,iBAAA,EAAgB,UAAS,SAAQ,OAAM,WAAU,eAAW,KAAA,CAAC,wBAC7D,0BAAA,EAAyB,UAAS,SAAQ,OAAM,YAAW,eAAW,MAAC;AAAA,UAC9E,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,QAAQ,UAAA,EAAE,iBAAiB,MAAM,IAAI,IAAI,MAAM,MAAM,GAAE;AAAA,UAC7F,oBAAC,iBAAA,EAAgB,WAAU,QAAO,OAAO,uBAAwB,UAAA,MAAM,QAAQ,EAAE,mBAAmB,IAAI,EAAE,uBAAuB,EAAA,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,MANpG,MAAM;AAAA,IAAA,CAQ5C,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}

package/dist/calendar/EventCalendar.js

@@ -20,6 +20,12 @@ import { paletteOf } from "../theme/components/paletteOf.js";
 import { useToolkitSettings } from "../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import SegmentedControl from "../ui/filters/SegmentedControl.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaEventCalendar";
+const CalendarToolbar = piecePart(THEME_NAME, "Toolbar", Stack);
+const CalendarNavigation = piecePart(THEME_NAME, "Navigation", Stack);
+const CalendarTitle = piecePart(THEME_NAME, "Title", Typography);
+const CalendarCalendar = piecePart(THEME_NAME, "Calendar", Box);
 const CALENDAR_VIEW = Object.freeze({ month: "dayGridMonth", week: "timeGridWeek", day: "timeGridDay", list: "listWeek" });
 const VIEW_TEXT_KEY = Object.freeze({
   [CALENDAR_VIEW.month]: "month",
@@ -53,21 +59,22 @@ function calendarStylesOf(theme) {
     "& .fc-list": { borderRadius: "12px" }
   };
 }
-function EventCalendar({
-  events,
-  initialView = CALENDAR_VIEW.month,
-  views = Object.values(CALENDAR_VIEW),
-  onEventClick,
-  onDateSelect,
-  onEventChange,
-  height = "auto",
-  ariaLabel,
-  onDatesChange,
-  onViewChange,
-  renderEvent,
-  fullCalendarProps,
-  texts
-}) {
+function EventCalendar(props) {
+  const {
+    events,
+    initialView = CALENDAR_VIEW.month,
+    views = Object.values(CALENDAR_VIEW),
+    onEventClick,
+    onDateSelect,
+    onEventChange,
+    height = "auto",
+    ariaLabel,
+    onDatesChange,
+    onViewChange,
+    renderEvent,
+    fullCalendarProps,
+    texts
+  } = usePieceProps(props, THEME_NAME);
   const theme = useTheme();
   const palette = paletteOf(theme);
   const { t } = useToolkitTranslation("calendar", texts);
@@ -88,12 +95,12 @@ function EventCalendar({
     }
   };
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, role: "region", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", md: "row" }, spacing: 1.5, sx: { alignItems: { md: "center" }, justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs(CalendarToolbar, { direction: { xs: "column", md: "row" }, spacing: 1.5, ownSx: { alignItems: { md: "center" }, justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs(CalendarNavigation, { direction: "row", spacing: 1, ownSx: { alignItems: "center" }, children: [
         /* @__PURE__ */ jsx(Tooltip, { title: t("previous"), children: /* @__PURE__ */ jsx(IconButton, { "aria-label": t("previous"), onClick: () => calendarApi()?.prev(), children: /* @__PURE__ */ jsx(ChevronLeftRoundedIcon, {}) }) }),
         /* @__PURE__ */ jsx(Tooltip, { title: t("next"), children: /* @__PURE__ */ jsx(IconButton, { "aria-label": t("next"), onClick: () => calendarApi()?.next(), children: /* @__PURE__ */ jsx(ChevronRightRoundedIcon, {}) }) }),
         /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: () => calendarApi()?.today(), children: t("today") }),
-        /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "h2", sx: { pl: 1 }, "aria-live": "polite", children: capitalizeFirst(title) })
+        /* @__PURE__ */ jsx(CalendarTitle, { variant: "h6", component: "h2", ownSx: { pl: 1 }, "aria-live": "polite", children: capitalizeFirst(title) })
       ] }),
       views.length > 1 && /* @__PURE__ */ jsx(
         SegmentedControl,
@@ -105,7 +112,7 @@ function EventCalendar({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Box, { sx: calendarStylesOf, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(CalendarCalendar, { ownSx: calendarStylesOf, children: /* @__PURE__ */ jsx(
       FullCalendar,
       {
         locale: language === "es" ? spanishLocale : "en",