@stackcraftmx/calcita 0.31.0 → 0.32.1

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// 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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"}
+{"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';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.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    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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

@@ -15,6 +15,7 @@ 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";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const TONES = ["info", "success", "warning", "error"];
 const TREND_DIRECTION = Object.freeze({ up: "up", down: "down", flat: "flat" });
 const TREND_ICONS = Object.freeze({
@@ -67,8 +68,10 @@ function MetricCard(props) {
     icon,
     children,
     onClick,
-    texts
+    texts,
+    ...unknownProps
   } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { Link } = useToolkitNavigation();
   const paletteTone = TONES.includes(tone) ? tone : "info";
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.js","sources":["../../../src/ui/metrics/MetricCard.jsx"],"sourcesContent":["// Tarjeta de métrica: etiqueta en versalitas, número grande (h5 en seminegritas, con cifras del mismo ancho) y una nota abajo, con un borde superior de\n// color según el tono (p. ej. REGISTROS LEÍDOS / ÍNTEGROS / DESCARTADOS).\n//\n// Con `to` la tarjeta entera es una liga a la pantalla que explica el número, ya filtrada: un KPI que no lleva a\n// ningún lado obliga a buscar a mano de dónde salió.\n//\n// Con `trend` lleva junto al número cuánto cambió contra el periodo anterior («▲ 12 %», como los tableros de MUI). El\n// color dice si es bueno o malo, no si subió: más cancelaciones es subir y es malo (isGood: false). La flecha y el texto\n// oculto dicen la dirección, para quien no distingue el color.\n//\n// Se extiende sin tocar el framework: un ícono junto al título (icon, del color del tono en un cuadro suave, como los\n// resúmenes de Salud de Apple), contenido propio debajo de la nota (children: una barra de avance, un desglose), onClick\n// cuando no lleva a otra pantalla, y texts para los textos de la tendencia.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMetricCard con defaultProps y\n// styleOverrides de sus partes: root, action, header, icon, label, value, caption, extra y trend.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport CardActionArea from '@mui/material/CardActionArea';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport {alpha} from '@mui/material/styles';\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\n\nconst TONES = ['info', 'success', 'warning', 'error'];\n\n/** Hacia dónde se movió el número. */\nexport const TREND_DIRECTION = Object.freeze({up: 'up', down: 'down', flat: 'flat'});\n\nconst TREND_ICONS = Object.freeze({\n    [TREND_DIRECTION.up]: ArrowUpwardIcon,\n    [TREND_DIRECTION.down]: ArrowDownwardIcon,\n    [TREND_DIRECTION.flat]: RemoveIcon,\n});\n\n// el renglón del título: del alto de la píldora de tendencia, para que las tarjetas con y sin tendencia queden parejas\nconst TITLE_ROW_MIN_HEIGHT_PIXELS = 24;\n// el cuadro del ícono junto al título y el tamaño del ícono adentro (px)\nconst ICON_BOX_PIXELS = 28;\nconst ICON_PIXELS = 18;\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaMetricCard)\nconst THEME_NAME = 'CalcitaMetricCard';\nconst CardRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst CardAction = piecePart(THEME_NAME, 'Action', CardActionArea);\nconst CardHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst CardIcon = piecePart(THEME_NAME, 'Icon', Box);\nconst CardLabel = piecePart(THEME_NAME, 'Label', Typography);\nconst CardValue = piecePart(THEME_NAME, 'Value', Typography);\nconst CardCaption = piecePart(THEME_NAME, 'Caption', Typography);\nconst CardExtra = piecePart(THEME_NAME, 'Extra', Box);\nconst CardTrend = piecePart(THEME_NAME, 'Trend', Chip);\n\n/**\n * El cambio contra el periodo anterior: verde si es bueno, rojo si es malo, gris si no cambió.\n *\n * @param {{trend: {label: string, direction: string, isGood?: boolean}, texts?: object}} props\n */\nfunction TrendChip({trend, texts}) {\n    const {t} = useToolkitTranslation('metricCard', texts);\n    const direction = TREND_ICONS[trend.direction] ? trend.direction : TREND_DIRECTION.flat;\n    const TrendIcon = TREND_ICONS[direction];\n    // por omisión subir es bueno; quien cuente algo malo (cancelaciones, quejas) lo dice con isGood\n    const isGood = trend.isGood ?? direction === TREND_DIRECTION.up;\n    const color = direction === TREND_DIRECTION.flat ? 'default' : (isGood ? 'success' : 'error');\n    return (\n        <CardTrend size=\"small\" color={color} variant=\"outlined\" icon={<TrendIcon />} label={trend.label}\n                   aria-label={`${t(`trend.${direction}`)} ${trend.label}`} ownSx={{fontWeight: 600, '& .MuiChip-icon': {fontSize: 16}}} />\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} props.label texto ya traducido\n * @param {import('react').ReactNode} props.value ya formateado (formatNumber)\n * @param {import('react').ReactNode} [props.caption]\n * @param {'info'|'success'|'warning'|'error'} [props.tone]\n * @param {string} [props.valueColor] color del número si no debe ir del tono (p. ej. un total en texto normal)\n * @param {boolean} [props.isLoading]\n * @param {string} [props.to] ruta interna a la que lleva la tarjeta\n * @param {{label: string, direction: 'up'|'down'|'flat', isGood?: boolean}} [props.trend] cuánto cambió (TREND_DIRECTION)\n * @param {import('react').ReactNode} [props.icon] junto al título, del color del tono (<ShoppingBagOutlinedIcon />)\n * @param {import('react').ReactNode} [props.children] contenido propio debajo de la nota (una barra de avance, un desglose)\n * @param {() => void} [props.onClick] la tarjeta entera como botón, cuando no lleva a otra pantalla (to)\n * @param {object} [props.texts] los textos que cambian, con la forma de `metricCard`: {trend: {up: 'subió'}}\n */\nexport default function MetricCard(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMetricCard.defaultProps) y encima lo que llega aquí\n    const {\n        label, value, caption, tone = 'info', valueColor, isLoading = false, to, trend, icon, children, onClick, texts,\n    } = usePieceProps(props, THEME_NAME);\n    // el enlace del router que conectó el proyecto (ToolkitProvider)\n    const {Link} = useToolkitNavigation();\n    const paletteTone = TONES.includes(tone) ? tone : 'info';\n\n    const content = (\n        <>\n            {/* la tendencia va en el renglón del título, a la derecha: en el mismo lugar en todas las tarjetas aunque la cifra\n                sea larga (junto a la cifra, con un importe largo se bajaba a otro renglón y no quedaban parejas; lo reportaron) */}\n            <CardHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', justifyContent: 'space-between', minHeight: TITLE_ROW_MIN_HEIGHT_PIXELS}}>\n                <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center', minWidth: 0}}>\n                    {icon && (\n                        <CardIcon aria-hidden=\"true\" ownSx={(theme) => ({\n                            width: ICON_BOX_PIXELS, height: ICON_BOX_PIXELS, flexShrink: 0, display: 'grid', placeItems: 'center',\n                            borderRadius: 1.5, color: `${paletteTone}.main`, '& svg': {fontSize: ICON_PIXELS},\n                            // el tono al 14 %: se distingue del papel sin competir con la cifra\n                            backgroundColor: theme.vars\n                                ? `rgba(${theme.vars.palette[paletteTone].mainChannel} / 0.14)`\n                                : alpha(theme.palette[paletteTone].main, 0.14),\n                        })}>\n                            {icon}\n                        </CardIcon>\n                    )}\n                    <CardLabel variant=\"overline\" color=\"text.secondary\" component=\"p\" ownSx={{minWidth: 0}}>{label}</CardLabel>\n                </Stack>\n                {trend && !isLoading && <TrendChip trend={trend} texts={texts} />}\n            </CardHeader>\n            {/* la cifra en el tono oscuro de su color en claro y en el claro en oscuro (con el oscuro también en modo oscuro\n                casi no se leía); valueColor del proyecto manda en los dos */}\n            <CardValue variant=\"h5\" component=\"p\" ownSx={(theme) => ({\n                mt: 0.75, fontWeight: 600, fontVariantNumeric: 'tabular-nums',\n                ...(valueColor\n                    ? {color: valueColor}\n                    : lightDarkStylesOf(theme, {color: (theme.vars ?? theme).palette[paletteTone].dark}, {color: (theme.vars ?? theme).palette[paletteTone].light})),\n            })}>\n                {isLoading ? <Skeleton width={120} /> : value}\n            </CardValue>\n            {caption && (\n                <CardCaption variant=\"caption\" color=\"text.secondary\" component=\"p\" ownSx={{mt: 0.5}}>\n                    {isLoading ? <Skeleton width={160} /> : caption}\n                </CardCaption>\n            )}\n            {children && <CardExtra ownSx={{mt: 1.5}}>{children}</CardExtra>}\n        </>\n    );\n    // una liga a la pantalla que explica el número, o un botón (onClick); sin ninguno, solo se lee\n    const isClickable = Boolean(to || onClick);\n\n    return (\n        <CardRoot variant=\"outlined\" ownSx={{\n            borderTop: 3,\n            borderTopColor: `${paletteTone}.light`,\n            height: '100%',\n            overflow: 'hidden',\n            ...(isClickable ? {} : {p: 2.5}),\n        }}>\n            {isClickable ? (\n                <CardAction {...(to ? {component: Link, to} : {onClick})} ownSx={{p: 2.5, height: '100%', alignItems: 'flex-start', display: 'block'}}>\n                    {content}\n                </CardAction>\n            ) : content}\n        </CardRoot>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MetricCard.js","sources":["../../../src/ui/metrics/MetricCard.jsx"],"sourcesContent":["// Tarjeta de métrica: etiqueta en versalitas, número grande (h5 en seminegritas, con cifras del mismo ancho) y una nota abajo, con un borde superior de\n// color según el tono (p. ej. REGISTROS LEÍDOS / ÍNTEGROS / DESCARTADOS).\n//\n// Con `to` la tarjeta entera es una liga a la pantalla que explica el número, ya filtrada: un KPI que no lleva a\n// ningún lado obliga a buscar a mano de dónde salió.\n//\n// Con `trend` lleva junto al número cuánto cambió contra el periodo anterior («▲ 12 %», como los tableros de MUI). El\n// color dice si es bueno o malo, no si subió: más cancelaciones es subir y es malo (isGood: false). La flecha y el texto\n// oculto dicen la dirección, para quien no distingue el color.\n//\n// Se extiende sin tocar el framework: un ícono junto al título (icon, del color del tono en un cuadro suave, como los\n// resúmenes de Salud de Apple), contenido propio debajo de la nota (children: una barra de avance, un desglose), onClick\n// cuando no lleva a otra pantalla, y texts para los textos de la tendencia.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMetricCard con defaultProps y\n// styleOverrides de sus partes: root, action, header, icon, label, value, caption, extra y trend.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport CardActionArea from '@mui/material/CardActionArea';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport {alpha} from '@mui/material/styles';\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\nconst TONES = ['info', 'success', 'warning', 'error'];\n\n/** Hacia dónde se movió el número. */\nexport const TREND_DIRECTION = Object.freeze({up: 'up', down: 'down', flat: 'flat'});\n\nconst TREND_ICONS = Object.freeze({\n    [TREND_DIRECTION.up]: ArrowUpwardIcon,\n    [TREND_DIRECTION.down]: ArrowDownwardIcon,\n    [TREND_DIRECTION.flat]: RemoveIcon,\n});\n\n// el renglón del título: del alto de la píldora de tendencia, para que las tarjetas con y sin tendencia queden parejas\nconst TITLE_ROW_MIN_HEIGHT_PIXELS = 24;\n// el cuadro del ícono junto al título y el tamaño del ícono adentro (px)\nconst ICON_BOX_PIXELS = 28;\nconst ICON_PIXELS = 18;\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaMetricCard)\nconst THEME_NAME = 'CalcitaMetricCard';\nconst CardRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst CardAction = piecePart(THEME_NAME, 'Action', CardActionArea);\nconst CardHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst CardIcon = piecePart(THEME_NAME, 'Icon', Box);\nconst CardLabel = piecePart(THEME_NAME, 'Label', Typography);\nconst CardValue = piecePart(THEME_NAME, 'Value', Typography);\nconst CardCaption = piecePart(THEME_NAME, 'Caption', Typography);\nconst CardExtra = piecePart(THEME_NAME, 'Extra', Box);\nconst CardTrend = piecePart(THEME_NAME, 'Trend', Chip);\n\n/**\n * El cambio contra el periodo anterior: verde si es bueno, rojo si es malo, gris si no cambió.\n *\n * @param {{trend: {label: string, direction: string, isGood?: boolean}, texts?: object}} props\n */\nfunction TrendChip({trend, texts}) {\n    const {t} = useToolkitTranslation('metricCard', texts);\n    const direction = TREND_ICONS[trend.direction] ? trend.direction : TREND_DIRECTION.flat;\n    const TrendIcon = TREND_ICONS[direction];\n    // por omisión subir es bueno; quien cuente algo malo (cancelaciones, quejas) lo dice con isGood\n    const isGood = trend.isGood ?? direction === TREND_DIRECTION.up;\n    const color = direction === TREND_DIRECTION.flat ? 'default' : (isGood ? 'success' : 'error');\n    return (\n        <CardTrend size=\"small\" color={color} variant=\"outlined\" icon={<TrendIcon />} label={trend.label}\n                   aria-label={`${t(`trend.${direction}`)} ${trend.label}`} ownSx={{fontWeight: 600, '& .MuiChip-icon': {fontSize: 16}}} />\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} props.label texto ya traducido\n * @param {import('react').ReactNode} props.value ya formateado (formatNumber)\n * @param {import('react').ReactNode} [props.caption]\n * @param {'info'|'success'|'warning'|'error'} [props.tone]\n * @param {string} [props.valueColor] color del número si no debe ir del tono (p. ej. un total en texto normal)\n * @param {boolean} [props.isLoading]\n * @param {string} [props.to] ruta interna a la que lleva la tarjeta\n * @param {{label: string, direction: 'up'|'down'|'flat', isGood?: boolean}} [props.trend] cuánto cambió (TREND_DIRECTION)\n * @param {import('react').ReactNode} [props.icon] junto al título, del color del tono (<ShoppingBagOutlinedIcon />)\n * @param {import('react').ReactNode} [props.children] contenido propio debajo de la nota (una barra de avance, un desglose)\n * @param {() => void} [props.onClick] la tarjeta entera como botón, cuando no lleva a otra pantalla (to)\n * @param {object} [props.texts] los textos que cambian, con la forma de `metricCard`: {trend: {up: 'subió'}}\n */\nexport default function MetricCard(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaMetricCard.defaultProps) y encima lo que llega aquí\n    const {\n        label, value, caption, tone = 'info', valueColor, isLoading = false, to, trend, icon, children, onClick, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    // el enlace del router que conectó el proyecto (ToolkitProvider)\n    const {Link} = useToolkitNavigation();\n    const paletteTone = TONES.includes(tone) ? tone : 'info';\n\n    const content = (\n        <>\n            {/* la tendencia va en el renglón del título, a la derecha: en el mismo lugar en todas las tarjetas aunque la cifra\n                sea larga (junto a la cifra, con un importe largo se bajaba a otro renglón y no quedaban parejas; lo reportaron) */}\n            <CardHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', justifyContent: 'space-between', minHeight: TITLE_ROW_MIN_HEIGHT_PIXELS}}>\n                <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center', minWidth: 0}}>\n                    {icon && (\n                        <CardIcon aria-hidden=\"true\" ownSx={(theme) => ({\n                            width: ICON_BOX_PIXELS, height: ICON_BOX_PIXELS, flexShrink: 0, display: 'grid', placeItems: 'center',\n                            borderRadius: 1.5, color: `${paletteTone}.main`, '& svg': {fontSize: ICON_PIXELS},\n                            // el tono al 14 %: se distingue del papel sin competir con la cifra\n                            backgroundColor: theme.vars\n                                ? `rgba(${theme.vars.palette[paletteTone].mainChannel} / 0.14)`\n                                : alpha(theme.palette[paletteTone].main, 0.14),\n                        })}>\n                            {icon}\n                        </CardIcon>\n                    )}\n                    <CardLabel variant=\"overline\" color=\"text.secondary\" component=\"p\" ownSx={{minWidth: 0}}>{label}</CardLabel>\n                </Stack>\n                {trend && !isLoading && <TrendChip trend={trend} texts={texts} />}\n            </CardHeader>\n            {/* la cifra en el tono oscuro de su color en claro y en el claro en oscuro (con el oscuro también en modo oscuro\n                casi no se leía); valueColor del proyecto manda en los dos */}\n            <CardValue variant=\"h5\" component=\"p\" ownSx={(theme) => ({\n                mt: 0.75, fontWeight: 600, fontVariantNumeric: 'tabular-nums',\n                ...(valueColor\n                    ? {color: valueColor}\n                    : lightDarkStylesOf(theme, {color: (theme.vars ?? theme).palette[paletteTone].dark}, {color: (theme.vars ?? theme).palette[paletteTone].light})),\n            })}>\n                {isLoading ? <Skeleton width={120} /> : value}\n            </CardValue>\n            {caption && (\n                <CardCaption variant=\"caption\" color=\"text.secondary\" component=\"p\" ownSx={{mt: 0.5}}>\n                    {isLoading ? <Skeleton width={160} /> : caption}\n                </CardCaption>\n            )}\n            {children && <CardExtra ownSx={{mt: 1.5}}>{children}</CardExtra>}\n        </>\n    );\n    // una liga a la pantalla que explica el número, o un botón (onClick); sin ninguno, solo se lee\n    const isClickable = Boolean(to || onClick);\n\n    return (\n        <CardRoot variant=\"outlined\" ownSx={{\n            borderTop: 3,\n            borderTopColor: `${paletteTone}.light`,\n            height: '100%',\n            overflow: 'hidden',\n            ...(isClickable ? {} : {p: 2.5}),\n        }}>\n            {isClickable ? (\n                <CardAction {...(to ? {component: Link, to} : {onClick})} ownSx={{p: 2.5, height: '100%', alignItems: 'flex-start', display: 'block'}}>\n                    {content}\n                </CardAction>\n            ) : content}\n        </CardRoot>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/TableToggle.js

@@ -4,12 +4,14 @@ import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaTableToggle";
 const ToggleRoot = piecePart(THEME_NAME, "Root", Box);
 const ToggleButton = piecePart(THEME_NAME, "Button", Button);
 const CHART_VIEW = Object.freeze({ chart: "chart", table: "table" });
 function TableToggle(props) {
-  const { asTable, onToggle, texts } = usePieceProps(props, THEME_NAME);
+  const { asTable, onToggle, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   return /* @__PURE__ */ jsx(ToggleRoot, { ownSx: { display: "flex", justifyContent: "flex-end", mb: 1 }, children: /* @__PURE__ */ jsx(ToggleButton, { size: "small", onClick: onToggle, ownSx: { textTransform: "none" }, children: asTable ? t("charts.viewAsChart") : t("charts.viewAsTable") }) });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TableToggle.js","sources":["../../../src/ui/metrics/TableToggle.jsx"],"sourcesContent":["// \"Ver como tabla\": toda gráfica tiene su versión en tabla, para quien no distingue el color, usa lector de pantalla o\n// quiere copiar los números.\n//\n// Los textos salen de i18n.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTableToggle con defaultProps y\n// styleOverrides de sus partes: root, button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaTableToggle)\nconst THEME_NAME = 'CalcitaTableToggle';\nconst ToggleRoot = piecePart(THEME_NAME, 'Root', Box);\nconst ToggleButton = piecePart(THEME_NAME, 'Button', Button);\n\n/** Cómo se ve una gráfica: dibujada o en su tabla (defaultView y onViewChange de BarList, ColumnChart, LineChart y CalendarHeatmap). */\nexport const CHART_VIEW = Object.freeze({chart: 'chart', table: 'table'});\n\n/**\n * @param {{asTable: boolean, onToggle: () => void, texts?: object}} props texts: los textos que cambian, con la forma de\n *     `common` ({charts: {viewAsTable, viewAsChart}})\n */\nexport default function TableToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaTableToggle.defaultProps) y encima lo que llega aquí\n    const {asTable, onToggle, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n\n    return (\n        <ToggleRoot ownSx={{display: 'flex', justifyContent: 'flex-end', mb: 1}}>\n            <ToggleButton size=\"small\" onClick={onToggle} ownSx={{textTransform: 'none'}}>\n                {asTable ? t('charts.viewAsChart') : t('charts.viewAsTable')}\n            </ToggleButton>\n        </ToggleRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAeA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AACpD,MAAM,eAAe,UAAU,YAAY,UAAU,MAAM;AAGpD,MAAM,aAAa,OAAO,OAAO,EAAC,OAAO,SAAS,OAAO,SAAQ;AAMxE,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,SAAS,UAAU,UAAS,cAAc,OAAO,UAAU;AAClE,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AAEjD,SACI,oBAAC,YAAA,EAAW,OAAO,EAAC,SAAS,QAAQ,gBAAgB,YAAY,IAAI,EAAA,GACjE,UAAA,oBAAC,cAAA,EAAa,MAAK,SAAQ,SAAS,UAAU,OAAO,EAAC,eAAe,OAAA,GAChE,UAAA,UAAU,EAAE,oBAAoB,IAAI,EAAE,oBAAoB,GAC/D,GACJ;AAER;"}
+{"version":3,"file":"TableToggle.js","sources":["../../../src/ui/metrics/TableToggle.jsx"],"sourcesContent":["// \"Ver como tabla\": toda gráfica tiene su versión en tabla, para quien no distingue el color, usa lector de pantalla o\n// quiere copiar los números.\n//\n// Los textos salen de i18n.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTableToggle con defaultProps y\n// styleOverrides de sus partes: root, button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaTableToggle)\nconst THEME_NAME = 'CalcitaTableToggle';\nconst ToggleRoot = piecePart(THEME_NAME, 'Root', Box);\nconst ToggleButton = piecePart(THEME_NAME, 'Button', Button);\n\n/** Cómo se ve una gráfica: dibujada o en su tabla (defaultView y onViewChange de BarList, ColumnChart, LineChart y CalendarHeatmap). */\nexport const CHART_VIEW = Object.freeze({chart: 'chart', table: 'table'});\n\n/**\n * @param {{asTable: boolean, onToggle: () => void, texts?: object}} props texts: los textos que cambian, con la forma de\n *     `common` ({charts: {viewAsTable, viewAsChart}})\n */\nexport default function TableToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaTableToggle.defaultProps) y encima lo que llega aquí\n    const {asTable, onToggle, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n\n    return (\n        <ToggleRoot ownSx={{display: 'flex', justifyContent: 'flex-end', mb: 1}}>\n            <ToggleButton size=\"small\" onClick={onToggle} ownSx={{textTransform: 'none'}}>\n                {asTable ? t('charts.viewAsChart') : t('charts.viewAsTable')}\n            </ToggleButton>\n        </ToggleRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,aAAa;AACnB,MAAM,aAAa,UAAU,YAAY,QAAQ,GAAG;AACpD,MAAM,eAAe,UAAU,YAAY,UAAU,MAAM;AAGpD,MAAM,aAAa,OAAO,OAAO,EAAC,OAAO,SAAS,OAAO,SAAQ;AAMxE,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,SAAS,UAAU,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AACnF,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AAEjD,SACI,oBAAC,YAAA,EAAW,OAAO,EAAC,SAAS,QAAQ,gBAAgB,YAAY,IAAI,EAAA,GACjE,UAAA,oBAAC,cAAA,EAAa,MAAK,SAAQ,SAAS,UAAU,OAAO,EAAC,eAAe,OAAA,GAChE,UAAA,UAAU,EAAE,oBAAoB,IAAI,EAAE,oBAAoB,GAC/D,GACJ;AAER;"}

package/dist/ui/metrics/chartParts.js

@@ -11,6 +11,7 @@ import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import { paletteOf } from "../../theme/components/paletteOf.js";
 import { piecePart } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaChart";
 const ChartTableArea = piecePart(THEME_NAME, "TableArea", Box);
 const ChartLegendPart = piecePart(THEME_NAME, "Legend", Box);
@@ -58,7 +59,8 @@ function highestValueOf(data, series, referenceLine) {
   const values = data.flatMap((row) => series.map((item) => Number(row[item.key]) || 0));
   return Math.max(0, ...values, referenceLine?.value ?? 0);
 }
-function ChartTable({ data, series, periodLabel, formatValue, height }) {
+function ChartTable({ data, series, periodLabel, formatValue, height, ...unknownProps }) {
+  warnUnknownProps("ChartTable", unknownProps);
   return /* @__PURE__ */ jsx(ChartTableArea, { ownSx: { maxHeight: height, overflowY: "auto" }, children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
     /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
       /* @__PURE__ */ jsx(TableCell, { children: periodLabel }),
@@ -70,7 +72,8 @@ function ChartTable({ data, series, periodLabel, formatValue, height }) {
     ] }, row.key)) })
   ] }) });
 }
