@stackcraftmx/calcita 0.0.0-stage → 0.23.0

package/dist/ui/metrics/ColumnChart.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Bar } from "recharts";
+import { formatNumber } from "../../formatting.js";
+import ChartTooltip from "./ChartTooltip.js";
+import TableToggle from "./TableToggle.js";
+const AXIS_COLOR = "var(--mui-palette-text-secondary)";
+const AXIS_FONT_PIXELS = 12;
+const AXIS_TEXT = { fill: AXIS_COLOR, fontSize: AXIS_FONT_PIXELS };
+const AXIS_MINIMUM_WIDTH_PIXELS = 48;
+const AXIS_PADDING_PIXELS = 16;
+const AXIS_CHARACTER_PIXELS = 7;
+const AXIS_EXTRA_CHARACTERS = 1;
+const REFERENCE_SWATCH_PIXELS = 20;
+function valueAxisWidthOf(highestValue, formatValue) {
+  const longestLabel = formatValue(highestValue).length + AXIS_EXTRA_CHARACTERS;
+  return Math.max(AXIS_MINIMUM_WIDTH_PIXELS, AXIS_PADDING_PIXELS + longestLabel * AXIS_CHARACTER_PIXELS);
+}
+function ColumnChart({
+  data,
+  periodLabel,
+  valueLabel,
+  ariaLabel,
+  emptyLabel,
+  height = 220,
+  tone = "primary",
+  onSelect,
+  formatValue = formatNumber,
+  referenceLine
+}) {
+  const [asTable, setAsTable] = useState(false);
+  if (!data.length) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyLabel });
+  }
+  const highestValue = Math.max(...data.map((item) => item.value), referenceLine?.value ?? 0);
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: () => setAsTable((current) => !current) }),
+    asTable ? /* @__PURE__ */ jsx(Box, { sx: { maxHeight: height, overflowY: "auto" }, children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: periodLabel }),
+        /* @__PURE__ */ jsx(TableCell, { align: "right", children: valueLabel })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: data.map((item) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: item.label }),
+        /* @__PURE__ */ jsx(TableCell, { align: "right", children: formatValue(item.value) })
+      ] }, item.key)) })
+    ] }) }) : /* @__PURE__ */ jsx(Box, { role: "img", "aria-label": ariaLabel, sx: { height, color: `${tone}.main` }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { top: 8, right: 8, bottom: 0, left: -8 }, barCategoryGap: 4, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "var(--mui-palette-divider)" }),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "label",
+          tick: AXIS_TEXT,
+          tickLine: false,
+          axisLine: { stroke: "var(--mui-palette-divider)" },
+          interval: "preserveStartEnd",
+          minTickGap: 12
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          allowDecimals: false,
+          tick: AXIS_TEXT,
+          tickLine: false,
+          axisLine: false,
+          width: valueAxisWidthOf(highestValue, formatValue),
+          tickFormatter: (value) => formatValue(value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          cursor: { fill: "var(--mui-palette-action-hover)" },
+          content: /* @__PURE__ */ jsx(ChartTooltip, { render: (item) => item.tooltip ?? `${item.label}: ${formatValue(item.value)}` })
+        }
+      ),
+      referenceLine && // extendDomain: si la referencia queda arriba de todas las columnas, el eje crece hasta ella
+      /* @__PURE__ */ jsx(ReferenceLine, { y: referenceLine.value, ifOverflow: "extendDomain", stroke: AXIS_COLOR, strokeDasharray: "4 4" }),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: "value",
+          fill: "currentColor",
+          maxBarSize: 28,
+          radius: [4, 4, 0, 0],
+          isAnimationActive: false,
+          cursor: onSelect ? "pointer" : "default",
+          onClick: onSelect ? (entry) => onSelect(entry.payload) : void 0
+        }
+      )
+    ] }) }) }),
+    referenceLine && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 0.75, mt: 0.5 }, children: [
+      /* @__PURE__ */ jsx(Box, { "aria-hidden": "true", sx: { width: REFERENCE_SWATCH_PIXELS, borderTop: "2px dashed", borderColor: "text.secondary" } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: referenceLine.label })
+    ] })
+  ] });
+}
+export {
+  ColumnChart as default
+};
+//# sourceMappingURL=ColumnChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnChart.js","sources":["../../../src/ui/metrics/ColumnChart.jsx"],"sourcesContent":["// Columnas de UNA serie a lo largo del tiempo (p. ej. registros leídos por mes), dibujadas con Recharts.\n//\n// Recharts y no SVG a mano: ejes, escalas, rótulos que no se encimen y el tooltip ya los resolvió la librería. Lo que se\n// decide aquí son las reglas de visualización:\n//   - una serie → un color (el del tono vía currentColor) y SIN leyenda: el título ya dice qué es;\n//   - columnas de 28 px como máximo, punta redondeada, base cuadrada;\n//   - rejilla horizontal de 1 px, sólida y recesiva; el texto de los ejes en tinta secundaria;\n//   - tooltip por columna y VISTA DE TABLA;\n//   - una línea de referencia opcional (p. ej. la meta), punteada y en tinta secundaria: se lee sin competir con las\n//     columnas, y el eje crece lo necesario para que siempre se vea. Su rótulo va debajo de la gráfica y no sobre la\n//     línea, donde se encimaba con la columna del último mes; así también lo lee quien ve la tabla.\n//\n// El valor se escribe con formatValue (por omisión, número con separador de miles): con él una serie puede ir en\n// porcentaje. El eje mide lo que mide su número más largo, para que «2,500,000» no salga cortado.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport 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 {Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';\n\nimport {formatNumber} from '@/formatting.js';\nimport ChartTooltip from '@/ui/metrics/ChartTooltip.jsx';\nimport TableToggle from '@/ui/metrics/TableToggle.jsx';\n\nconst AXIS_COLOR = 'var(--mui-palette-text-secondary)';\nconst AXIS_FONT_PIXELS = 12;\nconst AXIS_TEXT = {fill: AXIS_COLOR, fontSize: AXIS_FONT_PIXELS};\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 punteada que acompaña al rótulo de la línea de referencia\nconst REFERENCE_SWATCH_PIXELS = 20;\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 */\nfunction 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 * @param {object} props\n * @param {Array<{key: string, value: number, label: string, tooltip?: string}>} props.data\n * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido\n * @param {string} props.valueLabel cómo se llama lo que se cuenta, ya traducido\n * @param {string} props.ariaLabel\n * @param {string} props.emptyLabel\n * @param {number} [props.height]\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone]\n * @param {(item: any) => void} [props.onSelect] recibe el renglón de data que se picó\n * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el\n *     tooltip)\n * @param {{value: number, label: string}} [props.referenceLine] línea de referencia con su rótulo ya traducido («Meta:\n *     10 %»)\n */\nexport default function ColumnChart({\n    data, periodLabel, valueLabel, ariaLabel, emptyLabel, height = 220, tone = 'primary', onSelect, formatValue = formatNumber, referenceLine,\n}) {\n    const [asTable, setAsTable] = useState(false);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!data.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // el valor más alto que se dibuja (el de las columnas o el de la línea de referencia) decide el ancho del eje\n    const highestValue = Math.max(...data.map((item) => item.value), referenceLine?.value ?? 0);\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={() => setAsTable((current) => !current)} />\n            {asTable ? (\n                <Box sx={{maxHeight: height, overflowY: 'auto'}}>\n                    <Table size=\"small\">\n                        <TableHead>\n                            <TableRow><TableCell>{periodLabel}</TableCell><TableCell align=\"right\">{valueLabel}</TableCell></TableRow>\n                        </TableHead>\n                        <TableBody>\n                            {data.map((item) => (\n                                <TableRow key={item.key}>\n                                    <TableCell>{item.label}</TableCell>\n                                    <TableCell align=\"right\">{formatValue(item.value)}</TableCell>\n                                </TableRow>\n                            ))}\n                        </TableBody>\n                    </Table>\n                </Box>\n            ) : (\n                <Box role=\"img\" aria-label={ariaLabel} sx={{height, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={data} margin={{top: 8, right: 8, bottom: 0, left: -8}} barCategoryGap={4}>\n                            <CartesianGrid vertical={false} stroke=\"var(--mui-palette-divider)\" />\n                            <XAxis dataKey=\"label\" tick={AXIS_TEXT} tickLine={false} axisLine={{stroke: 'var(--mui-palette-divider)'}}\n                                   interval=\"preserveStartEnd\" minTickGap={12} />\n                            <YAxis allowDecimals={false} tick={AXIS_TEXT} tickLine={false} axisLine={false}\n                                   width={valueAxisWidthOf(highestValue, formatValue)} tickFormatter={(value) => formatValue(value)} />\n                            <Tooltip cursor={{fill: 'var(--mui-palette-action-hover)'}}\n                                     content={<ChartTooltip render={(item) => item.tooltip ?? `${item.label}: ${formatValue(item.value)}`} />} />\n                            {referenceLine && (\n                                // extendDomain: si la referencia queda arriba de todas las columnas, el eje crece hasta ella\n                                <ReferenceLine y={referenceLine.value} ifOverflow=\"extendDomain\" stroke={AXIS_COLOR} strokeDasharray=\"4 4\" />\n                            )}\n                            <Bar dataKey=\"value\" fill=\"currentColor\" maxBarSize={28} radius={[4, 4, 0, 0]} isAnimationActive={false}\n                                 cursor={onSelect ? 'pointer' : 'default'} onClick={onSelect ? (entry) => onSelect(entry.payload) : undefined} />\n                        </BarChart>\n                    </ResponsiveContainer>\n                </Box>\n            )}\n            {referenceLine && (\n                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.75, mt: 0.5}}>\n                    <Box aria-hidden=\"true\" sx={{width: REFERENCE_SWATCH_PIXELS, borderTop: '2px dashed', borderColor: 'text.secondary'}} />\n                    <Typography variant=\"caption\" color=\"text.secondary\">{referenceLine.label}</Typography>\n                </Box>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/MetricCard.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import CardActionArea from "@mui/material/CardActionArea";
+import Chip from "@mui/material/Chip";
+import Paper from "@mui/material/Paper";
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import RemoveIcon from "@mui/icons-material/Remove";
+const TONES = ["info", "success", "warning", "error"];
+const TREND_DIRECTION = Object.freeze({ up: "up", down: "down", flat: "flat" });
+const TREND_ICONS = Object.freeze({
+  [TREND_DIRECTION.up]: ArrowUpwardIcon,
+  [TREND_DIRECTION.down]: ArrowDownwardIcon,
+  [TREND_DIRECTION.flat]: RemoveIcon
+});
+const TITLE_ROW_MIN_HEIGHT_PIXELS = 24;
+function TrendChip({ trend }) {
+  const { t } = useToolkitTranslation("metricCard");
+  const direction = TREND_ICONS[trend.direction] ? trend.direction : TREND_DIRECTION.flat;
+  const TrendIcon = TREND_ICONS[direction];
+  const isGood = trend.isGood ?? direction === TREND_DIRECTION.up;
+  const color = direction === TREND_DIRECTION.flat ? "default" : isGood ? "success" : "error";
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      size: "small",
+      color,
+      variant: "outlined",
+      icon: /* @__PURE__ */ jsx(TrendIcon, {}),
+      label: trend.label,
+      "aria-label": `${t(`trend.${direction}`)} ${trend.label}`,
+      sx: { fontWeight: 600, "& .MuiChip-icon": { fontSize: 16 } }
+    }
+  );
+}
+function MetricCard({ label, value, caption, tone = "info", valueColor, isLoading = false, to, trend }) {
+  const { Link } = useToolkitNavigation();
+  const paletteTone = TONES.includes(tone) ? tone : "info";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center", justifyContent: "space-between", minHeight: TITLE_ROW_MIN_HEIGHT_PIXELS }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", component: "p", sx: { minWidth: 0 }, children: label }),
+      trend && !isLoading && /* @__PURE__ */ jsx(TrendChip, { trend })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "p", sx: { mt: 0.75, fontWeight: 600, fontVariantNumeric: "tabular-nums", color: valueColor ?? `${paletteTone}.dark` }, children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 120 }) : value }),
+    caption && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", sx: { mt: 0.5 }, children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 160 }) : caption })
+  ] });
+  return /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: {
+    borderTop: 3,
+    borderTopColor: `${paletteTone}.light`,
+    height: "100%",
+    overflow: "hidden",
+    ...to ? {} : { p: 2.5 }
+  }, children: to ? /* @__PURE__ */ jsx(CardActionArea, { component: Link, to, sx: { p: 2.5, height: "100%", alignItems: "flex-start", display: "block" }, children: content }) : content });
+}
+export {
+  TREND_DIRECTION,
+  MetricCard as default
+};
+//# sourceMappingURL=MetricCard.js.map

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

