@stackcraftmx/calcita 0.27.0 → 0.30.0

package/dist/ui/filters/SegmentedControl.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import { styled, useThemeProps } from "@mui/material/styles";
 import { isGlassTheme, glassDropOf } from "../../theme/glassSurface.js";
 import { textSizeOf } from "../../theme/appleTracking.js";
 import ScrollableRow from "../layout/ScrollableRow.js";
@@ -17,16 +18,20 @@ const SEGMENTED_CONTROL_SX = {
   flex: "0 0 auto",
   "& .MuiToggleButton-root": {
     border: 0,
-    borderRadius: "999px !important",
+    borderRadius: "999px",
+    m: 0,
     px: 1.75,
     py: 0.375,
-    m: "0 !important",
     ...textSizeOf(13),
     fontWeight: 600,
     textTransform: "none",
     color: "text.secondary",
     whiteSpace: "nowrap"
   },
+  // la píldora de cada opción. OJO: con dos clases; el grupo de MUI quita las esquinas y junta los botones de en medio con
+  // reglas de dos clases (& .MuiToggleButtonGroup-middleButton). Antes se le ganaba con !important, y así el tema del
+  // proyecto tampoco podía cambiar la forma
+  "& .MuiToggleButton-root.MuiToggleButtonGroup-grouped": { border: 0, borderRadius: "999px", m: 0 },
   "& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover": {
     bgcolor: "primary.main",
     color: "primary.contrastText"
@@ -55,18 +60,20 @@ function glassSegmentedSxOf(theme) {
     "& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover": { ...glassDropOf(theme), color: "text.primary" }
   };
 }
-function SegmentedControl({ options, value, onChange, ariaLabel }) {
+const THEME_NAME = "CalcitaSegmentedControl";
+const SegmentedControlRoot = styled(ToggleButtonGroup, { name: THEME_NAME, slot: "Root" })(({ theme }) => theme.unstable_sx([SEGMENTED_CONTROL_SX, glassSegmentedSxOf(theme)]));
+function SegmentedControl(props) {
+  const { options, value, onChange, ariaLabel } = useThemeProps({ props, name: THEME_NAME });
   return (
     // la fila deja 4 px arriba y abajo para que la sombra no se corte (ScrollableRow, py 0.5); el margen negativo los
     // devuelve: el control mide sus 40 px y se alinea con los campos de junto (quedaba 4 px más arriba)
     /* @__PURE__ */ jsx(ScrollableRow, { gap: 1, py: ROW_SHADOW_ROOM, sx: { alignItems: "center", my: -ROW_SHADOW_ROOM }, children: /* @__PURE__ */ jsx(
-      ToggleButtonGroup,
+      SegmentedControlRoot,
       {
         exclusive: true,
         size: "small",
         value,
         "aria-label": ariaLabel,
-        sx: [SEGMENTED_CONTROL_SX, glassSegmentedSxOf],
         onChange: (event, nextValue) => nextValue !== null && onChange(nextValue),
         children: options.map((option) => /* @__PURE__ */ jsx(ToggleButton, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
       }

package/dist/ui/filters/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../../src/ui/filters/SegmentedControl.jsx"],"sourcesContent":["// Pestañas en píldora: una tira de botones donde se elige UNO (el producto de una lista, la vista de un\n// tablero). Va en un renglón que se desliza en el teléfono, como las pestañas de una app móvil.\n//\n// SEGMENTED_CONTROL_SX es el estilo de la tira; se exporta para quien arma su propia tira con menús adentro (una barra\n// de productos con menús).\n//\n// Con el vidrio del tema es el control segmentado de Liquid Glass: la tira sin borde y lo elegido en la «gota» (la misma\n// de las pestañas y de los botones de opción), no en un relleno de color. Con el naranja fijo le ganaba al vidrio, no se\n// parecía a las pestañas de al lado y en oscuro quedaba con letra negra.\n//\n// Genérico del paquete: function (regla de la casa).\nimport ToggleButton from '@mui/material/ToggleButton';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup';\n\nimport {glassDropOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\n\n// con vidrio, el alto de cada opción: con el margen de la tira (3 px arriba y abajo) da los 40 px de un campo\n// el aire de la fila para la sombra, en unidades de spacing (4 px)\nconst ROW_SHADOW_ROOM = 0.5;\nconst GLASS_SEGMENT_MIN_HEIGHT_PIXELS = 34;\n\nexport const SEGMENTED_CONTROL_SX = {\n    gap: 0.5,\n    p: 0.375,\n    border: 1,\n    borderColor: 'divider',\n    borderRadius: 999,\n    flexWrap: 'nowrap',\n    flex: '0 0 auto',\n    '& .MuiToggleButton-root': {\n        border: 0, borderRadius: '999px !important', px: 1.75, py: 0.375, m: '0 !important',\n        ...textSizeOf(13), fontWeight: 600, textTransform: 'none', color: 'text.secondary', whiteSpace: 'nowrap',\n    },\n    '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {\n        bgcolor: 'primary.main', color: 'primary.contrastText',\n    },\n};\n\n/**\n * Lo que cambia con vidrio: sin borde (la tira ya se marca sola) y lo elegido en su gota.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction glassSegmentedSxOf(theme) {\n    // con el minimalista: la tira gris y lo elegido un escalón arriba, como el de Apple (los pone el tema); sin el naranja lleno\n    if (theme.toolkit?.look === 'minimal') {\n        return {\n            border: 0,\n            '& .MuiToggleButton-root': {minHeight: GLASS_SEGMENT_MIN_HEIGHT_PIXELS},\n            '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {\n                bgcolor: 'background.paper', color: 'text.primary', ...theme.applyStyles('dark', {bgcolor: 'rgba(118, 118, 128, 0.36)'}),\n            },\n        };\n    }\n    if (!isGlassTheme(theme)) {\n        return {};\n    }\n    return {\n        border: 0,\n        // del mismo alto que un campo (40 px con su margen de 3 px arriba y abajo): en una fila de filtros junto a «Desde» y\n        // «Hasta» quedaba más bajito y descuadrado (lo reportaron)\n        '& .MuiToggleButton-root': {minHeight: GLASS_SEGMENT_MIN_HEIGHT_PIXELS},\n        '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {...glassDropOf(theme), color: 'text.primary'},\n    };\n}\n\n/**\n * @param {object} props\n * @param {Array<{value: string, label: string, disabled?: boolean}>} props.options en el orden en que se pintan; ya\n *     traducidas\n * @param {string|null} props.value\n * @param {(value: string) => void} props.onChange\n * @param {string} props.ariaLabel ya traducido\n */\nexport default function SegmentedControl({options, value, onChange, ariaLabel}) {\n    return (\n        // la fila deja 4 px arriba y abajo para que la sombra no se corte (ScrollableRow, py 0.5); el margen negativo los\n        // devuelve: el control mide sus 40 px y se alinea con los campos de junto (quedaba 4 px más arriba)\n        <ScrollableRow gap={1} py={ROW_SHADOW_ROOM} sx={{alignItems: 'center', my: -ROW_SHADOW_ROOM}}>\n            <ToggleButtonGroup exclusive size=\"small\" value={value} aria-label={ariaLabel} sx={[SEGMENTED_CONTROL_SX, glassSegmentedSxOf]}\n                               // quitar la selección no existe: un clic en la pestaña elegida no la apaga\n                               onChange={(event, nextValue) => nextValue !== null && onChange(nextValue)}>\n                {options.map((option) => (\n                    <ToggleButton key={option.value} value={option.value} disabled={option.disabled}>{option.label}</ToggleButton>\n                ))}\n            </ToggleButtonGroup>\n        </ScrollableRow>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAoBA,MAAM,kBAAkB;AACxB,MAAM,kCAAkC;AAEjC,MAAM,uBAAuB;AAAA,EAChC,KAAK;AAAA,EACL,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,UAAU;AAAA,EACV,MAAM;AAAA,EACN,2BAA2B;AAAA,IACvB,QAAQ;AAAA,IAAG,cAAc;AAAA,IAAoB,IAAI;AAAA,IAAM,IAAI;AAAA,IAAO,GAAG;AAAA,IACrE,GAAG,WAAW,EAAE;AAAA,IAAG,YAAY;AAAA,IAAK,eAAe;AAAA,IAAQ,OAAO;AAAA,IAAkB,YAAY;AAAA,EAAA;AAAA,EAEpG,oFAAoF;AAAA,IAChF,SAAS;AAAA,IAAgB,OAAO;AAAA,EAAA;AAExC;AAQA,SAAS,mBAAmB,OAAO;AAE/B,MAAI,MAAM,SAAS,SAAS,WAAW;AACnC,WAAO;AAAA,MACH,QAAQ;AAAA,MACR,2BAA2B,EAAC,WAAW,gCAAA;AAAA,MACvC,oFAAoF;AAAA,QAChF,SAAS;AAAA,QAAoB,OAAO;AAAA,QAAgB,GAAG,MAAM,YAAY,QAAQ,EAAC,SAAS,6BAA4B;AAAA,MAAA;AAAA,IAC3H;AAAA,EAER;AACA,MAAI,CAAC,aAAa,KAAK,GAAG;AACtB,WAAO,CAAA;AAAA,EACX;AACA,SAAO;AAAA,IACH,QAAQ;AAAA;AAAA;AAAA,IAGR,2BAA2B,EAAC,WAAW,gCAAA;AAAA,IACvC,oFAAoF,EAAC,GAAG,YAAY,KAAK,GAAG,OAAO,eAAA;AAAA,EAAc;AAEzI;AAUA,SAAwB,iBAAiB,EAAC,SAAS,OAAO,UAAU,aAAY;AAC5E;AAAA;AAAA;AAAA,IAGI,oBAAC,eAAA,EAAc,KAAK,GAAG,IAAI,iBAAiB,IAAI,EAAC,YAAY,UAAU,IAAI,CAAC,mBACxE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAkB,WAAS;AAAA,QAAC,MAAK;AAAA,QAAQ;AAAA,QAAc,cAAY;AAAA,QAAW,IAAI,CAAC,sBAAsB,kBAAkB;AAAA,QAEzG,UAAU,CAAC,OAAO,cAAc,cAAc,QAAQ,SAAS,SAAS;AAAA,QACtF,kBAAQ,IAAI,CAAC,WACV,oBAAC,gBAAgC,OAAO,OAAO,OAAO,UAAU,OAAO,UAAW,UAAA,OAAO,MAAA,GAAtE,OAAO,KAAqE,CAClG;AAAA,MAAA;AAAA,IAAA,EACL,CACJ;AAAA;AAER;"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/ui/filters/SegmentedControl.jsx"],"sourcesContent":["// Pestañas en píldora: una tira de botones donde se elige UNO (el producto de una lista, la vista de un\n// tablero). Va en un renglón que se desliza en el teléfono, como las pestañas de una app móvil.\n//\n// SEGMENTED_CONTROL_SX es el estilo de la tira; se exporta para quien arma su propia tira con menús adentro (una barra\n// de productos con menús).\n//\n// Con el vidrio del tema es el control segmentado de Liquid Glass: la tira sin borde y lo elegido en la «gota» (la misma\n// de las pestañas y de los botones de opción), no en un relleno de color. Con el naranja fijo le ganaba al vidrio, no se\n// parecía a las pestañas de al lado y en oscuro quedaba con letra negra.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSegmentedControl con styleOverrides.root\n// (la tira y, adentro, sus opciones: '& .MuiToggleButton-root') y defaultProps.\n//\n// Genérico del paquete: function (regla de la casa).\nimport ToggleButton from '@mui/material/ToggleButton';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup';\nimport {styled, useThemeProps} from '@mui/material/styles';\n\nimport {glassDropOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\n\n// con vidrio, el alto de cada opción: con el margen de la tira (3 px arriba y abajo) da los 40 px de un campo\n// el aire de la fila para la sombra, en unidades de spacing (4 px)\nconst ROW_SHADOW_ROOM = 0.5;\nconst GLASS_SEGMENT_MIN_HEIGHT_PIXELS = 34;\n\nexport const SEGMENTED_CONTROL_SX = {\n    gap: 0.5,\n    p: 0.375,\n    border: 1,\n    borderColor: 'divider',\n    borderRadius: 999,\n    flexWrap: 'nowrap',\n    flex: '0 0 auto',\n    '& .MuiToggleButton-root': {\n        border: 0, borderRadius: '999px', m: 0, px: 1.75, py: 0.375,\n        ...textSizeOf(13), fontWeight: 600, textTransform: 'none', color: 'text.secondary', whiteSpace: 'nowrap',\n    },\n    // la píldora de cada opción. OJO: con dos clases; el grupo de MUI quita las esquinas y junta los botones de en medio con\n    // reglas de dos clases (& .MuiToggleButtonGroup-middleButton). Antes se le ganaba con !important, y así el tema del\n    // proyecto tampoco podía cambiar la forma\n    '& .MuiToggleButton-root.MuiToggleButtonGroup-grouped': {border: 0, borderRadius: '999px', m: 0},\n    '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {\n        bgcolor: 'primary.main', color: 'primary.contrastText',\n    },\n};\n\n/**\n * Lo que cambia con vidrio: sin borde (la tira ya se marca sola) y lo elegido en su gota.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction glassSegmentedSxOf(theme) {\n    // con el minimalista: la tira gris y lo elegido un escalón arriba, como el de Apple (los pone el tema); sin el naranja lleno\n    if (theme.toolkit?.look === 'minimal') {\n        return {\n            border: 0,\n            '& .MuiToggleButton-root': {minHeight: GLASS_SEGMENT_MIN_HEIGHT_PIXELS},\n            '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {\n                bgcolor: 'background.paper', color: 'text.primary', ...theme.applyStyles('dark', {bgcolor: 'rgba(118, 118, 128, 0.36)'}),\n            },\n        };\n    }\n    if (!isGlassTheme(theme)) {\n        return {};\n    }\n    return {\n        border: 0,\n        // del mismo alto que un campo (40 px con su margen de 3 px arriba y abajo): en una fila de filtros junto a «Desde» y\n        // «Hasta» quedaba más bajito y descuadrado (lo reportaron)\n        '& .MuiToggleButton-root': {minHeight: GLASS_SEGMENT_MIN_HEIGHT_PIXELS},\n        '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {...glassDropOf(theme), color: 'text.primary'},\n    };\n}\n\n// el nombre de la pieza en el tema (theme.components.CalcitaSegmentedControl)\nconst THEME_NAME = 'CalcitaSegmentedControl';\n\n// la tira con su estilo y el de vidrio o minimalista; el tema del proyecto (styleOverrides.root) va después y le gana\nconst SegmentedControlRoot = styled(ToggleButtonGroup, {name: THEME_NAME, slot: 'Root'})(({theme}) => (\n    theme.unstable_sx([SEGMENTED_CONTROL_SX, glassSegmentedSxOf(theme)])\n));\n\n/**\n * @param {object} props\n * @param {Array<{value: string, label: string, disabled?: boolean}>} props.options en el orden en que se pintan; ya\n *     traducidas\n * @param {string|null} props.value\n * @param {(value: string) => void} props.onChange\n * @param {string} props.ariaLabel ya traducido\n */\nexport default function SegmentedControl(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSegmentedControl.defaultProps) y encima lo que llega aquí\n    const {options, value, onChange, ariaLabel} = useThemeProps({props, name: THEME_NAME});\n    return (\n        // la fila deja 4 px arriba y abajo para que la sombra no se corte (ScrollableRow, py 0.5); el margen negativo los\n        // devuelve: el control mide sus 40 px y se alinea con los campos de junto (quedaba 4 px más arriba)\n        <ScrollableRow gap={1} py={ROW_SHADOW_ROOM} sx={{alignItems: 'center', my: -ROW_SHADOW_ROOM}}>\n            <SegmentedControlRoot exclusive size=\"small\" value={value} aria-label={ariaLabel}\n                               // quitar la selección no existe: un clic en la pestaña elegida no la apaga\n                               onChange={(event, nextValue) => nextValue !== null && onChange(nextValue)}>\n                {options.map((option) => (\n                    <ToggleButton key={option.value} value={option.value} disabled={option.disabled}>{option.label}</ToggleButton>\n                ))}\n            </SegmentedControlRoot>\n        </ScrollableRow>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAwBA,MAAM,kBAAkB;AACxB,MAAM,kCAAkC;AAEjC,MAAM,uBAAuB;AAAA,EAChC,KAAK;AAAA,EACL,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,UAAU;AAAA,EACV,MAAM;AAAA,EACN,2BAA2B;AAAA,IACvB,QAAQ;AAAA,IAAG,cAAc;AAAA,IAAS,GAAG;AAAA,IAAG,IAAI;AAAA,IAAM,IAAI;AAAA,IACtD,GAAG,WAAW,EAAE;AAAA,IAAG,YAAY;AAAA,IAAK,eAAe;AAAA,IAAQ,OAAO;AAAA,IAAkB,YAAY;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAKpG,wDAAwD,EAAC,QAAQ,GAAG,cAAc,SAAS,GAAG,EAAA;AAAA,EAC9F,oFAAoF;AAAA,IAChF,SAAS;AAAA,IAAgB,OAAO;AAAA,EAAA;AAExC;AAQA,SAAS,mBAAmB,OAAO;AAE/B,MAAI,MAAM,SAAS,SAAS,WAAW;AACnC,WAAO;AAAA,MACH,QAAQ;AAAA,MACR,2BAA2B,EAAC,WAAW,gCAAA;AAAA,MACvC,oFAAoF;AAAA,QAChF,SAAS;AAAA,QAAoB,OAAO;AAAA,QAAgB,GAAG,MAAM,YAAY,QAAQ,EAAC,SAAS,6BAA4B;AAAA,MAAA;AAAA,IAC3H;AAAA,EAER;AACA,MAAI,CAAC,aAAa,KAAK,GAAG;AACtB,WAAO,CAAA;AAAA,EACX;AACA,SAAO;AAAA,IACH,QAAQ;AAAA;AAAA;AAAA,IAGR,2BAA2B,EAAC,WAAW,gCAAA;AAAA,IACvC,oFAAoF,EAAC,GAAG,YAAY,KAAK,GAAG,OAAO,eAAA;AAAA,EAAc;AAEzI;AAGA,MAAM,aAAa;AAGnB,MAAM,uBAAuB,OAAO,mBAAmB,EAAC,MAAM,YAAY,MAAM,QAAO,EAAE,CAAC,EAAC,MAAA,MACvF,MAAM,YAAY,CAAC,sBAAsB,mBAAmB,KAAK,CAAC,CAAC,CACtE;AAUD,SAAwB,iBAAiB,OAAO;AAE5C,QAAM,EAAC,SAAS,OAAO,UAAU,UAAA,IAAa,cAAc,EAAC,OAAO,MAAM,YAAW;AACrF;AAAA;AAAA;AAAA,IAGI,oBAAC,eAAA,EAAc,KAAK,GAAG,IAAI,iBAAiB,IAAI,EAAC,YAAY,UAAU,IAAI,CAAC,mBACxE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAqB,WAAS;AAAA,QAAC,MAAK;AAAA,QAAQ;AAAA,QAAc,cAAY;AAAA,QAEpD,UAAU,CAAC,OAAO,cAAc,cAAc,QAAQ,SAAS,SAAS;AAAA,QACtF,kBAAQ,IAAI,CAAC,WACV,oBAAC,gBAAgC,OAAO,OAAO,OAAO,UAAU,OAAO,UAAW,UAAA,OAAO,MAAA,GAAtE,OAAO,KAAqE,CAClG;AAAA,MAAA;AAAA,IAAA,EACL,CACJ;AAAA;AAER;"}

package/dist/ui/labels/StatusChip.js

@@ -4,15 +4,38 @@ import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
 import Tooltip from "@mui/material/Tooltip";
+import { styled, useThemeProps } from "@mui/material/styles";
 import { lookup, labelOf, shortLabelOf } from "../../dictionaries/dictionaries.js";
-const DOT_COLOR_BY_TONE = {
-  success: "success.main",
-  warning: "warning.main",
-  error: "error.main",
-  info: "info.main",
-  default: "text.disabled"
-};
-function StatusChip({ dictionary, value, variant = "dot", short = false, suffix, tooltip: customTooltip, sx }) {
+import { paletteOf } from "../../theme/components/paletteOf.js";
+import { lightDarkStylesOf } from "../../theme/lightDarkStyles.js";
+const THEME_NAME = "CalcitaStatusChip";
+const PALETTE_TONES = ["primary", "secondary", "success", "warning", "error", "info"];
+function paletteToneOf(theme, tone) {
+  return PALETTE_TONES.includes(tone) && paletteOf(theme)[tone] ? paletteOf(theme)[tone] : null;
+}
+const StatusChipRoot = styled("span", { name: THEME_NAME, slot: "Root" })(({ theme, ownerState }) => {
+  const color = paletteToneOf(theme, ownerState.tone);
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.75),
+    fontSize: 13,
+    fontWeight: 500,
+    whiteSpace: "nowrap",
+    ...color ? lightDarkStylesOf(theme, { color: color.dark }, { color: color.light }) : { color: paletteOf(theme).text.secondary }
+  };
+});
+const StatusChipDot = styled("span", { name: THEME_NAME, slot: "Dot" })(({ theme, ownerState }) => ({
+  width: 6,
+  height: 6,
+  flexShrink: 0,
+  borderRadius: "50%",
+  backgroundColor: paletteToneOf(theme, ownerState.tone)?.main ?? paletteOf(theme).text.disabled
+}));
+const StatusChipLabel = styled("span", { name: THEME_NAME, slot: "Label" })({ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" });
+const StatusChipChip = styled(Chip, { name: THEME_NAME, slot: "Chip" })({});
+function StatusChip(props) {
+  const { dictionary, value, variant = "dot", short = false, suffix, tooltip: customTooltip, sx } = useThemeProps({ props, name: THEME_NAME });
   const { t } = useToolkitTranslation("dictionaries");
   const dictionaryEntry = lookup(dictionary, value);
   const fullLabel = labelOf(dictionaryEntry, t);
@@ -23,23 +46,10 @@ function StatusChip({ dictionary, value, variant = "dot", short = false, suffix,
     /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: 700 }, children: fullLabel }),
     explanation && /* @__PURE__ */ jsx(Box, { component: "span", children: explanation })
   ] });
-  const content = variant === "chip" ? /* @__PURE__ */ jsx(Chip, { size: "small", label, color: dictionaryEntry.color, variant: "outlined", sx }) : /* @__PURE__ */ jsxs(Box, { component: "span", sx: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 0.75,
-    fontSize: 13,
-    fontWeight: 500,
-    whiteSpace: "nowrap",
-    color: dictionaryEntry.color === "default" ? "text.secondary" : `${dictionaryEntry.color}.dark`
-  }, children: [
-    /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", sx: {
-      width: 6,
-      height: 6,
-      flexShrink: 0,
-      borderRadius: "50%",
-      bgcolor: DOT_COLOR_BY_TONE[dictionaryEntry.color] ?? DOT_COLOR_BY_TONE.default
-    } }),
-    /* @__PURE__ */ jsx(Box, { component: "span", sx: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }, children: label })
+  const ownerState = { tone: dictionaryEntry.color, variant };
+  const content = variant === "chip" ? /* @__PURE__ */ jsx(StatusChipChip, { size: "small", label, color: dictionaryEntry.color, variant: "outlined", sx }) : /* @__PURE__ */ jsxs(StatusChipRoot, { ownerState, children: [
+    /* @__PURE__ */ jsx(StatusChipDot, { "aria-hidden": "true", ownerState }),
+    /* @__PURE__ */ jsx(StatusChipLabel, { ownerState, children: label })
   ] });
   if (!tooltip) {
     return content;

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

@@ -1 +1 @@
-{"version":3,"file":"StatusChip.js","sources":["../../../src/ui/labels/StatusChip.jsx"],"sourcesContent":["// Estatus pintado desde un diccionario (dictionaries/dictionaries.js): etiqueta, tooltip y color salen del diccionario,\n// nunca del componente que lo usa. Un valor que no está en el diccionario se pinta con su código crudo.\n//\n// Dos formas:\n//   - variant=\"dot\" (por defecto): punto de color + texto, sin fondo. Para la columna de estado de una tabla.\n//   - variant=\"chip\": Chip de MUI con contorno, para formatos, hallazgos o encabezados.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport {labelOf, lookup, shortLabelOf} from '@/dictionaries/dictionaries.js';\n\n// color del diccionario → color de texto del punto (default no existe en la paleta)\nconst DOT_COLOR_BY_TONE = {\n    success: 'success.main',\n    warning: 'warning.main',\n    error: 'error.main',\n    info: 'info.main',\n    default: 'text.disabled',\n};\n\n/**\n * @param {object} props\n * @param {Record<string, object>} props.dictionary p. ej. BATCH_STATUS\n * @param {string|null|undefined} props.value código del API\n * @param {'dot'|'chip'} [props.variant]\n * @param {boolean} [props.short] pinta la palabra corta de la entrada (shortLabelKey), para una columna angosta; el\n *     nombre completo queda en el tooltip, antes de su explicación\n * @param {string} [props.suffix] texto que va después de la etiqueta con \" · \" (p. ej. un conteo ya formateado)\n * @param {import('react').ReactNode} [props.tooltip] SUSTITUYE al tooltip del diccionario; úsalo cuando el renglón tiene algo más\n *     que decir. OJO: no envuelvas este componente en otro Tooltip, porque el suyo sigue ahí y se ven los dos encimados\n * @param {object} [props.sx] ajustes de estilo del Chip (solo variant=\"chip\")\n */\nexport default function StatusChip({dictionary, value, variant = 'dot', short = false, suffix, tooltip: customTooltip, sx}) {\n    const {t} = useToolkitTranslation('dictionaries');\n    const dictionaryEntry = lookup(dictionary, value);\n    const fullLabel = labelOf(dictionaryEntry, t);\n    const entryLabel = short ? shortLabelOf(dictionaryEntry, t) : fullLabel;\n    const label = suffix ? `${entryLabel} · ${suffix}` : entryLabel;\n    // el de quien lo usa gana: si pasa uno, el del diccionario no se pinta y no hay dos globos\n    const explanation = customTooltip ?? t(dictionaryEntry.tooltipKey, {defaultValue: ''});\n    // la palabra corta deja fuera parte del nombre: el tooltip lo dice completo y, debajo, su explicación\n    const tooltip = entryLabel === fullLabel ? explanation : (\n        <Box component=\"span\" sx={{display: 'flex', flexDirection: 'column', gap: 0.25}}>\n            <Box component=\"span\" sx={{fontWeight: 700}}>{fullLabel}</Box>\n            {explanation && <Box component=\"span\">{explanation}</Box>}\n        </Box>\n    );\n\n    const content = variant === 'chip' ? (\n        <Chip size=\"small\" label={label} color={dictionaryEntry.color} variant=\"outlined\" sx={sx} />\n    ) : (\n        <Box component=\"span\" sx={{\n            display: 'inline-flex', alignItems: 'center', gap: 0.75,\n            fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap',\n            color: dictionaryEntry.color === 'default' ? 'text.secondary' : `${dictionaryEntry.color}.dark`,\n        }}>\n            {/* OJO: flexShrink 0; en una celda angosta el punto se encogía a 0 px y el estado perdía su color */}\n            <Box component=\"span\" aria-hidden=\"true\" sx={{\n                width: 6, height: 6, flexShrink: 0, borderRadius: '50%',\n                bgcolor: DOT_COLOR_BY_TONE[dictionaryEntry.color] ?? DOT_COLOR_BY_TONE.default,\n            }} />\n            {/* el texto en su propio span: un nodo de texto suelto dentro de un flex se corta sin «…» */}\n            <Box component=\"span\" sx={{minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'}}>{label}</Box>\n        </Box>\n    );\n\n    // guard clause: sin tooltip no envolvemos (un Tooltip vacío igual agrega listeners)\n    if (!tooltip) {\n        return content;\n    }\n    return <Tooltip title={tooltip}>{content}</Tooltip>;\n}\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,oBAAoB;AAAA,EACtB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACb;AAcA,SAAwB,WAAW,EAAC,YAAY,OAAO,UAAU,OAAO,QAAQ,OAAO,QAAQ,SAAS,eAAe,GAAA,GAAK;AACxH,QAAM,EAAC,EAAA,IAAK,sBAAsB,cAAc;AAChD,QAAM,kBAAkB,OAAO,YAAY,KAAK;AAChD,QAAM,YAAY,QAAQ,iBAAiB,CAAC;AAC5C,QAAM,aAAa,QAAQ,aAAa,iBAAiB,CAAC,IAAI;AAC9D,QAAM,QAAQ,SAAS,GAAG,UAAU,MAAM,MAAM,KAAK;AAErD,QAAM,cAAc,iBAAiB,EAAE,gBAAgB,YAAY,EAAC,cAAc,IAAG;AAErF,QAAM,UAAU,eAAe,YAAY,cACvC,qBAAC,OAAI,WAAU,QAAO,IAAI,EAAC,SAAS,QAAQ,eAAe,UAAU,KAAK,QACtE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,UAAA,CAAU;AAAA,IACvD,eAAe,oBAAC,KAAA,EAAI,WAAU,QAAQ,UAAA,YAAA,CAAY;AAAA,EAAA,GACvD;AAGJ,QAAM,UAAU,YAAY,6BACvB,MAAA,EAAK,MAAK,SAAQ,OAAc,OAAO,gBAAgB,OAAO,SAAQ,YAAW,IAAQ,yBAEzF,KAAA,EAAI,WAAU,QAAO,IAAI;AAAA,IACtB,SAAS;AAAA,IAAe,YAAY;AAAA,IAAU,KAAK;AAAA,IACnD,UAAU;AAAA,IAAI,YAAY;AAAA,IAAK,YAAY;AAAA,IAC3C,OAAO,gBAAgB,UAAU,YAAY,mBAAmB,GAAG,gBAAgB,KAAK;AAAA,EAAA,GAGxF,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,QAAO,eAAY,QAAO,IAAI;AAAA,MACzC,OAAO;AAAA,MAAG,QAAQ;AAAA,MAAG,YAAY;AAAA,MAAG,cAAc;AAAA,MAClD,SAAS,kBAAkB,gBAAgB,KAAK,KAAK,kBAAkB;AAAA,IAAA,GACxE;AAAA,IAEH,oBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,EAAC,UAAU,GAAG,UAAU,UAAU,cAAc,WAAA,GAAc,UAAA,MAAA,CAAM;AAAA,EAAA,GAClG;AAIJ,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,SAAO,oBAAC,SAAA,EAAQ,OAAO,SAAU,UAAA,SAAQ;AAC7C;"}
+{"version":3,"file":"StatusChip.js","sources":["../../../src/ui/labels/StatusChip.jsx"],"sourcesContent":["// Estatus pintado desde un diccionario (dictionaries/dictionaries.js): etiqueta, tooltip y color salen del diccionario,\n// nunca del componente que lo usa. Un valor que no está en el diccionario se pinta con su código crudo.\n//\n// Dos formas:\n//   - variant=\"dot\" (por defecto): punto de color + texto, sin fondo. Para la columna de estado de una tabla.\n//   - variant=\"chip\": Chip de MUI con contorno, para formatos, hallazgos o encabezados.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaStatusChip con defaultProps (p. ej.\n// {variant: 'chip'}) y styleOverrides de sus partes: root (el renglón del punto y el texto), dot, label y chip.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Tooltip from '@mui/material/Tooltip';\nimport {styled, useThemeProps} from '@mui/material/styles';\n\nimport {labelOf, lookup, shortLabelOf} from '@/dictionaries/dictionaries.js';\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\n\n// el nombre de la pieza en el tema (theme.components.CalcitaStatusChip)\nconst THEME_NAME = 'CalcitaStatusChip';\n// los colores que trae la paleta; otro (o «default») se pinta neutro\nconst PALETTE_TONES = ['primary', 'secondary', 'success', 'warning', 'error', 'info'];\n\n/** El color del diccionario si la paleta lo tiene; si no, null (neutro). */\nfunction paletteToneOf(theme, tone) {\n    return PALETTE_TONES.includes(tone) && paletteOf(theme)[tone] ? paletteOf(theme)[tone] : null;\n}\n\n// el punto y el texto. El texto va en el tono oscuro de su color en claro y en el claro en oscuro: con el oscuro también en\n// modo oscuro casi no se leía (el «Suspendido» rojo sobre la tabla oscura, lo vio el usuario). Con lightDarkStylesOf para\n// que el tema del proyecto (styleOverrides.root) le gane también en oscuro\nconst StatusChipRoot = styled('span', {name: THEME_NAME, slot: 'Root'})(({theme, ownerState}) => {\n    const color = paletteToneOf(theme, ownerState.tone);\n    return {\n        display: 'inline-flex', alignItems: 'center', gap: theme.spacing(0.75),\n        fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap',\n        ...(color\n            ? lightDarkStylesOf(theme, {color: color.dark}, {color: color.light})\n            : {color: paletteOf(theme).text.secondary}),\n    };\n});\n\n// OJO: flexShrink 0; en una celda angosta el punto se encogía a 0 px y el estado perdía su color\nconst StatusChipDot = styled('span', {name: THEME_NAME, slot: 'Dot'})(({theme, ownerState}) => ({\n    width: 6, height: 6, flexShrink: 0, borderRadius: '50%',\n    backgroundColor: paletteToneOf(theme, ownerState.tone)?.main ?? paletteOf(theme).text.disabled,\n}));\n\n// el texto en su propio span: un nodo de texto suelto dentro de un flex se corta sin «…»\nconst StatusChipLabel = styled('span', {name: THEME_NAME, slot: 'Label'})({minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'});\n\nconst StatusChipChip = styled(Chip, {name: THEME_NAME, slot: 'Chip'})({});\n\n/**\n * @param {object} props\n * @param {Record<string, object>} props.dictionary p. ej. BATCH_STATUS\n * @param {string|null|undefined} props.value código del API\n * @param {'dot'|'chip'} [props.variant]\n * @param {boolean} [props.short] pinta la palabra corta de la entrada (shortLabelKey), para una columna angosta; el\n *     nombre completo queda en el tooltip, antes de su explicación\n * @param {string} [props.suffix] texto que va después de la etiqueta con \" · \" (p. ej. un conteo ya formateado)\n * @param {import('react').ReactNode} [props.tooltip] SUSTITUYE al tooltip del diccionario; úsalo cuando el renglón tiene algo más\n *     que decir. OJO: no envuelvas este componente en otro Tooltip, porque el suyo sigue ahí y se ven los dos encimados\n * @param {object} [props.sx] ajustes de estilo del Chip (solo variant=\"chip\")\n */\nexport default function StatusChip(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaStatusChip.defaultProps) y encima lo que llega aquí\n    const {dictionary, value, variant = 'dot', short = false, suffix, tooltip: customTooltip, sx} = useThemeProps({props, name: THEME_NAME});\n    const {t} = useToolkitTranslation('dictionaries');\n    const dictionaryEntry = lookup(dictionary, value);\n    const fullLabel = labelOf(dictionaryEntry, t);\n    const entryLabel = short ? shortLabelOf(dictionaryEntry, t) : fullLabel;\n    const label = suffix ? `${entryLabel} · ${suffix}` : entryLabel;\n    // el de quien lo usa gana: si pasa uno, el del diccionario no se pinta y no hay dos globos\n    const explanation = customTooltip ?? t(dictionaryEntry.tooltipKey, {defaultValue: ''});\n    // la palabra corta deja fuera parte del nombre: el tooltip lo dice completo y, debajo, su explicación\n    const tooltip = entryLabel === fullLabel ? explanation : (\n        <Box component=\"span\" sx={{display: 'flex', flexDirection: 'column', gap: 0.25}}>\n            <Box component=\"span\" sx={{fontWeight: 700}}>{fullLabel}</Box>\n            {explanation && <Box component=\"span\">{explanation}</Box>}\n        </Box>\n    );\n\n    const ownerState = {tone: dictionaryEntry.color, variant};\n    const content = variant === 'chip' ? (\n        <StatusChipChip size=\"small\" label={label} color={dictionaryEntry.color} variant=\"outlined\" sx={sx} />\n    ) : (\n        <StatusChipRoot ownerState={ownerState}>\n            <StatusChipDot aria-hidden=\"true\" ownerState={ownerState} />\n            <StatusChipLabel ownerState={ownerState}>{label}</StatusChipLabel>\n        </StatusChipRoot>\n    );\n\n    // guard clause: sin tooltip no envolvemos (un Tooltip vacío igual agrega listeners)\n    if (!tooltip) {\n        return content;\n    }\n    return <Tooltip title={tooltip}>{content}</Tooltip>;\n}\n"],"names":[],"mappings":";;;;;;;;;;AAsBA,MAAM,aAAa;AAEnB,MAAM,gBAAgB,CAAC,WAAW,aAAa,WAAW,WAAW,SAAS,MAAM;AAGpF,SAAS,cAAc,OAAO,MAAM;AAChC,SAAO,cAAc,SAAS,IAAI,KAAK,UAAU,KAAK,EAAE,IAAI,IAAI,UAAU,KAAK,EAAE,IAAI,IAAI;AAC7F;AAKA,MAAM,iBAAiB,OAAO,QAAQ,EAAC,MAAM,YAAY,MAAM,OAAA,CAAO,EAAE,CAAC,EAAC,OAAO,iBAAgB;AAC7F,QAAM,QAAQ,cAAc,OAAO,WAAW,IAAI;AAClD,SAAO;AAAA,IACH,SAAS;AAAA,IAAe,YAAY;AAAA,IAAU,KAAK,MAAM,QAAQ,IAAI;AAAA,IACrE,UAAU;AAAA,IAAI,YAAY;AAAA,IAAK,YAAY;AAAA,IAC3C,GAAI,QACE,kBAAkB,OAAO,EAAC,OAAO,MAAM,QAAO,EAAC,OAAO,MAAM,MAAA,CAAM,IAClE,EAAC,OAAO,UAAU,KAAK,EAAE,KAAK,UAAA;AAAA,EAAS;AAErD,CAAC;AAGD,MAAM,gBAAgB,OAAO,QAAQ,EAAC,MAAM,YAAY,MAAM,MAAA,CAAM,EAAE,CAAC,EAAC,OAAO,kBAAiB;AAAA,EAC5F,OAAO;AAAA,EAAG,QAAQ;AAAA,EAAG,YAAY;AAAA,EAAG,cAAc;AAAA,EAClD,iBAAiB,cAAc,OAAO,WAAW,IAAI,GAAG,QAAQ,UAAU,KAAK,EAAE,KAAK;AAC1F,EAAE;AAGF,MAAM,kBAAkB,OAAO,QAAQ,EAAC,MAAM,YAAY,MAAM,QAAA,CAAQ,EAAE,EAAC,UAAU,GAAG,UAAU,UAAU,cAAc,YAAW;AAErI,MAAM,iBAAiB,OAAO,MAAM,EAAC,MAAM,YAAY,MAAM,QAAO,EAAE,EAAE;AAcxE,SAAwB,WAAW,OAAO;AAEtC,QAAM,EAAC,YAAY,OAAO,UAAU,OAAO,QAAQ,OAAO,QAAQ,SAAS,eAAe,OAAM,cAAc,EAAC,OAAO,MAAM,YAAW;AACvI,QAAM,EAAC,EAAA,IAAK,sBAAsB,cAAc;AAChD,QAAM,kBAAkB,OAAO,YAAY,KAAK;AAChD,QAAM,YAAY,QAAQ,iBAAiB,CAAC;AAC5C,QAAM,aAAa,QAAQ,aAAa,iBAAiB,CAAC,IAAI;AAC9D,QAAM,QAAQ,SAAS,GAAG,UAAU,MAAM,MAAM,KAAK;AAErD,QAAM,cAAc,iBAAiB,EAAE,gBAAgB,YAAY,EAAC,cAAc,IAAG;AAErF,QAAM,UAAU,eAAe,YAAY,cACvC,qBAAC,OAAI,WAAU,QAAO,IAAI,EAAC,SAAS,QAAQ,eAAe,UAAU,KAAK,QACtE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,UAAA,CAAU;AAAA,IACvD,eAAe,oBAAC,KAAA,EAAI,WAAU,QAAQ,UAAA,YAAA,CAAY;AAAA,EAAA,GACvD;AAGJ,QAAM,aAAa,EAAC,MAAM,gBAAgB,OAAO,QAAA;AACjD,QAAM,UAAU,YAAY,SACxB,oBAAC,gBAAA,EAAe,MAAK,SAAQ,OAAc,OAAO,gBAAgB,OAAO,SAAQ,YAAW,IAAQ,IAEpG,qBAAC,kBAAe,YACZ,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,eAAY,QAAO,WAAA,CAAwB;AAAA,IAC1D,oBAAC,iBAAA,EAAgB,YAAyB,UAAA,MAAA,CAAM;AAAA,EAAA,GACpD;AAIJ,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,SAAO,oBAAC,SAAA,EAAQ,OAAO,SAAU,UAAA,SAAQ;AAC7C;"}

package/dist/ui/labels/Tag.js

@@ -2,16 +2,21 @@
 import { jsx } from "react/jsx-runtime";
 import Chip from "@mui/material/Chip";
 import Tooltip from "@mui/material/Tooltip";
-function Tag({ label, tooltip, color = "default", variant = "outlined", size = "small", onDelete, sx, ...chipProps }) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaTag";
+const TagChip = piecePart(THEME_NAME, "Root", Chip);
+function Tag(props) {
+  const { label, tooltip, color = "default", variant = "outlined", size = "small", onDelete, sx, ...chipProps } = usePieceProps(props, THEME_NAME);
   const chip = /* @__PURE__ */ jsx(
-    Chip,
+    TagChip,
     {
       label,
       size,
       variant,
       color,
       onDelete,
-      sx: { fontWeight: 500, ...sx },
+      ownSx: { fontWeight: 500 },
+      sx,
       ...chipProps
     }
   );

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// Genérico del paquete: function (regla de la casa).\nimport Chip from '@mui/material/Chip';\nimport Tooltip from '@mui/material/Tooltip';\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({label, tooltip, color = 'default', variant = 'outlined', size = 'small', onDelete, sx, ...chipProps}) {\n    const chip = (\n        <Chip label={label} size={size} variant={variant} color={color} onDelete={onDelete}\n              sx={{fontWeight: 500, ...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":";;;;AAmBA,SAAwB,IAAI,EAAC,OAAO,SAAS,QAAQ,WAAW,UAAU,YAAY,OAAO,SAAS,UAAU,IAAI,GAAG,aAAY;AAC/H,QAAM,OACF;AAAA,IAAC;AAAA,IAAA;AAAA,MAAK;AAAA,MAAc;AAAA,MAAY;AAAA,MAAkB;AAAA,MAAc;AAAA,MAC1D,IAAI,EAAC,YAAY,KAAK,GAAG,GAAA;AAAA,MAAM,GAAG;AAAA,IAAA;AAAA,EAAA;AAI5C,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} 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;"}

package/dist/ui/layout/CollapsibleSection.js

@@ -7,6 +7,15 @@ 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";
+const THEME_NAME = "CalcitaCollapsibleSection";
+const CollapsibleRoot = piecePart(THEME_NAME, "Root", Box);
+const CollapsibleAccordion = piecePart(THEME_NAME, "Accordion", Accordion);
+const CollapsibleSummary = piecePart(THEME_NAME, "Summary", AccordionSummary);
+const CollapsibleTitleArea = piecePart(THEME_NAME, "TitleArea", Box);
+const CollapsibleCollapsedTitle = piecePart(THEME_NAME, "CollapsedTitle", Typography);
+const CollapsibleExpandedTitle = piecePart(THEME_NAME, "ExpandedTitle", Typography);
+const CollapsibleDetails = piecePart(THEME_NAME, "Details", AccordionDetails);
 const CARD_BORDER_RADIUS_PIXELS = 10;
 const HEADER_SX = {
   // la flecha adelante del texto: al final del renglón quedaba lejos de lo que se lee y pasaba inadvertida
@@ -21,27 +30,28 @@ const HEADER_SX = {
   "&:hover": { bgcolor: "action.hover" },
   "& .MuiAccordionSummary-content": { my: 0.75, minWidth: 0 }
 };
-function CollapsibleSection({ collapsedTitle, expandedTitle, hint = "", defaultExpanded = false, onExpandedChange, children }) {
+function CollapsibleSection(props) {
+  const { collapsedTitle, expandedTitle, hint = "", defaultExpanded = false, onExpandedChange, children } = usePieceProps(props, THEME_NAME);
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const changeExpanded = (nextIsExpanded) => {
     setIsExpanded(nextIsExpanded);
     onExpandedChange?.(nextIsExpanded);
   };
-  return /* @__PURE__ */ jsx(Box, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsxs(
-    Accordion,
+  return /* @__PURE__ */ jsx(CollapsibleRoot, { ownSx: { minWidth: 0 }, children: /* @__PURE__ */ jsxs(
+    CollapsibleAccordion,
     {
       expanded: isExpanded,
       onChange: (changeEvent, nextIsExpanded) => changeExpanded(nextIsExpanded),
       disableGutters: true,
       elevation: 0,
       square: true,
-      sx: { bgcolor: "transparent", "&::before": { display: "none" } },
+      ownSx: { bgcolor: "transparent", "&::before": { display: "none" } },
       children: [
-        /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { color: "primary" }), sx: HEADER_SX, children: /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", component: "span", color: "primary", sx: { display: "block" }, children: isExpanded ? expandedTitle : collapsedTitle }),
-          !isExpanded && hint && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", color: "text.secondary", sx: { display: "block" }, children: hint })
+        /* @__PURE__ */ jsx(CollapsibleSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { color: "primary" }), ownSx: HEADER_SX, children: /* @__PURE__ */ jsxs(CollapsibleTitleArea, { ownSx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(CollapsibleCollapsedTitle, { variant: "subtitle2", component: "span", color: "primary", ownSx: { display: "block" }, children: isExpanded ? expandedTitle : collapsedTitle }),
+          !isExpanded && hint && /* @__PURE__ */ jsx(CollapsibleExpandedTitle, { variant: "caption", component: "span", color: "text.secondary", ownSx: { display: "block" }, children: hint })
         ] }) }),
-        /* @__PURE__ */ jsx(AccordionDetails, { sx: { p: 0, pt: 2 }, children })
+        /* @__PURE__ */ jsx(CollapsibleDetails, { ownSx: { p: 0, pt: 2 }, children })
       ]
     }
   ) });

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// 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';\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({collapsedTitle, expandedTitle, hint = '', defaultExpanded = false, onExpandedChange, children}) {\n    const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n    const changeExpanded = (nextIsExpanded) => {\n        setIsExpanded(nextIsExpanded);\n        onExpandedChange?.(nextIsExpanded);\n    };\n\n    return (\n        <Box sx={{minWidth: 0}}>\n            <Accordion expanded={isExpanded} onChange={(changeEvent, nextIsExpanded) => changeExpanded(nextIsExpanded)}\n                       disableGutters elevation={0} square sx={{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                <AccordionSummary expandIcon={<ExpandMoreIcon color=\"primary\" />} sx={HEADER_SX}>\n                    <Box sx={{minWidth: 0}}>\n                        <Typography variant=\"subtitle2\" component=\"span\" color=\"primary\" sx={{display: 'block'}}>\n                            {isExpanded ? expandedTitle : collapsedTitle}\n                        </Typography>\n                        {!isExpanded && hint && (\n                            <Typography variant=\"caption\" component=\"span\" color=\"text.secondary\" sx={{display: 'block'}}>{hint}</Typography>\n                        )}\n                    </Box>\n                </AccordionSummary>\n                <AccordionDetails sx={{p: 0, pt: 2}}>{children}</AccordionDetails>\n            </Accordion>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AA0BA,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,EAAC,gBAAgB,eAAe,OAAO,IAAI,kBAAkB,OAAO,kBAAkB,YAAW;AACxI,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,eAAe;AAC5D,QAAM,iBAAiB,CAAC,mBAAmB;AACvC,kBAAc,cAAc;AAC5B,uBAAmB,cAAc;AAAA,EACrC;AAEA,6BACK,KAAA,EAAI,IAAI,EAAC,UAAU,KAChB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAU,UAAU;AAAA,MAAY,UAAU,CAAC,aAAa,mBAAmB,eAAe,cAAc;AAAA,MAC9F,gBAAc;AAAA,MAAC,WAAW;AAAA,MAAG,QAAM;AAAA,MAAC,IAAI,EAAC,SAAS,eAAe,aAAa,EAAC,SAAS,SAAM;AAAA,MAErG,UAAA;AAAA,QAAA,oBAAC,kBAAA,EAAiB,YAAY,oBAAC,gBAAA,EAAe,OAAM,UAAA,CAAU,GAAI,IAAI,WAClE,+BAAC,KAAA,EAAI,IAAI,EAAC,UAAU,KAChB,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,SAAQ,aAAY,WAAU,QAAO,OAAM,WAAU,IAAI,EAAC,SAAS,QAAA,GAC1E,UAAA,aAAa,gBAAgB,gBAClC;AAAA,UACC,CAAC,cAAc,QACZ,oBAAC,YAAA,EAAW,SAAQ,WAAU,WAAU,QAAO,OAAM,kBAAiB,IAAI,EAAC,SAAS,QAAA,GAAW,UAAA,KAAA,CAAK;AAAA,QAAA,EAAA,CAE5G,EAAA,CACJ;AAAA,QACA,oBAAC,oBAAiB,IAAI,EAAC,GAAG,GAAG,IAAI,EAAA,GAAK,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEvD;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} from '@/theme/themePieces.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} = usePieceProps(props, THEME_NAME);\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":";;;;;;;;;;AA8BA,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,SAAA,IAAY,cAAc,OAAO,UAAU;AACvI,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;"}

package/dist/ui/layout/ContentDialog.js

@@ -9,6 +9,12 @@ 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";
+const THEME_NAME = "CalcitaContentDialog";
+const DialogHeader = piecePart(THEME_NAME, "Header", Box);
+const DialogTitle = piecePart(THEME_NAME, "Title", Typography);
+const DialogCloseButton = piecePart(THEME_NAME, "CloseButton", IconButton);
+const DialogBody = piecePart(THEME_NAME, "Body", Box);
 const SHEET_MAX_WIDTH_PIXELS = 880;
 const SHEET_GAP_PIXELS = 8;
 const SHEET_PHONE_TOP_PIXELS = 24;
@@ -49,7 +55,8 @@ function sheetSxOf(theme) {
 function SlideUp(props) {
   return /* @__PURE__ */ jsx(Slide, { direction: "up", ...props });
 }
-function ContentDialog({ open, onClose, title, children, texts }) {
+function ContentDialog(props) {
+  const { open, onClose, title, children, texts } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("common", texts);
   const titleId = useId();
   return /* @__PURE__ */ jsxs(
@@ -62,7 +69,7 @@ function ContentDialog({ open, onClose, title, children, texts }) {
       slots: { transition: SlideUp },
       slotProps: { paper: { sx: sheetSxOf } },
       children: [
-        /* @__PURE__ */ jsxs(Box, { sx: {
+        /* @__PURE__ */ jsxs(DialogHeader, { ownSx: {
           display: "flex",
           alignItems: "center",
           gap: 2,
@@ -74,19 +81,19 @@ function ContentDialog({ open, onClose, title, children, texts }) {
           borderBottom: 1,
           borderColor: "divider"
         }, children: [
-          /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "h6", component: "h2", sx: { flex: 1, minWidth: 0 }, children: title }),
+          /* @__PURE__ */ jsx(DialogTitle, { id: titleId, variant: "h6", component: "h2", ownSx: { flex: 1, minWidth: 0 }, children: title }),
           /* @__PURE__ */ jsx(
-            IconButton,
+            DialogCloseButton,
             {
               onClick: onClose,
               "aria-label": t("actions.close"),
               size: "small",
-              sx: { bgcolor: "action.hover", "&:hover": { bgcolor: "action.selected" } },
+              ownSx: { bgcolor: "action.hover", "&:hover": { bgcolor: "action.selected" } },
               children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minHeight: 0, overflow: "auto", px: { xs: 2.5, md: 4 }, py: { xs: 2, md: 3 } }, children })
+        /* @__PURE__ */ jsx(DialogBody, { ownSx: { flex: 1, minHeight: 0, overflow: "auto", px: { xs: 2.5, md: 4 }, py: { xs: 2, md: 3 } }, children })
       ]
     }
   );

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// 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';\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({open, onClose, title, children, texts}) {\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            <Box sx={{\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                <Typography id={titleId} variant=\"h6\" component=\"h2\" sx={{flex: 1, minWidth: 0}}>{title}</Typography>\n                {/* la X de Apple: en un círculo gris tenue, no suelta */}\n                <IconButton onClick={onClose} aria-label={t('actions.close')} size=\"small\"\n                            sx={{bgcolor: 'action.hover', '&:hover': {bgcolor: 'action.selected'}}}>\n                    <CloseIcon fontSize=\"small\" />\n                </IconButton>\n            </Box>\n            <Box sx={{flex: 1, minHeight: 0, overflow: 'auto', px: {xs: 2.5, md: 4}, py: {xs: 2, md: 3}}}>\n                {children}\n            </Box>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA8BA,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,EAAC,MAAM,SAAS,OAAO,UAAU,SAAQ;AAC3E,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,OAAI,IAAI;AAAA,UACL,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,YAAA,EAAW,IAAI,SAAS,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAC,MAAM,GAAG,UAAU,KAAK,UAAA,OAAM;AAAA,UAExF;AAAA,YAAC;AAAA,YAAA;AAAA,cAAW,SAAS;AAAA,cAAS,cAAY,EAAE,eAAe;AAAA,cAAG,MAAK;AAAA,cACvD,IAAI,EAAC,SAAS,gBAAgB,WAAW,EAAC,SAAS,oBAAiB;AAAA,cAC5E,UAAA,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC,GACJ;AAAA,QACA,oBAAC,KAAA,EAAI,IAAI,EAAC,MAAM,GAAG,WAAW,GAAG,UAAU,QAAQ,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA,GAAI,IAAI,EAAC,IAAI,GAAG,IAAI,EAAA,EAAC,GACrF,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} from '@/theme/themePieces.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} = usePieceProps(props, THEME_NAME);\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":";;;;;;;;;;;;AAiCA,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,UAAS,cAAc,OAAO,UAAU;AAC/E,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;"}

package/dist/ui/layout/DefinitionList.js

@@ -2,26 +2,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-function DefinitionList({ entries, layout = "columns", labelWidth = 150 }) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.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) {
+  const { entries, layout = "columns", labelWidth = 150 } = usePieceProps(props, THEME_NAME);
   const isStacked = layout === "stacked";
-  return /* @__PURE__ */ jsx(Box, { component: "dl", sx: {
+  return /* @__PURE__ */ jsx(DefinitionRoot, { component: "dl", ownSx: {
     m: 0,
     display: "grid",
     gridTemplateColumns: isStacked ? "minmax(0, 1fr)" : `${labelWidth}px minmax(0, 1fr)`,
     columnGap: 2,
     rowGap: isStacked ? 0.25 : 1
-  }, children: entries.map(({ label, value }, entryPosition) => /* @__PURE__ */ jsxs(Box, { sx: { display: "contents" }, children: [
+  }, children: entries.map(({ label, value }, entryPosition) => /* @__PURE__ */ jsxs(DefinitionEntry, { ownSx: { display: "contents" }, children: [
     /* @__PURE__ */ jsx(
-      Typography,
+      DefinitionLabel,
       {
         component: "dt",
         variant: isStacked ? "caption" : "body2",
         color: "text.secondary",
-        sx: isStacked && entryPosition > 0 ? { mt: 1.25 } : void 0,
+        ownSx: isStacked && entryPosition > 0 ? { mt: 1.25 } : void 0,
         children: label
       }
     ),
-    /* @__PURE__ */ jsx(Typography, { component: "dd", variant: "body2", sx: { m: 0, overflowWrap: "anywhere" }, children: value })
+    /* @__PURE__ */ jsx(DefinitionValue, { component: "dd", variant: "body2", ownSx: { m: 0, overflowWrap: "anywhere" }, children: value })
   ] }, label)) });
 }
 export {

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// 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';\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({entries, layout = 'columns', labelWidth = 150}) {\n    const isStacked = layout === 'stacked';\n\n    return (\n        <Box component=\"dl\" sx={{\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                <Box key={label} sx={{display: 'contents'}}>\n                    <Typography component=\"dt\" variant={isStacked ? 'caption' : 'body2'} color=\"text.secondary\"\n                                sx={isStacked && entryPosition > 0 ? {mt: 1.25} : undefined}>\n                        {label}\n                    </Typography>\n                    <Typography component=\"dd\" variant=\"body2\" sx={{m: 0, overflowWrap: 'anywhere'}}>{value}</Typography>\n                </Box>\n            ))}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAwB,eAAe,EAAC,SAAS,SAAS,WAAW,aAAa,OAAM;AACpF,QAAM,YAAY,WAAW;AAE7B,SACI,oBAAC,KAAA,EAAI,WAAU,MAAK,IAAI;AAAA,IACpB,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,KAAA,EAAgB,IAAI,EAAC,SAAS,cAC3B,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW,WAAU;AAAA,QAAK,SAAS,YAAY,YAAY;AAAA,QAAS,OAAM;AAAA,QAC/D,IAAI,aAAa,gBAAgB,IAAI,EAAC,IAAI,SAAQ;AAAA,QACzD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,oBAAC,YAAA,EAAW,WAAU,MAAK,SAAQ,SAAQ,IAAI,EAAC,GAAG,GAAG,cAAc,WAAA,GAAc,UAAA,MAAA,CAAM;AAAA,EAAA,KALlF,KAMV,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} from '@/theme/themePieces.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} = usePieceProps(props, THEME_NAME);\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":";;;;;AAiBA,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,QAAO,cAAc,OAAO,UAAU;AACvF,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;"}

package/dist/ui/layout/DetailHeader.js

@@ -6,19 +6,27 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
 import DocumentTitle from "../navigation/DocumentTitle.js";
-function DetailHeader({ title, eyebrow, badges, actions, documentTitle }) {
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaDetailHeader";
+const DetailRoot = piecePart(THEME_NAME, "Root", Box);
+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) {
+  const { title, eyebrow, badges, actions, documentTitle } = usePieceProps(props, THEME_NAME);
   const titleRef = useRef(null);
   useRegisterPageTitle(title, titleRef);
-  return /* @__PURE__ */ jsxs(Box, { component: "header", sx: { display: "flex", flexWrap: "wrap", alignItems: "flex-end", justifyContent: "space-between", gap: 2, mb: 2.5 }, children: [
+  return /* @__PURE__ */ jsxs(DetailRoot, { component: "header", ownSx: { display: "flex", flexWrap: "wrap", alignItems: "flex-end", justifyContent: "space-between", gap: 2, mb: 2.5 }, children: [
     /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? title }),
-    /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
-      eyebrow && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", color: "text.secondary", component: "p", sx: { fontWeight: 700 }, children: eyebrow }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, useFlexGap: true, sx: { alignItems: "center", flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsxs(DetailTitleArea, { ownSx: { minWidth: 0 }, children: [
+      eyebrow && /* @__PURE__ */ jsx(DetailTitle, { variant: "subtitle1", color: "text.secondary", component: "p", ownSx: { fontWeight: 700 }, children: eyebrow }),
+      /* @__PURE__ */ jsxs(DetailBadges, { direction: "row", spacing: 1.5, useFlexGap: true, ownSx: { alignItems: "center", flexWrap: "wrap" }, children: [
         /* @__PURE__ */ jsx(Typography, { ref: titleRef, variant: "h5", component: "h1", children: title }),
         badges
       ] })
     ] }),
-    actions && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: "wrap" }, children: actions })
+    actions && /* @__PURE__ */ jsx(DetailActions, { direction: "row", spacing: 1, useFlexGap: true, ownSx: { flexWrap: "wrap" }, children: actions })
   ] });
 }
 export {

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// 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';\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({title, eyebrow, badges, actions, documentTitle}) {\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    return (\n        <Box component=\"header\" sx={{display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 2, mb: 2.5}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            <Box sx={{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 && <Typography variant=\"subtitle1\" color=\"text.secondary\" component=\"p\" sx={{fontWeight: 700}}>{eyebrow}</Typography>}\n                <Stack direction=\"row\" spacing={1.5} useFlexGap sx={{alignItems: 'center', flexWrap: 'wrap'}}>\n                    <Typography ref={titleRef} variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {badges}\n                </Stack>\n            </Box>\n            {actions && <Stack direction=\"row\" spacing={1} useFlexGap sx={{flexWrap: 'wrap'}}>{actions}</Stack>}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAyBA,SAAwB,aAAa,EAAC,OAAO,SAAS,QAAQ,SAAS,iBAAgB;AACnF,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,8BACK,KAAA,EAAI,WAAU,UAAS,IAAI,EAAC,SAAS,QAAQ,UAAU,QAAQ,YAAY,YAAY,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OACjI,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,yBAC7C,KAAA,EAAI,IAAI,EAAC,UAAU,KAGf,UAAA;AAAA,MAAA,WAAW,oBAAC,YAAA,EAAW,SAAQ,aAAY,OAAM,kBAAiB,WAAU,KAAI,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,SAAQ;AAAA,MACjH,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,IAAI,EAAC,YAAY,UAAU,UAAU,UACjF,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,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,YAAU,MAAC,IAAI,EAAC,UAAU,OAAA,GAAU,UAAA,QAAA,CAAQ;AAAA,EAAA,GAC/F;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} from '@/theme/themePieces.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} = usePieceProps(props, THEME_NAME);\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":";;;;;;;;;AAsBA,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,kBAAiB,cAAc,OAAO,UAAU;AACxF,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;"}