@stackcraftmx/calcita 0.0.0-stage → 0.23.0

package/dist/ui/layout/ScrollableRow.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, Children, useEffect } from "react";
+import Box from "@mui/material/Box";
+const scrollableRow = {
+  display: "flex",
+  flexWrap: "nowrap",
+  overflowX: "auto",
+  overflowY: "hidden",
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  "&::-webkit-scrollbar": { display: "none" }
+};
+const DRAG_THRESHOLD_PIXELS = 5;
+function ScrollableRow({
+  children,
+  gap = 1,
+  py = 0.5,
+  sx,
+  enableDragScroll = true,
+  enableWheelToX = true,
+  fadeEdges = true,
+  ref,
+  ...boxProps
+}) {
+  const rowElement = useRef(null);
+  const [edges, setEdges] = useState({ overflow: false, start: false, end: false });
+  const assignRef = (node) => {
+    rowElement.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref && typeof ref === "object") {
+      ref.current = node;
+    }
+  };
+  const childrenCount = Children.count(children);
+  useEffect(() => {
+    const element = rowElement.current;
+    if (!element) {
+      return void 0;
+    }
+    const measureEdges = () => setEdges({
+      overflow: element.scrollWidth > element.clientWidth + 1,
+      start: element.scrollLeft > 1,
+      end: element.scrollLeft + element.clientWidth < element.scrollWidth - 1
+    });
+    measureEdges();
+    const resizeObserver = new ResizeObserver(measureEdges);
+    resizeObserver.observe(element);
+    element.addEventListener("scroll", measureEdges, { passive: true });
+    return () => {
+      resizeObserver.disconnect();
+      element.removeEventListener("scroll", measureEdges);
+    };
+  }, [childrenCount]);
+  useEffect(() => {
+    const element = rowElement.current;
+    if (!element) {
+      return void 0;
+    }
+    let isDragging = false;
+    let hasMoved = false;
+    let startX = 0;
+    let scrollStart = 0;
+    const isOverflowing = () => element.scrollWidth > element.clientWidth + 1;
+    const handleMouseDown = (event) => {
+      if (event.button !== 0 || !isOverflowing()) {
+        return;
+      }
+      if (["INPUT", "TEXTAREA"].includes(event.target?.tagName)) {
+        return;
+      }
+      isDragging = true;
+      hasMoved = false;
+      startX = event.pageX;
+      scrollStart = element.scrollLeft;
+    };
+    const handleMouseMove = (event) => {
+      if (!isDragging) {
+        return;
+      }
+      const distance = event.pageX - startX;
+      if (!hasMoved && Math.abs(distance) > DRAG_THRESHOLD_PIXELS) {
+        hasMoved = true;
+        element.style.cursor = "grabbing";
+      }
+      if (hasMoved) {
+        event.preventDefault();
+        element.scrollLeft = scrollStart - distance;
+      }
+    };
+    const stopDragging = () => {
+      isDragging = false;
+      element.style.cursor = "";
+    };
+    const handleClickCapture = (event) => {
+      if (!hasMoved) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      hasMoved = false;
+    };
+    const handleWheel = (event) => {
+      if (isOverflowing() && Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+        event.preventDefault();
+        element.scrollLeft += event.deltaY;
+      }
+    };
+    if (enableDragScroll) {
+      element.addEventListener("mousedown", handleMouseDown);
+      element.addEventListener("mousemove", handleMouseMove);
+      element.addEventListener("mouseup", stopDragging);
+      element.addEventListener("mouseleave", stopDragging);
+      element.addEventListener("click", handleClickCapture, true);
+    }
+    if (enableWheelToX) {
+      element.addEventListener("wheel", handleWheel, { passive: false });
+    }
+    return () => {
+      element.removeEventListener("mousedown", handleMouseDown);
+      element.removeEventListener("mousemove", handleMouseMove);
+      element.removeEventListener("mouseup", stopDragging);
+      element.removeEventListener("mouseleave", stopDragging);
+      element.removeEventListener("click", handleClickCapture, true);
+      element.removeEventListener("wheel", handleWheel);
+    };
+  }, [enableDragScroll, enableWheelToX]);
+  const isDragEnabled = enableDragScroll && edges.overflow;
+  const fadeMask = fadeEdges && edges.overflow ? `linear-gradient(to right, ${[
+    edges.start ? "transparent 0, black 24px" : "black 0",
+    edges.end ? "black calc(100% - 24px), transparent 100%" : "black 100%"
+  ].join(", ")})` : void 0;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: assignRef,
+      sx: {
+        ...scrollableRow,
+        gap,
+        py,
+        cursor: isDragEnabled ? "grab" : "auto",
+        userSelect: isDragEnabled ? "none" : "auto",
+        ...fadeMask && { maskImage: fadeMask, WebkitMaskImage: fadeMask },
+        ...sx
+      },
+      ...boxProps,
+      children
+    }
+  );
+}
+export {
+  ScrollableRow as default,
+  scrollableRow
+};
+//# sourceMappingURL=ScrollableRow.js.map