@@ -0,0 +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// Genérico del paquete: function (regla de la casa).\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\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 ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\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\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}}} props\n */\nfunction TrendChip({trend}) {\n    const {t} = useToolkitTranslation('metricCard');\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        <Chip size=\"small\" color={color} variant=\"outlined\" icon={<TrendIcon />} label={trend.label}\n              aria-label={`${t(`trend.${direction}`)} ${trend.label}`} sx={{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 */\nexport default function MetricCard({label, value, caption, tone = 'info', valueColor, isLoading = false, to, trend}) {\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            <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center', justifyContent: 'space-between', minHeight: TITLE_ROW_MIN_HEIGHT_PIXELS}}>\n                <Typography variant=\"overline\" color=\"text.secondary\" component=\"p\" sx={{minWidth: 0}}>{label}</Typography>\n                {trend && !isLoading && <TrendChip trend={trend} />}\n            </Stack>\n            <Typography variant=\"h5\" component=\"p\" sx={{mt: 0.75, fontWeight: 600, fontVariantNumeric: 'tabular-nums', color: valueColor ?? `${paletteTone}.dark`}}>\n                {isLoading ? <Skeleton width={120} /> : value}\n            </Typography>\n            {caption && (\n                <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\" sx={{mt: 0.5}}>\n                    {isLoading ? <Skeleton width={160} /> : caption}\n                </Typography>\n            )}\n        </>\n    );\n\n    return (\n        <Paper variant=\"outlined\" sx={{\n            borderTop: 3,\n            borderTopColor: `${paletteTone}.light`,\n            height: '100%',\n            overflow: 'hidden',\n            ...(to ? {} : {p: 2.5}),\n        }}>\n            {to ? (\n                <CardActionArea component={Link} to={to} sx={{p: 2.5, height: '100%', alignItems: 'flex-start', display: 'block'}}>\n                    {content}\n                </CardActionArea>\n            ) : content}\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,QAAQ,CAAC,QAAQ,WAAW,WAAW,OAAO;AAG7C,MAAM,kBAAkB,OAAO,OAAO,EAAC,IAAI,MAAM,MAAM,QAAQ,MAAM,OAAA,CAAO;AAEnF,MAAM,cAAc,OAAO,OAAO;AAAA,EAC9B,CAAC,gBAAgB,EAAE,GAAG;AAAA,EACtB,CAAC,gBAAgB,IAAI,GAAG;AAAA,EACxB,CAAC,gBAAgB,IAAI,GAAG;AAC5B,CAAC;AAGD,MAAM,8BAA8B;AAOpC,SAAS,UAAU,EAAC,SAAQ;AACxB,QAAM,EAAC,EAAA,IAAK,sBAAsB,YAAY;AAC9C,QAAM,YAAY,YAAY,MAAM,SAAS,IAAI,MAAM,YAAY,gBAAgB;AACnF,QAAM,YAAY,YAAY,SAAS;AAEvC,QAAM,SAAS,MAAM,UAAU,cAAc,gBAAgB;AAC7D,QAAM,QAAQ,cAAc,gBAAgB,OAAO,YAAa,SAAS,YAAY;AACrF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAK,MAAK;AAAA,MAAQ;AAAA,MAAc,SAAQ;AAAA,MAAW,0BAAO,WAAA,EAAU;AAAA,MAAI,OAAO,MAAM;AAAA,MAChF,cAAY,GAAG,EAAE,SAAS,SAAS,EAAE,CAAC,IAAI,MAAM,KAAK;AAAA,MAAI,IAAI,EAAC,YAAY,KAAK,mBAAmB,EAAC,UAAU,KAAE;AAAA,IAAC;AAAA,EAAA;AAE9H;AAaA,SAAwB,WAAW,EAAC,OAAO,OAAO,SAAS,OAAO,QAAQ,YAAY,YAAY,OAAO,IAAI,MAAA,GAAQ;AAEjH,QAAM,EAAC,KAAA,IAAQ,qBAAA;AACf,QAAM,cAAc,MAAM,SAAS,IAAI,IAAI,OAAO;AAElD,QAAM,UACF,qBAAA,UAAA,EAGI,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,IAAI,EAAC,YAAY,UAAU,gBAAgB,iBAAiB,WAAW,+BACtG,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAiB,WAAU,KAAI,IAAI,EAAC,UAAU,EAAA,GAAK,UAAA,OAAM;AAAA,MAC7F,SAAS,CAAC,aAAa,oBAAC,aAAU,MAAA,CAAc;AAAA,IAAA,GACrD;AAAA,IACA,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,KAAI,IAAI,EAAC,IAAI,MAAM,YAAY,KAAK,oBAAoB,gBAAgB,OAAO,cAAc,GAAG,WAAW,QAAA,GACzI,UAAA,YAAY,oBAAC,UAAA,EAAS,OAAO,IAAA,CAAK,IAAK,MAAA,CAC5C;AAAA,IACC,+BACI,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,WAAU,KAAI,IAAI,EAAC,IAAI,IAAA,GACvE,UAAA,YAAY,oBAAC,YAAS,OAAO,KAAK,IAAK,QAAA,CAC5C;AAAA,EAAA,GAER;AAGJ,SACI,oBAAC,OAAA,EAAM,SAAQ,YAAW,IAAI;AAAA,IAC1B,WAAW;AAAA,IACX,gBAAgB,GAAG,WAAW;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAI,KAAK,CAAA,IAAK,EAAC,GAAG,IAAA;AAAA,EAAG,GAEpB,eACG,oBAAC,gBAAA,EAAe,WAAW,MAAM,IAAQ,IAAI,EAAC,GAAG,KAAK,QAAQ,QAAQ,YAAY,cAAc,SAAS,WACpG,UAAA,QAAA,CACL,IACA,SACR;AAER;"}

