@stackcraftmx/calcita 0.27.0 → 0.30.0

package/dist/ui/layout/ErrorPage.js

@@ -9,6 +9,10 @@ import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import SystemUpdateAltRoundedIcon from "@mui/icons-material/SystemUpdateAltRounded";
 import TravelExploreOutlinedIcon from "@mui/icons-material/TravelExploreOutlined";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaErrorPage";
+const ErrorRoot = piecePart(THEME_NAME, "Root", Stack);
+const ErrorActions = piecePart(THEME_NAME, "Actions", Stack);
 const ERROR_PAGE_KIND = Object.freeze({ notFound: "notFound", forbidden: "forbidden", serverError: "serverError", newVersion: "newVersion" });
 const ERROR_PAGE_LOOK = Object.freeze({
   [ERROR_PAGE_KIND.notFound]: { Icon: TravelExploreOutlinedIcon, color: "info", httpStatus: 404 },
@@ -18,28 +22,29 @@ const ERROR_PAGE_LOOK = Object.freeze({
   [ERROR_PAGE_KIND.newVersion]: { Icon: SystemUpdateAltRoundedIcon, color: "info", httpStatus: null, retryKey: "reload" }
 });
 const ICON_PIXELS = 56;
-function ErrorPage({
-  kind,
-  title,
-  text,
-  homePath = "/",
-  onRetry,
-  onGoHome,
-  extraActions,
-  actions,
-  icon,
-  children,
-  texts
-}) {
+function ErrorPage(props) {
+  const {
+    kind,
+    title,
+    text,
+    homePath = "/",
+    onRetry,
+    onGoHome,
+    extraActions,
+    actions,
+    icon,
+    children,
+    texts
+  } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("errorPage", texts);
   const { Link } = useToolkitNavigation();
   const look = ERROR_PAGE_LOOK[kind] ?? ERROR_PAGE_LOOK[ERROR_PAGE_KIND.serverError];
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, sx: { alignItems: "center", textAlign: "center", py: { xs: 6, md: 10 }, px: 2, maxWidth: 560, mx: "auto" }, children: [
+  return /* @__PURE__ */ jsxs(ErrorRoot, { spacing: 2, ownSx: { alignItems: "center", textAlign: "center", py: { xs: 6, md: 10 }, px: 2, maxWidth: 560, mx: "auto" }, children: [
     icon ?? /* @__PURE__ */ jsx(look.Icon, { color: look.color, sx: { fontSize: ICON_PIXELS } }),
     /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h1", children: title ?? t(`${kind}.title`) }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: text ?? t(`${kind}.text`) }),
     children,
-    /* @__PURE__ */ jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1.5, useFlexGap: true, sx: { pt: 1, flexWrap: "wrap", justifyContent: "center" }, children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ErrorActions, { direction: { xs: "column", sm: "row" }, spacing: 1.5, useFlexGap: true, ownSx: { pt: 1, flexWrap: "wrap", justifyContent: "center" }, children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
       onRetry && /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: onRetry, children: t(look.retryKey ?? "retry") }),
       /* @__PURE__ */ jsx(Button, { variant: onRetry ? "outlined" : "contained", component: Link, to: homePath, onClick: onGoHome, children: t("goHome") }),
       extraActions

package/dist/ui/layout/ErrorPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorPage.js","sources":["../../../src/ui/layout/ErrorPage.jsx"],"sourcesContent":["// La pantalla de un error de navegación: la página no existe (404), no tiene permiso (403) o algo falló (500). Dice en\n// palabras normales qué pasó y qué hacer, con el número chico abajo como referencia técnica, y el botón para salir de ahí.\n//\n//   <ErrorPage kind={ERROR_PAGE_KIND.notFound} />                       el 404 del router (ruta '*')\n//   <ErrorPage kind={ERROR_PAGE_KIND.serverError} onRetry={reload} />   la pantalla tronó (errorElement del router)\n//   <ErrorPage kind={ERROR_PAGE_KIND.newVersion} onRetry={reload} />    se publicó otra versión con la pestaña abierta\n//\n// Los textos salen del paquete (namespace errorPage) en el idioma activo; title y text los cambian para un caso propio, y\n// `texts` cualquier otro («Ir al inicio», «Intentar de nuevo»).\n//\n// Se extiende sin tocar el framework: botones suyos junto a los de la casa (extraActions: «Contactar a soporte») o en lugar\n// de ellos (actions), algo debajo del texto (children: el teléfono de soporte, un folio), otro ícono (icon) y el evento de\n// «Ir al inicio» (onGoHome). La de «sin permiso» de las rutas se cambia con withAccess(…, {fallback}) y la de error de ruta\n// pasándole estas mismas props a RouteErrorScreen (/react-router).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';\nimport LockOutlinedIcon from '@mui/icons-material/LockOutlined';\nimport SystemUpdateAltRoundedIcon from '@mui/icons-material/SystemUpdateAltRounded';\nimport TravelExploreOutlinedIcon from '@mui/icons-material/TravelExploreOutlined';\n\n/** Los errores que tiene pantalla propia. */\nexport const ERROR_PAGE_KIND = Object.freeze({notFound: 'notFound', forbidden: 'forbidden', serverError: 'serverError', newVersion: 'newVersion'});\n\n// el ícono, el color y el código HTTP de cada uno (el código va chico: es la referencia técnica, no el mensaje)\nconst ERROR_PAGE_LOOK = Object.freeze({\n    [ERROR_PAGE_KIND.notFound]: {Icon: TravelExploreOutlinedIcon, color: 'info', httpStatus: 404},\n    [ERROR_PAGE_KIND.forbidden]: {Icon: LockOutlinedIcon, color: 'warning', httpStatus: 403},\n    [ERROR_PAGE_KIND.serverError]: {Icon: ErrorOutlineOutlinedIcon, color: 'error', httpStatus: 500},\n    // no es un error de nadie: se publicó otra versión; sin código, y el botón dice «Recargar»\n    [ERROR_PAGE_KIND.newVersion]: {Icon: SystemUpdateAltRoundedIcon, color: 'info', httpStatus: null, retryKey: 'reload'},\n});\nconst ICON_PIXELS = 56;\n\n/**\n * @param {object} props\n * @param {string} props.kind uno de ERROR_PAGE_KIND\n * @param {string} [props.title] ya traducido; por omisión el del paquete\n * @param {import('react').ReactNode} [props.text] ya traducido; por omisión el del paquete\n * @param {string} [props.homePath] a dónde lleva «Ir al inicio» (por omisión '/')\n * @param {() => void} [props.onRetry] con él sale «Intentar de nuevo»\n * @param {() => void} [props.onGoHome] al picar «Ir al inicio», antes de ir (para avisar o limpiar algo)\n * @param {import('react').ReactNode} [props.extraActions] botones suyos junto a los de la casa\n * @param {import('react').ReactNode} [props.actions] botones suyos EN LUGAR de los de la casa\n * @param {import('react').ReactNode} [props.icon] otro ícono; por omisión el de cada error\n * @param {import('react').ReactNode} [props.children] algo debajo del texto (el teléfono de soporte, un folio)\n * @param {object} [props.texts] los textos que cambian, con la forma de `errorPage` en los textos del paquete:\n *     {goHome: 'Volver al tablero', notFound: {title: '…'}}\n */\nexport default function ErrorPage({\n    kind, title, text, homePath = '/', onRetry, onGoHome, extraActions, actions, icon, children, texts,\n}) {\n    const {t} = useToolkitTranslation('errorPage', texts);\n    const {Link} = useToolkitNavigation();\n    const look = ERROR_PAGE_LOOK[kind] ?? ERROR_PAGE_LOOK[ERROR_PAGE_KIND.serverError];\n\n    return (\n        <Stack spacing={2} sx={{alignItems: 'center', textAlign: 'center', py: {xs: 6, md: 10}, px: 2, maxWidth: 560, mx: 'auto'}}>\n            {icon ?? <look.Icon color={look.color} sx={{fontSize: ICON_PIXELS}} />}\n            <Typography variant=\"h4\" component=\"h1\">{title ?? t(`${kind}.title`)}</Typography>\n            <Typography variant=\"body1\" color=\"text.secondary\">{text ?? t(`${kind}.text`)}</Typography>\n            {children}\n            <Stack direction={{xs: 'column', sm: 'row'}} spacing={1.5} useFlexGap sx={{pt: 1, flexWrap: 'wrap', justifyContent: 'center'}}>\n                {actions ?? (\n                    <>\n                        {onRetry && <Button variant=\"contained\" onClick={onRetry}>{t(look.retryKey ?? 'retry')}</Button>}\n                        <Button variant={onRetry ? 'outlined' : 'contained'} component={Link} to={homePath} onClick={onGoHome}>{t('goHome')}</Button>\n                        {extraActions}\n                    </>\n                )}\n            </Stack>\n            {look.httpStatus && <Typography variant=\"caption\" color=\"text.disabled\">{look.httpStatus}</Typography>}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA2BO,MAAM,kBAAkB,OAAO,OAAO,EAAC,UAAU,YAAY,WAAW,aAAa,aAAa,eAAe,YAAY,aAAA,CAAa;AAGjJ,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,CAAC,gBAAgB,QAAQ,GAAG,EAAC,MAAM,2BAA2B,OAAO,QAAQ,YAAY,IAAA;AAAA,EACzF,CAAC,gBAAgB,SAAS,GAAG,EAAC,MAAM,kBAAkB,OAAO,WAAW,YAAY,IAAA;AAAA,EACpF,CAAC,gBAAgB,WAAW,GAAG,EAAC,MAAM,0BAA0B,OAAO,SAAS,YAAY,IAAA;AAAA;AAAA,EAE5F,CAAC,gBAAgB,UAAU,GAAG,EAAC,MAAM,4BAA4B,OAAO,QAAQ,YAAY,MAAM,UAAU,SAAA;AAChH,CAAC;AACD,MAAM,cAAc;AAiBpB,SAAwB,UAAU;AAAA,EAC9B;AAAA,EAAM;AAAA,EAAO;AAAA,EAAM,WAAW;AAAA,EAAK;AAAA,EAAS;AAAA,EAAU;AAAA,EAAc;AAAA,EAAS;AAAA,EAAM;AAAA,EAAU;AACjG,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,aAAa,KAAK;AACpD,QAAM,EAAC,KAAA,IAAQ,qBAAA;AACf,QAAM,OAAO,gBAAgB,IAAI,KAAK,gBAAgB,gBAAgB,WAAW;AAEjF,SACI,qBAAC,SAAM,SAAS,GAAG,IAAI,EAAC,YAAY,UAAU,WAAW,UAAU,IAAI,EAAC,IAAI,GAAG,IAAI,GAAA,GAAK,IAAI,GAAG,UAAU,KAAK,IAAI,OAAA,GAC7G,UAAA;AAAA,IAAA,QAAQ,oBAAC,KAAK,MAAL,EAAU,OAAO,KAAK,OAAO,IAAI,EAAC,UAAU,YAAA,EAAW,CAAG;AAAA,IACpE,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAM,UAAA,SAAS,EAAE,GAAG,IAAI,QAAQ,EAAA,CAAE;AAAA,IACrE,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,QAAQ,EAAE,GAAG,IAAI,OAAO,EAAA,CAAE;AAAA,IAC7E;AAAA,IACD,oBAAC,SAAM,WAAW,EAAC,IAAI,UAAU,IAAI,MAAA,GAAQ,SAAS,KAAK,YAAU,MAAC,IAAI,EAAC,IAAI,GAAG,UAAU,QAAQ,gBAAgB,YAC/G,UAAA,WACG,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA,WAAW,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,SAAU,UAAA,EAAE,KAAK,YAAY,OAAO,EAAA,CAAE;AAAA,MACvF,oBAAC,QAAA,EAAO,SAAS,UAAU,aAAa,aAAa,WAAW,MAAM,IAAI,UAAU,SAAS,UAAW,UAAA,EAAE,QAAQ,GAAE;AAAA,MACnH;AAAA,IAAA,EAAA,CACL,EAAA,CAER;AAAA,IACC,KAAK,cAAc,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,iBAAiB,UAAA,KAAK,WAAA,CAAW;AAAA,EAAA,GAC7F;AAER;"}
+{"version":3,"file":"ErrorPage.js","sources":["../../../src/ui/layout/ErrorPage.jsx"],"sourcesContent":["// La pantalla de un error de navegación: la página no existe (404), no tiene permiso (403) o algo falló (500). Dice en\n// palabras normales qué pasó y qué hacer, con el número chico abajo como referencia técnica, y el botón para salir de ahí.\n//\n//   <ErrorPage kind={ERROR_PAGE_KIND.notFound} />                       el 404 del router (ruta '*')\n//   <ErrorPage kind={ERROR_PAGE_KIND.serverError} onRetry={reload} />   la pantalla tronó (errorElement del router)\n//   <ErrorPage kind={ERROR_PAGE_KIND.newVersion} onRetry={reload} />    se publicó otra versión con la pestaña abierta\n//\n// Los textos salen del paquete (namespace errorPage) en el idioma activo; title y text los cambian para un caso propio, y\n// `texts` cualquier otro («Ir al inicio», «Intentar de nuevo»).\n//\n// Se extiende sin tocar el framework: botones suyos junto a los de la casa (extraActions: «Contactar a soporte») o en lugar\n// de ellos (actions), algo debajo del texto (children: el teléfono de soporte, un folio), otro ícono (icon) y el evento de\n// «Ir al inicio» (onGoHome). La de «sin permiso» de las rutas se cambia con withAccess(…, {fallback}) y la de error de ruta\n// pasándole estas mismas props a RouteErrorScreen (/react-router).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaErrorPage con defaultProps y\n// styleOverrides de sus partes: root, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';\nimport LockOutlinedIcon from '@mui/icons-material/LockOutlined';\nimport SystemUpdateAltRoundedIcon from '@mui/icons-material/SystemUpdateAltRounded';\nimport TravelExploreOutlinedIcon from '@mui/icons-material/TravelExploreOutlined';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaErrorPage)\nconst THEME_NAME = 'CalcitaErrorPage';\nconst ErrorRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst ErrorActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/** Los errores que tiene pantalla propia. */\nexport const ERROR_PAGE_KIND = Object.freeze({notFound: 'notFound', forbidden: 'forbidden', serverError: 'serverError', newVersion: 'newVersion'});\n\n// el ícono, el color y el código HTTP de cada uno (el código va chico: es la referencia técnica, no el mensaje)\nconst ERROR_PAGE_LOOK = Object.freeze({\n    [ERROR_PAGE_KIND.notFound]: {Icon: TravelExploreOutlinedIcon, color: 'info', httpStatus: 404},\n    [ERROR_PAGE_KIND.forbidden]: {Icon: LockOutlinedIcon, color: 'warning', httpStatus: 403},\n    [ERROR_PAGE_KIND.serverError]: {Icon: ErrorOutlineOutlinedIcon, color: 'error', httpStatus: 500},\n    // no es un error de nadie: se publicó otra versión; sin código, y el botón dice «Recargar»\n    [ERROR_PAGE_KIND.newVersion]: {Icon: SystemUpdateAltRoundedIcon, color: 'info', httpStatus: null, retryKey: 'reload'},\n});\nconst ICON_PIXELS = 56;\n\n/**\n * @param {object} props\n * @param {string} props.kind uno de ERROR_PAGE_KIND\n * @param {string} [props.title] ya traducido; por omisión el del paquete\n * @param {import('react').ReactNode} [props.text] ya traducido; por omisión el del paquete\n * @param {string} [props.homePath] a dónde lleva «Ir al inicio» (por omisión '/')\n * @param {() => void} [props.onRetry] con él sale «Intentar de nuevo»\n * @param {() => void} [props.onGoHome] al picar «Ir al inicio», antes de ir (para avisar o limpiar algo)\n * @param {import('react').ReactNode} [props.extraActions] botones suyos junto a los de la casa\n * @param {import('react').ReactNode} [props.actions] botones suyos EN LUGAR de los de la casa\n * @param {import('react').ReactNode} [props.icon] otro ícono; por omisión el de cada error\n * @param {import('react').ReactNode} [props.children] algo debajo del texto (el teléfono de soporte, un folio)\n * @param {object} [props.texts] los textos que cambian, con la forma de `errorPage` en los textos del paquete:\n *     {goHome: 'Volver al tablero', notFound: {title: '…'}}\n */\nexport default function ErrorPage(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaErrorPage.defaultProps) y encima lo que llega aquí\n    const {\n    kind, title, text, homePath = '/', onRetry, onGoHome, extraActions, actions, icon, children, texts,\n} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('errorPage', texts);\n    const {Link} = useToolkitNavigation();\n    const look = ERROR_PAGE_LOOK[kind] ?? ERROR_PAGE_LOOK[ERROR_PAGE_KIND.serverError];\n\n    return (\n        <ErrorRoot spacing={2} ownSx={{alignItems: 'center', textAlign: 'center', py: {xs: 6, md: 10}, px: 2, maxWidth: 560, mx: 'auto'}}>\n            {icon ?? <look.Icon color={look.color} sx={{fontSize: ICON_PIXELS}} />}\n            <Typography variant=\"h4\" component=\"h1\">{title ?? t(`${kind}.title`)}</Typography>\n            <Typography variant=\"body1\" color=\"text.secondary\">{text ?? t(`${kind}.text`)}</Typography>\n            {children}\n            <ErrorActions direction={{xs: 'column', sm: 'row'}} spacing={1.5} useFlexGap ownSx={{pt: 1, flexWrap: 'wrap', justifyContent: 'center'}}>\n                {actions ?? (\n                    <>\n                        {onRetry && <Button variant=\"contained\" onClick={onRetry}>{t(look.retryKey ?? 'retry')}</Button>}\n                        <Button variant={onRetry ? 'outlined' : 'contained'} component={Link} to={homePath} onClick={onGoHome}>{t('goHome')}</Button>\n                        {extraActions}\n                    </>\n                )}\n            </ErrorActions>\n            {look.httpStatus && <Typography variant=\"caption\" color=\"text.disabled\">{look.httpStatus}</Typography>}\n        </ErrorRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA+BA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,KAAK;AACrD,MAAM,eAAe,UAAU,YAAY,WAAW,KAAK;AAGpD,MAAM,kBAAkB,OAAO,OAAO,EAAC,UAAU,YAAY,WAAW,aAAa,aAAa,eAAe,YAAY,aAAA,CAAa;AAGjJ,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,CAAC,gBAAgB,QAAQ,GAAG,EAAC,MAAM,2BAA2B,OAAO,QAAQ,YAAY,IAAA;AAAA,EACzF,CAAC,gBAAgB,SAAS,GAAG,EAAC,MAAM,kBAAkB,OAAO,WAAW,YAAY,IAAA;AAAA,EACpF,CAAC,gBAAgB,WAAW,GAAG,EAAC,MAAM,0BAA0B,OAAO,SAAS,YAAY,IAAA;AAAA;AAAA,EAE5F,CAAC,gBAAgB,UAAU,GAAG,EAAC,MAAM,4BAA4B,OAAO,QAAQ,YAAY,MAAM,UAAU,SAAA;AAChH,CAAC;AACD,MAAM,cAAc;AAiBpB,SAAwB,UAAU,OAAO;AAErC,QAAM;AAAA,IACN;AAAA,IAAM;AAAA,IAAO;AAAA,IAAM,WAAW;AAAA,IAAK;AAAA,IAAS;AAAA,IAAU;AAAA,IAAc;AAAA,IAAS;AAAA,IAAM;AAAA,IAAU;AAAA,EAAA,IAC7F,cAAc,OAAO,UAAU;AAC/B,QAAM,EAAC,EAAA,IAAK,sBAAsB,aAAa,KAAK;AACpD,QAAM,EAAC,KAAA,IAAQ,qBAAA;AACf,QAAM,OAAO,gBAAgB,IAAI,KAAK,gBAAgB,gBAAgB,WAAW;AAEjF,SACI,qBAAC,aAAU,SAAS,GAAG,OAAO,EAAC,YAAY,UAAU,WAAW,UAAU,IAAI,EAAC,IAAI,GAAG,IAAI,GAAA,GAAK,IAAI,GAAG,UAAU,KAAK,IAAI,OAAA,GACpH,UAAA;AAAA,IAAA,QAAQ,oBAAC,KAAK,MAAL,EAAU,OAAO,KAAK,OAAO,IAAI,EAAC,UAAU,YAAA,EAAW,CAAG;AAAA,IACpE,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAM,UAAA,SAAS,EAAE,GAAG,IAAI,QAAQ,EAAA,CAAE;AAAA,IACrE,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,QAAQ,EAAE,GAAG,IAAI,OAAO,EAAA,CAAE;AAAA,IAC7E;AAAA,IACD,oBAAC,gBAAa,WAAW,EAAC,IAAI,UAAU,IAAI,MAAA,GAAQ,SAAS,KAAK,YAAU,MAAC,OAAO,EAAC,IAAI,GAAG,UAAU,QAAQ,gBAAgB,YACzH,UAAA,WACG,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA,WAAW,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,SAAU,UAAA,EAAE,KAAK,YAAY,OAAO,EAAA,CAAE;AAAA,MACvF,oBAAC,QAAA,EAAO,SAAS,UAAU,aAAa,aAAa,WAAW,MAAM,IAAI,UAAU,SAAS,UAAW,UAAA,EAAE,QAAQ,GAAE;AAAA,MACnH;AAAA,IAAA,EAAA,CACL,EAAA,CAER;AAAA,IACC,KAAK,cAAc,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,iBAAiB,UAAA,KAAK,WAAA,CAAW;AAAA,EAAA,GAC7F;AAER;"}

package/dist/ui/layout/FullPageLoader.js

@@ -3,9 +3,12 @@ import { jsx } from "react/jsx-runtime";
 import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
+import { piecePart } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaFullPageLoader";
+const LoaderRoot = piecePart(THEME_NAME, "Root", Box);
 function FullPageLoader({ texts } = {}) {
   const { t } = useToolkitTranslation("common", texts);
-  return /* @__PURE__ */ jsx(Box, { role: "status", "aria-live": "polite", sx: { display: "grid", placeItems: "center", minHeight: "100vh", bgcolor: "background.default" }, children: /* @__PURE__ */ jsx(CircularProgress, { "aria-label": t("status.loading") }) });
+  return /* @__PURE__ */ jsx(LoaderRoot, { role: "status", "aria-live": "polite", ownSx: { display: "grid", placeItems: "center", minHeight: "100vh", bgcolor: "background.default" }, children: /* @__PURE__ */ jsx(CircularProgress, { "aria-label": t("status.loading") }) });
 }
 export {
   FullPageLoader as default

package/dist/ui/layout/FullPageLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullPageLoader.js","sources":["../../../src/ui/layout/FullPageLoader.jsx"],"sourcesContent":["// Indicador de carga a pantalla completa, mientras se sabe si hay sesión.\n// Sin él, el formulario de login parpadea medio segundo antes de que aparezca la pantalla de quien ya entró.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress';\n\n/**\n * @param {object} [props]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FullPageLoader({texts} = {}) {\n    const {t} = useToolkitTranslation('common', texts);\n\n    return (\n        <Box role=\"status\" aria-live=\"polite\" sx={{display: 'grid', placeItems: 'center', minHeight: '100vh', bgcolor: 'background.default'}}>\n            <CircularProgress aria-label={t('status.loading')} />\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;AAYA,SAAwB,eAAe,EAAC,MAAA,IAAS,IAAI;AACjD,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AAEjD,SACI,oBAAC,OAAI,MAAK,UAAS,aAAU,UAAS,IAAI,EAAC,SAAS,QAAQ,YAAY,UAAU,WAAW,SAAS,SAAS,qBAAA,GAC3G,UAAA,oBAAC,oBAAiB,cAAY,EAAE,gBAAgB,EAAA,CAAG,EAAA,CACvD;AAER;"}
+{"version":3,"file":"FullPageLoader.js","sources":["../../../src/ui/layout/FullPageLoader.jsx"],"sourcesContent":["// Indicador de carga a pantalla completa, mientras se sabe si hay sesión.\n// Sin él, el formulario de login parpadea medio segundo antes de que aparezca la pantalla de quien ya entró.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFullPageLoader con defaultProps y\n// styleOverrides de sus partes: root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport {piecePart} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFullPageLoader)\nconst THEME_NAME = 'CalcitaFullPageLoader';\nconst LoaderRoot = piecePart(THEME_NAME, 'Root', Box);\n\n/**\n * @param {object} [props]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FullPageLoader({texts} = {}) {\n    const {t} = useToolkitTranslation('common', texts);\n\n    return (\n        <LoaderRoot role=\"status\" aria-live=\"polite\" ownSx={{display: 'grid', placeItems: 'center', minHeight: '100vh', bgcolor: 'background.default'}}>\n            <CircularProgress aria-label={t('status.loading')} />\n        </LoaderRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAaA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AAMpD,SAAwB,eAAe,EAAC,MAAA,IAAS,IAAI;AACjD,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AAEjD,SACI,oBAAC,cAAW,MAAK,UAAS,aAAU,UAAS,OAAO,EAAC,SAAS,QAAQ,YAAY,UAAU,WAAW,SAAS,SAAS,qBAAA,GACrH,UAAA,oBAAC,oBAAiB,cAAY,EAAE,gBAAgB,EAAA,CAAG,EAAA,CACvD;AAER;"}

package/dist/ui/layout/GlassPanel.js

@@ -1,16 +1,20 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import Paper from "@mui/material/Paper";
-import { GLASS_PANEL_RADIUS_PIXELS, isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
+import { PANEL_RADIUS, isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaGlassPanel";
+const PanelRoot = piecePart(THEME_NAME, "Root", Paper);
 const SOLID_FLOATING_ELEVATION = 8;
 function floatingSurfaceOf(theme) {
   return {
-    borderRadius: `${GLASS_PANEL_RADIUS_PIXELS}px`,
+    borderRadius: PANEL_RADIUS,
     ...isGlassTheme(theme) ? glassStylesOf(theme) : { boxShadow: theme.shadows[SOLID_FLOATING_ELEVATION] }
   };
 }
-function GlassPanel({ children, sx, ...paperProps }) {
-  return /* @__PURE__ */ jsx(Paper, { elevation: 0, ...paperProps, sx: [floatingSurfaceOf, ...Array.isArray(sx) ? sx : [sx]], children });
+function GlassPanel(props) {
+  const { children, sx, ...paperProps } = usePieceProps(props, THEME_NAME);
+  return /* @__PURE__ */ jsx(PanelRoot, { elevation: 0, ...paperProps, ownSx: floatingSurfaceOf, sx, children });
 }
 export {
   GlassPanel as default

package/dist/ui/layout/GlassPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlassPanel.js","sources":["../../../src/ui/layout/GlassPanel.jsx"],"sourcesContent":["// Un panel que flota sobre el contenido: los controles encima de un mapa, una barra de acciones pegada abajo, un letrero\n// encima de una foto. Es de vidrio si el tema lo trae prendido (createToolkitTheme({glass: true})) y una tarjeta con sombra\n// si no: la pantalla se escribe una vez y sirve con los dos temas.\n//\n// No es para el contenido (una ficha, un formulario, una tabla): la guía del vidrio pide el texto largo sobre superficies\n// sólidas. Para eso está SectionCard.\n//\n//   <GlassPanel sx={{position: 'absolute', top: 16, right: 16, p: 1}}>…los botones del mapa…</GlassPanel>\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\n\nimport {GLASS_PANEL_RADIUS_PIXELS, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\n\n// sin vidrio, la sombra de lo que flota (la misma de los menús de MUI)\nconst SOLID_FLOATING_ELEVATION = 8;\n\n/**\n * El panel con su superficie: vidrio o sombra, según el tema.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction floatingSurfaceOf(theme) {\n    return {\n        borderRadius: `${GLASS_PANEL_RADIUS_PIXELS}px`,\n        ...(isGlassTheme(theme) ? glassStylesOf(theme) : {boxShadow: theme.shadows[SOLID_FLOATING_ELEVATION]}),\n    };\n}\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {object|Function|Array} [props.sx] estilos propios: se suman y ganan\n * @param {import('react').ElementType} [props.component] por omisión 'div'\n */\nexport default function GlassPanel({children, sx, ...paperProps}) {\n    return (\n        <Paper elevation={0} {...paperProps} sx={[floatingSurfaceOf, ...(Array.isArray(sx) ? sx : [sx])]}>\n            {children}\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;AAeA,MAAM,2BAA2B;AAQjC,SAAS,kBAAkB,OAAO;AAC9B,SAAO;AAAA,IACH,cAAc,GAAG,yBAAyB;AAAA,IAC1C,GAAI,aAAa,KAAK,IAAI,cAAc,KAAK,IAAI,EAAC,WAAW,MAAM,QAAQ,wBAAwB,EAAA;AAAA,EAAC;AAE5G;AAQA,SAAwB,WAAW,EAAC,UAAU,IAAI,GAAG,cAAa;AAC9D,6BACK,OAAA,EAAM,WAAW,GAAI,GAAG,YAAY,IAAI,CAAC,mBAAmB,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,CAAC,EAAE,CAAE,GAC1F,UACL;AAER;"}
+{"version":3,"file":"GlassPanel.js","sources":["../../../src/ui/layout/GlassPanel.jsx"],"sourcesContent":["// Un panel que flota sobre el contenido: los controles encima de un mapa, una barra de acciones pegada abajo, un letrero\n// encima de una foto. Es de vidrio si el tema lo trae prendido (createToolkitTheme({glass: true})) y una tarjeta con sombra\n// si no: la pantalla se escribe una vez y sirve con los dos temas.\n//\n// No es para el contenido (una ficha, un formulario, una tabla): la guía del vidrio pide el texto largo sobre superficies\n// sólidas. Para eso está SectionCard.\n//\n//   <GlassPanel sx={{position: 'absolute', top: 16, right: 16, p: 1}}>…los botones del mapa…</GlassPanel>\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaGlassPanel con defaultProps y\n// styleOverrides.root (el sx de la pantalla sigue ganando a todo).\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\n\nimport {PANEL_RADIUS, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaGlassPanel)\nconst THEME_NAME = 'CalcitaGlassPanel';\nconst PanelRoot = piecePart(THEME_NAME, 'Root', Paper);\n\n// sin vidrio, la sombra de lo que flota (la misma de los menús de MUI)\nconst SOLID_FLOATING_ELEVATION = 8;\n\n/**\n * El panel con su superficie: vidrio o sombra, según el tema.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction floatingSurfaceOf(theme) {\n    return {\n        borderRadius: PANEL_RADIUS,\n        ...(isGlassTheme(theme) ? glassStylesOf(theme) : {boxShadow: theme.shadows[SOLID_FLOATING_ELEVATION]}),\n    };\n}\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {object|Function|Array} [props.sx] estilos propios: se suman y ganan\n * @param {import('react').ElementType} [props.component] por omisión 'div'\n */\nexport default function GlassPanel(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaGlassPanel.defaultProps) y encima lo que llega aquí\n    const {children, sx, ...paperProps} = usePieceProps(props, THEME_NAME);\n    return (\n        <PanelRoot elevation={0} {...paperProps} ownSx={floatingSurfaceOf} sx={sx}>\n            {children}\n        </PanelRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;AAmBA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,KAAK;AAGrD,MAAM,2BAA2B;AAQjC,SAAS,kBAAkB,OAAO;AAC9B,SAAO;AAAA,IACH,cAAc;AAAA,IACd,GAAI,aAAa,KAAK,IAAI,cAAc,KAAK,IAAI,EAAC,WAAW,MAAM,QAAQ,wBAAwB,EAAA;AAAA,EAAC;AAE5G;AAQA,SAAwB,WAAW,OAAO;AAEtC,QAAM,EAAC,UAAU,IAAI,GAAG,eAAc,cAAc,OAAO,UAAU;AACrE,SACI,oBAAC,aAAU,WAAW,GAAI,GAAG,YAAY,OAAO,mBAAmB,IAC9D,SAAA,CACL;AAER;"}

package/dist/ui/layout/PageHeader.js

@@ -6,15 +6,21 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
 import DocumentTitle from "../navigation/DocumentTitle.js";
-function PageHeader({ title, eyebrow, subtitle, action, documentTitle }) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaPageHeader";
+const HeaderRoot = piecePart(THEME_NAME, "Root", Stack);
+const HeaderSubtitle = piecePart(THEME_NAME, "Subtitle", Typography);
+const HeaderAction = piecePart(THEME_NAME, "Action", Box);
+function PageHeader(props) {
+  const { title, eyebrow, subtitle, action, documentTitle } = usePieceProps(props, THEME_NAME);
   const titleRef = useRef(null);
   useRegisterPageTitle(title, titleRef);
-  return /* @__PURE__ */ jsxs(Stack, { component: "header", spacing: 1.25, sx: { alignItems: "center", textAlign: "center", py: { xs: 3, md: 4 } }, children: [
+  return /* @__PURE__ */ jsxs(HeaderRoot, { component: "header", spacing: 1.25, ownSx: { alignItems: "center", textAlign: "center", py: { xs: 3, md: 4 } }, children: [
     /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? title }),
     eyebrow && /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", children: eyebrow }),
     /* @__PURE__ */ jsx(Typography, { ref: titleRef, variant: "h4", component: "h1", children: title }),
-    subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", sx: { maxWidth: 640 }, children: subtitle }),
-    action && /* @__PURE__ */ jsx(Box, { sx: { pt: 1.5 }, children: action })
+    subtitle && /* @__PURE__ */ jsx(HeaderSubtitle, { variant: "body1", color: "text.secondary", ownSx: { maxWidth: 640 }, children: subtitle }),
+    action && /* @__PURE__ */ jsx(HeaderAction, { ownSx: { pt: 1.5 }, children: action })
   ] });
 }
 export {

package/dist/ui/layout/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../../../src/ui/layout/PageHeader.jsx"],"sourcesContent":["// Encabezado centrado de una pantalla: eyebrow en versalitas, título, subtítulo y una acción en píldora\n// (p. ej. VENTAS · MÓDULO 1 / Pedidos del mes / ... / Nuevo pedido).\n//\n// También pone el título de la pestaña (DocumentTitle) y, dentro de AppLayout, sube el título a la barra al deslizar.\n// Para una pantalla de trabajo (lista, formulario) se ve mejor PageHeading, el de las plantillas de MUI.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {string} [props.eyebrow]\n * @param {import('react').ReactNode} [props.subtitle]\n * @param {import('react').ReactNode} [props.action] normalmente un <Button variant=\"contained\" shape=\"pill\">\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n */\nexport default function PageHeader({title, eyebrow, subtitle, action, documentTitle}) {\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    return (\n        <Stack component=\"header\" spacing={1.25} sx={{alignItems: 'center', textAlign: 'center', py: {xs: 3, md: 4}}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {/* text.secondary y no text.disabled: el eyebrow se lee, WCAG no lo exime (disabled daba 2.57:1 sobre el lienzo) */}\n            {eyebrow && (\n                <Typography variant=\"overline\" color=\"text.secondary\">{eyebrow}</Typography>\n            )}\n            <Typography ref={titleRef} variant=\"h4\" component=\"h1\">{title}</Typography>\n            {subtitle && (\n                <Typography variant=\"body1\" color=\"text.secondary\" sx={{maxWidth: 640}}>{subtitle}</Typography>\n            )}\n            {action && <Box sx={{pt: 1.5}}>{action}</Box>}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAuBA,SAAwB,WAAW,EAAC,OAAO,SAAS,UAAU,QAAQ,iBAAgB;AAClF,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,8BACK,OAAA,EAAM,WAAU,UAAS,SAAS,MAAM,IAAI,EAAC,YAAY,UAAU,WAAW,UAAU,IAAI,EAAC,IAAI,GAAG,IAAI,OACrG,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAE7C,WACG,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAkB,UAAA,SAAQ;AAAA,IAEnE,oBAAC,cAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAM,UAAA,MAAA,CAAM;AAAA,IAC7D,YACG,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAC,UAAU,IAAA,GAAO,UAAA,SAAA,CAAS;AAAA,IAErF,8BAAW,KAAA,EAAI,IAAI,EAAC,IAAI,IAAA,GAAO,UAAA,OAAA,CAAO;AAAA,EAAA,GAC3C;AAER;"}
+{"version":3,"file":"PageHeader.js","sources":["../../../src/ui/layout/PageHeader.jsx"],"sourcesContent":["// Encabezado centrado de una pantalla: eyebrow en versalitas, título, subtítulo y una acción en píldora\n// (p. ej. VENTAS · MÓDULO 1 / Pedidos del mes / ... / Nuevo pedido).\n//\n// También pone el título de la pestaña (DocumentTitle) y, dentro de AppLayout, sube el título a la barra al deslizar.\n// Para una pantalla de trabajo (lista, formulario) se ve mejor PageHeading, el de las plantillas de MUI.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPageHeader con defaultProps y\n// styleOverrides de sus partes: root, subtitle, action.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPageHeader)\nconst THEME_NAME = 'CalcitaPageHeader';\nconst HeaderRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst HeaderSubtitle = piecePart(THEME_NAME, 'Subtitle', Typography);\nconst HeaderAction = piecePart(THEME_NAME, 'Action', Box);\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {string} [props.eyebrow]\n * @param {import('react').ReactNode} [props.subtitle]\n * @param {import('react').ReactNode} [props.action] normalmente un <Button variant=\"contained\" shape=\"pill\">\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n */\nexport default function PageHeader(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPageHeader.defaultProps) y encima lo que llega aquí\n    const {title, eyebrow, subtitle, action, documentTitle} = usePieceProps(props, THEME_NAME);\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    return (\n        <HeaderRoot component=\"header\" spacing={1.25} ownSx={{alignItems: 'center', textAlign: 'center', py: {xs: 3, md: 4}}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {/* text.secondary y no text.disabled: el eyebrow se lee, WCAG no lo exime (disabled daba 2.57:1 sobre el lienzo) */}\n            {eyebrow && (\n                <Typography variant=\"overline\" color=\"text.secondary\">{eyebrow}</Typography>\n            )}\n            <Typography ref={titleRef} variant=\"h4\" component=\"h1\">{title}</Typography>\n            {subtitle && (\n                <HeaderSubtitle variant=\"body1\" color=\"text.secondary\" ownSx={{maxWidth: 640}}>{subtitle}</HeaderSubtitle>\n            )}\n            {action && <HeaderAction ownSx={{pt: 1.5}}>{action}</HeaderAction>}\n        </HeaderRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,KAAK;AACtD,MAAM,iBAAiB,UAAU,YAAY,YAAY,UAAU;AACnE,MAAM,eAAe,UAAU,YAAY,UAAU,GAAG;AAUxD,SAAwB,WAAW,OAAO;AAEtC,QAAM,EAAC,OAAO,SAAS,UAAU,QAAQ,kBAAiB,cAAc,OAAO,UAAU;AACzF,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,8BACK,YAAA,EAAW,WAAU,UAAS,SAAS,MAAM,OAAO,EAAC,YAAY,UAAU,WAAW,UAAU,IAAI,EAAC,IAAI,GAAG,IAAI,OAC7G,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAE7C,WACG,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAkB,UAAA,SAAQ;AAAA,IAEnE,oBAAC,cAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAM,UAAA,MAAA,CAAM;AAAA,IAC7D,YACG,oBAAC,gBAAA,EAAe,SAAQ,SAAQ,OAAM,kBAAiB,OAAO,EAAC,UAAU,IAAA,GAAO,UAAA,SAAA,CAAS;AAAA,IAE5F,8BAAW,cAAA,EAAa,OAAO,EAAC,IAAI,IAAA,GAAO,UAAA,OAAA,CAAO;AAAA,EAAA,GACvD;AAER;"}

package/dist/ui/layout/PageHeading.js

@@ -14,8 +14,17 @@ import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
 import { menuBreadcrumbsOf } from "../../navigation/appMenu.js";
 import PageBreadcrumbs from "../navigation/PageBreadcrumbs.js";
 import DocumentTitle from "../navigation/DocumentTitle.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaPageHeading";
+const HeadingRoot = piecePart(THEME_NAME, "Root", Box);
+const HeadingBreadcrumbs = piecePart(THEME_NAME, "Breadcrumbs", Box);
+const HeadingTitleRow = piecePart(THEME_NAME, "TitleRow", Stack);
+const HeadingTitle = piecePart(THEME_NAME, "Title", Typography);
+const HeadingActions = piecePart(THEME_NAME, "Actions", Box);
+const HeadingDescription = piecePart(THEME_NAME, "Description", Typography);
 const MIN_BREADCRUMBS = 2;
-function PageHeading({ title, description, breadcrumbs, actions, documentTitle, texts }) {
+function PageHeading(props) {
+  const { title, description, breadcrumbs, actions, documentTitle, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("layout", texts);
   const { useLocation } = useToolkitNavigation();
   const { pathname } = useLocation();
@@ -26,23 +35,23 @@ function PageHeading({ title, description, breadcrumbs, actions, documentTitle,
   const inlineActionsSx = { display: "flex", gap: 1, flexWrap: "wrap", flex: { xs: "1 1 auto", sm: "0 0 auto" }, "& > .MuiButton-root": { width: { xs: "100%", sm: "auto" } } };
   const isActionsCapsule = Boolean(actions) && usesCapsules;
   const crumbs = breadcrumbs === false ? [] : breadcrumbs ?? menuBreadcrumbsOf(menuItems, pathname).map((menuItem) => ({ label: menuItemLabelOf(menuItem, t), to: menuItem.to }));
-  return /* @__PURE__ */ jsxs(Box, { component: "header", sx: { mb: 3 }, children: [
+  return /* @__PURE__ */ jsxs(HeadingRoot, { component: "header", ownSx: { mb: 3 }, children: [
     /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? title }),
-    crumbs.length >= MIN_BREADCRUMBS && /* @__PURE__ */ jsx(Box, { sx: { mb: 1 }, children: /* @__PURE__ */ jsx(PageBreadcrumbs, { items: crumbs }) }),
+    crumbs.length >= MIN_BREADCRUMBS && /* @__PURE__ */ jsx(HeadingBreadcrumbs, { ownSx: { mb: 1 }, children: /* @__PURE__ */ jsx(PageBreadcrumbs, { items: crumbs }) }),
     /* @__PURE__ */ jsxs(
-      Stack,
+      HeadingTitleRow,
       {
         direction: isActionsCapsule ? "row" : { xs: "column", sm: "row" },
         spacing: { xs: 1.5, sm: 2 },
-        sx: { alignItems: isActionsCapsule ? "flex-start" : { xs: "stretch", sm: "flex-start" }, justifyContent: "space-between" },
+        ownSx: { alignItems: isActionsCapsule ? "flex-start" : { xs: "stretch", sm: "flex-start" }, justifyContent: "space-between" },
         children: [
-          /* @__PURE__ */ jsx(Typography, { ref: titleRef, variant: "h4", component: "h1", sx: { minWidth: 0 }, children: title }),
+          /* @__PURE__ */ jsx(HeadingTitle, { ref: titleRef, variant: "h4", component: "h1", ownSx: { minWidth: 0 }, children: title }),
           isActionsCapsule && /* @__PURE__ */ jsx(BarActions, { label: title, inlineSx: { flexShrink: 0 }, children: actions }),
-          actions && !usesCapsules && /* @__PURE__ */ jsx(Box, { sx: inlineActionsSx, children: actions })
+          actions && !usesCapsules && /* @__PURE__ */ jsx(HeadingActions, { ownSx: inlineActionsSx, children: actions })
         ]
       }
     ),
-    description && /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", component: "div", sx: { mt: 0.75, maxWidth: 760 }, children: description })
+    description && /* @__PURE__ */ jsx(HeadingDescription, { variant: "body1", color: "text.secondary", component: "div", ownSx: { mt: 0.75, maxWidth: 760 }, children: description })
   ] });
 }
 export {

package/dist/ui/layout/PageHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeading.js","sources":["../../../src/ui/layout/PageHeading.jsx"],"sourcesContent":["// El encabezado de una pantalla al estilo de las plantillas de MUI (y del PageContainer de walk-ot): las migas arriba, el\n// título a la izquierda con los botones a la derecha, y una descripción corta abajo.\n//\n// Las migas salen SOLAS del menú de AppLayout (Inicio › Sección › Pantalla): la página no las escribe. Una pantalla que\n// no está en el menú (un detalle) pasa las suyas con `breadcrumbs`; breadcrumbs={false} las quita.\n// El título sube a la barra de AppLayout cuando sale de la vista al deslizar, y también es el título de la pestaña.\n// Con la barra en cápsulas, sus `actions` van a la barra en su propia cápsula (BarActions), como las barras de\n// herramientas de macOS; en el teléfono, y con la franja, se quedan aquí (con la franja, para no mover pantallas que ya\n// existen: quien las quiera en la franja usa BarActions).\n//\n// Cuál usar: PageHeading en las pantallas de trabajo (listas, formularios, tableros); PageHeader (centrado) en una\n// portada; DetailHeader en el detalle de un registro (título con sus insignias de estatus).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useAppMenu} from '@/appShell/appMenuContext.js';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {useBarActionsSlot} from '@/appShell/barActionsSlot.js';\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {menuBreadcrumbsOf} from '@/navigation/appMenu.js';\nimport PageBreadcrumbs from '@/ui/navigation/PageBreadcrumbs.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\n\n// con una sola miga (estar en el inicio) no se pintan: no dicen nada\nconst MIN_BREADCRUMBS = 2;\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.description]\n * @param {Array<{label: string, to?: string}>|false} [props.breadcrumbs] por omisión, las del menú\n * @param {import('react').ReactNode} [props.actions] botones a la derecha (en el teléfono, abajo y a lo ancho)\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function PageHeading({title, description, breadcrumbs, actions, documentTitle, texts}) {\n    const {t} = useToolkitTranslation('layout', texts);\n    const {useLocation} = useToolkitNavigation();\n    const {pathname} = useLocation();\n    const {menuItems} = useAppMenu();\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    const {usesCapsules} = useBarActionsSlot();\n    // sin cápsulas: a la derecha del título y, en el teléfono, abajo y a lo ancho\n    const inlineActionsSx = {display: 'flex', gap: 1, flexWrap: 'wrap', flex: {xs: '1 1 auto', sm: '0 0 auto'}, '& > .MuiButton-root': {width: {xs: '100%', sm: 'auto'}}};\n    // con cápsulas suben a la barra (escritorio) o flotan arriba (teléfono). Si no hay dónde (la barra fundida al menú), la\n    // cápsula de solo íconos se queda a la derecha del título, en el mismo renglón; el título se parte si no cabe\n    const isActionsCapsule = Boolean(actions) && usesCapsules;\n\n    const crumbs = breadcrumbs === false\n        ? []\n        : breadcrumbs ?? menuBreadcrumbsOf(menuItems, pathname).map((menuItem) => ({label: menuItemLabelOf(menuItem, t), to: menuItem.to}));\n\n    return (\n        <Box component=\"header\" sx={{mb: 3}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {crumbs.length >= MIN_BREADCRUMBS && <Box sx={{mb: 1}}><PageBreadcrumbs items={crumbs} /></Box>}\n            <Stack direction={isActionsCapsule ? 'row' : {xs: 'column', sm: 'row'}} spacing={{xs: 1.5, sm: 2}}\n                   sx={{alignItems: isActionsCapsule ? 'flex-start' : {xs: 'stretch', sm: 'flex-start'}, justifyContent: 'space-between'}}>\n                <Typography ref={titleRef} variant=\"h4\" component=\"h1\" sx={{minWidth: 0}}>{title}</Typography>\n                {isActionsCapsule && <BarActions label={title} inlineSx={{flexShrink: 0}}>{actions}</BarActions>}\n                {actions && !usesCapsules && <Box sx={inlineActionsSx}>{actions}</Box>}\n            </Stack>\n            {description && (\n                <Typography variant=\"body1\" color=\"text.secondary\" component=\"div\" sx={{mt: 0.75, maxWidth: 760}}>{description}</Typography>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BA,MAAM,kBAAkB;AAWxB,SAAwB,YAAY,EAAC,OAAO,aAAa,aAAa,SAAS,eAAe,SAAQ;AAClG,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,YAAA,IAAe,qBAAA;AACtB,QAAM,EAAC,SAAA,IAAY,YAAA;AACnB,QAAM,EAAC,UAAA,IAAa,WAAA;AACpB,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,QAAM,EAAC,aAAA,IAAgB,kBAAA;AAEvB,QAAM,kBAAkB,EAAC,SAAS,QAAQ,KAAK,GAAG,UAAU,QAAQ,MAAM,EAAC,IAAI,YAAY,IAAI,WAAA,GAAa,uBAAuB,EAAC,OAAO,EAAC,IAAI,QAAQ,IAAI,OAAA,IAAO;AAGnK,QAAM,mBAAmB,QAAQ,OAAO,KAAK;AAE7C,QAAM,SAAS,gBAAgB,QACzB,CAAA,IACA,eAAe,kBAAkB,WAAW,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAC,OAAO,gBAAgB,UAAU,CAAC,GAAG,IAAI,SAAS,GAAA,EAAI;AAEtI,SACI,qBAAC,OAAI,WAAU,UAAS,IAAI,EAAC,IAAI,KAC7B,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAC7C,OAAO,UAAU,mBAAmB,oBAAC,OAAI,IAAI,EAAC,IAAI,EAAA,GAAI,UAAA,oBAAC,iBAAA,EAAgB,OAAO,QAAQ,GAAE;AAAA,IACzF;AAAA,MAAC;AAAA,MAAA;AAAA,QAAM,WAAW,mBAAmB,QAAQ,EAAC,IAAI,UAAU,IAAI,MAAA;AAAA,QAAQ,SAAS,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,QACxF,IAAI,EAAC,YAAY,mBAAmB,eAAe,EAAC,IAAI,WAAW,IAAI,gBAAe,gBAAgB,gBAAA;AAAA,QACzG,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAC,UAAU,EAAA,GAAK,UAAA,OAAM;AAAA,UAChF,oBAAoB,oBAAC,YAAA,EAAW,OAAO,OAAO,UAAU,EAAC,YAAY,EAAA,GAAK,UAAA,QAAA,CAAQ;AAAA,UAClF,WAAW,CAAC,oCAAiB,KAAA,EAAI,IAAI,iBAAkB,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnE,eACG,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,OAAM,IAAI,EAAC,IAAI,MAAM,UAAU,IAAA,GAAO,UAAA,YAAA,CAAY;AAAA,EAAA,GAEvH;AAER;"}
+{"version":3,"file":"PageHeading.js","sources":["../../../src/ui/layout/PageHeading.jsx"],"sourcesContent":["// El encabezado de una pantalla al estilo de las plantillas de MUI (y del PageContainer de walk-ot): las migas arriba, el\n// título a la izquierda con los botones a la derecha, y una descripción corta abajo.\n//\n// Las migas salen SOLAS del menú de AppLayout (Inicio › Sección › Pantalla): la página no las escribe. Una pantalla que\n// no está en el menú (un detalle) pasa las suyas con `breadcrumbs`; breadcrumbs={false} las quita.\n// El título sube a la barra de AppLayout cuando sale de la vista al deslizar, y también es el título de la pestaña.\n// Con la barra en cápsulas, sus `actions` van a la barra en su propia cápsula (BarActions), como las barras de\n// herramientas de macOS; en el teléfono, y con la franja, se quedan aquí (con la franja, para no mover pantallas que ya\n// existen: quien las quiera en la franja usa BarActions).\n//\n// Cuál usar: PageHeading en las pantallas de trabajo (listas, formularios, tableros); PageHeader (centrado) en una\n// portada; DetailHeader en el detalle de un registro (título con sus insignias de estatus).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPageHeading con defaultProps y\n// styleOverrides de sus partes: root, breadcrumbs, titleRow, title, actions, description.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useAppMenu} from '@/appShell/appMenuContext.js';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {useBarActionsSlot} from '@/appShell/barActionsSlot.js';\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {menuBreadcrumbsOf} from '@/navigation/appMenu.js';\nimport PageBreadcrumbs from '@/ui/navigation/PageBreadcrumbs.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPageHeading)\nconst THEME_NAME = 'CalcitaPageHeading';\nconst HeadingRoot = piecePart(THEME_NAME, 'Root', Box);\nconst HeadingBreadcrumbs = piecePart(THEME_NAME, 'Breadcrumbs', Box);\nconst HeadingTitleRow = piecePart(THEME_NAME, 'TitleRow', Stack);\nconst HeadingTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst HeadingActions = piecePart(THEME_NAME, 'Actions', Box);\nconst HeadingDescription = piecePart(THEME_NAME, 'Description', Typography);\n\n// con una sola miga (estar en el inicio) no se pintan: no dicen nada\nconst MIN_BREADCRUMBS = 2;\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.description]\n * @param {Array<{label: string, to?: string}>|false} [props.breadcrumbs] por omisión, las del menú\n * @param {import('react').ReactNode} [props.actions] botones a la derecha (en el teléfono, abajo y a lo ancho)\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function PageHeading(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPageHeading.defaultProps) y encima lo que llega aquí\n    const {title, description, breadcrumbs, actions, documentTitle, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {useLocation} = useToolkitNavigation();\n    const {pathname} = useLocation();\n    const {menuItems} = useAppMenu();\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    const {usesCapsules} = useBarActionsSlot();\n    // sin cápsulas: a la derecha del título y, en el teléfono, abajo y a lo ancho\n    const inlineActionsSx = {display: 'flex', gap: 1, flexWrap: 'wrap', flex: {xs: '1 1 auto', sm: '0 0 auto'}, '& > .MuiButton-root': {width: {xs: '100%', sm: 'auto'}}};\n    // con cápsulas suben a la barra (escritorio) o flotan arriba (teléfono). Si no hay dónde (la barra fundida al menú), la\n    // cápsula de solo íconos se queda a la derecha del título, en el mismo renglón; el título se parte si no cabe\n    const isActionsCapsule = Boolean(actions) && usesCapsules;\n\n    const crumbs = breadcrumbs === false\n        ? []\n        : breadcrumbs ?? menuBreadcrumbsOf(menuItems, pathname).map((menuItem) => ({label: menuItemLabelOf(menuItem, t), to: menuItem.to}));\n\n    return (\n        <HeadingRoot component=\"header\" ownSx={{mb: 3}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {crumbs.length >= MIN_BREADCRUMBS && <HeadingBreadcrumbs ownSx={{mb: 1}}><PageBreadcrumbs items={crumbs} /></HeadingBreadcrumbs>}\n            <HeadingTitleRow direction={isActionsCapsule ? 'row' : {xs: 'column', sm: 'row'}} spacing={{xs: 1.5, sm: 2}}\n                   ownSx={{alignItems: isActionsCapsule ? 'flex-start' : {xs: 'stretch', sm: 'flex-start'}, justifyContent: 'space-between'}}>\n                <HeadingTitle ref={titleRef} variant=\"h4\" component=\"h1\" ownSx={{minWidth: 0}}>{title}</HeadingTitle>\n                {isActionsCapsule && <BarActions label={title} inlineSx={{flexShrink: 0}}>{actions}</BarActions>}\n                {actions && !usesCapsules && <HeadingActions ownSx={inlineActionsSx}>{actions}</HeadingActions>}\n            </HeadingTitleRow>\n            {description && (\n                <HeadingDescription variant=\"body1\" color=\"text.secondary\" component=\"div\" ownSx={{mt: 0.75, maxWidth: 760}}>{description}</HeadingDescription>\n            )}\n        </HeadingRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAmCA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,GAAG;AACrD,MAAM,qBAAqB,UAAU,YAAY,eAAe,GAAG;AACnE,MAAM,kBAAkB,UAAU,YAAY,YAAY,KAAK;AAC/D,MAAM,eAAe,UAAU,YAAY,SAAS,UAAU;AAC9D,MAAM,iBAAiB,UAAU,YAAY,WAAW,GAAG;AAC3D,MAAM,qBAAqB,UAAU,YAAY,eAAe,UAAU;AAG1E,MAAM,kBAAkB;AAWxB,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,aAAa,aAAa,SAAS,eAAe,UAAS,cAAc,OAAO,UAAU;AACxG,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,YAAA,IAAe,qBAAA;AACtB,QAAM,EAAC,SAAA,IAAY,YAAA;AACnB,QAAM,EAAC,UAAA,IAAa,WAAA;AACpB,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,QAAM,EAAC,aAAA,IAAgB,kBAAA;AAEvB,QAAM,kBAAkB,EAAC,SAAS,QAAQ,KAAK,GAAG,UAAU,QAAQ,MAAM,EAAC,IAAI,YAAY,IAAI,WAAA,GAAa,uBAAuB,EAAC,OAAO,EAAC,IAAI,QAAQ,IAAI,OAAA,IAAO;AAGnK,QAAM,mBAAmB,QAAQ,OAAO,KAAK;AAE7C,QAAM,SAAS,gBAAgB,QACzB,CAAA,IACA,eAAe,kBAAkB,WAAW,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAC,OAAO,gBAAgB,UAAU,CAAC,GAAG,IAAI,SAAS,GAAA,EAAI;AAEtI,SACI,qBAAC,eAAY,WAAU,UAAS,OAAO,EAAC,IAAI,KACxC,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAC7C,OAAO,UAAU,mBAAmB,oBAAC,sBAAmB,OAAO,EAAC,IAAI,EAAA,GAAI,UAAA,oBAAC,iBAAA,EAAgB,OAAO,QAAQ,GAAE;AAAA,IAC3G;AAAA,MAAC;AAAA,MAAA;AAAA,QAAgB,WAAW,mBAAmB,QAAQ,EAAC,IAAI,UAAU,IAAI,MAAA;AAAA,QAAQ,SAAS,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,QAClG,OAAO,EAAC,YAAY,mBAAmB,eAAe,EAAC,IAAI,WAAW,IAAI,gBAAe,gBAAgB,gBAAA;AAAA,QAC5G,UAAA;AAAA,UAAA,oBAAC,cAAA,EAAa,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAK,OAAO,EAAC,UAAU,EAAA,GAAK,UAAA,OAAM;AAAA,UACrF,oBAAoB,oBAAC,YAAA,EAAW,OAAO,OAAO,UAAU,EAAC,YAAY,EAAA,GAAK,UAAA,QAAA,CAAQ;AAAA,UAClF,WAAW,CAAC,oCAAiB,gBAAA,EAAe,OAAO,iBAAkB,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEjF,eACG,oBAAC,oBAAA,EAAmB,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,OAAM,OAAO,EAAC,IAAI,MAAM,UAAU,IAAA,GAAO,UAAA,YAAA,CAAY;AAAA,EAAA,GAElI;AAER;"}

package/dist/ui/layout/ProfileHeader.js

@@ -11,6 +11,16 @@ import { initialsOf } from "../../appShell/menuItemText.js";
 import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
 import { paletteOf } from "../../theme/components/paletteOf.js";
 import DocumentTitle from "../navigation/DocumentTitle.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaProfileHeader";
+const ProfileRoot = piecePart(THEME_NAME, "Root", Paper);
+const ProfileCover = piecePart(THEME_NAME, "Cover", Box);
+const ProfileBody = piecePart(THEME_NAME, "Body", Stack);
+const ProfileAvatar = piecePart(THEME_NAME, "Avatar", Avatar);
+const ProfileText = piecePart(THEME_NAME, "Text", Box);
+const ProfileName = piecePart(THEME_NAME, "Name", Typography);
+const ProfileChips = piecePart(THEME_NAME, "Chips", Stack);
+const ProfileActions = piecePart(THEME_NAME, "Actions", Stack);
 const COVER_HEIGHT_PIXELS = 112;
 const AVATAR_SIZE_PIXELS = 96;
 const AVATAR_BORDER_PIXELS = 4;
@@ -22,19 +32,20 @@ const coverOf = (theme) => {
     backgroundImage: `radial-gradient(80% 140% at 85% 0%, color-mix(in srgb, ${palette.primary.light} 70%, transparent), transparent 60%), linear-gradient(120deg, ${palette.primary.main}, ${palette.primary.dark})`
   };
 };
-function ProfileHeader({ name, email, subtitle, avatarUrl, chips = [], actions }) {
+function ProfileHeader(props) {
+  const { name, email, subtitle, avatarUrl, chips = [], actions } = usePieceProps(props, THEME_NAME);
   const titleRef = useRef(null);
   useRegisterPageTitle(name, titleRef);
-  return /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: { overflow: "hidden", mb: 3 }, children: [
+  return /* @__PURE__ */ jsxs(ProfileRoot, { variant: "outlined", ownSx: { overflow: "hidden", mb: 3 }, children: [
     /* @__PURE__ */ jsx(DocumentTitle, { title: name }),
-    /* @__PURE__ */ jsx(Box, { sx: coverOf }),
-    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, sx: { px: { xs: 2, md: 3 }, pb: 2.5, alignItems: { sm: "flex-end" } }, children: [
+    /* @__PURE__ */ jsx(ProfileCover, { ownSx: coverOf }),
+    /* @__PURE__ */ jsxs(ProfileBody, { direction: { xs: "column", sm: "row" }, spacing: 2, ownSx: { px: { xs: 2, md: 3 }, pb: 2.5, alignItems: { sm: "flex-end" } }, children: [
       /* @__PURE__ */ jsx(
-        Avatar,
+        ProfileAvatar,
         {
           src: avatarUrl,
           alt: name,
-          sx: {
+          ownSx: {
             width: AVATAR_SIZE_PIXELS,
             height: AVATAR_SIZE_PIXELS,
             mt: `-${AVATAR_SIZE_PIXELS / 2}px`,
@@ -48,13 +59,13 @@ function ProfileHeader({ name, email, subtitle, avatarUrl, chips = [], actions }
           children: initialsOf(name)
         }
       ),
-      /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx(Typography, { ref: titleRef, variant: "h5", component: "h1", sx: { fontWeight: 600 }, children: name }),
+      /* @__PURE__ */ jsxs(ProfileText, { ownSx: { flexGrow: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(ProfileName, { ref: titleRef, variant: "h5", component: "h1", ownSx: { fontWeight: 600 }, children: name }),
         email && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: email }),
         subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle }),
-        chips.length > 0 && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: "wrap", mt: 1 }, children: chips.map((chip) => /* @__PURE__ */ jsx(Chip, { label: chip, size: "small", color: "primary", variant: "outlined" }, chip)) })
+        chips.length > 0 && /* @__PURE__ */ jsx(ProfileChips, { direction: "row", spacing: 1, useFlexGap: true, ownSx: { flexWrap: "wrap", mt: 1 }, children: chips.map((chip) => /* @__PURE__ */ jsx(Chip, { label: chip, size: "small", color: "primary", variant: "outlined" }, chip)) })
       ] }),
-      actions && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: "wrap", flexShrink: 0 }, children: actions })
+      actions && /* @__PURE__ */ jsx(ProfileActions, { direction: "row", spacing: 1, useFlexGap: true, ownSx: { flexWrap: "wrap", flexShrink: 0 }, children: actions })
     ] })
   ] });
 }

package/dist/ui/layout/ProfileHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileHeader.js","sources":["../../../src/ui/layout/ProfileHeader.jsx"],"sourcesContent":["// El encabezado de una persona («Mi perfil», el detalle de un usuario): una franja de color arriba, el avatar grande\n// (su foto o sus iniciales) montado sobre la franja, el nombre, el correo, sus perfiles como etiquetas y, a la derecha,\n// las acciones (editar, desactivar…). Como el de las plantillas de tablero de MUI.\n//\n// En el teléfono las acciones bajan debajo del nombre. El nombre es el título de la página (h1) y sube a la barra al\n// deslizar, como el de PageHeading.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega ya traducido.\nimport {useRef} from 'react';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\n\n// la franja de arriba y el avatar que se monta en ella (la mitad del avatar sobre la franja)\nconst COVER_HEIGHT_PIXELS = 112;\nconst AVATAR_SIZE_PIXELS = 96;\nconst AVATAR_BORDER_PIXELS = 4;\n\n/**\n * La franja de color: el principal del tema, más oscuro hacia la derecha, con un brillo suave.\n *\n * @param {object} theme\n * @returns {object}\n */\nconst coverOf = (theme) => {\n    const palette = paletteOf(theme);\n    return {\n        height: COVER_HEIGHT_PIXELS,\n        backgroundColor: palette.primary.main,\n        backgroundImage: `radial-gradient(80% 140% at 85% 0%, color-mix(in srgb, ${palette.primary.light} 70%, transparent), transparent 60%), `\n            + `linear-gradient(120deg, ${palette.primary.main}, ${palette.primary.dark})`,\n    };\n};\n\n/**\n * @param {object} props\n * @param {string} props.name el nombre de la persona\n * @param {string} [props.email]\n * @param {string} [props.subtitle] el renglón de abajo (puesto · sucursal)\n * @param {string} [props.avatarUrl] su foto; sin ella, sus iniciales\n * @param {string[]} [props.chips] sus perfiles o etiquetas, ya traducidos\n * @param {import('react').ReactNode} [props.actions] los botones de la derecha\n */\nexport default function ProfileHeader({name, email, subtitle, avatarUrl, chips = [], actions}) {\n    const titleRef = useRef(null);\n    useRegisterPageTitle(name, titleRef);\n\n    return (\n        <Paper variant=\"outlined\" sx={{overflow: 'hidden', mb: 3}}>\n            <DocumentTitle title={name} />\n            <Box sx={coverOf} />\n            <Stack direction={{xs: 'column', sm: 'row'}} spacing={2} sx={{px: {xs: 2, md: 3}, pb: 2.5, alignItems: {sm: 'flex-end'}}}>\n                <Avatar src={avatarUrl} alt={name}\n                        sx={{\n                            width: AVATAR_SIZE_PIXELS, height: AVATAR_SIZE_PIXELS, mt: `-${AVATAR_SIZE_PIXELS / 2}px`, fontSize: '2rem', fontWeight: 600,\n                            border: `${AVATAR_BORDER_PIXELS}px solid`, borderColor: 'background.paper', bgcolor: 'secondary.main', color: 'secondary.contrastText',\n                        }}>\n                    {initialsOf(name)}\n                </Avatar>\n                <Box sx={{flexGrow: 1, minWidth: 0}}>\n                    <Typography ref={titleRef} variant=\"h5\" component=\"h1\" sx={{fontWeight: 600}}>{name}</Typography>\n                    {email && <Typography variant=\"body2\" color=\"text.secondary\">{email}</Typography>}\n                    {subtitle && <Typography variant=\"body2\" color=\"text.secondary\">{subtitle}</Typography>}\n                    {chips.length > 0 && (\n                        <Stack direction=\"row\" spacing={1} useFlexGap sx={{flexWrap: 'wrap', mt: 1}}>\n                            {chips.map((chip) => <Chip key={chip} label={chip} size=\"small\" color=\"primary\" variant=\"outlined\" />)}\n                        </Stack>\n                    )}\n                </Box>\n                {actions && <Stack direction=\"row\" spacing={1} useFlexGap sx={{flexWrap: 'wrap', flexShrink: 0}}>{actions}</Stack>}\n            </Stack>\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAQ7B,MAAM,UAAU,CAAC,UAAU;AACvB,QAAM,UAAU,UAAU,KAAK;AAC/B,SAAO;AAAA,IACH,QAAQ;AAAA,IACR,iBAAiB,QAAQ,QAAQ;AAAA,IACjC,iBAAiB,0DAA0D,QAAQ,QAAQ,KAAK,iEAC/D,QAAQ,QAAQ,IAAI,KAAK,QAAQ,QAAQ,IAAI;AAAA,EAAA;AAEtF;AAWA,SAAwB,cAAc,EAAC,MAAM,OAAO,UAAU,WAAW,QAAQ,IAAI,WAAU;AAC3F,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,MAAM,QAAQ;AAEnC,SACI,qBAAC,OAAA,EAAM,SAAQ,YAAW,IAAI,EAAC,UAAU,UAAU,IAAI,EAAA,GACnD,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,KAAA,CAAM;AAAA,IAC5B,oBAAC,KAAA,EAAI,IAAI,QAAA,CAAS;AAAA,IAClB,qBAAC,OAAA,EAAM,WAAW,EAAC,IAAI,UAAU,IAAI,MAAA,GAAQ,SAAS,GAAG,IAAI,EAAC,IAAI,EAAC,IAAI,GAAG,IAAI,EAAA,GAAI,IAAI,KAAK,YAAY,EAAC,IAAI,WAAA,EAAU,GAClH,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAAO,KAAK;AAAA,UAAW,KAAK;AAAA,UACrB,IAAI;AAAA,YACA,OAAO;AAAA,YAAoB,QAAQ;AAAA,YAAoB,IAAI,IAAI,qBAAqB,CAAC;AAAA,YAAM,UAAU;AAAA,YAAQ,YAAY;AAAA,YACzH,QAAQ,GAAG,oBAAoB;AAAA,YAAY,aAAa;AAAA,YAAoB,SAAS;AAAA,YAAkB,OAAO;AAAA,UAAA;AAAA,UAErH,qBAAW,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAEpB,qBAAC,OAAI,IAAI,EAAC,UAAU,GAAG,UAAU,KAC7B,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,MAAK;AAAA,QACnF,SAAS,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,OAAM;AAAA,QACnE,YAAY,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,UAAS;AAAA,QACzE,MAAM,SAAS,KACZ,oBAAC,SAAM,WAAU,OAAM,SAAS,GAAG,YAAU,MAAC,IAAI,EAAC,UAAU,QAAQ,IAAI,EAAA,GACpE,UAAA,MAAM,IAAI,CAAC,SAAS,oBAAC,QAAgB,OAAO,MAAM,MAAK,SAAQ,OAAM,WAAU,SAAQ,WAAA,GAAxD,IAAmE,CAAE,EAAA,CACzG;AAAA,MAAA,GAER;AAAA,MACC,WAAW,oBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,YAAU,MAAC,IAAI,EAAC,UAAU,QAAQ,YAAY,EAAA,GAAK,UAAA,QAAA,CAAQ;AAAA,IAAA,EAAA,CAC9G;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"ProfileHeader.js","sources":["../../../src/ui/layout/ProfileHeader.jsx"],"sourcesContent":["// El encabezado de una persona («Mi perfil», el detalle de un usuario): una franja de color arriba, el avatar grande\n// (su foto o sus iniciales) montado sobre la franja, el nombre, el correo, sus perfiles como etiquetas y, a la derecha,\n// las acciones (editar, desactivar…). Como el de las plantillas de tablero de MUI.\n//\n// En el teléfono las acciones bajan debajo del nombre. El nombre es el título de la página (h1) y sube a la barra al\n// deslizar, como el de PageHeading.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaProfileHeader con defaultProps y\n// styleOverrides de sus partes: root, cover, body, avatar, text, name, chips, actions.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega ya traducido.\nimport {useRef} from 'react';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaProfileHeader)\nconst THEME_NAME = 'CalcitaProfileHeader';\nconst ProfileRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst ProfileCover = piecePart(THEME_NAME, 'Cover', Box);\nconst ProfileBody = piecePart(THEME_NAME, 'Body', Stack);\nconst ProfileAvatar = piecePart(THEME_NAME, 'Avatar', Avatar);\nconst ProfileText = piecePart(THEME_NAME, 'Text', Box);\nconst ProfileName = piecePart(THEME_NAME, 'Name', Typography);\nconst ProfileChips = piecePart(THEME_NAME, 'Chips', Stack);\nconst ProfileActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n// la franja de arriba y el avatar que se monta en ella (la mitad del avatar sobre la franja)\nconst COVER_HEIGHT_PIXELS = 112;\nconst AVATAR_SIZE_PIXELS = 96;\nconst AVATAR_BORDER_PIXELS = 4;\n\n/**\n * La franja de color: el principal del tema, más oscuro hacia la derecha, con un brillo suave.\n *\n * @param {object} theme\n * @returns {object}\n */\nconst coverOf = (theme) => {\n    const palette = paletteOf(theme);\n    return {\n        height: COVER_HEIGHT_PIXELS,\n        backgroundColor: palette.primary.main,\n        backgroundImage: `radial-gradient(80% 140% at 85% 0%, color-mix(in srgb, ${palette.primary.light} 70%, transparent), transparent 60%), `\n            + `linear-gradient(120deg, ${palette.primary.main}, ${palette.primary.dark})`,\n    };\n};\n\n/**\n * @param {object} props\n * @param {string} props.name el nombre de la persona\n * @param {string} [props.email]\n * @param {string} [props.subtitle] el renglón de abajo (puesto · sucursal)\n * @param {string} [props.avatarUrl] su foto; sin ella, sus iniciales\n * @param {string[]} [props.chips] sus perfiles o etiquetas, ya traducidos\n * @param {import('react').ReactNode} [props.actions] los botones de la derecha\n */\nexport default function ProfileHeader(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaProfileHeader.defaultProps) y encima lo que llega aquí\n    const {name, email, subtitle, avatarUrl, chips = [], actions} = usePieceProps(props, THEME_NAME);\n    const titleRef = useRef(null);\n    useRegisterPageTitle(name, titleRef);\n\n    return (\n        <ProfileRoot variant=\"outlined\" ownSx={{overflow: 'hidden', mb: 3}}>\n            <DocumentTitle title={name} />\n            <ProfileCover ownSx={coverOf} />\n            <ProfileBody direction={{xs: 'column', sm: 'row'}} spacing={2} ownSx={{px: {xs: 2, md: 3}, pb: 2.5, alignItems: {sm: 'flex-end'}}}>\n                <ProfileAvatar src={avatarUrl} alt={name}\n                        ownSx={{\n                            width: AVATAR_SIZE_PIXELS, height: AVATAR_SIZE_PIXELS, mt: `-${AVATAR_SIZE_PIXELS / 2}px`, fontSize: '2rem', fontWeight: 600,\n                            border: `${AVATAR_BORDER_PIXELS}px solid`, borderColor: 'background.paper', bgcolor: 'secondary.main', color: 'secondary.contrastText',\n                        }}>\n                    {initialsOf(name)}\n                </ProfileAvatar>\n                <ProfileText ownSx={{flexGrow: 1, minWidth: 0}}>\n                    <ProfileName ref={titleRef} variant=\"h5\" component=\"h1\" ownSx={{fontWeight: 600}}>{name}</ProfileName>\n                    {email && <Typography variant=\"body2\" color=\"text.secondary\">{email}</Typography>}\n                    {subtitle && <Typography variant=\"body2\" color=\"text.secondary\">{subtitle}</Typography>}\n                    {chips.length > 0 && (\n                        <ProfileChips direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap', mt: 1}}>\n                            {chips.map((chip) => <Chip key={chip} label={chip} size=\"small\" color=\"primary\" variant=\"outlined\" />)}\n                        </ProfileChips>\n                    )}\n                </ProfileText>\n                {actions && <ProfileActions direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap', flexShrink: 0}}>{actions}</ProfileActions>}\n            </ProfileBody>\n        </ProfileRoot>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/layout/ScrollableRow.js

@@ -2,6 +2,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, Children, useEffect } from "react";
 import Box from "@mui/material/Box";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaScrollableRow";
+const RowRoot = piecePart(THEME_NAME, "Root", Box);
 const scrollableRow = {
   display: "flex",
   flexWrap: "nowrap",
@@ -12,17 +15,18 @@ const scrollableRow = {
   "&::-webkit-scrollbar": { display: "none" }
 };
 const DRAG_THRESHOLD_PIXELS = 5;
-function ScrollableRow({
-  children,
-  gap = 1,
-  py = 0.5,
-  sx,
-  enableDragScroll = true,
-  enableWheelToX = true,
-  fadeEdges = true,
-  ref,
-  ...boxProps
-}) {
+function ScrollableRow(props) {
+  const {
+    children,
+    gap = 1,
+    py = 0.5,
+    sx,
+    enableDragScroll = true,
+    enableWheelToX = true,
+    fadeEdges = true,
+    ref,
+    ...boxProps
+  } = usePieceProps(props, THEME_NAME);
   const rowElement = useRef(null);
   const [edges, setEdges] = useState({ overflow: false, start: false, end: false });
   const assignRef = (node) => {
@@ -132,18 +136,18 @@ function ScrollableRow({
     edges.end ? "black calc(100% - 24px), transparent 100%" : "black 100%"
   ].join(", ")})` : void 0;
   return /* @__PURE__ */ jsx(
-    Box,
+    RowRoot,
     {
       ref: assignRef,
-      sx: {
+      ownSx: {
         ...scrollableRow,
         gap,
         py,
         cursor: isDragEnabled ? "grab" : "auto",
         userSelect: isDragEnabled ? "none" : "auto",
-        ...fadeMask && { maskImage: fadeMask, WebkitMaskImage: fadeMask },
-        ...sx
+        ...fadeMask && { maskImage: fadeMask, WebkitMaskImage: fadeMask }
       },
+      sx,
       ...boxProps,
       children
     }

package/dist/ui/layout/ScrollableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableRow.js","sources":["../../../src/ui/layout/ScrollableRow.jsx"],"sourcesContent":["// Tira horizontal que se desliza, no que se envuelve (chips de filtros y accesos rápidos).\n//\n// Con muchos filtros puestos los chips se envolvían en varios renglones y empujaban la tabla fuera de la pantalla,\n// justo cuando más falta hace ver el resultado. Encapsula lo que hace falta para que la tira se sienta nativa:\n//   - overflow-x sin barra visible en los tres motores;\n//   - arrastre con el mouse en escritorio (el deslizamiento táctil ya es gratis);\n//   - la rueda vertical se convierte en desplazamiento horizontal;\n//   - el borde por el que sigue habiendo contenido se DESVANECE: sin barra ni desvanecido, una tira cortada a la mitad\n//     se lee como un chip mal pintado.\n// Todo eso se activa SOLO cuando de verdad hay desbordamiento.\n//\n// OJO: el umbral de 5 px separa el arrastre del clic; mover más cancela el clic que venía detrás, para no borrar un\n// filtro cuando lo que se quería era desplazar la tira.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Children, useEffect, useRef, useState} from 'react';\nimport Box from '@mui/material/Box';\n\n/** El mixin sin arrastre, para cuando no se puede envolver el elemento. */\nexport const scrollableRow = {\n    display: 'flex',\n    flexWrap: 'nowrap',\n    overflowX: 'auto',\n    overflowY: 'hidden',\n    scrollbarWidth: 'none',\n    msOverflowStyle: 'none',\n    '&::-webkit-scrollbar': {display: 'none'},\n};\n\nconst DRAG_THRESHOLD_PIXELS = 5;\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {number} [props.gap]\n * @param {number} [props.py]\n * @param {object} [props.sx]\n * @param {boolean} [props.enableDragScroll]\n * @param {boolean} [props.enableWheelToX]\n * @param {boolean} [props.fadeEdges]\n * @param {import('react').Ref<HTMLElement>} [props.ref]\n */\nexport default function ScrollableRow({\n    children, gap = 1, py = 0.5, sx, enableDragScroll = true, enableWheelToX = true, fadeEdges = true, ref, ...boxProps\n}) {\n    const rowElement = useRef(null);\n    // por dónde sigue habiendo contenido: decide de qué lado va el desvanecido\n    const [edges, setEdges] = useState({overflow: false, start: false, end: false});\n\n    const assignRef = (node) => {\n        rowElement.current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref && typeof ref === 'object') {\n            ref.current = node;\n        }\n    };\n\n    // el número de hijos es la señal estable para revisar de nuevo (el padre agrega y quita chips)\n    const childrenCount = Children.count(children);\n    useEffect(() => {\n        const element = rowElement.current;\n        if (!element) {\n            return undefined;\n        }\n        // el +1 evita el falso positivo por subpíxel\n        const measureEdges = () => setEdges({\n            overflow: element.scrollWidth > element.clientWidth + 1,\n            start: element.scrollLeft > 1,\n            end: element.scrollLeft + element.clientWidth < element.scrollWidth - 1,\n        });\n        measureEdges();\n\n        const resizeObserver = new ResizeObserver(measureEdges);\n        resizeObserver.observe(element);\n        element.addEventListener('scroll', measureEdges, {passive: true});\n        return () => {\n            resizeObserver.disconnect();\n            element.removeEventListener('scroll', measureEdges);\n        };\n    }, [childrenCount]);\n\n    useEffect(() => {\n        const element = rowElement.current;\n        if (!element) {\n            return undefined;\n        }\n\n        let isDragging = false;\n        let hasMoved = false;\n        let startX = 0;\n        let scrollStart = 0;\n\n        const isOverflowing = () => element.scrollWidth > element.clientWidth + 1;\n\n        const handleMouseDown = (event) => {\n            if (event.button !== 0 || !isOverflowing()) {\n                return;\n            }\n            // arrastrar dentro de un campo de texto es seleccionar texto, no desplazar la tira\n            if (['INPUT', 'TEXTAREA'].includes(event.target?.tagName)) {\n                return;\n            }\n            isDragging = true;\n            hasMoved = false;\n            startX = event.pageX;\n            scrollStart = element.scrollLeft;\n        };\n\n        const handleMouseMove = (event) => {\n            if (!isDragging) {\n                return;\n            }\n            const distance = event.pageX - startX;\n            if (!hasMoved && Math.abs(distance) > DRAG_THRESHOLD_PIXELS) {\n                hasMoved = true;\n                element.style.cursor = 'grabbing';\n            }\n            if (hasMoved) {\n                event.preventDefault();\n                element.scrollLeft = scrollStart - distance;\n            }\n        };\n\n        const stopDragging = () => {\n            isDragging = false;\n            element.style.cursor = '';\n        };\n\n        const handleClickCapture = (event) => {\n            if (!hasMoved) {\n                return;\n            }\n            // se arrastró: el clic que viene detrás NO es un clic\n            event.preventDefault();\n            event.stopPropagation();\n            hasMoved = false;\n        };\n\n        const handleWheel = (event) => {\n            if (isOverflowing() && Math.abs(event.deltaY) > Math.abs(event.deltaX)) {\n                event.preventDefault();\n                element.scrollLeft += event.deltaY;\n            }\n        };\n\n        if (enableDragScroll) {\n            element.addEventListener('mousedown', handleMouseDown);\n            element.addEventListener('mousemove', handleMouseMove);\n            element.addEventListener('mouseup', stopDragging);\n            element.addEventListener('mouseleave', stopDragging);\n            element.addEventListener('click', handleClickCapture, true);\n        }\n        if (enableWheelToX) {\n            element.addEventListener('wheel', handleWheel, {passive: false});\n        }\n\n        return () => {\n            element.removeEventListener('mousedown', handleMouseDown);\n            element.removeEventListener('mousemove', handleMouseMove);\n            element.removeEventListener('mouseup', stopDragging);\n            element.removeEventListener('mouseleave', stopDragging);\n            element.removeEventListener('click', handleClickCapture, true);\n            element.removeEventListener('wheel', handleWheel);\n        };\n    }, [enableDragScroll, enableWheelToX]);\n\n    const isDragEnabled = enableDragScroll && edges.overflow;\n\n    // máscara y no degradado encima: funciona sin saber de qué color es el fondo\n    const fadeMask = fadeEdges && edges.overflow\n        ? `linear-gradient(to right, ${[\n            edges.start ? 'transparent 0, black 24px' : 'black 0',\n            edges.end ? 'black calc(100% - 24px), transparent 100%' : 'black 100%',\n        ].join(', ')})`\n        : undefined;\n\n    return (\n        <Box ref={assignRef}\n             sx={{\n                 ...scrollableRow,\n                 gap,\n                 py,\n                 cursor: isDragEnabled ? 'grab' : 'auto',\n                 userSelect: isDragEnabled ? 'none' : 'auto',\n                 ...(fadeMask && {maskImage: fadeMask, WebkitMaskImage: fadeMask}),\n                 ...sx,\n             }}\n             {...boxProps}>\n            {children}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;AAmBO,MAAM,gBAAgB;AAAA,EACzB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,wBAAwB,EAAC,SAAS,OAAA;AACtC;AAEA,MAAM,wBAAwB;AAa9B,SAAwB,cAAc;AAAA,EAClC;AAAA,EAAU,MAAM;AAAA,EAAG,KAAK;AAAA,EAAK;AAAA,EAAI,mBAAmB;AAAA,EAAM,iBAAiB;AAAA,EAAM,YAAY;AAAA,EAAM;AAAA,EAAK,GAAG;AAC/G,GAAG;AACC,QAAM,aAAa,OAAO,IAAI;AAE9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAC,UAAU,OAAO,OAAO,OAAO,KAAK,MAAA,CAAM;AAE9E,QAAM,YAAY,CAAC,SAAS;AACxB,eAAW,UAAU;AACrB,QAAI,OAAO,QAAQ,YAAY;AAC3B,UAAI,IAAI;AAAA,IACZ,WAAW,OAAO,OAAO,QAAQ,UAAU;AACvC,UAAI,UAAU;AAAA,IAClB;AAAA,EACJ;AAGA,QAAM,gBAAgB,SAAS,MAAM,QAAQ;AAC7C,YAAU,MAAM;AACZ,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,SAAS;AACV,aAAO;AAAA,IACX;AAEA,UAAM,eAAe,MAAM,SAAS;AAAA,MAChC,UAAU,QAAQ,cAAc,QAAQ,cAAc;AAAA,MACtD,OAAO,QAAQ,aAAa;AAAA,MAC5B,KAAK,QAAQ,aAAa,QAAQ,cAAc,QAAQ,cAAc;AAAA,IAAA,CACzE;AACD,iBAAA;AAEA,UAAM,iBAAiB,IAAI,eAAe,YAAY;AACtD,mBAAe,QAAQ,OAAO;AAC9B,YAAQ,iBAAiB,UAAU,cAAc,EAAC,SAAS,MAAK;AAChE,WAAO,MAAM;AACT,qBAAe,WAAA;AACf,cAAQ,oBAAoB,UAAU,YAAY;AAAA,IACtD;AAAA,EACJ,GAAG,CAAC,aAAa,CAAC;AAElB,YAAU,MAAM;AACZ,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,SAAS;AACV,aAAO;AAAA,IACX;AAEA,QAAI,aAAa;AACjB,QAAI,WAAW;AACf,QAAI,SAAS;AACb,QAAI,cAAc;AAElB,UAAM,gBAAgB,MAAM,QAAQ,cAAc,QAAQ,cAAc;AAExE,UAAM,kBAAkB,CAAC,UAAU;AAC/B,UAAI,MAAM,WAAW,KAAK,CAAC,iBAAiB;AACxC;AAAA,MACJ;AAEA,UAAI,CAAC,SAAS,UAAU,EAAE,SAAS,MAAM,QAAQ,OAAO,GAAG;AACvD;AAAA,MACJ;AACA,mBAAa;AACb,iBAAW;AACX,eAAS,MAAM;AACf,oBAAc,QAAQ;AAAA,IAC1B;AAEA,UAAM,kBAAkB,CAAC,UAAU;AAC/B,UAAI,CAAC,YAAY;AACb;AAAA,MACJ;AACA,YAAM,WAAW,MAAM,QAAQ;AAC/B,UAAI,CAAC,YAAY,KAAK,IAAI,QAAQ,IAAI,uBAAuB;AACzD,mBAAW;AACX,gBAAQ,MAAM,SAAS;AAAA,MAC3B;AACA,UAAI,UAAU;AACV,cAAM,eAAA;AACN,gBAAQ,aAAa,cAAc;AAAA,MACvC;AAAA,IACJ;AAEA,UAAM,eAAe,MAAM;AACvB,mBAAa;AACb,cAAQ,MAAM,SAAS;AAAA,IAC3B;AAEA,UAAM,qBAAqB,CAAC,UAAU;AAClC,UAAI,CAAC,UAAU;AACX;AAAA,MACJ;AAEA,YAAM,eAAA;AACN,YAAM,gBAAA;AACN,iBAAW;AAAA,IACf;AAEA,UAAM,cAAc,CAAC,UAAU;AAC3B,UAAI,cAAA,KAAmB,KAAK,IAAI,MAAM,MAAM,IAAI,KAAK,IAAI,MAAM,MAAM,GAAG;AACpE,cAAM,eAAA;AACN,gBAAQ,cAAc,MAAM;AAAA,MAChC;AAAA,IACJ;AAEA,QAAI,kBAAkB;AAClB,cAAQ,iBAAiB,aAAa,eAAe;AACrD,cAAQ,iBAAiB,aAAa,eAAe;AACrD,cAAQ,iBAAiB,WAAW,YAAY;AAChD,cAAQ,iBAAiB,cAAc,YAAY;AACnD,cAAQ,iBAAiB,SAAS,oBAAoB,IAAI;AAAA,IAC9D;AACA,QAAI,gBAAgB;AAChB,cAAQ,iBAAiB,SAAS,aAAa,EAAC,SAAS,OAAM;AAAA,IACnE;AAEA,WAAO,MAAM;AACT,cAAQ,oBAAoB,aAAa,eAAe;AACxD,cAAQ,oBAAoB,aAAa,eAAe;AACxD,cAAQ,oBAAoB,WAAW,YAAY;AACnD,cAAQ,oBAAoB,cAAc,YAAY;AACtD,cAAQ,oBAAoB,SAAS,oBAAoB,IAAI;AAC7D,cAAQ,oBAAoB,SAAS,WAAW;AAAA,IACpD;AAAA,EACJ,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,gBAAgB,oBAAoB,MAAM;AAGhD,QAAM,WAAW,aAAa,MAAM,WAC9B,6BAA6B;AAAA,IAC3B,MAAM,QAAQ,8BAA8B;AAAA,IAC5C,MAAM,MAAM,8CAA8C;AAAA,EAAA,EAC5D,KAAK,IAAI,CAAC,MACV;AAEN,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI,KAAK;AAAA,MACL,IAAI;AAAA,QACA,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,QAAQ,gBAAgB,SAAS;AAAA,QACjC,YAAY,gBAAgB,SAAS;AAAA,QACrC,GAAI,YAAY,EAAC,WAAW,UAAU,iBAAiB,SAAA;AAAA,QACvD,GAAG;AAAA,MAAA;AAAA,MAEN,GAAG;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"ScrollableRow.js","sources":["../../../src/ui/layout/ScrollableRow.jsx"],"sourcesContent":["// Tira horizontal que se desliza, no que se envuelve (chips de filtros y accesos rápidos).\n//\n// Con muchos filtros puestos los chips se envolvían en varios renglones y empujaban la tabla fuera de la pantalla,\n// justo cuando más falta hace ver el resultado. Encapsula lo que hace falta para que la tira se sienta nativa:\n//   - overflow-x sin barra visible en los tres motores;\n//   - arrastre con el mouse en escritorio (el deslizamiento táctil ya es gratis);\n//   - la rueda vertical se convierte en desplazamiento horizontal;\n//   - el borde por el que sigue habiendo contenido se DESVANECE: sin barra ni desvanecido, una tira cortada a la mitad\n//     se lee como un chip mal pintado.\n// Todo eso se activa SOLO cuando de verdad hay desbordamiento.\n//\n// OJO: el umbral de 5 px separa el arrastre del clic; mover más cancela el clic que venía detrás, para no borrar un\n// filtro cuando lo que se quería era desplazar la tira.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaScrollableRow con defaultProps y\n// styleOverrides.root (el sx de la pantalla sigue ganando a todo).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Children, useEffect, useRef, useState} from 'react';\nimport Box from '@mui/material/Box';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaScrollableRow)\nconst THEME_NAME = 'CalcitaScrollableRow';\nconst RowRoot = piecePart(THEME_NAME, 'Root', Box);\n\n/** El mixin sin arrastre, para cuando no se puede envolver el elemento. */\nexport const scrollableRow = {\n    display: 'flex',\n    flexWrap: 'nowrap',\n    overflowX: 'auto',\n    overflowY: 'hidden',\n    scrollbarWidth: 'none',\n    msOverflowStyle: 'none',\n    '&::-webkit-scrollbar': {display: 'none'},\n};\n\nconst DRAG_THRESHOLD_PIXELS = 5;\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {number} [props.gap]\n * @param {number} [props.py]\n * @param {object} [props.sx]\n * @param {boolean} [props.enableDragScroll]\n * @param {boolean} [props.enableWheelToX]\n * @param {boolean} [props.fadeEdges]\n * @param {import('react').Ref<HTMLElement>} [props.ref]\n */\nexport default function ScrollableRow(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaScrollableRow.defaultProps) y encima lo que llega aquí\n    const {\n        children, gap = 1, py = 0.5, sx, enableDragScroll = true, enableWheelToX = true, fadeEdges = true, ref, ...boxProps\n    } = usePieceProps(props, THEME_NAME);\n    const rowElement = useRef(null);\n    // por dónde sigue habiendo contenido: decide de qué lado va el desvanecido\n    const [edges, setEdges] = useState({overflow: false, start: false, end: false});\n\n    const assignRef = (node) => {\n        rowElement.current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref && typeof ref === 'object') {\n            ref.current = node;\n        }\n    };\n\n    // el número de hijos es la señal estable para revisar de nuevo (el padre agrega y quita chips)\n    const childrenCount = Children.count(children);\n    useEffect(() => {\n        const element = rowElement.current;\n        if (!element) {\n            return undefined;\n        }\n        // el +1 evita el falso positivo por subpíxel\n        const measureEdges = () => setEdges({\n            overflow: element.scrollWidth > element.clientWidth + 1,\n            start: element.scrollLeft > 1,\n            end: element.scrollLeft + element.clientWidth < element.scrollWidth - 1,\n        });\n        measureEdges();\n\n        const resizeObserver = new ResizeObserver(measureEdges);\n        resizeObserver.observe(element);\n        element.addEventListener('scroll', measureEdges, {passive: true});\n        return () => {\n            resizeObserver.disconnect();\n            element.removeEventListener('scroll', measureEdges);\n        };\n    }, [childrenCount]);\n\n    useEffect(() => {\n        const element = rowElement.current;\n        if (!element) {\n            return undefined;\n        }\n\n        let isDragging = false;\n        let hasMoved = false;\n        let startX = 0;\n        let scrollStart = 0;\n\n        const isOverflowing = () => element.scrollWidth > element.clientWidth + 1;\n\n        const handleMouseDown = (event) => {\n            if (event.button !== 0 || !isOverflowing()) {\n                return;\n            }\n            // arrastrar dentro de un campo de texto es seleccionar texto, no desplazar la tira\n            if (['INPUT', 'TEXTAREA'].includes(event.target?.tagName)) {\n                return;\n            }\n            isDragging = true;\n            hasMoved = false;\n            startX = event.pageX;\n            scrollStart = element.scrollLeft;\n        };\n\n        const handleMouseMove = (event) => {\n            if (!isDragging) {\n                return;\n            }\n            const distance = event.pageX - startX;\n            if (!hasMoved && Math.abs(distance) > DRAG_THRESHOLD_PIXELS) {\n                hasMoved = true;\n                element.style.cursor = 'grabbing';\n            }\n            if (hasMoved) {\n                event.preventDefault();\n                element.scrollLeft = scrollStart - distance;\n            }\n        };\n\n        const stopDragging = () => {\n            isDragging = false;\n            element.style.cursor = '';\n        };\n\n        const handleClickCapture = (event) => {\n            if (!hasMoved) {\n                return;\n            }\n            // se arrastró: el clic que viene detrás NO es un clic\n            event.preventDefault();\n            event.stopPropagation();\n            hasMoved = false;\n        };\n\n        const handleWheel = (event) => {\n            if (isOverflowing() && Math.abs(event.deltaY) > Math.abs(event.deltaX)) {\n                event.preventDefault();\n                element.scrollLeft += event.deltaY;\n            }\n        };\n\n        if (enableDragScroll) {\n            element.addEventListener('mousedown', handleMouseDown);\n            element.addEventListener('mousemove', handleMouseMove);\n            element.addEventListener('mouseup', stopDragging);\n            element.addEventListener('mouseleave', stopDragging);\n            element.addEventListener('click', handleClickCapture, true);\n        }\n        if (enableWheelToX) {\n            element.addEventListener('wheel', handleWheel, {passive: false});\n        }\n\n        return () => {\n            element.removeEventListener('mousedown', handleMouseDown);\n            element.removeEventListener('mousemove', handleMouseMove);\n            element.removeEventListener('mouseup', stopDragging);\n            element.removeEventListener('mouseleave', stopDragging);\n            element.removeEventListener('click', handleClickCapture, true);\n            element.removeEventListener('wheel', handleWheel);\n        };\n    }, [enableDragScroll, enableWheelToX]);\n\n    const isDragEnabled = enableDragScroll && edges.overflow;\n\n    // máscara y no degradado encima: funciona sin saber de qué color es el fondo\n    const fadeMask = fadeEdges && edges.overflow\n        ? `linear-gradient(to right, ${[\n            edges.start ? 'transparent 0, black 24px' : 'black 0',\n            edges.end ? 'black calc(100% - 24px), transparent 100%' : 'black 100%',\n        ].join(', ')})`\n        : undefined;\n\n    return (\n        <RowRoot ref={assignRef}\n             ownSx={{\n                 ...scrollableRow,\n                 gap,\n                 py,\n                 cursor: isDragEnabled ? 'grab' : 'auto',\n                 userSelect: isDragEnabled ? 'none' : 'auto',\n                 ...(fadeMask && {maskImage: fadeMask, WebkitMaskImage: fadeMask}),\n             }}\n             sx={sx}\n             {...boxProps}>\n            {children}\n        </RowRoot>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/layout/SectionCard.js

@@ -3,10 +3,16 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
-function SectionCard({ title, action, children }) {
-  return /* @__PURE__ */ jsxs(Paper, { component: "section", variant: "outlined", sx: { p: { xs: 2, md: 2.5 }, minWidth: 0 }, children: [
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", component: "h2", sx: { lineHeight: 1.6 }, children: title }),
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaSectionCard";
+const SectionRoot = piecePart(THEME_NAME, "Root", Paper);
+const SectionHeader = piecePart(THEME_NAME, "Header", Box);
+const SectionTitle = piecePart(THEME_NAME, "Title", Typography);
+function SectionCard(props) {
+  const { title, action, children } = usePieceProps(props, THEME_NAME);
+  return /* @__PURE__ */ jsxs(SectionRoot, { component: "section", variant: "outlined", ownSx: { p: { xs: 2, md: 2.5 }, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs(SectionHeader, { ownSx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx(SectionTitle, { variant: "overline", color: "text.secondary", component: "h2", ownSx: { lineHeight: 1.6 }, children: title }),
       action
     ] }),
     children

package/dist/ui/layout/SectionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionCard.js","sources":["../../../src/ui/layout/SectionCard.jsx"],"sourcesContent":["// Tarjeta de una sección de una página de detalle: título en versalitas, una acción opcional a la derecha y el contenido.\n//\n// Por qué una tarjeta por sección y no una sola hoja larga con divisiones: en pantalla ancha las secciones se acomodan en\n// columnas (lo principal a la izquierda, los datos de apoyo a la derecha) y cada una se encuentra por su título.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: el título y el contenido llegan ya traducidos.\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.action] botón o liga a la derecha del título\n * @param {import('react').ReactNode} props.children\n */\nexport default function SectionCard({title, action, children}) {\n    return (\n        <Paper component=\"section\" variant=\"outlined\" sx={{p: {xs: 2, md: 2.5}, minWidth: 0}}>\n            <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 1.5}}>\n                <Typography variant=\"overline\" color=\"text.secondary\" component=\"h2\" sx={{lineHeight: 1.6}}>{title}</Typography>\n                {action}\n            </Box>\n            {children}\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;;AAgBA,SAAwB,YAAY,EAAC,OAAO,QAAQ,YAAW;AAC3D,8BACK,OAAA,EAAM,WAAU,WAAU,SAAQ,YAAW,IAAI,EAAC,GAAG,EAAC,IAAI,GAAG,IAAI,OAAM,UAAU,KAC9E,UAAA;AAAA,IAAA,qBAAC,KAAA,EAAI,IAAI,EAAC,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OAC1F,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAiB,WAAU,MAAK,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,OAAM;AAAA,MAClG;AAAA,IAAA,GACL;AAAA,IACC;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"SectionCard.js","sources":["../../../src/ui/layout/SectionCard.jsx"],"sourcesContent":["// Tarjeta de una sección de una página de detalle: título en versalitas, una acción opcional a la derecha y el contenido.\n//\n// Por qué una tarjeta por sección y no una sola hoja larga con divisiones: en pantalla ancha las secciones se acomodan en\n// columnas (lo principal a la izquierda, los datos de apoyo a la derecha) y cada una se encuentra por su título.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSectionCard con defaultProps y\n// styleOverrides de sus partes: root, header, title.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: el título y el contenido llegan ya traducidos.\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSectionCard)\nconst THEME_NAME = 'CalcitaSectionCard';\nconst SectionRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst SectionHeader = piecePart(THEME_NAME, 'Header', Box);\nconst SectionTitle = piecePart(THEME_NAME, 'Title', Typography);\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.action] botón o liga a la derecha del título\n * @param {import('react').ReactNode} props.children\n */\nexport default function SectionCard(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSectionCard.defaultProps) y encima lo que llega aquí\n    const {title, action, children} = usePieceProps(props, THEME_NAME);\n    return (\n        <SectionRoot component=\"section\" variant=\"outlined\" ownSx={{p: {xs: 2, md: 2.5}, minWidth: 0}}>\n            <SectionHeader ownSx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 1.5}}>\n                <SectionTitle variant=\"overline\" color=\"text.secondary\" component=\"h2\" ownSx={{lineHeight: 1.6}}>{title}</SectionTitle>\n                {action}\n            </SectionHeader>\n            {children}\n        </SectionRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,KAAK;AACvD,MAAM,gBAAgB,UAAU,YAAY,UAAU,GAAG;AACzD,MAAM,eAAe,UAAU,YAAY,SAAS,UAAU;AAQ9D,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,QAAQ,aAAY,cAAc,OAAO,UAAU;AACjE,8BACK,aAAA,EAAY,WAAU,WAAU,SAAQ,YAAW,OAAO,EAAC,GAAG,EAAC,IAAI,GAAG,IAAI,OAAM,UAAU,KACvF,UAAA;AAAA,IAAA,qBAAC,eAAA,EAAc,OAAO,EAAC,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OACvG,UAAA;AAAA,MAAA,oBAAC,cAAA,EAAa,SAAQ,YAAW,OAAM,kBAAiB,WAAU,MAAK,OAAO,EAAC,YAAY,IAAA,GAAO,UAAA,OAAM;AAAA,MACvG;AAAA,IAAA,GACL;AAAA,IACC;AAAA,EAAA,GACL;AAER;"}