package/dist/ui/layout/ScrollableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableRow.js","sources":["../../../src/ui/layout/ScrollableRow.jsx"],"sourcesContent":["// Tira horizontal que se desliza, no que se envuelve (chips de filtros y accesos rápidos).\n//\n// Con muchos filtros puestos los chips se envolvían en varios renglones y empujaban la tabla fuera de la pantalla,\n// justo cuando más falta hace ver el resultado. Encapsula lo que hace falta para que la tira se sienta nativa:\n//   - overflow-x sin barra visible en los tres motores;\n//   - arrastre con el mouse en escritorio (el deslizamiento táctil ya es gratis);\n//   - la rueda vertical se convierte en desplazamiento horizontal;\n//   - el borde por el que sigue habiendo contenido se DESVANECE: sin barra ni desvanecido, una tira cortada a la mitad\n//     se lee como un chip mal pintado.\n// Todo eso se activa SOLO cuando de verdad hay desbordamiento.\n//\n// OJO: el umbral de 5 px separa el arrastre del clic; mover más cancela el clic que venía detrás, para no borrar un\n// filtro cuando lo que se quería era desplazar la tira.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Children, useEffect, useRef, useState} from 'react';\nimport Box from '@mui/material/Box';\n\n/** El mixin sin arrastre, para cuando no se puede envolver el elemento. */\nexport const scrollableRow = {\n    display: 'flex',\n    flexWrap: 'nowrap',\n    overflowX: 'auto',\n    overflowY: 'hidden',\n    scrollbarWidth: 'none',\n    msOverflowStyle: 'none',\n    '&::-webkit-scrollbar': {display: 'none'},\n};\n\nconst DRAG_THRESHOLD_PIXELS = 5;\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {number} [props.gap]\n * @param {number} [props.py]\n * @param {object} [props.sx]\n * @param {boolean} [props.enableDragScroll]\n * @param {boolean} [props.enableWheelToX]\n * @param {boolean} [props.fadeEdges]\n * @param {import('react').Ref<HTMLElement>} [props.ref]\n */\nexport default function ScrollableRow({\n    children, gap = 1, py = 0.5, sx, enableDragScroll = true, enableWheelToX = true, fadeEdges = true, ref, ...boxProps\n}) {\n    const rowElement = useRef(null);\n    // por dónde sigue habiendo contenido: decide de qué lado va el desvanecido\n    const [edges, setEdges] = useState({overflow: false, start: false, end: false});\n\n    const assignRef = (node) => {\n        rowElement.current = node;\n        if (typeof ref === 'function') {\n            ref(node);\n        } else if (ref && typeof ref === 'object') {\n            ref.current = node;\n        }\n    };\n\n    // el número de hijos es la señal estable para revisar de nuevo (el padre agrega y quita chips)\n    const childrenCount = Children.count(children);\n    useEffect(() => {\n        const element = rowElement.current;\n        if (!element) {\n            return undefined;\n        }\n        // el +1 evita el falso positivo por subpíxel\n        const measureEdges = () => setEdges({\n            overflow: element.scrollWidth > element.clientWidth + 1,\n            start: element.scrollLeft > 1,\n            end: element.scrollLeft + element.clientWidth < element.scrollWidth - 1,\n        });\n        measureEdges();\n\n        const resizeObserver = new ResizeObserver(measureEdges);\n        resizeObserver.observe(element);\n        element.addEventListener('scroll', measureEdges, {passive: true});\n        return () => {\n            resizeObserver.disconnect();\n            element.removeEventListener('scroll', measureEdges);\n        };\n    }, [childrenCount]);\n\n    useEffect(() => {\n        const element = rowElement.current;\n        if (!element) {\n            return undefined;\n        }\n\n        let isDragging = false;\n        let hasMoved = false;\n        let startX = 0;\n        let scrollStart = 0;\n\n        const isOverflowing = () => element.scrollWidth > element.clientWidth + 1;\n\n        const handleMouseDown = (event) => {\n            if (event.button !== 0 || !isOverflowing()) {\n                return;\n            }\n            // arrastrar dentro de un campo de texto es seleccionar texto, no desplazar la tira\n            if (['INPUT', 'TEXTAREA'].includes(event.target?.tagName)) {\n                return;\n            }\n            isDragging = true;\n            hasMoved = false;\n            startX = event.pageX;\n            scrollStart = element.scrollLeft;\n        };\n\n        const handleMouseMove = (event) => {\n            if (!isDragging) {\n                return;\n            }\n            const distance = event.pageX - startX;\n            if (!hasMoved && Math.abs(distance) > DRAG_THRESHOLD_PIXELS) {\n                hasMoved = true;\n                element.style.cursor = 'grabbing';\n            }\n            if (hasMoved) {\n                event.preventDefault();\n                element.scrollLeft = scrollStart - distance;\n            }\n        };\n\n        const stopDragging = () => {\n            isDragging = false;\n            element.style.cursor = '';\n        };\n\n        const handleClickCapture = (event) => {\n            if (!hasMoved) {\n                return;\n            }\n            // se arrastró: el clic que viene detrás NO es un clic\n            event.preventDefault();\n            event.stopPropagation();\n            hasMoved = false;\n        };\n\n        const handleWheel = (event) => {\n            if (isOverflowing() && Math.abs(event.deltaY) > Math.abs(event.deltaX)) {\n                event.preventDefault();\n                element.scrollLeft += event.deltaY;\n            }\n        };\n\n        if (enableDragScroll) {\n            element.addEventListener('mousedown', handleMouseDown);\n            element.addEventListener('mousemove', handleMouseMove);\n            element.addEventListener('mouseup', stopDragging);\n            element.addEventListener('mouseleave', stopDragging);\n            element.addEventListener('click', handleClickCapture, true);\n        }\n        if (enableWheelToX) {\n            element.addEventListener('wheel', handleWheel, {passive: false});\n        }\n\n        return () => {\n            element.removeEventListener('mousedown', handleMouseDown);\n            element.removeEventListener('mousemove', handleMouseMove);\n            element.removeEventListener('mouseup', stopDragging);\n            element.removeEventListener('mouseleave', stopDragging);\n            element.removeEventListener('click', handleClickCapture, true);\n            element.removeEventListener('wheel', handleWheel);\n        };\n    }, [enableDragScroll, enableWheelToX]);\n\n    const isDragEnabled = enableDragScroll && edges.overflow;\n\n    // máscara y no degradado encima: funciona sin saber de qué color es el fondo\n    const fadeMask = fadeEdges && edges.overflow\n        ? `linear-gradient(to right, ${[\n            edges.start ? 'transparent 0, black 24px' : 'black 0',\n            edges.end ? 'black calc(100% - 24px), transparent 100%' : 'black 100%',\n        ].join(', ')})`\n        : undefined;\n\n    return (\n        <Box ref={assignRef}\n             sx={{\n                 ...scrollableRow,\n                 gap,\n                 py,\n                 cursor: isDragEnabled ? 'grab' : 'auto',\n                 userSelect: isDragEnabled ? 'none' : 'auto',\n                 ...(fadeMask && {maskImage: fadeMask, WebkitMaskImage: fadeMask}),\n                 ...sx,\n             }}\n             {...boxProps}>\n            {children}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/layout/SectionCard.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+function SectionCard({ title, action, children }) {
+  return /* @__PURE__ */ jsxs(Paper, { component: "section", variant: "outlined", sx: { p: { xs: 2, md: 2.5 }, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", component: "h2", sx: { lineHeight: 1.6 }, children: title }),
+      action
+    ] }),
+    children
+  ] });
+}
+export {
+  SectionCard as default
+};
+//# sourceMappingURL=SectionCard.js.map

