@stackcraftmx/calcita 0.0.0-stage → 0.25.0

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

@@ -0,0 +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// 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';\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        <Box sx={{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        </Box>\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        <Box component=\"ul\" aria-label={ariaLabel} sx={{display: 'flex', flexWrap: 'wrap', gap: 2, listStyle: 'none', p: 0, m: 0, mt: 1}}>\n            {series.map((item) => (\n                <Box component=\"li\" key={item.key} sx={{display: 'flex', alignItems: 'center', gap: 0.75}}>\n                    {showsDash ? (\n                        <Box component=\"svg\" aria-hidden=\"true\" width={SWATCH_PIXELS} height={8} sx={{color: item.color}}>\n                            <line x1=\"0\" y1=\"4\" x2={SWATCH_PIXELS} y2=\"4\" stroke=\"currentColor\" strokeWidth=\"2\" strokeDasharray={item.dash} />\n                        </Box>\n                    ) : (\n                        <Box aria-hidden=\"true\" sx={{width: 10, height: 10, borderRadius: 0.5, bgcolor: item.color}} />\n                    )}\n                    <Typography variant=\"caption\" color=\"text.secondary\">{item.label}</Typography>\n                </Box>\n            ))}\n        </Box>\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        <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 0.75, mt: 0.5}}>\n            <Box aria-hidden=\"true\" sx={{width: SWATCH_PIXELS, borderTop: '2px dashed', borderColor: 'text.secondary'}} />\n            <Typography variant=\"caption\" color=\"text.secondary\">{referenceLine.label}</Typography>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA0BA,MAAM,mBAAmB;AAEzB,MAAM,4BAA4B;AAClC,MAAM,sBAAsB;AAE5B,MAAM,wBAAwB;AAE9B,MAAM,wBAAwB;AAE9B,MAAM,gBAAgB;AAGf,MAAM,qBAAqB,OAAO,OAAO,CAAC,WAAW,QAAQ,WAAW,WAAW,SAAS,WAAW,CAAC;AAExG,MAAM,oBAAoB,OAAO,OAAO,CAAC,KAAK,OAAO,KAAK,CAAC;AAQ3D,SAAS,iBAAiB;AAC7B,QAAM,UAAU,UAAU,UAAU;AACpC,SAAO,QAAQ,OAAO;AAAA,IAClB;AAAA,IACA,MAAM,QAAQ,KAAK;AAAA,IACnB,UAAU,EAAC,MAAM,QAAQ,KAAK,WAAW,UAAU,iBAAA;AAAA,IACnD,MAAM,QAAQ;AAAA,IACd,MAAM,QAAQ,KAAK;AAAA,IACnB,OAAO,QAAQ,KAAK;AAAA,IACpB,OAAO,QAAQ,OAAO;AAAA,EAAA,IACtB,CAAC,OAAO,CAAC;AACjB;AASO,SAAS,iBAAiB,cAAc,aAAa;AACxD,QAAM,eAAe,YAAY,YAAY,EAAE,SAAS;AACxD,SAAO,KAAK,IAAI,2BAA2B,sBAAsB,eAAe,qBAAqB;AACzG;AASO,SAAS,iBAAiB,QAAQ,SAAS;AAC9C,SAAO,OAAO,IAAI,CAAC,MAAM,UAAU;AAC/B,UAAM,OAAO,KAAK,QAAQ,mBAAmB,QAAQ,mBAAmB,MAAM;AAC9E,WAAO;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,QAAQ,QAAQ,IAAI,KAAK,QAAQ,SAAS;AAAA,MAC1C,MAAM,KAAK,QAAQ,kBAAkB,QAAQ,kBAAkB,MAAM;AAAA,IAAA;AAAA,EAE7E,CAAC;AACL;AAUO,SAAS,eAAe,MAAM,QAAQ,eAAe;AACxD,QAAM,SAAS,KAAK,QAAQ,CAAC,QAAQ,OAAO,IAAI,CAAC,SAAS,OAAO,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;AACrF,SAAO,KAAK,IAAI,GAAG,GAAG,QAAQ,eAAe,SAAS,CAAC;AAC3D;AAYO,SAAS,WAAW,EAAC,MAAM,QAAQ,aAAa,aAAa,UAAS;AACzE,SACI,oBAAC,KAAA,EAAI,IAAI,EAAC,WAAW,QAAQ,WAAW,OAAA,GACpC,UAAA,qBAAC,OAAA,EAAM,MAAK,SACR,UAAA;AAAA,IAAA,oBAAC,WAAA,EACG,+BAAC,UAAA,EACG,UAAA;AAAA,MAAA,oBAAC,aAAW,UAAA,YAAA,CAAY;AAAA,MACvB,OAAO,IAAI,CAAC,SAAS,oBAAC,WAAA,EAAyB,OAAM,SAAS,UAAA,KAAK,MAAA,GAA9B,KAAK,GAA+B,CAAY;AAAA,IAAA,EAAA,CAC1F,EAAA,CACJ;AAAA,wBACC,WAAA,EACI,UAAA,KAAK,IAAI,CAAC,6BACN,UAAA,EACG,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAW,cAAI,MAAA,CAAM;AAAA,MACrB,OAAO,IAAI,CAAC,SAAS,oBAAC,aAAyB,OAAM,SAAS,UAAA,YAAY,IAAI,KAAK,GAAG,CAAC,EAAA,GAAlD,KAAK,GAA+C,CAAY;AAAA,IAAA,KAF3F,IAAI,GAGnB,CACH,EAAA,CACL;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;AAUO,SAAS,YAAY,EAAC,QAAQ,YAAY,OAAO,aAAY;AAChE,MAAI,OAAO,SAAS,GAAG;AACnB,WAAO;AAAA,EACX;AACA,6BACK,KAAA,EAAI,WAAU,MAAK,cAAY,WAAW,IAAI,EAAC,SAAS,QAAQ,UAAU,QAAQ,KAAK,GAAG,WAAW,QAAQ,GAAG,GAAG,GAAG,GAAG,IAAI,KACzH,UAAA,OAAO,IAAI,CAAC,8BACR,KAAA,EAAI,WAAU,MAAoB,IAAI,EAAC,SAAS,QAAQ,YAAY,UAAU,KAAK,QAC/E,UAAA;AAAA,IAAA,YACG,oBAAC,OAAI,WAAU,OAAM,eAAY,QAAO,OAAO,eAAe,QAAQ,GAAG,IAAI,EAAC,OAAO,KAAK,SACtF,UAAA,oBAAC,QAAA,EAAK,IAAG,KAAI,IAAG,KAAI,IAAI,eAAe,IAAG,KAAI,QAAO,gBAAe,aAAY,KAAI,iBAAiB,KAAK,KAAA,CAAM,EAAA,CACpH,IAEA,oBAAC,KAAA,EAAI,eAAY,QAAO,IAAI,EAAC,OAAO,IAAI,QAAQ,IAAI,cAAc,KAAK,SAAS,KAAK,MAAA,EAAK,CAAG;AAAA,wBAEhG,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,eAAK,MAAA,CAAM;AAAA,EAAA,EAAA,GAR5C,KAAK,GAS9B,CACH,GACL;AAER;AAQO,SAAS,iBAAiB,EAAC,iBAAgB;AAC9C,MAAI,CAAC,eAAe;AAChB,WAAO;AAAA,EACX;AACA,SACI,qBAAC,KAAA,EAAI,IAAI,EAAC,SAAS,QAAQ,YAAY,UAAU,gBAAgB,YAAY,KAAK,MAAM,IAAI,OACxF,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,eAAY,QAAO,IAAI,EAAC,OAAO,eAAe,WAAW,cAAc,aAAa,iBAAA,EAAgB,CAAG;AAAA,wBAC3G,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAkB,wBAAc,MAAA,CAAM;AAAA,EAAA,GAC9E;AAER;"}

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, texts, ...buttonProps }) {
+  const { t } = useToolkitTranslation("common", texts);
+  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 * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function BackButton({fallbackTo, listKey, label, texts, ...buttonProps}) {\n    const {t} = useToolkitTranslation('common', texts);\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":";;;;;;;;AA8BA,SAAwB,WAAW,EAAC,YAAY,SAAS,OAAO,OAAO,GAAG,eAAc;AACpF,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,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,40 @@
+"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, onChange, texts }) {
+  const { t } = useToolkitTranslation("common", texts);
+  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);
+        onChange?.(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 {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({size = 'small', inverted = false, onChange, texts}) {\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 <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={() => {\n                            setMode(nextMode);\n                            onChange?.(nextMode);\n                        }}\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":";;;;;;;;;;AA6BA,SAAwB,kBAAkB,EAAC,OAAO,SAAS,WAAW,OAAO,UAAU,SAAQ;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,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;AAC1C,gBAAQ,QAAQ;AAChB,mBAAW,QAAQ;AAAA,MACvB;AAAA,MACA,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,41 @@
+"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", onChange, texts }) {
+  const { t } = useToolkitTranslation("layout", texts);
+  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);
+    onChange?.(levelKey);
+  };
+  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 {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({size = 'small', onChange, texts}) {\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 <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        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,SAAwB,eAAe,EAAC,OAAO,SAAS,UAAU,SAAQ;AACtE,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,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;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

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useToolkitSettings } from "../../toolkit/toolkitContext.js";
+import { DEFAULT_LANGUAGES } from "../../toolkit/toolkitSettings.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+const LANGUAGES = Object.freeze(DEFAULT_LANGUAGES.map((entry) => entry.code));
+function LanguageToggle({ inverted = false, onChange, texts }) {
+  const { t, language, changeLanguage } = useToolkitTranslation("common", texts);
+  const { languages = DEFAULT_LANGUAGES } = useToolkitSettings();
+  const [menuAnchor, setMenuAnchor] = useState(null);
+  const current = languages.find((entry) => entry.code === language) ?? languages[0];
+  const buttonSx = { minWidth: 0, fontWeight: 700, letterSpacing: "0.08em", color: inverted ? "common.white" : "text.secondary" };
+  const choose = (code) => {
+    setMenuAnchor(null);
+    changeLanguage(code);
+    onChange?.(code);
+  };
+  if (languages.length <= 2) {
+    const next = languages.find((entry) => entry.code !== current.code) ?? current;
+    const ariaLabel = t(`language.switchTo.${next.code}`, { defaultValue: t("language.switchToNamed", { name: next.label }) });
+    return /* @__PURE__ */ jsx(Button, { size: "small", variant: "text", onClick: () => choose(next.code), lang: next.code, "aria-label": ariaLabel, sx: buttonSx, children: next.code.toUpperCase() });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "text",
+        onClick: (event) => setMenuAnchor(event.currentTarget),
+        "aria-haspopup": "menu",
+        "aria-expanded": Boolean(menuAnchor),
+        "aria-label": t("language.choose", { name: current.label }),
+        sx: buttonSx,
+        children: current.code.toUpperCase()
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: () => setMenuAnchor(null), children: languages.map((entry) => /* @__PURE__ */ jsx(MenuItem, { lang: entry.code, selected: entry.code === current.code, onClick: () => choose(entry.code), children: entry.label }, entry.code)) })
+  ] });
+}
+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":["// 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// 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';\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({inverted = false, onChange, texts}) {\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            <Button size=\"small\" variant=\"text\" onClick={() => choose(next.code)} lang={next.code} aria-label={ariaLabel} sx={buttonSx}>\n                {next.code.toUpperCase()}\n            </Button>\n        );\n    }\n\n    // con tres o más: el de ahora y un menú con todos\n    return (\n        <>\n            <Button 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})} sx={buttonSx}>\n                {current.code.toUpperCase()}\n            </Button>\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":";;;;;;;;;AAsBO,MAAM,YAAY,OAAO,OAAO,kBAAkB,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC;AAQnF,SAAwB,eAAe,EAAC,WAAW,OAAO,UAAU,SAAQ;AACxE,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,UAAO,MAAK,SAAQ,SAAQ,QAAO,SAAS,MAAM,OAAO,KAAK,IAAI,GAAG,MAAM,KAAK,MAAM,cAAY,WAAW,IAAI,UAC7G,UAAA,KAAK,KAAK,YAAA,EAAY,CAC3B;AAAA,EAER;AAGA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAO,MAAK;AAAA,QAAQ,SAAQ;AAAA,QAAO,SAAS,CAAC,UAAU,cAAc,MAAM,aAAa;AAAA,QAAG,iBAAc;AAAA,QAClG,iBAAe,QAAQ,UAAU;AAAA,QAAG,cAAY,EAAE,mBAAmB,EAAC,MAAM,QAAQ,OAAM;AAAA,QAAG,IAAI;AAAA,QACpG,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

