@stackcraftmx/calcita 0.32.2 → 0.51.0

package/dist/ui/labels/MarkedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkedText.js","sources":["../../../src/ui/labels/MarkedText.jsx"],"sourcesContent":["// Un texto traducido con una o varias palabras pintadas distinto: «Optimiza tu negocio con <highlight>financiamiento</highlight>\n// inteligente» en UNA llave, y la pantalla dice cómo se pinta cada marca. Lo mismo que <Trans> de react-i18next, sin\n// depender de i18next.\n//\n//   <MarkedText text={t('home.headline')}\n//               marks={{highlight: <Box component=\"strong\" sx={{color: 'primary.main'}} />, terms: <Link href=\"/terminos\" />}} />\n//\n// Cada marca puede ser:\n//   un elemento   <Box component=\"strong\" />, <Link href=\"/terminos\" />: se le pone lo de adentro como hijos\n//   una etiqueta  'strong', 'em': se crea con lo de adentro como hijos\n//   una función   (children) => <Tooltip title=\"…\"><span>{children}</span></Tooltip>\n// OJO: un componente propio va como elemento (<Resaltado />), no suelto (Resaltado): una función suelta se toma como la de\n// arriba, que recibe lo de adentro.\n//\n// NO pinta HTML: solo las marcas que se nombran en `marks`; todo lo demás (también un «<b>» que venga en un dato) sale como\n// texto (markedTextPieces.js).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Fragment, cloneElement, createElement, isValidElement} from 'react';\n\nimport {parseMarkedText} from '@/ui/labels/markedTextPieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/**\n * Pinta los pedazos con la marca de cada uno.\n *\n * @param {Array<object>} pieces\n * @param {Record<string, any>} marks\n * @param {string} keyPrefix\n * @returns {import('react').ReactNode[]}\n */\nfunction renderPieces(pieces, marks, keyPrefix) {\n    return pieces.map((piece, index) => {\n        const key = `${keyPrefix}${index}`;\n        if (piece.type === 'text') {\n            return <Fragment key={key}>{piece.value}</Fragment>;\n        }\n        const children = piece.children.length > 0 ? renderPieces(piece.children, marks, `${key}.`) : undefined;\n        const mark = marks[piece.name];\n        if (isValidElement(mark)) {\n            return cloneElement(mark, {key}, children);\n        }\n        if (typeof mark === 'function') {\n            return <Fragment key={key}>{mark(children)}</Fragment>;\n        }\n        return createElement(mark, {key}, children);\n    });\n}\n\n/**\n * @param {object} props\n * @param {string} props.text el texto ya traducido, con sus marcas\n * @param {Record<string, import('react').ReactElement|string|((children: import('react').ReactNode) => import('react').ReactNode)>} props.marks\n *     cómo se pinta cada marca, por su nombre: un elemento, una etiqueta ('strong') o una función que recibe lo de adentro\n */\nexport default function MarkedText({text, marks, ...unknownProps}) {\n    warnUnknownProps('MarkedText', unknownProps);\n    const pieces = parseMarkedText(text, Object.keys(marks ?? {}));\n    return <>{renderPieces(pieces, marks ?? {}, '')}</>;\n}\n"],"names":["Fragment"],"mappings":";;;;;AA+BA,SAAS,aAAa,QAAQ,OAAO,WAAW;AAC5C,SAAO,OAAO,IAAI,CAAC,OAAO,UAAU;AAChC,UAAM,MAAM,GAAG,SAAS,GAAG,KAAK;AAChC,QAAI,MAAM,SAAS,QAAQ;AACvB,aAAO,oBAACA,YAAA,EAAoB,UAAA,MAAM,SAAZ,GAAkB;AAAA,IAC5C;AACA,UAAM,WAAW,MAAM,SAAS,SAAS,IAAI,aAAa,MAAM,UAAU,OAAO,GAAG,GAAG,GAAG,IAAI;AAC9F,UAAM,OAAO,MAAM,MAAM,IAAI;AAC7B,QAAI,eAAe,IAAI,GAAG;AACtB,aAAO,aAAa,MAAM,EAAC,IAAA,GAAM,QAAQ;AAAA,IAC7C;AACA,QAAI,OAAO,SAAS,YAAY;AAC5B,iCAAQA,YAAA,EAAoB,UAAA,KAAK,QAAQ,KAAnB,GAAqB;AAAA,IAC/C;AACA,WAAO,cAAc,MAAM,EAAC,IAAA,GAAM,QAAQ;AAAA,EAC9C,CAAC;AACL;AAQA,SAAwB,WAAW,EAAC,MAAM,OAAO,GAAG,gBAAe;AAC/D,mBAAiB,cAAc,YAAY;AAC3C,QAAM,SAAS,gBAAgB,MAAM,OAAO,KAAK,SAAS,CAAA,CAAE,CAAC;AAC7D,yCAAU,UAAA,aAAa,QAAQ,SAAS,CAAA,GAAI,EAAE,GAAE;AACpD;"}

package/dist/ui/labels/Tag.js

@@ -2,10 +2,10 @@
 import { jsx } from "react/jsx-runtime";
 import Chip from "@mui/material/Chip";
 import Tooltip from "@mui/material/Tooltip";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 const THEME_NAME = "CalcitaTag";
 const TagChip = piecePart(THEME_NAME, "Root", Chip);
-function Tag(props) {
+function TagContent(props) {
   const { label, tooltip, color = "default", variant = "outlined", size = "small", onDelete, sx, ...chipProps } = usePieceProps(props, THEME_NAME);
   const chip = /* @__PURE__ */ jsx(
     TagChip,
@@ -25,6 +25,7 @@ function Tag(props) {
   }
   return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: chip });
 }
+const Tag = withPieceSlots(TagContent, THEME_NAME);
 export {
   Tag as default
 };

package/dist/ui/labels/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/ui/labels/Tag.jsx"],"sourcesContent":["// El chip genérico: etiqueta + color + explicación, en un solo lugar.\n//\n// Para un valor que viene de un diccionario (estatus, formato, hallazgo) se usa StatusChip, que saca etiqueta, color y\n// tooltip del diccionario. Tag es para lo que no es un valor cerrado: un filtro puesto, \"total aproximado\", un conteo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTag 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 Chip from '@mui/material/Chip';\nimport Tooltip from '@mui/material/Tooltip';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaTag)\nconst THEME_NAME = 'CalcitaTag';\nconst TagChip = piecePart(THEME_NAME, 'Root', Chip);\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.label texto visible, ya traducido\n * @param {string} [props.tooltip] qué significa (aparece al pasar el cursor)\n * @param {string} [props.color] color del tema de MUI\n * @param {'filled'|'outlined'} [props.variant]\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onDelete]\n * @param {object} [props.sx]\n */\nexport default function Tag(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaTag.defaultProps) y encima lo que llega aquí\n    const {label, tooltip, color = 'default', variant = 'outlined', size = 'small', onDelete, sx, ...chipProps} = usePieceProps(props, THEME_NAME);\n    const chip = (\n        <TagChip label={label} size={size} variant={variant} color={color} onDelete={onDelete}\n                 ownSx={{fontWeight: 500}} sx={sx} {...chipProps} />\n    );\n\n    // guard clause: sin tooltip no se envuelve (un Tooltip vacío se traga el cursor sin dar nada a cambio)\n    if (!tooltip) {\n        return chip;\n    }\n    return <Tooltip title={tooltip}>{chip}</Tooltip>;\n}\n"],"names":[],"mappings":";;;;;AAcA,MAAM,aAAa;AACnB,MAAM,UAAU,UAAU,YAAY,QAAQ,IAAI;AAYlD,SAAwB,IAAI,OAAO;AAE/B,QAAM,EAAC,OAAO,SAAS,QAAQ,WAAW,UAAU,YAAY,OAAO,SAAS,UAAU,IAAI,GAAG,UAAA,IAAa,cAAc,OAAO,UAAU;AAC7I,QAAM,OACF;AAAA,IAAC;AAAA,IAAA;AAAA,MAAQ;AAAA,MAAc;AAAA,MAAY;AAAA,MAAkB;AAAA,MAAc;AAAA,MAC1D,OAAO,EAAC,YAAY,IAAA;AAAA,MAAM;AAAA,MAAS,GAAG;AAAA,IAAA;AAAA,EAAA;AAInD,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,SAAO,oBAAC,SAAA,EAAQ,OAAO,SAAU,UAAA,MAAK;AAC1C;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/ui/labels/Tag.jsx"],"sourcesContent":["// El chip genérico: etiqueta + color + explicación, en un solo lugar.\n//\n// Para un valor que viene de un diccionario (estatus, formato, hallazgo) se usa StatusChip, que saca etiqueta, color y\n// tooltip del diccionario. Tag es para lo que no es un valor cerrado: un filtro puesto, \"total aproximado\", un conteo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTag 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 Chip from '@mui/material/Chip';\nimport Tooltip from '@mui/material/Tooltip';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaTag)\nconst THEME_NAME = 'CalcitaTag';\nconst TagChip = piecePart(THEME_NAME, 'Root', Chip);\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.label texto visible, ya traducido\n * @param {string} [props.tooltip] qué significa (aparece al pasar el cursor)\n * @param {string} [props.color] color del tema de MUI\n * @param {'filled'|'outlined'} [props.variant]\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onDelete]\n * @param {object} [props.sx]\n */\nfunction TagContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaTag.defaultProps) y encima lo que llega aquí\n    const {label, tooltip, color = 'default', variant = 'outlined', size = 'small', onDelete, sx, ...chipProps} = usePieceProps(props, THEME_NAME);\n    const chip = (\n        <TagChip label={label} size={size} variant={variant} color={color} onDelete={onDelete}\n                 ownSx={{fontWeight: 500}} sx={sx} {...chipProps} />\n    );\n\n    // guard clause: sin tooltip no se envuelve (un Tooltip vacío se traga el cursor sin dar nada a cambio)\n    if (!tooltip) {\n        return chip;\n    }\n    return <Tooltip title={tooltip}>{chip}</Tooltip>;\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst Tag = withPieceSlots(TagContent, THEME_NAME);\nexport default Tag;\n"],"names":[],"mappings":";;;;;AAcA,MAAM,aAAa;AACnB,MAAM,UAAU,UAAU,YAAY,QAAQ,IAAI;AAYlD,SAAS,WAAW,OAAO;AAEvB,QAAM,EAAC,OAAO,SAAS,QAAQ,WAAW,UAAU,YAAY,OAAO,SAAS,UAAU,IAAI,GAAG,UAAA,IAAa,cAAc,OAAO,UAAU;AAC7I,QAAM,OACF;AAAA,IAAC;AAAA,IAAA;AAAA,MAAQ;AAAA,MAAc;AAAA,MAAY;AAAA,MAAkB;AAAA,MAAc;AAAA,MAC1D,OAAO,EAAC,YAAY,IAAA;AAAA,MAAM;AAAA,MAAS,GAAG;AAAA,IAAA;AAAA,EAAA;AAInD,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,SAAO,oBAAC,SAAA,EAAQ,OAAO,SAAU,UAAA,MAAK;AAC1C;AAGA,MAAM,MAAM,eAAe,YAAY,UAAU;"}