package/dist/ui/metrics/TableToggle.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+function TableToggle({ asTable, onToggle }) {
+  const { t } = useToolkitTranslation("common");
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end", mb: 1 }, children: /* @__PURE__ */ jsx(Button, { size: "small", onClick: onToggle, sx: { textTransform: "none" }, children: asTable ? t("charts.viewAsChart") : t("charts.viewAsTable") }) });
+}
+export {
+  TableToggle as default
+};
+//# sourceMappingURL=TableToggle.js.map

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

@@ -0,0 +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// 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';\n\n/**\n * @param {{asTable: boolean, onToggle: () => void}} props\n */\nexport default function TableToggle({asTable, onToggle}) {\n    const {t} = useToolkitTranslation('common');\n\n    return (\n        <Box sx={{display: 'flex', justifyContent: 'flex-end', mb: 1}}>\n            <Button size=\"small\" onClick={onToggle} sx={{textTransform: 'none'}}>\n                {asTable ? t('charts.viewAsChart') : t('charts.viewAsTable')}\n            </Button>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;AAaA,SAAwB,YAAY,EAAC,SAAS,YAAW;AACrD,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAE1C,SACI,oBAAC,KAAA,EAAI,IAAI,EAAC,SAAS,QAAQ,gBAAgB,YAAY,IAAI,EAAA,GACvD,UAAA,oBAAC,QAAA,EAAO,MAAK,SAAQ,SAAS,UAAU,IAAI,EAAC,eAAe,OAAA,GACvD,UAAA,UAAU,EAAE,oBAAoB,IAAI,EAAE,oBAAoB,GAC/D,GACJ;AAER;"}