@@ -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, texts }) {
+  const { t } = useToolkitTranslation("layout", texts);
+  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 {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({items, texts}) {\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            <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":";;;;;;;;;;AAoBA,SAAwB,gBAAgB,EAAC,OAAO,SAAQ;AACpD,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,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

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorMode.js","sources":["../../../src/ui/navigation/colorMode.js"],"sourcesContent":["// A qué modo lleva el interruptor de claro / oscuro (ui/navigation/ColorSchemeToggle.jsx) y en qué modo pintar lo\n// que no es de MUI (el Toaster de sonner).\n//\n// Aparte del componente para probarlo sin navegador (colorMode.test.js).\n//\n// Funciones puras, no renderizan: function (regla de la casa).\n\nconst COLOR_MODES = ['light', 'dark'];\n\n/**\n * El modo que SE ESTÁ viendo. Con mode 'system' manda lo que diga el sistema operativo; antes de montar en el cliente\n * MUI todavía no sabe el modo y regresa undefined.\n *\n * @param {string|undefined} mode 'light' | 'dark' | 'system' (useColorScheme de MUI)\n * @param {string|undefined} systemMode 'light' | 'dark' (lo que dice el sistema operativo)\n * @returns {'light'|'dark'} el modo visible; 'light' si todavía no se sabe\n */\nexport function resolvedColorModeOf(mode, systemMode) {\n    const visibleMode = mode === 'system' ? systemMode : mode;\n    return COLOR_MODES.includes(visibleMode) ? visibleMode : 'light';\n}\n\n/**\n * El modo al que lleva el interruptor: siempre el contrario del que se ve. Dos estados y no tres: un «Sistema» en la\n * barra le agrega una decisión al usuario sin resolverle nada.\n *\n * @param {string|undefined} mode 'light' | 'dark' | 'system'\n * @param {string|undefined} systemMode 'light' | 'dark'\n * @returns {'light'|'dark'}\n */\nexport function nextColorModeOf(mode, systemMode) {\n    return resolvedColorModeOf(mode, systemMode) === 'dark' ? 'light' : 'dark';\n}\n"],"names":[],"mappings":"AAOA,MAAM,cAAc,CAAC,SAAS,MAAM;AAU7B,SAAS,oBAAoB,MAAM,YAAY;AAClD,QAAM,cAAc,SAAS,WAAW,aAAa;AACrD,SAAO,YAAY,SAAS,WAAW,IAAI,cAAc;AAC7D;AAUO,SAAS,gBAAgB,MAAM,YAAY;AAC9C,SAAO,oBAAoB,MAAM,UAAU,MAAM,SAAS,UAAU;AACxE;"}

package/dist/ui/navigation/fontSizeLevels.js

@@ -0,0 +1,24 @@
+const ROOT_FONT_SIZE_PIXELS = 16;
+const FONT_SIZE_STORAGE_KEY = "calcita:fontSize";
+const FONT_SIZE_LEVELS = Object.freeze([
+  { key: "normal", multiplier: 1, labelKey: "layout:fontSize.normal" },
+  { key: "large", multiplier: 1.15, labelKey: "layout:fontSize.large" },
+  { key: "xLarge", multiplier: 1.3, labelKey: "layout:fontSize.xLarge" }
+]);
+const DEFAULT_FONT_SIZE_LEVEL = "normal";
+function rootFontSizeOf(levelKey) {
+  const level = FONT_SIZE_LEVELS.find((candidate) => candidate.key === levelKey);
+  return `${ROOT_FONT_SIZE_PIXELS * (level?.multiplier ?? 1)}px`;
+}
+function isFontSizeLevel(levelKey) {
+  return FONT_SIZE_LEVELS.some((level) => level.key === levelKey);
+}
+export {
+  DEFAULT_FONT_SIZE_LEVEL,
+  FONT_SIZE_LEVELS,
+  FONT_SIZE_STORAGE_KEY,
+  ROOT_FONT_SIZE_PIXELS,
+  isFontSizeLevel,
+  rootFontSizeOf
+};
+//# sourceMappingURL=fontSizeLevels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fontSizeLevels.js","sources":["../../../src/ui/navigation/fontSizeLevels.js"],"sourcesContent":["// Los tamaños de letra que la persona puede elegir (del tema de walk-ot). Todo el tema está en rem, así que basta con\n// cambiar la letra de la raíz (<html>) para que crezca toda la pantalla, también las tablas y los diálogos.\n//\n// Funciones puras, sin React: function (regla de la casa).\n\n/** La letra de la raíz del navegador: la base de los rem. Con menos de 16 px el iPhone hace zoom al entrar a un campo. */\nexport const ROOT_FONT_SIZE_PIXELS = 16;\n\n/** Dónde se recuerda la elección en este navegador. */\nexport const FONT_SIZE_STORAGE_KEY = 'calcita:fontSize';\n\n/** Los niveles: su llave, cuánto crece la letra y su texto. */\nexport const FONT_SIZE_LEVELS = Object.freeze([\n    {key: 'normal', multiplier: 1, labelKey: 'layout:fontSize.normal'},\n    {key: 'large', multiplier: 1.15, labelKey: 'layout:fontSize.large'},\n    {key: 'xLarge', multiplier: 1.3, labelKey: 'layout:fontSize.xLarge'},\n]);\n\nexport const DEFAULT_FONT_SIZE_LEVEL = 'normal';\n\n/**\n * La letra de la raíz para un nivel; con una llave que no existe, la normal.\n *\n * @param {string} levelKey\n * @returns {string} p. ej. '18.4px'\n */\nexport function rootFontSizeOf(levelKey) {\n    const level = FONT_SIZE_LEVELS.find((candidate) => candidate.key === levelKey);\n    return `${ROOT_FONT_SIZE_PIXELS * (level?.multiplier ?? 1)}px`;\n}\n\n/**\n * ¿Es un nivel que existe? (lo guardado en el navegador puede venir de otra versión).\n *\n * @param {unknown} levelKey\n * @returns {boolean}\n */\nexport function isFontSizeLevel(levelKey) {\n    return FONT_SIZE_LEVELS.some((level) => level.key === levelKey);\n}\n"],"names":[],"mappings":"AAMY,MAAC,wBAAwB;AAGzB,MAAC,wBAAwB;AAGzB,MAAC,mBAAmB,OAAO,OAAO;AAAA,EAC1C,EAAC,KAAK,UAAU,YAAY,GAAG,UAAU,yBAAwB;AAAA,EACjE,EAAC,KAAK,SAAS,YAAY,MAAM,UAAU,wBAAuB;AAAA,EAClE,EAAC,KAAK,UAAU,YAAY,KAAK,UAAU,yBAAwB;AACvE,CAAC;AAEW,MAAC,0BAA0B;AAQhC,SAAS,eAAe,UAAU;AACrC,QAAM,QAAQ,iBAAiB,KAAK,CAAC,cAAc,UAAU,QAAQ,QAAQ;AAC7E,SAAO,GAAG,yBAAyB,OAAO,cAAc,EAAE;AAC9D;AAQO,SAAS,gBAAgB,UAAU;AACtC,SAAO,iBAAiB,KAAK,CAAC,UAAU,MAAM,QAAQ,QAAQ;AAClE;"}

package/dist/ui/navigation/useFontSize.js

@@ -0,0 +1,44 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { DEFAULT_FONT_SIZE_LEVEL, FONT_SIZE_STORAGE_KEY, isFontSizeLevel, rootFontSizeOf, FONT_SIZE_LEVELS } from "./fontSizeLevels.js";
+const FONT_SIZE_CHANGE_EVENT = "calcita:font-size";
+function useFontSize() {
+  const [level, setLevelState] = useState(DEFAULT_FONT_SIZE_LEVEL);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    try {
+      const storedLevel = window.localStorage.getItem(FONT_SIZE_STORAGE_KEY);
+      if (isFontSizeLevel(storedLevel)) {
+        setLevelState(storedLevel);
+      }
+    } catch {
+    }
+    setIsMounted(true);
+  }, []);
+  useEffect(() => {
+    const followOtherCopies = (event) => setLevelState(event.detail);
+    window.addEventListener(FONT_SIZE_CHANGE_EVENT, followOtherCopies);
+    return () => window.removeEventListener(FONT_SIZE_CHANGE_EVENT, followOtherCopies);
+  }, []);
+  useEffect(() => {
+    if (isMounted) {
+      document.documentElement.style.fontSize = rootFontSizeOf(level);
+    }
+  }, [level, isMounted]);
+  const setLevel = useCallback((levelKey) => {
+    if (!isFontSizeLevel(levelKey)) {
+      return;
+    }
+    setLevelState(levelKey);
+    try {
+      window.localStorage.setItem(FONT_SIZE_STORAGE_KEY, levelKey);
+    } catch {
+    }
+    window.dispatchEvent(new CustomEvent(FONT_SIZE_CHANGE_EVENT, { detail: levelKey }));
+  }, []);
+  return { level, setLevel, isMounted, levels: FONT_SIZE_LEVELS };
+}
+export {
+  useFontSize
+};
+//# sourceMappingURL=useFontSize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFontSize.js","sources":["../../../src/ui/navigation/useFontSize.js"],"sourcesContent":["// El tamaño de letra elegido, recordado en este navegador (del tema de walk-ot).\n//\n//   - Se lee al montar en el cliente: en el servidor no hay almacenamiento y la primera pintura es la normal.\n//   - Sin almacenamiento (ventana privada estricta) funciona igual; solo no se recuerda.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useCallback, useEffect, useState} from 'react';\n\nimport {\n    DEFAULT_FONT_SIZE_LEVEL, FONT_SIZE_LEVELS, FONT_SIZE_STORAGE_KEY, isFontSizeLevel, rootFontSizeOf,\n} from '@/ui/navigation/fontSizeLevels.js';\n\n// el aviso entre copias del gancho cuando la persona cambia el tamaño\nconst FONT_SIZE_CHANGE_EVENT = 'calcita:font-size';\n\n/**\n * @returns {{level: string, setLevel: (levelKey: string) => void, isMounted: boolean, levels: typeof FONT_SIZE_LEVELS}}\n */\nexport function useFontSize() {\n    const [level, setLevelState] = useState(DEFAULT_FONT_SIZE_LEVEL);\n    const [isMounted, setIsMounted] = useState(false);\n\n    useEffect(() => {\n        try {\n            const storedLevel = window.localStorage.getItem(FONT_SIZE_STORAGE_KEY);\n            if (isFontSizeLevel(storedLevel)) {\n                setLevelState(storedLevel);\n            }\n        } catch {\n            // almacenamiento bloqueado: se queda la normal\n        }\n        setIsMounted(true);\n    }, []);\n\n    // otra copia del gancho (el menú de la cuenta, «Mi perfil») cambió el tamaño: esta también se entera\n    useEffect(() => {\n        const followOtherCopies = (event) => setLevelState(event.detail);\n        window.addEventListener(FONT_SIZE_CHANGE_EVENT, followOtherCopies);\n        return () => window.removeEventListener(FONT_SIZE_CHANGE_EVENT, followOtherCopies);\n    }, []);\n\n    useEffect(() => {\n        if (isMounted) {\n            document.documentElement.style.fontSize = rootFontSizeOf(level);\n        }\n    }, [level, isMounted]);\n\n    const setLevel = useCallback((levelKey) => {\n        if (!isFontSizeLevel(levelKey)) {\n            return;\n        }\n        setLevelState(levelKey);\n        try {\n            window.localStorage.setItem(FONT_SIZE_STORAGE_KEY, levelKey);\n        } catch {\n            // almacenamiento bloqueado: cambia igual, solo no se recuerda\n        }\n        window.dispatchEvent(new CustomEvent(FONT_SIZE_CHANGE_EVENT, {detail: levelKey}));\n    }, []);\n\n    return {level, setLevel, isMounted, levels: FONT_SIZE_LEVELS};\n}\n"],"names":[],"mappings":";;;AAaA,MAAM,yBAAyB;AAKxB,SAAS,cAAc;AAC1B,QAAM,CAAC,OAAO,aAAa,IAAI,SAAS,uBAAuB;AAC/D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACZ,QAAI;AACA,YAAM,cAAc,OAAO,aAAa,QAAQ,qBAAqB;AACrE,UAAI,gBAAgB,WAAW,GAAG;AAC9B,sBAAc,WAAW;AAAA,MAC7B;AAAA,IACJ,QAAQ;AAAA,IAER;AACA,iBAAa,IAAI;AAAA,EACrB,GAAG,CAAA,CAAE;AAGL,YAAU,MAAM;AACZ,UAAM,oBAAoB,CAAC,UAAU,cAAc,MAAM,MAAM;AAC/D,WAAO,iBAAiB,wBAAwB,iBAAiB;AACjE,WAAO,MAAM,OAAO,oBAAoB,wBAAwB,iBAAiB;AAAA,EACrF,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACZ,QAAI,WAAW;AACX,eAAS,gBAAgB,MAAM,WAAW,eAAe,KAAK;AAAA,IAClE;AAAA,EACJ,GAAG,CAAC,OAAO,SAAS,CAAC;AAErB,QAAM,WAAW,YAAY,CAAC,aAAa;AACvC,QAAI,CAAC,gBAAgB,QAAQ,GAAG;AAC5B;AAAA,IACJ;AACA,kBAAc,QAAQ;AACtB,QAAI;AACA,aAAO,aAAa,QAAQ,uBAAuB,QAAQ;AAAA,IAC/D,QAAQ;AAAA,IAER;AACA,WAAO,cAAc,IAAI,YAAY,wBAAwB,EAAC,QAAQ,SAAQ,CAAC,CAAC;AAAA,EACpF,GAAG,CAAA,CAAE;AAEL,SAAO,EAAC,OAAO,UAAU,WAAW,QAAQ,iBAAgB;AAChE;"}

package/dist/ui/timeline/GroupedTimeline.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Timeline from "@mui/lab/Timeline";
+import TimelineConnector from "@mui/lab/TimelineConnector";
+import TimelineContent from "@mui/lab/TimelineContent";
+import TimelineDot from "@mui/lab/TimelineDot";
+import TimelineItem, { timelineItemClasses } from "@mui/lab/TimelineItem";
+import TimelineOppositeContent from "@mui/lab/TimelineOppositeContent";
+import TimelineSeparator from "@mui/lab/TimelineSeparator";
+import Box from "@mui/material/Box";
+import ButtonBase from "@mui/material/ButtonBase";
+import Chip from "@mui/material/Chip";
+import Collapse from "@mui/material/Collapse";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { paletteOf } from "../../theme/components/paletteOf.js";
+import { TIMELINE_EMPHASIS, timelineDotOf } from "./timelineDot.js";
+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({ groups, onGroupToggle }) {
+  const theme = useTheme();
+  const isWide = useMediaQuery(theme.breakpoints.up("md"));
+  const [expandedKeys, setExpandedKeys] = useState(() => new Set(
+    groups.filter((timelineGroup) => timelineGroup.defaultExpanded !== false).map((timelineGroup) => timelineGroup.key)
+  ));
+  const toggleGroup = (groupKey) => {
+    const isOpening = !expandedKeys.has(groupKey);
+    const nextKeys = new Set(expandedKeys);
+    if (isOpening) {
+      nextKeys.add(groupKey);
+    } else {
+      nextKeys.delete(groupKey);
+    }
+    setExpandedKeys(nextKeys);
+    onGroupToggle?.(groupKey, isOpening);
+  };
+  return /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: groups.map((timelineGroup) => {
+    const emphasis = timelineGroup.emphasis ?? TIMELINE_EMPHASIS.normal;
+    const isHighlighted = emphasis === TIMELINE_EMPHASIS.highlighted;
+    const isMuted = emphasis === TIMELINE_EMPHASIS.muted;
+    const isCollapsible = Boolean(timelineGroup.isCollapsible && timelineGroup.title);
+    const isExpanded = !isCollapsible || expandedKeys.has(timelineGroup.key);
+    return (
+      // el borde transparente en los demás grupos mantiene todo alineado con el grupo resaltado
+      /* @__PURE__ */ jsxs(Box, { sx: {
+        border: 1,
+        borderRadius: 1.5,
+        px: 1.5,
+        pt: 1.25,
+        pb: isExpanded ? 0 : 1.25,
+        borderColor: isHighlighted ? "primary.main" : "transparent",
+        // un tinte del color principal: primary.lighter no existe en el tema de MUI y el grupo se quedaba sin fondo
+        bgcolor: (theme2) => isHighlighted ? `color-mix(in srgb, ${paletteOf(theme2).primary.main} ${HIGHLIGHT_TINT_PERCENT}%, transparent)` : "transparent"
+      }, children: [
+        timelineGroup.title && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center", justifyContent: isWide ? "center" : "flex-start" }, children: [
+          /* @__PURE__ */ jsxs(
+            ButtonBase,
+            {
+              disabled: !isCollapsible,
+              onClick: () => toggleGroup(timelineGroup.key),
+              "aria-expanded": isCollapsible ? isExpanded : void 0,
+              sx: { gap: 1, px: 1, py: 0.25, borderRadius: 1, "&.Mui-disabled": { pointerEvents: "none" } },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "h3", sx: { fontWeight: 700, color: isMuted ? "text.secondary" : "text.primary" }, children: timelineGroup.title }),
+                isCollapsible && timelineGroup.summary && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", children: timelineGroup.summary }),
+                isCollapsible && /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small", sx: {
+                  color: "text.secondary",
+                  transition: theme.transitions.create("transform"),
+                  transform: isExpanded ? "rotate(180deg)" : "none"
+                } })
+              ]
+            }
+          ),
+          timelineGroup.badge && /* @__PURE__ */ jsx(Chip, { size: "small", color: "primary", label: timelineGroup.badge })
+        ] }),
+        /* @__PURE__ */ jsx(Collapse, { in: isExpanded, unmountOnExit: true, children: /* @__PURE__ */ jsx(Timeline, { position: isWide ? "alternate" : "right", sx: isWide ? ALTERNATE_TIMELINE : LEFT_ALIGNED_TIMELINE, children: timelineGroup.items.map((timelineEntry, entryPosition) => {
+          const EntryIcon = timelineEntry.icon;
+          const isFirstEntry = entryPosition === 0;
+          const isLastEntry = entryPosition === timelineGroup.items.length - 1;
+          return /* @__PURE__ */ jsxs(TimelineItem, { children: [
+            isWide && /* @__PURE__ */ jsx(TimelineOppositeContent, { variant: "body2", color: "text.secondary", sx: { m: "auto 0" }, children: timelineEntry.timestamp }),
+            /* @__PURE__ */ jsxs(TimelineSeparator, { children: [
+              /* @__PURE__ */ jsx(TimelineConnector, { sx: { visibility: isFirstEntry ? "hidden" : "visible" } }),
+              /* @__PURE__ */ jsx(TimelineDot, { ...timelineDotOf({ emphasis, tone: timelineEntry.tone }), children: EntryIcon && /* @__PURE__ */ jsx(EntryIcon, { fontSize: "small" }) }),
+              /* @__PURE__ */ jsx(TimelineConnector, { sx: { visibility: isLastEntry ? "hidden" : "visible" } })
+            ] }),
+            /* @__PURE__ */ jsxs(TimelineContent, { sx: { py: 1.5, px: 2, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "p", sx: { fontWeight: 600, color: isMuted ? "text.secondary" : "text.primary" }, children: timelineEntry.title }),
+              !isWide && timelineEntry.timestamp && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", children: timelineEntry.timestamp }),
+              timelineEntry.details
+            ] })
+          ] }, timelineEntry.key);
+        }) }) })
+      ] }, timelineGroup.key)
+    );
+  }) });
+}
+export {
+  GroupedTimeline as default
+};
+//# sourceMappingURL=GroupedTimeline.js.map