package/dist/ui/layout/SectionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionCard.js","sources":["../../../src/ui/layout/SectionCard.jsx"],"sourcesContent":["// Tarjeta de una sección de una página de detalle: título en versalitas, una acción opcional a la derecha y el contenido.\n//\n// Por qué una tarjeta por sección y no una sola hoja larga con divisiones: en pantalla ancha las secciones se acomodan en\n// columnas (lo principal a la izquierda, los datos de apoyo a la derecha) y cada una se encuentra por su título.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: el título y el contenido llegan ya traducidos.\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.action] botón o liga a la derecha del título\n * @param {import('react').ReactNode} props.children\n */\nexport default function SectionCard({title, action, children}) {\n    return (\n        <Paper component=\"section\" variant=\"outlined\" sx={{p: {xs: 2, md: 2.5}, minWidth: 0}}>\n            <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 1.5}}>\n                <Typography variant=\"overline\" color=\"text.secondary\" component=\"h2\" sx={{lineHeight: 1.6}}>{title}</Typography>\n                {action}\n            </Box>\n            {children}\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;;AAgBA,SAAwB,YAAY,EAAC,OAAO,QAAQ,YAAW;AAC3D,8BACK,OAAA,EAAM,WAAU,WAAU,SAAQ,YAAW,IAAI,EAAC,GAAG,EAAC,IAAI,GAAG,IAAI,OAAM,UAAU,KAC9E,UAAA;AAAA,IAAA,qBAAC,KAAA,EAAI,IAAI,EAAC,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OAC1F,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAiB,WAAU,MAAK,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,OAAM;AAAA,MAClG;AAAA,IAAA,GACL;AAAA,IACC;AAAA,EAAA,GACL;AAER;"}

package/dist/ui/layout/appBarHeight.js

@@ -0,0 +1,42 @@
+"use client";
+import { useRef, useEffect, useLayoutEffect } from "react";
+const APP_BAR_HEIGHT_CSS_VARIABLE = "--app-bar-height";
+const APP_BAR_HEIGHT_WITHOUT_RIBBON_PIXELS = 56;
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const BREATHING_ROOM_BELOW_APP_BAR_PIXELS = 16;
+const APP_BAR_HEIGHT = `var(${APP_BAR_HEIGHT_CSS_VARIABLE}, ${APP_BAR_HEIGHT_WITHOUT_RIBBON_PIXELS}px)`;
+const SCROLL_MARGIN_BELOW_APP_BAR = `calc(${APP_BAR_HEIGHT} + ${BREATHING_ROOM_BELOW_APP_BAR_PIXELS}px)`;
+function useAppBarHeightPublisher() {
+  const appBarElement = useRef(null);
+  useBrowserLayoutEffect(() => {
+    const element = appBarElement.current;
+    if (!element || typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const rootStyle = document.documentElement.style;
+    const publishHeight = () => {
+      const box = element.getBoundingClientRect();
+      const isAtBottom = box.top > window.innerHeight / 2;
+      const stickyTopPixels = Number.parseFloat(window.getComputedStyle(element).top) || 0;
+      const coveredPixels = isAtBottom ? 0 : Math.round(box.height + stickyTopPixels);
+      rootStyle.setProperty(APP_BAR_HEIGHT_CSS_VARIABLE, `${coveredPixels}px`);
+    };
+    publishHeight();
+    const resizeObserver = new ResizeObserver(publishHeight);
+    resizeObserver.observe(element);
+    window.addEventListener("resize", publishHeight);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", publishHeight);
+      rootStyle.removeProperty(APP_BAR_HEIGHT_CSS_VARIABLE);
+    };
+  }, []);
+  return appBarElement;
+}
+export {
+  APP_BAR_HEIGHT,
+  APP_BAR_HEIGHT_CSS_VARIABLE,
+  SCROLL_MARGIN_BELOW_APP_BAR,
+  useAppBarHeightPublisher
+};
+//# sourceMappingURL=appBarHeight.js.map