package/dist/ui/labels/markedTextPieces.js

@@ -0,0 +1,64 @@
+const MARK_PATTERN = /<(\/?)([A-Za-z][\w-]*)\s*(\/?)>/g;
+function parseMarkedText(text, allowedNames) {
+  const allowed = new Set(allowedNames);
+  const root = { children: [] };
+  const open = [{ node: root, name: null, rawStart: 0, raw: "" }];
+  let lastIndex = 0;
+  const pushText = (parent, value) => {
+    if (!value) {
+      return;
+    }
+    const previous = parent.children.at(-1);
+    if (previous?.type === "text") {
+      previous.value += value;
+      return;
+    }
+    parent.children.push({ type: "text", value });
+  };
+  for (const match of String(text ?? "").matchAll(MARK_PATTERN)) {
+    const [raw, closing, name, selfClosing] = match;
+    const current = open.at(-1);
+    pushText(current.node, text.slice(lastIndex, match.index));
+    lastIndex = match.index + raw.length;
+    if (!allowed.has(name)) {
+      pushText(current.node, raw);
+      continue;
+    }
+    if (selfClosing && !closing) {
+      current.node.children.push({ type: "mark", name, children: [] });
+      continue;
+    }
+    if (!closing) {
+      const mark = { type: "mark", name, children: [] };
+      current.node.children.push(mark);
+      open.push({ node: mark, name, raw });
+      continue;
+    }
+    if (current.name === name) {
+      open.pop();
+    } else {
+      pushText(current.node, raw);
+    }
+  }
+  pushText(open.at(-1).node, String(text ?? "").slice(lastIndex));
+  while (open.length > 1) {
+    const unclosed = open.pop();
+    const parent = open.at(-1).node;
+    const index = parent.children.indexOf(unclosed.node);
+    parent.children.splice(index, 1, { type: "text", value: unclosed.raw }, ...unclosed.node.children);
+    mergeAdjacentTexts(parent.children);
+  }
+  return root.children;
+}
+function mergeAdjacentTexts(pieces) {
+  for (let index = pieces.length - 1; index > 0; index -= 1) {
+    if (pieces[index].type === "text" && pieces[index - 1].type === "text") {
+      pieces[index - 1].value += pieces[index].value;
+      pieces.splice(index, 1);
+    }
+  }
+}
+export {
+  parseMarkedText
+};
+//# sourceMappingURL=markedTextPieces.js.map

package/dist/ui/labels/markedTextPieces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markedTextPieces.js","sources":["../../../src/ui/labels/markedTextPieces.js"],"sourcesContent":["// Lee un texto traducido con marcas («Optimiza tu negocio con <highlight>financiamiento</highlight> inteligente») y lo\n// parte en pedazos: texto suelto y marcas con lo que llevan adentro. Quien traduce ve la frase completa en una sola llave\n// (antes había que partirla en tres: headlineBefore, headlineHighlight, headlineAfter).\n//\n// NO es HTML ni lo pinta como HTML: solo se reconocen las marcas que la pantalla nombra (`allowedNames`), cada una se cambia\n// por un componente de React y todo lo demás sale como texto. Un «<b>» que venga en un dato (el nombre de una persona) se\n// queda tal cual, letra por letra.\n//\n//   <nombre>…</nombre>   una marca con texto adentro (pueden ir unas dentro de otras)\n//   <nombre/>            una marca sola (un ícono, un salto de línea)\n//\n// Funciones puras, no renderizan: function (regla de la casa).\n\nconst MARK_PATTERN = /<(\\/?)([A-Za-z][\\w-]*)\\s*(\\/?)>/g;\n\n/**\n * @typedef {{type: 'text', value: string} | {type: 'mark', name: string, children: MarkedTextPiece[]}} MarkedTextPiece\n */\n\n/**\n * Los pedazos de un texto con marcas.\n *\n * Una marca que abre y no cierra (o cierra sin abrir) sale como texto: así un error de quien traduce se ve en pantalla en\n * lugar de comerse el resto de la frase.\n *\n * @param {string} text el texto ya traducido\n * @param {string[]} allowedNames las marcas que la pantalla sabe pintar\n * @returns {MarkedTextPiece[]}\n */\nexport function parseMarkedText(text, allowedNames) {\n    const allowed = new Set(allowedNames);\n    const root = {children: []};\n    // las marcas abiertas, de afuera hacia adentro, con el lugar donde empezó cada una (para regresarla a texto si no cierra)\n    const open = [{node: root, name: null, rawStart: 0, raw: ''}];\n    let lastIndex = 0;\n\n    const pushText = (parent, value) => {\n        if (!value) {\n            return;\n        }\n        const previous = parent.children.at(-1);\n        if (previous?.type === 'text') {\n            previous.value += value;\n            return;\n        }\n        parent.children.push({type: 'text', value});\n    };\n\n    for (const match of String(text ?? '').matchAll(MARK_PATTERN)) {\n        const [raw, closing, name, selfClosing] = match;\n        const current = open.at(-1);\n        pushText(current.node, text.slice(lastIndex, match.index));\n        lastIndex = match.index + raw.length;\n\n        if (!allowed.has(name)) {\n            pushText(current.node, raw);\n            continue;\n        }\n        if (selfClosing && !closing) {\n            current.node.children.push({type: 'mark', name, children: []});\n            continue;\n        }\n        if (!closing) {\n            const mark = {type: 'mark', name, children: []};\n            current.node.children.push(mark);\n            open.push({node: mark, name, raw});\n            continue;\n        }\n        // cierra: tiene que ser la última que se abrió; si no, sale como texto\n        if (current.name === name) {\n            open.pop();\n        } else {\n            pushText(current.node, raw);\n        }\n    }\n    pushText(open.at(-1).node, String(text ?? '').slice(lastIndex));\n\n    // las que quedaron abiertas se regresan a texto: su etiqueta de apertura y lo que llevaban adentro\n    while (open.length > 1) {\n        const unclosed = open.pop();\n        const parent = open.at(-1).node;\n        const index = parent.children.indexOf(unclosed.node);\n        parent.children.splice(index, 1, {type: 'text', value: unclosed.raw}, ...unclosed.node.children);\n        mergeAdjacentTexts(parent.children);\n    }\n    return root.children;\n}\n\n/** Junta textos seguidos (quedan así al regresar a texto una marca sin cerrar). */\nfunction mergeAdjacentTexts(pieces) {\n    for (let index = pieces.length - 1; index > 0; index -= 1) {\n        if (pieces[index].type === 'text' && pieces[index - 1].type === 'text') {\n            pieces[index - 1].value += pieces[index].value;\n            pieces.splice(index, 1);\n        }\n    }\n}\n"],"names":[],"mappings":"AAaA,MAAM,eAAe;AAgBd,SAAS,gBAAgB,MAAM,cAAc;AAChD,QAAM,UAAU,IAAI,IAAI,YAAY;AACpC,QAAM,OAAO,EAAC,UAAU,GAAE;AAE1B,QAAM,OAAO,CAAC,EAAC,MAAM,MAAM,MAAM,MAAM,UAAU,GAAG,KAAK,GAAE,CAAC;AAC5D,MAAI,YAAY;AAEhB,QAAM,WAAW,CAAC,QAAQ,UAAU;AAChC,QAAI,CAAC,OAAO;AACR;AAAA,IACJ;AACA,UAAM,WAAW,OAAO,SAAS,GAAG,EAAE;AACtC,QAAI,UAAU,SAAS,QAAQ;AAC3B,eAAS,SAAS;AAClB;AAAA,IACJ;AACA,WAAO,SAAS,KAAK,EAAC,MAAM,QAAQ,MAAK,CAAC;AAAA,EAC9C;AAEA,aAAW,SAAS,OAAO,QAAQ,EAAE,EAAE,SAAS,YAAY,GAAG;AAC3D,UAAM,CAAC,KAAK,SAAS,MAAM,WAAW,IAAI;AAC1C,UAAM,UAAU,KAAK,GAAG,EAAE;AAC1B,aAAS,QAAQ,MAAM,KAAK,MAAM,WAAW,MAAM,KAAK,CAAC;AACzD,gBAAY,MAAM,QAAQ,IAAI;AAE9B,QAAI,CAAC,QAAQ,IAAI,IAAI,GAAG;AACpB,eAAS,QAAQ,MAAM,GAAG;AAC1B;AAAA,IACJ;AACA,QAAI,eAAe,CAAC,SAAS;AACzB,cAAQ,KAAK,SAAS,KAAK,EAAC,MAAM,QAAQ,MAAM,UAAU,CAAA,EAAE,CAAC;AAC7D;AAAA,IACJ;AACA,QAAI,CAAC,SAAS;AACV,YAAM,OAAO,EAAC,MAAM,QAAQ,MAAM,UAAU,GAAE;AAC9C,cAAQ,KAAK,SAAS,KAAK,IAAI;AAC/B,WAAK,KAAK,EAAC,MAAM,MAAM,MAAM,IAAG,CAAC;AACjC;AAAA,IACJ;AAEA,QAAI,QAAQ,SAAS,MAAM;AACvB,WAAK,IAAG;AAAA,IACZ,OAAO;AACH,eAAS,QAAQ,MAAM,GAAG;AAAA,IAC9B;AAAA,EACJ;AACA,WAAS,KAAK,GAAG,EAAE,EAAE,MAAM,OAAO,QAAQ,EAAE,EAAE,MAAM,SAAS,CAAC;AAG9D,SAAO,KAAK,SAAS,GAAG;AACpB,UAAM,WAAW,KAAK,IAAG;AACzB,UAAM,SAAS,KAAK,GAAG,EAAE,EAAE;AAC3B,UAAM,QAAQ,OAAO,SAAS,QAAQ,SAAS,IAAI;AACnD,WAAO,SAAS,OAAO,OAAO,GAAG,EAAC,MAAM,QAAQ,OAAO,SAAS,IAAG,GAAG,GAAG,SAAS,KAAK,QAAQ;AAC/F,uBAAmB,OAAO,QAAQ;AAAA,EACtC;AACA,SAAO,KAAK;AAChB;AAGA,SAAS,mBAAmB,QAAQ;AAChC,WAAS,QAAQ,OAAO,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG;AACvD,QAAI,OAAO,KAAK,EAAE,SAAS,UAAU,OAAO,QAAQ,CAAC,EAAE,SAAS,QAAQ;AACpE,aAAO,QAAQ,CAAC,EAAE,SAAS,OAAO,KAAK,EAAE;AACzC,aAAO,OAAO,OAAO,CAAC;AAAA,IAC1B;AAAA,EACJ;AACJ;"}

package/dist/ui/layout/CollapsibleSection.js

@@ -7,7 +7,7 @@ import AccordionSummary from "@mui/material/AccordionSummary";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaCollapsibleSection";
 const CollapsibleRoot = piecePart(THEME_NAME, "Root", Box);