package/dist/ui/metrics/barListLabels.js

@@ -0,0 +1,9 @@
+const BAR_MIN_POINT_SIZE = 1;
+function barLabelValueOf(barEntry) {
+  return { value: barEntry.payload.value, detail: barEntry.payload.detail };
+}
+export {
+  BAR_MIN_POINT_SIZE,
+  barLabelValueOf
+};
+//# sourceMappingURL=barListLabels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"barListLabels.js","sources":["../../../src/ui/metrics/barListLabels.js"],"sourcesContent":["// Etiqueta en la punta de cada barra de BarList: de dónde sale el número y su detalle («de 8», «rechazados · 120 conformes»).\n//\n// OJO (trampa ya pagada): Recharts 3 DESCARTA las barras de ancho 0 (Bar.js, computeBarRectangles →\n// `width === 0` → null → filter(Boolean)) y LabelList numera solo las que quedan. BarList tomaba el detalle con\n// items[labelProps.index]: después de una barra en 0 el detalle salía del renglón de ARRIBA («Producto C 300 rechazados\n// · 0 conformes» cuando eran 120; «Gerente 1 de 3» cuando era 1 de 1), y con todo en 0 no se pintaba nada.\n// Las dos cosas que lo arreglan, y que se prueban en barListLabels.test.js contra computeBarRectangles de verdad:\n//   1. BAR_MIN_POINT_SIZE = 1: Recharts ensancha a 1 px ANTES de filtrar, así ninguna barra se descarta y un 0 también\n//      dice «0 de 2»;\n//   2. el detalle se lee del propio renglón (entry.payload) con valueAccessor y SIN dataKey: LabelList solo usa\n//      valueAccessor cuando dataKey es nulo. NO sirve labelProps.payload: LabelList le pasa a la etiqueta solo las\n//      propiedades SVG del renglón y payload no es una.\n//\n// Funciones puras, sin imports de pantalla: se prueban con node --test.\n\n/** Ancho mínimo (px) de una barra: con 0 Recharts la descarta y la etiqueta desaparece o se corre de renglón. */\nexport const BAR_MIN_POINT_SIZE = 1;\n\n/**\n * valueAccessor de LabelList: el número y el detalle del MISMO renglón de la barra.\n *\n * @param {{payload: {value: number, detail?: string}}} barEntry rectángulo que arma Recharts (payload = renglón de items)\n * @returns {{value: number, detail: string|undefined}}\n */\nexport function barLabelValueOf(barEntry) {\n    return {value: barEntry.payload.value, detail: barEntry.payload.detail};\n}\n"],"names":[],"mappings":"AAgBY,MAAC,qBAAqB;AAQ3B,SAAS,gBAAgB,UAAU;AACtC,SAAO,EAAC,OAAO,SAAS,QAAQ,OAAO,QAAQ,SAAS,QAAQ,OAAM;AAC1E;"}