-function ChartLegend({ series, showsDash = false, ariaLabel }) {
+function ChartLegend({ series, showsDash = false, ariaLabel, ...unknownProps }) {
+  warnUnknownProps("ChartLegend", unknownProps);
   if (series.length < 2) {
     return null;
   }
@@ -79,7 +82,8 @@ function ChartLegend({ series, showsDash = false, ariaLabel }) {
     /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: item.label })
   ] }, item.key)) });
 }
-function ReferenceCaption({ referenceLine }) {
+function ReferenceCaption({ referenceLine, ...unknownProps }) {
+  warnUnknownProps("ReferenceCaption", unknownProps);
   if (!referenceLine) {
     return null;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"chartParts.js","sources":["../../../src/ui/metrics/chartParts.jsx"],"sourcesContent":["// Lo que comparten las gráficas de tiempo de la casa (ColumnChart y LineChart): las medidas del eje de valores, la vista de\n// tabla, la leyenda de las series y el rótulo de la línea de referencia. Un solo lugar: si cambia cómo se lee una tabla o una\n// leyenda, cambia en las dos gráficas.\n//\n// Las reglas de la guía de Apple (HIG «Charts» y «Charting data»):\n//   - con una serie, sin leyenda (el título ya dice qué es); con varias, leyenda;\n//   - el color no va solo: cada serie de líneas lleva además su trazo (continuo, rayado, punteado) y toda gráfica tiene su\n//     vista de tabla;\n//   - ejes y rejilla tenues, que den contexto sin competir con los datos.\n//\n// Los colores salen del tema (useChartColors), nunca escritos como var(--mui-…): un proyecto con su propio prefijo de\n// variables (cssVarPrefix) o sin variables CSS se quedaba con ejes y texto sin color.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaChart con defaultProps y\n// styleOverrides de sus partes: tableArea, legend, legendItem, legendLine, legendSwatch, reference, referenceLine.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo} from 'react';\nimport Box from '@mui/material/Box';\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 Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {piecePart} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaChart)\nconst THEME_NAME = 'CalcitaChart';\nconst ChartTableArea = piecePart(THEME_NAME, 'TableArea', Box);\nconst ChartLegendPart = piecePart(THEME_NAME, 'Legend', Box);\nconst ChartLegendItem = piecePart(THEME_NAME, 'LegendItem', Box);\nconst ChartLegendLine = piecePart(THEME_NAME, 'LegendLine', Box);\nconst ChartLegendSwatch = piecePart(THEME_NAME, 'LegendSwatch', Box);\nconst ChartReference = piecePart(THEME_NAME, 'Reference', Box);\nconst ChartReferenceLine = piecePart(THEME_NAME, 'ReferenceLine', Box);\n\nconst AXIS_FONT_PIXELS = 12;\n// ancho del eje de valores: nunca menos que esto, más lo que pida su número más largo\nconst AXIS_MINIMUM_WIDTH_PIXELS = 48;\nconst AXIS_PADDING_PIXELS = 16;\n// ancho aproximado de un carácter del eje a 12 px\nconst AXIS_CHARACTER_PIXELS = 7;\n// la marca más alta del eje suele pasar del valor más alto y puede llevar un carácter más (999,999 → 1,000,000)\nconst AXIS_EXTRA_CHARACTERS = 1;\n// largo de la muestra que acompaña al rótulo de la línea de referencia y a cada serie de la leyenda\nconst SWATCH_PIXELS = 20;\n\n/** Los colores de las series, en orden, cuando la pantalla no dice el suyo: los del tema. */\nexport const CHART_SERIES_TONES = Object.freeze(['primary', 'info', 'success', 'warning', 'error', 'secondary']);\n/** El trazo de cada serie de líneas, en orden (continuo, rayado, punteado): así no se distinguen solo por el color. */\nexport const CHART_LINE_DASHES = Object.freeze(['0', '6 4', '2 3']);\n\n/**\n * Los colores de las gráficas, leídos del tema: con variables CSS salen como var(--su-prefijo-palette-…) y sirven en claro y\n * en oscuro sin volver a pintar; sin ellas, el color de la paleta.\n *\n * @returns {{palette: object, axis: string, axisText: {fill: string, fontSize: number}, grid: string, text: string, muted: string, hover: string}}\n */\nexport function useChartColors() {\n    const palette = paletteOf(useTheme());\n    return useMemo(() => ({\n        palette,\n        axis: palette.text.secondary,\n        axisText: {fill: palette.text.secondary, fontSize: AXIS_FONT_PIXELS},\n        grid: palette.divider,\n        text: palette.text.primary,\n        muted: palette.text.secondary,\n        hover: palette.action.hover,\n    }), [palette]);\n}\n\n/**\n * Ancho del eje de valores para que quepa su número más largo.\n *\n * @param {number} highestValue el valor más alto que se dibuja\n * @param {(value: number) => string} formatValue cómo se escribe un valor\n * @returns {number} pixeles\n */\nexport function valueAxisWidthOf(highestValue, formatValue) {\n    const longestLabel = formatValue(highestValue).length + AXIS_EXTRA_CHARACTERS;\n    return Math.max(AXIS_MINIMUM_WIDTH_PIXELS, AXIS_PADDING_PIXELS + longestLabel * AXIS_CHARACTER_PIXELS);\n}\n\n/**\n * Las series con su color y su trazo resueltos (lo que la pantalla no dijo, por su lugar en la lista).\n *\n * @param {Array<{key: string, label: string, tone?: string, dash?: string}>} series\n * @param {object} palette la del tema (useChartColors().palette)\n * @returns {Array<{key: string, label: string, tone: string, color: string, dash: string}>}\n */\nexport function resolvedSeriesOf(series, palette) {\n    return series.map((item, index) => {\n        const tone = item.tone ?? CHART_SERIES_TONES[index % CHART_SERIES_TONES.length];\n        return {\n            ...item,\n            tone,\n            color: (palette[tone] ?? palette.primary).main,\n            dash: item.dash ?? CHART_LINE_DASHES[index % CHART_LINE_DASHES.length],\n        };\n    });\n}\n\n/**\n * El valor más alto de todas las series (y de la línea de referencia), para el ancho del eje.\n *\n * @param {Array<Record<string, any>>} data\n * @param {Array<{key: string}>} series\n * @param {{value: number}|undefined} referenceLine\n * @returns {number}\n */\nexport function highestValueOf(data, series, referenceLine) {\n    const values = data.flatMap((row) => series.map((item) => Number(row[item.key]) || 0));\n    return Math.max(0, ...values, referenceLine?.value ?? 0);\n}\n\n/**\n * La vista de tabla: un renglón por periodo y una columna por serie.\n *\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data\n * @param {Array<{key: string, label: string}>} props.series\n * @param {string} props.periodLabel\n * @param {(value: number) => string} props.formatValue\n * @param {number} props.height\n */\nexport function ChartTable({data, series, periodLabel, formatValue, height}) {\n    return (\n        <ChartTableArea ownSx={{maxHeight: height, overflowY: 'auto'}}>\n            <Table size=\"small\">\n                <TableHead>\n                    <TableRow>\n                        <TableCell>{periodLabel}</TableCell>\n                        {series.map((item) => <TableCell key={item.key} align=\"right\">{item.label}</TableCell>)}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {data.map((row) => (\n                        <TableRow key={row.key}>\n                            <TableCell>{row.label}</TableCell>\n                            {series.map((item) => <TableCell key={item.key} align=\"right\">{formatValue(row[item.key])}</TableCell>)}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        </ChartTableArea>\n    );\n}\n\n/**\n * La leyenda: solo con dos series o más. Cada una con su muestra (su color y, en líneas, su trazo).\n *\n * @param {object} props\n * @param {Array<{key: string, label: string, color: string, dash: string}>} props.series ya resueltas\n * @param {boolean} [props.showsDash] la muestra con el trazo de su línea (LineChart); sin él, un cuadro de color\n * @param {string} props.ariaLabel\n */\nexport function ChartLegend({series, showsDash = false, ariaLabel}) {\n    if (series.length < 2) {\n        return null;\n    }\n    return (\n        <ChartLegendPart component=\"ul\" aria-label={ariaLabel} ownSx={{display: 'flex', flexWrap: 'wrap', gap: 2, listStyle: 'none', p: 0, m: 0, mt: 1}}>\n            {series.map((item) => (\n                <ChartLegendItem component=\"li\" key={item.key} ownSx={{display: 'flex', alignItems: 'center', gap: 0.75}}>\n                    {showsDash ? (\n                        <ChartLegendLine component=\"svg\" aria-hidden=\"true\" width={SWATCH_PIXELS} height={8} ownSx={{color: item.color}}>\n                            <line x1=\"0\" y1=\"4\" x2={SWATCH_PIXELS} y2=\"4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeDasharray={item.dash} />\n                        </ChartLegendLine>\n                    ) : (\n                        <ChartLegendSwatch aria-hidden=\"true\" ownSx={{width: 10, height: 10, borderRadius: 0.5, bgcolor: item.color}} />\n                    )}\n                    <Typography variant=\"caption\" color=\"text.secondary\">{item.label}</Typography>\n                </ChartLegendItem>\n            ))}\n        </ChartLegendPart>\n    );\n}\n\n/**\n * El rótulo de la línea de referencia (la meta), debajo de la gráfica: sobre la línea se encimaba con la última columna, y\n * así también lo lee quien ve la tabla.\n *\n * @param {{referenceLine?: {value: number, label: string}}} props\n */\nexport function ReferenceCaption({referenceLine}) {\n    if (!referenceLine) {\n        return null;\n    }\n    return (\n        <ChartReference ownSx={{display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.75, mt: 0.5}}>\n            <ChartReferenceLine aria-hidden=\"true\" ownSx={{width: SWATCH_PIXELS, borderTop: '2px dashed', borderColor: 'text.secondary'}} />\n            <Typography variant=\"caption\" color=\"text.secondary\">{referenceLine.label}</Typography>\n        </ChartReference>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"chartParts.js","sources":["../../../src/ui/metrics/chartParts.jsx"],"sourcesContent":["// Lo que comparten las gráficas de tiempo de la casa (ColumnChart y LineChart): las medidas del eje de valores, la vista de\n// tabla, la leyenda de las series y el rótulo de la línea de referencia. Un solo lugar: si cambia cómo se lee una tabla o una\n// leyenda, cambia en las dos gráficas.\n//\n// Las reglas de la guía de Apple (HIG «Charts» y «Charting data»):\n//   - con una serie, sin leyenda (el título ya dice qué es); con varias, leyenda;\n//   - el color no va solo: cada serie de líneas lleva además su trazo (continuo, rayado, punteado) y toda gráfica tiene su\n//     vista de tabla;\n//   - ejes y rejilla tenues, que den contexto sin competir con los datos.\n//\n// Los colores salen del tema (useChartColors), nunca escritos como var(--mui-…): un proyecto con su propio prefijo de\n// variables (cssVarPrefix) o sin variables CSS se quedaba con ejes y texto sin color.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaChart con defaultProps y\n// styleOverrides de sus partes: tableArea, legend, legendItem, legendLine, legendSwatch, reference, referenceLine.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo} from 'react';\nimport Box from '@mui/material/Box';\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 Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {piecePart} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaChart)\nconst THEME_NAME = 'CalcitaChart';\nconst ChartTableArea = piecePart(THEME_NAME, 'TableArea', Box);\nconst ChartLegendPart = piecePart(THEME_NAME, 'Legend', Box);\nconst ChartLegendItem = piecePart(THEME_NAME, 'LegendItem', Box);\nconst ChartLegendLine = piecePart(THEME_NAME, 'LegendLine', Box);\nconst ChartLegendSwatch = piecePart(THEME_NAME, 'LegendSwatch', Box);\nconst ChartReference = piecePart(THEME_NAME, 'Reference', Box);\nconst ChartReferenceLine = piecePart(THEME_NAME, 'ReferenceLine', Box);\n\nconst AXIS_FONT_PIXELS = 12;\n// ancho del eje de valores: nunca menos que esto, más lo que pida su número más largo\nconst AXIS_MINIMUM_WIDTH_PIXELS = 48;\nconst AXIS_PADDING_PIXELS = 16;\n// ancho aproximado de un carácter del eje a 12 px\nconst AXIS_CHARACTER_PIXELS = 7;\n// la marca más alta del eje suele pasar del valor más alto y puede llevar un carácter más (999,999 → 1,000,000)\nconst AXIS_EXTRA_CHARACTERS = 1;\n// largo de la muestra que acompaña al rótulo de la línea de referencia y a cada serie de la leyenda\nconst SWATCH_PIXELS = 20;\n\n/** Los colores de las series, en orden, cuando la pantalla no dice el suyo: los del tema. */\nexport const CHART_SERIES_TONES = Object.freeze(['primary', 'info', 'success', 'warning', 'error', 'secondary']);\n/** El trazo de cada serie de líneas, en orden (continuo, rayado, punteado): así no se distinguen solo por el color. */\nexport const CHART_LINE_DASHES = Object.freeze(['0', '6 4', '2 3']);\n\n/**\n * Los colores de las gráficas, leídos del tema: con variables CSS salen como var(--su-prefijo-palette-…) y sirven en claro y\n * en oscuro sin volver a pintar; sin ellas, el color de la paleta.\n *\n * @returns {{palette: object, axis: string, axisText: {fill: string, fontSize: number}, grid: string, text: string, muted: string, hover: string}}\n */\nexport function useChartColors() {\n    const palette = paletteOf(useTheme());\n    return useMemo(() => ({\n        palette,\n        axis: palette.text.secondary,\n        axisText: {fill: palette.text.secondary, fontSize: AXIS_FONT_PIXELS},\n        grid: palette.divider,\n        text: palette.text.primary,\n        muted: palette.text.secondary,\n        hover: palette.action.hover,\n    }), [palette]);\n}\n\n/**\n * Ancho del eje de valores para que quepa su número más largo.\n *\n * @param {number} highestValue el valor más alto que se dibuja\n * @param {(value: number) => string} formatValue cómo se escribe un valor\n * @returns {number} pixeles\n */\nexport function valueAxisWidthOf(highestValue, formatValue) {\n    const longestLabel = formatValue(highestValue).length + AXIS_EXTRA_CHARACTERS;\n    return Math.max(AXIS_MINIMUM_WIDTH_PIXELS, AXIS_PADDING_PIXELS + longestLabel * AXIS_CHARACTER_PIXELS);\n}\n\n/**\n * Las series con su color y su trazo resueltos (lo que la pantalla no dijo, por su lugar en la lista).\n *\n * @param {Array<{key: string, label: string, tone?: string, dash?: string}>} series\n * @param {object} palette la del tema (useChartColors().palette)\n * @returns {Array<{key: string, label: string, tone: string, color: string, dash: string}>}\n */\nexport function resolvedSeriesOf(series, palette) {\n    return series.map((item, index) => {\n        const tone = item.tone ?? CHART_SERIES_TONES[index % CHART_SERIES_TONES.length];\n        return {\n            ...item,\n            tone,\n            color: (palette[tone] ?? palette.primary).main,\n            dash: item.dash ?? CHART_LINE_DASHES[index % CHART_LINE_DASHES.length],\n        };\n    });\n}\n\n/**\n * El valor más alto de todas las series (y de la línea de referencia), para el ancho del eje.\n *\n * @param {Array<Record<string, any>>} data\n * @param {Array<{key: string}>} series\n * @param {{value: number}|undefined} referenceLine\n * @returns {number}\n */\nexport function highestValueOf(data, series, referenceLine) {\n    const values = data.flatMap((row) => series.map((item) => Number(row[item.key]) || 0));\n    return Math.max(0, ...values, referenceLine?.value ?? 0);\n}\n\n/**\n * La vista de tabla: un renglón por periodo y una columna por serie.\n *\n * @param {object} props\n * @param {Array<Record<string, any>>} props.data\n * @param {Array<{key: string, label: string}>} props.series\n * @param {string} props.periodLabel\n * @param {(value: number) => string} props.formatValue\n * @param {number} props.height\n */\nexport function ChartTable({data, series, periodLabel, formatValue, height, ...unknownProps}) {\n    warnUnknownProps('ChartTable', unknownProps);\n    return (\n        <ChartTableArea ownSx={{maxHeight: height, overflowY: 'auto'}}>\n            <Table size=\"small\">\n                <TableHead>\n                    <TableRow>\n                        <TableCell>{periodLabel}</TableCell>\n                        {series.map((item) => <TableCell key={item.key} align=\"right\">{item.label}</TableCell>)}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {data.map((row) => (\n                        <TableRow key={row.key}>\n                            <TableCell>{row.label}</TableCell>\n                            {series.map((item) => <TableCell key={item.key} align=\"right\">{formatValue(row[item.key])}</TableCell>)}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        </ChartTableArea>\n    );\n}\n\n/**\n * La leyenda: solo con dos series o más. Cada una con su muestra (su color y, en líneas, su trazo).\n *\n * @param {object} props\n * @param {Array<{key: string, label: string, color: string, dash: string}>} props.series ya resueltas\n * @param {boolean} [props.showsDash] la muestra con el trazo de su línea (LineChart); sin él, un cuadro de color\n * @param {string} props.ariaLabel\n */\nexport function ChartLegend({series, showsDash = false, ariaLabel, ...unknownProps}) {\n    warnUnknownProps('ChartLegend', unknownProps);\n    if (series.length < 2) {\n        return null;\n    }\n    return (\n        <ChartLegendPart component=\"ul\" aria-label={ariaLabel} ownSx={{display: 'flex', flexWrap: 'wrap', gap: 2, listStyle: 'none', p: 0, m: 0, mt: 1}}>\n            {series.map((item) => (\n                <ChartLegendItem component=\"li\" key={item.key} ownSx={{display: 'flex', alignItems: 'center', gap: 0.75}}>\n                    {showsDash ? (\n                        <ChartLegendLine component=\"svg\" aria-hidden=\"true\" width={SWATCH_PIXELS} height={8} ownSx={{color: item.color}}>\n                            <line x1=\"0\" y1=\"4\" x2={SWATCH_PIXELS} y2=\"4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeDasharray={item.dash} />\n                        </ChartLegendLine>\n                    ) : (\n                        <ChartLegendSwatch aria-hidden=\"true\" ownSx={{width: 10, height: 10, borderRadius: 0.5, bgcolor: item.color}} />\n                    )}\n                    <Typography variant=\"caption\" color=\"text.secondary\">{item.label}</Typography>\n                </ChartLegendItem>\n            ))}\n        </ChartLegendPart>\n    );\n}\n\n/**\n * El rótulo de la línea de referencia (la meta), debajo de la gráfica: sobre la línea se encimaba con la última columna, y\n * así también lo lee quien ve la tabla.\n *\n * @param {{referenceLine?: {value: number, label: string}}} props\n */\nexport function ReferenceCaption({referenceLine, ...unknownProps}) {\n    warnUnknownProps('ReferenceCaption', unknownProps);\n    if (!referenceLine) {\n        return null;\n    }\n    return (\n        <ChartReference ownSx={{display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.75, mt: 0.5}}>\n            <ChartReferenceLine aria-hidden=\"true\" ownSx={{width: SWATCH_PIXELS, borderTop: '2px dashed', borderColor: 'text.secondary'}} />\n            <Typography variant=\"caption\" color=\"text.secondary\">{referenceLine.label}</Typography>\n        </ChartReference>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/heatmapScale.js

@@ -1,5 +1,6 @@
 const DAY_MILLISECONDS = 24 * 60 * 60 * 1e3;
 const DAYS_PER_WEEK = 7;
+const PLAIN_DATE_LOCALE = "en-CA";
 const HEATMAP_LEVELS = [0, 1, 2, 3, 4];
 function quantileThresholds(values) {
   const activeValues = values.filter((value) => value > 0).sort((first, second) => first - second);
@@ -31,6 +32,17 @@ function utcDayOf(plainDate) {
 function plainDateOf(utcMilliseconds) {
   return new Date(utcMilliseconds).toISOString().slice(0, 10);
 }
+function todayInZone(timeZone, now = /* @__PURE__ */ new Date()) {
+  return new Intl.DateTimeFormat(PLAIN_DATE_LOCALE, { timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).format(now);
+}
+function calendarRangeOf({ startsOn, endsOn, today }) {
+  const lastDay = endsOn ?? today;
+  if (startsOn) {
+    return { startsOn, endsOn: lastDay };
+  }
+  const [year, month, day] = lastDay.split("-").map(Number);
+  return { startsOn: plainDateOf(Date.UTC(year - 1, month - 1, day + 1)), endsOn: lastDay };
+}
 function calendarWeeksOf({ startsOn, endsOn, days }) {
   const dayByDate = new Map(days.map((day) => [day.date, day]));
   const firstDay = utcDayOf(startsOn);
@@ -60,8 +72,10 @@ function calendarWeeksOf({ startsOn, endsOn, days }) {
 }
 export {
   HEATMAP_LEVELS,
+  calendarRangeOf,
   calendarWeeksOf,
   levelOf,
-  quantileThresholds
+  quantileThresholds,
+  todayInZone
 };
 //# sourceMappingURL=heatmapScale.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"heatmapScale.js","sources":["../../../src/ui/metrics/heatmapScale.js"],"sourcesContent":["// Cuentas del calendario de actividad (CalendarHeatmap): niveles de color y semanas en columnas.\n//\n// Separadas del componente para probarlas con node --test sin navegador ni MUI.\n//\n// Reglas:\n//   - es MAGNITUD: cuatro niveles de un solo tono más \"sin actividad\";\n//   - los niveles se cortan por CUARTILES de los días con actividad, no por valores fijos: con 120 registros al día o\n//     con 12 000 el calendario se lee igual de bien;\n//   - las semanas empiezan en LUNES y el mes se rotula en la semana donde cae su día 1.\n//\n// Fechas de calendario (\"2026-08-16\") con aritmética en UTC: una fecha sin hora no tiene zona y así no se corre de día.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\n\nconst DAY_MILLISECONDS = 24 * 60 * 60 * 1000;\nconst DAYS_PER_WEEK = 7;\n\n/** Nivel 0 = sin actividad; 1 a 4 = el tono cada vez más lleno. */\nexport const HEATMAP_LEVELS = [0, 1, 2, 3, 4];\n\n/**\n * Cortes de los cuartiles de los valores con actividad.\n *\n * @param {number[]} values un valor por día (los ceros no cuentan)\n * @returns {[number, number, number]} q1, q2 y q3\n */\nexport function quantileThresholds(values) {\n    const activeValues = values.filter((value) => value > 0).sort((first, second) => first - second);\n    // guard clause: sin actividad cualquier valor positivo sería el nivel más alto; da igual, no hay ninguno\n    if (!activeValues.length) {\n        return [1, 1, 1];\n    }\n    const valueAt = (fraction) => activeValues[Math.min(activeValues.length - 1, Math.floor(fraction * activeValues.length))];\n    return [valueAt(0.25), valueAt(0.5), valueAt(0.75)];\n}\n\n/**\n * Nivel de color de un valor.\n *\n * @param {number} value\n * @param {[number, number, number]} thresholds lo que regresa quantileThresholds\n * @returns {0|1|2|3|4}\n */\nexport function levelOf(value, [firstQuartile, median, thirdQuartile]) {\n    if (!value) {\n        return 0;\n    }\n    // OJO: intervalos abiertos por arriba ([q1, q2) es el nivel 2). Con «<=» el valor más repetido, que suele ser\n    // la carga completa de cada corte, caía en el nivel 1 y el calendario entero se veía deslavado\n    if (value < firstQuartile) {\n        return 1;\n    }\n    if (value < median) {\n        return 2;\n    }\n    if (value < thirdQuartile) {\n        return 3;\n    }\n    return 4;\n}\n\n/** \"2026-08-16\" → milisegundos UTC de ese día a las 00:00. */\nfunction utcDayOf(plainDate) {\n    const [year, month, day] = plainDate.split('-').map(Number);\n    return Date.UTC(year, month - 1, day);\n}\n\n/** milisegundos UTC → \"2026-08-16\". */\nfunction plainDateOf(utcMilliseconds) {\n    return new Date(utcMilliseconds).toISOString().slice(0, 10);\n}\n\n/**\n * Semanas del calendario: columnas de lunes a domingo desde la semana de startsOn hasta la de endsOn.\n *\n * Los días fuera del rango (antes de startsOn en la primera semana o después de endsOn en la última) van en null para\n * que la rejilla deje su hueco sin pintarlos como \"sin actividad\".\n *\n * @param {{startsOn: string, endsOn: string, days: Array<{date: string, value: number, detail?: string}>}} calendar\n *        days solo trae los días con actividad (el resto vale 0)\n * @returns {{weeks: Array<Array<{date: string, value: number, detail?: string}|null>>, monthMarks: Array<number|null>, thresholds: [number, number, number]}}\n *          monthMarks: el mes (1 a 12) que empieza en cada semana, o null\n */\nexport function calendarWeeksOf({startsOn, endsOn, days}) {\n    const dayByDate = new Map(days.map((day) => [day.date, day]));\n    const firstDay = utcDayOf(startsOn);\n    const lastDay = utcDayOf(endsOn);\n    // getUTCDay: 0 = domingo; lo pasamos a 0 = lunes\n    const mondayOffset = (new Date(firstDay).getUTCDay() + 6) % DAYS_PER_WEEK;\n    const weeks = [];\n    const monthMarks = [];\n\n    for (let weekStart = firstDay - mondayOffset * DAY_MILLISECONDS; weekStart <= lastDay; weekStart += DAYS_PER_WEEK * DAY_MILLISECONDS) {\n        const week = [];\n        let monthMark = null;\n        for (let weekday = 0; weekday < DAYS_PER_WEEK; weekday++) {\n            const dayMilliseconds = weekStart + weekday * DAY_MILLISECONDS;\n            if (dayMilliseconds < firstDay || dayMilliseconds > lastDay) {\n                week.push(null);\n                continue;\n            }\n            const date = plainDateOf(dayMilliseconds);\n            if (date.endsWith('-01')) {\n                monthMark = Number(date.slice(5, 7));\n            }\n            week.push({date, value: dayByDate.get(date)?.value ?? 0, detail: dayByDate.get(date)?.detail});\n        }\n        weeks.push(week);\n        monthMarks.push(monthMark);\n    }\n\n    return {weeks, monthMarks, thresholds: quantileThresholds(days.map((day) => day.value))};\n}\n"],"names":[],"mappings":"AAcA,MAAM,mBAAmB,KAAK,KAAK,KAAK;AACxC,MAAM,gBAAgB;AAGV,MAAC,iBAAiB,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAQrC,SAAS,mBAAmB,QAAQ;AACvC,QAAM,eAAe,OAAO,OAAO,CAAC,UAAU,QAAQ,CAAC,EAAE,KAAK,CAAC,OAAO,WAAW,QAAQ,MAAM;AAE/F,MAAI,CAAC,aAAa,QAAQ;AACtB,WAAO,CAAC,GAAG,GAAG,CAAC;AAAA,EACnB;AACA,QAAM,UAAU,CAAC,aAAa,aAAa,KAAK,IAAI,aAAa,SAAS,GAAG,KAAK,MAAM,WAAW,aAAa,MAAM,CAAC,CAAC;AACxH,SAAO,CAAC,QAAQ,IAAI,GAAG,QAAQ,GAAG,GAAG,QAAQ,IAAI,CAAC;AACtD;AASO,SAAS,QAAQ,OAAO,CAAC,eAAe,QAAQ,aAAa,GAAG;AACnE,MAAI,CAAC,OAAO;AACR,WAAO;AAAA,EACX;AAGA,MAAI,QAAQ,eAAe;AACvB,WAAO;AAAA,EACX;AACA,MAAI,QAAQ,QAAQ;AAChB,WAAO;AAAA,EACX;AACA,MAAI,QAAQ,eAAe;AACvB,WAAO;AAAA,EACX;AACA,SAAO;AACX;AAGA,SAAS,SAAS,WAAW;AACzB,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,UAAU,MAAM,GAAG,EAAE,IAAI,MAAM;AAC1D,SAAO,KAAK,IAAI,MAAM,QAAQ,GAAG,GAAG;AACxC;AAGA,SAAS,YAAY,iBAAiB;AAClC,SAAO,IAAI,KAAK,eAAe,EAAE,YAAW,EAAG,MAAM,GAAG,EAAE;AAC9D;AAaO,SAAS,gBAAgB,EAAC,UAAU,QAAQ,KAAI,GAAG;AACtD,QAAM,YAAY,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC;AAC5D,QAAM,WAAW,SAAS,QAAQ;AAClC,QAAM,UAAU,SAAS,MAAM;AAE/B,QAAM,gBAAgB,IAAI,KAAK,QAAQ,EAAE,UAAS,IAAK,KAAK;AAC5D,QAAM,QAAQ,CAAA;AACd,QAAM,aAAa,CAAA;AAEnB,WAAS,YAAY,WAAW,eAAe,kBAAkB,aAAa,SAAS,aAAa,gBAAgB,kBAAkB;AAClI,UAAM,OAAO,CAAA;AACb,QAAI,YAAY;AAChB,aAAS,UAAU,GAAG,UAAU,eAAe,WAAW;AACtD,YAAM,kBAAkB,YAAY,UAAU;AAC9C,UAAI,kBAAkB,YAAY,kBAAkB,SAAS;AACzD,aAAK,KAAK,IAAI;AACd;AAAA,MACJ;AACA,YAAM,OAAO,YAAY,eAAe;AACxC,UAAI,KAAK,SAAS,KAAK,GAAG;AACtB,oBAAY,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAAA,MACvC;AACA,WAAK,KAAK,EAAC,MAAM,OAAO,UAAU,IAAI,IAAI,GAAG,SAAS,GAAG,QAAQ,UAAU,IAAI,IAAI,GAAG,OAAM,CAAC;AAAA,IACjG;AACA,UAAM,KAAK,IAAI;AACf,eAAW,KAAK,SAAS;AAAA,EAC7B;AAEA,SAAO,EAAC,OAAO,YAAY,YAAY,mBAAmB,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,EAAC;AAC3F;"}
+{"version":3,"file":"heatmapScale.js","sources":["../../../src/ui/metrics/heatmapScale.js"],"sourcesContent":["// Cuentas del calendario de actividad (CalendarHeatmap): niveles de color y semanas en columnas.\n//\n// Separadas del componente para probarlas con node --test sin navegador ni MUI.\n//\n// Reglas:\n//   - es MAGNITUD: cuatro niveles de un solo tono más \"sin actividad\";\n//   - los niveles se cortan por CUARTILES de los días con actividad, no por valores fijos: con 120 registros al día o\n//     con 12 000 el calendario se lee igual de bien;\n//   - las semanas empiezan en LUNES y el mes se rotula en la semana donde cae su día 1.\n//\n// Fechas de calendario (\"2026-08-16\") con aritmética en UTC: una fecha sin hora no tiene zona y así no se corre de día.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\n\nconst DAY_MILLISECONDS = 24 * 60 * 60 * 1000;\nconst DAYS_PER_WEEK = 7;\n// Intl en inglés de Canadá escribe la fecha como AAAA-MM-DD: así sale «hoy» en la zona del negocio sin armar el texto a mano\nconst PLAIN_DATE_LOCALE = 'en-CA';\n\n/** Nivel 0 = sin actividad; 1 a 4 = el tono cada vez más lleno. */\nexport const HEATMAP_LEVELS = [0, 1, 2, 3, 4];\n\n/**\n * Cortes de los cuartiles de los valores con actividad.\n *\n * @param {number[]} values un valor por día (los ceros no cuentan)\n * @returns {[number, number, number]} q1, q2 y q3\n */\nexport function quantileThresholds(values) {\n    const activeValues = values.filter((value) => value > 0).sort((first, second) => first - second);\n    // guard clause: sin actividad cualquier valor positivo sería el nivel más alto; da igual, no hay ninguno\n    if (!activeValues.length) {\n        return [1, 1, 1];\n    }\n    const valueAt = (fraction) => activeValues[Math.min(activeValues.length - 1, Math.floor(fraction * activeValues.length))];\n    return [valueAt(0.25), valueAt(0.5), valueAt(0.75)];\n}\n\n/**\n * Nivel de color de un valor.\n *\n * @param {number} value\n * @param {[number, number, number]} thresholds lo que regresa quantileThresholds\n * @returns {0|1|2|3|4}\n */\nexport function levelOf(value, [firstQuartile, median, thirdQuartile]) {\n    if (!value) {\n        return 0;\n    }\n    // OJO: intervalos abiertos por arriba ([q1, q2) es el nivel 2). Con «<=» el valor más repetido, que suele ser\n    // la carga completa de cada corte, caía en el nivel 1 y el calendario entero se veía deslavado\n    if (value < firstQuartile) {\n        return 1;\n    }\n    if (value < median) {\n        return 2;\n    }\n    if (value < thirdQuartile) {\n        return 3;\n    }\n    return 4;\n}\n\n/** \"2026-08-16\" → milisegundos UTC de ese día a las 00:00. */\nfunction utcDayOf(plainDate) {\n    const [year, month, day] = plainDate.split('-').map(Number);\n    return Date.UTC(year, month - 1, day);\n}\n\n/** milisegundos UTC → \"2026-08-16\". */\nfunction plainDateOf(utcMilliseconds) {\n    return new Date(utcMilliseconds).toISOString().slice(0, 10);\n}\n\n/**\n * El día de hoy (AAAA-MM-DD) en la zona del negocio: en la noche de México, en UTC ya es mañana.\n *\n * @param {string} timeZone zona de Intl ('America/Mexico_City')\n * @param {Date} [now]\n * @returns {string}\n */\nexport function todayInZone(timeZone, now = new Date()) {\n    return new Intl.DateTimeFormat(PLAIN_DATE_LOCALE, {timeZone, year: 'numeric', month: '2-digit', day: '2-digit'}).format(now);\n}\n\n/**\n * El rango del calendario con lo que falte: sin endsOn termina hoy y sin startsOn abarca el último año (desde el día\n * siguiente al mismo de hace un año). OJO: antes, sin las dos fechas el calendario tronaba al abrir la pantalla.\n *\n * @param {{startsOn?: string, endsOn?: string, today: string}} range fechas de calendario AAAA-MM-DD\n * @returns {{startsOn: string, endsOn: string}}\n */\nexport function calendarRangeOf({startsOn, endsOn, today}) {\n    const lastDay = endsOn ?? today;\n    if (startsOn) {\n        return {startsOn, endsOn: lastDay};\n    }\n    const [year, month, day] = lastDay.split('-').map(Number);\n    // Date.UTC acomoda solo el día que se pasa del mes (31 + 1 → día 1 del siguiente; 29 de febrero → 1 de marzo)\n    return {startsOn: plainDateOf(Date.UTC(year - 1, month - 1, day + 1)), endsOn: lastDay};\n}\n\n/**\n * Semanas del calendario: columnas de lunes a domingo desde la semana de startsOn hasta la de endsOn.\n *\n * Los días fuera del rango (antes de startsOn en la primera semana o después de endsOn en la última) van en null para\n * que la rejilla deje su hueco sin pintarlos como \"sin actividad\".\n *\n * @param {{startsOn: string, endsOn: string, days: Array<{date: string, value: number, detail?: string}>}} calendar\n *        days solo trae los días con actividad (el resto vale 0)\n * @returns {{weeks: Array<Array<{date: string, value: number, detail?: string}|null>>, monthMarks: Array<number|null>, thresholds: [number, number, number]}}\n *          monthMarks: el mes (1 a 12) que empieza en cada semana, o null\n */\nexport function calendarWeeksOf({startsOn, endsOn, days}) {\n    const dayByDate = new Map(days.map((day) => [day.date, day]));\n    const firstDay = utcDayOf(startsOn);\n    const lastDay = utcDayOf(endsOn);\n    // getUTCDay: 0 = domingo; lo pasamos a 0 = lunes\n    const mondayOffset = (new Date(firstDay).getUTCDay() + 6) % DAYS_PER_WEEK;\n    const weeks = [];\n    const monthMarks = [];\n\n    for (let weekStart = firstDay - mondayOffset * DAY_MILLISECONDS; weekStart <= lastDay; weekStart += DAYS_PER_WEEK * DAY_MILLISECONDS) {\n        const week = [];\n        let monthMark = null;\n        for (let weekday = 0; weekday < DAYS_PER_WEEK; weekday++) {\n            const dayMilliseconds = weekStart + weekday * DAY_MILLISECONDS;\n            if (dayMilliseconds < firstDay || dayMilliseconds > lastDay) {\n                week.push(null);\n                continue;\n            }\n            const date = plainDateOf(dayMilliseconds);\n            if (date.endsWith('-01')) {\n                monthMark = Number(date.slice(5, 7));\n            }\n            week.push({date, value: dayByDate.get(date)?.value ?? 0, detail: dayByDate.get(date)?.detail});\n        }\n        weeks.push(week);\n        monthMarks.push(monthMark);\n    }\n\n    return {weeks, monthMarks, thresholds: quantileThresholds(days.map((day) => day.value))};\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/navigation/ColorSchemeToggle.js

@@ -9,10 +9,12 @@ import DarkModeIcon from "@mui/icons-material/DarkModeOutlined";
 import LightModeIcon from "@mui/icons-material/LightModeOutlined";
 import { nextColorModeOf } from "./colorMode.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaColorSchemeToggle";
 const SchemeButton = piecePart(THEME_NAME, "Button", IconButton);
 function ColorSchemeToggle(props) {
-  const { size = "small", inverted = false, onChange, texts } = usePieceProps(props, THEME_NAME);
+  const { size = "small", inverted = false, onChange, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const { mode, systemMode, setMode } = useColorScheme();
   const [isMounted, setIsMounted] = useState(false);

package/dist/ui/navigation/ColorSchemeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeToggle.js","sources":["../../../src/ui/navigation/ColorSchemeToggle.jsx"],"sourcesContent":["// Interruptor de modo claro / oscuro.\n//\n// Dos estados visibles, no tres: el primer clic fija una preferencia explícita que ya se recuerda; para volver a seguir\n// al equipo está «Automático» en Apariencia (AppearanceSettings, en el menú de la cuenta). Recordar lo hace MUI:\n// setMode escribe en localStorage (con las llaves que el proyecto puso en su ThemeProvider) y un script\n// en el HTML la puede leer antes del primer pintado.\n//\n// Va en la cinta de escritorio, en el cajón del teléfono y en el inicio de sesión.\n//\n// El tooltip sale de i18n.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColorSchemeToggle con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport {useColorScheme} from '@mui/material/styles';\nimport DarkModeIcon from '@mui/icons-material/DarkModeOutlined';\nimport LightModeIcon from '@mui/icons-material/LightModeOutlined';\n\nimport {nextColorModeOf} from '@/ui/navigation/colorMode.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColorSchemeToggle)\nconst THEME_NAME = 'CalcitaColorSchemeToggle';\nconst SchemeButton = piecePart(THEME_NAME, 'Button', IconButton);\n\n/**\n * @param {object} [props]\n * @param {'small'|'medium'} [props.size]\n * @param {boolean} [props.inverted] ícono blanco para fondos oscuros\n * @param {(mode: 'light'|'dark'|'system') => void} [props.onChange] la persona cambió el modo (para guardarlo en su servidor)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function ColorSchemeToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColorSchemeToggle.defaultProps) y encima lo que llega aquí\n    const {size = 'small', inverted = false, onChange, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common', texts);\n    const {mode, systemMode, setMode} = useColorScheme();\n\n    // antes de montar en el cliente mode viene undefined: reservamos el lugar para que la barra no brinque\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => {\n        setIsMounted(true);\n    }, []);\n    if (!isMounted || !mode) {\n        return <SchemeButton size={size} disabled aria-hidden=\"true\" ownSx={{width: 34, height: 34}} />;\n    }\n\n    const nextMode = nextColorModeOf(mode, systemMode);\n    const label = t(`colorScheme.switchTo.${nextMode}`);\n\n    return (\n        <Tooltip title={label}>\n            <SchemeButton size={size} aria-label={label} onClick={() => {\n                            setMode(nextMode);\n                            onChange?.(nextMode);\n                        }}\n                        ownSx={{color: inverted ? 'common.white' : 'text.secondary'}}>\n                {nextMode === 'light' ? <LightModeIcon fontSize=\"small\" /> : <DarkModeIcon fontSize=\"small\" />}\n            </SchemeButton>\n        </Tooltip>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,UAAU,UAAU;AAS/D,SAAwB,kBAAkB,OAAO;AAE7C,QAAM,EAAC,OAAO,SAAS,WAAW,OAAO,UAAU,UAAS,cAAc,OAAO,UAAU;AAC3F,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,MAAM,YAAY,QAAA,IAAW,eAAA;AAGpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,YAAU,MAAM;AACZ,iBAAa,IAAI;AAAA,EACrB,GAAG,CAAA,CAAE;AACL,MAAI,CAAC,aAAa,CAAC,MAAM;AACrB,WAAO,oBAAC,cAAA,EAAa,MAAY,UAAQ,MAAC,eAAY,QAAO,OAAO,EAAC,OAAO,IAAI,QAAQ,KAAE,CAAG;AAAA,EACjG;AAEA,QAAM,WAAW,gBAAgB,MAAM,UAAU;AACjD,QAAM,QAAQ,EAAE,wBAAwB,QAAQ,EAAE;AAElD,SACI,oBAAC,SAAA,EAAQ,OAAO,OACZ,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAa;AAAA,MAAY,cAAY;AAAA,MAAO,SAAS,MAAM;AAC5C,gBAAQ,QAAQ;AAChB,mBAAW,QAAQ;AAAA,MACvB;AAAA,MACA,OAAO,EAAC,OAAO,WAAW,iBAAiB,iBAAA;AAAA,MAClD,UAAA,aAAa,UAAU,oBAAC,eAAA,EAAc,UAAS,SAAQ,IAAK,oBAAC,cAAA,EAAa,UAAS,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA,GAEpG;AAER;"}
+{"version":3,"file":"ColorSchemeToggle.js","sources":["../../../src/ui/navigation/ColorSchemeToggle.jsx"],"sourcesContent":["// Interruptor de modo claro / oscuro.\n//\n// Dos estados visibles, no tres: el primer clic fija una preferencia explícita que ya se recuerda; para volver a seguir\n// al equipo está «Automático» en Apariencia (AppearanceSettings, en el menú de la cuenta). Recordar lo hace MUI:\n// setMode escribe en localStorage (con las llaves que el proyecto puso en su ThemeProvider) y un script\n// en el HTML la puede leer antes del primer pintado.\n//\n// Va en la cinta de escritorio, en el cajón del teléfono y en el inicio de sesión.\n//\n// El tooltip sale de i18n.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaColorSchemeToggle con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport {useColorScheme} from '@mui/material/styles';\nimport DarkModeIcon from '@mui/icons-material/DarkModeOutlined';\nimport LightModeIcon from '@mui/icons-material/LightModeOutlined';\n\nimport {nextColorModeOf} from '@/ui/navigation/colorMode.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaColorSchemeToggle)\nconst THEME_NAME = 'CalcitaColorSchemeToggle';\nconst SchemeButton = piecePart(THEME_NAME, 'Button', IconButton);\n\n/**\n * @param {object} [props]\n * @param {'small'|'medium'} [props.size]\n * @param {boolean} [props.inverted] ícono blanco para fondos oscuros\n * @param {(mode: 'light'|'dark'|'system') => void} [props.onChange] la persona cambió el modo (para guardarlo en su servidor)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function ColorSchemeToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaColorSchemeToggle.defaultProps) y encima lo que llega aquí\n    const {size = 'small', inverted = false, onChange, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {mode, systemMode, setMode} = useColorScheme();\n\n    // antes de montar en el cliente mode viene undefined: reservamos el lugar para que la barra no brinque\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => {\n        setIsMounted(true);\n    }, []);\n    if (!isMounted || !mode) {\n        return <SchemeButton size={size} disabled aria-hidden=\"true\" ownSx={{width: 34, height: 34}} />;\n    }\n\n    const nextMode = nextColorModeOf(mode, systemMode);\n    const label = t(`colorScheme.switchTo.${nextMode}`);\n\n    return (\n        <Tooltip title={label}>\n            <SchemeButton size={size} aria-label={label} onClick={() => {\n                            setMode(nextMode);\n                            onChange?.(nextMode);\n                        }}\n                        ownSx={{color: inverted ? 'common.white' : 'text.secondary'}}>\n                {nextMode === 'light' ? <LightModeIcon fontSize=\"small\" /> : <DarkModeIcon fontSize=\"small\" />}\n            </SchemeButton>\n        </Tooltip>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,UAAU,UAAU;AAS/D,SAAwB,kBAAkB,OAAO;AAE7C,QAAM,EAAC,OAAO,SAAS,WAAW,OAAO,UAAU,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC5G,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,MAAM,YAAY,QAAA,IAAW,eAAA;AAGpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,YAAU,MAAM;AACZ,iBAAa,IAAI;AAAA,EACrB,GAAG,CAAA,CAAE;AACL,MAAI,CAAC,aAAa,CAAC,MAAM;AACrB,WAAO,oBAAC,cAAA,EAAa,MAAY,UAAQ,MAAC,eAAY,QAAO,OAAO,EAAC,OAAO,IAAI,QAAQ,KAAE,CAAG;AAAA,EACjG;AAEA,QAAM,WAAW,gBAAgB,MAAM,UAAU;AACjD,QAAM,QAAQ,EAAE,wBAAwB,QAAQ,EAAE;AAElD,SACI,oBAAC,SAAA,EAAQ,OAAO,OACZ,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAa;AAAA,MAAY,cAAY;AAAA,MAAO,SAAS,MAAM;AAC5C,gBAAQ,QAAQ;AAChB,mBAAW,QAAQ;AAAA,MACvB;AAAA,MACA,OAAO,EAAC,OAAO,WAAW,iBAAiB,iBAAA;AAAA,MAClD,UAAA,aAAa,UAAU,oBAAC,eAAA,EAAc,UAAS,SAAQ,IAAK,oBAAC,cAAA,EAAa,UAAS,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA,GAEpG;AAER;"}

package/dist/ui/navigation/DocumentTitle.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useToolkitSettings } from "../../toolkit/toolkitContext.js";
-function DocumentTitle({ title }) {
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+function DocumentTitle({ title, ...unknownProps }) {
+  warnUnknownProps("DocumentTitle", unknownProps);
   const { appName } = useToolkitSettings();
   return /* @__PURE__ */ jsx("title", { children: appName ? `${title} | ${appName}` : title });
 }

package/dist/ui/navigation/DocumentTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentTitle.js","sources":["../../../src/ui/navigation/DocumentTitle.jsx"],"sourcesContent":["// Título de la pestaña: \"<pantalla> | <aplicación>\", con el nombre de la aplicación del proveedor (appName de\n// ToolkitProvider); sin nombre, solo la pantalla. React 19 sube <title> al <head> solo; no hace falta react-helmet.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\n\n/**\n * @param {{title: string}} props texto ya traducido\n */\nexport default function DocumentTitle({title}) {\n    const {appName} = useToolkitSettings();\n\n    return <title>{appName ? `${title} | ${appName}` : title}</title>;\n}\n"],"names":[],"mappings":";;;AASA,SAAwB,cAAc,EAAC,SAAQ;AAC3C,QAAM,EAAC,QAAA,IAAW,mBAAA;AAElB,SAAO,oBAAC,WAAO,UAAA,UAAU,GAAG,KAAK,MAAM,OAAO,KAAK,MAAA,CAAM;AAC7D;"}
+{"version":3,"file":"DocumentTitle.js","sources":["../../../src/ui/navigation/DocumentTitle.jsx"],"sourcesContent":["// Título de la pestaña: \"<pantalla> | <aplicación>\", con el nombre de la aplicación del proveedor (appName de\n// ToolkitProvider); sin nombre, solo la pantalla. React 19 sube <title> al <head> solo; no hace falta react-helmet.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/**\n * @param {{title: string}} props texto ya traducido\n */\nexport default function DocumentTitle({title, ...unknownProps}) {\n    warnUnknownProps('DocumentTitle', unknownProps);\n    const {appName} = useToolkitSettings();\n\n    return <title>{appName ? `${title} | ${appName}` : title}</title>;\n}\n"],"names":[],"mappings":";;;;AAUA,SAAwB,cAAc,EAAC,OAAO,GAAG,gBAAe;AAC5D,mBAAiB,iBAAiB,YAAY;AAC9C,QAAM,EAAC,QAAA,IAAW,mBAAA;AAElB,SAAO,oBAAC,WAAO,UAAA,UAAU,GAAG,KAAK,MAAM,OAAO,KAAK,MAAA,CAAM;AAC7D;"}

package/dist/ui/navigation/FontSizeToggle.js

@@ -10,10 +10,12 @@ import Tooltip from "@mui/material/Tooltip";
 import FormatSizeIcon from "@mui/icons-material/FormatSize";
 import { useFontSize } from "./useFontSize.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaFontSizeToggle";
 const FontSizeButton = piecePart(THEME_NAME, "Button", IconButton);
 function FontSizeToggle(props) {
-  const { size = "small", onChange, texts } = usePieceProps(props, THEME_NAME);
+  const { size = "small", onChange, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("layout", texts);
   const { level, setLevel, isMounted, levels } = useFontSize();
   const [anchorElement, setAnchorElement] = useState(null);

package/dist/ui/navigation/FontSizeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"FontSizeToggle.js","sources":["../../../src/ui/navigation/FontSizeToggle.jsx"],"sourcesContent":["// El botón del tamaño de letra (normal, grande, muy grande), del tema de walk-ot: para quien lee con lentes o en una\n// pantalla chica. Va en la barra de escritorio; en el teléfono vive en el menú de ajustes.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFontSizeToggle con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport FormatSizeIcon from '@mui/icons-material/FormatSize';\n\nimport {useFontSize} from '@/ui/navigation/useFontSize.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFontSizeToggle)\nconst THEME_NAME = 'CalcitaFontSizeToggle';\nconst FontSizeButton = piecePart(THEME_NAME, 'Button', IconButton);\n\n/**\n * @param {object} [props]\n * @param {'small'|'medium'} [props.size]\n * @param {(level: string) => void} [props.onChange] la persona eligió otro tamaño (FONT_SIZE_LEVELS; para guardarlo en su servidor)\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function FontSizeToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaFontSizeToggle.defaultProps) y encima lo que llega aquí\n    const {size = 'small', onChange, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {level, setLevel, isMounted, levels} = useFontSize();\n    const [anchorElement, setAnchorElement] = useState(null);\n\n    // antes de montar no se sabe el nivel guardado: se reserva el lugar para que la barra no brinque\n    if (!isMounted) {\n        return <FontSizeButton size={size} disabled aria-hidden=\"true\" ownSx={{width: 34, height: 34}} />;\n    }\n\n    const chooseLevel = (levelKey) => {\n        setLevel(levelKey);\n        setAnchorElement(null);\n        onChange?.(levelKey);\n    };\n\n    return (\n        <>\n            <Tooltip title={t('fontSize.label')}>\n                <IconButton size={size} aria-label={t('fontSize.label')} aria-haspopup=\"menu\" onClick={(event) => setAnchorElement(event.currentTarget)}>\n                    <FormatSizeIcon fontSize=\"small\" />\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={() => setAnchorElement(null)}\n                  slotProps={{paper: {sx: {minWidth: 200}}}}>\n                {levels.map((option) => (\n                    <MenuItem key={option.key} selected={option.key === level} onClick={() => chooseLevel(option.key)}>\n                        <ListItemText primary={t(option.labelKey)} slotProps={{primary: {sx: {fontWeight: option.key === level ? 600 : 400}}}} />\n                    </MenuItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,UAAU,UAAU;AAQjE,SAAwB,eAAe,OAAO;AAE1C,QAAM,EAAC,OAAO,SAAS,UAAU,UAAS,cAAc,OAAO,UAAU;AACzE,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,OAAO,UAAU,WAAW,OAAA,IAAU,YAAA;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AAGvD,MAAI,CAAC,WAAW;AACZ,WAAO,oBAAC,gBAAA,EAAe,MAAY,UAAQ,MAAC,eAAY,QAAO,OAAO,EAAC,OAAO,IAAI,QAAQ,KAAE,CAAG;AAAA,EACnG;AAEA,QAAM,cAAc,CAAC,aAAa;AAC9B,aAAS,QAAQ;AACjB,qBAAiB,IAAI;AACrB,eAAW,QAAQ;AAAA,EACvB;AAEA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,EAAE,gBAAgB,GAC9B,UAAA,oBAAC,YAAA,EAAW,MAAY,cAAY,EAAE,gBAAgB,GAAG,iBAAc,QAAO,SAAS,CAAC,UAAU,iBAAiB,MAAM,aAAa,GAClI,UAAA,oBAAC,gBAAA,EAAe,UAAS,QAAA,CAAQ,EAAA,CACrC,EAAA,CACJ;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAK,UAAU;AAAA,QAAe,MAAM,QAAQ,aAAa;AAAA,QAAG,SAAS,MAAM,iBAAiB,IAAI;AAAA,QAC3F,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,IAAA,IAAI;AAAA,QACxC,iBAAO,IAAI,CAAC,WACT,oBAAC,UAAA,EAA0B,UAAU,OAAO,QAAQ,OAAO,SAAS,MAAM,YAAY,OAAO,GAAG,GAC5F,UAAA,oBAAC,gBAAa,SAAS,EAAE,OAAO,QAAQ,GAAG,WAAW,EAAC,SAAS,EAAC,IAAI,EAAC,YAAY,OAAO,QAAQ,QAAQ,MAAM,MAAG,EAAC,GAAI,EAAA,GAD5G,OAAO,GAEtB,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;"}
+{"version":3,"file":"FontSizeToggle.js","sources":["../../../src/ui/navigation/FontSizeToggle.jsx"],"sourcesContent":["// El botón del tamaño de letra (normal, grande, muy grande), del tema de walk-ot: para quien lee con lentes o en una\n// pantalla chica. Va en la barra de escritorio; en el teléfono vive en el menú de ajustes.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFontSizeToggle con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport FormatSizeIcon from '@mui/icons-material/FormatSize';\n\nimport {useFontSize} from '@/ui/navigation/useFontSize.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFontSizeToggle)\nconst THEME_NAME = 'CalcitaFontSizeToggle';\nconst FontSizeButton = piecePart(THEME_NAME, 'Button', IconButton);\n\n/**\n * @param {object} [props]\n * @param {'small'|'medium'} [props.size]\n * @param {(level: string) => void} [props.onChange] la persona eligió otro tamaño (FONT_SIZE_LEVELS; para guardarlo en su servidor)\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function FontSizeToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaFontSizeToggle.defaultProps) y encima lo que llega aquí\n    const {size = 'small', onChange, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {level, setLevel, isMounted, levels} = useFontSize();\n    const [anchorElement, setAnchorElement] = useState(null);\n\n    // antes de montar no se sabe el nivel guardado: se reserva el lugar para que la barra no brinque\n    if (!isMounted) {\n        return <FontSizeButton size={size} disabled aria-hidden=\"true\" ownSx={{width: 34, height: 34}} />;\n    }\n\n    const chooseLevel = (levelKey) => {\n        setLevel(levelKey);\n        setAnchorElement(null);\n        onChange?.(levelKey);\n    };\n\n    return (\n        <>\n            <Tooltip title={t('fontSize.label')}>\n                <IconButton size={size} aria-label={t('fontSize.label')} aria-haspopup=\"menu\" onClick={(event) => setAnchorElement(event.currentTarget)}>\n                    <FormatSizeIcon fontSize=\"small\" />\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={() => setAnchorElement(null)}\n                  slotProps={{paper: {sx: {minWidth: 200}}}}>\n                {levels.map((option) => (\n                    <MenuItem key={option.key} selected={option.key === level} onClick={() => chooseLevel(option.key)}>\n                        <ListItemText primary={t(option.labelKey)} slotProps={{primary: {sx: {fontWeight: option.key === level ? 600 : 400}}}} />\n                    </MenuItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,UAAU,UAAU;AAQjE,SAAwB,eAAe,OAAO;AAE1C,QAAM,EAAC,OAAO,SAAS,UAAU,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC1F,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,OAAO,UAAU,WAAW,OAAA,IAAU,YAAA;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AAGvD,MAAI,CAAC,WAAW;AACZ,WAAO,oBAAC,gBAAA,EAAe,MAAY,UAAQ,MAAC,eAAY,QAAO,OAAO,EAAC,OAAO,IAAI,QAAQ,KAAE,CAAG;AAAA,EACnG;AAEA,QAAM,cAAc,CAAC,aAAa;AAC9B,aAAS,QAAQ;AACjB,qBAAiB,IAAI;AACrB,eAAW,QAAQ;AAAA,EACvB;AAEA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,EAAE,gBAAgB,GAC9B,UAAA,oBAAC,YAAA,EAAW,MAAY,cAAY,EAAE,gBAAgB,GAAG,iBAAc,QAAO,SAAS,CAAC,UAAU,iBAAiB,MAAM,aAAa,GAClI,UAAA,oBAAC,gBAAA,EAAe,UAAS,QAAA,CAAQ,EAAA,CACrC,EAAA,CACJ;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAK,UAAU;AAAA,QAAe,MAAM,QAAQ,aAAa;AAAA,QAAG,SAAS,MAAM,iBAAiB,IAAI;AAAA,QAC3F,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,IAAA,IAAI;AAAA,QACxC,iBAAO,IAAI,CAAC,WACT,oBAAC,UAAA,EAA0B,UAAU,OAAO,QAAQ,OAAO,SAAS,MAAM,YAAY,OAAO,GAAG,GAC5F,UAAA,oBAAC,gBAAa,SAAS,EAAE,OAAO,QAAQ,GAAG,WAAW,EAAC,SAAS,EAAC,IAAI,EAAC,YAAY,OAAO,QAAQ,QAAQ,MAAM,MAAG,EAAC,GAAI,EAAA,GAD5G,OAAO,GAEtB,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;"}

package/dist/ui/navigation/LanguageToggle.js

@@ -8,11 +8,13 @@ import { useToolkitSettings } from "../../toolkit/toolkitContext.js";
 import { DEFAULT_LANGUAGES } from "../../toolkit/toolkitSettings.js";
 import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaLanguageToggle";
 const LanguageButton = piecePart(THEME_NAME, "Button", Button);
 const LANGUAGES = Object.freeze(DEFAULT_LANGUAGES.map((entry) => entry.code));
 function LanguageToggle(props) {
-  const { inverted = false, onChange, texts } = usePieceProps(props, THEME_NAME);
+  const { inverted = false, onChange, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t, language, changeLanguage } = useToolkitTranslation("common", texts);
   const { languages = DEFAULT_LANGUAGES } = useToolkitSettings();
   const [menuAnchor, setMenuAnchor] = useState(null);

package/dist/ui/navigation/LanguageToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageToggle.js","sources":["../../../src/ui/navigation/LanguageToggle.jsx"],"sourcesContent":["// El botón de idioma de la barra y de las pantallas de entrada.\n//\n// Los idiomas son los que ofrece la app (ToolkitProvider `languages`; por omisión español e inglés):\n//   - con dos, un botón que cambia al otro (dice su código: «EN»);\n//   - con tres o más, el botón dice el de ahora y abre un menú con cada uno en su propio idioma («Português»), como lo busca\n//     quien lo habla; el elegido con su palomita.\n//\n// Solo avisa el idioma nuevo (onLanguageChange de ToolkitProvider). Lo demás lo hace el proyecto: su i18n, el header\n// Accept-Language de las peticiones y volver a pedir los datos del servidor, que traen textos traducidos. Las traducciones de\n// un idioma que agregue el proyecto van en `texts` de ToolkitProvider: el paquete solo trae español e inglés.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaLanguageToggle con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Button from '@mui/material/Button';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {DEFAULT_LANGUAGES} from '@/toolkit/toolkitSettings.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaLanguageToggle)\nconst THEME_NAME = 'CalcitaLanguageToggle';\nconst LanguageButton = piecePart(THEME_NAME, 'Button', Button);\n\n/** Los idiomas que traen los textos del paquete. */\nexport const LANGUAGES = Object.freeze(DEFAULT_LANGUAGES.map((entry) => entry.code));\n\n/**\n * @param {object} [props]\n * @param {boolean} [props.inverted] texto blanco para fondos oscuros\n * @param {(language: string) => void} [props.onChange] además de avisar a ToolkitProvider, cada que se elige un idioma\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {language: {switchToNamed, choose}}\n */\nexport default function LanguageToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaLanguageToggle.defaultProps) y encima lo que llega aquí\n    const {inverted = false, onChange, texts} = usePieceProps(props, THEME_NAME);\n    const {t, language, changeLanguage} = useToolkitTranslation('common', texts);\n    const {languages = DEFAULT_LANGUAGES} = useToolkitSettings();\n    const [menuAnchor, setMenuAnchor] = useState(null);\n    const current = languages.find((entry) => entry.code === language) ?? languages[0];\n    const buttonSx = {minWidth: 0, fontWeight: 700, letterSpacing: '0.08em', color: inverted ? 'common.white' : 'text.secondary'};\n\n    const choose = (code) => {\n        setMenuAnchor(null);\n        changeLanguage(code);\n        onChange?.(code);\n    };\n\n    // con dos: un botón que cambia al otro\n    if (languages.length <= 2) {\n        const next = languages.find((entry) => entry.code !== current.code) ?? current;\n        // el aviso de siempre para español e inglés; para otro idioma, con su nombre\n        const ariaLabel = t(`language.switchTo.${next.code}`, {defaultValue: t('language.switchToNamed', {name: next.label})});\n        return (\n            <LanguageButton size=\"small\" variant=\"text\" onClick={() => choose(next.code)} lang={next.code} aria-label={ariaLabel} ownSx={buttonSx}>\n                {next.code.toUpperCase()}\n            </LanguageButton>\n        );\n    }\n\n    // con tres o más: el de ahora y un menú con todos\n    return (\n        <>\n            <LanguageButton size=\"small\" variant=\"text\" onClick={(event) => setMenuAnchor(event.currentTarget)} aria-haspopup=\"menu\"\n                    aria-expanded={Boolean(menuAnchor)} aria-label={t('language.choose', {name: current.label})} ownSx={buttonSx}>\n                {current.code.toUpperCase()}\n            </LanguageButton>\n            <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={() => setMenuAnchor(null)}>\n                {languages.map((entry) => (\n                    <MenuItem key={entry.code} lang={entry.code} selected={entry.code === current.code} onClick={() => choose(entry.code)}>\n                        {entry.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AA0BA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,UAAU,MAAM;AAGtD,MAAM,YAAY,OAAO,OAAO,kBAAkB,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC;AAQnF,SAAwB,eAAe,OAAO;AAE1C,QAAM,EAAC,WAAW,OAAO,UAAU,UAAS,cAAc,OAAO,UAAU;AAC3E,QAAM,EAAC,GAAG,UAAU,mBAAkB,sBAAsB,UAAU,KAAK;AAC3E,QAAM,EAAC,YAAY,kBAAA,IAAqB,mBAAA;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,QAAM,UAAU,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,KAAK,UAAU,CAAC;AACjF,QAAM,WAAW,EAAC,UAAU,GAAG,YAAY,KAAK,eAAe,UAAU,OAAO,WAAW,iBAAiB,iBAAA;AAE5G,QAAM,SAAS,CAAC,SAAS;AACrB,kBAAc,IAAI;AAClB,mBAAe,IAAI;AACnB,eAAW,IAAI;AAAA,EACnB;AAGA,MAAI,UAAU,UAAU,GAAG;AACvB,UAAM,OAAO,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,IAAI,KAAK;AAEvE,UAAM,YAAY,EAAE,qBAAqB,KAAK,IAAI,IAAI,EAAC,cAAc,EAAE,0BAA0B,EAAC,MAAM,KAAK,MAAA,CAAM,GAAE;AACrH,WACI,oBAAC,kBAAe,MAAK,SAAQ,SAAQ,QAAO,SAAS,MAAM,OAAO,KAAK,IAAI,GAAG,MAAM,KAAK,MAAM,cAAY,WAAW,OAAO,UACxH,UAAA,KAAK,KAAK,YAAA,EAAY,CAC3B;AAAA,EAER;AAGA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAe,MAAK;AAAA,QAAQ,SAAQ;AAAA,QAAO,SAAS,CAAC,UAAU,cAAc,MAAM,aAAa;AAAA,QAAG,iBAAc;AAAA,QAC1G,iBAAe,QAAQ,UAAU;AAAA,QAAG,cAAY,EAAE,mBAAmB,EAAC,MAAM,QAAQ,OAAM;AAAA,QAAG,OAAO;AAAA,QACvG,UAAA,QAAQ,KAAK,YAAA;AAAA,MAAY;AAAA,IAAA;AAAA,wBAE7B,MAAA,EAAK,UAAU,YAAY,MAAM,QAAQ,UAAU,GAAG,SAAS,MAAM,cAAc,IAAI,GACnF,oBAAU,IAAI,CAAC,UACZ,oBAAC,UAAA,EAA0B,MAAM,MAAM,MAAM,UAAU,MAAM,SAAS,QAAQ,MAAM,SAAS,MAAM,OAAO,MAAM,IAAI,GAC/G,UAAA,MAAM,SADI,MAAM,IAErB,CACH,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"LanguageToggle.js","sources":["../../../src/ui/navigation/LanguageToggle.jsx"],"sourcesContent":["// El botón de idioma de la barra y de las pantallas de entrada.\n//\n// Los idiomas son los que ofrece la app (ToolkitProvider `languages`; por omisión español e inglés):\n//   - con dos, un botón que cambia al otro (dice su código: «EN»);\n//   - con tres o más, el botón dice el de ahora y abre un menú con cada uno en su propio idioma («Português»), como lo busca\n//     quien lo habla; el elegido con su palomita.\n//\n// Solo avisa el idioma nuevo (onLanguageChange de ToolkitProvider). Lo demás lo hace el proyecto: su i18n, el header\n// Accept-Language de las peticiones y volver a pedir los datos del servidor, que traen textos traducidos. Las traducciones de\n// un idioma que agregue el proyecto van en `texts` de ToolkitProvider: el paquete solo trae español e inglés.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaLanguageToggle con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Button from '@mui/material/Button';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {DEFAULT_LANGUAGES} from '@/toolkit/toolkitSettings.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaLanguageToggle)\nconst THEME_NAME = 'CalcitaLanguageToggle';\nconst LanguageButton = piecePart(THEME_NAME, 'Button', Button);\n\n/** Los idiomas que traen los textos del paquete. */\nexport const LANGUAGES = Object.freeze(DEFAULT_LANGUAGES.map((entry) => entry.code));\n\n/**\n * @param {object} [props]\n * @param {boolean} [props.inverted] texto blanco para fondos oscuros\n * @param {(language: string) => void} [props.onChange] además de avisar a ToolkitProvider, cada que se elige un idioma\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {language: {switchToNamed, choose}}\n */\nexport default function LanguageToggle(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaLanguageToggle.defaultProps) y encima lo que llega aquí\n    const {inverted = false, onChange, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t, language, changeLanguage} = useToolkitTranslation('common', texts);\n    const {languages = DEFAULT_LANGUAGES} = useToolkitSettings();\n    const [menuAnchor, setMenuAnchor] = useState(null);\n    const current = languages.find((entry) => entry.code === language) ?? languages[0];\n    const buttonSx = {minWidth: 0, fontWeight: 700, letterSpacing: '0.08em', color: inverted ? 'common.white' : 'text.secondary'};\n\n    const choose = (code) => {\n        setMenuAnchor(null);\n        changeLanguage(code);\n        onChange?.(code);\n    };\n\n    // con dos: un botón que cambia al otro\n    if (languages.length <= 2) {\n        const next = languages.find((entry) => entry.code !== current.code) ?? current;\n        // el aviso de siempre para español e inglés; para otro idioma, con su nombre\n        const ariaLabel = t(`language.switchTo.${next.code}`, {defaultValue: t('language.switchToNamed', {name: next.label})});\n        return (\n            <LanguageButton size=\"small\" variant=\"text\" onClick={() => choose(next.code)} lang={next.code} aria-label={ariaLabel} ownSx={buttonSx}>\n                {next.code.toUpperCase()}\n            </LanguageButton>\n        );\n    }\n\n    // con tres o más: el de ahora y un menú con todos\n    return (\n        <>\n            <LanguageButton size=\"small\" variant=\"text\" onClick={(event) => setMenuAnchor(event.currentTarget)} aria-haspopup=\"menu\"\n                    aria-expanded={Boolean(menuAnchor)} aria-label={t('language.choose', {name: current.label})} ownSx={buttonSx}>\n                {current.code.toUpperCase()}\n            </LanguageButton>\n            <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={() => setMenuAnchor(null)}>\n                {languages.map((entry) => (\n                    <MenuItem key={entry.code} lang={entry.code} selected={entry.code === current.code} onClick={() => choose(entry.code)}>\n                        {entry.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,UAAU,MAAM;AAGtD,MAAM,YAAY,OAAO,OAAO,kBAAkB,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC;AAQnF,SAAwB,eAAe,OAAO;AAE1C,QAAM,EAAC,WAAW,OAAO,UAAU,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC5F,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,GAAG,UAAU,mBAAkB,sBAAsB,UAAU,KAAK;AAC3E,QAAM,EAAC,YAAY,kBAAA,IAAqB,mBAAA;AACxC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,QAAM,UAAU,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,KAAK,UAAU,CAAC;AACjF,QAAM,WAAW,EAAC,UAAU,GAAG,YAAY,KAAK,eAAe,UAAU,OAAO,WAAW,iBAAiB,iBAAA;AAE5G,QAAM,SAAS,CAAC,SAAS;AACrB,kBAAc,IAAI;AAClB,mBAAe,IAAI;AACnB,eAAW,IAAI;AAAA,EACnB;AAGA,MAAI,UAAU,UAAU,GAAG;AACvB,UAAM,OAAO,UAAU,KAAK,CAAC,UAAU,MAAM,SAAS,QAAQ,IAAI,KAAK;AAEvE,UAAM,YAAY,EAAE,qBAAqB,KAAK,IAAI,IAAI,EAAC,cAAc,EAAE,0BAA0B,EAAC,MAAM,KAAK,MAAA,CAAM,GAAE;AACrH,WACI,oBAAC,kBAAe,MAAK,SAAQ,SAAQ,QAAO,SAAS,MAAM,OAAO,KAAK,IAAI,GAAG,MAAM,KAAK,MAAM,cAAY,WAAW,OAAO,UACxH,UAAA,KAAK,KAAK,YAAA,EAAY,CAC3B;AAAA,EAER;AAGA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAe,MAAK;AAAA,QAAQ,SAAQ;AAAA,QAAO,SAAS,CAAC,UAAU,cAAc,MAAM,aAAa;AAAA,QAAG,iBAAc;AAAA,QAC1G,iBAAe,QAAQ,UAAU;AAAA,QAAG,cAAY,EAAE,mBAAmB,EAAC,MAAM,QAAQ,OAAM;AAAA,QAAG,OAAO;AAAA,QACvG,UAAA,QAAQ,KAAK,YAAA;AAAA,MAAY;AAAA,IAAA;AAAA,wBAE7B,MAAA,EAAK,UAAU,YAAY,MAAM,QAAQ,UAAU,GAAG,SAAS,MAAM,cAAc,IAAI,GACnF,oBAAU,IAAI,CAAC,UACZ,oBAAC,UAAA,EAA0B,MAAM,MAAM,MAAM,UAAU,MAAM,SAAS,QAAQ,MAAM,SAAS,MAAM,OAAO,MAAM,IAAI,GAC/G,UAAA,MAAM,SADI,MAAM,IAErB,CACH,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}

package/dist/ui/navigation/PageBreadcrumbs.js

@@ -9,12 +9,14 @@ import { textSizeOf } from "../../theme/appleTracking.js";
 import ScrollableRow from "../layout/ScrollableRow.js";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaPageBreadcrumbs";
 const BreadcrumbsRoot = piecePart(THEME_NAME, "Root", Breadcrumbs);
 const BreadcrumbsLink = piecePart(THEME_NAME, "Link", Link);
 const BreadcrumbsCurrent = piecePart(THEME_NAME, "Current", Typography);
 function PageBreadcrumbs(props) {
-  const { items, texts } = usePieceProps(props, THEME_NAME);
+  const { items, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("layout", texts);
   const { Link: RouterLink } = useToolkitNavigation();
   if (items.length === 0) {

package/dist/ui/navigation/PageBreadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageBreadcrumbs.js","sources":["../../../src/ui/navigation/PageBreadcrumbs.jsx"],"sourcesContent":["// Las migas de una pantalla (Inicio › Catálogos › Productos): cada una lleva a su pantalla menos la última, que es donde\n// ya está la persona. En el teléfono no se parten en dos renglones: se deslizan de lado en la misma tira que los filtros\n// rápidos (ScrollableRow: sin barra de desplazamiento, la orilla donde hay más se desvanece y se arrastra con el mouse).\n// Antes deslizaba la lista de MUI y salía la barra gris del navegador debajo de las migas.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPageBreadcrumbs con defaultProps y\n// styleOverrides de sus partes: root, link, current.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Breadcrumbs from '@mui/material/Breadcrumbs';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\nimport NavigateNextIcon from '@mui/icons-material/NavigateNext';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPageBreadcrumbs)\nconst THEME_NAME = 'CalcitaPageBreadcrumbs';\nconst BreadcrumbsRoot = piecePart(THEME_NAME, 'Root', Breadcrumbs);\nconst BreadcrumbsLink = piecePart(THEME_NAME, 'Link', Link);\nconst BreadcrumbsCurrent = piecePart(THEME_NAME, 'Current', Typography);\n\n/**\n * @param {object} props\n * @param {Array<{label: string, to?: string}>} props.items textos ya traducidos\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function PageBreadcrumbs(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPageBreadcrumbs.defaultProps) y encima lo que llega aquí\n    const {items, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {Link: RouterLink} = useToolkitNavigation();\n    if (items.length === 0) {\n        return null;\n    }\n    return (\n        <ScrollableRow py={0}>\n            <BreadcrumbsRoot aria-label={t('breadcrumbs')} separator={<NavigateNextIcon fontSize=\"small\" />}\n                         ownSx={{...textSizeOf(13), color: 'text.secondary', flex: '0 0 auto', '& .MuiBreadcrumbs-ol': {flexWrap: 'nowrap'},\n                              '& .MuiBreadcrumbs-li': {flex: '0 0 auto'}}}>\n                {items.map((item, index) => {\n                    const isLast = index === items.length - 1;\n                    if (!isLast && item.to) {\n                        return (\n                            <BreadcrumbsLink key={`${item.to}-${index}`} component={RouterLink} to={item.to} underline=\"hover\" color=\"inherit\" ownSx={{fontSize: 'inherit'}}>\n                                {item.label}\n                            </BreadcrumbsLink>\n                        );\n                    }\n                    return (\n                        <BreadcrumbsCurrent key={`${item.label}-${index}`} component=\"span\" aria-current={isLast ? 'page' : undefined}\n                                    ownSx={{fontSize: 'inherit', fontWeight: isLast ? 500 : 400, color: isLast ? 'text.primary' : 'text.secondary'}}>\n                            {item.label}\n                        </BreadcrumbsCurrent>\n                    );\n                })}\n            </BreadcrumbsRoot>\n        </ScrollableRow>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,QAAQ,WAAW;AACjE,MAAM,kBAAkB,UAAU,YAAY,QAAQ,IAAI;AAC1D,MAAM,qBAAqB,UAAU,YAAY,WAAW,UAAU;AAOtE,SAAwB,gBAAgB,OAAO;AAE3C,QAAM,EAAC,OAAO,MAAA,IAAS,cAAc,OAAO,UAAU;AACtD,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,MAAI,MAAM,WAAW,GAAG;AACpB,WAAO;AAAA,EACX;AACA,SACI,oBAAC,eAAA,EAAc,IAAI,GACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAgB,cAAY,EAAE,aAAa;AAAA,MAAG,WAAW,oBAAC,kBAAA,EAAiB,UAAS,QAAA,CAAQ;AAAA,MAChF,OAAO;AAAA,QAAC,GAAG,WAAW,EAAE;AAAA,QAAG,OAAO;AAAA,QAAkB,MAAM;AAAA,QAAY,wBAAwB,EAAC,UAAU,SAAA;AAAA,QACpG,wBAAwB,EAAC,MAAM,WAAA;AAAA,MAAU;AAAA,MACtD,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,cAAM,SAAS,UAAU,MAAM,SAAS;AACxC,YAAI,CAAC,UAAU,KAAK,IAAI;AACpB,iBACI,oBAAC,mBAA4C,WAAW,YAAY,IAAI,KAAK,IAAI,WAAU,SAAQ,OAAM,WAAU,OAAO,EAAC,UAAU,UAAA,GAChI,UAAA,KAAK,MAAA,GADY,GAAG,KAAK,EAAE,IAAI,KAAK,EAEzC;AAAA,QAER;AACA,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAAkD,WAAU;AAAA,YAAO,gBAAc,SAAS,SAAS;AAAA,YACxF,OAAO,EAAC,UAAU,WAAW,YAAY,SAAS,MAAM,KAAK,OAAO,SAAS,iBAAiB,iBAAA;AAAA,YACrG,UAAA,KAAK;AAAA,UAAA;AAAA,UAFe,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAAA;AAAA,MAKvD,CAAC;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}
+{"version":3,"file":"PageBreadcrumbs.js","sources":["../../../src/ui/navigation/PageBreadcrumbs.jsx"],"sourcesContent":["// Las migas de una pantalla (Inicio › Catálogos › Productos): cada una lleva a su pantalla menos la última, que es donde\n// ya está la persona. En el teléfono no se parten en dos renglones: se deslizan de lado en la misma tira que los filtros\n// rápidos (ScrollableRow: sin barra de desplazamiento, la orilla donde hay más se desvanece y se arrastra con el mouse).\n// Antes deslizaba la lista de MUI y salía la barra gris del navegador debajo de las migas.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPageBreadcrumbs con defaultProps y\n// styleOverrides de sus partes: root, link, current.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Breadcrumbs from '@mui/material/Breadcrumbs';\nimport Link from '@mui/material/Link';\nimport Typography from '@mui/material/Typography';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\nimport NavigateNextIcon from '@mui/icons-material/NavigateNext';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPageBreadcrumbs)\nconst THEME_NAME = 'CalcitaPageBreadcrumbs';\nconst BreadcrumbsRoot = piecePart(THEME_NAME, 'Root', Breadcrumbs);\nconst BreadcrumbsLink = piecePart(THEME_NAME, 'Link', Link);\nconst BreadcrumbsCurrent = piecePart(THEME_NAME, 'Current', Typography);\n\n/**\n * @param {object} props\n * @param {Array<{label: string, to?: string}>} props.items textos ya traducidos\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function PageBreadcrumbs(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPageBreadcrumbs.defaultProps) y encima lo que llega aquí\n    const {items, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('layout', texts);\n    const {Link: RouterLink} = useToolkitNavigation();\n    if (items.length === 0) {\n        return null;\n    }\n    return (\n        <ScrollableRow py={0}>\n            <BreadcrumbsRoot aria-label={t('breadcrumbs')} separator={<NavigateNextIcon fontSize=\"small\" />}\n                         ownSx={{...textSizeOf(13), color: 'text.secondary', flex: '0 0 auto', '& .MuiBreadcrumbs-ol': {flexWrap: 'nowrap'},\n                              '& .MuiBreadcrumbs-li': {flex: '0 0 auto'}}}>\n                {items.map((item, index) => {\n                    const isLast = index === items.length - 1;\n                    if (!isLast && item.to) {\n                        return (\n                            <BreadcrumbsLink key={`${item.to}-${index}`} component={RouterLink} to={item.to} underline=\"hover\" color=\"inherit\" ownSx={{fontSize: 'inherit'}}>\n                                {item.label}\n                            </BreadcrumbsLink>\n                        );\n                    }\n                    return (\n                        <BreadcrumbsCurrent key={`${item.label}-${index}`} component=\"span\" aria-current={isLast ? 'page' : undefined}\n                                    ownSx={{fontSize: 'inherit', fontWeight: isLast ? 500 : 400, color: isLast ? 'text.primary' : 'text.secondary'}}>\n                            {item.label}\n                        </BreadcrumbsCurrent>\n                    );\n                })}\n            </BreadcrumbsRoot>\n        </ScrollableRow>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,QAAQ,WAAW;AACjE,MAAM,kBAAkB,UAAU,YAAY,QAAQ,IAAI;AAC1D,MAAM,qBAAqB,UAAU,YAAY,WAAW,UAAU;AAOtE,SAAwB,gBAAgB,OAAO;AAE3C,QAAM,EAAC,OAAO,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AACvE,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,MAAI,MAAM,WAAW,GAAG;AACpB,WAAO;AAAA,EACX;AACA,SACI,oBAAC,eAAA,EAAc,IAAI,GACf,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAgB,cAAY,EAAE,aAAa;AAAA,MAAG,WAAW,oBAAC,kBAAA,EAAiB,UAAS,QAAA,CAAQ;AAAA,MAChF,OAAO;AAAA,QAAC,GAAG,WAAW,EAAE;AAAA,QAAG,OAAO;AAAA,QAAkB,MAAM;AAAA,QAAY,wBAAwB,EAAC,UAAU,SAAA;AAAA,QACpG,wBAAwB,EAAC,MAAM,WAAA;AAAA,MAAU;AAAA,MACtD,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AACxB,cAAM,SAAS,UAAU,MAAM,SAAS;AACxC,YAAI,CAAC,UAAU,KAAK,IAAI;AACpB,iBACI,oBAAC,mBAA4C,WAAW,YAAY,IAAI,KAAK,IAAI,WAAU,SAAQ,OAAM,WAAU,OAAO,EAAC,UAAU,UAAA,GAChI,UAAA,KAAK,MAAA,GADY,GAAG,KAAK,EAAE,IAAI,KAAK,EAEzC;AAAA,QAER;AACA,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAAkD,WAAU;AAAA,YAAO,gBAAc,SAAS,SAAS;AAAA,YACxF,OAAO,EAAC,UAAU,WAAW,YAAY,SAAS,MAAM,KAAK,OAAO,SAAS,iBAAiB,iBAAA;AAAA,YACrG,UAAA,KAAK;AAAA,UAAA;AAAA,UAFe,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAAA;AAAA,MAKvD,CAAC;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}

package/dist/ui/timeline/GroupedTimeline.js

@@ -20,6 +20,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { paletteOf } from "../../theme/components/paletteOf.js";
 import { TIMELINE_EMPHASIS, timelineDotOf } from "./timelineDot.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaGroupedTimeline";
 const TimelineGroup = piecePart(THEME_NAME, "Group", Box);
 const TimelineGroupHeader = piecePart(THEME_NAME, "GroupHeader", Stack);
@@ -35,7 +36,8 @@ const HIGHLIGHT_TINT_PERCENT = 8;
 const LEFT_ALIGNED_TIMELINE = { m: 0, px: 0, py: 0.5, [`& .${timelineItemClasses.root}::before`]: { flex: 0, p: 0 } };
 const ALTERNATE_TIMELINE = { m: 0, px: 0, py: 0.5 };
 function GroupedTimeline(props) {
-  const { groups, onGroupToggle } = usePieceProps(props, THEME_NAME);
+  const { groups, onGroupToggle, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const theme = useTheme();
   const isWide = useMediaQuery(theme.breakpoints.up("md"));
   const [expandedKeys, setExpandedKeys] = useState(() => new Set(