@stackcraftmx/calcita 0.28.0 → 0.30.1

package/dist/ui/metrics/CalendarHeatmap.js

@@ -14,6 +14,24 @@ import Typography from "@mui/material/Typography";
 import { useFormatters } from "../../toolkit/useFormatters.js";
 import { calendarWeeksOf, levelOf, HEATMAP_LEVELS } from "./heatmapScale.js";
 import TableToggle, { CHART_VIEW } from "./TableToggle.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaCalendarHeatmap";
+const HeatmapHeader = piecePart(THEME_NAME, "Header", Stack);
+const HeatmapToggle = piecePart(THEME_NAME, "Toggle", Box);
+const HeatmapTableArea = piecePart(THEME_NAME, "TableArea", Box);
+const HeatmapDateCell = piecePart(THEME_NAME, "DateCell", TableCell);
+const HeatmapValueCell = piecePart(THEME_NAME, "ValueCell", TableCell);
+const HeatmapDescriptionCell = piecePart(THEME_NAME, "DescriptionCell", TableCell);
+const HeatmapGridArea = piecePart(THEME_NAME, "GridArea", Box);
+const HeatmapGrid = piecePart(THEME_NAME, "Grid", Box);
+const HeatmapMonthLabel = piecePart(THEME_NAME, "MonthLabel", Typography);
+const HeatmapWeek = piecePart(THEME_NAME, "Week", Box);
+const HeatmapDayLabel = piecePart(THEME_NAME, "DayLabel", Typography);
+const HeatmapCell = piecePart(THEME_NAME, "Cell", Box);
+const HeatmapLegend = piecePart(THEME_NAME, "Legend", Stack);
+const HeatmapLegendLess = piecePart(THEME_NAME, "LegendLess", Typography);
+const HeatmapLegendCell = piecePart(THEME_NAME, "LegendCell", Box);
+const HeatmapLegendMore = piecePart(THEME_NAME, "LegendMore", Typography);
 const CELL_PIXELS = { xs: 12, md: 16 };
 const GAP_PIXELS = 3;
 const LABELED_WEEKDAYS = /* @__PURE__ */ new Set([1, 3, 5]);
@@ -25,7 +43,8 @@ function levelFill(theme, tone, level) {
   }
   return `color-mix(in srgb, ${palette[tone].main} ${LEVEL_TONE_PERCENT[level]}%, transparent)`;
 }
-function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = "primary", texts, defaultView = CHART_VIEW.chart, onViewChange }) {
+function CalendarHeatmap(props) {
+  const { startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = "primary", texts, defaultView = CHART_VIEW.chart, onViewChange } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("common", texts);
   const { formatDate, formatMonthShortName, formatNumber, formatWeekdayShortName } = useFormatters();
   const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);
@@ -36,38 +55,38 @@ function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, descri
   const { weeks, monthMarks, thresholds } = useMemo(() => calendarWeeksOf({ startsOn, endsOn, days }), [startsOn, endsOn, days]);
   const activeDays = days.filter((day) => day.value > 0);
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, sx: { justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+    /* @__PURE__ */ jsxs(HeatmapHeader, { direction: "row", spacing: 2, ownSx: { justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: activeDays.length ? summary : emptyLabel }),
-      /* @__PURE__ */ jsx(Box, { sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: toggleView, texts }) })
+      /* @__PURE__ */ jsx(HeatmapToggle, { ownSx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: toggleView, texts }) })
     ] }),