package/dist/ui/metrics/heatmapScale.js

@@ -0,0 +1,67 @@
+const DAY_MILLISECONDS = 24 * 60 * 60 * 1e3;
+const DAYS_PER_WEEK = 7;
+const HEATMAP_LEVELS = [0, 1, 2, 3, 4];
+function quantileThresholds(values) {
+  const activeValues = values.filter((value) => value > 0).sort((first, second) => first - second);
+  if (!activeValues.length) {
+    return [1, 1, 1];
+  }
+  const valueAt = (fraction) => activeValues[Math.min(activeValues.length - 1, Math.floor(fraction * activeValues.length))];
+  return [valueAt(0.25), valueAt(0.5), valueAt(0.75)];
+}
+function levelOf(value, [firstQuartile, median, thirdQuartile]) {
+  if (!value) {
+    return 0;
+  }
+  if (value < firstQuartile) {
+    return 1;
+  }
+  if (value < median) {
+    return 2;
+  }
+  if (value < thirdQuartile) {
+    return 3;
+  }
+  return 4;
+}
+function utcDayOf(plainDate) {
+  const [year, month, day] = plainDate.split("-").map(Number);
+  return Date.UTC(year, month - 1, day);
+}
+function plainDateOf(utcMilliseconds) {
+  return new Date(utcMilliseconds).toISOString().slice(0, 10);
+}
+function calendarWeeksOf({ startsOn, endsOn, days }) {
+  const dayByDate = new Map(days.map((day) => [day.date, day]));
+  const firstDay = utcDayOf(startsOn);
+  const lastDay = utcDayOf(endsOn);
+  const mondayOffset = (new Date(firstDay).getUTCDay() + 6) % DAYS_PER_WEEK;
+  const weeks = [];
+  const monthMarks = [];
+  for (let weekStart = firstDay - mondayOffset * DAY_MILLISECONDS; weekStart <= lastDay; weekStart += DAYS_PER_WEEK * DAY_MILLISECONDS) {
+    const week = [];
+    let monthMark = null;
+    for (let weekday = 0; weekday < DAYS_PER_WEEK; weekday++) {
+      const dayMilliseconds = weekStart + weekday * DAY_MILLISECONDS;
+      if (dayMilliseconds < firstDay || dayMilliseconds > lastDay) {
+        week.push(null);
+        continue;
+      }
+      const date = plainDateOf(dayMilliseconds);
+      if (date.endsWith("-01")) {
+        monthMark = Number(date.slice(5, 7));
+      }
+      week.push({ date, value: dayByDate.get(date)?.value ?? 0, detail: dayByDate.get(date)?.detail });
+    }
+    weeks.push(week);
+    monthMarks.push(monthMark);
+  }
+  return { weeks, monthMarks, thresholds: quantileThresholds(days.map((day) => day.value)) };
+}
+export {
+  HEATMAP_LEVELS,
+  calendarWeeksOf,
+  levelOf,
+  quantileThresholds
+};
+//# sourceMappingURL=heatmapScale.js.map

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

@@ -0,0 +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;"}

