@stackcraftmx/calcita 0.0.0-stage → 0.23.0

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,104 @@
+"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 }) {
+  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) => setExpandedKeys((currentKeys) => {
+    const nextKeys = new Set(currentKeys);
+    if (nextKeys.has(groupKey)) {
+      nextKeys.delete(groupKey);
+    } else {
+      nextKeys.add(groupKey);
+    }
+    return nextKeys;
+  });
+  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

package/dist/ui/timeline/GroupedTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedTimeline.js","sources":["../../../src/ui/timeline/GroupedTimeline.jsx"],"sourcesContent":["// Línea de tiempo por grupos (Timeline de @mui/lab al estilo del ejemplo «Customization» de MUI): cada grupo con su\n// título y una insignia opcional, y cada evento con su ícono dentro del punto, su título, su hora y un detalle libre.\n//\n// Uso típico: el historial de un registro agrupado por etapa o por intento (detalle de un pedido: un grupo por intento de entrega,\n// el vigente resaltado). El énfasis de cada grupo (TIMELINE_EMPHASIS) decide cómo se pintan sus puntos (timelineDot.js).\n//\n// En pantalla ancha los eventos alternan de lado y la hora va del otro lado del punto; en celular todo va de un lado, con\n// la hora abajo del título, para que quepa.\n//\n// Un grupo plegable (isCollapsible) enseña solo su título y su resumen hasta que se abre: sirve para que lo viejo no\n// obligue a bajar (los intentos anteriores van plegados).\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: títulos, horas y detalles llegan ya traducidos y\n// formateados, y el ícono y el tono de cada evento los decide quien la usa (con sus diccionarios).\nimport {useState} from 'react';\nimport Timeline from '@mui/lab/Timeline';\nimport TimelineConnector from '@mui/lab/TimelineConnector';\nimport TimelineContent from '@mui/lab/TimelineContent';\nimport TimelineDot from '@mui/lab/TimelineDot';\nimport TimelineItem, {timelineItemClasses} from '@mui/lab/TimelineItem';\nimport TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';\nimport TimelineSeparator from '@mui/lab/TimelineSeparator';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport Collapse from '@mui/material/Collapse';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport {useTheme} from '@mui/material/styles';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {TIMELINE_EMPHASIS, timelineDotOf} from '@/ui/timeline/timelineDot.js';\n\n// el fondo del grupo resaltado: cuánto del color principal (por ciento)\nconst HIGHLIGHT_TINT_PERCENT = 8;\n// en celular la línea va pegada a la izquierda: sin la columna de enfrente que @mui/lab reserva por omisión\nconst LEFT_ALIGNED_TIMELINE = {m: 0, px: 0, py: 0.5, [`& .${timelineItemClasses.root}::before`]: {flex: 0, p: 0}};\nconst ALTERNATE_TIMELINE = {m: 0, px: 0, py: 0.5};\n\n/**\n * @param {object} props\n * @param {Object[]} props.groups\n * @param {string} props.groups[].key\n * @param {string} [props.groups[].title] texto ya traducido; sin título el grupo no pinta encabezado\n * @param {string} [props.groups[].badge] insignia junto al título (p. ej. «Intento actual»)\n * @param {string} [props.groups[].summary] lo que se lee junto al título del grupo plegado (p. ej. «6 eventos»)\n * @param {boolean} [props.groups[].isCollapsible] el título se vuelve un botón que abre y cierra el grupo (necesita\n *     title)\n * @param {boolean} [props.groups[].defaultExpanded] si un grupo plegable arranca abierto (por omisión, sí)\n * @param {'highlighted'|'normal'|'muted'} [props.groups[].emphasis]\n * @param {Object[]} props.groups[].items\n * @param {string} props.groups[].items[].key\n * @param {import('react').ElementType} [props.groups[].items[].icon] ícono dentro del punto\n * @param {string} [props.groups[].items[].tone] success, warning, error, info, primary o grey\n * @param {import('react').ReactNode} props.groups[].items[].title\n * @param {string} [props.groups[].items[].timestamp] fecha y hora ya formateadas\n * @param {import('react').ReactNode} [props.groups[].items[].details] lo que va abajo del título (chip de resultado, una liga...)\n */\nexport default function GroupedTimeline({groups}) {\n    const theme = useTheme();\n    const isWide = useMediaQuery(theme.breakpoints.up('md'));\n    // llaves de los grupos plegables que el usuario tiene abiertos; arrancan como dice defaultExpanded\n    const [expandedKeys, setExpandedKeys] = useState(() => new Set(\n        groups.filter((timelineGroup) => timelineGroup.defaultExpanded !== false).map((timelineGroup) => timelineGroup.key),\n    ));\n    const toggleGroup = (groupKey) => setExpandedKeys((currentKeys) => {\n        const nextKeys = new Set(currentKeys);\n        if (nextKeys.has(groupKey)) {\n            nextKeys.delete(groupKey);\n        } else {\n            nextKeys.add(groupKey);\n        }\n        return nextKeys;\n    });\n\n    return (\n        <Stack spacing={1.5}>\n            {groups.map((timelineGroup) => {\n                const emphasis = timelineGroup.emphasis ?? TIMELINE_EMPHASIS.normal;\n                const isHighlighted = emphasis === TIMELINE_EMPHASIS.highlighted;\n                const isMuted = emphasis === TIMELINE_EMPHASIS.muted;\n                const isCollapsible = Boolean(timelineGroup.isCollapsible && timelineGroup.title);\n                const isExpanded = !isCollapsible || expandedKeys.has(timelineGroup.key);\n\n                return (\n                    // el borde transparente en los demás grupos mantiene todo alineado con el grupo resaltado\n                    <Box key={timelineGroup.key} sx={{\n                        border: 1, borderRadius: 1.5, px: 1.5, pt: 1.25, pb: isExpanded ? 0 : 1.25,\n                        borderColor: isHighlighted ? 'primary.main' : 'transparent',\n                        // un tinte del color principal: primary.lighter no existe en el tema de MUI y el grupo se quedaba sin fondo\n                        bgcolor: (theme) => (isHighlighted ? `color-mix(in srgb, ${paletteOf(theme).primary.main} ${HIGHLIGHT_TINT_PERCENT}%, transparent)` : 'transparent'),\n                    }}>\n                        {timelineGroup.title && (\n                            <Stack direction=\"row\" spacing={1} sx={{alignItems: 'center', justifyContent: isWide ? 'center' : 'flex-start'}}>\n                                <ButtonBase disabled={!isCollapsible} onClick={() => toggleGroup(timelineGroup.key)}\n                                            aria-expanded={isCollapsible ? isExpanded : undefined}\n                                            sx={{gap: 1, px: 1, py: 0.25, borderRadius: 1, '&.Mui-disabled': {pointerEvents: 'none'}}}>\n                                    <Typography variant=\"h6\" component=\"h3\" sx={{fontWeight: 700, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n                                        {timelineGroup.title}\n                                    </Typography>\n                                    {/* plegado, el grupo dice cuántos eventos trae: se sabe qué hay sin abrirlo */}\n                                    {isCollapsible && timelineGroup.summary && (\n                                        <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\">{timelineGroup.summary}</Typography>\n                                    )}\n                                    {isCollapsible && (\n                                        <ExpandMoreIcon fontSize=\"small\" sx={{\n                                            color: 'text.secondary', transition: theme.transitions.create('transform'),\n                                            transform: isExpanded ? 'rotate(180deg)' : 'none',\n                                        }} />\n                                    )}\n                                </ButtonBase>\n                                {timelineGroup.badge && <Chip size=\"small\" color=\"primary\" label={timelineGroup.badge} />}\n                            </Stack>\n                        )}\n                        <Collapse in={isExpanded} unmountOnExit>\n                            <Timeline position={isWide ? 'alternate' : 'right'} sx={isWide ? ALTERNATE_TIMELINE : LEFT_ALIGNED_TIMELINE}>\n                                {timelineGroup.items.map((timelineEntry, entryPosition) => {\n                                    const EntryIcon = timelineEntry.icon;\n                                    const isFirstEntry = entryPosition === 0;\n                                    const isLastEntry = entryPosition === timelineGroup.items.length - 1;\n\n                                    return (\n                                        <TimelineItem key={timelineEntry.key}>\n                                            {isWide && (\n                                                <TimelineOppositeContent variant=\"body2\" color=\"text.secondary\" sx={{m: 'auto 0'}}>\n                                                    {timelineEntry.timestamp}\n                                                </TimelineOppositeContent>\n                                            )}\n                                            <TimelineSeparator>\n                                                <TimelineConnector sx={{visibility: isFirstEntry ? 'hidden' : 'visible'}} />\n                                                <TimelineDot {...timelineDotOf({emphasis, tone: timelineEntry.tone})}>\n                                                    {EntryIcon && <EntryIcon fontSize=\"small\" />}\n                                                </TimelineDot>\n                                                <TimelineConnector sx={{visibility: isLastEntry ? 'hidden' : 'visible'}} />\n                                            </TimelineSeparator>\n                                            <TimelineContent sx={{py: 1.5, px: 2, minWidth: 0}}>\n                                                <Typography variant=\"body2\" component=\"p\" sx={{fontWeight: 600, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n                                                    {timelineEntry.title}\n                                                </Typography>\n                                                {!isWide && timelineEntry.timestamp && (\n                                                    <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{timelineEntry.timestamp}</Typography>\n                                                )}\n                                                {timelineEntry.details}\n                                            </TimelineContent>\n                                        </TimelineItem>\n                                    );\n                                })}\n                            </Timeline>\n                        </Collapse>\n                    </Box>\n                );\n            })}\n        </Stack>\n    );\n}\n"],"names":["theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,yBAAyB;AAE/B,MAAM,wBAAwB,EAAC,GAAG,GAAG,IAAI,GAAG,IAAI,KAAK,CAAC,MAAM,oBAAoB,IAAI,UAAU,GAAG,EAAC,MAAM,GAAG,GAAG,IAAC;AAC/G,MAAM,qBAAqB,EAAC,GAAG,GAAG,IAAI,GAAG,IAAI,IAAA;AAqB7C,SAAwB,gBAAgB,EAAC,UAAS;AAC9C,QAAM,QAAQ,SAAA;AACd,QAAM,SAAS,cAAc,MAAM,YAAY,GAAG,IAAI,CAAC;AAEvD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,MAAM,IAAI;AAAA,IACvD,OAAO,OAAO,CAAC,kBAAkB,cAAc,oBAAoB,KAAK,EAAE,IAAI,CAAC,kBAAkB,cAAc,GAAG;AAAA,EAAA,CACrH;AACD,QAAM,cAAc,CAAC,aAAa,gBAAgB,CAAC,gBAAgB;AAC/D,UAAM,WAAW,IAAI,IAAI,WAAW;AACpC,QAAI,SAAS,IAAI,QAAQ,GAAG;AACxB,eAAS,OAAO,QAAQ;AAAA,IAC5B,OAAO;AACH,eAAS,IAAI,QAAQ;AAAA,IACzB;AACA,WAAO;AAAA,EACX,CAAC;AAED,6BACK,OAAA,EAAM,SAAS,KACX,UAAA,OAAO,IAAI,CAAC,kBAAkB;AAC3B,UAAM,WAAW,cAAc,YAAY,kBAAkB;AAC7D,UAAM,gBAAgB,aAAa,kBAAkB;AACrD,UAAM,UAAU,aAAa,kBAAkB;AAC/C,UAAM,gBAAgB,QAAQ,cAAc,iBAAiB,cAAc,KAAK;AAChF,UAAM,aAAa,CAAC,iBAAiB,aAAa,IAAI,cAAc,GAAG;AAEvE;AAAA;AAAA,MAEI,qBAAC,OAA4B,IAAI;AAAA,QAC7B,QAAQ;AAAA,QAAG,cAAc;AAAA,QAAK,IAAI;AAAA,QAAK,IAAI;AAAA,QAAM,IAAI,aAAa,IAAI;AAAA,QACtE,aAAa,gBAAgB,iBAAiB;AAAA;AAAA,QAE9C,SAAS,CAACA,WAAW,gBAAgB,sBAAsB,UAAUA,MAAK,EAAE,QAAQ,IAAI,IAAI,sBAAsB,oBAAoB;AAAA,MAAA,GAErI,UAAA;AAAA,QAAA,cAAc,SACX,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,IAAI,EAAC,YAAY,UAAU,gBAAgB,SAAS,WAAW,gBAC9F,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAAW,UAAU,CAAC;AAAA,cAAe,SAAS,MAAM,YAAY,cAAc,GAAG;AAAA,cACtE,iBAAe,gBAAgB,aAAa;AAAA,cAC5C,IAAI,EAAC,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,cAAc,GAAG,kBAAkB,EAAC,eAAe,SAAM;AAAA,cAC/F,UAAA;AAAA,gBAAA,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAC,YAAY,KAAK,OAAO,UAAU,mBAAmB,eAAA,GAC7F,wBAAc,OACnB;AAAA,gBAEC,iBAAiB,cAAc,WAC5B,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,QAAQ,UAAA,cAAc,SAAQ;AAAA,gBAE9F,iBACG,oBAAC,gBAAA,EAAe,UAAS,SAAQ,IAAI;AAAA,kBACjC,OAAO;AAAA,kBAAkB,YAAY,MAAM,YAAY,OAAO,WAAW;AAAA,kBACzE,WAAW,aAAa,mBAAmB;AAAA,gBAAA,EAC/C,CAAG;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGV,cAAc,SAAS,oBAAC,MAAA,EAAK,MAAK,SAAQ,OAAM,WAAU,OAAO,cAAc,MAAA,CAAO;AAAA,QAAA,GAC3F;AAAA,QAEJ,oBAAC,YAAS,IAAI,YAAY,eAAa,MACnC,UAAA,oBAAC,YAAS,UAAU,SAAS,cAAc,SAAS,IAAI,SAAS,qBAAqB,uBACjF,wBAAc,MAAM,IAAI,CAAC,eAAe,kBAAkB;AACvD,gBAAM,YAAY,cAAc;AAChC,gBAAM,eAAe,kBAAkB;AACvC,gBAAM,cAAc,kBAAkB,cAAc,MAAM,SAAS;AAEnE,sCACK,cAAA,EACI,UAAA;AAAA,YAAA,UACG,oBAAC,yBAAA,EAAwB,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAC,GAAG,SAAA,GACnE,UAAA,cAAc,WACnB;AAAA,iCAEH,mBAAA,EACG,UAAA;AAAA,cAAA,oBAAC,qBAAkB,IAAI,EAAC,YAAY,eAAe,WAAW,aAAY;AAAA,kCACzE,aAAA,EAAa,GAAG,cAAc,EAAC,UAAU,MAAM,cAAc,KAAA,CAAK,GAC9D,UAAA,aAAa,oBAAC,WAAA,EAAU,UAAS,SAAQ,GAC9C;AAAA,cACA,oBAAC,qBAAkB,IAAI,EAAC,YAAY,cAAc,WAAW,YAAS,CAAG;AAAA,YAAA,GAC7E;AAAA,YACA,qBAAC,iBAAA,EAAgB,IAAI,EAAC,IAAI,KAAK,IAAI,GAAG,UAAU,EAAA,GAC5C,UAAA;AAAA,cAAA,oBAAC,YAAA,EAAW,SAAQ,SAAQ,WAAU,KAAI,IAAI,EAAC,YAAY,KAAK,OAAO,UAAU,mBAAmB,eAAA,GAC/F,wBAAc,OACnB;AAAA,cACC,CAAC,UAAU,cAAc,aACtB,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,WAAU,KAAK,wBAAc,WAAU;AAAA,cAE/F,cAAc;AAAA,YAAA,EAAA,CACnB;AAAA,UAAA,EAAA,GArBe,cAAc,GAsBjC;AAAA,QAER,CAAC,GACL,EAAA,CACJ;AAAA,MAAA,EAAA,GA9DM,cAAc,GA+DxB;AAAA;AAAA,EAER,CAAC,EAAA,CACL;AAER;"}