-    asTable ? /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 260, overflowY: "auto" }, children: /* @__PURE__ */ jsxs(Table, { size: "small", "aria-label": ariaLabel, children: [
+    asTable ? /* @__PURE__ */ jsx(HeatmapTableArea, { ownSx: { maxHeight: 260, overflowY: "auto" }, children: /* @__PURE__ */ jsxs(Table, { size: "small", "aria-label": ariaLabel, children: [
       /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableCell, { children: t("charts.day") }),
         /* @__PURE__ */ jsx(TableCell, { align: "right", children: valueLabel }),
         /* @__PURE__ */ jsx(TableCell, {})
       ] }) }),
       /* @__PURE__ */ jsx(TableBody, { children: [...activeDays].reverse().map((day) => /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableCell, { sx: { whiteSpace: "nowrap" }, children: formatDate(day.date) }),
-        /* @__PURE__ */ jsx(TableCell, { align: "right", sx: { fontVariantNumeric: "tabular-nums" }, children: formatNumber(day.value) }),
-        /* @__PURE__ */ jsx(TableCell, { sx: { color: "text.secondary" }, children: day.detail })
+        /* @__PURE__ */ jsx(HeatmapDateCell, { ownSx: { whiteSpace: "nowrap" }, children: formatDate(day.date) }),
+        /* @__PURE__ */ jsx(HeatmapValueCell, { align: "right", ownSx: { fontVariantNumeric: "tabular-nums" }, children: formatNumber(day.value) }),
+        /* @__PURE__ */ jsx(HeatmapDescriptionCell, { ownSx: { color: "text.secondary" }, children: day.detail })
       ] }, day.date)) })
     ] }) }) : (
       // el calendario no se encoge: en pantallas angostas se desliza y arranca mostrando lo más reciente
       /* @__PURE__ */ jsx(
-        Box,
+        HeatmapGridArea,
         {
-          sx: { overflowX: "auto", pb: 0.5 },
+          ownSx: { overflowX: "auto", pb: 0.5 },
           ref: (node) => {
             if (node) {
               node.scrollLeft = node.scrollWidth;
             }
           },
           children: /* @__PURE__ */ jsxs(
-            Box,
+            HeatmapGrid,
             {
               role: "img",
               "aria-label": ariaLabel,
-              sx: {
+              ownSx: {
                 display: "inline-grid",
                 gridTemplateColumns: {
                   xs: `auto repeat(${weeks.length}, ${CELL_PIXELS.xs}px)`,
@@ -80,22 +99,22 @@ function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, descri
               children: [
                 /* @__PURE__ */ jsx(Box, {}),
                 monthMarks.map((month, column) => /* @__PURE__ */ jsx(
-                  Typography,
+                  HeatmapMonthLabel,
                   {
                     variant: "caption",
                     color: "text.secondary",
-                    sx: { fontSize: 10, lineHeight: 1, whiteSpace: "nowrap", overflow: "visible", width: CELL_PIXELS },
+                    ownSx: { fontSize: 10, lineHeight: 1, whiteSpace: "nowrap", overflow: "visible", width: CELL_PIXELS },
                     children: month ? formatMonthShortName(month) : ""
                   },
                   `month-${column}`
                 )),
-                [1, 2, 3, 4, 5, 6, 7].map((isoWeekday) => /* @__PURE__ */ jsxs(Box, { sx: { display: "contents" }, children: [
+                [1, 2, 3, 4, 5, 6, 7].map((isoWeekday) => /* @__PURE__ */ jsxs(HeatmapWeek, { ownSx: { display: "contents" }, children: [
                   /* @__PURE__ */ jsx(
-                    Typography,
+                    HeatmapDayLabel,
                     {
                       variant: "caption",
                       color: "text.secondary",
-                      sx: { fontSize: 10, lineHeight: { xs: `${CELL_PIXELS.xs}px`, md: `${CELL_PIXELS.md}px` }, pr: 0.75 },
+                      ownSx: { fontSize: 10, lineHeight: { xs: `${CELL_PIXELS.xs}px`, md: `${CELL_PIXELS.md}px` }, pr: 0.75 },
                       children: LABELED_WEEKDAYS.has(isoWeekday) ? formatWeekdayShortName(isoWeekday) : ""
                     }
                   ),
@@ -111,7 +130,7 @@ function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, descri
                         arrow: true,
                         disableInteractive: true,
                         title: `${formatDate(day.date)}: ${describeValue(day.value)}${day.detail ? ` · ${day.detail}` : ""}`,
-                        children: /* @__PURE__ */ jsx(Box, { sx: (theme) => ({ width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: "3px", bgcolor: levelFill(theme, tone, level) }) })
+                        children: /* @__PURE__ */ jsx(HeatmapCell, { ownSx: (theme) => ({ width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: "3px", bgcolor: levelFill(theme, tone, level) }) })
                       },
                       day.date
                     );
@@ -123,10 +142,10 @@ function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, descri
         }
       )
     ),
-    !asTable && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, sx: { alignItems: "center", justifyContent: "flex-end", mt: 1 }, "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mr: 0.5 }, children: t("charts.less") }),
-      HEATMAP_LEVELS.map((level) => /* @__PURE__ */ jsx(Box, { sx: (theme) => ({ width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: "3px", bgcolor: levelFill(theme, tone, level) }) }, level)),
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { ml: 0.5 }, children: t("charts.more") })
+    !asTable && /* @__PURE__ */ jsxs(HeatmapLegend, { direction: "row", spacing: 0.5, ownSx: { alignItems: "center", justifyContent: "flex-end", mt: 1 }, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx(HeatmapLegendLess, { variant: "caption", color: "text.secondary", ownSx: { mr: 0.5 }, children: t("charts.less") }),
+      HEATMAP_LEVELS.map((level) => /* @__PURE__ */ jsx(HeatmapLegendCell, { ownSx: (theme) => ({ width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: "3px", bgcolor: levelFill(theme, tone, level) }) }, level)),
+      /* @__PURE__ */ jsx(HeatmapLegendMore, { variant: "caption", color: "text.secondary", ownSx: { ml: 0.5 }, children: t("charts.more") })
     ] })
   ] });
 }

package/dist/ui/metrics/CalendarHeatmap.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeatmap.js","sources":["../../../src/ui/metrics/CalendarHeatmap.jsx"],"sourcesContent":["// Calendario de actividad: un cuadro por día, semanas en columnas (el de GitHub).\n//\n// Sirve para ver RITMO de un vistazo: qué días llegan cargas, si hubo semanas muertas, si la actividad crece. Las\n// reglas de visualización:\n//   - es MAGNITUD, así que va un solo tono de claro a oscuro (el del tono que se pida), en cuatro niveles más \"sin\n//     actividad\". Nunca un arcoíris. Se arma con color-mix sobre el color del tema (su variable CSS si el tema las usa),\n//     sin hexadecimales: en modo oscuro los mismos niveles se ven sobre su propia superficie;\n//   - los niveles se cortan por CUARTILES de los días con actividad (heatmapScale.js), no por valores fijos;\n//   - leyenda \"Menos → Más\", tooltip por día con el número exacto (el color solo nunca dice cuánto) y VISTA DE TABLA\n//     (para lector de pantalla, para quien no distingue el tono y para copiar los números).\n//\n// Sin librería a propósito: el Heatmap de MUI X Charts es de la edición Pro, que pide licencia.\n//\n// Textos por props y del paquete, y fechas con los formatos del paquete.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {HEATMAP_LEVELS, calendarWeeksOf, levelOf} from '@/ui/metrics/heatmapScale.js';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\n\n// cuadros de 12 px en teléfono (el calendario se desliza) y de 16 px desde md, donde el panel ocupa todo el ancho\nconst CELL_PIXELS = {xs: 12, md: 16};\nconst GAP_PIXELS = 3;\n// solo lunes, miércoles y viernes llevan rótulo: los siete encimados no se leen a 12 px\nconst LABELED_WEEKDAYS = new Set([1, 3, 5]);\n// porcentaje del tono en cada nivel; el nivel 0 es el gris de \"hover\" del tema\nconst LEVEL_TONE_PERCENT = {1: 30, 2: 55, 3: 78, 4: 100};\n\n/**\n * Relleno de un nivel con los colores del tema.\n *\n * @param {object} theme tema de MUI (con o sin variables CSS)\n * @param {string} tone primary, info, success...\n * @param {number} level 0 a 4\n * @returns {string} color CSS\n */\nfunction levelFill(theme, tone, level) {\n    // un tema con variables CSS las trae en theme.vars; el tema por omisión de MUI, solo en theme.palette\n    const {palette} = theme.vars ?? theme;\n    if (level === 0) {\n        return palette.action.hover;\n    }\n    return `color-mix(in srgb, ${palette[tone].main} ${LEVEL_TONE_PERCENT[level]}%, transparent)`;\n}\n\n/**\n * @param {object} props\n * @param {string} props.startsOn primer día del rango (\"2025-09-16\"), fecha de calendario\n * @param {string} props.endsOn último día del rango (\"2026-09-15\")\n * @param {Array<{date: string, value: number, detail?: string}>} props.days solo los días con actividad; el resto vale\n *     0\n * @param {string} props.ariaLabel qué muestra el calendario, ya traducido\n * @param {string} props.valueLabel encabezado de la columna de valor en la tabla (\"Registros leídos\")\n * @param {(value: number) => string} props.describeValue el valor en palabras para el tooltip (\"120 registros leídos\")\n * @param {import('react').ReactNode} [props.summary] renglón de resumen arriba del calendario\n * @param {string} [props.emptyLabel] qué decir si ningún día tiene actividad\n * @param {'primary'|'info'|'success'|'warning'|'error'} [props.tone]\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CalendarHeatmap({startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = 'primary', texts, defaultView = CHART_VIEW.chart, onViewChange}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatDate, formatMonthShortName, formatNumber, formatWeekdayShortName} = useFormatters();\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n\n    const {weeks, monthMarks, thresholds} = useMemo(() => calendarWeeksOf({startsOn, endsOn, days}), [startsOn, endsOn, days]);\n    const activeDays = days.filter((day) => day.value > 0);\n\n    return (\n        <Box>\n            <Stack direction=\"row\" spacing={2} sx={{justifyContent: 'space-between', alignItems: 'center', mb: 1}}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                    {activeDays.length ? summary : emptyLabel}\n                </Typography>\n                <Box sx={{flexShrink: 0}}>\n                    <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n                </Box>\n            </Stack>\n\n            {asTable ? (\n                <Box sx={{maxHeight: 260, overflowY: 'auto'}}>\n                    <Table size=\"small\" aria-label={ariaLabel}>\n                        <TableHead>\n                            <TableRow>\n                                <TableCell>{t('charts.day')}</TableCell>\n                                <TableCell align=\"right\">{valueLabel}</TableCell>\n                                <TableCell />\n                            </TableRow>\n                        </TableHead>\n                        <TableBody>\n                            {[...activeDays].reverse().map((day) => (\n                                <TableRow key={day.date}>\n                                    <TableCell sx={{whiteSpace: 'nowrap'}}>{formatDate(day.date)}</TableCell>\n                                    <TableCell align=\"right\" sx={{fontVariantNumeric: 'tabular-nums'}}>{formatNumber(day.value)}</TableCell>\n                                    <TableCell sx={{color: 'text.secondary'}}>{day.detail}</TableCell>\n                                </TableRow>\n                            ))}\n                        </TableBody>\n                    </Table>\n                </Box>\n            ) : (\n                // el calendario no se encoge: en pantallas angostas se desliza y arranca mostrando lo más reciente\n                <Box sx={{overflowX: 'auto', pb: 0.5}}\n                     ref={(node) => {\n                         if (node) {\n                             node.scrollLeft = node.scrollWidth;\n                         }\n                     }}>\n                    <Box role=\"img\" aria-label={ariaLabel}\n                         sx={{\n                             display: 'inline-grid',\n                             gridTemplateColumns: {\n                                 xs: `auto repeat(${weeks.length}, ${CELL_PIXELS.xs}px)`,\n                                 md: `auto repeat(${weeks.length}, ${CELL_PIXELS.md}px)`,\n                             },\n                             columnGap: `${GAP_PIXELS}px`,\n                             rowGap: `${GAP_PIXELS}px`,\n                             alignItems: 'center',\n                         }}>\n                        <Box />\n                        {monthMarks.map((month, column) => (\n                            <Typography key={`month-${column}`} variant=\"caption\" color=\"text.secondary\"\n                                        sx={{fontSize: 10, lineHeight: 1, whiteSpace: 'nowrap', overflow: 'visible', width: CELL_PIXELS}}>\n                                {month ? formatMonthShortName(month) : ''}\n                            </Typography>\n                        ))}\n                        {[1, 2, 3, 4, 5, 6, 7].map((isoWeekday) => (\n                            <Box key={`weekday-${isoWeekday}`} sx={{display: 'contents'}}>\n                                <Typography variant=\"caption\" color=\"text.secondary\"\n                                            sx={{fontSize: 10, lineHeight: {xs: `${CELL_PIXELS.xs}px`, md: `${CELL_PIXELS.md}px`}, pr: 0.75}}>\n                                    {LABELED_WEEKDAYS.has(isoWeekday) ? formatWeekdayShortName(isoWeekday) : ''}\n                                </Typography>\n                                {weeks.map((week, column) => {\n                                    const day = week[isoWeekday - 1];\n                                    if (!day) {\n                                        return <Box key={`outside-${column}-${isoWeekday}`} />;\n                                    }\n                                    const level = levelOf(day.value, thresholds);\n                                    return (\n                                        <Tooltip key={day.date} arrow disableInteractive\n                                                 title={`${formatDate(day.date)}: ${describeValue(day.value)}${day.detail ? ` · ${day.detail}` : ''}`}>\n                                            <Box sx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                                        </Tooltip>\n                                    );\n                                })}\n                            </Box>\n                        ))}\n                    </Box>\n                </Box>\n            )}\n\n            {!asTable && (\n                <Stack direction=\"row\" spacing={0.5} sx={{alignItems: 'center', justifyContent: 'flex-end', mt: 1}} aria-hidden=\"true\">\n                    <Typography variant=\"caption\" color=\"text.secondary\" sx={{mr: 0.5}}>{t('charts.less')}</Typography>\n                    {HEATMAP_LEVELS.map((level) => (\n                        <Box key={level} sx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                    ))}\n                    <Typography variant=\"caption\" color=\"text.secondary\" sx={{ml: 0.5}}>{t('charts.more')}</Typography>\n                </Stack>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarHeatmap.js","sources":["../../../src/ui/metrics/CalendarHeatmap.jsx"],"sourcesContent":["// Calendario de actividad: un cuadro por día, semanas en columnas (el de GitHub).\n//\n// Sirve para ver RITMO de un vistazo: qué días llegan cargas, si hubo semanas muertas, si la actividad crece. Las\n// reglas de visualización:\n//   - es MAGNITUD, así que va un solo tono de claro a oscuro (el del tono que se pida), en cuatro niveles más \"sin\n//     actividad\". Nunca un arcoíris. Se arma con color-mix sobre el color del tema (su variable CSS si el tema las usa),\n//     sin hexadecimales: en modo oscuro los mismos niveles se ven sobre su propia superficie;\n//   - los niveles se cortan por CUARTILES de los días con actividad (heatmapScale.js), no por valores fijos;\n//   - leyenda \"Menos → Más\", tooltip por día con el número exacto (el color solo nunca dice cuánto) y VISTA DE TABLA\n//     (para lector de pantalla, para quien no distingue el tono y para copiar los números).\n//\n// Sin librería a propósito: el Heatmap de MUI X Charts es de la edición Pro, que pide licencia.\n//\n// Textos por props y del paquete, y fechas con los formatos del paquete.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCalendarHeatmap con defaultProps y\n// styleOverrides de sus partes: header, toggle, tableArea, dateCell, valueCell, descriptionCell, gridArea, grid,\n// monthLabel, week, dayLabel, cell, legend, legendLess, legendCell, legendMore.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {HEATMAP_LEVELS, calendarWeeksOf, levelOf} from '@/ui/metrics/heatmapScale.js';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaCalendarHeatmap)\nconst THEME_NAME = 'CalcitaCalendarHeatmap';\nconst HeatmapHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst HeatmapToggle = piecePart(THEME_NAME, 'Toggle', Box);\nconst HeatmapTableArea = piecePart(THEME_NAME, 'TableArea', Box);\nconst HeatmapDateCell = piecePart(THEME_NAME, 'DateCell', TableCell);\nconst HeatmapValueCell = piecePart(THEME_NAME, 'ValueCell', TableCell);\nconst HeatmapDescriptionCell = piecePart(THEME_NAME, 'DescriptionCell', TableCell);\nconst HeatmapGridArea = piecePart(THEME_NAME, 'GridArea', Box);\nconst HeatmapGrid = piecePart(THEME_NAME, 'Grid', Box);\nconst HeatmapMonthLabel = piecePart(THEME_NAME, 'MonthLabel', Typography);\nconst HeatmapWeek = piecePart(THEME_NAME, 'Week', Box);\nconst HeatmapDayLabel = piecePart(THEME_NAME, 'DayLabel', Typography);\nconst HeatmapCell = piecePart(THEME_NAME, 'Cell', Box);\nconst HeatmapLegend = piecePart(THEME_NAME, 'Legend', Stack);\nconst HeatmapLegendLess = piecePart(THEME_NAME, 'LegendLess', Typography);\nconst HeatmapLegendCell = piecePart(THEME_NAME, 'LegendCell', Box);\nconst HeatmapLegendMore = piecePart(THEME_NAME, 'LegendMore', Typography);\n\n// cuadros de 12 px en teléfono (el calendario se desliza) y de 16 px desde md, donde el panel ocupa todo el ancho\nconst CELL_PIXELS = {xs: 12, md: 16};\nconst GAP_PIXELS = 3;\n// solo lunes, miércoles y viernes llevan rótulo: los siete encimados no se leen a 12 px\nconst LABELED_WEEKDAYS = new Set([1, 3, 5]);\n// porcentaje del tono en cada nivel; el nivel 0 es el gris de \"hover\" del tema\nconst LEVEL_TONE_PERCENT = {1: 30, 2: 55, 3: 78, 4: 100};\n\n/**\n * Relleno de un nivel con los colores del tema.\n *\n * @param {object} theme tema de MUI (con o sin variables CSS)\n * @param {string} tone primary, info, success...\n * @param {number} level 0 a 4\n * @returns {string} color CSS\n */\nfunction levelFill(theme, tone, level) {\n    // un tema con variables CSS las trae en theme.vars; el tema por omisión de MUI, solo en theme.palette\n    const {palette} = theme.vars ?? theme;\n    if (level === 0) {\n        return palette.action.hover;\n    }\n    return `color-mix(in srgb, ${palette[tone].main} ${LEVEL_TONE_PERCENT[level]}%, transparent)`;\n}\n\n/**\n * @param {object} props\n * @param {string} props.startsOn primer día del rango (\"2025-09-16\"), fecha de calendario\n * @param {string} props.endsOn último día del rango (\"2026-09-15\")\n * @param {Array<{date: string, value: number, detail?: string}>} props.days solo los días con actividad; el resto vale\n *     0\n * @param {string} props.ariaLabel qué muestra el calendario, ya traducido\n * @param {string} props.valueLabel encabezado de la columna de valor en la tabla (\"Registros leídos\")\n * @param {(value: number) => string} props.describeValue el valor en palabras para el tooltip (\"120 registros leídos\")\n * @param {import('react').ReactNode} [props.summary] renglón de resumen arriba del calendario\n * @param {string} [props.emptyLabel] qué decir si ningún día tiene actividad\n * @param {'primary'|'info'|'success'|'warning'|'error'} [props.tone]\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CalendarHeatmap(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaCalendarHeatmap.defaultProps) y encima lo que llega aquí\n    const {startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = 'primary', texts, defaultView = CHART_VIEW.chart, onViewChange} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatDate, formatMonthShortName, formatNumber, formatWeekdayShortName} = useFormatters();\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n\n    const {weeks, monthMarks, thresholds} = useMemo(() => calendarWeeksOf({startsOn, endsOn, days}), [startsOn, endsOn, days]);\n    const activeDays = days.filter((day) => day.value > 0);\n\n    return (\n        <Box>\n            <HeatmapHeader direction=\"row\" spacing={2} ownSx={{justifyContent: 'space-between', alignItems: 'center', mb: 1}}>\n                <Typography variant=\"body2\" color=\"text.secondary\">\n                    {activeDays.length ? summary : emptyLabel}\n                </Typography>\n                <HeatmapToggle ownSx={{flexShrink: 0}}>\n                    <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n                </HeatmapToggle>\n            </HeatmapHeader>\n\n            {asTable ? (\n                <HeatmapTableArea ownSx={{maxHeight: 260, overflowY: 'auto'}}>\n                    <Table size=\"small\" aria-label={ariaLabel}>\n                        <TableHead>\n                            <TableRow>\n                                <TableCell>{t('charts.day')}</TableCell>\n                                <TableCell align=\"right\">{valueLabel}</TableCell>\n                                <TableCell />\n                            </TableRow>\n                        </TableHead>\n                        <TableBody>\n                            {[...activeDays].reverse().map((day) => (\n                                <TableRow key={day.date}>\n                                    <HeatmapDateCell ownSx={{whiteSpace: 'nowrap'}}>{formatDate(day.date)}</HeatmapDateCell>\n                                    <HeatmapValueCell align=\"right\" ownSx={{fontVariantNumeric: 'tabular-nums'}}>{formatNumber(day.value)}</HeatmapValueCell>\n                                    <HeatmapDescriptionCell ownSx={{color: 'text.secondary'}}>{day.detail}</HeatmapDescriptionCell>\n                                </TableRow>\n                            ))}\n                        </TableBody>\n                    </Table>\n                </HeatmapTableArea>\n            ) : (\n                // el calendario no se encoge: en pantallas angostas se desliza y arranca mostrando lo más reciente\n                <HeatmapGridArea ownSx={{overflowX: 'auto', pb: 0.5}}\n                     ref={(node) => {\n                         if (node) {\n                             node.scrollLeft = node.scrollWidth;\n                         }\n                     }}>\n                    <HeatmapGrid role=\"img\" aria-label={ariaLabel}\n                         ownSx={{\n                             display: 'inline-grid',\n                             gridTemplateColumns: {\n                                 xs: `auto repeat(${weeks.length}, ${CELL_PIXELS.xs}px)`,\n                                 md: `auto repeat(${weeks.length}, ${CELL_PIXELS.md}px)`,\n                             },\n                             columnGap: `${GAP_PIXELS}px`,\n                             rowGap: `${GAP_PIXELS}px`,\n                             alignItems: 'center',\n                         }}>\n                        <Box />\n                        {monthMarks.map((month, column) => (\n                            <HeatmapMonthLabel key={`month-${column}`} variant=\"caption\" color=\"text.secondary\"\n                                        ownSx={{fontSize: 10, lineHeight: 1, whiteSpace: 'nowrap', overflow: 'visible', width: CELL_PIXELS}}>\n                                {month ? formatMonthShortName(month) : ''}\n                            </HeatmapMonthLabel>\n                        ))}\n                        {[1, 2, 3, 4, 5, 6, 7].map((isoWeekday) => (\n                            <HeatmapWeek key={`weekday-${isoWeekday}`} ownSx={{display: 'contents'}}>\n                                <HeatmapDayLabel variant=\"caption\" color=\"text.secondary\"\n                                            ownSx={{fontSize: 10, lineHeight: {xs: `${CELL_PIXELS.xs}px`, md: `${CELL_PIXELS.md}px`}, pr: 0.75}}>\n                                    {LABELED_WEEKDAYS.has(isoWeekday) ? formatWeekdayShortName(isoWeekday) : ''}\n                                </HeatmapDayLabel>\n                                {weeks.map((week, column) => {\n                                    const day = week[isoWeekday - 1];\n                                    if (!day) {\n                                        return <Box key={`outside-${column}-${isoWeekday}`} />;\n                                    }\n                                    const level = levelOf(day.value, thresholds);\n                                    return (\n                                        <Tooltip key={day.date} arrow disableInteractive\n                                                 title={`${formatDate(day.date)}: ${describeValue(day.value)}${day.detail ? ` · ${day.detail}` : ''}`}>\n                                            <HeatmapCell ownSx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                                        </Tooltip>\n                                    );\n                                })}\n                            </HeatmapWeek>\n                        ))}\n                    </HeatmapGrid>\n                </HeatmapGridArea>\n            )}\n\n            {!asTable && (\n                <HeatmapLegend direction=\"row\" spacing={0.5} ownSx={{alignItems: 'center', justifyContent: 'flex-end', mt: 1}} aria-hidden=\"true\">\n                    <HeatmapLegendLess variant=\"caption\" color=\"text.secondary\" ownSx={{mr: 0.5}}>{t('charts.less')}</HeatmapLegendLess>\n                    {HEATMAP_LEVELS.map((level) => (\n                        <HeatmapLegendCell key={level} ownSx={(theme) => ({width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: '3px', bgcolor: levelFill(theme, tone, level)})} />\n                    ))}\n                    <HeatmapLegendMore variant=\"caption\" color=\"text.secondary\" ownSx={{ml: 0.5}}>{t('charts.more')}</HeatmapLegendMore>\n                </HeatmapLegend>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/ChartTooltip.js

@@ -3,12 +3,16 @@ import { jsx } from "react/jsx-runtime";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import { isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaChartTooltip";
+const TooltipRoot = piecePart(THEME_NAME, "Root", Paper);
 const CHART_TOOLTIP_OPACITY = 0.92;
-function ChartTooltip({ active, payload, render }) {
+function ChartTooltip(props) {
+  const { active, payload, render } = usePieceProps(props, THEME_NAME);
   if (!active || !payload?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Paper, { elevation: 3, sx: [{ px: 1.5, py: 1, pointerEvents: "none" }, (theme) => isGlassTheme(theme) ? glassStylesOf(theme, { opacity: CHART_TOOLTIP_OPACITY }) : {}], children: /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "div", children: render(payload[0].payload) }) });
+  return /* @__PURE__ */ jsx(TooltipRoot, { elevation: 3, ownSx: [{ px: 1.5, py: 1, pointerEvents: "none" }, (theme) => isGlassTheme(theme) ? glassStylesOf(theme, { opacity: CHART_TOOLTIP_OPACITY }) : {}], children: /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "div", children: render(payload[0].payload) }) });
 }
 export {
   ChartTooltip as default

package/dist/ui/metrics/ChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.js","sources":["../../../src/ui/metrics/ChartTooltip.jsx"],"sourcesContent":["// El tooltip de las gráficas de Recharts con el look de la app. Se exporta para las gráficas propias del proyecto con\n// recharts (una de pastel, una de área): <Tooltip content={<ChartTooltip render={(row) => …} />} />.\n//\n// El de Recharts trae su propio estilo (fondo blanco, borde gris); este usa el Paper del tema y habla igual que los\n// tooltips del resto de la app (y se voltea solo cuando llegue el modo oscuro). Con el vidrio del tema\n// (createToolkitTheme({glass: true})) es de vidrio: flota sobre la gráfica.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\n\n// el vidrio del cuadrito, casi opaco (el material «grueso»): es para leer una cifra encima de la gráfica; con el vidrio de\n// los controles (60 %) se veía la barra de atrás a través del texto (lo reportaron)\nconst CHART_TOOLTIP_OPACITY = 0.92;\n\n/**\n * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props\n *     active y payload los pone recharts; render recibe el renglón de data del punto o la columna\n */\nexport default function ChartTooltip({active, payload, render}) {\n    // guard clause: Recharts lo monta siempre; solo se pinta sobre una barra\n    if (!active || !payload?.length) {\n        return null;\n    }\n    return (\n        <Paper elevation={3} sx={[{px: 1.5, py: 1, pointerEvents: 'none'}, (theme) => (isGlassTheme(theme) ? glassStylesOf(theme, {opacity: CHART_TOOLTIP_OPACITY}) : {})]}>\n            {/* div: el globo puede llevar varios renglones (una serie por renglón) */}\n            <Typography variant=\"body2\" component=\"div\">{render(payload[0].payload)}</Typography>\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;;AAeA,MAAM,wBAAwB;AAM9B,SAAwB,aAAa,EAAC,QAAQ,SAAS,UAAS;AAE5D,MAAI,CAAC,UAAU,CAAC,SAAS,QAAQ;AAC7B,WAAO;AAAA,EACX;AACA,6BACK,OAAA,EAAM,WAAW,GAAG,IAAI,CAAC,EAAC,IAAI,KAAK,IAAI,GAAG,eAAe,UAAS,CAAC,UAAW,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,SAAS,sBAAA,CAAsB,IAAI,EAAG,GAE7J,UAAA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,OAAO,UAAA,OAAO,QAAQ,CAAC,EAAE,OAAO,GAAE,GAC5E;AAER;"}
+{"version":3,"file":"ChartTooltip.js","sources":["../../../src/ui/metrics/ChartTooltip.jsx"],"sourcesContent":["// El tooltip de las gráficas de Recharts con el look de la app. Se exporta para las gráficas propias del proyecto con\n// recharts (una de pastel, una de área): <Tooltip content={<ChartTooltip render={(row) => …} />} />.\n//\n// El de Recharts trae su propio estilo (fondo blanco, borde gris); este usa el Paper del tema y habla igual que los\n// tooltips del resto de la app (y se voltea solo cuando llegue el modo oscuro). Con el vidrio del tema\n// (createToolkitTheme({glass: true})) es de vidrio: flota sobre la gráfica.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaChartTooltip con defaultProps y\n// styleOverrides de sus partes: root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaChartTooltip)\nconst THEME_NAME = 'CalcitaChartTooltip';\nconst TooltipRoot = piecePart(THEME_NAME, 'Root', Paper);\n\n// el vidrio del cuadrito, casi opaco (el material «grueso»): es para leer una cifra encima de la gráfica; con el vidrio de\n// los controles (60 %) se veía la barra de atrás a través del texto (lo reportaron)\nconst CHART_TOOLTIP_OPACITY = 0.92;\n\n/**\n * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props\n *     active y payload los pone recharts; render recibe el renglón de data del punto o la columna\n */\nexport default function ChartTooltip(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaChartTooltip.defaultProps) y encima lo que llega aquí\n    const {active, payload, render} = usePieceProps(props, THEME_NAME);\n    // guard clause: Recharts lo monta siempre; solo se pinta sobre una barra\n    if (!active || !payload?.length) {\n        return null;\n    }\n    return (\n        <TooltipRoot elevation={3} ownSx={[{px: 1.5, py: 1, pointerEvents: 'none'}, (theme) => (isGlassTheme(theme) ? glassStylesOf(theme, {opacity: CHART_TOOLTIP_OPACITY}) : {})]}>\n            {/* div: el globo puede llevar varios renglones (una serie por renglón) */}\n            <Typography variant=\"body2\" component=\"div\">{render(payload[0].payload)}</Typography>\n        </TooltipRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,KAAK;AAIvD,MAAM,wBAAwB;AAM9B,SAAwB,aAAa,OAAO;AAExC,QAAM,EAAC,QAAQ,SAAS,WAAU,cAAc,OAAO,UAAU;AAEjE,MAAI,CAAC,UAAU,CAAC,SAAS,QAAQ;AAC7B,WAAO;AAAA,EACX;AACA,6BACK,aAAA,EAAY,WAAW,GAAG,OAAO,CAAC,EAAC,IAAI,KAAK,IAAI,GAAG,eAAe,UAAS,CAAC,UAAW,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,SAAS,sBAAA,CAAsB,IAAI,EAAG,GAEtK,UAAA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,OAAO,UAAA,OAAO,QAAQ,CAAC,EAAE,OAAO,GAAE,GAC5E;AAER;"}

package/dist/ui/metrics/ColumnChart.js

@@ -9,24 +9,28 @@ import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import ChartTooltip from "./ChartTooltip.js";
 import TableToggle, { CHART_VIEW } from "./TableToggle.js";
 import { useChartColors, resolvedSeriesOf, highestValueOf, ChartTable, valueAxisWidthOf, ChartLegend, ReferenceCaption } from "./chartParts.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaColumnChart";
+const ColumnChartPart = piecePart(THEME_NAME, "Chart", Box);
 const SINGLE_SERIES_KEY = "value";
-function ColumnChart({
-  data,
-  periodLabel,
-  valueLabel,
-  series,
-  ariaLabel,
-  emptyLabel,
-  height = 220,
-  tone = "primary",
-  onSelect,
-  formatValue: formatValueProp,
-  referenceLine,
-  renderTooltip,
-  texts,
-  defaultView = CHART_VIEW.chart,
-  onViewChange
-}) {
+function ColumnChart(props) {
+  const {
+    data,
+    periodLabel,
+    valueLabel,
+    series,
+    ariaLabel,
+    emptyLabel,
+    height = 220,
+    tone = "primary",
+    onSelect,
+    formatValue: formatValueProp,
+    referenceLine,
+    renderTooltip,
+    texts,
+    defaultView = CHART_VIEW.chart,
+    onViewChange
+  } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("common", texts);
   const { formatNumber } = useFormatters();
   const formatValue = formatValueProp ?? formatNumber;
@@ -52,7 +56,7 @@ function ColumnChart({
   ] }));
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: toggleView, texts }),
-    asTable ? /* @__PURE__ */ jsx(ChartTable, { data, series: drawnSeries, periodLabel, formatValue, height }) : /* @__PURE__ */ jsx(Box, { role: "img", "aria-label": ariaLabel, sx: { height, color: `${tone}.main` }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { top: 8, right: 8, bottom: 0, left: -8 }, barCategoryGap: 4, children: [
+    asTable ? /* @__PURE__ */ jsx(ChartTable, { data, series: drawnSeries, periodLabel, formatValue, height }) : /* @__PURE__ */ jsx(ColumnChartPart, { role: "img", "aria-label": ariaLabel, ownSx: { height, color: `${tone}.main` }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { top: 8, right: 8, bottom: 0, left: -8 }, barCategoryGap: 4, children: [
       /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: colors.grid }),
       /* @__PURE__ */ jsx(
         XAxis,

package/dist/ui/metrics/ColumnChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnChart.js","sources":["../../../src/ui/metrics/ColumnChart.jsx"],"sourcesContent":["// Columnas a lo largo del tiempo (p. ej. registros leídos por mes), dibujadas con Recharts: una serie (data con `value`) o\n// varias agrupadas por periodo (`series`, cada una con su llave en data: ventas y devoluciones por mes).\n//\n// Recharts y no SVG a mano: ejes, escalas, rótulos que no se encimen y el tooltip ya los resolvió la librería. Lo que se\n// decide aquí son las reglas de visualización:\n//   - una serie → un color (el del tono vía currentColor) y SIN leyenda: el título ya dice qué es; varias → cada una su color\n//     y leyenda abajo (chartParts.jsx, lo que comparte con LineChart);\n//   - columnas de 28 px como máximo, punta redondeada, base cuadrada;\n//   - rejilla horizontal de 1 px, sólida y recesiva; el texto de los ejes en tinta secundaria;\n//   - tooltip por columna y VISTA DE TABLA;\n//   - una línea de referencia opcional (p. ej. la meta), punteada y en tinta secundaria: se lee sin competir con las\n//     columnas, y el eje crece lo necesario para que siempre se vea. Su rótulo va debajo de la gráfica y no sobre la\n//     línea, donde se encimaba con la columna del último mes; así también lo lee quien ve la tabla.\n//\n// El valor se escribe con formatValue (por omisión, número con separador de miles): con él una serie puede ir en\n// porcentaje. El eje mide lo que mide su número más largo, para que «2,500,000» no salga cortado.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\n\n// la llave del valor cuando la gráfica es de una sola serie\nconst SINGLE_SERIES_KEY = 'value';\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, value, tooltip?} con una serie, o\n *     {key, label, [llave de cada serie]: número} con varias\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} [props.valueLabel] cómo se llama lo que se cuenta, ya traducido (una serie)\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info'}>} [props.series]\n *     varias series agrupadas: la llave de cada una en data, su nombre ya traducido y su color (por omisión, en orden)\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone] el color de una sola serie\n * @param {(item: any, seriesKey: string) => void} [props.onSelect] recibe el renglón de data que se picó y la serie\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el\n *     tooltip)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia con su rótulo ya traducido («Meta:\n *     10 %»)\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function ColumnChart({\n    data, periodLabel, valueLabel, series, ariaLabel, emptyLabel, height = 220, tone = 'primary', onSelect, formatValue: formatValueProp,\n    referenceLine, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const isSingleSeries = !series?.length;\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(isSingleSeries ? [{key: SINGLE_SERIES_KEY, label: valueLabel, tone}] : series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // el valor más alto que se dibuja (el de las columnas o el de la línea de referencia) decide el ancho del eje\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    const tooltipOf = renderTooltip ?? ((row) => (isSingleSeries\n        ? row.tooltip ?? `${row.label}: ${formatValue(row.value)}`\n        : (\n            <>\n                <strong>{row.label}</strong>\n                {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n            </>\n        )));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <Box role=\"img\" aria-label={ariaLabel} sx={{height, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data} margin={{top: 8, right: 8, bottom: 0, left: -8}} barCategoryGap={4}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{fill: colors.hover}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                // extendDomain: si la referencia queda arriba de todas las columnas, el eje crece hasta ella\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                // una serie: currentColor (el tono de la caja); varias: el color de cada una\n                                <Bar key={item.key} dataKey={item.key} fill={isSingleSeries ? 'currentColor' : item.color} maxBarSize={28}\n                                     radius={[4, 4, 0, 0]} isAnimationActive={false} cursor={onSelect ? 'pointer' : 'default'}\n                                     onClick={onSelect ? (entry) => onSelect(entry.payload, item.key) : undefined} />\n                            ))}\n                        </BarChart>\n                    </ResponsiveContainer>\n                </Box>\n            )}\n            <ChartLegend series={drawnSeries} ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnChart.js","sources":["../../../src/ui/metrics/ColumnChart.jsx"],"sourcesContent":["// Columnas a lo largo del tiempo (p. ej. registros leídos por mes), dibujadas con Recharts: una serie (data con `value`) o\n// varias agrupadas por periodo (`series`, cada una con su llave en data: ventas y devoluciones por mes).\n//\n// Recharts y no SVG a mano: ejes, escalas, rótulos que no se encimen y el tooltip ya los resolvió la librería. Lo que se\n// decide aquí son las reglas de visualización:\n//   - una serie → un color (el del tono vía currentColor) y SIN leyenda: el título ya dice qué es; varias → cada una su color\n//     y leyenda abajo (chartParts.jsx, lo que comparte con LineChart);\n//   - columnas de 28 px como máximo, punta redondeada, base cuadrada;\n//   - rejilla horizontal de 1 px, sólida y recesiva; el texto de los ejes en tinta secundaria;\n//   - tooltip por columna y VISTA DE TABLA;\n//   - una línea de referencia opcional (p. ej. la meta), punteada y en tinta secundaria: se lee sin competir con las\n//     columnas, y el eje crece lo necesario para que siempre se vea. Su rótulo va debajo de la gráfica y no sobre la\n//     línea, donde se encimaba con la columna del último mes; así también lo lee quien ve la tabla.\n//\n// El valor se escribe con formatValue (por omisión, número con separador de miles): con él una serie puede ir en\n// porcentaje. El eje mide lo que mide su número más largo, para que «2,500,000» no salga cortado.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColumnChart con defaultProps y\n// styleOverrides de sus partes: chart.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColumnChart)\nconst THEME_NAME = 'CalcitaColumnChart';\nconst ColumnChartPart = piecePart(THEME_NAME, 'Chart', Box);\n\n// la llave del valor cuando la gráfica es de una sola serie\nconst SINGLE_SERIES_KEY = 'value';\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, value, tooltip?} con una serie, o\n *     {key, label, [llave de cada serie]: número} con varias\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} [props.valueLabel] cómo se llama lo que se cuenta, ya traducido (una serie)\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info'}>} [props.series]\n *     varias series agrupadas: la llave de cada una en data, su nombre ya traducido y su color (por omisión, en orden)\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone] el color de una sola serie\n * @param {(item: any, seriesKey: string) => void} [props.onSelect] recibe el renglón de data que se picó y la serie\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el\n *     tooltip)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia con su rótulo ya traducido («Meta:\n *     10 %»)\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function ColumnChart(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColumnChart.defaultProps) y encima lo que llega aquí\n    const {\n    data, periodLabel, valueLabel, series, ariaLabel, emptyLabel, height = 220, tone = 'primary', onSelect, formatValue: formatValueProp,\n    referenceLine, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const isSingleSeries = !series?.length;\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(isSingleSeries ? [{key: SINGLE_SERIES_KEY, label: valueLabel, tone}] : series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // el valor más alto que se dibuja (el de las columnas o el de la línea de referencia) decide el ancho del eje\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    const tooltipOf = renderTooltip ?? ((row) => (isSingleSeries\n        ? row.tooltip ?? `${row.label}: ${formatValue(row.value)}`\n        : (\n            <>\n                <strong>{row.label}</strong>\n                {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n            </>\n        )));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <ColumnChartPart role=\"img\" aria-label={ariaLabel} ownSx={{height, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data} margin={{top: 8, right: 8, bottom: 0, left: -8}} barCategoryGap={4}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{fill: colors.hover}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                // extendDomain: si la referencia queda arriba de todas las columnas, el eje crece hasta ella\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                // una serie: currentColor (el tono de la caja); varias: el color de cada una\n                                <Bar key={item.key} dataKey={item.key} fill={isSingleSeries ? 'currentColor' : item.color} maxBarSize={28}\n                                     radius={[4, 4, 0, 0]} isAnimationActive={false} cursor={onSelect ? 'pointer' : 'default'}\n                                     onClick={onSelect ? (entry) => onSelect(entry.payload, item.key) : undefined} />\n                            ))}\n                        </BarChart>\n                    </ResponsiveContainer>\n                </ColumnChartPart>\n            )}\n            <ChartLegend series={drawnSeries} ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/LineChart.js

@@ -9,24 +9,28 @@ import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import ChartTooltip from "./ChartTooltip.js";
 import TableToggle, { CHART_VIEW } from "./TableToggle.js";
 import { useChartColors, resolvedSeriesOf, highestValueOf, ChartTable, valueAxisWidthOf, ChartLegend, ReferenceCaption } from "./chartParts.js";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaLineChart";
+const LineChartPart = piecePart(THEME_NAME, "Chart", Box);
 const LINE_WIDTH_PIXELS = 2;
 const DOT_RADIUS_PIXELS = 3;
 const ACTIVE_DOT_RADIUS_PIXELS = 5;
-function LineChart({
-  data,
-  series,
-  periodLabel,
-  ariaLabel,
-  emptyLabel,
-  height = 220,
-  formatValue: formatValueProp,
-  referenceLine,
-  onSelect,
-  renderTooltip,
-  texts,
-  defaultView = CHART_VIEW.chart,
-  onViewChange
-}) {
+function LineChart(props) {
+  const {
+    data,
+    series,
+    periodLabel,
+    ariaLabel,
+    emptyLabel,
+    height = 220,
+    formatValue: formatValueProp,
+    referenceLine,
+    onSelect,
+    renderTooltip,
+    texts,
+    defaultView = CHART_VIEW.chart,
+    onViewChange
+  } = usePieceProps(props, THEME_NAME);
   const { t } = useToolkitTranslation("common", texts);
   const { formatNumber } = useFormatters();
   const formatValue = formatValueProp ?? formatNumber;
@@ -57,7 +61,7 @@ function LineChart({
   ] }));
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: toggleView, texts }),
-    asTable ? /* @__PURE__ */ jsx(ChartTable, { data, series: drawnSeries, periodLabel, formatValue, height }) : /* @__PURE__ */ jsx(Box, { role: "img", "aria-label": ariaLabel, sx: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+    asTable ? /* @__PURE__ */ jsx(ChartTable, { data, series: drawnSeries, periodLabel, formatValue, height }) : /* @__PURE__ */ jsx(LineChartPart, { role: "img", "aria-label": ariaLabel, ownSx: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
       LineChart$1,
       {
         data,

package/dist/ui/metrics/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../src/ui/metrics/LineChart.jsx"],"sourcesContent":["// Líneas a lo largo del tiempo, de una serie o de varias que se comparan (ventas contra devoluciones, este año contra el\n// pasado), dibujadas con Recharts. Lo que comparte con ColumnChart (ejes, tabla, leyenda, línea de referencia) vive en\n// chartParts.jsx.\n//\n// Las reglas de la guía de Apple (HIG «Charts» y «Charting data»):\n//   - líneas para ver la tendencia; columnas (ColumnChart) para comparar periodos sueltos;\n//   - cada serie con su color Y su trazo (continuo, rayado, punteado), con su punto en cada periodo: el color no va solo;\n//   - una serie sin leyenda (el título ya dice qué es); varias, con leyenda abajo; toda gráfica con su vista de tabla;\n//   - el globo de un periodo dice el valor de cada serie.\n//\n//   <LineChart data={[{key: '2026-4', label: 'abr', sales: 120, returns: 8}, …]} periodLabel=\"Mes\"\n//              series={[{key: 'sales', label: 'Ventas'}, {key: 'returns', label: 'Devoluciones', tone: 'error'}]}\n//              ariaLabel=\"Ventas y devoluciones por mes\" emptyLabel=\"Sin datos\" />\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {CartesianGrid, Line, LineChart as RechartsLineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\n\n// el grueso de la línea y el tamaño de su punto (px): se ven en el teléfono sin tapar a la vecina\nconst LINE_WIDTH_PIXELS = 2;\nconst DOT_RADIUS_PIXELS = 3;\nconst ACTIVE_DOT_RADIUS_PIXELS = 5;\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, [llave de cada serie]: número}\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info', dash?: string}>} props.series\n *     la llave de cada serie en data, su nombre ya traducido, su color y su trazo (por omisión, en orden)\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el globo)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia (la meta) con su rótulo ya traducido\n * @param {(row: any) => void} [props.onSelect] recibe el renglón de data del periodo que se picó\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function LineChart({\n    data, series, periodLabel, ariaLabel, emptyLabel, height = 220, formatValue: formatValueProp, referenceLine, onSelect, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    // el periodo que se picó: recharts da su posición en data (a veces como texto)\n    const selectPeriodAt = (activeIndex) => {\n        const row = data[Number(activeIndex)];\n        if (row) {\n            onSelect(row);\n        }\n    };\n    const tooltipOf = renderTooltip ?? ((row) => (\n        <>\n            <strong>{row.label}</strong>\n            {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n        </>\n    ));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <Box role=\"img\" aria-label={ariaLabel} sx={{height}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        {/* OJO: recharts 3 avisa el clic con el índice del periodo (activeIndex), ya no con activePayload (el de\n                            la versión 2) */}\n                        <RechartsLineChart data={data} margin={{top: 8, right: 12, bottom: 0, left: -8}}\n                                           onClick={onSelect ? (state) => selectPeriodAt(state?.activeIndex) : undefined}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{stroke: colors.grid}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                <Line key={item.key} type=\"monotone\" dataKey={item.key} name={item.label} stroke={item.color}\n                                      strokeWidth={LINE_WIDTH_PIXELS} strokeDasharray={item.dash} isAnimationActive={false}\n                                      dot={{r: DOT_RADIUS_PIXELS, fill: item.color, strokeWidth: 0}}\n                                      activeDot={{r: ACTIVE_DOT_RADIUS_PIXELS, cursor: onSelect ? 'pointer' : 'default'}} />\n                            ))}\n                        </RechartsLineChart>\n                    </ResponsiveContainer>\n                </Box>\n            )}\n            <ChartLegend series={drawnSeries} showsDash ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":["RechartsLineChart"],"mappings":"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"}
+{"version":3,"file":"LineChart.js","sources":["../../../src/ui/metrics/LineChart.jsx"],"sourcesContent":["// Líneas a lo largo del tiempo, de una serie o de varias que se comparan (ventas contra devoluciones, este año contra el\n// pasado), dibujadas con Recharts. Lo que comparte con ColumnChart (ejes, tabla, leyenda, línea de referencia) vive en\n// chartParts.jsx.\n//\n// Las reglas de la guía de Apple (HIG «Charts» y «Charting data»):\n//   - líneas para ver la tendencia; columnas (ColumnChart) para comparar periodos sueltos;\n//   - cada serie con su color Y su trazo (continuo, rayado, punteado), con su punto en cada periodo: el color no va solo;\n//   - una serie sin leyenda (el título ya dice qué es); varias, con leyenda abajo; toda gráfica con su vista de tabla;\n//   - el globo de un periodo dice el valor de cada serie.\n//\n//   <LineChart data={[{key: '2026-4', label: 'abr', sales: 120, returns: 8}, …]} periodLabel=\"Mes\"\n//              series={[{key: 'sales', label: 'Ventas'}, {key: 'returns', label: 'Devoluciones', tone: 'error'}]}\n//              ariaLabel=\"Ventas y devoluciones por mes\" emptyLabel=\"Sin datos\" />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaLineChart con defaultProps y\n// styleOverrides de sus partes: chart.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport {CartesianGrid, Line, LineChart as RechartsLineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle, {CHART_VIEW} from '@/ui/metrics/TableToggle.jsx';\nimport {\n    ChartLegend, ChartTable, ReferenceCaption, highestValueOf, resolvedSeriesOf, useChartColors, valueAxisWidthOf,\n} from '@/ui/metrics/chartParts.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaLineChart)\nconst THEME_NAME = 'CalcitaLineChart';\nconst LineChartPart = piecePart(THEME_NAME, 'Chart', Box);\n\n// el grueso de la línea y el tamaño de su punto (px): se ven en el teléfono sin tapar a la vecina\nconst LINE_WIDTH_PIXELS = 2;\nconst DOT_RADIUS_PIXELS = 3;\nconst ACTIVE_DOT_RADIUS_PIXELS = 5;\n\n/**\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, [llave de cada serie]: número}\n * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info', dash?: string}>} props.series\n *     la llave de cada serie en data, su nombre ya traducido, su color y su trazo (por omisión, en orden)\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el globo)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia (la meta) con su rótulo ya traducido\n * @param {(row: any) => void} [props.onSelect] recibe el renglón de data del periodo que se picó\n * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su\n *     nombre y el valor de cada serie\n * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada\n * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}\n */\nexport default function LineChart(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaLineChart.defaultProps) y encima lo que llega aquí\n    const {\n    data, series, periodLabel, ariaLabel, emptyLabel, height = 220, formatValue: formatValueProp, referenceLine, onSelect, renderTooltip, texts, defaultView = CHART_VIEW.chart, onViewChange,\n} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatNumber} = useFormatters();\n    const formatValue = formatValueProp ?? formatNumber;\n    const [asTable, setAsTable] = useState(defaultView === CHART_VIEW.table);\n    const toggleView = () => {\n        setAsTable(!asTable);\n        onViewChange?.(asTable ? CHART_VIEW.chart : CHART_VIEW.table);\n    };\n    const colors = useChartColors();\n    const drawnSeries = resolvedSeriesOf(series, colors.palette);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    const highestValue = highestValueOf(data, drawnSeries, referenceLine);\n    // el periodo que se picó: recharts da su posición en data (a veces como texto)\n    const selectPeriodAt = (activeIndex) => {\n        const row = data[Number(activeIndex)];\n        if (row) {\n            onSelect(row);\n        }\n    };\n    const tooltipOf = renderTooltip ?? ((row) => (\n        <>\n            <strong>{row.label}</strong>\n            {drawnSeries.map((item) => <Box key={item.key}>{item.label}: {formatValue(row[item.key])}</Box>)}\n        </>\n    ));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={toggleView} texts={texts} />\n            {asTable ? (\n                <ChartTable data={data} series={drawnSeries} periodLabel={periodLabel} formatValue={formatValue} height={height} />\n            ) : (\n                <LineChartPart role=\"img\" aria-label={ariaLabel} ownSx={{height}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        {/* OJO: recharts 3 avisa el clic con el índice del periodo (activeIndex), ya no con activePayload (el de\n                            la versión 2) */}\n                        <RechartsLineChart data={data} margin={{top: 8, right: 12, bottom: 0, left: -8}}\n                                           onClick={onSelect ? (state) => selectPeriodAt(state?.activeIndex) : undefined}>\n                            <CartesianGrid vertical={false} stroke={colors.grid} />\n                            <XAxis dataKey=\"label\" tick={colors.axisText} tickLine={false} axisLine={{stroke: colors.grid}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={colors.axisText} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{stroke: colors.grid}} content={<ChartTooltip render={tooltipOf} />} />\n                            {referenceLine && (\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={colors.axis} strokeDasharray=\"4 4\" />\n                            )}\n                            {drawnSeries.map((item) => (\n                                <Line key={item.key} type=\"monotone\" dataKey={item.key} name={item.label} stroke={item.color}\n                                      strokeWidth={LINE_WIDTH_PIXELS} strokeDasharray={item.dash} isAnimationActive={false}\n                                      dot={{r: DOT_RADIUS_PIXELS, fill: item.color, strokeWidth: 0}}\n                                      activeDot={{r: ACTIVE_DOT_RADIUS_PIXELS, cursor: onSelect ? 'pointer' : 'default'}} />\n                            ))}\n                        </RechartsLineChart>\n                    </ResponsiveContainer>\n                </LineChartPart>\n            )}\n            <ChartLegend series={drawnSeries} showsDash ariaLabel={t('charts.legend')} />\n            <ReferenceCaption referenceLine={referenceLine} />\n        </Box>\n    );\n}\n"],"names":["RechartsLineChart"],"mappings":"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"}

package/dist/ui/metrics/MetricCard.js

@@ -11,6 +11,8 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { alpha } from "@mui/material/styles";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { lightDarkStylesOf } from "../../theme/lightDarkStyles.js";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import RemoveIcon from "@mui/icons-material/Remove";
 const TONES = ["info", "success", "warning", "error"];
@@ -23,6 +25,16 @@ const TREND_ICONS = Object.freeze({
 const TITLE_ROW_MIN_HEIGHT_PIXELS = 24;
 const ICON_BOX_PIXELS = 28;
 const ICON_PIXELS = 18;
+const THEME_NAME = "CalcitaMetricCard";
+const CardRoot = piecePart(THEME_NAME, "Root", Paper);
+const CardAction = piecePart(THEME_NAME, "Action", CardActionArea);
+const CardHeader = piecePart(THEME_NAME, "Header", Stack);
+const CardIcon = piecePart(THEME_NAME, "Icon", Box);
+const CardLabel = piecePart(THEME_NAME, "Label", Typography);
+const CardValue = piecePart(THEME_NAME, "Value", Typography);
+const CardCaption = piecePart(THEME_NAME, "Caption", Typography);
+const CardExtra = piecePart(THEME_NAME, "Extra", Box);
+const CardTrend = piecePart(THEME_NAME, "Trend", Chip);
 function TrendChip({ trend, texts }) {
   const { t } = useToolkitTranslation("metricCard", texts);
   const direction = TREND_ICONS[trend.direction] ? trend.direction : TREND_DIRECTION.flat;
@@ -30,7 +42,7 @@ function TrendChip({ trend, texts }) {
   const isGood = trend.isGood ?? direction === TREND_DIRECTION.up;
   const color = direction === TREND_DIRECTION.flat ? "default" : isGood ? "success" : "error";
   return /* @__PURE__ */ jsx(
-    Chip,
+    CardTrend,
     {
       size: "small",
       color,
@@ -38,30 +50,31 @@ function TrendChip({ trend, texts }) {
       icon: /* @__PURE__ */ jsx(TrendIcon, {}),
       label: trend.label,
       "aria-label": `${t(`trend.${direction}`)} ${trend.label}`,
-      sx: { fontWeight: 600, "& .MuiChip-icon": { fontSize: 16 } }
+      ownSx: { fontWeight: 600, "& .MuiChip-icon": { fontSize: 16 } }
     }
   );
 }
-function MetricCard({
-  label,
-  value,
-  caption,
-  tone = "info",
-  valueColor,
-  isLoading = false,
-  to,
-  trend,
-  icon,
-  children,
-  onClick,
-  texts
-}) {
+function MetricCard(props) {
+  const {
+    label,
+    value,
+    caption,
+    tone = "info",
+    valueColor,
+    isLoading = false,
+    to,
+    trend,
+    icon,
+    children,
+    onClick,
+    texts
+  } = usePieceProps(props, THEME_NAME);
   const { Link } = useToolkitNavigation();
   const paletteTone = TONES.includes(tone) ? tone : "info";
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center", justifyContent: "space-between", minHeight: TITLE_ROW_MIN_HEIGHT_PIXELS }, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { direction: "row", spacing: 1, ownSx: { alignItems: "center", justifyContent: "space-between", minHeight: TITLE_ROW_MIN_HEIGHT_PIXELS }, children: [
       /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center", minWidth: 0 }, children: [
-        icon && /* @__PURE__ */ jsx(Box, { "aria-hidden": "true", sx: (theme) => ({
+        icon && /* @__PURE__ */ jsx(CardIcon, { "aria-hidden": "true", ownSx: (theme) => ({
           width: ICON_BOX_PIXELS,
           height: ICON_BOX_PIXELS,
           flexShrink: 0,
@@ -73,22 +86,27 @@ function MetricCard({
           // el tono al 14 %: se distingue del papel sin competir con la cifra
           backgroundColor: theme.vars ? `rgba(${theme.vars.palette[paletteTone].mainChannel} / 0.14)` : alpha(theme.palette[paletteTone].main, 0.14)
         }), children: icon }),
-        /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", component: "p", sx: { minWidth: 0 }, children: label })
+        /* @__PURE__ */ jsx(CardLabel, { variant: "overline", color: "text.secondary", component: "p", ownSx: { minWidth: 0 }, children: label })
       ] }),
       trend && !isLoading && /* @__PURE__ */ jsx(TrendChip, { trend, texts })
     ] }),
-    /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "p", sx: { mt: 0.75, fontWeight: 600, fontVariantNumeric: "tabular-nums", color: valueColor ?? `${paletteTone}.dark` }, children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 120 }) : value }),
-    caption && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", sx: { mt: 0.5 }, children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 160 }) : caption }),
-    children && /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5 }, children })
+    /* @__PURE__ */ jsx(CardValue, { variant: "h5", component: "p", ownSx: (theme) => ({
+      mt: 0.75,
+      fontWeight: 600,
+      fontVariantNumeric: "tabular-nums",
+      ...valueColor ? { color: valueColor } : lightDarkStylesOf(theme, { color: (theme.vars ?? theme).palette[paletteTone].dark }, { color: (theme.vars ?? theme).palette[paletteTone].light })
+    }), children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 120 }) : value }),
+    caption && /* @__PURE__ */ jsx(CardCaption, { variant: "caption", color: "text.secondary", component: "p", ownSx: { mt: 0.5 }, children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 160 }) : caption }),
+    children && /* @__PURE__ */ jsx(CardExtra, { ownSx: { mt: 1.5 }, children })
   ] });
   const isClickable = Boolean(to || onClick);
-  return /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: {
+  return /* @__PURE__ */ jsx(CardRoot, { variant: "outlined", ownSx: {
     borderTop: 3,
     borderTopColor: `${paletteTone}.light`,
     height: "100%",
     overflow: "hidden",
     ...isClickable ? {} : { p: 2.5 }
-  }, children: isClickable ? /* @__PURE__ */ jsx(CardActionArea, { ...to ? { component: Link, to } : { onClick }, sx: { p: 2.5, height: "100%", alignItems: "flex-start", display: "block" }, children: content }) : content });
+  }, children: isClickable ? /* @__PURE__ */ jsx(CardAction, { ...to ? { component: Link, to } : { onClick }, ownSx: { p: 2.5, height: "100%", alignItems: "flex-start", display: "block" }, children: content }) : content });
 }
 export {
   TREND_DIRECTION,