@stackcraftmx/calcita 0.23.0 → 0.26.0

package/dist/ui/actions/SelectionActions.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import GlobalStyles from "@mui/material/GlobalStyles";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import BarActionButton from "../../appShell/BarActionButton.js";
+import BarActions from "../../appShell/BarActions.js";
+import BarCapsule from "../../appShell/BarCapsule.js";
+import { PHONE_MEDIA_QUERY, FLOATING_BOTTOM_SPACE_CSS_VARIABLE, aboveMobileTabBarOf, GLASS_PANEL_GAP_PIXELS } from "../../appShell/shellSizes.js";
+import { usesMobileTabBar } from "../../appShell/tabBarRule.js";
+import { minimalFloatingStylesOf } from "../../theme/components/minimalComponents.js";
+import { isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+const SELECTION_PHONE_LAYOUT = Object.freeze({ top: "top", split: "split" });
+const FLOATING_GAP_PIXELS = 8;
+const FLOATING_BOTTOM_SPACE_PIXELS = 64;
+const PHONE_ONLY_SX = { display: "none", [PHONE_MEDIA_QUERY]: { display: "flex" } };
+function selectionFloatsOnPhone(theme) {
+  return usesMobileTabBar(theme);
+}
+function bottomCapsuleSxOf(theme) {
+  return {
+    ...isGlassTheme(theme) ? glassStylesOf(theme) : minimalFloatingStylesOf(theme),
+    position: "fixed",
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: theme.zIndex.appBar,
+    alignItems: "center",
+    gap: 0.5,
+    width: "max-content",
+    maxWidth: `calc(100% - ${GLASS_PANEL_GAP_PIXELS * 2}px)`,
+    borderRadius: "999px",
+    p: 0.5,
+    ...aboveMobileTabBarOf(FLOATING_GAP_PIXELS)
+  };
+}
+function SelectionActions({ countText, actions = [], onClear, phoneLayout = SELECTION_PHONE_LAYOUT.top, texts, sx }) {
+  const theme = useTheme();
+  const { t } = useToolkitTranslation("common", texts);
+  const [runningActionKey, setRunningActionKey] = useState(null);
+  const floatsOnPhone = selectionFloatsOnPhone(theme);
+  const extraSx = Array.isArray(sx) ? sx : [sx];
+  const runAction = async (action) => {
+    setRunningActionKey(action.key);
+    try {
+      await action.onClick();
+    } finally {
+      setRunningActionKey(null);
+    }
+  };
+  const isDisabledOf = (action) => runningActionKey !== null || Boolean(action.disabled);
+  const clearButton = /* @__PURE__ */ jsx(Tooltip, { title: t("selection.clear"), children: /* @__PURE__ */ jsx(IconButton, { "aria-label": t("selection.clear"), onClick: onClear, children: /* @__PURE__ */ jsx(CloseRoundedIcon, {}) }) });
+  const row = /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      role: "toolbar",
+      "aria-label": t("selection.actionsLabel"),
+      direction: "row",
+      spacing: 1,
+      useFlexGap: true,
+      sx: [
+        { flexGrow: 1, alignItems: "center", flexWrap: "wrap", minHeight: 32 },
+        floatsOnPhone && { [PHONE_MEDIA_QUERY]: { display: "none" } },
+        ...extraSx
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, mr: 1 }, children: countText }),
+        actions.map((action) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            color: action.color ?? "primary",
+            startIcon: action.icon,
+            disabled: isDisabledOf(action),
+            onClick: () => runAction(action),
+            children: action.label
+          },
+          action.key
+        )),
+        /* @__PURE__ */ jsx(Button, { size: "small", color: "inherit", startIcon: /* @__PURE__ */ jsx(CloseRoundedIcon, {}), onClick: onClear, sx: { ml: "auto" }, children: t("selection.clear") })
+      ]
+    }
+  );
+  if (!floatsOnPhone) {
+    return row;
+  }
+  const showsBottomCapsule = phoneLayout === SELECTION_PHONE_LAYOUT.split && actions.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    row,
+    /* @__PURE__ */ jsx(BarActions, { bare: true, exclusive: true, order: -2, sx: PHONE_ONLY_SX, inlineSx: PHONE_ONLY_SX, children: /* @__PURE__ */ jsxs(BarCapsule, { "aria-label": t("selection.summaryLabel"), sx: { pl: 2 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", role: "status", "aria-live": "polite", sx: { fontWeight: 600, whiteSpace: "nowrap", mr: 0.5 }, children: countText }),
+      clearButton
+    ] }) }),
+    phoneLayout === SELECTION_PHONE_LAYOUT.top && actions.length > 0 && /* @__PURE__ */ jsx(BarActions, { label: t("selection.actionsLabel"), exclusive: true, order: -1, sx: PHONE_ONLY_SX, inlineSx: PHONE_ONLY_SX, children: actions.map((action) => /* @__PURE__ */ jsx(
+      BarActionButton,
+      {
+        label: action.label,
+        icon: action.icon,
+        color: action.color,
+        disabled: isDisabledOf(action),
+        onClick: () => runAction(action)
+      },
+      action.key
+    )) }),
+    showsBottomCapsule && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(GlobalStyles, { styles: { ":root": { [FLOATING_BOTTOM_SPACE_CSS_VARIABLE]: `${FLOATING_BOTTOM_SPACE_PIXELS}px` } } }),
+      /* @__PURE__ */ jsx(Box, { role: "toolbar", "aria-label": t("selection.actionsLabel"), sx: [bottomCapsuleSxOf, PHONE_ONLY_SX], children: actions.map((action) => action.icon ? /* @__PURE__ */ jsx(Tooltip, { title: action.label, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": action.label,
+          color: action.color ?? "default",
+          disabled: isDisabledOf(action),
+          onClick: () => runAction(action),
+          children: action.icon
+        }
+      ) }) }, action.key) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          color: action.color ?? "primary",
+          disabled: isDisabledOf(action),
+          onClick: () => runAction(action),
+          children: action.label
+        },
+        action.key
+      )) })
+    ] })
+  ] });
+}
+export {
+  SELECTION_PHONE_LAYOUT,
+  SelectionActions as default,
+  selectionFloatsOnPhone
+};
+//# sourceMappingURL=SelectionActions.js.map

package/dist/ui/actions/SelectionActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionActions.js","sources":["../../../src/ui/actions/SelectionActions.jsx"],"sourcesContent":["// Las acciones de lo elegido en una lista («5 pedidos elegidos · Cancelar · Borrar · Quitar selección»), en el lugar que le\n// toca según el equipo. Una sola pieza para que cada lista con casillas (la tabla de servidor, una propia) no repita dónde\n// va cada cosa:\n//   - escritorio, y el teléfono sin barra de pestañas abajo (el tema de MUI sin vidrio): un renglón donde se pone la pieza,\n//     cada acción como botón con su texto;\n//   - teléfono con vidrio, o minimalista con cápsulas (usesMobileTabBar), según phoneLayout (SELECTION_PHONE_LAYOUT):\n//       top (por omisión): arriba, en la barra flotante, «5 elegidos ✕» y las acciones como íconos en su propia cápsula,\n//         como Apple separa los grupos; las que no caben, al «⋯» (BarActions);\n//       en los dos, mientras hay algo elegido, el renglón de arriba queda solo para lo elegido (BarActions exclusive): las\n//         demás cápsulas de la pantalla y la lupa se esconden, como el modo de edición del iPhone;\n//       split: como iOS en modo de edición (Fotos, Mail, Archivos): arriba «5 elegidos ✕» y abajo, encima de las pestañas,\n//         una cápsula fija con las acciones, donde llega el pulgar. Mientras se ve, pide su alto al marco\n//         (FLOATING_BOTTOM_SPACE_CSS_VARIABLE) para no tapar el final de la página.\n// Lo pidió el autor: en el teléfono, configurable, y por omisión todo arriba.\n//\n// Con vidrio, la cápsula de arriba deja sus botones del color del texto (BarCapsule: la regla de la barra); abajo, una acción\n// destructiva (color: 'error') conserva su rojo, como pide la guía de Apple para lo que borra.\n//\n// Cada acción puede regresar una promesa: mientras corre, las demás se apagan (nadie cancela dos veces lo mismo).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\n\nimport BarActionButton from '@/appShell/BarActionButton.jsx';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport BarCapsule from '@/appShell/BarCapsule.jsx';\nimport {\n    FLOATING_BOTTOM_SPACE_CSS_VARIABLE, GLASS_PANEL_GAP_PIXELS, PHONE_MEDIA_QUERY, aboveMobileTabBarOf,\n} from '@/appShell/shellSizes.js';\nimport {usesMobileTabBar} from '@/appShell/tabBarRule.js';\nimport {minimalFloatingStylesOf} from '@/theme/components/minimalComponents.js';\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n/** Dónde van las acciones de lo elegido en el teléfono con barra de pestañas abajo: todo arriba o divididas (iOS). */\nexport const SELECTION_PHONE_LAYOUT = Object.freeze({top: 'top', split: 'split'});\n\n// lo que se separa la cápsula de abajo de la barra de pestañas (px), lo mismo que el aviso de versión nueva\nconst FLOATING_GAP_PIXELS = 8;\n// lo que pide al marco mientras flota abajo: su alto (48) y su separación, con aire\nconst FLOATING_BOTTOM_SPACE_PIXELS = 64;\n// lo que solo se ve en el teléfono\nconst PHONE_ONLY_SX = {display: 'none', [PHONE_MEDIA_QUERY]: {display: 'flex'}};\n\n/**\n * ¿En el teléfono lo elegido sale de su renglón (arriba o abajo)? La misma regla que la barra de pestañas de abajo: con ella,\n * el renglón de la pantalla se queda con lo suyo (el conteo de la tabla) y las acciones flotan.\n *\n * @param {object} theme\n * @returns {boolean}\n */\nexport function selectionFloatsOnPhone(theme) {\n    return usesMobileTabBar(theme);\n}\n\n/**\n * La cápsula fija abajo, centrada en la ventana, encima de la barra de pestañas.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction bottomCapsuleSxOf(theme) {\n    return {\n        ...(isGlassTheme(theme) ? glassStylesOf(theme) : minimalFloatingStylesOf(theme)),\n        position: 'fixed',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        zIndex: theme.zIndex.appBar,\n        alignItems: 'center',\n        gap: 0.5,\n        width: 'max-content',\n        maxWidth: `calc(100% - ${GLASS_PANEL_GAP_PIXELS * 2}px)`,\n        borderRadius: '999px',\n        p: 0.5,\n        ...aboveMobileTabBarOf(FLOATING_GAP_PIXELS),\n    };\n}\n\n/**\n * @param {object} props\n * @param {string} props.countText «5 pedidos elegidos», ya traducido. La pieza se pinta mientras la pantalla la ponga: con\n *     nada elegido, no la ponga\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: 'inherit'|'primary'|'secondary'|'error'|'info'|'success'|'warning', disabled?: boolean, onClick: () => unknown}>} [props.actions]\n *     label ya traducido; en el teléfono se ve el ícono (sin él, el texto). onClick puede regresar una promesa\n * @param {() => void} props.onClear quitar la selección\n * @param {'top'|'split'} [props.phoneLayout] SELECTION_PHONE_LAYOUT; por omisión todo arriba\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {selection: {clear, actionsLabel, summaryLabel}}\n * @param {object} [props.sx] estilos del renglón\n */\nexport default function SelectionActions({countText, actions = [], onClear, phoneLayout = SELECTION_PHONE_LAYOUT.top, texts, sx}) {\n    const theme = useTheme();\n    const {t} = useToolkitTranslation('common', texts);\n    const [runningActionKey, setRunningActionKey] = useState(null);\n    const floatsOnPhone = selectionFloatsOnPhone(theme);\n    const extraSx = Array.isArray(sx) ? sx : [sx];\n\n    const runAction = async (action) => {\n        setRunningActionKey(action.key);\n        try {\n            await action.onClick();\n        } finally {\n            setRunningActionKey(null);\n        }\n    };\n    const isDisabledOf = (action) => runningActionKey !== null || Boolean(action.disabled);\n\n    const clearButton = (\n        <Tooltip title={t('selection.clear')}>\n            <IconButton aria-label={t('selection.clear')} onClick={onClear}>\n                <CloseRoundedIcon />\n            </IconButton>\n        </Tooltip>\n    );\n\n    // el renglón: escritorio siempre; en el teléfono, solo si ahí no flota\n    const row = (\n        <Stack role=\"toolbar\" aria-label={t('selection.actionsLabel')} direction=\"row\" spacing={1} useFlexGap\n               sx={[{flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', minHeight: 32},\n                   floatsOnPhone && {[PHONE_MEDIA_QUERY]: {display: 'none'}}, ...extraSx]}>\n            <Typography variant=\"body2\" sx={{fontWeight: 600, mr: 1}}>{countText}</Typography>\n            {actions.map((action) => (\n                <Button key={action.key} size=\"small\" color={action.color ?? 'primary'} startIcon={action.icon}\n                        disabled={isDisabledOf(action)} onClick={() => runAction(action)}>\n                    {action.label}\n                </Button>\n            ))}\n            <Button size=\"small\" color=\"inherit\" startIcon={<CloseRoundedIcon />} onClick={onClear} sx={{ml: 'auto'}}>\n                {t('selection.clear')}\n            </Button>\n        </Stack>\n    );\n\n    if (!floatsOnPhone) {\n        return row;\n    }\n\n    const showsBottomCapsule = phoneLayout === SELECTION_PHONE_LAYOUT.split && actions.length > 0;\n\n    return (\n        <>\n            {row}\n            {/* arriba: con las demás cápsulas flotantes de la pantalla (BarActions), antes que ellas. Sin label en BarActions:\n                el nombre ya lo lleva la cápsula (dos grupos anidados con el mismo nombre se leen dos veces) */}\n            <BarActions bare exclusive order={-2} sx={PHONE_ONLY_SX} inlineSx={PHONE_ONLY_SX}>\n                <BarCapsule aria-label={t('selection.summaryLabel')} sx={{pl: 2}}>\n                    <Typography variant=\"body2\" role=\"status\" aria-live=\"polite\" sx={{fontWeight: 600, whiteSpace: 'nowrap', mr: 0.5}}>\n                        {countText}\n                    </Typography>\n                    {clearButton}\n                </BarCapsule>\n            </BarActions>\n            {phoneLayout === SELECTION_PHONE_LAYOUT.top && actions.length > 0 && (\n                <BarActions label={t('selection.actionsLabel')} exclusive order={-1} sx={PHONE_ONLY_SX} inlineSx={PHONE_ONLY_SX}>\n                    {actions.map((action) => (\n                        <BarActionButton key={action.key} label={action.label} icon={action.icon} color={action.color}\n                                         disabled={isDisabledOf(action)} onClick={() => runAction(action)} />\n                    ))}\n                </BarActions>\n            )}\n            {showsBottomCapsule && (\n                <>\n                    <GlobalStyles styles={{':root': {[FLOATING_BOTTOM_SPACE_CSS_VARIABLE]: `${FLOATING_BOTTOM_SPACE_PIXELS}px`}}} />\n                    <Box role=\"toolbar\" aria-label={t('selection.actionsLabel')} sx={[bottomCapsuleSxOf, PHONE_ONLY_SX]}>\n                        {actions.map((action) => (action.icon ? (\n                            <Tooltip key={action.key} title={action.label}>\n                                {/* el span deja ver el tooltip aunque el botón esté apagado */}\n                                <span>\n                                    <IconButton aria-label={action.label} color={action.color ?? 'default'} disabled={isDisabledOf(action)}\n                                                onClick={() => runAction(action)}>\n                                        {action.icon}\n                                    </IconButton>\n                                </span>\n                            </Tooltip>\n                        ) : (\n                            <Button key={action.key} size=\"small\" color={action.color ?? 'primary'} disabled={isDisabledOf(action)}\n                                    onClick={() => runAction(action)}>\n                                {action.label}\n                            </Button>\n                        )))}\n                    </Box>\n                </>\n            )}\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/filters/DateRangeFilter.js