package/dist/ui/timeline/timelineDot.js

@@ -0,0 +1,20 @@
+const TIMELINE_EMPHASIS = Object.freeze({
+  // el grupo que importa ahora (p. ej. el intento vigente): recuadro, puntos llenos con el color de su tono
+  highlighted: "highlighted",
+  // un grupo sin resaltar: puntos llenos con el color de su tono
+  normal: "normal",
+  // un grupo que ya pasó: puntos con contorno gris, para que el ojo se vaya al resaltado
+  muted: "muted"
+});
+const DOT_COLORS = ["primary", "secondary", "success", "warning", "error", "info", "grey"];
+function timelineDotOf({ emphasis, tone } = {}) {
+  if (emphasis === TIMELINE_EMPHASIS.muted) {
+    return { variant: "outlined", color: "grey" };
+  }
+  return { variant: "filled", color: DOT_COLORS.includes(tone) ? tone : "grey" };
+}
+export {
+  TIMELINE_EMPHASIS,
+  timelineDotOf
+};
+//# sourceMappingURL=timelineDot.js.map

package/dist/ui/timeline/timelineDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineDot.js","sources":["../../../src/ui/timeline/timelineDot.js"],"sourcesContent":["// Cómo se pinta el punto de un evento en GroupedTimeline, según el énfasis de su grupo y el tono del evento.\n//\n// Funciones puras (no renderizan): function (regla de la casa). Se prueban sin navegador (timelineDot.test.js).\n\n/** Énfasis de un grupo de la línea de tiempo. */\nexport const TIMELINE_EMPHASIS = Object.freeze({\n    // el grupo que importa ahora (p. ej. el intento vigente): recuadro, puntos llenos con el color de su tono\n    highlighted: 'highlighted',\n    // un grupo sin resaltar: puntos llenos con el color de su tono\n    normal: 'normal',\n    // un grupo que ya pasó: puntos con contorno gris, para que el ojo se vaya al resaltado\n    muted: 'muted',\n});\n\n// los colores que acepta TimelineDot de @mui/lab\nconst DOT_COLORS = ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'grey'];\n\n/**\n * Variante y color del punto de un evento.\n *\n * @param {{emphasis?: string, tone?: string}} dotOptions énfasis del grupo y tono del evento (success, warning, error...)\n * @returns {{variant: 'filled'|'outlined', color: string}} props de TimelineDot; un tono desconocido sale en gris\n */\nexport function timelineDotOf({emphasis, tone} = {}) {\n    if (emphasis === TIMELINE_EMPHASIS.muted) {\n        return {variant: 'outlined', color: 'grey'};\n    }\n\n    return {variant: 'filled', color: DOT_COLORS.includes(tone) ? tone : 'grey'};\n}\n"],"names":[],"mappings":"AAKY,MAAC,oBAAoB,OAAO,OAAO;AAAA;AAAA,EAE3C,aAAa;AAAA;AAAA,EAEb,QAAQ;AAAA;AAAA,EAER,OAAO;AACX,CAAC;AAGD,MAAM,aAAa,CAAC,WAAW,aAAa,WAAW,WAAW,SAAS,QAAQ,MAAM;AAQlF,SAAS,cAAc,EAAC,UAAU,KAAI,IAAI,CAAA,GAAI;AACjD,MAAI,aAAa,kBAAkB,OAAO;AACtC,WAAO,EAAC,SAAS,YAAY,OAAO,OAAM;AAAA,EAC9C;AAEA,SAAO,EAAC,SAAS,UAAU,OAAO,WAAW,SAAS,IAAI,IAAI,OAAO,OAAM;AAC/E;"}