package/dist/ui/navigation/BackButton.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Button from "@mui/material/Button";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { recallListUrl } from "../../lastListUrl.js";
+import { currentHistoryIndex, pageNameAt } from "../../navigationTrail.js";
+function BackButton({ fallbackTo, listKey, label, ...buttonProps }) {
+  const { t } = useToolkitTranslation("common");
+  const { useNavigate } = useToolkitNavigation();
+  const navigate = useNavigate();
+  const historyIndex = currentHistoryIndex();
+  const hasHistory = historyIndex > 0;
+  const previousPageName = hasHistory ? pageNameAt(historyIndex - 1) : null;
+  const goBack = () => {
+    if (hasHistory) {
+      navigate(-1);
+      return;
+    }
+    navigate(listKey && recallListUrl(listKey) || fallbackTo);
+  };
+  return /* @__PURE__ */ jsx(Button, { size: "small", color: "inherit", startIcon: /* @__PURE__ */ jsx(ArrowBackIcon, {}), onClick: goBack, ...buttonProps, children: previousPageName ? t(previousPageName.labelKey, previousPageName.params) : label ?? t("actions.back") });
+}
+export {
+  BackButton as default
+};
+//# sourceMappingURL=BackButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.js","sources":["../../../src/ui/navigation/BackButton.jsx"],"sourcesContent":["// Botón de regreso por el ROUTER, no por un enlace fijo.\n//\n// navigate(-1) regresa a la entrada anterior del historial con sus parámetros intactos: los filtros, el orden, la\n// pestaña y la página que nuqs dejó en la URL de la lista siguen ahí. Un enlace fijo a la lista los perdería.\n//\n// Si alguien llegó directo (pegó el enlace del detalle, abrió en pestaña nueva, recargó después de un login) no hay\n// historial al que volver: se usa la última URL de la lista que se guardó en sessionStorage al salir de ella\n// (useRememberListUrl) y, si tampoco hay, fallbackTo.\n//\n// El TEXTO dice a dónde regresa: si la página anterior anotó su nombre de regreso (usePageName de navigationTrail.js),\n// se pinta ese («Regresar al detalle del pedido 15»); si no, o si no hay historial, el label que le pasen.\n//\n// Navega con la navegación del proveedor (ToolkitProvider), no con un router en particular.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\n\nimport {recallListUrl} from '@/lastListUrl.js';\nimport {currentHistoryIndex, pageNameAt} from '@/navigationTrail.js';\n\n/**\n * @param {object} props\n * @param {string} props.fallbackTo ruta de la lista sin filtros (último respaldo)\n * @param {string} [props.listKey] la misma llave que usa useRememberListUrl en la lista\n * @param {string} [props.label] ya traducido; se usa cuando la página anterior no anotó su nombre o no hay historial\n */\nexport default function BackButton({fallbackTo, listKey, label, ...buttonProps}) {\n    const {t} = useToolkitTranslation('common');\n    const {useNavigate} = useToolkitNavigation();\n    const navigate = useNavigate();\n\n    // react-router guarda en history.state un índice: 0 = primera entrada de esta pestaña en la app. Otro router no lo\n    // guarda: entonces se toma como si no hubiera historial y se regresa a la última lista o a fallbackTo\n    const historyIndex = currentHistoryIndex();\n    const hasHistory = historyIndex > 0;\n    const previousPageName = hasHistory ? pageNameAt(historyIndex - 1) : null;\n\n    const goBack = () => {\n        if (hasHistory) {\n            navigate(-1);\n            return;\n        }\n        navigate((listKey && recallListUrl(listKey)) || fallbackTo);\n    };\n\n    return (\n        <Button size=\"small\" color=\"inherit\" startIcon={<ArrowBackIcon />} onClick={goBack} {...buttonProps}>\n            {previousPageName ? t(previousPageName.labelKey, previousPageName.params) : (label ?? t('actions.back'))}\n        </Button>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AA6BA,SAAwB,WAAW,EAAC,YAAY,SAAS,OAAO,GAAG,eAAc;AAC7E,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,EAAC,YAAA,IAAe,qBAAA;AACtB,QAAM,WAAW,YAAA;AAIjB,QAAM,eAAe,oBAAA;AACrB,QAAM,aAAa,eAAe;AAClC,QAAM,mBAAmB,aAAa,WAAW,eAAe,CAAC,IAAI;AAErE,QAAM,SAAS,MAAM;AACjB,QAAI,YAAY;AACZ,eAAS,EAAE;AACX;AAAA,IACJ;AACA,aAAU,WAAW,cAAc,OAAO,KAAM,UAAU;AAAA,EAC9D;AAEA,SACI,oBAAC,QAAA,EAAO,MAAK,SAAQ,OAAM,WAAU,WAAW,oBAAC,eAAA,CAAA,CAAc,GAAI,SAAS,QAAS,GAAG,aACnF,UAAA,mBAAmB,EAAE,iBAAiB,UAAU,iBAAiB,MAAM,IAAK,SAAS,EAAE,cAAc,EAAA,CAC1G;AAER;"}

package/dist/ui/navigation/ColorSchemeToggle.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { useColorScheme } from "@mui/material/styles";
+import DarkModeIcon from "@mui/icons-material/DarkModeOutlined";
+import LightModeIcon from "@mui/icons-material/LightModeOutlined";
+import { nextColorModeOf } from "./colorMode.js";
+function ColorSchemeToggle({ size = "small", inverted = false }) {
+  const { t } = useToolkitTranslation("common");
+  const { mode, systemMode, setMode } = useColorScheme();
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted || !mode) {
+    return /* @__PURE__ */ jsx(IconButton, { size, disabled: true, "aria-hidden": "true", sx: { width: 34, height: 34 } });
+  }
+  const nextMode = nextColorModeOf(mode, systemMode);
+  const label = t(`colorScheme.switchTo.${nextMode}`);
+  return /* @__PURE__ */ jsx(Tooltip, { title: label, children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size,
+      "aria-label": label,
+      onClick: () => setMode(nextMode),
+      sx: { color: inverted ? "common.white" : "text.secondary" },
+      children: nextMode === "light" ? /* @__PURE__ */ jsx(LightModeIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(DarkModeIcon, { fontSize: "small" })
+    }
+  ) });
+}
+export {
+  ColorSchemeToggle as default
+};
+//# sourceMappingURL=ColorSchemeToggle.js.map

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

@@ -0,0 +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// 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';\n\n/**\n * @param {{size?: 'small'|'medium', inverted?: boolean}} props inverted = icono blanco para fondos oscuros\n */\nexport default function ColorSchemeToggle({size = 'small', inverted = false}) {\n    const {t} = useToolkitTranslation('common');\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 <IconButton size={size} disabled aria-hidden=\"true\" sx={{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            <IconButton size={size} aria-label={label} onClick={() => setMode(nextMode)}\n                        sx={{color: inverted ? 'common.white' : 'text.secondary'}}>\n                {nextMode === 'light' ? <LightModeIcon fontSize=\"small\" /> : <DarkModeIcon fontSize=\"small\" />}\n            </IconButton>\n        </Tooltip>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAyBA,SAAwB,kBAAkB,EAAC,OAAO,SAAS,WAAW,SAAQ;AAC1E,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,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,YAAA,EAAW,MAAY,UAAQ,MAAC,eAAY,QAAO,IAAI,EAAC,OAAO,IAAI,QAAQ,KAAE,CAAG;AAAA,EAC5F;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,MAAW;AAAA,MAAY,cAAY;AAAA,MAAO,SAAS,MAAM,QAAQ,QAAQ;AAAA,MAC9D,IAAI,EAAC,OAAO,WAAW,iBAAiB,iBAAA;AAAA,MAC/C,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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitSettings } from "../../toolkit/toolkitContext.js";
+function DocumentTitle({ title }) {
+  const { appName } = useToolkitSettings();
+  return /* @__PURE__ */ jsx("title", { children: appName ? `${title} | ${appName}` : title });
+}
+export {
+  DocumentTitle as default
+};
+//# sourceMappingURL=DocumentTitle.js.map

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