package/dist/ui/layout/appBarHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appBarHeight.js","sources":["../../../src/ui/layout/appBarHeight.js"],"sourcesContent":["// El alto real de la barra superior, publicado como variable CSS para quien necesite dejarle lugar. Si la barra flota\n// separada de la orilla de arriba (el marco con vidrio), cuenta también esa separación: es lo que tapa.\n//\n// La barra superior se queda fija arriba al deslizar (sticky) y puede llevar adentro un aviso (una franja «Carga en\n// curso»): no siempre mide lo mismo. Quien manda la vista a una sección de su página (scroll-margin-top) necesita el\n// alto que la barra tiene EN ESE MOMENTO; con un número fijo, la barra con el aviso tapaba el título de la sección.\n// El layout de la aplicación mide su barra (useAppBarHeightPublisher) y las páginas solo usan SCROLL_MARGIN_BELOW_APP_BAR.\n//\n// NOTA sobre la CSP (sin 'unsafe-inline'): la variable se pone con style.setProperty, que es el objeto de estilos del\n// elemento y la CSP no lo bloquea; lo que bloquea es un atributo style=\"\" escrito en el HTML.\n//\n// Helpers genéricos del paquete: function (regla de la casa).\nimport {useEffect, useLayoutEffect, useRef} from 'react';\n\n/** Nombre de la variable CSS con el alto de la barra superior, en px. */\nexport const APP_BAR_HEIGHT_CSS_VARIABLE = '--app-bar-height';\n\n// lo que mide la barra sin aviso (el minHeight de su Toolbar): vale mientras nadie ha medido\nconst APP_BAR_HEIGHT_WITHOUT_RIBBON_PIXELS = 56;\n\n// se mide ANTES del primer pintado: el menú lateral empieza debajo de la barra y, con el alto de respaldo, brincaba al\n// medirse. En el servidor useLayoutEffect avisa en consola; ahí no hay nada que medir\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n// aire entre la barra y el título de la sección a la que se llega\nconst BREATHING_ROOM_BELOW_APP_BAR_PIXELS = 16;\n\n/** El alto real de la barra, como valor de CSS: para lo que se acomoda justo debajo de ella (el diálogo de contenido). */\nexport const APP_BAR_HEIGHT = `var(${APP_BAR_HEIGHT_CSS_VARIABLE}, ${APP_BAR_HEIGHT_WITHOUT_RIBBON_PIXELS}px)`;\n\n/** Valor de scroll-margin-top para una sección a la que se llega con un ancla: el alto real de la barra más un respiro. */\nexport const SCROLL_MARGIN_BELOW_APP_BAR = `calc(${APP_BAR_HEIGHT} + ${BREATHING_ROOM_BELOW_APP_BAR_PIXELS}px)`;\n\n/**\n * Mide la barra superior y publica su alto en la variable CSS cada vez que cambia (aparece o se cierra un aviso, se\n * gira el teléfono, cambia el ancho de la ventana).\n *\n * @returns {import('react').RefObject<HTMLElement>} la referencia que se le pone a la barra\n */\nexport function useAppBarHeightPublisher() {\n    const appBarElement = useRef(null);\n\n    useBrowserLayoutEffect(() => {\n        const element = appBarElement.current;\n        // guard clause: sin elemento o sin ResizeObserver (navegador muy viejo) se queda el alto de respaldo\n        if (!element || typeof ResizeObserver === 'undefined') {\n            return undefined;\n        }\n        const rootStyle = document.documentElement.style;\n        // el alto más lo que la barra flota separada de la orilla de arriba (con vidrio, 8 px; si no, 0): lo que tapa la barra\n        // cuando se queda fija. Al cambiar eso también cambia su ancho (sus márgenes), y el ResizeObserver lo vuelve a medir\n        // OJO: en el teléfono con vidrio la barra flota ABAJO (como la de Safari): arriba no tapa nada y se publica 0; si no,\n        // lo que se pega arriba al deslizar dejaba un hueco del alto de una barra que ya no está ahí\n        const publishHeight = () => {\n            const box = element.getBoundingClientRect();\n            const isAtBottom = box.top > window.innerHeight / 2;\n            const stickyTopPixels = Number.parseFloat(window.getComputedStyle(element).top) || 0;\n            const coveredPixels = isAtBottom ? 0 : Math.round(box.height + stickyTopPixels);\n            rootStyle.setProperty(APP_BAR_HEIGHT_CSS_VARIABLE, `${coveredPixels}px`);\n        };\n\n        publishHeight();\n        const resizeObserver = new ResizeObserver(publishHeight);\n        resizeObserver.observe(element);\n        // al cambiar de ancho la barra puede pasar de arriba a abajo sin cambiar de tamaño\n        window.addEventListener('resize', publishHeight);\n\n        return () => {\n            resizeObserver.disconnect();\n            window.removeEventListener('resize', publishHeight);\n            rootStyle.removeProperty(APP_BAR_HEIGHT_CSS_VARIABLE);\n        };\n    }, []);\n\n    return appBarElement;\n}\n"],"names":[],"mappings":";;AAeY,MAAC,8BAA8B;AAG3C,MAAM,uCAAuC;AAI7C,MAAM,yBAAyB,OAAO,WAAW,cAAc,YAAY;AAG3E,MAAM,sCAAsC;AAGhC,MAAC,iBAAiB,OAAO,2BAA2B,KAAK,oCAAoC;AAG7F,MAAC,8BAA8B,QAAQ,cAAc,MAAM,mCAAmC;AAQnG,SAAS,2BAA2B;AACvC,QAAM,gBAAgB,OAAO,IAAI;AAEjC,yBAAuB,MAAM;AACzB,UAAM,UAAU,cAAc;AAE9B,QAAI,CAAC,WAAW,OAAO,mBAAmB,aAAa;AACnD,aAAO;AAAA,IACX;AACA,UAAM,YAAY,SAAS,gBAAgB;AAK3C,UAAM,gBAAgB,MAAM;AACxB,YAAM,MAAM,QAAQ,sBAAqB;AACzC,YAAM,aAAa,IAAI,MAAM,OAAO,cAAc;AAClD,YAAM,kBAAkB,OAAO,WAAW,OAAO,iBAAiB,OAAO,EAAE,GAAG,KAAK;AACnF,YAAM,gBAAgB,aAAa,IAAI,KAAK,MAAM,IAAI,SAAS,eAAe;AAC9E,gBAAU,YAAY,6BAA6B,GAAG,aAAa,IAAI;AAAA,IAC3E;AAEA,kBAAa;AACb,UAAM,iBAAiB,IAAI,eAAe,aAAa;AACvD,mBAAe,QAAQ,OAAO;AAE9B,WAAO,iBAAiB,UAAU,aAAa;AAE/C,WAAO,MAAM;AACT,qBAAe,WAAU;AACzB,aAAO,oBAAoB,UAAU,aAAa;AAClD,gBAAU,eAAe,2BAA2B;AAAA,IACxD;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SAAO;AACX;"}