package/dist/upload/FileDropzone.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import CancelIcon from "@mui/icons-material/Cancel";
+import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
+import ImageOutlinedIcon from "@mui/icons-material/ImageOutlined";
+import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
+import PictureAsPdfOutlinedIcon from "@mui/icons-material/PictureAsPdfOutlined";
+import TableViewOutlinedIcon from "@mui/icons-material/TableViewOutlined";
+import ModalWaiting from "../feedback/ModalWaiting.js";
+import { toastError } from "../feedback/toast.js";
+import { formatFileSize } from "../formatting.js";
+import { resolveAccept, parseFileSize, matchesAccept, FILE_REJECTION } from "./fileRules.js";
+const FILE_APPEARANCES = [
+  { pattern: /\.(xlsx?|csv)$/, Icon: TableViewOutlinedIcon, color: "success" },
+  { pattern: /\.pdf$/, Icon: PictureAsPdfOutlinedIcon, color: "error" },
+  { pattern: /\.(png|jpe?g|gif|webp|svg|avif)$/, Icon: ImageOutlinedIcon, color: "info" },
+  { pattern: /\.(docx?|txt|md)$/, Icon: DescriptionOutlinedIcon, color: "primary" }
+];
+const DEFAULT_FILE_APPEARANCE = { Icon: InsertDriveFileOutlinedIcon, color: "action" };
+function FileDropzone({
+  value = null,
+  onChange,
+  accept,
+  maxSize,
+  hint,
+  buttonLabel,
+  disabled = false,
+  busy = false,
+  busyModal = false,
+  onReject,
+  actions,
+  children,
+  sx
+}) {
+  const { t } = useToolkitTranslation("common");
+  const inputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isLocked = disabled || busy;
+  const resolvedAccept = resolveAccept(accept);
+  const maxBytes = parseFileSize(maxSize);
+  const hintText = hint ?? t("upload.hint");
+  const reject = (file, reason) => {
+    if (onReject) {
+      onReject(file, reason);
+      return;
+    }
+    const message = reason === FILE_REJECTION.size ? t("upload.tooLarge", { name: file.name, max: formatFileSize(maxBytes) }) : t("upload.invalidType", { name: file.name, accept: resolvedAccept });
+    toastError(message);
+  };
+  const pick = (file) => {
+    if (!file || isLocked) {
+      return;
+    }
+    if (!matchesAccept(file, resolvedAccept)) {
+      reject(file, FILE_REJECTION.type);
+      return;
+    }
+    if (maxBytes && file.size > maxBytes) {
+      reject(file, FILE_REJECTION.size);
+      return;
+    }
+    onChange(file);
+  };
+  const openPicker = () => {
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+    inputRef.current?.click();
+  };
+  const appearance = value ? FILE_APPEARANCES.find(({ pattern }) => pattern.test(value.name.toLowerCase())) ?? DEFAULT_FILE_APPEARANCE : null;
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      variant: "outlined",
+      "aria-busy": busy,
+      onDragOver: (event) => {
+        event.preventDefault();
+        setIsDragging(!isLocked);
+      },
+      onDragLeave: () => setIsDragging(false),
+      onDrop: (event) => {
+        event.preventDefault();
+        setIsDragging(false);
+        pick(event.dataTransfer.files?.[0]);
+      },
+      sx: {
+        p: { xs: 3, sm: 5 },
+        textAlign: "center",
+        borderStyle: "dashed",
+        borderWidth: 2,
+        borderColor: isDragging ? "primary.main" : "divider",
+        bgcolor: isDragging ? "action.hover" : "background.paper",
+        transition: "border-color .15s ease, background-color .15s ease",
+        opacity: disabled ? 0.6 : 1,
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: resolvedAccept,
+            hidden: true,
+            disabled: isLocked,
+            "aria-label": hintText,
+            onChange: (event) => pick(event.target.files?.[0])
+          }
+        ),
+        value ? /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
+          Chip,
+          {
+            icon: /* @__PURE__ */ jsx(appearance.Icon, { fontSize: "small", color: appearance.color }),
+            label: `${value.name} · ${formatFileSize(value.size)}`,
+            variant: "outlined",
+            onDelete: isLocked ? void 0 : () => onChange(null),
+            deleteIcon: /* @__PURE__ */ jsx(CancelIcon, { "aria-label": t("upload.remove", { name: value.name }) }),
+            sx: { maxWidth: "100%", height: "auto", py: 0.5, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere" } }
+          }
+        ) }) : /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, overflowWrap: "anywhere" }, children: hintText }),
+        /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, sx: { justifyContent: "center", alignItems: { xs: "stretch", sm: "center" } }, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: openPicker, disabled: isLocked, children: buttonLabel ?? t("upload.choose") }),
+          actions
+        ] }),
+        maxBytes && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { display: "block", mt: 1.5 }, children: t("upload.maxSizeHint", { max: formatFileSize(maxBytes) }) }),
+        children && /* @__PURE__ */ jsx(Box, { sx: { mt: 3, textAlign: "left" }, children }),
+        busyModal && /* @__PURE__ */ jsx(ModalWaiting, { open: busy, title: busyModal.title, text: busyModal.text })
+      ]
+    }
+  );
+}
+export {
+  FileDropzone as default
+};
+//# sourceMappingURL=FileDropzone.js.map