@@ -0,0 +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;"}

package/dist/ui/navigation/FontSizeToggle.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import IconButton from "@mui/material/IconButton";
+import ListItemText from "@mui/material/ListItemText";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import Tooltip from "@mui/material/Tooltip";
+import FormatSizeIcon from "@mui/icons-material/FormatSize";
+import { useFontSize } from "./useFontSize.js";
+function FontSizeToggle({ size = "small" }) {
+  const { t } = useToolkitTranslation("layout");
+  const { level, setLevel, isMounted, levels } = useFontSize();
+  const [anchorElement, setAnchorElement] = useState(null);
+  if (!isMounted) {
+    return /* @__PURE__ */ jsx(IconButton, { size, disabled: true, "aria-hidden": "true", sx: { width: 34, height: 34 } });
+  }
+  const chooseLevel = (levelKey) => {
+    setLevel(levelKey);
+    setAnchorElement(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: t("fontSize.label"), children: /* @__PURE__ */ jsx(IconButton, { size, "aria-label": t("fontSize.label"), "aria-haspopup": "menu", onClick: (event) => setAnchorElement(event.currentTarget), children: /* @__PURE__ */ jsx(FormatSizeIcon, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl: anchorElement,
+        open: Boolean(anchorElement),
+        onClose: () => setAnchorElement(null),
+        slotProps: { paper: { sx: { minWidth: 200 } } },
+        children: levels.map((option) => /* @__PURE__ */ jsx(MenuItem, { selected: option.key === level, onClick: () => chooseLevel(option.key), children: /* @__PURE__ */ jsx(ListItemText, { primary: t(option.labelKey), slotProps: { primary: { sx: { fontWeight: option.key === level ? 600 : 400 } } } }) }, option.key))
+      }
+    )
+  ] });
+}
+export {
+  FontSizeToggle as default
+};
+//# sourceMappingURL=FontSizeToggle.js.map

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

@@ -0,0 +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// 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';\n\n/**\n * @param {{size?: 'small'|'medium'}} props\n */\nexport default function FontSizeToggle({size = 'small'}) {\n    const {t} = useToolkitTranslation('layout');\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 <IconButton size={size} disabled aria-hidden=\"true\" sx={{width: 34, height: 34}} />;\n    }\n\n    const chooseLevel = (levelKey) => {\n        setLevel(levelKey);\n        setAnchorElement(null);\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":";;;;;;;;;;;AAkBA,SAAwB,eAAe,EAAC,OAAO,WAAU;AACrD,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,EAAC,OAAO,UAAU,WAAW,OAAA,IAAU,YAAA;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AAGvD,MAAI,CAAC,WAAW;AACZ,WAAO,oBAAC,YAAA,EAAW,MAAY,UAAQ,MAAC,eAAY,QAAO,IAAI,EAAC,OAAO,IAAI,QAAQ,KAAE,CAAG;AAAA,EAC5F;AAEA,QAAM,cAAc,CAAC,aAAa;AAC9B,aAAS,QAAQ;AACjB,qBAAiB,IAAI;AAAA,EACzB;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

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Button from "@mui/material/Button";
+const LANGUAGES = Object.freeze(["es", "en"]);
+function LanguageToggle({ inverted = false }) {
+  const { t, language, changeLanguage } = useToolkitTranslation("common");
+  const currentLanguage = LANGUAGES.includes(language) ? language : "es";
+  const nextLanguage = currentLanguage === "es" ? "en" : "es";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      variant: "text",
+      onClick: () => changeLanguage(nextLanguage),
+      lang: nextLanguage,
+      "aria-label": t(`language.switchTo.${nextLanguage}`),
+      sx: { minWidth: 0, fontWeight: 700, letterSpacing: "0.08em", color: inverted ? "common.white" : "text.secondary" },
+      children: nextLanguage.toUpperCase()
+    }
+  );
+}
+export {
+  LANGUAGES,
+  LanguageToggle as default
+};
+//# sourceMappingURL=LanguageToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageToggle.js","sources":["../../../src/ui/navigation/LanguageToggle.jsx"],"sourcesContent":["// Cambio de idioma español / inglés.\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.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\n\n/** Los idiomas que traen los textos del paquete. */\nexport const LANGUAGES = Object.freeze(['es', 'en']);\n\n/**\n * @param {{inverted?: boolean}} props inverted = texto blanco para fondos oscuros\n */\nexport default function LanguageToggle({inverted = false}) {\n    const {t, language, changeLanguage} = useToolkitTranslation('common');\n    const currentLanguage = LANGUAGES.includes(language) ? language : 'es';\n    const nextLanguage = currentLanguage === 'es' ? 'en' : 'es';\n\n    return (\n        <Button size=\"small\" variant=\"text\" onClick={() => changeLanguage(nextLanguage)}\n                lang={nextLanguage} aria-label={t(`language.switchTo.${nextLanguage}`)}\n                sx={{minWidth: 0, fontWeight: 700, letterSpacing: '0.08em', color: inverted ? 'common.white' : 'text.secondary'}}>\n            {nextLanguage.toUpperCase()}\n        </Button>\n    );\n}\n"],"names":[],"mappings":";;;;AAUO,MAAM,YAAY,OAAO,OAAO,CAAC,MAAM,IAAI,CAAC;AAKnD,SAAwB,eAAe,EAAC,WAAW,SAAQ;AACvD,QAAM,EAAC,GAAG,UAAU,eAAA,IAAkB,sBAAsB,QAAQ;AACpE,QAAM,kBAAkB,UAAU,SAAS,QAAQ,IAAI,WAAW;AAClE,QAAM,eAAe,oBAAoB,OAAO,OAAO;AAEvD,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAO,MAAK;AAAA,MAAQ,SAAQ;AAAA,MAAO,SAAS,MAAM,eAAe,YAAY;AAAA,MACtE,MAAM;AAAA,MAAc,cAAY,EAAE,qBAAqB,YAAY,EAAE;AAAA,MACrE,IAAI,EAAC,UAAU,GAAG,YAAY,KAAK,eAAe,UAAU,OAAO,WAAW,iBAAiB,iBAAA;AAAA,MAClG,uBAAa,YAAA;AAAA,IAAY;AAAA,EAAA;AAGtC;"}