package/dist/ui/metrics/BarList.js

@@ -0,0 +1,89 @@
+"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 TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+import { ResponsiveContainer, BarChart, XAxis, YAxis, Tooltip, Bar, LabelList } from "recharts";
+import { formatNumber } from "../../formatting.js";
+import ChartTooltip from "./ChartTooltip.js";
+import TableToggle from "./TableToggle.js";
+import { BAR_MIN_POINT_SIZE, barLabelValueOf } from "./barListLabels.js";
+const ROW_HEIGHT_PIXELS = 36;
+const TEXT_COLOR = "var(--mui-palette-text-primary)";
+const MUTED_COLOR = "var(--mui-palette-text-secondary)";
+function ValueLabel({ x, y, width, height, value }) {
+  return /* @__PURE__ */ jsxs("text", { x: x + width + 8, y: y + height / 2, dominantBaseline: "central", fontSize: 13, children: [
+    /* @__PURE__ */ jsx("tspan", { fill: TEXT_COLOR, fontWeight: 600, children: formatNumber(value.value) }),
+    value.detail && /* @__PURE__ */ jsx("tspan", { fill: MUTED_COLOR, fontSize: 12, children: ` ${value.detail}` })
+  ] });
+}
+function BarList({ items, onSelect, emptyLabel, tone = "primary" }) {
+  const [asTable, setAsTable] = useState(false);
+  if (!items.length) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyLabel });
+  }
+  const labelWidth = Math.min(220, 16 + Math.max(...items.map((item) => String(item.label ?? "").length)) * 7);
+  const longestValue = Math.max(...items.map((item) => `${formatNumber(item.value)} ${item.detail ?? ""}`.length));
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: () => setAsTable((current) => !current) }),
+    asTable ? /* @__PURE__ */ jsx(Table, { size: "small", children: /* @__PURE__ */ jsx(TableBody, { children: items.map((item) => /* @__PURE__ */ jsxs(
+      TableRow,
+      {
+        hover: Boolean(onSelect),
+        onClick: onSelect ? () => onSelect(item) : void 0,
+        sx: { cursor: onSelect ? "pointer" : "default" },
+        children: [
+          /* @__PURE__ */ jsx(TableCell, { children: item.label }),
+          /* @__PURE__ */ jsxs(TableCell, { align: "right", children: [
+            formatNumber(item.value),
+            " ",
+            item.detail
+          ] })
+        ]
+      },
+      item.key
+    )) }) }) : /* @__PURE__ */ jsx(Box, { sx: { height: items.length * ROW_HEIGHT_PIXELS, color: `${tone}.main` }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: items, layout: "vertical", margin: { top: 0, bottom: 0, left: 0, right: 16 + longestValue * 7 }, children: [
+      /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true, domain: [0, (dataMax) => Math.max(dataMax, 1)] }),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          type: "category",
+          dataKey: "label",
+          width: labelWidth,
+          tickLine: false,
+          axisLine: false,
+          tick: { fill: TEXT_COLOR, fontSize: 13 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          cursor: { fill: "var(--mui-palette-action-hover)" },
+          content: /* @__PURE__ */ jsx(ChartTooltip, { render: (item) => item.tooltip ?? `${item.label}: ${formatNumber(item.value)}` })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: "value",
+          fill: "currentColor",
+          maxBarSize: 16,
+          radius: [0, 4, 4, 0],
+          isAnimationActive: false,
+          minPointSize: BAR_MIN_POINT_SIZE,
+          cursor: onSelect ? "pointer" : "default",
+          onClick: onSelect ? (entry) => onSelect(entry.payload) : void 0,
+          children: /* @__PURE__ */ jsx(LabelList, { valueAccessor: barLabelValueOf, content: (labelProps) => /* @__PURE__ */ jsx(ValueLabel, { ...labelProps }) })
+        }
+      )
+    ] }) }) })
+  ] });
+}
+export {
+  BarList as default
+};
+//# sourceMappingURL=BarList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarList.js","sources":["../../../src/ui/metrics/BarList.jsx"],"sourcesContent":["// Barras horizontales de UNA serie con su nombre a la izquierda y su valor en la punta (ventas por producto,\n// cuentas por organización), dibujadas con Recharts.\n//\n// Horizontales porque los nombres son largos (\"Empresa / Área de ventas\"): se leen completos sin rotarlos. Una serie → un\n// color (el del tono, vía currentColor: los atributos SVG no leen var(...) pero sí currentColor); el valor va en tinta,\n// nunca del color de la barra; y cada barra puede llevar a la pantalla que la explica.\n//\n// OJO: el número y el detalle de la punta salen del renglón de la barra (barListLabels.js), nunca de items[index]: Recharts\n// descarta las barras de ancho 0 y renumera las etiquetas, y el detalle se corría al renglón de arriba.\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 TableRow from '@mui/material/TableRow';\nimport Typography from '@mui/material/Typography';\nimport {Bar, BarChart, LabelList, 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';\nimport {BAR_MIN_POINT_SIZE, barLabelValueOf} from '@/ui/metrics/barListLabels.js';\n\nconst ROW_HEIGHT_PIXELS = 36;\nconst TEXT_COLOR = 'var(--mui-palette-text-primary)';\nconst MUTED_COLOR = 'var(--mui-palette-text-secondary)';\n\n/** El valor en la punta: el número fuerte y el detalle (\"de 8\") tenue; value es {value, detail} de barLabelValueOf. */\nfunction ValueLabel({x, y, width, height, value}) {\n    return (\n        <text x={x + width + 8} y={y + height / 2} dominantBaseline=\"central\" fontSize={13}>\n            <tspan fill={TEXT_COLOR} fontWeight={600}>{formatNumber(value.value)}</tspan>\n            {value.detail && <tspan fill={MUTED_COLOR} fontSize={12}>{` ${value.detail}`}</tspan>}\n        </text>\n    );\n}\n\n/**\n * @param {object} props\n * @param {Array<{key: string, label: string, value: number, detail?: string, tooltip?: string}>} props.items\n * @param {(item: any) => void} [props.onSelect] recibe el renglón de items que se picó\n * @param {string} props.emptyLabel ya traducido\n * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone]\n */\nexport default function BarList({items, onSelect, emptyLabel, tone = 'primary'}) {\n    const [asTable, setAsTable] = useState(false);\n\n    // guard clause: sin datos se dice, no se pinta un eje vacío\n    if (!items.length) {\n        return <Typography variant=\"body2\" color=\"text.secondary\">{emptyLabel}</Typography>;\n    }\n\n    // lo más largo de la etiqueta decide el ancho del eje: sin esto el nombre se corta o sobra medio contenedor\n    // OJO: String(... ?? '') porque un renglón sin nombre (catálogo dado de baja) tumbaba toda la gráfica\n    // OJO: 220 px de tope. Con 160 se cortaban etiquetas largas («Cuenta pendiente de activar») sin puntos suspensivos\n    // ni forma de leerlas; el tooltip de la barra sigue mostrando el texto completo\n    const labelWidth = Math.min(220, 16 + Math.max(...items.map((item) => String(item.label ?? '').length)) * 7);\n    const longestValue = Math.max(...items.map((item) => `${formatNumber(item.value)} ${item.detail ?? ''}`.length));\n\n    return (\n        <Box>\n            <TableToggle asTable={asTable} onToggle={() => setAsTable((current) => !current)} />\n            {asTable ? (\n                <Table size=\"small\">\n                    <TableBody>\n                        {items.map((item) => (\n                            <TableRow key={item.key} hover={Boolean(onSelect)} onClick={onSelect ? () => onSelect(item) : undefined}\n                                      sx={{cursor: onSelect ? 'pointer' : 'default'}}>\n                                <TableCell>{item.label}</TableCell>\n                                <TableCell align=\"right\">{formatNumber(item.value)} {item.detail}</TableCell>\n                            </TableRow>\n                        ))}\n                    </TableBody>\n                </Table>\n            ) : (\n                <Box sx={{height: items.length * ROW_HEIGHT_PIXELS, color: `${tone}.main`}}>\n                    <ResponsiveContainer width=\"100%\" height=\"100%\">\n                        <BarChart data={items} layout=\"vertical\" margin={{top: 0, bottom: 0, left: 0, right: 16 + longestValue * 7}}>\n                            {/* OJO: con todo en 0 el dominio [0, 0] manda el 0 a la MITAD del eje (escala degenerada de d3) y la\n                                barra de 1 px con su «0 de 2» saldría a medio renglón; el tope mínimo de 1 lo deja en el origen */}\n                            <XAxis type=\"number\" hide domain={[0, (dataMax) => Math.max(dataMax, 1)]} />\n                            <YAxis type=\"category\" dataKey=\"label\" width={labelWidth} tickLine={false} axisLine={false}\n                                   tick={{fill: TEXT_COLOR, fontSize: 13}} />\n                            <Tooltip cursor={{fill: 'var(--mui-palette-action-hover)'}}\n                                     content={<ChartTooltip render={(item) => item.tooltip ?? `${item.label}: ${formatNumber(item.value)}`} />} />\n                            <Bar dataKey=\"value\" fill=\"currentColor\" maxBarSize={16} radius={[0, 4, 4, 0]} isAnimationActive={false}\n                                 minPointSize={BAR_MIN_POINT_SIZE} cursor={onSelect ? 'pointer' : 'default'}\n                                 onClick={onSelect ? (entry) => onSelect(entry.payload) : undefined}>\n                                {/* OJO: SIN dataKey; con dataKey LabelList ignora valueAccessor y regresa el índice corrido */}\n                                <LabelList valueAccessor={barLabelValueOf} content={(labelProps) => <ValueLabel {...labelProps} />} />\n                            </Bar>\n                        </BarChart>\n                    </ResponsiveContainer>\n                </Box>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/metrics/CalendarHeatmap.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+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 Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { formatDate, formatNumber, formatMonthShortName, formatWeekdayShortName } from "../../formatting.js";
+import { calendarWeeksOf, levelOf, HEATMAP_LEVELS } from "./heatmapScale.js";
+import TableToggle from "./TableToggle.js";
+const CELL_PIXELS = { xs: 12, md: 16 };
+const GAP_PIXELS = 3;
+const LABELED_WEEKDAYS = /* @__PURE__ */ new Set([1, 3, 5]);
+const LEVEL_TONE_PERCENT = { 1: 30, 2: 55, 3: 78, 4: 100 };
+function levelFill(theme, tone, level) {
+  const { palette } = theme.vars ?? theme;
+  if (level === 0) {
+    return palette.action.hover;
+  }
+  return `color-mix(in srgb, ${palette[tone].main} ${LEVEL_TONE_PERCENT[level]}%, transparent)`;
+}
+function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone = "primary" }) {
+  const { t } = useToolkitTranslation("common");
+  const [asTable, setAsTable] = useState(false);
+  const { weeks, monthMarks, thresholds } = useMemo(() => calendarWeeksOf({ startsOn, endsOn, days }), [startsOn, endsOn, days]);
+  const activeDays = days.filter((day) => day.value > 0);
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, sx: { justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: activeDays.length ? summary : emptyLabel }),
+      /* @__PURE__ */ jsx(Box, { sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(TableToggle, { asTable, onToggle: () => setAsTable((current) => !current) }) })
+    ] }),
+    asTable ? /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 260, overflowY: "auto" }, children: /* @__PURE__ */ jsxs(Table, { size: "small", "aria-label": ariaLabel, children: [
+      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: t("charts.day") }),
+        /* @__PURE__ */ jsx(TableCell, { align: "right", children: valueLabel }),
+        /* @__PURE__ */ jsx(TableCell, {})
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: [...activeDays].reverse().map((day) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { sx: { whiteSpace: "nowrap" }, children: formatDate(day.date) }),
+        /* @__PURE__ */ jsx(TableCell, { align: "right", sx: { fontVariantNumeric: "tabular-nums" }, children: formatNumber(day.value) }),
+        /* @__PURE__ */ jsx(TableCell, { sx: { color: "text.secondary" }, children: day.detail })
+      ] }, day.date)) })
+    ] }) }) : (
+      // el calendario no se encoge: en pantallas angostas se desliza y arranca mostrando lo más reciente
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: { overflowX: "auto", pb: 0.5 },
+          ref: (node) => {
+            if (node) {
+              node.scrollLeft = node.scrollWidth;
+            }
+          },
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              role: "img",
+              "aria-label": ariaLabel,
+              sx: {
+                display: "inline-grid",
+                gridTemplateColumns: {
+                  xs: `auto repeat(${weeks.length}, ${CELL_PIXELS.xs}px)`,
+                  md: `auto repeat(${weeks.length}, ${CELL_PIXELS.md}px)`
+                },
+                columnGap: `${GAP_PIXELS}px`,
+                rowGap: `${GAP_PIXELS}px`,
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Box, {}),
+                monthMarks.map((month, column) => /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    color: "text.secondary",
+                    sx: { fontSize: 10, lineHeight: 1, whiteSpace: "nowrap", overflow: "visible", width: CELL_PIXELS },
+                    children: month ? formatMonthShortName(month) : ""
+                  },
+                  `month-${column}`
+                )),
+                [1, 2, 3, 4, 5, 6, 7].map((isoWeekday) => /* @__PURE__ */ jsxs(Box, { sx: { display: "contents" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "caption",
+                      color: "text.secondary",
+                      sx: { fontSize: 10, lineHeight: { xs: `${CELL_PIXELS.xs}px`, md: `${CELL_PIXELS.md}px` }, pr: 0.75 },
+                      children: LABELED_WEEKDAYS.has(isoWeekday) ? formatWeekdayShortName(isoWeekday) : ""
+                    }
+                  ),
+                  weeks.map((week, column) => {
+                    const day = week[isoWeekday - 1];
+                    if (!day) {
+                      return /* @__PURE__ */ jsx(Box, {}, `outside-${column}-${isoWeekday}`);
+                    }
+                    const level = levelOf(day.value, thresholds);
+                    return /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        arrow: true,
+                        disableInteractive: true,
+                        title: `${formatDate(day.date)}: ${describeValue(day.value)}${day.detail ? ` · ${day.detail}` : ""}`,
+                        children: /* @__PURE__ */ jsx(Box, { sx: (theme) => ({ width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: "3px", bgcolor: levelFill(theme, tone, level) }) })
+                      },
+                      day.date
+                    );
+                  })
+                ] }, `weekday-${isoWeekday}`))
+              ]
+            }
+          )
+        }
+      )
+    ),
+    !asTable && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, sx: { alignItems: "center", justifyContent: "flex-end", mt: 1 }, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mr: 0.5 }, children: t("charts.less") }),
+      HEATMAP_LEVELS.map((level) => /* @__PURE__ */ jsx(Box, { sx: (theme) => ({ width: CELL_PIXELS, height: CELL_PIXELS, borderRadius: "3px", bgcolor: levelFill(theme, tone, level) }) }, level)),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { ml: 0.5 }, children: t("charts.more") })
+    ] })
+  ] });
+}
+export {
+  CalendarHeatmap as default
+};
+//# sourceMappingURL=CalendarHeatmap.js.map

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

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