package/dist/upload/FileDropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.js","sources":["../../src/upload/FileDropzone.jsx"],"sourcesContent":["// La zona para soltar UN archivo, con puro MUI (sin librerías): se suelta o se elige, se revisa su tipo y su peso, y el\n// elegido se ve con su ícono, su nombre y su peso, con la × para quitarlo sin volver a abrir la ventana de archivos.\n//\n// Hay otra con el mismo uso y FilePond por dentro (@stackcraftmx/calcita/filepond): animaciones, varios archivos y\n// avance por archivo. Cambiar de una a otra es cambiar el import.\n//\n// Solo ELIGE el archivo (controlado: value / onChange). Enviarlo es de la pantalla: arma su FormData con los campos que\n// pida su backend y lo sube (uploadWithProgress + uploadMachine). Para eso están los huecos:\n//   actions   botones junto a «Elegir archivo» (p. ej. el de enviar)\n//   children  lo que va abajo (campos del formulario, el avance de la subida)\n//\n// Configuración: accept y maxSize (upload/fileRules.js); busy pone el candado mientras se sube (no se puede quitar ni\n// cambiar el archivo a media subida) y busyModal además bloquea toda la pantalla con ModalWaiting.\n//\n// Lo que se rechaza se avisa con toastError y los textos del paquete; con onReject la pantalla decide qué hacer.\n//\n// Mobile primero: en el teléfono no hay arrastrar; el botón es el camino y los botones se apilan a lo ancho.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CancelIcon from '@mui/icons-material/Cancel';\nimport DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';\nimport ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';\nimport InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';\nimport PictureAsPdfOutlinedIcon from '@mui/icons-material/PictureAsPdfOutlined';\nimport TableViewOutlinedIcon from '@mui/icons-material/TableViewOutlined';\n\nimport ModalWaiting from '@/feedback/ModalWaiting.jsx';\nimport {toastError} from '@/feedback/toast.jsx';\nimport {formatFileSize} from '@/formatting.js';\nimport {FILE_REJECTION, matchesAccept, parseFileSize, resolveAccept} from '@/upload/fileRules.js';\n\n// el ícono según el tipo del archivo elegido, con el mismo color que el panel de descargas\nconst FILE_APPEARANCES = [\n    {pattern: /\\.(xlsx?|csv)$/, Icon: TableViewOutlinedIcon, color: 'success'},\n    {pattern: /\\.pdf$/, Icon: PictureAsPdfOutlinedIcon, color: 'error'},\n    {pattern: /\\.(png|jpe?g|gif|webp|svg|avif)$/, Icon: ImageOutlinedIcon, color: 'info'},\n    {pattern: /\\.(docx?|txt|md)$/, Icon: DescriptionOutlinedIcon, color: 'primary'},\n];\nconst DEFAULT_FILE_APPEARANCE = {Icon: InsertDriveFileOutlinedIcon, color: 'action'};\n\n/**\n * @param {object} props\n * @param {File|null} [props.value] el archivo elegido\n * @param {(file: File|null) => void} props.onChange null al quitarlo\n * @param {string|string[]} [props.accept] 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string} [props.hint] ya traducido; por omisión «Arrastre aquí su archivo»\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede soltar, elegir ni quitar\n * @param {boolean|{title?: string, text?: string}} [props.busyModal] además bloquea la pantalla mientras busy\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {import('react').ReactNode} [props.actions]\n * @param {import('react').ReactNode} [props.children]\n * @param {object} [props.sx] ajustes del recuadro\n */\nexport default function FileDropzone({\n    value = null, onChange, accept, maxSize, hint, buttonLabel, disabled = false, busy = false, busyModal = false, onReject, actions,\n    children, sx,\n}) {\n    const {t} = useToolkitTranslation('common');\n    const inputRef = useRef(null);\n    const [isDragging, setIsDragging] = useState(false);\n    const isLocked = disabled || busy;\n    const resolvedAccept = resolveAccept(accept);\n    const maxBytes = parseFileSize(maxSize);\n    const hintText = hint ?? t('upload.hint');\n\n    const reject = (file, reason) => {\n        if (onReject) {\n            onReject(file, reason);\n            return;\n        }\n        const message = reason === FILE_REJECTION.size\n            ? t('upload.tooLarge', {name: file.name, max: formatFileSize(maxBytes)})\n            : t('upload.invalidType', {name: file.name, accept: resolvedAccept});\n        toastError(message);\n    };\n\n    const pick = (file) => {\n        // guard clause: se cerró la ventana sin elegir, o el candado está puesto\n        if (!file || isLocked) {\n            return;\n        }\n        if (!matchesAccept(file, resolvedAccept)) {\n            reject(file, FILE_REJECTION.type);\n            return;\n        }\n        if (maxBytes && file.size > maxBytes) {\n            reject(file, FILE_REJECTION.size);\n            return;\n        }\n        onChange(file);\n    };\n\n    const openPicker = () => {\n        // OJO: se limpia el valor del input para poder volver a elegir EL MISMO archivo (corregido en disco); sin esto\n        // el navegador no avisa el cambio\n        if (inputRef.current) {\n            inputRef.current.value = '';\n        }\n        inputRef.current?.click();\n    };\n\n    const appearance = value\n        ? FILE_APPEARANCES.find(({pattern}) => pattern.test(value.name.toLowerCase())) ?? DEFAULT_FILE_APPEARANCE\n        : null;\n\n    return (\n        <Paper\n            variant=\"outlined\"\n            aria-busy={busy}\n            onDragOver={(event) => {\n                event.preventDefault();\n                setIsDragging(!isLocked);\n            }}\n            onDragLeave={() => setIsDragging(false)}\n            onDrop={(event) => {\n                event.preventDefault();\n                setIsDragging(false);\n                pick(event.dataTransfer.files?.[0]);\n            }}\n            sx={{\n                p: {xs: 3, sm: 5},\n                textAlign: 'center',\n                borderStyle: 'dashed',\n                borderWidth: 2,\n                borderColor: isDragging ? 'primary.main' : 'divider',\n                bgcolor: isDragging ? 'action.hover' : 'background.paper',\n                transition: 'border-color .15s ease, background-color .15s ease',\n                opacity: disabled ? 0.6 : 1,\n                ...sx,\n            }}\n        >\n            <input ref={inputRef} type=\"file\" accept={resolvedAccept} hidden disabled={isLocked} aria-label={hintText}\n                   onChange={(event) => pick(event.target.files?.[0])} />\n            {value ? (\n                <Box sx={{mb: 2}}>\n                    <Chip\n                        icon={<appearance.Icon fontSize=\"small\" color={appearance.color} />}\n                        label={`${value.name} · ${formatFileSize(value.size)}`}\n                        variant=\"outlined\"\n                        onDelete={isLocked ? undefined : () => onChange(null)}\n                        deleteIcon={<CancelIcon aria-label={t('upload.remove', {name: value.name})} />}\n                        sx={{maxWidth: '100%', height: 'auto', py: 0.5, '& .MuiChip-label': {whiteSpace: 'normal', overflowWrap: 'anywhere'}}}\n                    />\n                </Box>\n            ) : (\n                <Typography variant=\"body1\" sx={{mb: 2, overflowWrap: 'anywhere'}}>{hintText}</Typography>\n            )}\n            <Stack direction={{xs: 'column', sm: 'row'}} spacing={2} sx={{justifyContent: 'center', alignItems: {xs: 'stretch', sm: 'center'}}}>\n                <Button variant=\"outlined\" onClick={openPicker} disabled={isLocked}>{buttonLabel ?? t('upload.choose')}</Button>\n                {actions}\n            </Stack>\n            {/* el límite, discreto, solo si hay límite */}\n            {maxBytes && (\n                <Typography variant=\"caption\" color=\"text.secondary\" sx={{display: 'block', mt: 1.5}}>\n                    {t('upload.maxSizeHint', {max: formatFileSize(maxBytes)})}\n                </Typography>\n            )}\n            {children && <Box sx={{mt: 3, textAlign: 'left'}}>{children}</Box>}\n            {busyModal && <ModalWaiting open={busy} title={busyModal.title} text={busyModal.text} />}\n        </Paper>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/upload/fileRules.js