@@ -31,7 +31,7 @@ const HEADER_SX = {
   "&:hover": { bgcolor: "action.hover" },
   "& .MuiAccordionSummary-content": { my: 0.75, minWidth: 0 }
 };
-function CollapsibleSection(props) {
+function CollapsibleSectionContent(props) {
   const { collapsedTitle, expandedTitle, hint = "", defaultExpanded = false, onExpandedChange, children, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
@@ -58,6 +58,7 @@ function CollapsibleSection(props) {
     }
   ) });
 }
+const CollapsibleSection = withPieceSlots(CollapsibleSectionContent, THEME_NAME);
 export {
   CollapsibleSection as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleSection.js","sources":["../../../src/ui/layout/CollapsibleSection.jsx"],"sourcesContent":["// Sección que se pliega: un encabezado que se toca y, debajo, el contenido, que se abre y se cierra.\n//\n// Para qué: en una página de detalle las cifras quedan a la vista y lo demás se guarda aquí; quien quiere más, lo abre.\n//\n// El encabezado se ve como lo que es, un botón a todo lo ancho: recuadro, la flecha ADELANTE del texto y otro fondo al pasar\n// el cursor. Su texto dice lo que va a pasar al tocarlo («Ver el detalle…» plegada, «Ocultar el detalle…» abierta) y,\n// plegada, un renglón más chico dice qué hay adentro: así nadie tiene que abrirla para saber si ahí está lo que busca.\n// No dice «dé clic»: en el teléfono no hay clic, y un tooltip tampoco se ve ahí.\n//\n// El contenido va sin fondo ni borde propios: adentro van tarjetas (SectionCard) y un recuadro alrededor se vería como\n// tarjeta dentro de tarjeta.\n//\n// OJO: el acordeón de MUI se quita el margen de arriba cuando está abierto y es el primero de su tipo entre sus hermanos.\n// Dentro de un Stack, que separa a sus hijos con margen, eso hacía brincar el encabezado 16 px al abrir y al cerrar. Por eso\n// va envuelto en una caja: el margen del Stack cae en la caja y el encabezado se queda quieto.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCollapsibleSection con defaultProps y\n// styleOverrides de sus partes: root, accordion, summary, titleArea, collapsedTitle, expandedTitle, details.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: sus textos llegan ya traducidos.\nimport {useState} from 'react';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCollapsibleSection)\nconst THEME_NAME = 'CalcitaCollapsibleSection';\nconst CollapsibleRoot = piecePart(THEME_NAME, 'Root', Box);\nconst CollapsibleAccordion = piecePart(THEME_NAME, 'Accordion', Accordion);\nconst CollapsibleSummary = piecePart(THEME_NAME, 'Summary', AccordionSummary);\nconst CollapsibleTitleArea = piecePart(THEME_NAME, 'TitleArea', Box);\nconst CollapsibleCollapsedTitle = piecePart(THEME_NAME, 'CollapsedTitle', Typography);\nconst CollapsibleExpandedTitle = piecePart(THEME_NAME, 'ExpandedTitle', Typography);\nconst CollapsibleDetails = piecePart(THEME_NAME, 'Details', AccordionDetails);\n\n// el mismo radio de las tarjetas (theme/components/surfaces.js): el encabezado se lee como una pieza más de la página\nconst CARD_BORDER_RADIUS_PIXELS = 10;\n\nconst HEADER_SX = {\n    // la flecha adelante del texto: al final del renglón quedaba lejos de lo que se lee y pasaba inadvertida\n    flexDirection: 'row-reverse', gap: 1, px: 1.5, minHeight: 44,\n    border: 1, borderColor: 'divider', borderRadius: `${CARD_BORDER_RADIUS_PIXELS}px`, bgcolor: 'background.paper',\n    '&:hover': {bgcolor: 'action.hover'},\n    '& .MuiAccordionSummary-content': {my: 0.75, minWidth: 0},\n};\n\n/**\n * @param {object} props\n * @param {string} props.collapsedTitle lo que dice plegada, ya traducido («Ver el detalle de la validación»)\n * @param {string} props.expandedTitle lo que dice abierta («Ocultar el detalle de la validación»)\n * @param {string} [props.hint] plegada, qué hay adentro («Incluye resumen, motivos de rechazo y descargas.»)\n * @param {boolean} [props.defaultExpanded] si empieza abierta; por omisión empieza plegada\n * @param {(isExpanded: boolean) => void} [props.onExpandedChange] la persona la abrió o la plegó (por ejemplo, para pedir lo de\n *     adentro hasta que se abre)\n * @param {import('react').ReactNode} props.children\n */\nexport default function CollapsibleSection(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaCollapsibleSection.defaultProps) y encima lo que llega aquí\n    const {collapsedTitle, expandedTitle, hint = '', defaultExpanded = false, onExpandedChange, children, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n    const changeExpanded = (nextIsExpanded) => {\n        setIsExpanded(nextIsExpanded);\n        onExpandedChange?.(nextIsExpanded);\n    };\n\n    return (\n        <CollapsibleRoot ownSx={{minWidth: 0}}>\n            <CollapsibleAccordion expanded={isExpanded} onChange={(changeEvent, nextIsExpanded) => changeExpanded(nextIsExpanded)}\n                       disableGutters elevation={0} square ownSx={{bgcolor: 'transparent', '&::before': {display: 'none'}}}>\n                {/* NOTA: el acordeón ya envuelve este renglón en un encabezado (h3); los textos van como span para no anidar dos */}\n                <CollapsibleSummary expandIcon={<ExpandMoreIcon color=\"primary\" />} ownSx={HEADER_SX}>\n                    <CollapsibleTitleArea ownSx={{minWidth: 0}}>\n                        <CollapsibleCollapsedTitle variant=\"subtitle2\" component=\"span\" color=\"primary\" ownSx={{display: 'block'}}>\n                            {isExpanded ? expandedTitle : collapsedTitle}\n                        </CollapsibleCollapsedTitle>\n                        {!isExpanded && hint && (\n                            <CollapsibleExpandedTitle variant=\"caption\" component=\"span\" color=\"text.secondary\" ownSx={{display: 'block'}}>{hint}</CollapsibleExpandedTitle>\n                        )}\n                    </CollapsibleTitleArea>\n                </CollapsibleSummary>\n                <CollapsibleDetails ownSx={{p: 0, pt: 2}}>{children}</CollapsibleDetails>\n            </CollapsibleAccordion>\n        </CollapsibleRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,QAAQ,GAAG;AACzD,MAAM,uBAAuB,UAAU,YAAY,aAAa,SAAS;AACzE,MAAM,qBAAqB,UAAU,YAAY,WAAW,gBAAgB;AAC5E,MAAM,uBAAuB,UAAU,YAAY,aAAa,GAAG;AACnE,MAAM,4BAA4B,UAAU,YAAY,kBAAkB,UAAU;AACpF,MAAM,2BAA2B,UAAU,YAAY,iBAAiB,UAAU;AAClF,MAAM,qBAAqB,UAAU,YAAY,WAAW,gBAAgB;AAG5E,MAAM,4BAA4B;AAElC,MAAM,YAAY;AAAA;AAAA,EAEd,eAAe;AAAA,EAAe,KAAK;AAAA,EAAG,IAAI;AAAA,EAAK,WAAW;AAAA,EAC1D,QAAQ;AAAA,EAAG,aAAa;AAAA,EAAW,cAAc,GAAG,yBAAyB;AAAA,EAAM,SAAS;AAAA,EAC5F,WAAW,EAAC,SAAS,eAAA;AAAA,EACrB,kCAAkC,EAAC,IAAI,MAAM,UAAU,EAAA;AAC3D;AAYA,SAAwB,mBAAmB,OAAO;AAE9C,QAAM,EAAC,gBAAgB,eAAe,OAAO,IAAI,kBAAkB,OAAO,kBAAkB,UAAU,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACxJ,mBAAiB,YAAY,YAAY;AACzC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,eAAe;AAC5D,QAAM,iBAAiB,CAAC,mBAAmB;AACvC,kBAAc,cAAc;AAC5B,uBAAmB,cAAc;AAAA,EACrC;AAEA,6BACK,iBAAA,EAAgB,OAAO,EAAC,UAAU,KAC/B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAqB,UAAU;AAAA,MAAY,UAAU,CAAC,aAAa,mBAAmB,eAAe,cAAc;AAAA,MACzG,gBAAc;AAAA,MAAC,WAAW;AAAA,MAAG,QAAM;AAAA,MAAC,OAAO,EAAC,SAAS,eAAe,aAAa,EAAC,SAAS,SAAM;AAAA,MAExG,UAAA;AAAA,QAAA,oBAAC,oBAAA,EAAmB,YAAY,oBAAC,gBAAA,EAAe,OAAM,UAAA,CAAU,GAAI,OAAO,WACvE,+BAAC,sBAAA,EAAqB,OAAO,EAAC,UAAU,KACpC,UAAA;AAAA,UAAA,oBAAC,2BAAA,EAA0B,SAAQ,aAAY,WAAU,QAAO,OAAM,WAAU,OAAO,EAAC,SAAS,QAAA,GAC5F,UAAA,aAAa,gBAAgB,gBAClC;AAAA,UACC,CAAC,cAAc,QACZ,oBAAC,0BAAA,EAAyB,SAAQ,WAAU,WAAU,QAAO,OAAM,kBAAiB,OAAO,EAAC,SAAS,QAAA,GAAW,UAAA,KAAA,CAAK;AAAA,QAAA,EAAA,CAE7H,EAAA,CACJ;AAAA,QACA,oBAAC,sBAAmB,OAAO,EAAC,GAAG,GAAG,IAAI,EAAA,GAAK,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5D;AAER;"}
+{"version":3,"file":"CollapsibleSection.js","sources":["../../../src/ui/layout/CollapsibleSection.jsx"],"sourcesContent":["// Sección que se pliega: un encabezado que se toca y, debajo, el contenido, que se abre y se cierra.\n//\n// Para qué: en una página de detalle las cifras quedan a la vista y lo demás se guarda aquí; quien quiere más, lo abre.\n//\n// El encabezado se ve como lo que es, un botón a todo lo ancho: recuadro, la flecha ADELANTE del texto y otro fondo al pasar\n// el cursor. Su texto dice lo que va a pasar al tocarlo («Ver el detalle…» plegada, «Ocultar el detalle…» abierta) y,\n// plegada, un renglón más chico dice qué hay adentro: así nadie tiene que abrirla para saber si ahí está lo que busca.\n// No dice «dé clic»: en el teléfono no hay clic, y un tooltip tampoco se ve ahí.\n//\n// El contenido va sin fondo ni borde propios: adentro van tarjetas (SectionCard) y un recuadro alrededor se vería como\n// tarjeta dentro de tarjeta.\n//\n// OJO: el acordeón de MUI se quita el margen de arriba cuando está abierto y es el primero de su tipo entre sus hermanos.\n// Dentro de un Stack, que separa a sus hijos con margen, eso hacía brincar el encabezado 16 px al abrir y al cerrar. Por eso\n// va envuelto en una caja: el margen del Stack cae en la caja y el encabezado se queda quieto.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCollapsibleSection con defaultProps y\n// styleOverrides de sus partes: root, accordion, summary, titleArea, collapsedTitle, expandedTitle, details.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: sus textos llegan ya traducidos.\nimport {useState} from 'react';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCollapsibleSection)\nconst THEME_NAME = 'CalcitaCollapsibleSection';\nconst CollapsibleRoot = piecePart(THEME_NAME, 'Root', Box);\nconst CollapsibleAccordion = piecePart(THEME_NAME, 'Accordion', Accordion);\nconst CollapsibleSummary = piecePart(THEME_NAME, 'Summary', AccordionSummary);\nconst CollapsibleTitleArea = piecePart(THEME_NAME, 'TitleArea', Box);\nconst CollapsibleCollapsedTitle = piecePart(THEME_NAME, 'CollapsedTitle', Typography);\nconst CollapsibleExpandedTitle = piecePart(THEME_NAME, 'ExpandedTitle', Typography);\nconst CollapsibleDetails = piecePart(THEME_NAME, 'Details', AccordionDetails);\n\n// el mismo radio de las tarjetas (theme/components/surfaces.js): el encabezado se lee como una pieza más de la página\nconst CARD_BORDER_RADIUS_PIXELS = 10;\n\nconst HEADER_SX = {\n    // la flecha adelante del texto: al final del renglón quedaba lejos de lo que se lee y pasaba inadvertida\n    flexDirection: 'row-reverse', gap: 1, px: 1.5, minHeight: 44,\n    border: 1, borderColor: 'divider', borderRadius: `${CARD_BORDER_RADIUS_PIXELS}px`, bgcolor: 'background.paper',\n    '&:hover': {bgcolor: 'action.hover'},\n    '& .MuiAccordionSummary-content': {my: 0.75, minWidth: 0},\n};\n\n/**\n * @param {object} props\n * @param {string} props.collapsedTitle lo que dice plegada, ya traducido («Ver el detalle de la validación»)\n * @param {string} props.expandedTitle lo que dice abierta («Ocultar el detalle de la validación»)\n * @param {string} [props.hint] plegada, qué hay adentro («Incluye resumen, motivos de rechazo y descargas.»)\n * @param {boolean} [props.defaultExpanded] si empieza abierta; por omisión empieza plegada\n * @param {(isExpanded: boolean) => void} [props.onExpandedChange] la persona la abrió o la plegó (por ejemplo, para pedir lo de\n *     adentro hasta que se abre)\n * @param {import('react').ReactNode} props.children\n */\nfunction CollapsibleSectionContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaCollapsibleSection.defaultProps) y encima lo que llega aquí\n    const {collapsedTitle, expandedTitle, hint = '', defaultExpanded = false, onExpandedChange, children, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n    const changeExpanded = (nextIsExpanded) => {\n        setIsExpanded(nextIsExpanded);\n        onExpandedChange?.(nextIsExpanded);\n    };\n\n    return (\n        <CollapsibleRoot ownSx={{minWidth: 0}}>\n            <CollapsibleAccordion expanded={isExpanded} onChange={(changeEvent, nextIsExpanded) => changeExpanded(nextIsExpanded)}\n                       disableGutters elevation={0} square ownSx={{bgcolor: 'transparent', '&::before': {display: 'none'}}}>\n                {/* NOTA: el acordeón ya envuelve este renglón en un encabezado (h3); los textos van como span para no anidar dos */}\n                <CollapsibleSummary expandIcon={<ExpandMoreIcon color=\"primary\" />} ownSx={HEADER_SX}>\n                    <CollapsibleTitleArea ownSx={{minWidth: 0}}>\n                        <CollapsibleCollapsedTitle variant=\"subtitle2\" component=\"span\" color=\"primary\" ownSx={{display: 'block'}}>\n                            {isExpanded ? expandedTitle : collapsedTitle}\n                        </CollapsibleCollapsedTitle>\n                        {!isExpanded && hint && (\n                            <CollapsibleExpandedTitle variant=\"caption\" component=\"span\" color=\"text.secondary\" ownSx={{display: 'block'}}>{hint}</CollapsibleExpandedTitle>\n                        )}\n                    </CollapsibleTitleArea>\n                </CollapsibleSummary>\n                <CollapsibleDetails ownSx={{p: 0, pt: 2}}>{children}</CollapsibleDetails>\n            </CollapsibleAccordion>\n        </CollapsibleRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst CollapsibleSection = withPieceSlots(CollapsibleSectionContent, THEME_NAME);\nexport default CollapsibleSection;\n"],"names":[],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,QAAQ,GAAG;AACzD,MAAM,uBAAuB,UAAU,YAAY,aAAa,SAAS;AACzE,MAAM,qBAAqB,UAAU,YAAY,WAAW,gBAAgB;AAC5E,MAAM,uBAAuB,UAAU,YAAY,aAAa,GAAG;AACnE,MAAM,4BAA4B,UAAU,YAAY,kBAAkB,UAAU;AACpF,MAAM,2BAA2B,UAAU,YAAY,iBAAiB,UAAU;AAClF,MAAM,qBAAqB,UAAU,YAAY,WAAW,gBAAgB;AAG5E,MAAM,4BAA4B;AAElC,MAAM,YAAY;AAAA;AAAA,EAEd,eAAe;AAAA,EAAe,KAAK;AAAA,EAAG,IAAI;AAAA,EAAK,WAAW;AAAA,EAC1D,QAAQ;AAAA,EAAG,aAAa;AAAA,EAAW,cAAc,GAAG,yBAAyB;AAAA,EAAM,SAAS;AAAA,EAC5F,WAAW,EAAC,SAAS,eAAA;AAAA,EACrB,kCAAkC,EAAC,IAAI,MAAM,UAAU,EAAA;AAC3D;AAYA,SAAS,0BAA0B,OAAO;AAEtC,QAAM,EAAC,gBAAgB,eAAe,OAAO,IAAI,kBAAkB,OAAO,kBAAkB,UAAU,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACxJ,mBAAiB,YAAY,YAAY;AACzC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,eAAe;AAC5D,QAAM,iBAAiB,CAAC,mBAAmB;AACvC,kBAAc,cAAc;AAC5B,uBAAmB,cAAc;AAAA,EACrC;AAEA,6BACK,iBAAA,EAAgB,OAAO,EAAC,UAAU,KAC/B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAqB,UAAU;AAAA,MAAY,UAAU,CAAC,aAAa,mBAAmB,eAAe,cAAc;AAAA,MACzG,gBAAc;AAAA,MAAC,WAAW;AAAA,MAAG,QAAM;AAAA,MAAC,OAAO,EAAC,SAAS,eAAe,aAAa,EAAC,SAAS,SAAM;AAAA,MAExG,UAAA;AAAA,QAAA,oBAAC,oBAAA,EAAmB,YAAY,oBAAC,gBAAA,EAAe,OAAM,UAAA,CAAU,GAAI,OAAO,WACvE,+BAAC,sBAAA,EAAqB,OAAO,EAAC,UAAU,KACpC,UAAA;AAAA,UAAA,oBAAC,2BAAA,EAA0B,SAAQ,aAAY,WAAU,QAAO,OAAM,WAAU,OAAO,EAAC,SAAS,QAAA,GAC5F,UAAA,aAAa,gBAAgB,gBAClC;AAAA,UACC,CAAC,cAAc,QACZ,oBAAC,0BAAA,EAAyB,SAAQ,WAAU,WAAU,QAAO,OAAM,kBAAiB,OAAO,EAAC,SAAS,QAAA,GAAW,UAAA,KAAA,CAAK;AAAA,QAAA,EAAA,CAE7H,EAAA,CACJ;AAAA,QACA,oBAAC,sBAAmB,OAAO,EAAC,GAAG,GAAG,IAAI,EAAA,GAAK,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5D;AAER;AAGA,MAAM,qBAAqB,eAAe,2BAA2B,UAAU;"}

package/dist/ui/layout/ContentDialog.js

@@ -9,7 +9,7 @@ import Slide from "@mui/material/Slide";
 import Typography from "@mui/material/Typography";
 import CloseIcon from "@mui/icons-material/Close";
 import { APP_BAR_HEIGHT } from "./appBarHeight.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaContentDialog";
 const DialogHeader = piecePart(THEME_NAME, "Header", Box);
@@ -56,7 +56,7 @@ function sheetSxOf(theme) {
 function SlideUp(props) {
   return /* @__PURE__ */ jsx(Slide, { direction: "up", ...props });
 }
-function ContentDialog(props) {
+function ContentDialogContent(props) {
   const { open, onClose, title, children, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
@@ -100,6 +100,7 @@ function ContentDialog(props) {
     }
   );
 }
+const ContentDialog = withPieceSlots(ContentDialogContent, THEME_NAME);
 export {
   ContentDialog as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ContentDialog.js","sources":["../../../src/ui/layout/ContentDialog.jsx"],"sourcesContent":["// Diálogo de contenido: la «hoja de lectura» (la «page sheet» de Apple) para una vista grande que se lee, como un historial\n// con su tabla. Las confirmaciones y los formularios cortos siguen en su recuadro al centro (ConfirmDialog): esto es para\n// leer, no para contestar una pregunta.\n//\n// Cómo se ve, como en el iPad y en la Mac: una hoja SÓLIDA (para leer no va vidrio) con esquinas redondas, que sube desde\n// abajo; en escritorio centrada, de un ancho que se lee cómodo (SHEET_MAX_WIDTH_PIXELS) y debajo de la barra de arriba, que se\n// queda a la vista (atenuada) para no perder dónde se está; en el teléfono, separada de las orillas y casi de alto completo.\n// Antes ocupaba la pantalla de orilla a orilla: un rectángulo gris plano con renglones larguísimos (lo reportaron).\n//\n// Cómo se arma: un encabezado que no se mueve (el título y la X para cerrar) y un cuerpo que se desliza si no cabe.\n//\n// OJO: el alto de la barra superior no es fijo (con un aviso adentro mide más): se usa el que publica el layout\n// (APP_BAR_HEIGHT), no un número.\n//\n// Solo abre una vista: se cierra con la X, con Escape o con un clic afuera, sin confirmación.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaContentDialog con defaultProps y\n// styleOverrides de sus partes: header, title, closeButton, body.\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 {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Dialog from '@mui/material/Dialog';\nimport IconButton from '@mui/material/IconButton';\nimport Slide from '@mui/material/Slide';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {APP_BAR_HEIGHT} from '@/ui/layout/appBarHeight.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaContentDialog)\nconst THEME_NAME = 'CalcitaContentDialog';\nconst DialogHeader = piecePart(THEME_NAME, 'Header', Box);\nconst DialogTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst DialogCloseButton = piecePart(THEME_NAME, 'CloseButton', IconButton);\nconst DialogBody = piecePart(THEME_NAME, 'Body', Box);\n\n// la hoja: lo ancho máximo en escritorio (un texto de 16 px se lee cómodo y cabe una tabla), su separación de las orillas y\n// la de su encabezado\nconst SHEET_MAX_WIDTH_PIXELS = 880;\nconst SHEET_GAP_PIXELS = 8;\nconst SHEET_PHONE_TOP_PIXELS = 24;\nconst SHEET_RADIUS_PIXELS = 20;\n\n/**\n * La hoja: fija a la ventana y centrada. Va como diálogo fullScreen (así el vidrio del tema la deja sólida y el fondo de\n * atrás no se desenfoca: la barra se sigue leyendo), con su tamaño y sus esquinas propios.\n * OJO: el alto del fullScreen de MUI es 100 %, que con top y bottom se saldría por abajo: va 'auto'.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction sheetSxOf(theme) {\n    const palette = (theme.vars ?? theme).palette;\n    return {\n        position: 'fixed',\n        m: 0,\n        height: 'auto',\n        maxHeight: 'none',\n        borderRadius: `${SHEET_RADIUS_PIXELS}px`,\n        // el que se desliza es el cuerpo, no la hoja: así el encabezado se queda quieto\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        backgroundColor: palette.background.paper,\n        backgroundImage: 'none',\n        boxShadow: `0 0 0 1px ${palette.divider}, 0 24px 64px rgba(0, 0, 0, 0.28)`,\n        // en oscuro, un poco más clara que lo de atrás: lo que va al frente se aclara (HIG «Dark Mode»)\n        ...theme.applyStyles('dark', {backgroundColor: `color-mix(in srgb, ${palette.background.paper}, white 6%)`}),\n        // escritorio: centrada, debajo de la barra\n        top: `calc(${APP_BAR_HEIGHT} + ${SHEET_GAP_PIXELS}px)`,\n        bottom: SHEET_GAP_PIXELS,\n        left: 0,\n        right: 0,\n        mx: 'auto',\n        width: `min(${SHEET_MAX_WIDTH_PIXELS}px, calc(100% - ${SHEET_GAP_PIXELS * 4}px))`,\n        maxWidth: 'none',\n        // teléfono: separada de las orillas y casi de alto completo (la barra está abajo o es de MUI arriba: la hoja la tapa)\n        [theme.breakpoints.down('md')]: {\n            top: `calc(env(safe-area-inset-top) + ${SHEET_PHONE_TOP_PIXELS}px)`,\n            bottom: `calc(env(safe-area-inset-bottom) + ${SHEET_GAP_PIXELS}px)`,\n            width: `calc(100% - ${SHEET_GAP_PIXELS * 2}px)`,\n        },\n    };\n}\n\n/**\n * La animación de la hoja: entra desde abajo y sale por donde entró.\n *\n * @param {object} props lo que MUI le pasa a la animación de un diálogo (si está abierto, su contenido, sus tiempos)\n */\nfunction SlideUp(props) {\n    return <Slide direction=\"up\" {...props} />;\n}\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} props.children\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function ContentDialog(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaContentDialog.defaultProps) y encima lo que llega aquí\n    const {open, onClose, title, children, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const titleId = useId();\n\n    return (\n        <Dialog open={open} onClose={onClose} aria-labelledby={titleId} fullScreen\n                slots={{transition: SlideUp}} slotProps={{paper: {sx: sheetSxOf}}}>\n            <DialogHeader ownSx={{\n                display: 'flex', alignItems: 'center', gap: 2, flexShrink: 0, minHeight: 60, pl: {xs: 2.5, md: 4}, pr: {xs: 1.5, md: 2}, py: 1,\n                borderBottom: 1, borderColor: 'divider',\n            }}>\n                <DialogTitle id={titleId} variant=\"h6\" component=\"h2\" ownSx={{flex: 1, minWidth: 0}}>{title}</DialogTitle>\n                {/* la X de Apple: en un círculo gris tenue, no suelta */}\n                <DialogCloseButton onClick={onClose} aria-label={t('actions.close')} size=\"small\"\n                            ownSx={{bgcolor: 'action.hover', '&:hover': {bgcolor: 'action.selected'}}}>\n                    <CloseIcon fontSize=\"small\" />\n                </DialogCloseButton>\n            </DialogHeader>\n            <DialogBody ownSx={{flex: 1, minHeight: 0, overflow: 'auto', px: {xs: 2.5, md: 4}, py: {xs: 2, md: 3}}}>\n                {children}\n            </DialogBody>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkCA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,UAAU,GAAG;AACxD,MAAM,cAAc,UAAU,YAAY,SAAS,UAAU;AAC7D,MAAM,oBAAoB,UAAU,YAAY,eAAe,UAAU;AACzE,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AAIpD,MAAM,yBAAyB;AAC/B,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAU5B,SAAS,UAAU,OAAO;AACtB,QAAM,WAAW,MAAM,QAAQ,OAAO;AACtC,SAAO;AAAA,IACH,UAAU;AAAA,IACV,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,cAAc,GAAG,mBAAmB;AAAA;AAAA,IAEpC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,iBAAiB,QAAQ,WAAW;AAAA,IACpC,iBAAiB;AAAA,IACjB,WAAW,aAAa,QAAQ,OAAO;AAAA;AAAA,IAEvC,GAAG,MAAM,YAAY,QAAQ,EAAC,iBAAiB,sBAAsB,QAAQ,WAAW,KAAK,cAAA,CAAc;AAAA;AAAA,IAE3G,KAAK,QAAQ,cAAc,MAAM,gBAAgB;AAAA,IACjD,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,OAAO,OAAO,sBAAsB,mBAAmB,mBAAmB,CAAC;AAAA,IAC3E,UAAU;AAAA;AAAA,IAEV,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,MAC5B,KAAK,mCAAmC,sBAAsB;AAAA,MAC9D,QAAQ,sCAAsC,gBAAgB;AAAA,MAC9D,OAAO,eAAe,mBAAmB,CAAC;AAAA,IAAA;AAAA,EAC9C;AAER;AAOA,SAAS,QAAQ,OAAO;AACpB,SAAO,oBAAC,OAAA,EAAM,WAAU,MAAM,GAAG,OAAO;AAC5C;AAUA,SAAwB,cAAc,OAAO;AAEzC,QAAM,EAAC,MAAM,SAAS,OAAO,UAAU,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAChG,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,UAAU,MAAA;AAEhB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAO;AAAA,MAAY;AAAA,MAAkB,mBAAiB;AAAA,MAAS,YAAU;AAAA,MAClE,OAAO,EAAC,YAAY,QAAA;AAAA,MAAU,WAAW,EAAC,OAAO,EAAC,IAAI,YAAS;AAAA,MACnE,UAAA;AAAA,QAAA,qBAAC,gBAAa,OAAO;AAAA,UACjB,SAAS;AAAA,UAAQ,YAAY;AAAA,UAAU,KAAK;AAAA,UAAG,YAAY;AAAA,UAAG,WAAW;AAAA,UAAI,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,UAAI,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,UAAI,IAAI;AAAA,UAC7H,cAAc;AAAA,UAAG,aAAa;AAAA,QAAA,GAE9B,UAAA;AAAA,UAAA,oBAAC,aAAA,EAAY,IAAI,SAAS,SAAQ,MAAK,WAAU,MAAK,OAAO,EAAC,MAAM,GAAG,UAAU,KAAK,UAAA,OAAM;AAAA,UAE5F;AAAA,YAAC;AAAA,YAAA;AAAA,cAAkB,SAAS;AAAA,cAAS,cAAY,EAAE,eAAe;AAAA,cAAG,MAAK;AAAA,cAC9D,OAAO,EAAC,SAAS,gBAAgB,WAAW,EAAC,SAAS,oBAAiB;AAAA,cAC/E,UAAA,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC,GACJ;AAAA,QACA,oBAAC,YAAA,EAAW,OAAO,EAAC,MAAM,GAAG,WAAW,GAAG,UAAU,QAAQ,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA,GAAI,IAAI,EAAC,IAAI,GAAG,IAAI,EAAA,EAAC,GAC/F,SAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"ContentDialog.js","sources":["../../../src/ui/layout/ContentDialog.jsx"],"sourcesContent":["// Diálogo de contenido: la «hoja de lectura» (la «page sheet» de Apple) para una vista grande que se lee, como un historial\n// con su tabla. Las confirmaciones y los formularios cortos siguen en su recuadro al centro (ConfirmDialog): esto es para\n// leer, no para contestar una pregunta.\n//\n// Cómo se ve, como en el iPad y en la Mac: una hoja SÓLIDA (para leer no va vidrio) con esquinas redondas, que sube desde\n// abajo; en escritorio centrada, de un ancho que se lee cómodo (SHEET_MAX_WIDTH_PIXELS) y debajo de la barra de arriba, que se\n// queda a la vista (atenuada) para no perder dónde se está; en el teléfono, separada de las orillas y casi de alto completo.\n// Antes ocupaba la pantalla de orilla a orilla: un rectángulo gris plano con renglones larguísimos (lo reportaron).\n//\n// Cómo se arma: un encabezado que no se mueve (el título y la X para cerrar) y un cuerpo que se desliza si no cabe.\n//\n// OJO: el alto de la barra superior no es fijo (con un aviso adentro mide más): se usa el que publica el layout\n// (APP_BAR_HEIGHT), no un número.\n//\n// Solo abre una vista: se cierra con la X, con Escape o con un clic afuera, sin confirmación.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaContentDialog con defaultProps y\n// styleOverrides de sus partes: header, title, closeButton, body.\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 {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Dialog from '@mui/material/Dialog';\nimport IconButton from '@mui/material/IconButton';\nimport Slide from '@mui/material/Slide';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {APP_BAR_HEIGHT} from '@/ui/layout/appBarHeight.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaContentDialog)\nconst THEME_NAME = 'CalcitaContentDialog';\nconst DialogHeader = piecePart(THEME_NAME, 'Header', Box);\nconst DialogTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst DialogCloseButton = piecePart(THEME_NAME, 'CloseButton', IconButton);\nconst DialogBody = piecePart(THEME_NAME, 'Body', Box);\n\n// la hoja: lo ancho máximo en escritorio (un texto de 16 px se lee cómodo y cabe una tabla), su separación de las orillas y\n// la de su encabezado\nconst SHEET_MAX_WIDTH_PIXELS = 880;\nconst SHEET_GAP_PIXELS = 8;\nconst SHEET_PHONE_TOP_PIXELS = 24;\nconst SHEET_RADIUS_PIXELS = 20;\n\n/**\n * La hoja: fija a la ventana y centrada. Va como diálogo fullScreen (así el vidrio del tema la deja sólida y el fondo de\n * atrás no se desenfoca: la barra se sigue leyendo), con su tamaño y sus esquinas propios.\n * OJO: el alto del fullScreen de MUI es 100 %, que con top y bottom se saldría por abajo: va 'auto'.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction sheetSxOf(theme) {\n    const palette = (theme.vars ?? theme).palette;\n    return {\n        position: 'fixed',\n        m: 0,\n        height: 'auto',\n        maxHeight: 'none',\n        borderRadius: `${SHEET_RADIUS_PIXELS}px`,\n        // el que se desliza es el cuerpo, no la hoja: así el encabezado se queda quieto\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        backgroundColor: palette.background.paper,\n        backgroundImage: 'none',\n        boxShadow: `0 0 0 1px ${palette.divider}, 0 24px 64px rgba(0, 0, 0, 0.28)`,\n        // en oscuro, un poco más clara que lo de atrás: lo que va al frente se aclara (HIG «Dark Mode»)\n        ...theme.applyStyles('dark', {backgroundColor: `color-mix(in srgb, ${palette.background.paper}, white 6%)`}),\n        // escritorio: centrada, debajo de la barra\n        top: `calc(${APP_BAR_HEIGHT} + ${SHEET_GAP_PIXELS}px)`,\n        bottom: SHEET_GAP_PIXELS,\n        left: 0,\n        right: 0,\n        mx: 'auto',\n        width: `min(${SHEET_MAX_WIDTH_PIXELS}px, calc(100% - ${SHEET_GAP_PIXELS * 4}px))`,\n        maxWidth: 'none',\n        // teléfono: separada de las orillas y casi de alto completo (la barra está abajo o es de MUI arriba: la hoja la tapa)\n        [theme.breakpoints.down('md')]: {\n            top: `calc(env(safe-area-inset-top) + ${SHEET_PHONE_TOP_PIXELS}px)`,\n            bottom: `calc(env(safe-area-inset-bottom) + ${SHEET_GAP_PIXELS}px)`,\n            width: `calc(100% - ${SHEET_GAP_PIXELS * 2}px)`,\n        },\n    };\n}\n\n/**\n * La animación de la hoja: entra desde abajo y sale por donde entró.\n *\n * @param {object} props lo que MUI le pasa a la animación de un diálogo (si está abierto, su contenido, sus tiempos)\n */\nfunction SlideUp(props) {\n    return <Slide direction=\"up\" {...props} />;\n}\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} props.children\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction ContentDialogContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaContentDialog.defaultProps) y encima lo que llega aquí\n    const {open, onClose, title, children, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const titleId = useId();\n\n    return (\n        <Dialog open={open} onClose={onClose} aria-labelledby={titleId} fullScreen\n                slots={{transition: SlideUp}} slotProps={{paper: {sx: sheetSxOf}}}>\n            <DialogHeader ownSx={{\n                display: 'flex', alignItems: 'center', gap: 2, flexShrink: 0, minHeight: 60, pl: {xs: 2.5, md: 4}, pr: {xs: 1.5, md: 2}, py: 1,\n                borderBottom: 1, borderColor: 'divider',\n            }}>\n                <DialogTitle id={titleId} variant=\"h6\" component=\"h2\" ownSx={{flex: 1, minWidth: 0}}>{title}</DialogTitle>\n                {/* la X de Apple: en un círculo gris tenue, no suelta */}\n                <DialogCloseButton onClick={onClose} aria-label={t('actions.close')} size=\"small\"\n                            ownSx={{bgcolor: 'action.hover', '&:hover': {bgcolor: 'action.selected'}}}>\n                    <CloseIcon fontSize=\"small\" />\n                </DialogCloseButton>\n            </DialogHeader>\n            <DialogBody ownSx={{flex: 1, minHeight: 0, overflow: 'auto', px: {xs: 2.5, md: 4}, py: {xs: 2, md: 3}}}>\n                {children}\n            </DialogBody>\n        </Dialog>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ContentDialog = withPieceSlots(ContentDialogContent, THEME_NAME);\nexport default ContentDialog;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkCA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,UAAU,GAAG;AACxD,MAAM,cAAc,UAAU,YAAY,SAAS,UAAU;AAC7D,MAAM,oBAAoB,UAAU,YAAY,eAAe,UAAU;AACzE,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AAIpD,MAAM,yBAAyB;AAC/B,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAU5B,SAAS,UAAU,OAAO;AACtB,QAAM,WAAW,MAAM,QAAQ,OAAO;AACtC,SAAO;AAAA,IACH,UAAU;AAAA,IACV,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,cAAc,GAAG,mBAAmB;AAAA;AAAA,IAEpC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,iBAAiB,QAAQ,WAAW;AAAA,IACpC,iBAAiB;AAAA,IACjB,WAAW,aAAa,QAAQ,OAAO;AAAA;AAAA,IAEvC,GAAG,MAAM,YAAY,QAAQ,EAAC,iBAAiB,sBAAsB,QAAQ,WAAW,KAAK,cAAA,CAAc;AAAA;AAAA,IAE3G,KAAK,QAAQ,cAAc,MAAM,gBAAgB;AAAA,IACjD,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,OAAO,OAAO,sBAAsB,mBAAmB,mBAAmB,CAAC;AAAA,IAC3E,UAAU;AAAA;AAAA,IAEV,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,MAC5B,KAAK,mCAAmC,sBAAsB;AAAA,MAC9D,QAAQ,sCAAsC,gBAAgB;AAAA,MAC9D,OAAO,eAAe,mBAAmB,CAAC;AAAA,IAAA;AAAA,EAC9C;AAER;AAOA,SAAS,QAAQ,OAAO;AACpB,SAAO,oBAAC,OAAA,EAAM,WAAU,MAAM,GAAG,OAAO;AAC5C;AAUA,SAAS,qBAAqB,OAAO;AAEjC,QAAM,EAAC,MAAM,SAAS,OAAO,UAAU,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAChG,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,UAAU,MAAA;AAEhB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAO;AAAA,MAAY;AAAA,MAAkB,mBAAiB;AAAA,MAAS,YAAU;AAAA,MAClE,OAAO,EAAC,YAAY,QAAA;AAAA,MAAU,WAAW,EAAC,OAAO,EAAC,IAAI,YAAS;AAAA,MACnE,UAAA;AAAA,QAAA,qBAAC,gBAAa,OAAO;AAAA,UACjB,SAAS;AAAA,UAAQ,YAAY;AAAA,UAAU,KAAK;AAAA,UAAG,YAAY;AAAA,UAAG,WAAW;AAAA,UAAI,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,UAAI,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,UAAI,IAAI;AAAA,UAC7H,cAAc;AAAA,UAAG,aAAa;AAAA,QAAA,GAE9B,UAAA;AAAA,UAAA,oBAAC,aAAA,EAAY,IAAI,SAAS,SAAQ,MAAK,WAAU,MAAK,OAAO,EAAC,MAAM,GAAG,UAAU,KAAK,UAAA,OAAM;AAAA,UAE5F;AAAA,YAAC;AAAA,YAAA;AAAA,cAAkB,SAAS;AAAA,cAAS,cAAY,EAAE,eAAe;AAAA,cAAG,MAAK;AAAA,cAC9D,OAAO,EAAC,SAAS,gBAAgB,WAAW,EAAC,SAAS,oBAAiB;AAAA,cAC/E,UAAA,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC,GACJ;AAAA,QACA,oBAAC,YAAA,EAAW,OAAO,EAAC,MAAM,GAAG,WAAW,GAAG,UAAU,QAAQ,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA,GAAI,IAAI,EAAC,IAAI,GAAG,IAAI,EAAA,EAAC,GAC/F,SAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;AAGA,MAAM,gBAAgB,eAAe,sBAAsB,UAAU;"}

package/dist/ui/layout/DefinitionList.js

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaDefinitionList";
 const DefinitionRoot = piecePart(THEME_NAME, "Root", Box);
 const DefinitionEntry = piecePart(THEME_NAME, "Entry", Box);
 const DefinitionLabel = piecePart(THEME_NAME, "Label", Typography);
 const DefinitionValue = piecePart(THEME_NAME, "Value", Typography);
-function DefinitionList(props) {
+function DefinitionListContent(props) {
   const { entries, layout = "columns", labelWidth = 150, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const isStacked = layout === "stacked";
@@ -33,6 +33,7 @@ function DefinitionList(props) {
     /* @__PURE__ */ jsx(DefinitionValue, { component: "dd", variant: "body2", ownSx: { m: 0, overflowWrap: "anywhere" }, children: value })
   ] }, label)) });
 }
+const DefinitionList = withPieceSlots(DefinitionListContent, THEME_NAME);
 export {
   DefinitionList as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DefinitionList.js","sources":["../../../src/ui/layout/DefinitionList.jsx"],"sourcesContent":["// Lista de dato → valor (<dl>).\n//\n// Dos acomodos:\n//   columns (por omisión)  el dato en gris a la izquierda y su valor a la derecha; para tarjetas anchas\n//   stacked                el dato chico arriba de su valor; para columnas angostas, donde un nombre largo\n//                          («Codificación del archivo») se partiría en dos renglones al lado de su valor\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDefinitionList con defaultProps y\n// styleOverrides de sus partes: root, entry, label, value.\n//\n// Genérico del paquete: function (regla de la casa). Los textos llegan ya traducidos y el valor puede ser cualquier nodo (un\n// chip, un texto en monoespaciada...).\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDefinitionList)\nconst THEME_NAME = 'CalcitaDefinitionList';\nconst DefinitionRoot = piecePart(THEME_NAME, 'Root', Box);\nconst DefinitionEntry = piecePart(THEME_NAME, 'Entry', Box);\nconst DefinitionLabel = piecePart(THEME_NAME, 'Label', Typography);\nconst DefinitionValue = piecePart(THEME_NAME, 'Value', Typography);\n\n/**\n * @param {object} props\n * @param {Array<{label: string, value: import('react').ReactNode}>} props.entries en el orden en que se pintan; el label es la\n *     llave\n * @param {'columns'|'stacked'} [props.layout]\n * @param {number} [props.labelWidth] ancho en px de la columna del dato (solo columns)\n */\nexport default function DefinitionList(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDefinitionList.defaultProps) y encima lo que llega aquí\n    const {entries, layout = 'columns', labelWidth = 150, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const isStacked = layout === 'stacked';\n\n    return (\n        <DefinitionRoot component=\"dl\" ownSx={{\n            m: 0, display: 'grid',\n            gridTemplateColumns: isStacked ? 'minmax(0, 1fr)' : `${labelWidth}px minmax(0, 1fr)`,\n            columnGap: 2, rowGap: isStacked ? 0.25 : 1,\n        }}>\n            {entries.map(({label, value}, entryPosition) => (\n                <DefinitionEntry key={label} ownSx={{display: 'contents'}}>\n                    <DefinitionLabel component=\"dt\" variant={isStacked ? 'caption' : 'body2'} color=\"text.secondary\"\n                                ownSx={isStacked && entryPosition > 0 ? {mt: 1.25} : undefined}>\n                        {label}\n                    </DefinitionLabel>\n                    <DefinitionValue component=\"dd\" variant=\"body2\" ownSx={{m: 0, overflowWrap: 'anywhere'}}>{value}</DefinitionValue>\n                </DefinitionEntry>\n            ))}\n        </DefinitionRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,QAAQ,GAAG;AACxD,MAAM,kBAAkB,UAAU,YAAY,SAAS,GAAG;AAC1D,MAAM,kBAAkB,UAAU,YAAY,SAAS,UAAU;AACjE,MAAM,kBAAkB,UAAU,YAAY,SAAS,UAAU;AASjE,SAAwB,eAAe,OAAO;AAE1C,QAAM,EAAC,SAAS,SAAS,WAAW,aAAa,KAAK,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACxG,mBAAiB,YAAY,YAAY;AACzC,QAAM,YAAY,WAAW;AAE7B,SACI,oBAAC,gBAAA,EAAe,WAAU,MAAK,OAAO;AAAA,IAClC,GAAG;AAAA,IAAG,SAAS;AAAA,IACf,qBAAqB,YAAY,mBAAmB,GAAG,UAAU;AAAA,IACjE,WAAW;AAAA,IAAG,QAAQ,YAAY,OAAO;AAAA,EAAA,GAExC,UAAA,QAAQ,IAAI,CAAC,EAAC,OAAO,SAAQ,uCACzB,iBAAA,EAA4B,OAAO,EAAC,SAAS,cAC1C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAgB,WAAU;AAAA,QAAK,SAAS,YAAY,YAAY;AAAA,QAAS,OAAM;AAAA,QACpE,OAAO,aAAa,gBAAgB,IAAI,EAAC,IAAI,SAAQ;AAAA,QAC5D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,oBAAC,iBAAA,EAAgB,WAAU,MAAK,SAAQ,SAAQ,OAAO,EAAC,GAAG,GAAG,cAAc,WAAA,GAAc,UAAA,MAAA,CAAM;AAAA,EAAA,KAL9E,KAMtB,CACH,GACL;AAER;"}
+{"version":3,"file":"DefinitionList.js","sources":["../../../src/ui/layout/DefinitionList.jsx"],"sourcesContent":["// Lista de dato → valor (<dl>).\n//\n// Dos acomodos:\n//   columns (por omisión)  el dato en gris a la izquierda y su valor a la derecha; para tarjetas anchas\n//   stacked                el dato chico arriba de su valor; para columnas angostas, donde un nombre largo\n//                          («Codificación del archivo») se partiría en dos renglones al lado de su valor\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDefinitionList con defaultProps y\n// styleOverrides de sus partes: root, entry, label, value.\n//\n// Genérico del paquete: function (regla de la casa). Los textos llegan ya traducidos y el valor puede ser cualquier nodo (un\n// chip, un texto en monoespaciada...).\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDefinitionList)\nconst THEME_NAME = 'CalcitaDefinitionList';\nconst DefinitionRoot = piecePart(THEME_NAME, 'Root', Box);\nconst DefinitionEntry = piecePart(THEME_NAME, 'Entry', Box);\nconst DefinitionLabel = piecePart(THEME_NAME, 'Label', Typography);\nconst DefinitionValue = piecePart(THEME_NAME, 'Value', Typography);\n\n/**\n * @param {object} props\n * @param {Array<{label: string, value: import('react').ReactNode}>} props.entries en el orden en que se pintan; el label es la\n *     llave\n * @param {'columns'|'stacked'} [props.layout]\n * @param {number} [props.labelWidth] ancho en px de la columna del dato (solo columns)\n */\nfunction DefinitionListContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDefinitionList.defaultProps) y encima lo que llega aquí\n    const {entries, layout = 'columns', labelWidth = 150, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const isStacked = layout === 'stacked';\n\n    return (\n        <DefinitionRoot component=\"dl\" ownSx={{\n            m: 0, display: 'grid',\n            gridTemplateColumns: isStacked ? 'minmax(0, 1fr)' : `${labelWidth}px minmax(0, 1fr)`,\n            columnGap: 2, rowGap: isStacked ? 0.25 : 1,\n        }}>\n            {entries.map(({label, value}, entryPosition) => (\n                <DefinitionEntry key={label} ownSx={{display: 'contents'}}>\n                    <DefinitionLabel component=\"dt\" variant={isStacked ? 'caption' : 'body2'} color=\"text.secondary\"\n                                ownSx={isStacked && entryPosition > 0 ? {mt: 1.25} : undefined}>\n                        {label}\n                    </DefinitionLabel>\n                    <DefinitionValue component=\"dd\" variant=\"body2\" ownSx={{m: 0, overflowWrap: 'anywhere'}}>{value}</DefinitionValue>\n                </DefinitionEntry>\n            ))}\n        </DefinitionRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DefinitionList = withPieceSlots(DefinitionListContent, THEME_NAME);\nexport default DefinitionList;\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,QAAQ,GAAG;AACxD,MAAM,kBAAkB,UAAU,YAAY,SAAS,GAAG;AAC1D,MAAM,kBAAkB,UAAU,YAAY,SAAS,UAAU;AACjE,MAAM,kBAAkB,UAAU,YAAY,SAAS,UAAU;AASjE,SAAS,sBAAsB,OAAO;AAElC,QAAM,EAAC,SAAS,SAAS,WAAW,aAAa,KAAK,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACxG,mBAAiB,YAAY,YAAY;AACzC,QAAM,YAAY,WAAW;AAE7B,SACI,oBAAC,gBAAA,EAAe,WAAU,MAAK,OAAO;AAAA,IAClC,GAAG;AAAA,IAAG,SAAS;AAAA,IACf,qBAAqB,YAAY,mBAAmB,GAAG,UAAU;AAAA,IACjE,WAAW;AAAA,IAAG,QAAQ,YAAY,OAAO;AAAA,EAAA,GAExC,UAAA,QAAQ,IAAI,CAAC,EAAC,OAAO,SAAQ,uCACzB,iBAAA,EAA4B,OAAO,EAAC,SAAS,cAC1C,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAgB,WAAU;AAAA,QAAK,SAAS,YAAY,YAAY;AAAA,QAAS,OAAM;AAAA,QACpE,OAAO,aAAa,gBAAgB,IAAI,EAAC,IAAI,SAAQ;AAAA,QAC5D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,oBAAC,iBAAA,EAAgB,WAAU,MAAK,SAAQ,SAAQ,OAAO,EAAC,GAAG,GAAG,cAAc,WAAA,GAAc,UAAA,MAAA,CAAM;AAAA,EAAA,KAL9E,KAMtB,CACH,GACL;AAER;AAGA,MAAM,iBAAiB,eAAe,uBAAuB,UAAU;"}

package/dist/ui/layout/DetailHeader.js

@@ -6,7 +6,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
 import DocumentTitle from "../navigation/DocumentTitle.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaDetailHeader";
 const DetailRoot = piecePart(THEME_NAME, "Root", Box);
@@ -14,7 +14,7 @@ const DetailTitleArea = piecePart(THEME_NAME, "TitleArea", Box);
 const DetailTitle = piecePart(THEME_NAME, "Title", Typography);
 const DetailBadges = piecePart(THEME_NAME, "Badges", Stack);
 const DetailActions = piecePart(THEME_NAME, "Actions", Stack);
-function DetailHeader(props) {
+function DetailHeaderContent(props) {
   const { title, eyebrow, badges, actions, documentTitle, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const titleRef = useRef(null);
@@ -31,6 +31,7 @@ function DetailHeader(props) {
     actions && /* @__PURE__ */ jsx(DetailActions, { direction: "row", spacing: 1, useFlexGap: true, ownSx: { flexWrap: "wrap" }, children: actions })
   ] });
 }
+const DetailHeader = withPieceSlots(DetailHeaderContent, THEME_NAME);
 export {
   DetailHeader as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DetailHeader.js","sources":["../../../src/ui/layout/DetailHeader.jsx"],"sourcesContent":["// Encabezado de una página de detalle (un solo registro: un pedido, un usuario...): eyebrow con el contexto, el título\n// que dice QUÉ registro es, sus insignias a un lado del título (estatus, intento...) y las acciones a la derecha.\n//\n// Por qué aparte de PageHeader: ese es el encabezado centrado de un listado. En un detalle lo primero que se lee es qué\n// registro se está viendo y en qué estado está; por eso el título y sus insignias van juntos, arriba a la izquierda.\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//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDetailHeader con defaultProps y\n// styleOverrides de sus partes: root, titleArea, title, badges, actions.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega por props, ya traducido.\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';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDetailHeader)\nconst THEME_NAME = 'CalcitaDetailHeader';\nconst DetailRoot = piecePart(THEME_NAME, 'Root', Box);\nconst DetailTitleArea = piecePart(THEME_NAME, 'TitleArea', Box);\nconst DetailTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst DetailBadges = piecePart(THEME_NAME, 'Badges', Stack);\nconst DetailActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {string} [props.eyebrow] contexto arriba del título (p. ej. el producto)\n * @param {import('react').ReactNode} [props.badges] insignias junto al título (chips de estatus, intento...)\n * @param {import('react').ReactNode} [props.actions] botones a la derecha\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n */\nexport default function DetailHeader(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDetailHeader.defaultProps) y encima lo que llega aquí\n    const {title, eyebrow, badges, actions, documentTitle, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    return (\n        <DetailRoot component=\"header\" ownSx={{display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 2, mb: 2.5}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            <DetailTitleArea ownSx={{minWidth: 0}}>\n                {/* el contexto se lee de un vistazo (en overline se veía\n                    muy chico); text.secondary y no text.disabled: se lee (WCAG no lo exime) */}\n                {eyebrow && <DetailTitle variant=\"subtitle1\" color=\"text.secondary\" component=\"p\" ownSx={{fontWeight: 700}}>{eyebrow}</DetailTitle>}\n                <DetailBadges direction=\"row\" spacing={1.5} useFlexGap ownSx={{alignItems: 'center', flexWrap: 'wrap'}}>\n                    <Typography ref={titleRef} variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {badges}\n                </DetailBadges>\n            </DetailTitleArea>\n            {actions && <DetailActions direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap'}}>{actions}</DetailActions>}\n        </DetailRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AACpD,MAAM,kBAAkB,UAAU,YAAY,aAAa,GAAG;AAC9D,MAAM,cAAc,UAAU,YAAY,SAAS,UAAU;AAC7D,MAAM,eAAe,UAAU,YAAY,UAAU,KAAK;AAC1D,MAAM,gBAAgB,UAAU,YAAY,WAAW,KAAK;AAU5D,SAAwB,aAAa,OAAO;AAExC,QAAM,EAAC,OAAO,SAAS,QAAQ,SAAS,eAAe,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACzG,mBAAiB,YAAY,YAAY;AACzC,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,8BACK,YAAA,EAAW,WAAU,UAAS,OAAO,EAAC,SAAS,QAAQ,UAAU,QAAQ,YAAY,YAAY,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OAC3I,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,yBAC7C,iBAAA,EAAgB,OAAO,EAAC,UAAU,KAG9B,UAAA;AAAA,MAAA,WAAW,oBAAC,aAAA,EAAY,SAAQ,aAAY,OAAM,kBAAiB,WAAU,KAAI,OAAO,EAAC,YAAY,IAAA,GAAO,UAAA,SAAQ;AAAA,MACrH,qBAAC,cAAA,EAAa,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,OAAO,EAAC,YAAY,UAAU,UAAU,UAC3F,UAAA;AAAA,QAAA,oBAAC,cAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAM,UAAA,MAAA,CAAM;AAAA,QAC7D;AAAA,MAAA,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,IACC,WAAW,oBAAC,eAAA,EAAc,WAAU,OAAM,SAAS,GAAG,YAAU,MAAC,OAAO,EAAC,UAAU,OAAA,GAAU,UAAA,QAAA,CAAQ;AAAA,EAAA,GAC1G;AAER;"}
+{"version":3,"file":"DetailHeader.js","sources":["../../../src/ui/layout/DetailHeader.jsx"],"sourcesContent":["// Encabezado de una página de detalle (un solo registro: un pedido, un usuario...): eyebrow con el contexto, el título\n// que dice QUÉ registro es, sus insignias a un lado del título (estatus, intento...) y las acciones a la derecha.\n//\n// Por qué aparte de PageHeader: ese es el encabezado centrado de un listado. En un detalle lo primero que se lee es qué\n// registro se está viendo y en qué estado está; por eso el título y sus insignias van juntos, arriba a la izquierda.\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//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDetailHeader con defaultProps y\n// styleOverrides de sus partes: root, titleArea, title, badges, actions.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega por props, ya traducido.\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, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDetailHeader)\nconst THEME_NAME = 'CalcitaDetailHeader';\nconst DetailRoot = piecePart(THEME_NAME, 'Root', Box);\nconst DetailTitleArea = piecePart(THEME_NAME, 'TitleArea', Box);\nconst DetailTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst DetailBadges = piecePart(THEME_NAME, 'Badges', Stack);\nconst DetailActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {string} [props.eyebrow] contexto arriba del título (p. ej. el producto)\n * @param {import('react').ReactNode} [props.badges] insignias junto al título (chips de estatus, intento...)\n * @param {import('react').ReactNode} [props.actions] botones a la derecha\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n */\nfunction DetailHeaderContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDetailHeader.defaultProps) y encima lo que llega aquí\n    const {title, eyebrow, badges, actions, documentTitle, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    return (\n        <DetailRoot component=\"header\" ownSx={{display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 2, mb: 2.5}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            <DetailTitleArea ownSx={{minWidth: 0}}>\n                {/* el contexto se lee de un vistazo (en overline se veía\n                    muy chico); text.secondary y no text.disabled: se lee (WCAG no lo exime) */}\n                {eyebrow && <DetailTitle variant=\"subtitle1\" color=\"text.secondary\" component=\"p\" ownSx={{fontWeight: 700}}>{eyebrow}</DetailTitle>}\n                <DetailBadges direction=\"row\" spacing={1.5} useFlexGap ownSx={{alignItems: 'center', flexWrap: 'wrap'}}>\n                    <Typography ref={titleRef} variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {badges}\n                </DetailBadges>\n            </DetailTitleArea>\n            {actions && <DetailActions direction=\"row\" spacing={1} useFlexGap ownSx={{flexWrap: 'wrap'}}>{actions}</DetailActions>}\n        </DetailRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DetailHeader = withPieceSlots(DetailHeaderContent, THEME_NAME);\nexport default DetailHeader;\n"],"names":[],"mappings":";;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AACpD,MAAM,kBAAkB,UAAU,YAAY,aAAa,GAAG;AAC9D,MAAM,cAAc,UAAU,YAAY,SAAS,UAAU;AAC7D,MAAM,eAAe,UAAU,YAAY,UAAU,KAAK;AAC1D,MAAM,gBAAgB,UAAU,YAAY,WAAW,KAAK;AAU5D,SAAS,oBAAoB,OAAO;AAEhC,QAAM,EAAC,OAAO,SAAS,QAAQ,SAAS,eAAe,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACzG,mBAAiB,YAAY,YAAY;AACzC,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,8BACK,YAAA,EAAW,WAAU,UAAS,OAAO,EAAC,SAAS,QAAQ,UAAU,QAAQ,YAAY,YAAY,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OAC3I,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,yBAC7C,iBAAA,EAAgB,OAAO,EAAC,UAAU,KAG9B,UAAA;AAAA,MAAA,WAAW,oBAAC,aAAA,EAAY,SAAQ,aAAY,OAAM,kBAAiB,WAAU,KAAI,OAAO,EAAC,YAAY,IAAA,GAAO,UAAA,SAAQ;AAAA,MACrH,qBAAC,cAAA,EAAa,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,OAAO,EAAC,YAAY,UAAU,UAAU,UAC3F,UAAA;AAAA,QAAA,oBAAC,cAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAM,UAAA,MAAA,CAAM;AAAA,QAC7D;AAAA,MAAA,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,IACC,WAAW,oBAAC,eAAA,EAAc,WAAU,OAAM,SAAS,GAAG,YAAU,MAAC,OAAO,EAAC,UAAU,OAAA,GAAU,UAAA,QAAA,CAAQ;AAAA,EAAA,GAC1G;AAER;AAGA,MAAM,eAAe,eAAe,qBAAqB,UAAU;"}

package/dist/ui/layout/ErrorPage.js

@@ -9,7 +9,7 @@ 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";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaErrorPage";
 const ErrorRoot = piecePart(THEME_NAME, "Root", Stack);
@@ -23,7 +23,7 @@ const ERROR_PAGE_LOOK = Object.freeze({
   [ERROR_PAGE_KIND.newVersion]: { Icon: SystemUpdateAltRoundedIcon, color: "info", httpStatus: null, retryKey: "reload" }
 });
 const ICON_PIXELS = 56;
-function ErrorPage(props) {
+function ErrorPageContent(props) {
   const {
     kind,
     title,
@@ -55,6 +55,7 @@ function ErrorPage(props) {
     look.httpStatus && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", children: look.httpStatus })
   ] });
 }
+const ErrorPage = withPieceSlots(ErrorPageContent, THEME_NAME);
 export {
   ERROR_PAGE_KIND,
   ErrorPage as default

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// 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';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.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    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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":";;;;;;;;;;;;;AAgCA,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,IAC7F,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,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;"}
+{"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, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.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 */\nfunction ErrorPageContent(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    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ErrorPage = withPieceSlots(ErrorPageContent, THEME_NAME);\nexport default ErrorPage;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgCA,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,SAAS,iBAAiB,OAAO;AAE7B,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,IAC7F,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,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;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}

package/dist/ui/layout/FullPageLoader.js

@@ -3,15 +3,16 @@ 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";
+import { piecePart, withPieceSlots } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaFullPageLoader";
 const LoaderRoot = piecePart(THEME_NAME, "Root", Box);
-function FullPageLoader({ texts, ...unknownProps } = {}) {
+function FullPageLoaderContent({ texts, ...unknownProps } = {}) {
   warnUnknownProps("FullPageLoader", unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   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") }) });
 }
+const FullPageLoader = withPieceSlots(FullPageLoaderContent, THEME_NAME);
 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// 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';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.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, ...unknownProps} = {}) {\n    warnUnknownProps('FullPageLoader', unknownProps);\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":";;;;;;;AAcA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AAMpD,SAAwB,eAAe,EAAC,OAAO,GAAG,aAAA,IAAgB,CAAA,GAAI;AAClE,mBAAiB,kBAAkB,YAAY;AAC/C,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;"}
+{"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, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.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 */\nfunction FullPageLoaderContent({texts, ...unknownProps} = {}) {\n    warnUnknownProps('FullPageLoader', unknownProps);\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\nconst FullPageLoader = withPieceSlots(FullPageLoaderContent, THEME_NAME);\nexport default FullPageLoader;\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AAMpD,SAAS,sBAAsB,EAAC,OAAO,GAAG,aAAA,IAAgB,CAAA,GAAI;AAC1D,mBAAiB,kBAAkB,YAAY;AAC/C,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;AAEA,MAAM,iBAAiB,eAAe,uBAAuB,UAAU;"}

package/dist/ui/layout/GlassPanel.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import Paper from "@mui/material/Paper";
 import { PANEL_RADIUS, isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 const THEME_NAME = "CalcitaGlassPanel";
 const PanelRoot = piecePart(THEME_NAME, "Root", Paper);
 const SOLID_FLOATING_ELEVATION = 8;
@@ -12,10 +12,11 @@ function floatingSurfaceOf(theme) {
     ...isGlassTheme(theme) ? glassStylesOf(theme) : { boxShadow: theme.shadows[SOLID_FLOATING_ELEVATION] }
   };
 }
-function GlassPanel(props) {
+function GlassPanelContent(props) {
   const { children, sx, ...paperProps } = usePieceProps(props, THEME_NAME);
   return /* @__PURE__ */ jsx(PanelRoot, { elevation: 0, ...paperProps, ownSx: floatingSurfaceOf, sx, children });
 }
+const GlassPanel = withPieceSlots(GlassPanelContent, THEME_NAME);
 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// 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;"}
+{"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, withPieceSlots} 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 */\nfunction GlassPanelContent(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\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst GlassPanel = withPieceSlots(GlassPanelContent, THEME_NAME);\nexport default GlassPanel;\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,SAAS,kBAAkB,OAAO;AAE9B,QAAM,EAAC,UAAU,IAAI,GAAG,eAAc,cAAc,OAAO,UAAU;AACrE,SACI,oBAAC,aAAU,WAAW,GAAI,GAAG,YAAY,OAAO,mBAAmB,IAC9D,SAAA,CACL;AAER;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/ui/layout/PageHeader.js

@@ -6,13 +6,13 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
 import DocumentTitle from "../navigation/DocumentTitle.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "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) {
+function PageHeaderContent(props) {
   const { title, eyebrow, subtitle, action, documentTitle, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const titleRef = useRef(null);
@@ -25,6 +25,7 @@ function PageHeader(props) {
     action && /* @__PURE__ */ jsx(HeaderAction, { ownSx: { pt: 1.5 }, children: action })
   ] });
 }
+const PageHeader = withPieceSlots(PageHeaderContent, THEME_NAME);
 export {
   PageHeader as default
 };

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// 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';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.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, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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":";;;;;;;;;;AAqBA,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,eAAe,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC1G,mBAAiB,YAAY,YAAY;AACzC,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;"}
+{"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, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.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 */\nfunction PageHeaderContent(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, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst PageHeader = withPieceSlots(PageHeaderContent, THEME_NAME);\nexport default PageHeader;\n"],"names":[],"mappings":";;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,KAAK;AACtD,MAAM,iBAAiB,UAAU,YAAY,YAAY,UAAU;AACnE,MAAM,eAAe,UAAU,YAAY,UAAU,GAAG;AAUxD,SAAS,kBAAkB,OAAO;AAE9B,QAAM,EAAC,OAAO,SAAS,UAAU,QAAQ,eAAe,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC1G,mBAAiB,YAAY,YAAY;AACzC,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;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}