package/dist/ui/metrics/ChartTooltip.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import { isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
+const CHART_TOOLTIP_OPACITY = 0.92;
+function ChartTooltip({ active, payload, render }) {
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Paper, { elevation: 3, sx: [{ px: 1.5, py: 1, pointerEvents: "none" }, (theme) => isGlassTheme(theme) ? glassStylesOf(theme, { opacity: CHART_TOOLTIP_OPACITY }) : {}], children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: render(payload[0].payload) }) });
+}
+export {
+  ChartTooltip as default
+};
+//# sourceMappingURL=ChartTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.js","sources":["../../../src/ui/metrics/ChartTooltip.jsx"],"sourcesContent":["// El tooltip de las gráficas de Recharts con el look de la app.\n//\n// El de Recharts trae su propio estilo (fondo blanco, borde gris); este usa el Paper del tema y habla igual que los\n// tooltips del resto de la app (y se voltea solo cuando llegue el modo oscuro). Con el vidrio del tema\n// (createToolkitTheme({glass: true})) es de vidrio: flota sobre la gráfica.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\nimport Typography from '@mui/material/Typography';\n\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\n\n/**\n * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props\n */\n// el vidrio del cuadrito, casi opaco (el material «grueso»): es para leer una cifra encima de la gráfica; con el vidrio de\n// los controles (60 %) se veía la barra de atrás a través del texto (lo reportaron)\nconst CHART_TOOLTIP_OPACITY = 0.92;\n\nexport default function ChartTooltip({active, payload, render}) {\n    // guard clause: Recharts lo monta siempre; solo se pinta sobre una barra\n    if (!active || !payload?.length) {\n        return null;\n    }\n    return (\n        <Paper elevation={3} sx={[{px: 1.5, py: 1, pointerEvents: 'none'}, (theme) => (isGlassTheme(theme) ? glassStylesOf(theme, {opacity: CHART_TOOLTIP_OPACITY}) : {})]}>\n            <Typography variant=\"body2\">{render(payload[0].payload)}</Typography>\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,wBAAwB;AAE9B,SAAwB,aAAa,EAAC,QAAQ,SAAS,UAAS;AAE5D,MAAI,CAAC,UAAU,CAAC,SAAS,QAAQ;AAC7B,WAAO;AAAA,EACX;AACA,6BACK,OAAA,EAAM,WAAW,GAAG,IAAI,CAAC,EAAC,IAAI,KAAK,IAAI,GAAG,eAAe,OAAA,GAAS,CAAC,UAAW,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,SAAS,uBAAsB,IAAI,CAAA,CAAG,GAC7J,UAAA,oBAAC,YAAA,EAAW,SAAQ,SAAS,UAAA,OAAO,QAAQ,CAAC,EAAE,OAAO,GAAE,GAC5D;AAER;"}