@@ -0,0 +1,62 @@
+const FILE_REJECTION = Object.freeze({ type: "type", size: "size", total: "total", count: "count", content: "content" });
+const FILE_ACCEPT_PRESETS = Object.freeze({
+  excel: ".xlsx,.xls",
+  csv: ".csv",
+  pdf: ".pdf",
+  word: ".doc,.docx",
+  text: ".txt",
+  json: ".json",
+  xml: ".xml",
+  zip: ".zip,.rar,.7z",
+  image: "image/*",
+  audio: "audio/*",
+  video: "video/*"
+});
+const BYTES_BY_UNIT = Object.freeze({ b: 1, kb: 1e3, mb: 1e6, gb: 1e9 });
+const SIZE_TEXT = /^\s*(\d+(?:\.\d+)?)\s*(b|kb|mb|gb)?\s*$/i;
+const ACCEPT_SEPARATOR = ",";
+const WILDCARD_SUFFIX = "/*";
+function resolveAccept(accept) {
+  if (!accept) {
+    return void 0;
+  }
+  const parts = Array.isArray(accept) ? accept : [accept];
+  return parts.map((part) => FILE_ACCEPT_PRESETS[String(part).toLowerCase()] ?? part).join(ACCEPT_SEPARATOR);
+}
+function matchesAccept(file, resolvedAccept) {
+  if (!resolvedAccept) {
+    return true;
+  }
+  const fileName = file.name.toLowerCase();
+  const fileType = (file.type ?? "").toLowerCase();
+  return resolvedAccept.split(ACCEPT_SEPARATOR).map((rule) => rule.trim().toLowerCase()).filter(Boolean).some((rule) => {
+    if (rule.startsWith(".")) {
+      return fileName.endsWith(rule);
+    }
+    if (rule.endsWith(WILDCARD_SUFFIX)) {
+      return fileType.startsWith(rule.slice(0, -1));
+    }
+    return fileType === rule;
+  });
+}
+function parseFileSize(size) {
+  if (size === void 0 || size === null || size === "") {
+    return null;
+  }
+  if (typeof size === "number") {
+    return size;
+  }
+  const match = SIZE_TEXT.exec(size);
+  if (!match) {
+    throw new Error(`«${size}» no es un tamaño: se espera un número de bytes o algo como '10 MB'`);
+  }
+  return Math.round(Number(match[1]) * BYTES_BY_UNIT[(match[2] ?? "b").toLowerCase()]);
+}
+export {
+  FILE_ACCEPT_PRESETS,
+  FILE_REJECTION,
+  matchesAccept,
+  parseFileSize,
+  resolveAccept
+};
+//# sourceMappingURL=fileRules.js.map