@@ -9,9 +9,10 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import DateRangeOutlinedIcon from "@mui/icons-material/DateRangeOutlined";
-import { formatDate } from "../../formatting.js";
-function DateRangeFilter({ from = "", to = "", onChange, label }) {
-  const { t } = useToolkitTranslation("table");
+import { useFormatters } from "../../toolkit/useFormatters.js";
+function DateRangeFilter({ from = "", to = "", onChange, label, texts }) {
+  const { t } = useToolkitTranslation("table", texts);
+  const { formatDate } = useFormatters();
   const [anchorElement, setAnchorElement] = useState(null);
   const [draft, setDraft] = useState({ from, to });
   const isActive = Boolean(from || to);

package/dist/ui/filters/DateRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/ui/filters/DateRangeFilter.jsx"],"sourcesContent":["// Un rango de fechas personalizado, como chip al lado de los accesos rápidos.\n//\n// Viaja como AAAA-MM-DD (día, no instante). Convertirlo a \"inicio del día\" y \"fin del día\" lo hace el SERVIDOR con la\n// zona del negocio: si lo hiciera el navegador con la suya, alguien en otra zona pediría otro rango sin saberlo.\n//\n// El calendario es el <input type=\"date\"> del TextField de MUI y no el DatePicker de @mui/x-date-pickers con moment,\n// para no sumar dos dependencias (x-date-pickers y moment) que ninguna\n// pantalla del 22-sep necesita. Si el calendario nativo estorba (Safari de escritorio), se cambia SOLO este archivo.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport DateRangeOutlinedIcon from '@mui/icons-material/DateRangeOutlined';\n\nimport {formatDate} from '@/formatting.js';\n\n/**\n * @param {object} props\n * @param {string} [props.from] AAAA-MM-DD o '' si no hay\n * @param {string} [props.to] AAAA-MM-DD o '' si no hay\n * @param {(range: {from: string, to: string}) => void} props.onChange '' para quitar\n * @param {string} [props.label] ya traducido; por defecto \"Personalizado\"\n */\nexport default function DateRangeFilter({from = '', to = '', onChange, label}) {\n    const {t} = useToolkitTranslation('table');\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [draft, setDraft] = useState({from, to});\n    const isActive = Boolean(from || to);\n    // AAAA-MM-DD se compara bien como texto\n    const isInvalid = Boolean(draft.from && draft.to && draft.from > draft.to);\n\n    const open = (event) => {\n        setDraft({from, to});\n        setAnchorElement(event.currentTarget);\n    };\n    const close = () => setAnchorElement(null);\n    const apply = () => {\n        onChange(draft);\n        close();\n    };\n    const clear = () => {\n        onChange({from: '', to: ''});\n        close();\n    };\n\n    const summary = isActive\n        ? t('dateRange.summary', {from: from ? formatDate(from) : '…', to: to ? formatDate(to) : t('dateRange.today')})\n        : (label ?? t('dateRange.label'));\n\n    return (\n        <>\n            <Chip icon={<DateRangeOutlinedIcon />} label={summary} clickable onClick={open}\n                  variant={isActive ? 'filled' : 'outlined'} color={isActive ? 'primary' : 'default'}\n                  onDelete={isActive ? clear : undefined} sx={{flex: '0 0 auto', height: 32}} />\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={close} anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <Stack spacing={2} sx={{p: 2, width: 280}}>\n                    <Typography variant=\"subtitle2\">{t('dateRange.title')}</Typography>\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.from')} value={draft.from}\n                               helperText={t('dateRange.fromHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, from: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {max: draft.to || undefined}}} />\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.to')} value={draft.to} error={isInvalid}\n                               helperText={isInvalid ? t('dateRange.invalid') : t('dateRange.toHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, to: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {min: draft.from || undefined}}} />\n                    <Stack direction=\"row\" spacing={1} sx={{justifyContent: 'flex-end'}}>\n                        {isActive && <Button onClick={clear}>{t('dateRange.clear')}</Button>}\n                        <Button variant=\"contained\" onClick={apply} disabled={isInvalid || !(draft.from || draft.to)}>\n                            {t('dateRange.apply')}\n                        </Button>\n                    </Stack>\n                </Stack>\n            </Popover>\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/ui/filters/DateRangeFilter.jsx"],"sourcesContent":["// Un rango de fechas personalizado, como chip al lado de los accesos rápidos.\n//\n// Viaja como AAAA-MM-DD (día, no instante). Convertirlo a \"inicio del día\" y \"fin del día\" lo hace el SERVIDOR con la\n// zona del negocio: si lo hiciera el navegador con la suya, alguien en otra zona pediría otro rango sin saberlo.\n//\n// El calendario es el <input type=\"date\"> del TextField de MUI y no el DatePicker de @mui/x-date-pickers con moment,\n// para no sumar dos dependencias (x-date-pickers y moment) que ninguna\n// pantalla del 22-sep necesita. Si el calendario nativo estorba (Safari de escritorio), se cambia SOLO este archivo.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport DateRangeOutlinedIcon from '@mui/icons-material/DateRangeOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\n\n/**\n * @param {object} props\n * @param {string} [props.from] AAAA-MM-DD o '' si no hay\n * @param {string} [props.to] AAAA-MM-DD o '' si no hay\n * @param {(range: {from: string, to: string}) => void} props.onChange '' para quitar\n * @param {string} [props.label] ya traducido; por defecto \"Personalizado\"\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function DateRangeFilter({from = '', to = '', onChange, label, texts}) {\n    const {t} = useToolkitTranslation('table', texts);\n    const {formatDate} = useFormatters();\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [draft, setDraft] = useState({from, to});\n    const isActive = Boolean(from || to);\n    // AAAA-MM-DD se compara bien como texto\n    const isInvalid = Boolean(draft.from && draft.to && draft.from > draft.to);\n\n    const open = (event) => {\n        setDraft({from, to});\n        setAnchorElement(event.currentTarget);\n    };\n    const close = () => setAnchorElement(null);\n    const apply = () => {\n        onChange(draft);\n        close();\n    };\n    const clear = () => {\n        onChange({from: '', to: ''});\n        close();\n    };\n\n    const summary = isActive\n        ? t('dateRange.summary', {from: from ? formatDate(from) : '…', to: to ? formatDate(to) : t('dateRange.today')})\n        : (label ?? t('dateRange.label'));\n\n    return (\n        <>\n            <Chip icon={<DateRangeOutlinedIcon />} label={summary} clickable onClick={open}\n                  variant={isActive ? 'filled' : 'outlined'} color={isActive ? 'primary' : 'default'}\n                  onDelete={isActive ? clear : undefined} sx={{flex: '0 0 auto', height: 32}} />\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={close} anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <Stack spacing={2} sx={{p: 2, width: 280}}>\n                    <Typography variant=\"subtitle2\">{t('dateRange.title')}</Typography>\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.from')} value={draft.from}\n                               helperText={t('dateRange.fromHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, from: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {max: draft.to || undefined}}} />\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.to')} value={draft.to} error={isInvalid}\n                               helperText={isInvalid ? t('dateRange.invalid') : t('dateRange.toHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, to: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {min: draft.from || undefined}}} />\n                    <Stack direction=\"row\" spacing={1} sx={{justifyContent: 'flex-end'}}>\n                        {isActive && <Button onClick={clear}>{t('dateRange.clear')}</Button>}\n                        <Button variant=\"contained\" onClick={apply} disabled={isInvalid || !(draft.from || draft.to)}>\n                            {t('dateRange.apply')}\n                        </Button>\n                    </Stack>\n                </Stack>\n            </Popover>\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/filters/QuickFilters.js

@@ -24,8 +24,8 @@ function compactCount(count) {
   }
   return String(count);
 }
-function QuickFilters({ value, onChange, options = [], caption, ariaLabel, extra }) {
-  const { t } = useToolkitTranslation("table");
+function QuickFilters({ value, onChange, options = [], caption, ariaLabel, extra, texts }) {
+  const { t } = useToolkitTranslation("table", texts);
   const activeChip = useRef(null);
   const isFirstRender = useRef(true);
   useEffect(() => {

package/dist/ui/filters/QuickFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilters.js","sources":["../../../src/ui/filters/QuickFilters.jsx"],"sourcesContent":["// Accesos rápidos: una tira de chips donde se elige UNO (p. ej. el estatus de un pedido).\n//\n// Es el complemento de FilterChips, no lo mismo:\n//   - FilterChips dice qué filtros están PUESTOS y sirve para quitarlos;\n//   - esto dice qué opciones HAY y sirve para saltar entre ellas de un toque.\n//\n// El conteo de cada chip sale de las facetas del servidor, contadas sobre el conjunto COMPLETO y sin este filtro\n// puesto: al elegir una, las demás siguen diciendo cuántas tienen.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport {alpha} from '@mui/material/styles';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\n\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\n\n\n// qué tan marcado va el velo del contador del filtro elegido\nconst ACTIVE_COUNT_VEIL_OPACITY = 0.18;\n\n/**\n * El velo del contador del filtro elegido: el color del texto base (negro en claro, blanco en oscuro) casi transparente.\n * Un tema con variables CSS trae ese color en theme.vars; el tema por omisión de MUI, en su modo.\n *\n * @param {object} theme tema de MUI\n * @returns {string} color CSS\n */\nfunction activeCountVeilOf(theme) {\n    if (theme.vars) {\n        return `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${ACTIVE_COUNT_VEIL_OPACITY})`;\n    }\n    const baseTextColor = theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black;\n\n    return alpha(baseTextColor, ACTIVE_COUNT_VEIL_OPACITY);\n}\n\n/** \"99+\" arriba de 99 y \"1.2k\" arriba de 999: el chip no se estira. */\nfunction compactCount(count) {\n    if (count > 999) {\n        return `${(count / 1000).toFixed(1)}k`;\n    }\n    if (count > 99) {\n        return '99+';\n    }\n    return String(count);\n}\n\n/**\n * @param {object} props\n * @param {string} props.value opción activa ('' = todas)\n * @param {(value: string) => void} props.onChange\n * @param {Array<{value: string, label: import('react').ReactNode, count?: number}>} [props.options]\n * @param {import('react').ReactNode} [props.caption]\n * @param {string} [props.ariaLabel]\n * @param {import('react').ReactNode} [props.extra] al final de la tira (p. ej. un rango de fechas)\n */\nexport default function QuickFilters({value, onChange, options = [], caption, ariaLabel, extra}) {\n    const {t} = useToolkitTranslation('table');\n    const activeChip = useRef(null);\n    const isFirstRender = useRef(true);\n\n    // al cambiar la selección desde fuera (alguien limpió los filtros) el chip activo se trae a la vista; en el primer\n    // render sin animación: una tira que se mueve sola al abrir la pantalla se siente rota\n    useEffect(() => {\n        if (!activeChip.current) {\n            return;\n        }\n        const behavior = isFirstRender.current ? 'instant' : 'smooth';\n        isFirstRender.current = false;\n        activeChip.current.scrollIntoView({behavior, block: 'nearest', inline: 'center'});\n    }, [value]);\n\n    // guard clause: con una sola opción no hay entre qué saltar\n    if (options.length <= 1) {\n        return null;\n    }\n\n    return (\n        <Box sx={{mb: 1}}>\n            {caption && (\n                <Typography variant=\"caption\" color=\"text.secondary\" sx={{px: 0.25}}>{caption}</Typography>\n            )}\n            <ScrollableRow role=\"tablist\" aria-label={ariaLabel}>\n                {options.map((option) => {\n                    const isActive = option.value === value;\n                    return (\n                        <Chip\n                            key={option.value || '__all__'}\n                            ref={isActive ? activeChip : null}\n                            role=\"tab\"\n                            aria-selected={isActive}\n                            clickable\n                            onClick={() => onChange(isActive ? '' : option.value)}\n                            // el elegido trae su ×: \"volver a Todas\" no se descubre solo\n                            onDelete={isActive && option.value ? () => onChange('') : undefined}\n                            variant={isActive ? 'filled' : 'outlined'}\n                            color={isActive ? 'primary' : 'default'}\n                            label={(\n                                <Box component=\"span\" sx={{display: 'inline-flex', alignItems: 'center', gap: 0.75}}>\n                                    <span>{option.label}</span>\n                                    {option.count !== null && option.count !== undefined && (\n                                        <Box component=\"span\"\n                                             aria-label={t('quickFilters.countAriaLabel', {count: option.count})}\n                                             // velo del color del texto base (negro en claro, blanco en oscuro) y no rgba fijo\n                                             sx={(theme) => ({\n                                                 px: 0.75, borderRadius: '6px', fontSize: 11, fontWeight: 700, minWidth: 18,\n                                                 textAlign: 'center', color: 'inherit',\n                                                 bgcolor: isActive ? activeCountVeilOf(theme) : 'action.selected',\n                                             })}>\n                                            {compactCount(option.count)}\n                                        </Box>\n                                    )}\n                                </Box>\n                            )}\n                            sx={{flex: '0 0 auto', height: 32}}\n                        />\n                    );\n                })}\n                {extra}\n            </ScrollableRow>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,4BAA4B;AASlC,SAAS,kBAAkB,OAAO;AAC9B,MAAI,MAAM,MAAM;AACZ,WAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO,mBAAmB,MAAM,yBAAyB;AAAA,EAC/F;AACA,QAAM,gBAAgB,MAAM,QAAQ,SAAS,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,QAAQ,OAAO;AAExG,SAAO,MAAM,eAAe,yBAAyB;AACzD;AAGA,SAAS,aAAa,OAAO;AACzB,MAAI,QAAQ,KAAK;AACb,WAAO,IAAI,QAAQ,KAAM,QAAQ,CAAC,CAAC;AAAA,EACvC;AACA,MAAI,QAAQ,IAAI;AACZ,WAAO;AAAA,EACX;AACA,SAAO,OAAO,KAAK;AACvB;AAWA,SAAwB,aAAa,EAAC,OAAO,UAAU,UAAU,CAAA,GAAI,SAAS,WAAW,SAAQ;AAC7F,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AACzC,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,gBAAgB,OAAO,IAAI;AAIjC,YAAU,MAAM;AACZ,QAAI,CAAC,WAAW,SAAS;AACrB;AAAA,IACJ;AACA,UAAM,WAAW,cAAc,UAAU,YAAY;AACrD,kBAAc,UAAU;AACxB,eAAW,QAAQ,eAAe,EAAC,UAAU,OAAO,WAAW,QAAQ,UAAS;AAAA,EACpF,GAAG,CAAC,KAAK,CAAC;AAGV,MAAI,QAAQ,UAAU,GAAG;AACrB,WAAO;AAAA,EACX;AAEA,8BACK,KAAA,EAAI,IAAI,EAAC,IAAI,KACT,UAAA;AAAA,IAAA,WACG,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,IAAI,EAAC,IAAI,KAAA,GAAQ,UAAA,QAAA,CAAQ;AAAA,IAElF,qBAAC,eAAA,EAAc,MAAK,WAAU,cAAY,WACrC,UAAA;AAAA,MAAA,QAAQ,IAAI,CAAC,WAAW;AACrB,cAAM,WAAW,OAAO,UAAU;AAClC,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAEG,KAAK,WAAW,aAAa;AAAA,YAC7B,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,WAAS;AAAA,YACT,SAAS,MAAM,SAAS,WAAW,KAAK,OAAO,KAAK;AAAA,YAEpD,UAAU,YAAY,OAAO,QAAQ,MAAM,SAAS,EAAE,IAAI;AAAA,YAC1D,SAAS,WAAW,WAAW;AAAA,YAC/B,OAAO,WAAW,YAAY;AAAA,YAC9B,OACI,qBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,EAAC,SAAS,eAAe,YAAY,UAAU,KAAK,QAC1E,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAM,iBAAO,MAAA,CAAM;AAAA,cACnB,OAAO,UAAU,QAAQ,OAAO,UAAU,UACvC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAAI,WAAU;AAAA,kBACV,cAAY,EAAE,+BAA+B,EAAC,OAAO,OAAO,OAAM;AAAA,kBAElE,IAAI,CAAC,WAAW;AAAA,oBACZ,IAAI;AAAA,oBAAM,cAAc;AAAA,oBAAO,UAAU;AAAA,oBAAI,YAAY;AAAA,oBAAK,UAAU;AAAA,oBACxE,WAAW;AAAA,oBAAU,OAAO;AAAA,oBAC5B,SAAS,WAAW,kBAAkB,KAAK,IAAI;AAAA,kBAAA;AAAA,kBAEnD,UAAA,aAAa,OAAO,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC9B,GAER;AAAA,YAEJ,IAAI,EAAC,MAAM,YAAY,QAAQ,GAAA;AAAA,UAAE;AAAA,UA3B5B,OAAO,SAAS;AAAA,QAAA;AAAA,MA8BjC,CAAC;AAAA,MACA;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"QuickFilters.js","sources":["../../../src/ui/filters/QuickFilters.jsx"],"sourcesContent":["// Accesos rápidos: una tira de chips donde se elige UNO (p. ej. el estatus de un pedido).\n//\n// Es el complemento de FilterChips, no lo mismo:\n//   - FilterChips dice qué filtros están PUESTOS y sirve para quitarlos;\n//   - esto dice qué opciones HAY y sirve para saltar entre ellas de un toque.\n//\n// El conteo de cada chip sale de las facetas del servidor, contadas sobre el conjunto COMPLETO y sin este filtro\n// puesto: al elegir una, las demás siguen diciendo cuántas tienen.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport {alpha} from '@mui/material/styles';\nimport Chip from '@mui/material/Chip';\nimport Typography from '@mui/material/Typography';\n\nimport ScrollableRow from '@/ui/layout/ScrollableRow.jsx';\n\n\n// qué tan marcado va el velo del contador del filtro elegido\nconst ACTIVE_COUNT_VEIL_OPACITY = 0.18;\n\n/**\n * El velo del contador del filtro elegido: el color del texto base (negro en claro, blanco en oscuro) casi transparente.\n * Un tema con variables CSS trae ese color en theme.vars; el tema por omisión de MUI, en su modo.\n *\n * @param {object} theme tema de MUI\n * @returns {string} color CSS\n */\nfunction activeCountVeilOf(theme) {\n    if (theme.vars) {\n        return `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${ACTIVE_COUNT_VEIL_OPACITY})`;\n    }\n    const baseTextColor = theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black;\n\n    return alpha(baseTextColor, ACTIVE_COUNT_VEIL_OPACITY);\n}\n\n/** \"99+\" arriba de 99 y \"1.2k\" arriba de 999: el chip no se estira. */\nfunction compactCount(count) {\n    if (count > 999) {\n        return `${(count / 1000).toFixed(1)}k`;\n    }\n    if (count > 99) {\n        return '99+';\n    }\n    return String(count);\n}\n\n/**\n * @param {object} props\n * @param {string} props.value opción activa ('' = todas)\n * @param {(value: string) => void} props.onChange\n * @param {Array<{value: string, label: import('react').ReactNode, count?: number}>} [props.options]\n * @param {import('react').ReactNode} [props.caption]\n * @param {string} [props.ariaLabel]\n * @param {import('react').ReactNode} [props.extra] al final de la tira (p. ej. un rango de fechas)\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function QuickFilters({value, onChange, options = [], caption, ariaLabel, extra, texts}) {\n    const {t} = useToolkitTranslation('table', texts);\n    const activeChip = useRef(null);\n    const isFirstRender = useRef(true);\n\n    // al cambiar la selección desde fuera (alguien limpió los filtros) el chip activo se trae a la vista; en el primer\n    // render sin animación: una tira que se mueve sola al abrir la pantalla se siente rota\n    useEffect(() => {\n        if (!activeChip.current) {\n            return;\n        }\n        const behavior = isFirstRender.current ? 'instant' : 'smooth';\n        isFirstRender.current = false;\n        activeChip.current.scrollIntoView({behavior, block: 'nearest', inline: 'center'});\n    }, [value]);\n\n    // guard clause: con una sola opción no hay entre qué saltar\n    if (options.length <= 1) {\n        return null;\n    }\n\n    return (\n        <Box sx={{mb: 1}}>\n            {caption && (\n                <Typography variant=\"caption\" color=\"text.secondary\" sx={{px: 0.25}}>{caption}</Typography>\n            )}\n            <ScrollableRow role=\"tablist\" aria-label={ariaLabel}>\n                {options.map((option) => {\n                    const isActive = option.value === value;\n                    return (\n                        <Chip\n                            key={option.value || '__all__'}\n                            ref={isActive ? activeChip : null}\n                            role=\"tab\"\n                            aria-selected={isActive}\n                            clickable\n                            onClick={() => onChange(isActive ? '' : option.value)}\n                            // el elegido trae su ×: \"volver a Todas\" no se descubre solo\n                            onDelete={isActive && option.value ? () => onChange('') : undefined}\n                            variant={isActive ? 'filled' : 'outlined'}\n                            color={isActive ? 'primary' : 'default'}\n                            label={(\n                                <Box component=\"span\" sx={{display: 'inline-flex', alignItems: 'center', gap: 0.75}}>\n                                    <span>{option.label}</span>\n                                    {option.count !== null && option.count !== undefined && (\n                                        <Box component=\"span\"\n                                             aria-label={t('quickFilters.countAriaLabel', {count: option.count})}\n                                             // velo del color del texto base (negro en claro, blanco en oscuro) y no rgba fijo\n                                             sx={(theme) => ({\n                                                 px: 0.75, borderRadius: '6px', fontSize: 11, fontWeight: 700, minWidth: 18,\n                                                 textAlign: 'center', color: 'inherit',\n                                                 bgcolor: isActive ? activeCountVeilOf(theme) : 'action.selected',\n                                             })}>\n                                            {compactCount(option.count)}\n                                        </Box>\n                                    )}\n                                </Box>\n                            )}\n                            sx={{flex: '0 0 auto', height: 32}}\n                        />\n                    );\n                })}\n                {extra}\n            </ScrollableRow>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBA,MAAM,4BAA4B;AASlC,SAAS,kBAAkB,OAAO;AAC9B,MAAI,MAAM,MAAM;AACZ,WAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO,mBAAmB,MAAM,yBAAyB;AAAA,EAC/F;AACA,QAAM,gBAAgB,MAAM,QAAQ,SAAS,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,QAAQ,OAAO;AAExG,SAAO,MAAM,eAAe,yBAAyB;AACzD;AAGA,SAAS,aAAa,OAAO;AACzB,MAAI,QAAQ,KAAK;AACb,WAAO,IAAI,QAAQ,KAAM,QAAQ,CAAC,CAAC;AAAA,EACvC;AACA,MAAI,QAAQ,IAAI;AACZ,WAAO;AAAA,EACX;AACA,SAAO,OAAO,KAAK;AACvB;AAYA,SAAwB,aAAa,EAAC,OAAO,UAAU,UAAU,IAAI,SAAS,WAAW,OAAO,SAAQ;AACpG,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,gBAAgB,OAAO,IAAI;AAIjC,YAAU,MAAM;AACZ,QAAI,CAAC,WAAW,SAAS;AACrB;AAAA,IACJ;AACA,UAAM,WAAW,cAAc,UAAU,YAAY;AACrD,kBAAc,UAAU;AACxB,eAAW,QAAQ,eAAe,EAAC,UAAU,OAAO,WAAW,QAAQ,UAAS;AAAA,EACpF,GAAG,CAAC,KAAK,CAAC;AAGV,MAAI,QAAQ,UAAU,GAAG;AACrB,WAAO;AAAA,EACX;AAEA,8BACK,KAAA,EAAI,IAAI,EAAC,IAAI,KACT,UAAA;AAAA,IAAA,WACG,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,kBAAiB,IAAI,EAAC,IAAI,KAAA,GAAQ,UAAA,QAAA,CAAQ;AAAA,IAElF,qBAAC,eAAA,EAAc,MAAK,WAAU,cAAY,WACrC,UAAA;AAAA,MAAA,QAAQ,IAAI,CAAC,WAAW;AACrB,cAAM,WAAW,OAAO,UAAU;AAClC,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YAEG,KAAK,WAAW,aAAa;AAAA,YAC7B,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,WAAS;AAAA,YACT,SAAS,MAAM,SAAS,WAAW,KAAK,OAAO,KAAK;AAAA,YAEpD,UAAU,YAAY,OAAO,QAAQ,MAAM,SAAS,EAAE,IAAI;AAAA,YAC1D,SAAS,WAAW,WAAW;AAAA,YAC/B,OAAO,WAAW,YAAY;AAAA,YAC9B,OACI,qBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,EAAC,SAAS,eAAe,YAAY,UAAU,KAAK,QAC1E,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAM,iBAAO,MAAA,CAAM;AAAA,cACnB,OAAO,UAAU,QAAQ,OAAO,UAAU,UACvC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAAI,WAAU;AAAA,kBACV,cAAY,EAAE,+BAA+B,EAAC,OAAO,OAAO,OAAM;AAAA,kBAElE,IAAI,CAAC,WAAW;AAAA,oBACZ,IAAI;AAAA,oBAAM,cAAc;AAAA,oBAAO,UAAU;AAAA,oBAAI,YAAY;AAAA,oBAAK,UAAU;AAAA,oBACxE,WAAW;AAAA,oBAAU,OAAO;AAAA,oBAC5B,SAAS,WAAW,kBAAkB,KAAK,IAAI;AAAA,kBAAA;AAAA,kBAEnD,UAAA,aAAa,OAAO,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YAC9B,GAER;AAAA,YAEJ,IAAI,EAAC,MAAM,YAAY,QAAQ,GAAA;AAAA,UAAE;AAAA,UA3B5B,OAAO,SAAS;AAAA,QAAA;AAAA,MA8BjC,CAAC;AAAA,MACA;AAAA,IAAA,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}

package/dist/ui/labels/tagOf.js

@@ -0,0 +1,7 @@
+function tagOf(tag) {
+  return typeof tag === "string" ? { label: tag, color: "default" } : { label: tag.label, color: tag.color ?? "default" };
+}
+export {
+  tagOf
+};
+//# sourceMappingURL=tagOf.js.map

package/dist/ui/labels/tagOf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagOf.js","sources":["../../../src/ui/labels/tagOf.js"],"sourcesContent":["// Una etiqueta de color como la reciben las piezas de la casa (la tarjeta del tablero, el mensaje de la bandeja): texto solo\n// («Clientes») o con su color del tema ({label: 'Alta', color: 'error'}). Función pura: se prueba sin navegador.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\n\n/**\n * Una etiqueta como la pintan la tarjeta y el mensaje: un texto suelto o {label, color} (un color del tema: error, warning, info…).\n *\n * @param {string|{label: string, color?: string}} tag\n * @returns {{label: string, color: string}}\n */\nexport function tagOf(tag) {\n    return typeof tag === 'string' ? {label: tag, color: 'default'} : {label: tag.label, color: tag.color ?? 'default'};\n}\n"],"names":[],"mappings":"AAWO,SAAS,MAAM,KAAK;AACvB,SAAO,OAAO,QAAQ,WAAW,EAAC,OAAO,KAAK,OAAO,UAAS,IAAI,EAAC,OAAO,IAAI,OAAO,OAAO,IAAI,SAAS,UAAS;AACtH;"}

package/dist/ui/layout/CollapsibleSection.js

@@ -21,13 +21,17 @@ const HEADER_SX = {
   "&:hover": { bgcolor: "action.hover" },
   "& .MuiAccordionSummary-content": { my: 0.75, minWidth: 0 }
 };
-function CollapsibleSection({ collapsedTitle, expandedTitle, hint = "", defaultExpanded = false, children }) {
+function CollapsibleSection({ collapsedTitle, expandedTitle, hint = "", defaultExpanded = false, onExpandedChange, children }) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const changeExpanded = (nextIsExpanded) => {
+    setIsExpanded(nextIsExpanded);
+    onExpandedChange?.(nextIsExpanded);
+  };
   return /* @__PURE__ */ jsx(Box, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsxs(
     Accordion,
     {
       expanded: isExpanded,
-      onChange: (changeEvent, nextIsExpanded) => setIsExpanded(nextIsExpanded),
+      onChange: (changeEvent, nextIsExpanded) => changeExpanded(nextIsExpanded),
       disableGutters: true,
       elevation: 0,
       square: true,

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleSection.js","sources":["../../../src/ui/layout/CollapsibleSection.jsx"],"sourcesContent":["// Sección que se pliega: un encabezado que se toca y, debajo, el contenido, que se abre y se cierra.\n//\n// Para qué: en una página de detalle las cifras quedan a la vista y lo demás se guarda aquí; quien quiere más, lo abre.\n//\n// El encabezado se ve como lo que es, un botón a todo lo ancho: recuadro, la flecha ADELANTE del texto y otro fondo al pasar\n// el cursor. Su texto dice lo que va a pasar al tocarlo («Ver el detalle…» plegada, «Ocultar el detalle…» abierta) y,\n// plegada, un renglón más chico dice qué hay adentro: así nadie tiene que abrirla para saber si ahí está lo que busca.\n// No dice «dé clic»: en el teléfono no hay clic, y un tooltip tampoco se ve ahí.\n//\n// El contenido va sin fondo ni borde propios: adentro van tarjetas (SectionCard) y un recuadro alrededor se vería como\n// tarjeta dentro de tarjeta.\n//\n// OJO: el acordeón de MUI se quita el margen de arriba cuando está abierto y es el primero de su tipo entre sus hermanos.\n// Dentro de un Stack, que separa a sus hijos con margen, eso hacía brincar el encabezado 16 px al abrir y al cerrar. Por eso\n// va envuelto en una caja: el margen del Stack cae en la caja y el encabezado se queda quieto.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: sus textos llegan ya traducidos.\nimport {useState} from 'react';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\n// el mismo radio de las tarjetas (theme/components/surfaces.js): el encabezado se lee como una pieza más de la página\nconst CARD_BORDER_RADIUS_PIXELS = 10;\n\nconst HEADER_SX = {\n    // la flecha adelante del texto: al final del renglón quedaba lejos de lo que se lee y pasaba inadvertida\n    flexDirection: 'row-reverse', gap: 1, px: 1.5, minHeight: 44,\n    border: 1, borderColor: 'divider', borderRadius: `${CARD_BORDER_RADIUS_PIXELS}px`, bgcolor: 'background.paper',\n    '&:hover': {bgcolor: 'action.hover'},\n    '& .MuiAccordionSummary-content': {my: 0.75, minWidth: 0},\n};\n\n/**\n * @param {object} props\n * @param {string} props.collapsedTitle lo que dice plegada, ya traducido («Ver el detalle de la validación»)\n * @param {string} props.expandedTitle lo que dice abierta («Ocultar el detalle de la validación»)\n * @param {string} [props.hint] plegada, qué hay adentro («Incluye resumen, motivos de rechazo y descargas.»)\n * @param {boolean} [props.defaultExpanded] si empieza abierta; por omisión empieza plegada\n * @param {import('react').ReactNode} props.children\n */\nexport default function CollapsibleSection({collapsedTitle, expandedTitle, hint = '', defaultExpanded = false, children}) {\n    const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n    return (\n        <Box sx={{minWidth: 0}}>\n            <Accordion expanded={isExpanded} onChange={(changeEvent, nextIsExpanded) => setIsExpanded(nextIsExpanded)}\n                       disableGutters elevation={0} square sx={{bgcolor: 'transparent', '&::before': {display: 'none'}}}>\n                {/* NOTA: el acordeón ya envuelve este renglón en un encabezado (h3); los textos van como span para no anidar dos */}\n                <AccordionSummary expandIcon={<ExpandMoreIcon color=\"primary\" />} sx={HEADER_SX}>\n                    <Box sx={{minWidth: 0}}>\n                        <Typography variant=\"subtitle2\" component=\"span\" color=\"primary\" sx={{display: 'block'}}>\n                            {isExpanded ? expandedTitle : collapsedTitle}\n                        </Typography>\n                        {!isExpanded && hint && (\n                            <Typography variant=\"caption\" component=\"span\" color=\"text.secondary\" sx={{display: 'block'}}>{hint}</Typography>\n                        )}\n                    </Box>\n                </AccordionSummary>\n                <AccordionDetails sx={{p: 0, pt: 2}}>{children}</AccordionDetails>\n            </Accordion>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AA0BA,MAAM,4BAA4B;AAElC,MAAM,YAAY;AAAA;AAAA,EAEd,eAAe;AAAA,EAAe,KAAK;AAAA,EAAG,IAAI;AAAA,EAAK,WAAW;AAAA,EAC1D,QAAQ;AAAA,EAAG,aAAa;AAAA,EAAW,cAAc,GAAG,yBAAyB;AAAA,EAAM,SAAS;AAAA,EAC5F,WAAW,EAAC,SAAS,eAAA;AAAA,EACrB,kCAAkC,EAAC,IAAI,MAAM,UAAU,EAAA;AAC3D;AAUA,SAAwB,mBAAmB,EAAC,gBAAgB,eAAe,OAAO,IAAI,kBAAkB,OAAO,YAAW;AACtH,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,eAAe;AAE5D,6BACK,KAAA,EAAI,IAAI,EAAC,UAAU,KAChB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAU,UAAU;AAAA,MAAY,UAAU,CAAC,aAAa,mBAAmB,cAAc,cAAc;AAAA,MAC7F,gBAAc;AAAA,MAAC,WAAW;AAAA,MAAG,QAAM;AAAA,MAAC,IAAI,EAAC,SAAS,eAAe,aAAa,EAAC,SAAS,SAAM;AAAA,MAErG,UAAA;AAAA,QAAA,oBAAC,kBAAA,EAAiB,YAAY,oBAAC,gBAAA,EAAe,OAAM,UAAA,CAAU,GAAI,IAAI,WAClE,+BAAC,KAAA,EAAI,IAAI,EAAC,UAAU,KAChB,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,SAAQ,aAAY,WAAU,QAAO,OAAM,WAAU,IAAI,EAAC,SAAS,QAAA,GAC1E,UAAA,aAAa,gBAAgB,gBAClC;AAAA,UACC,CAAC,cAAc,QACZ,oBAAC,YAAA,EAAW,SAAQ,WAAU,WAAU,QAAO,OAAM,kBAAiB,IAAI,EAAC,SAAS,QAAA,GAAW,UAAA,KAAA,CAAK;AAAA,QAAA,EAAA,CAE5G,EAAA,CACJ;AAAA,QACA,oBAAC,oBAAiB,IAAI,EAAC,GAAG,GAAG,IAAI,EAAA,GAAK,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEvD;AAER;"}
+{"version":3,"file":"CollapsibleSection.js","sources":["../../../src/ui/layout/CollapsibleSection.jsx"],"sourcesContent":["// Sección que se pliega: un encabezado que se toca y, debajo, el contenido, que se abre y se cierra.\n//\n// Para qué: en una página de detalle las cifras quedan a la vista y lo demás se guarda aquí; quien quiere más, lo abre.\n//\n// El encabezado se ve como lo que es, un botón a todo lo ancho: recuadro, la flecha ADELANTE del texto y otro fondo al pasar\n// el cursor. Su texto dice lo que va a pasar al tocarlo («Ver el detalle…» plegada, «Ocultar el detalle…» abierta) y,\n// plegada, un renglón más chico dice qué hay adentro: así nadie tiene que abrirla para saber si ahí está lo que busca.\n// No dice «dé clic»: en el teléfono no hay clic, y un tooltip tampoco se ve ahí.\n//\n// El contenido va sin fondo ni borde propios: adentro van tarjetas (SectionCard) y un recuadro alrededor se vería como\n// tarjeta dentro de tarjeta.\n//\n// OJO: el acordeón de MUI se quita el margen de arriba cuando está abierto y es el primero de su tipo entre sus hermanos.\n// Dentro de un Stack, que separa a sus hijos con margen, eso hacía brincar el encabezado 16 px al abrir y al cerrar. Por eso\n// va envuelto en una caja: el margen del Stack cae en la caja y el encabezado se queda quieto.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: sus textos llegan ya traducidos.\nimport {useState} from 'react';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\n// el mismo radio de las tarjetas (theme/components/surfaces.js): el encabezado se lee como una pieza más de la página\nconst CARD_BORDER_RADIUS_PIXELS = 10;\n\nconst HEADER_SX = {\n    // la flecha adelante del texto: al final del renglón quedaba lejos de lo que se lee y pasaba inadvertida\n    flexDirection: 'row-reverse', gap: 1, px: 1.5, minHeight: 44,\n    border: 1, borderColor: 'divider', borderRadius: `${CARD_BORDER_RADIUS_PIXELS}px`, bgcolor: 'background.paper',\n    '&:hover': {bgcolor: 'action.hover'},\n    '& .MuiAccordionSummary-content': {my: 0.75, minWidth: 0},\n};\n\n/**\n * @param {object} props\n * @param {string} props.collapsedTitle lo que dice plegada, ya traducido («Ver el detalle de la validación»)\n * @param {string} props.expandedTitle lo que dice abierta («Ocultar el detalle de la validación»)\n * @param {string} [props.hint] plegada, qué hay adentro («Incluye resumen, motivos de rechazo y descargas.»)\n * @param {boolean} [props.defaultExpanded] si empieza abierta; por omisión empieza plegada\n * @param {(isExpanded: boolean) => void} [props.onExpandedChange] la persona la abrió o la plegó (por ejemplo, para pedir lo de\n *     adentro hasta que se abre)\n * @param {import('react').ReactNode} props.children\n */\nexport default function CollapsibleSection({collapsedTitle, expandedTitle, hint = '', defaultExpanded = false, onExpandedChange, children}) {\n    const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n    const changeExpanded = (nextIsExpanded) => {\n        setIsExpanded(nextIsExpanded);\n        onExpandedChange?.(nextIsExpanded);\n    };\n\n    return (\n        <Box sx={{minWidth: 0}}>\n            <Accordion expanded={isExpanded} onChange={(changeEvent, nextIsExpanded) => changeExpanded(nextIsExpanded)}\n                       disableGutters elevation={0} square sx={{bgcolor: 'transparent', '&::before': {display: 'none'}}}>\n                {/* NOTA: el acordeón ya envuelve este renglón en un encabezado (h3); los textos van como span para no anidar dos */}\n                <AccordionSummary expandIcon={<ExpandMoreIcon color=\"primary\" />} sx={HEADER_SX}>\n                    <Box sx={{minWidth: 0}}>\n                        <Typography variant=\"subtitle2\" component=\"span\" color=\"primary\" sx={{display: 'block'}}>\n                            {isExpanded ? expandedTitle : collapsedTitle}\n                        </Typography>\n                        {!isExpanded && hint && (\n                            <Typography variant=\"caption\" component=\"span\" color=\"text.secondary\" sx={{display: 'block'}}>{hint}</Typography>\n                        )}\n                    </Box>\n                </AccordionSummary>\n                <AccordionDetails sx={{p: 0, pt: 2}}>{children}</AccordionDetails>\n            </Accordion>\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AA0BA,MAAM,4BAA4B;AAElC,MAAM,YAAY;AAAA;AAAA,EAEd,eAAe;AAAA,EAAe,KAAK;AAAA,EAAG,IAAI;AAAA,EAAK,WAAW;AAAA,EAC1D,QAAQ;AAAA,EAAG,aAAa;AAAA,EAAW,cAAc,GAAG,yBAAyB;AAAA,EAAM,SAAS;AAAA,EAC5F,WAAW,EAAC,SAAS,eAAA;AAAA,EACrB,kCAAkC,EAAC,IAAI,MAAM,UAAU,EAAA;AAC3D;AAYA,SAAwB,mBAAmB,EAAC,gBAAgB,eAAe,OAAO,IAAI,kBAAkB,OAAO,kBAAkB,YAAW;AACxI,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,eAAe;AAC5D,QAAM,iBAAiB,CAAC,mBAAmB;AACvC,kBAAc,cAAc;AAC5B,uBAAmB,cAAc;AAAA,EACrC;AAEA,6BACK,KAAA,EAAI,IAAI,EAAC,UAAU,KAChB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAAU,UAAU;AAAA,MAAY,UAAU,CAAC,aAAa,mBAAmB,eAAe,cAAc;AAAA,MAC9F,gBAAc;AAAA,MAAC,WAAW;AAAA,MAAG,QAAM;AAAA,MAAC,IAAI,EAAC,SAAS,eAAe,aAAa,EAAC,SAAS,SAAM;AAAA,MAErG,UAAA;AAAA,QAAA,oBAAC,kBAAA,EAAiB,YAAY,oBAAC,gBAAA,EAAe,OAAM,UAAA,CAAU,GAAI,IAAI,WAClE,+BAAC,KAAA,EAAI,IAAI,EAAC,UAAU,KAChB,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,SAAQ,aAAY,WAAU,QAAO,OAAM,WAAU,IAAI,EAAC,SAAS,QAAA,GAC1E,UAAA,aAAa,gBAAgB,gBAClC;AAAA,UACC,CAAC,cAAc,QACZ,oBAAC,YAAA,EAAW,SAAQ,WAAU,WAAU,QAAO,OAAM,kBAAiB,IAAI,EAAC,SAAS,QAAA,GAAW,UAAA,KAAA,CAAK;AAAA,QAAA,EAAA,CAE5G,EAAA,CACJ;AAAA,QACA,oBAAC,oBAAiB,IAAI,EAAC,GAAG,GAAG,IAAI,EAAA,GAAK,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEvD;AAER;"}

package/dist/ui/layout/ContentDialog.js

@@ -49,8 +49,8 @@ function sheetSxOf(theme) {
 function SlideUp(props) {
   return /* @__PURE__ */ jsx(Slide, { direction: "up", ...props });
 }
-function ContentDialog({ open, onClose, title, children }) {
-  const { t } = useToolkitTranslation("common");
+function ContentDialog({ open, onClose, title, children, texts }) {
+  const { t } = useToolkitTranslation("common", texts);
   const titleId = useId();
   return /* @__PURE__ */ jsxs(
     Dialog,

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

@@ -1 +1 @@
-{"version":3,"file":"ContentDialog.js","sources":["../../../src/ui/layout/ContentDialog.jsx"],"sourcesContent":["// Diálogo de contenido: la «hoja de lectura» (la «page sheet» de Apple) para una vista grande que se lee, como un historial\n// con su tabla. Las confirmaciones y los formularios cortos siguen en su recuadro al centro (ConfirmDialog): esto es para\n// leer, no para contestar una pregunta.\n//\n// Cómo se ve, como en el iPad y en la Mac: una hoja SÓLIDA (para leer no va vidrio) con esquinas redondas, que sube desde\n// abajo; en escritorio centrada, de un ancho que se lee cómodo (SHEET_MAX_WIDTH_PIXELS) y debajo de la barra de arriba, que se\n// queda a la vista (atenuada) para no perder dónde se está; en el teléfono, separada de las orillas y casi de alto completo.\n// Antes ocupaba la pantalla de orilla a orilla: un rectángulo gris plano con renglones larguísimos (lo reportaron).\n//\n// Cómo se arma: un encabezado que no se mueve (el título y la X para cerrar) y un cuerpo que se desliza si no cabe.\n//\n// OJO: el alto de la barra superior no es fijo (con un aviso adentro mide más): se usa el que publica el layout\n// (APP_BAR_HEIGHT), no un número.\n//\n// Solo abre una vista: se cierra con la X, con Escape o con un clic afuera, sin confirmación.\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 {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Dialog from '@mui/material/Dialog';\nimport IconButton from '@mui/material/IconButton';\nimport Slide from '@mui/material/Slide';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {APP_BAR_HEIGHT} from '@/ui/layout/appBarHeight.js';\n\n// la hoja: lo ancho máximo en escritorio (un texto de 16 px se lee cómodo y cabe una tabla), su separación de las orillas y\n// la de su encabezado\nconst SHEET_MAX_WIDTH_PIXELS = 880;\nconst SHEET_GAP_PIXELS = 8;\nconst SHEET_PHONE_TOP_PIXELS = 24;\nconst SHEET_RADIUS_PIXELS = 20;\n\n/**\n * La hoja: fija a la ventana y centrada. Va como diálogo fullScreen (así el vidrio del tema la deja sólida y el fondo de\n * atrás no se desenfoca: la barra se sigue leyendo), con su tamaño y sus esquinas propios.\n * OJO: el alto del fullScreen de MUI es 100 %, que con top y bottom se saldría por abajo: va 'auto'.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction sheetSxOf(theme) {\n    const palette = (theme.vars ?? theme).palette;\n    return {\n        position: 'fixed',\n        m: 0,\n        height: 'auto',\n        maxHeight: 'none',\n        borderRadius: `${SHEET_RADIUS_PIXELS}px`,\n        // el que se desliza es el cuerpo, no la hoja: así el encabezado se queda quieto\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        backgroundColor: palette.background.paper,\n        backgroundImage: 'none',\n        boxShadow: `0 0 0 1px ${palette.divider}, 0 24px 64px rgba(0, 0, 0, 0.28)`,\n        // en oscuro, un poco más clara que lo de atrás: lo que va al frente se aclara (HIG «Dark Mode»)\n        ...theme.applyStyles('dark', {backgroundColor: `color-mix(in srgb, ${palette.background.paper}, white 6%)`}),\n        // escritorio: centrada, debajo de la barra\n        top: `calc(${APP_BAR_HEIGHT} + ${SHEET_GAP_PIXELS}px)`,\n        bottom: SHEET_GAP_PIXELS,\n        left: 0,\n        right: 0,\n        mx: 'auto',\n        width: `min(${SHEET_MAX_WIDTH_PIXELS}px, calc(100% - ${SHEET_GAP_PIXELS * 4}px))`,\n        maxWidth: 'none',\n        // teléfono: separada de las orillas y casi de alto completo (la barra está abajo o es de MUI arriba: la hoja la tapa)\n        [theme.breakpoints.down('md')]: {\n            top: `calc(env(safe-area-inset-top) + ${SHEET_PHONE_TOP_PIXELS}px)`,\n            bottom: `calc(env(safe-area-inset-bottom) + ${SHEET_GAP_PIXELS}px)`,\n            width: `calc(100% - ${SHEET_GAP_PIXELS * 2}px)`,\n        },\n    };\n}\n\n/**\n * La animación de la hoja: entra desde abajo y sale por donde entró.\n *\n * @param {object} props lo que MUI le pasa a la animación de un diálogo (si está abierto, su contenido, sus tiempos)\n */\nfunction SlideUp(props) {\n    return <Slide direction=\"up\" {...props} />;\n}\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} props.children\n */\nexport default function ContentDialog({open, onClose, title, children}) {\n    const {t} = useToolkitTranslation('common');\n    const titleId = useId();\n\n    return (\n        <Dialog open={open} onClose={onClose} aria-labelledby={titleId} fullScreen\n                slots={{transition: SlideUp}} slotProps={{paper: {sx: sheetSxOf}}}>\n            <Box sx={{\n                display: 'flex', alignItems: 'center', gap: 2, flexShrink: 0, minHeight: 60, pl: {xs: 2.5, md: 4}, pr: {xs: 1.5, md: 2}, py: 1,\n                borderBottom: 1, borderColor: 'divider',\n            }}>\n                <Typography id={titleId} variant=\"h6\" component=\"h2\" sx={{flex: 1, minWidth: 0}}>{title}</Typography>\n                {/* la X de Apple: en un círculo gris tenue, no suelta */}\n                <IconButton onClick={onClose} aria-label={t('actions.close')} size=\"small\"\n                            sx={{bgcolor: 'action.hover', '&:hover': {bgcolor: 'action.selected'}}}>\n                    <CloseIcon fontSize=\"small\" />\n                </IconButton>\n            </Box>\n            <Box sx={{flex: 1, minHeight: 0, overflow: 'auto', px: {xs: 2.5, md: 4}, py: {xs: 2, md: 3}}}>\n                {children}\n            </Box>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA8BA,MAAM,yBAAyB;AAC/B,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAU5B,SAAS,UAAU,OAAO;AACtB,QAAM,WAAW,MAAM,QAAQ,OAAO;AACtC,SAAO;AAAA,IACH,UAAU;AAAA,IACV,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,cAAc,GAAG,mBAAmB;AAAA;AAAA,IAEpC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,iBAAiB,QAAQ,WAAW;AAAA,IACpC,iBAAiB;AAAA,IACjB,WAAW,aAAa,QAAQ,OAAO;AAAA;AAAA,IAEvC,GAAG,MAAM,YAAY,QAAQ,EAAC,iBAAiB,sBAAsB,QAAQ,WAAW,KAAK,cAAA,CAAc;AAAA;AAAA,IAE3G,KAAK,QAAQ,cAAc,MAAM,gBAAgB;AAAA,IACjD,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,OAAO,OAAO,sBAAsB,mBAAmB,mBAAmB,CAAC;AAAA,IAC3E,UAAU;AAAA;AAAA,IAEV,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,MAC5B,KAAK,mCAAmC,sBAAsB;AAAA,MAC9D,QAAQ,sCAAsC,gBAAgB;AAAA,MAC9D,OAAO,eAAe,mBAAmB,CAAC;AAAA,IAAA;AAAA,EAC9C;AAER;AAOA,SAAS,QAAQ,OAAO;AACpB,SAAO,oBAAC,OAAA,EAAM,WAAU,MAAM,GAAG,OAAO;AAC5C;AASA,SAAwB,cAAc,EAAC,MAAM,SAAS,OAAO,YAAW;AACpE,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,UAAU,MAAA;AAEhB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAO;AAAA,MAAY;AAAA,MAAkB,mBAAiB;AAAA,MAAS,YAAU;AAAA,MAClE,OAAO,EAAC,YAAY,QAAA;AAAA,MAAU,WAAW,EAAC,OAAO,EAAC,IAAI,YAAS;AAAA,MACnE,UAAA;AAAA,QAAA,qBAAC,OAAI,IAAI;AAAA,UACL,SAAS;AAAA,UAAQ,YAAY;AAAA,UAAU,KAAK;AAAA,UAAG,YAAY;AAAA,UAAG,WAAW;AAAA,UAAI,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,UAAI,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,UAAI,IAAI;AAAA,UAC7H,cAAc;AAAA,UAAG,aAAa;AAAA,QAAA,GAE9B,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,IAAI,SAAS,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAC,MAAM,GAAG,UAAU,KAAK,UAAA,OAAM;AAAA,UAExF;AAAA,YAAC;AAAA,YAAA;AAAA,cAAW,SAAS;AAAA,cAAS,cAAY,EAAE,eAAe;AAAA,cAAG,MAAK;AAAA,cACvD,IAAI,EAAC,SAAS,gBAAgB,WAAW,EAAC,SAAS,oBAAiB;AAAA,cAC5E,UAAA,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC,GACJ;AAAA,QACA,oBAAC,KAAA,EAAI,IAAI,EAAC,MAAM,GAAG,WAAW,GAAG,UAAU,QAAQ,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA,GAAI,IAAI,EAAC,IAAI,GAAG,IAAI,EAAA,EAAC,GACrF,SAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"ContentDialog.js","sources":["../../../src/ui/layout/ContentDialog.jsx"],"sourcesContent":["// Diálogo de contenido: la «hoja de lectura» (la «page sheet» de Apple) para una vista grande que se lee, como un historial\n// con su tabla. Las confirmaciones y los formularios cortos siguen en su recuadro al centro (ConfirmDialog): esto es para\n// leer, no para contestar una pregunta.\n//\n// Cómo se ve, como en el iPad y en la Mac: una hoja SÓLIDA (para leer no va vidrio) con esquinas redondas, que sube desde\n// abajo; en escritorio centrada, de un ancho que se lee cómodo (SHEET_MAX_WIDTH_PIXELS) y debajo de la barra de arriba, que se\n// queda a la vista (atenuada) para no perder dónde se está; en el teléfono, separada de las orillas y casi de alto completo.\n// Antes ocupaba la pantalla de orilla a orilla: un rectángulo gris plano con renglones larguísimos (lo reportaron).\n//\n// Cómo se arma: un encabezado que no se mueve (el título y la X para cerrar) y un cuerpo que se desliza si no cabe.\n//\n// OJO: el alto de la barra superior no es fijo (con un aviso adentro mide más): se usa el que publica el layout\n// (APP_BAR_HEIGHT), no un número.\n//\n// Solo abre una vista: se cierra con la X, con Escape o con un clic afuera, sin confirmación.\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 {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Dialog from '@mui/material/Dialog';\nimport IconButton from '@mui/material/IconButton';\nimport Slide from '@mui/material/Slide';\nimport Typography from '@mui/material/Typography';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {APP_BAR_HEIGHT} from '@/ui/layout/appBarHeight.js';\n\n// la hoja: lo ancho máximo en escritorio (un texto de 16 px se lee cómodo y cabe una tabla), su separación de las orillas y\n// la de su encabezado\nconst SHEET_MAX_WIDTH_PIXELS = 880;\nconst SHEET_GAP_PIXELS = 8;\nconst SHEET_PHONE_TOP_PIXELS = 24;\nconst SHEET_RADIUS_PIXELS = 20;\n\n/**\n * La hoja: fija a la ventana y centrada. Va como diálogo fullScreen (así el vidrio del tema la deja sólida y el fondo de\n * atrás no se desenfoca: la barra se sigue leyendo), con su tamaño y sus esquinas propios.\n * OJO: el alto del fullScreen de MUI es 100 %, que con top y bottom se saldría por abajo: va 'auto'.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction sheetSxOf(theme) {\n    const palette = (theme.vars ?? theme).palette;\n    return {\n        position: 'fixed',\n        m: 0,\n        height: 'auto',\n        maxHeight: 'none',\n        borderRadius: `${SHEET_RADIUS_PIXELS}px`,\n        // el que se desliza es el cuerpo, no la hoja: así el encabezado se queda quieto\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        backgroundColor: palette.background.paper,\n        backgroundImage: 'none',\n        boxShadow: `0 0 0 1px ${palette.divider}, 0 24px 64px rgba(0, 0, 0, 0.28)`,\n        // en oscuro, un poco más clara que lo de atrás: lo que va al frente se aclara (HIG «Dark Mode»)\n        ...theme.applyStyles('dark', {backgroundColor: `color-mix(in srgb, ${palette.background.paper}, white 6%)`}),\n        // escritorio: centrada, debajo de la barra\n        top: `calc(${APP_BAR_HEIGHT} + ${SHEET_GAP_PIXELS}px)`,\n        bottom: SHEET_GAP_PIXELS,\n        left: 0,\n        right: 0,\n        mx: 'auto',\n        width: `min(${SHEET_MAX_WIDTH_PIXELS}px, calc(100% - ${SHEET_GAP_PIXELS * 4}px))`,\n        maxWidth: 'none',\n        // teléfono: separada de las orillas y casi de alto completo (la barra está abajo o es de MUI arriba: la hoja la tapa)\n        [theme.breakpoints.down('md')]: {\n            top: `calc(env(safe-area-inset-top) + ${SHEET_PHONE_TOP_PIXELS}px)`,\n            bottom: `calc(env(safe-area-inset-bottom) + ${SHEET_GAP_PIXELS}px)`,\n            width: `calc(100% - ${SHEET_GAP_PIXELS * 2}px)`,\n        },\n    };\n}\n\n/**\n * La animación de la hoja: entra desde abajo y sale por donde entró.\n *\n * @param {object} props lo que MUI le pasa a la animación de un diálogo (si está abierto, su contenido, sus tiempos)\n */\nfunction SlideUp(props) {\n    return <Slide direction=\"up\" {...props} />;\n}\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} props.children\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function ContentDialog({open, onClose, title, children, texts}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const titleId = useId();\n\n    return (\n        <Dialog open={open} onClose={onClose} aria-labelledby={titleId} fullScreen\n                slots={{transition: SlideUp}} slotProps={{paper: {sx: sheetSxOf}}}>\n            <Box sx={{\n                display: 'flex', alignItems: 'center', gap: 2, flexShrink: 0, minHeight: 60, pl: {xs: 2.5, md: 4}, pr: {xs: 1.5, md: 2}, py: 1,\n                borderBottom: 1, borderColor: 'divider',\n            }}>\n                <Typography id={titleId} variant=\"h6\" component=\"h2\" sx={{flex: 1, minWidth: 0}}>{title}</Typography>\n                {/* la X de Apple: en un círculo gris tenue, no suelta */}\n                <IconButton onClick={onClose} aria-label={t('actions.close')} size=\"small\"\n                            sx={{bgcolor: 'action.hover', '&:hover': {bgcolor: 'action.selected'}}}>\n                    <CloseIcon fontSize=\"small\" />\n                </IconButton>\n            </Box>\n            <Box sx={{flex: 1, minHeight: 0, overflow: 'auto', px: {xs: 2.5, md: 4}, py: {xs: 2, md: 3}}}>\n                {children}\n            </Box>\n        </Dialog>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA8BA,MAAM,yBAAyB;AAC/B,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAU5B,SAAS,UAAU,OAAO;AACtB,QAAM,WAAW,MAAM,QAAQ,OAAO;AACtC,SAAO;AAAA,IACH,UAAU;AAAA,IACV,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,cAAc,GAAG,mBAAmB;AAAA;AAAA,IAEpC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,iBAAiB,QAAQ,WAAW;AAAA,IACpC,iBAAiB;AAAA,IACjB,WAAW,aAAa,QAAQ,OAAO;AAAA;AAAA,IAEvC,GAAG,MAAM,YAAY,QAAQ,EAAC,iBAAiB,sBAAsB,QAAQ,WAAW,KAAK,cAAA,CAAc;AAAA;AAAA,IAE3G,KAAK,QAAQ,cAAc,MAAM,gBAAgB;AAAA,IACjD,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,OAAO,OAAO,sBAAsB,mBAAmB,mBAAmB,CAAC;AAAA,IAC3E,UAAU;AAAA;AAAA,IAEV,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,MAC5B,KAAK,mCAAmC,sBAAsB;AAAA,MAC9D,QAAQ,sCAAsC,gBAAgB;AAAA,MAC9D,OAAO,eAAe,mBAAmB,CAAC;AAAA,IAAA;AAAA,EAC9C;AAER;AAOA,SAAS,QAAQ,OAAO;AACpB,SAAO,oBAAC,OAAA,EAAM,WAAU,MAAM,GAAG,OAAO;AAC5C;AAUA,SAAwB,cAAc,EAAC,MAAM,SAAS,OAAO,UAAU,SAAQ;AAC3E,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,UAAU,MAAA;AAEhB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAO;AAAA,MAAY;AAAA,MAAkB,mBAAiB;AAAA,MAAS,YAAU;AAAA,MAClE,OAAO,EAAC,YAAY,QAAA;AAAA,MAAU,WAAW,EAAC,OAAO,EAAC,IAAI,YAAS;AAAA,MACnE,UAAA;AAAA,QAAA,qBAAC,OAAI,IAAI;AAAA,UACL,SAAS;AAAA,UAAQ,YAAY;AAAA,UAAU,KAAK;AAAA,UAAG,YAAY;AAAA,UAAG,WAAW;AAAA,UAAI,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,UAAI,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,UAAI,IAAI;AAAA,UAC7H,cAAc;AAAA,UAAG,aAAa;AAAA,QAAA,GAE9B,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,IAAI,SAAS,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAC,MAAM,GAAG,UAAU,KAAK,UAAA,OAAM;AAAA,UAExF;AAAA,YAAC;AAAA,YAAA;AAAA,cAAW,SAAS;AAAA,cAAS,cAAY,EAAE,eAAe;AAAA,cAAG,MAAK;AAAA,cACvD,IAAI,EAAC,SAAS,gBAAgB,WAAW,EAAC,SAAS,oBAAiB;AAAA,cAC5E,UAAA,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAChC,GACJ;AAAA,QACA,oBAAC,KAAA,EAAI,IAAI,EAAC,MAAM,GAAG,WAAW,GAAG,UAAU,QAAQ,IAAI,EAAC,IAAI,KAAK,IAAI,EAAA,GAAI,IAAI,EAAC,IAAI,GAAG,IAAI,EAAA,EAAC,GACrF,SAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/ui/layout/ErrorPage.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
 import Button from "@mui/material/Button";
@@ -18,18 +18,32 @@ const ERROR_PAGE_LOOK = Object.freeze({
   [ERROR_PAGE_KIND.newVersion]: { Icon: SystemUpdateAltRoundedIcon, color: "info", httpStatus: null, retryKey: "reload" }
 });
 const ICON_PIXELS = 56;
-function ErrorPage({ kind, title, text, homePath = "/", onRetry }) {
-  const { t } = useToolkitTranslation("errorPage");
+function ErrorPage({
+  kind,
+  title,
+  text,
+  homePath = "/",
+  onRetry,
+  onGoHome,
+  extraActions,
+  actions,
+  icon,
+  children,
+  texts
+}) {
+  const { t } = useToolkitTranslation("errorPage", texts);
   const { Link } = useToolkitNavigation();
   const look = ERROR_PAGE_LOOK[kind] ?? ERROR_PAGE_LOOK[ERROR_PAGE_KIND.serverError];
   return /* @__PURE__ */ jsxs(Stack, { spacing: 2, sx: { alignItems: "center", textAlign: "center", py: { xs: 6, md: 10 }, px: 2, maxWidth: 560, mx: "auto" }, children: [
-    /* @__PURE__ */ jsx(look.Icon, { color: look.color, sx: { fontSize: ICON_PIXELS } }),
+    icon ?? /* @__PURE__ */ jsx(look.Icon, { color: look.color, sx: { fontSize: ICON_PIXELS } }),
     /* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h1", children: title ?? t(`${kind}.title`) }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: text ?? t(`${kind}.text`) }),
-    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1.5, sx: { pt: 1 }, children: [
+    children,
+    /* @__PURE__ */ jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1.5, useFlexGap: true, sx: { pt: 1, flexWrap: "wrap", justifyContent: "center" }, children: actions ?? /* @__PURE__ */ jsxs(Fragment, { children: [
       onRetry && /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: onRetry, children: t(look.retryKey ?? "retry") }),
-      /* @__PURE__ */ jsx(Button, { variant: onRetry ? "outlined" : "contained", component: Link, to: homePath, children: t("goHome") })
-    ] }),
+      /* @__PURE__ */ jsx(Button, { variant: onRetry ? "outlined" : "contained", component: Link, to: homePath, onClick: onGoHome, children: t("goHome") }),
+      extraActions
+    ] }) }),
     look.httpStatus && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", children: look.httpStatus })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorPage.js","sources":["../../../src/ui/layout/ErrorPage.jsx"],"sourcesContent":["// La pantalla de un error de navegación: la página no existe (404), no tiene permiso (403) o algo falló (500). Dice en\n// palabras normales qué pasó y qué hacer, con el número chico abajo como referencia técnica, y el botón para salir de ahí.\n//\n//   <ErrorPage kind={ERROR_PAGE_KIND.notFound} />                       el 404 del router (ruta '*')\n//   <ErrorPage kind={ERROR_PAGE_KIND.serverError} onRetry={reload} />   la pantalla tronó (errorElement del router)\n//   <ErrorPage kind={ERROR_PAGE_KIND.newVersion} onRetry={reload} />    se publicó otra versión con la pestaña abierta\n//\n// Los textos salen del paquete (namespace errorPage) en el idioma activo; title y text los cambian para un caso propio.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';\nimport LockOutlinedIcon from '@mui/icons-material/LockOutlined';\nimport SystemUpdateAltRoundedIcon from '@mui/icons-material/SystemUpdateAltRounded';\nimport TravelExploreOutlinedIcon from '@mui/icons-material/TravelExploreOutlined';\n\n/** Los errores que tiene pantalla propia. */\nexport const ERROR_PAGE_KIND = Object.freeze({notFound: 'notFound', forbidden: 'forbidden', serverError: 'serverError', newVersion: 'newVersion'});\n\n// el ícono, el color y el código HTTP de cada uno (el código va chico: es la referencia técnica, no el mensaje)\nconst ERROR_PAGE_LOOK = Object.freeze({\n    [ERROR_PAGE_KIND.notFound]: {Icon: TravelExploreOutlinedIcon, color: 'info', httpStatus: 404},\n    [ERROR_PAGE_KIND.forbidden]: {Icon: LockOutlinedIcon, color: 'warning', httpStatus: 403},\n    [ERROR_PAGE_KIND.serverError]: {Icon: ErrorOutlineOutlinedIcon, color: 'error', httpStatus: 500},\n    // no es un error de nadie: se publicó otra versión; sin código, y el botón dice «Recargar»\n    [ERROR_PAGE_KIND.newVersion]: {Icon: SystemUpdateAltRoundedIcon, color: 'info', httpStatus: null, retryKey: 'reload'},\n});\nconst ICON_PIXELS = 56;\n\n/**\n * @param {object} props\n * @param {string} props.kind uno de ERROR_PAGE_KIND\n * @param {string} [props.title] ya traducido; por omisión el del paquete\n * @param {import('react').ReactNode} [props.text] ya traducido; por omisión el del paquete\n * @param {string} [props.homePath] a dónde lleva «Ir al inicio» (por omisión '/')\n * @param {() => void} [props.onRetry] con él sale «Intentar de nuevo»\n */\nexport default function ErrorPage({kind, title, text, homePath = '/', onRetry}) {\n    const {t} = useToolkitTranslation('errorPage');\n    const {Link} = useToolkitNavigation();\n    const look = ERROR_PAGE_LOOK[kind] ?? ERROR_PAGE_LOOK[ERROR_PAGE_KIND.serverError];\n\n    return (\n        <Stack spacing={2} sx={{alignItems: 'center', textAlign: 'center', py: {xs: 6, md: 10}, px: 2, maxWidth: 560, mx: 'auto'}}>\n            <look.Icon color={look.color} sx={{fontSize: ICON_PIXELS}} />\n            <Typography variant=\"h4\" component=\"h1\">{title ?? t(`${kind}.title`)}</Typography>\n            <Typography variant=\"body1\" color=\"text.secondary\">{text ?? t(`${kind}.text`)}</Typography>\n            <Stack direction={{xs: 'column', sm: 'row'}} spacing={1.5} sx={{pt: 1}}>\n                {onRetry && <Button variant=\"contained\" onClick={onRetry}>{t(look.retryKey ?? 'retry')}</Button>}\n                <Button variant={onRetry ? 'outlined' : 'contained'} component={Link} to={homePath}>{t('goHome')}</Button>\n            </Stack>\n            {look.httpStatus && <Typography variant=\"caption\" color=\"text.disabled\">{look.httpStatus}</Typography>}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAqBO,MAAM,kBAAkB,OAAO,OAAO,EAAC,UAAU,YAAY,WAAW,aAAa,aAAa,eAAe,YAAY,aAAA,CAAa;AAGjJ,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,CAAC,gBAAgB,QAAQ,GAAG,EAAC,MAAM,2BAA2B,OAAO,QAAQ,YAAY,IAAA;AAAA,EACzF,CAAC,gBAAgB,SAAS,GAAG,EAAC,MAAM,kBAAkB,OAAO,WAAW,YAAY,IAAA;AAAA,EACpF,CAAC,gBAAgB,WAAW,GAAG,EAAC,MAAM,0BAA0B,OAAO,SAAS,YAAY,IAAA;AAAA;AAAA,EAE5F,CAAC,gBAAgB,UAAU,GAAG,EAAC,MAAM,4BAA4B,OAAO,QAAQ,YAAY,MAAM,UAAU,SAAA;AAChH,CAAC;AACD,MAAM,cAAc;AAUpB,SAAwB,UAAU,EAAC,MAAM,OAAO,MAAM,WAAW,KAAK,WAAU;AAC5E,QAAM,EAAC,EAAA,IAAK,sBAAsB,WAAW;AAC7C,QAAM,EAAC,KAAA,IAAQ,qBAAA;AACf,QAAM,OAAO,gBAAgB,IAAI,KAAK,gBAAgB,gBAAgB,WAAW;AAEjF,SACI,qBAAC,SAAM,SAAS,GAAG,IAAI,EAAC,YAAY,UAAU,WAAW,UAAU,IAAI,EAAC,IAAI,GAAG,IAAI,GAAA,GAAK,IAAI,GAAG,UAAU,KAAK,IAAI,OAAA,GAC9G,UAAA;AAAA,IAAA,oBAAC,KAAK,MAAL,EAAU,OAAO,KAAK,OAAO,IAAI,EAAC,UAAU,YAAA,EAAW,CAAG;AAAA,IAC3D,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAM,UAAA,SAAS,EAAE,GAAG,IAAI,QAAQ,EAAA,CAAE;AAAA,IACrE,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,QAAQ,EAAE,GAAG,IAAI,OAAO,EAAA,CAAE;AAAA,IAC9E,qBAAC,OAAA,EAAM,WAAW,EAAC,IAAI,UAAU,IAAI,MAAA,GAAQ,SAAS,KAAK,IAAI,EAAC,IAAI,KAC/D,UAAA;AAAA,MAAA,WAAW,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,SAAU,UAAA,EAAE,KAAK,YAAY,OAAO,EAAA,CAAE;AAAA,MACvF,oBAAC,QAAA,EAAO,SAAS,UAAU,aAAa,aAAa,WAAW,MAAM,IAAI,UAAW,UAAA,EAAE,QAAQ,EAAA,CAAE;AAAA,IAAA,GACrG;AAAA,IACC,KAAK,cAAc,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,iBAAiB,UAAA,KAAK,WAAA,CAAW;AAAA,EAAA,GAC7F;AAER;"}
+{"version":3,"file":"ErrorPage.js","sources":["../../../src/ui/layout/ErrorPage.jsx"],"sourcesContent":["// La pantalla de un error de navegación: la página no existe (404), no tiene permiso (403) o algo falló (500). Dice en\n// palabras normales qué pasó y qué hacer, con el número chico abajo como referencia técnica, y el botón para salir de ahí.\n//\n//   <ErrorPage kind={ERROR_PAGE_KIND.notFound} />                       el 404 del router (ruta '*')\n//   <ErrorPage kind={ERROR_PAGE_KIND.serverError} onRetry={reload} />   la pantalla tronó (errorElement del router)\n//   <ErrorPage kind={ERROR_PAGE_KIND.newVersion} onRetry={reload} />    se publicó otra versión con la pestaña abierta\n//\n// Los textos salen del paquete (namespace errorPage) en el idioma activo; title y text los cambian para un caso propio, y\n// `texts` cualquier otro («Ir al inicio», «Intentar de nuevo»).\n//\n// Se extiende sin tocar el framework: botones suyos junto a los de la casa (extraActions: «Contactar a soporte») o en lugar\n// de ellos (actions), algo debajo del texto (children: el teléfono de soporte, un folio), otro ícono (icon) y el evento de\n// «Ir al inicio» (onGoHome). La de «sin permiso» de las rutas se cambia con withAccess(…, {fallback}) y la de error de ruta\n// pasándole estas mismas props a RouteErrorScreen (/react-router).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';\nimport LockOutlinedIcon from '@mui/icons-material/LockOutlined';\nimport SystemUpdateAltRoundedIcon from '@mui/icons-material/SystemUpdateAltRounded';\nimport TravelExploreOutlinedIcon from '@mui/icons-material/TravelExploreOutlined';\n\n/** Los errores que tiene pantalla propia. */\nexport const ERROR_PAGE_KIND = Object.freeze({notFound: 'notFound', forbidden: 'forbidden', serverError: 'serverError', newVersion: 'newVersion'});\n\n// el ícono, el color y el código HTTP de cada uno (el código va chico: es la referencia técnica, no el mensaje)\nconst ERROR_PAGE_LOOK = Object.freeze({\n    [ERROR_PAGE_KIND.notFound]: {Icon: TravelExploreOutlinedIcon, color: 'info', httpStatus: 404},\n    [ERROR_PAGE_KIND.forbidden]: {Icon: LockOutlinedIcon, color: 'warning', httpStatus: 403},\n    [ERROR_PAGE_KIND.serverError]: {Icon: ErrorOutlineOutlinedIcon, color: 'error', httpStatus: 500},\n    // no es un error de nadie: se publicó otra versión; sin código, y el botón dice «Recargar»\n    [ERROR_PAGE_KIND.newVersion]: {Icon: SystemUpdateAltRoundedIcon, color: 'info', httpStatus: null, retryKey: 'reload'},\n});\nconst ICON_PIXELS = 56;\n\n/**\n * @param {object} props\n * @param {string} props.kind uno de ERROR_PAGE_KIND\n * @param {string} [props.title] ya traducido; por omisión el del paquete\n * @param {import('react').ReactNode} [props.text] ya traducido; por omisión el del paquete\n * @param {string} [props.homePath] a dónde lleva «Ir al inicio» (por omisión '/')\n * @param {() => void} [props.onRetry] con él sale «Intentar de nuevo»\n * @param {() => void} [props.onGoHome] al picar «Ir al inicio», antes de ir (para avisar o limpiar algo)\n * @param {import('react').ReactNode} [props.extraActions] botones suyos junto a los de la casa\n * @param {import('react').ReactNode} [props.actions] botones suyos EN LUGAR de los de la casa\n * @param {import('react').ReactNode} [props.icon] otro ícono; por omisión el de cada error\n * @param {import('react').ReactNode} [props.children] algo debajo del texto (el teléfono de soporte, un folio)\n * @param {object} [props.texts] los textos que cambian, con la forma de `errorPage` en los textos del paquete:\n *     {goHome: 'Volver al tablero', notFound: {title: '…'}}\n */\nexport default function ErrorPage({\n    kind, title, text, homePath = '/', onRetry, onGoHome, extraActions, actions, icon, children, texts,\n}) {\n    const {t} = useToolkitTranslation('errorPage', texts);\n    const {Link} = useToolkitNavigation();\n    const look = ERROR_PAGE_LOOK[kind] ?? ERROR_PAGE_LOOK[ERROR_PAGE_KIND.serverError];\n\n    return (\n        <Stack spacing={2} sx={{alignItems: 'center', textAlign: 'center', py: {xs: 6, md: 10}, px: 2, maxWidth: 560, mx: 'auto'}}>\n            {icon ?? <look.Icon color={look.color} sx={{fontSize: ICON_PIXELS}} />}\n            <Typography variant=\"h4\" component=\"h1\">{title ?? t(`${kind}.title`)}</Typography>\n            <Typography variant=\"body1\" color=\"text.secondary\">{text ?? t(`${kind}.text`)}</Typography>\n            {children}\n            <Stack direction={{xs: 'column', sm: 'row'}} spacing={1.5} useFlexGap sx={{pt: 1, flexWrap: 'wrap', justifyContent: 'center'}}>\n                {actions ?? (\n                    <>\n                        {onRetry && <Button variant=\"contained\" onClick={onRetry}>{t(look.retryKey ?? 'retry')}</Button>}\n                        <Button variant={onRetry ? 'outlined' : 'contained'} component={Link} to={homePath} onClick={onGoHome}>{t('goHome')}</Button>\n                        {extraActions}\n                    </>\n                )}\n            </Stack>\n            {look.httpStatus && <Typography variant=\"caption\" color=\"text.disabled\">{look.httpStatus}</Typography>}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AA2BO,MAAM,kBAAkB,OAAO,OAAO,EAAC,UAAU,YAAY,WAAW,aAAa,aAAa,eAAe,YAAY,aAAA,CAAa;AAGjJ,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,CAAC,gBAAgB,QAAQ,GAAG,EAAC,MAAM,2BAA2B,OAAO,QAAQ,YAAY,IAAA;AAAA,EACzF,CAAC,gBAAgB,SAAS,GAAG,EAAC,MAAM,kBAAkB,OAAO,WAAW,YAAY,IAAA;AAAA,EACpF,CAAC,gBAAgB,WAAW,GAAG,EAAC,MAAM,0BAA0B,OAAO,SAAS,YAAY,IAAA;AAAA;AAAA,EAE5F,CAAC,gBAAgB,UAAU,GAAG,EAAC,MAAM,4BAA4B,OAAO,QAAQ,YAAY,MAAM,UAAU,SAAA;AAChH,CAAC;AACD,MAAM,cAAc;AAiBpB,SAAwB,UAAU;AAAA,EAC9B;AAAA,EAAM;AAAA,EAAO;AAAA,EAAM,WAAW;AAAA,EAAK;AAAA,EAAS;AAAA,EAAU;AAAA,EAAc;AAAA,EAAS;AAAA,EAAM;AAAA,EAAU;AACjG,GAAG;AACC,QAAM,EAAC,EAAA,IAAK,sBAAsB,aAAa,KAAK;AACpD,QAAM,EAAC,KAAA,IAAQ,qBAAA;AACf,QAAM,OAAO,gBAAgB,IAAI,KAAK,gBAAgB,gBAAgB,WAAW;AAEjF,SACI,qBAAC,SAAM,SAAS,GAAG,IAAI,EAAC,YAAY,UAAU,WAAW,UAAU,IAAI,EAAC,IAAI,GAAG,IAAI,GAAA,GAAK,IAAI,GAAG,UAAU,KAAK,IAAI,OAAA,GAC7G,UAAA;AAAA,IAAA,QAAQ,oBAAC,KAAK,MAAL,EAAU,OAAO,KAAK,OAAO,IAAI,EAAC,UAAU,YAAA,EAAW,CAAG;AAAA,IACpE,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAM,UAAA,SAAS,EAAE,GAAG,IAAI,QAAQ,EAAA,CAAE;AAAA,IACrE,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAkB,UAAA,QAAQ,EAAE,GAAG,IAAI,OAAO,EAAA,CAAE;AAAA,IAC7E;AAAA,IACD,oBAAC,SAAM,WAAW,EAAC,IAAI,UAAU,IAAI,MAAA,GAAQ,SAAS,KAAK,YAAU,MAAC,IAAI,EAAC,IAAI,GAAG,UAAU,QAAQ,gBAAgB,YAC/G,UAAA,WACG,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA,WAAW,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,SAAU,UAAA,EAAE,KAAK,YAAY,OAAO,EAAA,CAAE;AAAA,MACvF,oBAAC,QAAA,EAAO,SAAS,UAAU,aAAa,aAAa,WAAW,MAAM,IAAI,UAAU,SAAS,UAAW,UAAA,EAAE,QAAQ,GAAE;AAAA,MACnH;AAAA,IAAA,EAAA,CACL,EAAA,CAER;AAAA,IACC,KAAK,cAAc,oBAAC,YAAA,EAAW,SAAQ,WAAU,OAAM,iBAAiB,UAAA,KAAK,WAAA,CAAW;AAAA,EAAA,GAC7F;AAER;"}

package/dist/ui/layout/FullPageLoader.js

@@ -3,8 +3,8 @@ import { jsx } from "react/jsx-runtime";
 import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
-function FullPageLoader() {
-  const { t } = useToolkitTranslation("common");
+function FullPageLoader({ texts } = {}) {
+  const { t } = useToolkitTranslation("common", texts);
   return /* @__PURE__ */ jsx(Box, { role: "status", "aria-live": "polite", sx: { display: "grid", placeItems: "center", minHeight: "100vh", bgcolor: "background.default" }, children: /* @__PURE__ */ jsx(CircularProgress, { "aria-label": t("status.loading") }) });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"FullPageLoader.js","sources":["../../../src/ui/layout/FullPageLoader.jsx"],"sourcesContent":["// Indicador de carga a pantalla completa, mientras se sabe si hay sesión.\n// Sin él, el formulario de login parpadea medio segundo antes de que aparezca la pantalla de quien ya entró.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress';\n\nexport default function FullPageLoader() {\n    const {t} = useToolkitTranslation('common');\n\n    return (\n        <Box role=\"status\" aria-live=\"polite\" sx={{display: 'grid', placeItems: 'center', minHeight: '100vh', bgcolor: 'background.default'}}>\n            <CircularProgress aria-label={t('status.loading')} />\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;AAQA,SAAwB,iBAAiB;AACrC,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAE1C,SACI,oBAAC,OAAI,MAAK,UAAS,aAAU,UAAS,IAAI,EAAC,SAAS,QAAQ,YAAY,UAAU,WAAW,SAAS,SAAS,qBAAA,GAC3G,UAAA,oBAAC,oBAAiB,cAAY,EAAE,gBAAgB,EAAA,CAAG,EAAA,CACvD;AAER;"}
+{"version":3,"file":"FullPageLoader.js","sources":["../../../src/ui/layout/FullPageLoader.jsx"],"sourcesContent":["// Indicador de carga a pantalla completa, mientras se sabe si hay sesión.\n// Sin él, el formulario de login parpadea medio segundo antes de que aparezca la pantalla de quien ya entró.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress';\n\n/**\n * @param {object} [props]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FullPageLoader({texts} = {}) {\n    const {t} = useToolkitTranslation('common', texts);\n\n    return (\n        <Box role=\"status\" aria-live=\"polite\" sx={{display: 'grid', placeItems: 'center', minHeight: '100vh', bgcolor: 'background.default'}}>\n            <CircularProgress aria-label={t('status.loading')} />\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;AAYA,SAAwB,eAAe,EAAC,MAAA,IAAS,IAAI;AACjD,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AAEjD,SACI,oBAAC,OAAI,MAAK,UAAS,aAAU,UAAS,IAAI,EAAC,SAAS,QAAQ,YAAY,UAAU,WAAW,SAAS,SAAS,qBAAA,GAC3G,UAAA,oBAAC,oBAAiB,cAAY,EAAE,gBAAgB,EAAA,CAAG,EAAA,CACvD;AAER;"}

package/dist/ui/layout/PageHeading.js

@@ -15,8 +15,8 @@ import { menuBreadcrumbsOf } from "../../navigation/appMenu.js";
 import PageBreadcrumbs from "../navigation/PageBreadcrumbs.js";
 import DocumentTitle from "../navigation/DocumentTitle.js";
 const MIN_BREADCRUMBS = 2;
-function PageHeading({ title, description, breadcrumbs, actions, documentTitle }) {
-  const { t } = useToolkitTranslation("layout");
+function PageHeading({ title, description, breadcrumbs, actions, documentTitle, texts }) {
+  const { t } = useToolkitTranslation("layout", texts);
   const { useLocation } = useToolkitNavigation();
   const { pathname } = useLocation();
   const { menuItems } = useAppMenu();

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeading.js","sources":["../../../src/ui/layout/PageHeading.jsx"],"sourcesContent":["// El encabezado de una pantalla al estilo de las plantillas de MUI (y del PageContainer de walk-ot): las migas arriba, el\n// título a la izquierda con los botones a la derecha, y una descripción corta abajo.\n//\n// Las migas salen SOLAS del menú de AppLayout (Inicio › Sección › Pantalla): la página no las escribe. Una pantalla que\n// no está en el menú (un detalle) pasa las suyas con `breadcrumbs`; breadcrumbs={false} las quita.\n// El título sube a la barra de AppLayout cuando sale de la vista al deslizar, y también es el título de la pestaña.\n// Con la barra en cápsulas, sus `actions` van a la barra en su propia cápsula (BarActions), como las barras de\n// herramientas de macOS; en el teléfono, y con la franja, se quedan aquí (con la franja, para no mover pantallas que ya\n// existen: quien las quiera en la franja usa BarActions).\n//\n// Cuál usar: PageHeading en las pantallas de trabajo (listas, formularios, tableros); PageHeader (centrado) en una\n// portada; DetailHeader en el detalle de un registro (título con sus insignias de estatus).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useAppMenu} from '@/appShell/appMenuContext.js';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {useBarActionsSlot} from '@/appShell/barActionsSlot.js';\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {menuBreadcrumbsOf} from '@/navigation/appMenu.js';\nimport PageBreadcrumbs from '@/ui/navigation/PageBreadcrumbs.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\n\n// con una sola miga (estar en el inicio) no se pintan: no dicen nada\nconst MIN_BREADCRUMBS = 2;\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.description]\n * @param {Array<{label: string, to?: string}>|false} [props.breadcrumbs] por omisión, las del menú\n * @param {import('react').ReactNode} [props.actions] botones a la derecha (en el teléfono, abajo y a lo ancho)\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n */\nexport default function PageHeading({title, description, breadcrumbs, actions, documentTitle}) {\n    const {t} = useToolkitTranslation('layout');\n    const {useLocation} = useToolkitNavigation();\n    const {pathname} = useLocation();\n    const {menuItems} = useAppMenu();\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    const {usesCapsules} = useBarActionsSlot();\n    // sin cápsulas: a la derecha del título y, en el teléfono, abajo y a lo ancho\n    const inlineActionsSx = {display: 'flex', gap: 1, flexWrap: 'wrap', flex: {xs: '1 1 auto', sm: '0 0 auto'}, '& > .MuiButton-root': {width: {xs: '100%', sm: 'auto'}}};\n    // con cápsulas suben a la barra (escritorio) o flotan arriba (teléfono). Si no hay dónde (la barra fundida al menú), la\n    // cápsula de solo íconos se queda a la derecha del título, en el mismo renglón; el título se parte si no cabe\n    const isActionsCapsule = Boolean(actions) && usesCapsules;\n\n    const crumbs = breadcrumbs === false\n        ? []\n        : breadcrumbs ?? menuBreadcrumbsOf(menuItems, pathname).map((menuItem) => ({label: menuItemLabelOf(menuItem, t), to: menuItem.to}));\n\n    return (\n        <Box component=\"header\" sx={{mb: 3}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {crumbs.length >= MIN_BREADCRUMBS && <Box sx={{mb: 1}}><PageBreadcrumbs items={crumbs} /></Box>}\n            <Stack direction={isActionsCapsule ? 'row' : {xs: 'column', sm: 'row'}} spacing={{xs: 1.5, sm: 2}}\n                   sx={{alignItems: isActionsCapsule ? 'flex-start' : {xs: 'stretch', sm: 'flex-start'}, justifyContent: 'space-between'}}>\n                <Typography ref={titleRef} variant=\"h4\" component=\"h1\" sx={{minWidth: 0}}>{title}</Typography>\n                {isActionsCapsule && <BarActions label={title} inlineSx={{flexShrink: 0}}>{actions}</BarActions>}\n                {actions && !usesCapsules && <Box sx={inlineActionsSx}>{actions}</Box>}\n            </Stack>\n            {description && (\n                <Typography variant=\"body1\" color=\"text.secondary\" component=\"div\" sx={{mt: 0.75, maxWidth: 760}}>{description}</Typography>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BA,MAAM,kBAAkB;AAUxB,SAAwB,YAAY,EAAC,OAAO,aAAa,aAAa,SAAS,iBAAgB;AAC3F,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,EAAC,YAAA,IAAe,qBAAA;AACtB,QAAM,EAAC,SAAA,IAAY,YAAA;AACnB,QAAM,EAAC,UAAA,IAAa,WAAA;AACpB,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,QAAM,EAAC,aAAA,IAAgB,kBAAA;AAEvB,QAAM,kBAAkB,EAAC,SAAS,QAAQ,KAAK,GAAG,UAAU,QAAQ,MAAM,EAAC,IAAI,YAAY,IAAI,WAAA,GAAa,uBAAuB,EAAC,OAAO,EAAC,IAAI,QAAQ,IAAI,OAAA,IAAO;AAGnK,QAAM,mBAAmB,QAAQ,OAAO,KAAK;AAE7C,QAAM,SAAS,gBAAgB,QACzB,CAAA,IACA,eAAe,kBAAkB,WAAW,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAC,OAAO,gBAAgB,UAAU,CAAC,GAAG,IAAI,SAAS,GAAA,EAAI;AAEtI,SACI,qBAAC,OAAI,WAAU,UAAS,IAAI,EAAC,IAAI,KAC7B,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAC7C,OAAO,UAAU,mBAAmB,oBAAC,OAAI,IAAI,EAAC,IAAI,EAAA,GAAI,UAAA,oBAAC,iBAAA,EAAgB,OAAO,QAAQ,GAAE;AAAA,IACzF;AAAA,MAAC;AAAA,MAAA;AAAA,QAAM,WAAW,mBAAmB,QAAQ,EAAC,IAAI,UAAU,IAAI,MAAA;AAAA,QAAQ,SAAS,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,QACxF,IAAI,EAAC,YAAY,mBAAmB,eAAe,EAAC,IAAI,WAAW,IAAI,gBAAe,gBAAgB,gBAAA;AAAA,QACzG,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAC,UAAU,EAAA,GAAK,UAAA,OAAM;AAAA,UAChF,oBAAoB,oBAAC,YAAA,EAAW,OAAO,OAAO,UAAU,EAAC,YAAY,EAAA,GAAK,UAAA,QAAA,CAAQ;AAAA,UAClF,WAAW,CAAC,oCAAiB,KAAA,EAAI,IAAI,iBAAkB,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnE,eACG,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,OAAM,IAAI,EAAC,IAAI,MAAM,UAAU,IAAA,GAAO,UAAA,YAAA,CAAY;AAAA,EAAA,GAEvH;AAER;"}
+{"version":3,"file":"PageHeading.js","sources":["../../../src/ui/layout/PageHeading.jsx"],"sourcesContent":["// El encabezado de una pantalla al estilo de las plantillas de MUI (y del PageContainer de walk-ot): las migas arriba, el\n// título a la izquierda con los botones a la derecha, y una descripción corta abajo.\n//\n// Las migas salen SOLAS del menú de AppLayout (Inicio › Sección › Pantalla): la página no las escribe. Una pantalla que\n// no está en el menú (un detalle) pasa las suyas con `breadcrumbs`; breadcrumbs={false} las quita.\n// El título sube a la barra de AppLayout cuando sale de la vista al deslizar, y también es el título de la pestaña.\n// Con la barra en cápsulas, sus `actions` van a la barra en su propia cápsula (BarActions), como las barras de\n// herramientas de macOS; en el teléfono, y con la franja, se quedan aquí (con la franja, para no mover pantallas que ya\n// existen: quien las quiera en la franja usa BarActions).\n//\n// Cuál usar: PageHeading en las pantallas de trabajo (listas, formularios, tableros); PageHeader (centrado) en una\n// portada; DetailHeader en el detalle de un registro (título con sus insignias de estatus).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useAppMenu} from '@/appShell/appMenuContext.js';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {useBarActionsSlot} from '@/appShell/barActionsSlot.js';\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport {menuBreadcrumbsOf} from '@/navigation/appMenu.js';\nimport PageBreadcrumbs from '@/ui/navigation/PageBreadcrumbs.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\n\n// con una sola miga (estar en el inicio) no se pintan: no dicen nada\nconst MIN_BREADCRUMBS = 2;\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {import('react').ReactNode} [props.description]\n * @param {Array<{label: string, to?: string}>|false} [props.breadcrumbs] por omisión, las del menú\n * @param {import('react').ReactNode} [props.actions] botones a la derecha (en el teléfono, abajo y a lo ancho)\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function PageHeading({title, description, breadcrumbs, actions, documentTitle, texts}) {\n    const {t} = useToolkitTranslation('layout', texts);\n    const {useLocation} = useToolkitNavigation();\n    const {pathname} = useLocation();\n    const {menuItems} = useAppMenu();\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    const {usesCapsules} = useBarActionsSlot();\n    // sin cápsulas: a la derecha del título y, en el teléfono, abajo y a lo ancho\n    const inlineActionsSx = {display: 'flex', gap: 1, flexWrap: 'wrap', flex: {xs: '1 1 auto', sm: '0 0 auto'}, '& > .MuiButton-root': {width: {xs: '100%', sm: 'auto'}}};\n    // con cápsulas suben a la barra (escritorio) o flotan arriba (teléfono). Si no hay dónde (la barra fundida al menú), la\n    // cápsula de solo íconos se queda a la derecha del título, en el mismo renglón; el título se parte si no cabe\n    const isActionsCapsule = Boolean(actions) && usesCapsules;\n\n    const crumbs = breadcrumbs === false\n        ? []\n        : breadcrumbs ?? menuBreadcrumbsOf(menuItems, pathname).map((menuItem) => ({label: menuItemLabelOf(menuItem, t), to: menuItem.to}));\n\n    return (\n        <Box component=\"header\" sx={{mb: 3}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {crumbs.length >= MIN_BREADCRUMBS && <Box sx={{mb: 1}}><PageBreadcrumbs items={crumbs} /></Box>}\n            <Stack direction={isActionsCapsule ? 'row' : {xs: 'column', sm: 'row'}} spacing={{xs: 1.5, sm: 2}}\n                   sx={{alignItems: isActionsCapsule ? 'flex-start' : {xs: 'stretch', sm: 'flex-start'}, justifyContent: 'space-between'}}>\n                <Typography ref={titleRef} variant=\"h4\" component=\"h1\" sx={{minWidth: 0}}>{title}</Typography>\n                {isActionsCapsule && <BarActions label={title} inlineSx={{flexShrink: 0}}>{actions}</BarActions>}\n                {actions && !usesCapsules && <Box sx={inlineActionsSx}>{actions}</Box>}\n            </Stack>\n            {description && (\n                <Typography variant=\"body1\" color=\"text.secondary\" component=\"div\" sx={{mt: 0.75, maxWidth: 760}}>{description}</Typography>\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BA,MAAM,kBAAkB;AAWxB,SAAwB,YAAY,EAAC,OAAO,aAAa,aAAa,SAAS,eAAe,SAAQ;AAClG,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,YAAA,IAAe,qBAAA;AACtB,QAAM,EAAC,SAAA,IAAY,YAAA;AACnB,QAAM,EAAC,UAAA,IAAa,WAAA;AACpB,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,QAAM,EAAC,aAAA,IAAgB,kBAAA;AAEvB,QAAM,kBAAkB,EAAC,SAAS,QAAQ,KAAK,GAAG,UAAU,QAAQ,MAAM,EAAC,IAAI,YAAY,IAAI,WAAA,GAAa,uBAAuB,EAAC,OAAO,EAAC,IAAI,QAAQ,IAAI,OAAA,IAAO;AAGnK,QAAM,mBAAmB,QAAQ,OAAO,KAAK;AAE7C,QAAM,SAAS,gBAAgB,QACzB,CAAA,IACA,eAAe,kBAAkB,WAAW,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAC,OAAO,gBAAgB,UAAU,CAAC,GAAG,IAAI,SAAS,GAAA,EAAI;AAEtI,SACI,qBAAC,OAAI,WAAU,UAAS,IAAI,EAAC,IAAI,KAC7B,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAC7C,OAAO,UAAU,mBAAmB,oBAAC,OAAI,IAAI,EAAC,IAAI,EAAA,GAAI,UAAA,oBAAC,iBAAA,EAAgB,OAAO,QAAQ,GAAE;AAAA,IACzF;AAAA,MAAC;AAAA,MAAA;AAAA,QAAM,WAAW,mBAAmB,QAAQ,EAAC,IAAI,UAAU,IAAI,MAAA;AAAA,QAAQ,SAAS,EAAC,IAAI,KAAK,IAAI,EAAA;AAAA,QACxF,IAAI,EAAC,YAAY,mBAAmB,eAAe,EAAC,IAAI,WAAW,IAAI,gBAAe,gBAAgB,gBAAA;AAAA,QACzG,UAAA;AAAA,UAAA,oBAAC,YAAA,EAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAC,UAAU,EAAA,GAAK,UAAA,OAAM;AAAA,UAChF,oBAAoB,oBAAC,YAAA,EAAW,OAAO,OAAO,UAAU,EAAC,YAAY,EAAA,GAAK,UAAA,QAAA,CAAQ;AAAA,UAClF,WAAW,CAAC,oCAAiB,KAAA,EAAI,IAAI,iBAAkB,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnE,eACG,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,WAAU,OAAM,IAAI,EAAC,IAAI,MAAM,UAAU,IAAA,GAAO,UAAA,YAAA,CAAY;AAAA,EAAA,GAEvH;AAER;"}