package/dist/ui/navigation/PageBreadcrumbs.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import { textSizeOf } from "../../theme/appleTracking.js";
+import ScrollableRow from "../layout/ScrollableRow.js";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+function PageBreadcrumbs({ items }) {
+  const { t } = useToolkitTranslation("layout");
+  const { Link: RouterLink } = useToolkitNavigation();
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ScrollableRow, { py: 0, children: /* @__PURE__ */ jsx(
+    Breadcrumbs,
+    {
+      "aria-label": t("breadcrumbs"),
+      separator: /* @__PURE__ */ jsx(NavigateNextIcon, { fontSize: "small" }),
+      sx: {
+        ...textSizeOf(13),
+        color: "text.secondary",
+        flex: "0 0 auto",
+        "& .MuiBreadcrumbs-ol": { flexWrap: "nowrap" },
+        "& .MuiBreadcrumbs-li": { flex: "0 0 auto" }
+      },
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        if (!isLast && item.to) {
+          return /* @__PURE__ */ jsx(Link, { component: RouterLink, to: item.to, underline: "hover", color: "inherit", sx: { fontSize: "inherit" }, children: item.label }, `${item.to}-${index}`);
+        }
+        return /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            "aria-current": isLast ? "page" : void 0,
+            sx: { fontSize: "inherit", fontWeight: isLast ? 500 : 400, color: isLast ? "text.primary" : "text.secondary" },
+            children: item.label
+          },
+          `${item.label}-${index}`
+        );
+      })
+    }
+  ) });
+}
+export {
+  PageBreadcrumbs as default
+};
+//# sourceMappingURL=PageBreadcrumbs.js.map

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

@@ -0,0 +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// 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';\n\n/**\n * @param {{items: Array<{label: string, to?: string}>}} props textos ya traducidos\n */\nexport default function PageBreadcrumbs({items}) {\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    if (items.length === 0) {\n        return null;\n    }\n    return (\n        <ScrollableRow py={0}>\n            <Breadcrumbs aria-label={t('breadcrumbs')} separator={<NavigateNextIcon fontSize=\"small\" />}\n                         sx={{...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                            <Link key={`${item.to}-${index}`} component={RouterLink} to={item.to} underline=\"hover\" color=\"inherit\" sx={{fontSize: 'inherit'}}>\n                                {item.label}\n                            </Link>\n                        );\n                    }\n                    return (\n                        <Typography key={`${item.label}-${index}`} component=\"span\" aria-current={isLast ? 'page' : undefined}\n                                    sx={{fontSize: 'inherit', fontWeight: isLast ? 500 : 400, color: isLast ? 'text.primary' : 'text.secondary'}}>\n                            {item.label}\n                        </Typography>\n                    );\n                })}\n            </Breadcrumbs>\n        </ScrollableRow>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAkBA,SAAwB,gBAAgB,EAAC,SAAQ;AAC7C,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,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,MAAY,cAAY,EAAE,aAAa;AAAA,MAAG,WAAW,oBAAC,kBAAA,EAAiB,UAAS,QAAA,CAAQ;AAAA,MAC5E,IAAI;AAAA,QAAC,GAAG,WAAW,EAAE;AAAA,QAAG,OAAO;AAAA,QAAkB,MAAM;AAAA,QAAY,wBAAwB,EAAC,UAAU,SAAA;AAAA,QACjG,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,QAAiC,WAAW,YAAY,IAAI,KAAK,IAAI,WAAU,SAAQ,OAAM,WAAU,IAAI,EAAC,UAAU,UAAA,GAClH,UAAA,KAAK,MAAA,GADC,GAAG,KAAK,EAAE,IAAI,KAAK,EAE9B;AAAA,QAER;AACA,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAA0C,WAAU;AAAA,YAAO,gBAAc,SAAS,SAAS;AAAA,YAChF,IAAI,EAAC,UAAU,WAAW,YAAY,SAAS,MAAM,KAAK,OAAO,SAAS,iBAAiB,iBAAA;AAAA,YAClG,UAAA,KAAK;AAAA,UAAA;AAAA,UAFO,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,QAAA;AAAA,MAK/C,CAAC;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}

package/dist/ui/navigation/colorMode.js

@@ -0,0 +1,13 @@
+const COLOR_MODES = ["light", "dark"];
+function resolvedColorModeOf(mode, systemMode) {
+  const visibleMode = mode === "system" ? systemMode : mode;
+  return COLOR_MODES.includes(visibleMode) ? visibleMode : "light";
+}
+function nextColorModeOf(mode, systemMode) {
+  return resolvedColorModeOf(mode, systemMode) === "dark" ? "light" : "dark";
+}
+export {
+  nextColorModeOf,
+  resolvedColorModeOf
+};
+//# sourceMappingURL=colorMode.js.map