package/dist/upload/fileRules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileRules.js","sources":["../../src/upload/fileRules.js"],"sourcesContent":["// Las reglas de qué archivo se acepta: su tipo (accept) y su peso (maxSize). Las comparten las dos zonas para soltar\n// archivos del paquete, la de MUI (upload/FileDropzone.jsx) y la de FilePond (filepond/FileDropzone.jsx), para que se\n// configuren igual.\n//\n//   accept   un nombre del menú ('excel'), una lista (['excel', 'pdf']) o lo de siempre del input ('.xlsx,.xls',\n//            'image/*'); se pueden mezclar: ['excel', '.dat'].\n//   maxSize  bytes (número) o texto con unidades: '500 KB', '10mb', '1 GB'.\n//\n// OJO: los tamaños van en base 1000 (1 MB = 1,000,000 bytes), igual que formatFileSize y que el navegador en sus\n// descargas. En base 1024 un límite de «10 MB» se pintaría como «10.5 MB».\n//\n// Funciones puras, sin React: function (regla de la casa). Se prueban con node --test (fileRules.test.js).\n\n/**\n * Por qué se rechazó un archivo (lo que recibe onReject de las dos zonas). La de MUI solo rechaza por tipo y por peso;\n * la de FilePond además por el peso de todos juntos, por cantidad y por contenido (validate).\n */\nexport const FILE_REJECTION = Object.freeze({type: 'type', size: 'size', total: 'total', count: 'count', content: 'content'});\n\n/** El menú de tipos comunes, para no memorizar extensiones. */\nexport const FILE_ACCEPT_PRESETS = Object.freeze({\n    excel: '.xlsx,.xls',\n    csv: '.csv',\n    pdf: '.pdf',\n    word: '.doc,.docx',\n    text: '.txt',\n    json: '.json',\n    xml: '.xml',\n    zip: '.zip,.rar,.7z',\n    image: 'image/*',\n    audio: 'audio/*',\n    video: 'video/*',\n});\n\n// bytes de cada unidad que se puede escribir en maxSize\nconst BYTES_BY_UNIT = Object.freeze({b: 1, kb: 1e3, mb: 1e6, gb: 1e9});\nconst SIZE_TEXT = /^\\s*(\\d+(?:\\.\\d+)?)\\s*(b|kb|mb|gb)?\\s*$/i;\nconst ACCEPT_SEPARATOR = ',';\nconst WILDCARD_SUFFIX = '/*';\n\n/**\n * El accept del paquete como lo entiende el input del navegador.\n *\n * @param {string|string[]|undefined} accept 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @returns {string|undefined} '.xlsx,.xls,.pdf'; undefined si se acepta todo\n */\nexport function resolveAccept(accept) {\n    if (!accept) {\n        return undefined;\n    }\n    const parts = Array.isArray(accept) ? accept : [accept];\n    return parts.map((part) => FILE_ACCEPT_PRESETS[String(part).toLowerCase()] ?? part).join(ACCEPT_SEPARATOR);\n}\n\n/**\n * ¿El archivo es de un tipo permitido? Revisa la extensión (.xlsx), el tipo exacto (application/pdf) o la familia\n * (image/*). El input del navegador ya filtra al elegir, pero al soltar un archivo no filtra nada.\n *\n * @param {{name: string, type?: string}} file\n * @param {string|undefined} resolvedAccept lo que regresa resolveAccept\n * @returns {boolean}\n */\nexport function matchesAccept(file, resolvedAccept) {\n    if (!resolvedAccept) {\n        return true;\n    }\n    const fileName = file.name.toLowerCase();\n    const fileType = (file.type ?? '').toLowerCase();\n    return resolvedAccept\n        .split(ACCEPT_SEPARATOR)\n        .map((rule) => rule.trim().toLowerCase())\n        .filter(Boolean)\n        .some((rule) => {\n            if (rule.startsWith('.')) {\n                return fileName.endsWith(rule);\n            }\n            if (rule.endsWith(WILDCARD_SUFFIX)) {\n                return fileType.startsWith(rule.slice(0, -1));\n            }\n            return fileType === rule;\n        });\n}\n\n/**\n * Un tamaño escrito por una persona en bytes: '10 MB' → 10000000.\n *\n * @param {number|string|undefined|null} size\n * @returns {number|null} null si no hay límite\n */\nexport function parseFileSize(size) {\n    if (size === undefined || size === null || size === '') {\n        return null;\n    }\n    if (typeof size === 'number') {\n        return size;\n    }\n    const match = SIZE_TEXT.exec(size);\n    // guard clause: un límite mal escrito es error de quien configura, no algo que se ignore callado\n    if (!match) {\n        throw new Error(`«${size}» no es un tamaño: se espera un número de bytes o algo como '10 MB'`);\n    }\n    return Math.round(Number(match[1]) * BYTES_BY_UNIT[(match[2] ?? 'b').toLowerCase()]);\n}\n"],"names":[],"mappings":"AAiBY,MAAC,iBAAiB,OAAO,OAAO,EAAC,MAAM,QAAQ,MAAM,QAAQ,OAAO,SAAS,OAAO,SAAS,SAAS,UAAS,CAAC;AAGhH,MAAC,sBAAsB,OAAO,OAAO;AAAA,EAC7C,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACX,CAAC;AAGD,MAAM,gBAAgB,OAAO,OAAO,EAAC,GAAG,GAAG,IAAI,KAAK,IAAI,KAAK,IAAI,IAAG,CAAC;AACrE,MAAM,YAAY;AAClB,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AAQjB,SAAS,cAAc,QAAQ;AAClC,MAAI,CAAC,QAAQ;AACT,WAAO;AAAA,EACX;AACA,QAAM,QAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,SAAO,MAAM,IAAI,CAAC,SAAS,oBAAoB,OAAO,IAAI,EAAE,YAAW,CAAE,KAAK,IAAI,EAAE,KAAK,gBAAgB;AAC7G;AAUO,SAAS,cAAc,MAAM,gBAAgB;AAChD,MAAI,CAAC,gBAAgB;AACjB,WAAO;AAAA,EACX;AACA,QAAM,WAAW,KAAK,KAAK,YAAW;AACtC,QAAM,YAAY,KAAK,QAAQ,IAAI,YAAW;AAC9C,SAAO,eACF,MAAM,gBAAgB,EACtB,IAAI,CAAC,SAAS,KAAK,KAAI,EAAG,YAAW,CAAE,EACvC,OAAO,OAAO,EACd,KAAK,CAAC,SAAS;AACZ,QAAI,KAAK,WAAW,GAAG,GAAG;AACtB,aAAO,SAAS,SAAS,IAAI;AAAA,IACjC;AACA,QAAI,KAAK,SAAS,eAAe,GAAG;AAChC,aAAO,SAAS,WAAW,KAAK,MAAM,GAAG,EAAE,CAAC;AAAA,IAChD;AACA,WAAO,aAAa;AAAA,EACxB,CAAC;AACT;AAQO,SAAS,cAAc,MAAM;AAChC,MAAI,SAAS,UAAa,SAAS,QAAQ,SAAS,IAAI;AACpD,WAAO;AAAA,EACX;AACA,MAAI,OAAO,SAAS,UAAU;AAC1B,WAAO;AAAA,EACX;AACA,QAAM,QAAQ,UAAU,KAAK,IAAI;AAEjC,MAAI,CAAC,OAAO;AACR,UAAM,IAAI,MAAM,IAAI,IAAI,qEAAqE;AAAA,EACjG;AACA,SAAO,KAAK,MAAM,OAAO,MAAM,CAAC,CAAC,IAAI,eAAe,MAAM,CAAC,KAAK,KAAK,YAAW,CAAE,CAAC;AACvF;"}

package/dist/upload/uploadMachine.js

@@ -0,0 +1,73 @@
+import { assign, setup, fromCallback } from "xstate";
+const resetContext = assign({ progress: null, result: null, problem: null });
+const uploadMachine = setup({
+  actors: {
+    upload: fromCallback(() => {
+      throw new Error("uploadMachine: falta proveer upload con buildUploadActors().");
+    })
+  },
+  guards: {
+    // 100% enviado no es terminado: el servidor sigue trabajando
+    isFullySent: ({ event }) => event.percent >= 100
+  }
+}).createMachine({
+  id: "upload",
+  initial: "idle",
+  context: { progress: null, result: null, problem: null },
+  states: {
+    idle: {
+      on: { UPLOAD: { target: "uploading", actions: resetContext } }
+    },
+    uploading: {
+      invoke: { src: "upload", input: ({ event }) => event.input },
+      initial: "sending",
+      states: {
+        sending: {
+          on: {
+            PROGRESS: [
+              { guard: "isFullySent", target: "processing", actions: assign({ progress: ({ event }) => event.percent }) },
+              { actions: assign({ progress: ({ event }) => event.percent }) }
+            ]
+          }
+        },
+        // cuerpo entregado; esperando la respuesta del servidor (progreso indeterminado)
+        processing: {}
+      },
+      on: {
+        DONE: { target: "done", actions: assign({ result: ({ event }) => event.output, progress: null }) },
+        FAIL: { target: "failed", actions: assign({ problem: ({ event }) => event.problem, progress: null }) },
+        // salir de uploading DETIENE el actor y su cleanup aborta la petición de verdad (no solo la UI)
+        CANCEL: { target: "cancelled", actions: assign({ progress: null }) }
+      }
+    },
+    done: {
+      on: { UPLOAD: { target: "uploading", actions: resetContext }, RESET: { target: "idle", actions: resetContext } }
+    },
+    failed: {
+      on: { UPLOAD: { target: "uploading", actions: resetContext }, RESET: { target: "idle", actions: resetContext } }
+    },
+    // cancelado por la persona: el archivo sigue elegido y se puede reintentar o limpiar
+    cancelled: {
+      on: { UPLOAD: { target: "uploading", actions: resetContext }, RESET: { target: "idle", actions: resetContext } }
+    }
+  }
+});
+function buildUploadActors(uploadFile) {
+  return {
+    upload: fromCallback(({ input, sendBack }) => {
+      const abortController = new AbortController();
+      uploadFile(input, (percent) => sendBack({ type: "PROGRESS", percent }), abortController.signal).then((output) => sendBack({ type: "DONE", output })).catch((problem) => {
+        if (problem?.name === "AbortError" || problem?.name === "CanceledError") {
+          return;
+        }
+        sendBack({ type: "FAIL", problem });
+      });
+      return () => abortController.abort();
+    })
+  };
+}
+export {
+  buildUploadActors,
+  uploadMachine
+};
+//# sourceMappingURL=uploadMachine.js.map

package/dist/upload/uploadMachine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploadMachine.js","sources":["../../src/upload/uploadMachine.js"],"sourcesContent":["// Máquina del flujo de SUBIDA de un archivo (compañera de una zona para soltar archivos).\n//\n//   idle ──UPLOAD──▶ uploading.sending ──(PROGRESS 100%)──▶ uploading.processing\n//                         │                                        │\n//                         ├────────────── DONE ────────────────────┼──▶ done\n//                         ├────────────── FAIL ────────────────────┴──▶ failed\n//                         └─── CANCEL (el cleanup aborta la petición) ──▶ cancelled\n//\n// Por qué máquina y no cuatro useState: los estados imposibles dejan de existir (no hay \"resultado y error a la vez\"\n// ni \"progreso sin carga\") y el flujo sending → processing → done queda DECLARADO, no regado en callbacks.\n//\n// Contexto: progress (% de bytes enviados; null fuera de sending) · result (lo que resuelva la subida) · problem (el\n// error RFC 9457 del rechazo, normalmente un ApiError).\n//\n// Uso:\n//   const [uploadSnapshot, sendToUpload] = useMachine(uploadMachine.provide({actors: buildUploadActors(uploadFile)}));\n//   sendToUpload({type: 'UPLOAD', input: {file}});\n//\n// Pura: solo importa xstate.\nimport {assign, fromCallback, setup} from 'xstate';\n\nconst resetContext = assign({progress: null, result: null, problem: null});\n\nexport const uploadMachine = setup({\n    actors: {\n        upload: fromCallback(() => {\n            throw new Error('uploadMachine: falta proveer upload con buildUploadActors().');\n        }),\n    },\n    guards: {\n        // 100% enviado no es terminado: el servidor sigue trabajando\n        isFullySent: ({event}) => event.percent >= 100,\n    },\n}).createMachine({\n    id: 'upload',\n    initial: 'idle',\n    context: {progress: null, result: null, problem: null},\n    states: {\n        idle: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}},\n        },\n        uploading: {\n            invoke: {src: 'upload', input: ({event}) => event.input},\n            initial: 'sending',\n            states: {\n                sending: {\n                    on: {\n                        PROGRESS: [\n                            {guard: 'isFullySent', target: 'processing', actions: assign({progress: ({event}) => event.percent})},\n                            {actions: assign({progress: ({event}) => event.percent})},\n                        ],\n                    },\n                },\n                // cuerpo entregado; esperando la respuesta del servidor (progreso indeterminado)\n                processing: {},\n            },\n            on: {\n                DONE: {target: 'done', actions: assign({result: ({event}) => event.output, progress: null})},\n                FAIL: {target: 'failed', actions: assign({problem: ({event}) => event.problem, progress: null})},\n                // salir de uploading DETIENE el actor y su cleanup aborta la petición de verdad (no solo la UI)\n                CANCEL: {target: 'cancelled', actions: assign({progress: null})},\n            },\n        },\n        done: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n        failed: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n        // cancelado por la persona: el archivo sigue elegido y se puede reintentar o limpiar\n        cancelled: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n    },\n});\n\n/**\n * El actor upload a partir de la función de la pantalla.\n *\n * fromCallback y no fromPromise: hacen falta EVENTOS a medio camino (el avance) y un CLEANUP que aborte la petición.\n *\n * @param {(input: object, onProgress: (percent: number) => void, signal: AbortSignal) => Promise<unknown>} uploadFile\n */\nexport function buildUploadActors(uploadFile) {\n    return {\n        upload: fromCallback(({input, sendBack}) => {\n            const abortController = new AbortController();\n            uploadFile(input, (percent) => sendBack({type: 'PROGRESS', percent}), abortController.signal)\n                .then((output) => sendBack({type: 'DONE', output}))\n                .catch((problem) => {\n                    // aborto esperado (CANCEL): la máquina ya cambió de estado sola\n                    if (problem?.name === 'AbortError' || problem?.name === 'CanceledError') {\n                        return;\n                    }\n                    sendBack({type: 'FAIL', problem});\n                });\n            return () => abortController.abort();\n        }),\n    };\n}\n"],"names":[],"mappings":";AAqBA,MAAM,eAAe,OAAO,EAAC,UAAU,MAAM,QAAQ,MAAM,SAAS,KAAI,CAAC;AAE7D,MAAC,gBAAgB,MAAM;AAAA,EAC/B,QAAQ;AAAA,IACJ,QAAQ,aAAa,MAAM;AACvB,YAAM,IAAI,MAAM,8DAA8D;AAAA,IAClF,CAAC;AAAA,EACT;AAAA,EACI,QAAQ;AAAA;AAAA,IAEJ,aAAa,CAAC,EAAC,MAAK,MAAM,MAAM,WAAW;AAAA,EACnD;AACA,CAAC,EAAE,cAAc;AAAA,EACb,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,SAAS,EAAC,UAAU,MAAM,QAAQ,MAAM,SAAS,KAAI;AAAA,EACrD,QAAQ;AAAA,IACJ,MAAM;AAAA,MACF,IAAI,EAAC,QAAQ,EAAC,QAAQ,aAAa,SAAS,aAAY,EAAC;AAAA,IACrE;AAAA,IACQ,WAAW;AAAA,MACP,QAAQ,EAAC,KAAK,UAAU,OAAO,CAAC,EAAC,MAAK,MAAM,MAAM,MAAK;AAAA,MACvD,SAAS;AAAA,MACT,QAAQ;AAAA,QACJ,SAAS;AAAA,UACL,IAAI;AAAA,YACA,UAAU;AAAA,cACN,EAAC,OAAO,eAAe,QAAQ,cAAc,SAAS,OAAO,EAAC,UAAU,CAAC,EAAC,MAAK,MAAM,MAAM,QAAO,CAAC,EAAC;AAAA,cACpG,EAAC,SAAS,OAAO,EAAC,UAAU,CAAC,EAAC,MAAK,MAAM,MAAM,QAAO,CAAC,EAAC;AAAA,YACpF;AAAA,UACA;AAAA,QACA;AAAA;AAAA,QAEgB,YAAY,CAAA;AAAA,MAC5B;AAAA,MACY,IAAI;AAAA,QACA,MAAM,EAAC,QAAQ,QAAQ,SAAS,OAAO,EAAC,QAAQ,CAAC,EAAC,MAAK,MAAM,MAAM,QAAQ,UAAU,KAAI,CAAC,EAAC;AAAA,QAC3F,MAAM,EAAC,QAAQ,UAAU,SAAS,OAAO,EAAC,SAAS,CAAC,EAAC,MAAK,MAAM,MAAM,SAAS,UAAU,KAAI,CAAC,EAAC;AAAA;AAAA,QAE/F,QAAQ,EAAC,QAAQ,aAAa,SAAS,OAAO,EAAC,UAAU,KAAI,CAAC,EAAC;AAAA,MAC/E;AAAA,IACA;AAAA,IACQ,MAAM;AAAA,MACF,IAAI,EAAC,QAAQ,EAAC,QAAQ,aAAa,SAAS,aAAY,GAAG,OAAO,EAAC,QAAQ,QAAQ,SAAS,aAAY,EAAC;AAAA,IACrH;AAAA,IACQ,QAAQ;AAAA,MACJ,IAAI,EAAC,QAAQ,EAAC,QAAQ,aAAa,SAAS,aAAY,GAAG,OAAO,EAAC,QAAQ,QAAQ,SAAS,aAAY,EAAC;AAAA,IACrH;AAAA;AAAA,IAEQ,WAAW;AAAA,MACP,IAAI,EAAC,QAAQ,EAAC,QAAQ,aAAa,SAAS,aAAY,GAAG,OAAO,EAAC,QAAQ,QAAQ,SAAS,aAAY,EAAC;AAAA,IACrH;AAAA,EACA;AACA,CAAC;AASM,SAAS,kBAAkB,YAAY;AAC1C,SAAO;AAAA,IACH,QAAQ,aAAa,CAAC,EAAC,OAAO,SAAQ,MAAM;AACxC,YAAM,kBAAkB,IAAI,gBAAe;AAC3C,iBAAW,OAAO,CAAC,YAAY,SAAS,EAAC,MAAM,YAAY,QAAO,CAAC,GAAG,gBAAgB,MAAM,EACvF,KAAK,CAAC,WAAW,SAAS,EAAC,MAAM,QAAQ,OAAM,CAAC,CAAC,EACjD,MAAM,CAAC,YAAY;AAEhB,YAAI,SAAS,SAAS,gBAAgB,SAAS,SAAS,iBAAiB;AACrE;AAAA,QACJ;AACA,iBAAS,EAAC,MAAM,QAAQ,QAAO,CAAC;AAAA,MACpC,CAAC;AACL,aAAO,MAAM,gBAAgB,MAAK;AAAA,IACtC,CAAC;AAAA,EACT;AACA;"}