@stackcraftmx/calcita 0.0.0-stage → 0.25.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusChip.js","sources":["../../../src/ui/labels/StatusChip.jsx"],"sourcesContent":["// Estatus pintado desde un diccionario (dictionaries/dictionaries.js): etiqueta, tooltip y color salen del diccionario,\n// nunca del componente que lo usa. Un valor que no está en el diccionario se pinta con su código crudo.\n//\n// Dos formas:\n//   - variant=\"dot\" (por defecto): punto de color + texto, sin fondo. Para la columna de estado de una tabla.\n//   - variant=\"chip\": Chip de MUI con contorno, para formatos, hallazgos o encabezados.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Chip from '@mui/material/Chip';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport {labelOf, lookup, shortLabelOf} from '@/dictionaries/dictionaries.js';\n\n// color del diccionario → color de texto del punto (default no existe en la paleta)\nconst DOT_COLOR_BY_TONE = {\n    success: 'success.main',\n    warning: 'warning.main',\n    error: 'error.main',\n    info: 'info.main',\n    default: 'text.disabled',\n};\n\n/**\n * @param {object} props\n * @param {Record<string, object>} props.dictionary p. ej. BATCH_STATUS\n * @param {string|null|undefined} props.value código del API\n * @param {'dot'|'chip'} [props.variant]\n * @param {boolean} [props.short] pinta la palabra corta de la entrada (shortLabelKey), para una columna angosta; el\n *     nombre completo queda en el tooltip, antes de su explicación\n * @param {string} [props.suffix] texto que va después de la etiqueta con \" · \" (p. ej. un conteo ya formateado)\n * @param {import('react').ReactNode} [props.tooltip] SUSTITUYE al tooltip del diccionario; úsalo cuando el renglón tiene algo más\n *     que decir. OJO: no envuelvas este componente en otro Tooltip, porque el suyo sigue ahí y se ven los dos encimados\n * @param {object} [props.sx] ajustes de estilo del Chip (solo variant=\"chip\")\n */\nexport default function StatusChip({dictionary, value, variant = 'dot', short = false, suffix, tooltip: customTooltip, sx}) {\n    const {t} = useToolkitTranslation('dictionaries');\n    const dictionaryEntry = lookup(dictionary, value);\n    const fullLabel = labelOf(dictionaryEntry, t);\n    const entryLabel = short ? shortLabelOf(dictionaryEntry, t) : fullLabel;\n    const label = suffix ? `${entryLabel} · ${suffix}` : entryLabel;\n    // el de quien lo usa gana: si pasa uno, el del diccionario no se pinta y no hay dos globos\n    const explanation = customTooltip ?? t(dictionaryEntry.tooltipKey, {defaultValue: ''});\n    // la palabra corta deja fuera parte del nombre: el tooltip lo dice completo y, debajo, su explicación\n    const tooltip = entryLabel === fullLabel ? explanation : (\n        <Box component=\"span\" sx={{display: 'flex', flexDirection: 'column', gap: 0.25}}>\n            <Box component=\"span\" sx={{fontWeight: 700}}>{fullLabel}</Box>\n            {explanation && <Box component=\"span\">{explanation}</Box>}\n        </Box>\n    );\n\n    const content = variant === 'chip' ? (\n        <Chip size=\"small\" label={label} color={dictionaryEntry.color} variant=\"outlined\" sx={sx} />\n    ) : (\n        <Box component=\"span\" sx={{\n            display: 'inline-flex', alignItems: 'center', gap: 0.75,\n            fontSize: 13, fontWeight: 500, whiteSpace: 'nowrap',\n            color: dictionaryEntry.color === 'default' ? 'text.secondary' : `${dictionaryEntry.color}.dark`,\n        }}>\n            {/* OJO: flexShrink 0; en una celda angosta el punto se encogía a 0 px y el estado perdía su color */}\n            <Box component=\"span\" aria-hidden=\"true\" sx={{\n                width: 6, height: 6, flexShrink: 0, borderRadius: '50%',\n                bgcolor: DOT_COLOR_BY_TONE[dictionaryEntry.color] ?? DOT_COLOR_BY_TONE.default,\n            }} />\n            {/* el texto en su propio span: un nodo de texto suelto dentro de un flex se corta sin «…» */}\n            <Box component=\"span\" sx={{minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'}}>{label}</Box>\n        </Box>\n    );\n\n    // guard clause: sin tooltip no envolvemos (un Tooltip vacío igual agrega listeners)\n    if (!tooltip) {\n        return content;\n    }\n    return <Tooltip title={tooltip}>{content}</Tooltip>;\n}\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,oBAAoB;AAAA,EACtB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACb;AAcA,SAAwB,WAAW,EAAC,YAAY,OAAO,UAAU,OAAO,QAAQ,OAAO,QAAQ,SAAS,eAAe,GAAA,GAAK;AACxH,QAAM,EAAC,EAAA,IAAK,sBAAsB,cAAc;AAChD,QAAM,kBAAkB,OAAO,YAAY,KAAK;AAChD,QAAM,YAAY,QAAQ,iBAAiB,CAAC;AAC5C,QAAM,aAAa,QAAQ,aAAa,iBAAiB,CAAC,IAAI;AAC9D,QAAM,QAAQ,SAAS,GAAG,UAAU,MAAM,MAAM,KAAK;AAErD,QAAM,cAAc,iBAAiB,EAAE,gBAAgB,YAAY,EAAC,cAAc,IAAG;AAErF,QAAM,UAAU,eAAe,YAAY,cACvC,qBAAC,OAAI,WAAU,QAAO,IAAI,EAAC,SAAS,QAAQ,eAAe,UAAU,KAAK,QACtE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,UAAA,CAAU;AAAA,IACvD,eAAe,oBAAC,KAAA,EAAI,WAAU,QAAQ,UAAA,YAAA,CAAY;AAAA,EAAA,GACvD;AAGJ,QAAM,UAAU,YAAY,6BACvB,MAAA,EAAK,MAAK,SAAQ,OAAc,OAAO,gBAAgB,OAAO,SAAQ,YAAW,IAAQ,yBAEzF,KAAA,EAAI,WAAU,QAAO,IAAI;AAAA,IACtB,SAAS;AAAA,IAAe,YAAY;AAAA,IAAU,KAAK;AAAA,IACnD,UAAU;AAAA,IAAI,YAAY;AAAA,IAAK,YAAY;AAAA,IAC3C,OAAO,gBAAgB,UAAU,YAAY,mBAAmB,GAAG,gBAAgB,KAAK;AAAA,EAAA,GAGxF,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,QAAO,eAAY,QAAO,IAAI;AAAA,MACzC,OAAO;AAAA,MAAG,QAAQ;AAAA,MAAG,YAAY;AAAA,MAAG,cAAc;AAAA,MAClD,SAAS,kBAAkB,gBAAgB,KAAK,KAAK,kBAAkB;AAAA,IAAA,GACxE;AAAA,IAEH,oBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,EAAC,UAAU,GAAG,UAAU,UAAU,cAAc,WAAA,GAAc,UAAA,MAAA,CAAM;AAAA,EAAA,GAClG;AAIJ,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,SAAO,oBAAC,SAAA,EAAQ,OAAO,SAAU,UAAA,SAAQ;AAC7C;"}

package/dist/ui/labels/Tag.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+import Tooltip from "@mui/material/Tooltip";
+function Tag({ label, tooltip, color = "default", variant = "outlined", size = "small", onDelete, sx, ...chipProps }) {
+  const chip = /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label,
+      size,
+      variant,
+      color,
+      onDelete,
+      sx: { fontWeight: 500, ...sx },
+      ...chipProps
+    }
+  );
+  if (!tooltip) {
+    return chip;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: chip });
+}
+export {
+  Tag as default
+};
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../src/ui/labels/Tag.jsx"],"sourcesContent":["// El chip genérico: etiqueta + color + explicación, en un solo lugar.\n//\n// Para un valor que viene de un diccionario (estatus, formato, hallazgo) se usa StatusChip, que saca etiqueta, color y\n// tooltip del diccionario. Tag es para lo que no es un valor cerrado: un filtro puesto, \"total aproximado\", un conteo.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Chip from '@mui/material/Chip';\nimport Tooltip from '@mui/material/Tooltip';\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.label texto visible, ya traducido\n * @param {string} [props.tooltip] qué significa (aparece al pasar el cursor)\n * @param {string} [props.color] color del tema de MUI\n * @param {'filled'|'outlined'} [props.variant]\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onDelete]\n * @param {object} [props.sx]\n */\nexport default function Tag({label, tooltip, color = 'default', variant = 'outlined', size = 'small', onDelete, sx, ...chipProps}) {\n    const chip = (\n        <Chip label={label} size={size} variant={variant} color={color} onDelete={onDelete}\n              sx={{fontWeight: 500, ...sx}} {...chipProps} />\n    );\n\n    // guard clause: sin tooltip no se envuelve (un Tooltip vacío se traga el cursor sin dar nada a cambio)\n    if (!tooltip) {\n        return chip;\n    }\n    return <Tooltip title={tooltip}>{chip}</Tooltip>;\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAwB,IAAI,EAAC,OAAO,SAAS,QAAQ,WAAW,UAAU,YAAY,OAAO,SAAS,UAAU,IAAI,GAAG,aAAY;AAC/H,QAAM,OACF;AAAA,IAAC;AAAA,IAAA;AAAA,MAAK;AAAA,MAAc;AAAA,MAAY;AAAA,MAAkB;AAAA,MAAc;AAAA,MAC1D,IAAI,EAAC,YAAY,KAAK,GAAG,GAAA;AAAA,MAAM,GAAG;AAAA,IAAA;AAAA,EAAA;AAI5C,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AACA,SAAO,oBAAC,SAAA,EAAQ,OAAO,SAAU,UAAA,MAAK;AAC1C;"}

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

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+const CARD_BORDER_RADIUS_PIXELS = 10;
+const HEADER_SX = {
+  // la flecha adelante del texto: al final del renglón quedaba lejos de lo que se lee y pasaba inadvertida
+  flexDirection: "row-reverse",
+  gap: 1,
+  px: 1.5,
+  minHeight: 44,
+  border: 1,
+  borderColor: "divider",
+  borderRadius: `${CARD_BORDER_RADIUS_PIXELS}px`,
+  bgcolor: "background.paper",
+  "&:hover": { bgcolor: "action.hover" },
+  "& .MuiAccordionSummary-content": { my: 0.75, minWidth: 0 }
+};
+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) => changeExpanded(nextIsExpanded),
+      disableGutters: true,
+      elevation: 0,
+      square: true,
+      sx: { bgcolor: "transparent", "&::before": { display: "none" } },
+      children: [
+        /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { color: "primary" }), sx: HEADER_SX, children: /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", component: "span", color: "primary", sx: { display: "block" }, children: isExpanded ? expandedTitle : collapsedTitle }),
+          !isExpanded && hint && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", color: "text.secondary", sx: { display: "block" }, children: hint })
+        ] }) }),
+        /* @__PURE__ */ jsx(AccordionDetails, { sx: { p: 0, pt: 2 }, children })
+      ]
+    }
+  ) });
+}
+export {
+  CollapsibleSection as default
+};
+//# sourceMappingURL=CollapsibleSection.js.map

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

@@ -0,0 +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 {(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

@@ -0,0 +1,97 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Dialog from "@mui/material/Dialog";
+import IconButton from "@mui/material/IconButton";
+import Slide from "@mui/material/Slide";
+import Typography from "@mui/material/Typography";
+import CloseIcon from "@mui/icons-material/Close";
+import { APP_BAR_HEIGHT } from "./appBarHeight.js";
+const SHEET_MAX_WIDTH_PIXELS = 880;
+const SHEET_GAP_PIXELS = 8;
+const SHEET_PHONE_TOP_PIXELS = 24;
+const SHEET_RADIUS_PIXELS = 20;
+function sheetSxOf(theme) {
+  const palette = (theme.vars ?? theme).palette;
+  return {
+    position: "fixed",
+    m: 0,
+    height: "auto",
+    maxHeight: "none",
+    borderRadius: `${SHEET_RADIUS_PIXELS}px`,
+    // el que se desliza es el cuerpo, no la hoja: así el encabezado se queda quieto
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    backgroundColor: palette.background.paper,
+    backgroundImage: "none",
+    boxShadow: `0 0 0 1px ${palette.divider}, 0 24px 64px rgba(0, 0, 0, 0.28)`,
+    // en oscuro, un poco más clara que lo de atrás: lo que va al frente se aclara (HIG «Dark Mode»)
+    ...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${palette.background.paper}, white 6%)` }),
+    // escritorio: centrada, debajo de la barra
+    top: `calc(${APP_BAR_HEIGHT} + ${SHEET_GAP_PIXELS}px)`,
+    bottom: SHEET_GAP_PIXELS,
+    left: 0,
+    right: 0,
+    mx: "auto",
+    width: `min(${SHEET_MAX_WIDTH_PIXELS}px, calc(100% - ${SHEET_GAP_PIXELS * 4}px))`,
+    maxWidth: "none",
+    // teléfono: separada de las orillas y casi de alto completo (la barra está abajo o es de MUI arriba: la hoja la tapa)
+    [theme.breakpoints.down("md")]: {
+      top: `calc(env(safe-area-inset-top) + ${SHEET_PHONE_TOP_PIXELS}px)`,
+      bottom: `calc(env(safe-area-inset-bottom) + ${SHEET_GAP_PIXELS}px)`,
+      width: `calc(100% - ${SHEET_GAP_PIXELS * 2}px)`
+    }
+  };
+}
+function SlideUp(props) {
+  return /* @__PURE__ */ jsx(Slide, { direction: "up", ...props });
+}
+function ContentDialog({ open, onClose, title, children, texts }) {
+  const { t } = useToolkitTranslation("common", texts);
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      "aria-labelledby": titleId,
+      fullScreen: true,
+      slots: { transition: SlideUp },
+      slotProps: { paper: { sx: sheetSxOf } },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          flexShrink: 0,
+          minHeight: 60,
+          pl: { xs: 2.5, md: 4 },
+          pr: { xs: 1.5, md: 2 },
+          py: 1,
+          borderBottom: 1,
+          borderColor: "divider"
+        }, children: [
+          /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "h6", component: "h2", sx: { flex: 1, minWidth: 0 }, children: title }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: onClose,
+              "aria-label": t("actions.close"),
+              size: "small",
+              sx: { bgcolor: "action.hover", "&:hover": { bgcolor: "action.selected" } },
+              children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minHeight: 0, overflow: "auto", px: { xs: 2.5, md: 4 }, py: { xs: 2, md: 3 } }, children })
+      ]
+    }
+  );
+}
+export {
+  ContentDialog as default
+};
+//# sourceMappingURL=ContentDialog.js.map

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

@@ -0,0 +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 * @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/DefinitionList.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+function DefinitionList({ entries, layout = "columns", labelWidth = 150 }) {
+  const isStacked = layout === "stacked";
+  return /* @__PURE__ */ jsx(Box, { component: "dl", sx: {
+    m: 0,
+    display: "grid",
+    gridTemplateColumns: isStacked ? "minmax(0, 1fr)" : `${labelWidth}px minmax(0, 1fr)`,
+    columnGap: 2,
+    rowGap: isStacked ? 0.25 : 1
+  }, children: entries.map(({ label, value }, entryPosition) => /* @__PURE__ */ jsxs(Box, { sx: { display: "contents" }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "dt",
+        variant: isStacked ? "caption" : "body2",
+        color: "text.secondary",
+        sx: isStacked && entryPosition > 0 ? { mt: 1.25 } : void 0,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { component: "dd", variant: "body2", sx: { m: 0, overflowWrap: "anywhere" }, children: value })
+  ] }, label)) });
+}
+export {
+  DefinitionList as default
+};
+//# sourceMappingURL=DefinitionList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefinitionList.js","sources":["../../../src/ui/layout/DefinitionList.jsx"],"sourcesContent":["// Lista de dato → valor (<dl>).\n//\n// Dos acomodos:\n//   columns (por omisión)  el dato en gris a la izquierda y su valor a la derecha; para tarjetas anchas\n//   stacked                el dato chico arriba de su valor; para columnas angostas, donde un nombre largo\n//                          («Codificación del archivo») se partiría en dos renglones al lado de su valor\n//\n// Genérico del paquete: function (regla de la casa). Los textos llegan ya traducidos y el valor puede ser cualquier nodo (un\n// chip, un texto en monoespaciada...).\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\n\n/**\n * @param {object} props\n * @param {Array<{label: string, value: import('react').ReactNode}>} props.entries en el orden en que se pintan; el label es la\n *     llave\n * @param {'columns'|'stacked'} [props.layout]\n * @param {number} [props.labelWidth] ancho en px de la columna del dato (solo columns)\n */\nexport default function DefinitionList({entries, layout = 'columns', labelWidth = 150}) {\n    const isStacked = layout === 'stacked';\n\n    return (\n        <Box component=\"dl\" sx={{\n            m: 0, display: 'grid',\n            gridTemplateColumns: isStacked ? 'minmax(0, 1fr)' : `${labelWidth}px minmax(0, 1fr)`,\n            columnGap: 2, rowGap: isStacked ? 0.25 : 1,\n        }}>\n            {entries.map(({label, value}, entryPosition) => (\n                <Box key={label} sx={{display: 'contents'}}>\n                    <Typography component=\"dt\" variant={isStacked ? 'caption' : 'body2'} color=\"text.secondary\"\n                                sx={isStacked && entryPosition > 0 ? {mt: 1.25} : undefined}>\n                        {label}\n                    </Typography>\n                    <Typography component=\"dd\" variant=\"body2\" sx={{m: 0, overflowWrap: 'anywhere'}}>{value}</Typography>\n                </Box>\n            ))}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;AAmBA,SAAwB,eAAe,EAAC,SAAS,SAAS,WAAW,aAAa,OAAM;AACpF,QAAM,YAAY,WAAW;AAE7B,SACI,oBAAC,KAAA,EAAI,WAAU,MAAK,IAAI;AAAA,IACpB,GAAG;AAAA,IAAG,SAAS;AAAA,IACf,qBAAqB,YAAY,mBAAmB,GAAG,UAAU;AAAA,IACjE,WAAW;AAAA,IAAG,QAAQ,YAAY,OAAO;AAAA,EAAA,GAExC,UAAA,QAAQ,IAAI,CAAC,EAAC,OAAO,SAAQ,uCACzB,KAAA,EAAgB,IAAI,EAAC,SAAS,cAC3B,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW,WAAU;AAAA,QAAK,SAAS,YAAY,YAAY;AAAA,QAAS,OAAM;AAAA,QAC/D,IAAI,aAAa,gBAAgB,IAAI,EAAC,IAAI,SAAQ;AAAA,QACzD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,oBAAC,YAAA,EAAW,WAAU,MAAK,SAAQ,SAAQ,IAAI,EAAC,GAAG,GAAG,cAAc,WAAA,GAAc,UAAA,MAAA,CAAM;AAAA,EAAA,KALlF,KAMV,CACH,GACL;AAER;"}

package/dist/ui/layout/DetailHeader.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
+import DocumentTitle from "../navigation/DocumentTitle.js";
+function DetailHeader({ title, eyebrow, badges, actions, documentTitle }) {
+  const titleRef = useRef(null);
+  useRegisterPageTitle(title, titleRef);
+  return /* @__PURE__ */ jsxs(Box, { component: "header", sx: { display: "flex", flexWrap: "wrap", alignItems: "flex-end", justifyContent: "space-between", gap: 2, mb: 2.5 }, children: [
+    /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? title }),
+    /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+      eyebrow && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", color: "text.secondary", component: "p", sx: { fontWeight: 700 }, children: eyebrow }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, useFlexGap: true, sx: { alignItems: "center", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx(Typography, { ref: titleRef, variant: "h5", component: "h1", children: title }),
+        badges
+      ] })
+    ] }),
+    actions && /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: "wrap" }, children: actions })
+  ] });
+}
+export {
+  DetailHeader as default
+};
+//# sourceMappingURL=DetailHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailHeader.js","sources":["../../../src/ui/layout/DetailHeader.jsx"],"sourcesContent":["// Encabezado de una página de detalle (un solo registro: un pedido, un usuario...): eyebrow con el contexto, el título\n// que dice QUÉ registro es, sus insignias a un lado del título (estatus, intento...) y las acciones a la derecha.\n//\n// Por qué aparte de PageHeader: ese es el encabezado centrado de un listado. En un detalle lo primero que se lee es qué\n// registro se está viendo y en qué estado está; por eso el título y sus insignias van juntos, arriba a la izquierda.\n//\n// También pone el título de la pestaña (DocumentTitle) y, dentro de AppLayout, sube el título a la barra al deslizar.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega por props, ya traducido.\nimport {useRef} from 'react';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {string} [props.eyebrow] contexto arriba del título (p. ej. el producto)\n * @param {import('react').ReactNode} [props.badges] insignias junto al título (chips de estatus, intento...)\n * @param {import('react').ReactNode} [props.actions] botones a la derecha\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n */\nexport default function DetailHeader({title, eyebrow, badges, actions, documentTitle}) {\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    return (\n        <Box component=\"header\" sx={{display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', justifyContent: 'space-between', gap: 2, mb: 2.5}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            <Box sx={{minWidth: 0}}>\n                {/* el contexto se lee de un vistazo (en overline se veía\n                    muy chico); text.secondary y no text.disabled: se lee (WCAG no lo exime) */}\n                {eyebrow && <Typography variant=\"subtitle1\" color=\"text.secondary\" component=\"p\" sx={{fontWeight: 700}}>{eyebrow}</Typography>}\n                <Stack direction=\"row\" spacing={1.5} useFlexGap sx={{alignItems: 'center', flexWrap: 'wrap'}}>\n                    <Typography ref={titleRef} variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {badges}\n                </Stack>\n            </Box>\n            {actions && <Stack direction=\"row\" spacing={1} useFlexGap sx={{flexWrap: 'wrap'}}>{actions}</Stack>}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAyBA,SAAwB,aAAa,EAAC,OAAO,SAAS,QAAQ,SAAS,iBAAgB;AACnF,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,8BACK,KAAA,EAAI,WAAU,UAAS,IAAI,EAAC,SAAS,QAAQ,UAAU,QAAQ,YAAY,YAAY,gBAAgB,iBAAiB,KAAK,GAAG,IAAI,OACjI,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,yBAC7C,KAAA,EAAI,IAAI,EAAC,UAAU,KAGf,UAAA;AAAA,MAAA,WAAW,oBAAC,YAAA,EAAW,SAAQ,aAAY,OAAM,kBAAiB,WAAU,KAAI,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,SAAQ;AAAA,MACjH,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,IAAI,EAAC,YAAY,UAAU,UAAU,UACjF,UAAA;AAAA,QAAA,oBAAC,cAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAM,UAAA,MAAA,CAAM;AAAA,QAC7D;AAAA,MAAA,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,IACC,WAAW,oBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,YAAU,MAAC,IAAI,EAAC,UAAU,OAAA,GAAU,UAAA,QAAA,CAAQ;AAAA,EAAA,GAC/F;AAER;"}

package/dist/ui/layout/ErrorPage.js

@@ -0,0 +1,54 @@
+"use client";
+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";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import SystemUpdateAltRoundedIcon from "@mui/icons-material/SystemUpdateAltRounded";
+import TravelExploreOutlinedIcon from "@mui/icons-material/TravelExploreOutlined";
+const ERROR_PAGE_KIND = Object.freeze({ notFound: "notFound", forbidden: "forbidden", serverError: "serverError", newVersion: "newVersion" });
+const ERROR_PAGE_LOOK = Object.freeze({
+  [ERROR_PAGE_KIND.notFound]: { Icon: TravelExploreOutlinedIcon, color: "info", httpStatus: 404 },
+  [ERROR_PAGE_KIND.forbidden]: { Icon: LockOutlinedIcon, color: "warning", httpStatus: 403 },
+  [ERROR_PAGE_KIND.serverError]: { Icon: ErrorOutlineOutlinedIcon, color: "error", httpStatus: 500 },
+  // no es un error de nadie: se publicó otra versión; sin código, y el botón dice «Recargar»
+  [ERROR_PAGE_KIND.newVersion]: { Icon: SystemUpdateAltRoundedIcon, color: "info", httpStatus: null, retryKey: "reload" }
+});
+const ICON_PIXELS = 56;
+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: [
+    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`) }),
+    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, onClick: onGoHome, children: t("goHome") }),
+      extraActions
+    ] }) }),
+    look.httpStatus && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.disabled", children: look.httpStatus })
+  ] });
+}
+export {
+  ERROR_PAGE_KIND,
+  ErrorPage as default
+};
+//# sourceMappingURL=ErrorPage.js.map

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

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+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 {
+  FullPageLoader as default
+};
+//# sourceMappingURL=FullPageLoader.js.map

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

@@ -0,0 +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\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/GlassLensFilter.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useTheme } from "@mui/material/styles";
+import { isGlassTheme, GLASS_LENS, lensDisplacementMapOf } from "../../theme/glassSurface.js";
+let mountedFilterCount = 0;
+function isChromiumBrowser() {
+  return Boolean(navigator.userAgentData?.brands?.some((entry) => entry.brand === "Chromium"));
+}
+function GlassLensFilter() {
+  const theme = useTheme();
+  const isGlass = isGlassTheme(theme);
+  useEffect(() => {
+    if (!isGlass || !isChromiumBrowser()) {
+      return void 0;
+    }
+    mountedFilterCount += 1;
+    document.body.dataset.glassLens = "on";
+    return () => {
+      mountedFilterCount -= 1;
+      if (mountedFilterCount === 0) {
+        delete document.body.dataset.glassLens;
+      }
+    };
+  }, [isGlass]);
+  if (!isGlass) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", width: "0", height: "0", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children: Object.values(GLASS_LENS).map((lens) => (
+    // objectBoundingBox: el mapa se estira al tamaño de cada vidrio, sea un chip o la barra entera
+    /* @__PURE__ */ jsxs(
+      "filter",
+      {
+        id: lens.filterId,
+        x: "0",
+        y: "0",
+        width: "1",
+        height: "1",
+        primitiveUnits: "objectBoundingBox",
+        colorInterpolationFilters: "sRGB",
+        children: [
+          /* @__PURE__ */ jsx("feImage", { result: "lensMap", x: "0", y: "0", width: "1", height: "1", preserveAspectRatio: "none", href: lensDisplacementMapOf(lens.edgeFraction) }),
+          /* @__PURE__ */ jsx("feDisplacementMap", { in: "SourceGraphic", in2: "lensMap", scale: lens.scale, xChannelSelector: "R", yChannelSelector: "G" })
+        ]
+      },
+      lens.filterId
+    )
+  )) });
+}
+export {
+  GlassLensFilter as default
+};
+//# sourceMappingURL=GlassLensFilter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlassLensFilter.js","sources":["../../../src/ui/layout/GlassLensFilter.jsx"],"sourcesContent":["// El LENTE del vidrio líquido (glassSurface.js, lensRulesOf): los dos filtros SVG que doblan lo de atrás en la orilla del\n// vidrio, uno para los controles chicos y otro para los paneles, y la marca en <body> que prende el lente en el tema.\n//\n// Va una vez en la página: AppLayout y AuthLayout ya lo ponen; una pantalla propia fuera de ellos lo pone con\n// <GlassLensFilter />. Sin el vidrio en el tema no pinta nada.\n//\n// La marca solo se pone en Chrome y sus parientes (Edge, Brave, Arc), los únicos que pintan un filtro SVG en\n// backdrop-filter: Firefox lo acepta sin pintarlo (el vidrio se quedaría sin desenfoque) y Safari no lo entiende. En ellos\n// el vidrio sigue esmerilado.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect} from 'react';\nimport {useTheme} from '@mui/material/styles';\n\nimport {GLASS_LENS, isGlassTheme, lensDisplacementMapOf} from '@/theme/glassSurface.js';\n\n// cuántos GlassLensFilter hay montados: la marca se quita hasta que se va el último\nlet mountedFilterCount = 0;\n\n/**\n * Si el navegador es de la familia de Chrome (Chromium), el único que pinta el lente.\n *\n * @returns {boolean}\n */\nfunction isChromiumBrowser() {\n    return Boolean(navigator.userAgentData?.brands?.some((entry) => entry.brand === 'Chromium'));\n}\n\nexport default function GlassLensFilter() {\n    const theme = useTheme();\n    const isGlass = isGlassTheme(theme);\n\n    useEffect(() => {\n        if (!isGlass || !isChromiumBrowser()) {\n            return undefined;\n        }\n        mountedFilterCount += 1;\n        document.body.dataset.glassLens = 'on';\n        return () => {\n            mountedFilterCount -= 1;\n            if (mountedFilterCount === 0) {\n                delete document.body.dataset.glassLens;\n            }\n        };\n    }, [isGlass]);\n\n    // guard clause: sin vidrio en el tema no hace falta ningún filtro\n    if (!isGlass) {\n        return null;\n    }\n\n    return (\n        <svg aria-hidden=\"true\" focusable=\"false\" width=\"0\" height=\"0\" style={{position: 'absolute', width: 0, height: 0, overflow: 'hidden'}}>\n            {Object.values(GLASS_LENS).map((lens) => (\n                // objectBoundingBox: el mapa se estira al tamaño de cada vidrio, sea un chip o la barra entera\n                <filter key={lens.filterId} id={lens.filterId} x=\"0\" y=\"0\" width=\"1\" height=\"1\" primitiveUnits=\"objectBoundingBox\"\n                        colorInterpolationFilters=\"sRGB\">\n                    <feImage result=\"lensMap\" x=\"0\" y=\"0\" width=\"1\" height=\"1\" preserveAspectRatio=\"none\" href={lensDisplacementMapOf(lens.edgeFraction)} />\n                    <feDisplacementMap in=\"SourceGraphic\" in2=\"lensMap\" scale={lens.scale} xChannelSelector=\"R\" yChannelSelector=\"G\" />\n                </filter>\n            ))}\n        </svg>\n    );\n}\n"],"names":[],"mappings":";;;;;AAiBA,IAAI,qBAAqB;AAOzB,SAAS,oBAAoB;AACzB,SAAO,QAAQ,UAAU,eAAe,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,UAAU,CAAC;AAC/F;AAEA,SAAwB,kBAAkB;AACtC,QAAM,QAAQ,SAAA;AACd,QAAM,UAAU,aAAa,KAAK;AAElC,YAAU,MAAM;AACZ,QAAI,CAAC,WAAW,CAAC,qBAAqB;AAClC,aAAO;AAAA,IACX;AACA,0BAAsB;AACtB,aAAS,KAAK,QAAQ,YAAY;AAClC,WAAO,MAAM;AACT,4BAAsB;AACtB,UAAI,uBAAuB,GAAG;AAC1B,eAAO,SAAS,KAAK,QAAQ;AAAA,MACjC;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,OAAO,CAAC;AAGZ,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,SACI,oBAAC,OAAA,EAAI,eAAY,QAAO,WAAU,SAAQ,OAAM,KAAI,QAAO,KAAI,OAAO,EAAC,UAAU,YAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,SAAA,GACvH,UAAA,OAAO,OAAO,UAAU,EAAE,IAAI,CAAC;AAAA;AAAA,IAE5B;AAAA,MAAC;AAAA,MAAA;AAAA,QAA2B,IAAI,KAAK;AAAA,QAAU,GAAE;AAAA,QAAI,GAAE;AAAA,QAAI,OAAM;AAAA,QAAI,QAAO;AAAA,QAAI,gBAAe;AAAA,QACvF,2BAA0B;AAAA,QAC9B,UAAA;AAAA,UAAA,oBAAC,aAAQ,QAAO,WAAU,GAAE,KAAI,GAAE,KAAI,OAAM,KAAI,QAAO,KAAI,qBAAoB,QAAO,MAAM,sBAAsB,KAAK,YAAY,GAAG;AAAA,UACtI,oBAAC,qBAAA,EAAkB,IAAG,iBAAgB,KAAI,WAAU,OAAO,KAAK,OAAO,kBAAiB,KAAI,kBAAiB,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAHxG,KAAK;AAAA,IAAA;AAAA,GAKrB,GACL;AAER;"}

package/dist/ui/layout/GlassPanel.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Paper from "@mui/material/Paper";
+import { GLASS_PANEL_RADIUS_PIXELS, isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
+const SOLID_FLOATING_ELEVATION = 8;
+function floatingSurfaceOf(theme) {
+  return {
+    borderRadius: `${GLASS_PANEL_RADIUS_PIXELS}px`,
+    ...isGlassTheme(theme) ? glassStylesOf(theme) : { boxShadow: theme.shadows[SOLID_FLOATING_ELEVATION] }
+  };
+}
+function GlassPanel({ children, sx, ...paperProps }) {
+  return /* @__PURE__ */ jsx(Paper, { elevation: 0, ...paperProps, sx: [floatingSurfaceOf, ...Array.isArray(sx) ? sx : [sx]], children });
+}
+export {
+  GlassPanel as default
+};
+//# sourceMappingURL=GlassPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlassPanel.js","sources":["../../../src/ui/layout/GlassPanel.jsx"],"sourcesContent":["// Un panel que flota sobre el contenido: los controles encima de un mapa, una barra de acciones pegada abajo, un letrero\n// encima de una foto. Es de vidrio si el tema lo trae prendido (createToolkitTheme({glass: true})) y una tarjeta con sombra\n// si no: la pantalla se escribe una vez y sirve con los dos temas.\n//\n// No es para el contenido (una ficha, un formulario, una tabla): la guía del vidrio pide el texto largo sobre superficies\n// sólidas. Para eso está SectionCard.\n//\n//   <GlassPanel sx={{position: 'absolute', top: 16, right: 16, p: 1}}>…los botones del mapa…</GlassPanel>\n//\n// Genérico del paquete: function (regla de la casa).\nimport Paper from '@mui/material/Paper';\n\nimport {GLASS_PANEL_RADIUS_PIXELS, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\n\n// sin vidrio, la sombra de lo que flota (la misma de los menús de MUI)\nconst SOLID_FLOATING_ELEVATION = 8;\n\n/**\n * El panel con su superficie: vidrio o sombra, según el tema.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction floatingSurfaceOf(theme) {\n    return {\n        borderRadius: `${GLASS_PANEL_RADIUS_PIXELS}px`,\n        ...(isGlassTheme(theme) ? glassStylesOf(theme) : {boxShadow: theme.shadows[SOLID_FLOATING_ELEVATION]}),\n    };\n}\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children\n * @param {object|Function|Array} [props.sx] estilos propios: se suman y ganan\n * @param {import('react').ElementType} [props.component] por omisión 'div'\n */\nexport default function GlassPanel({children, sx, ...paperProps}) {\n    return (\n        <Paper elevation={0} {...paperProps} sx={[floatingSurfaceOf, ...(Array.isArray(sx) ? sx : [sx])]}>\n            {children}\n        </Paper>\n    );\n}\n"],"names":[],"mappings":";;;;AAeA,MAAM,2BAA2B;AAQjC,SAAS,kBAAkB,OAAO;AAC9B,SAAO;AAAA,IACH,cAAc,GAAG,yBAAyB;AAAA,IAC1C,GAAI,aAAa,KAAK,IAAI,cAAc,KAAK,IAAI,EAAC,WAAW,MAAM,QAAQ,wBAAwB,EAAA;AAAA,EAAC;AAE5G;AAQA,SAAwB,WAAW,EAAC,UAAU,IAAI,GAAG,cAAa;AAC9D,6BACK,OAAA,EAAM,WAAW,GAAI,GAAG,YAAY,IAAI,CAAC,mBAAmB,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,CAAC,EAAE,CAAE,GAC1F,UACL;AAER;"}

package/dist/ui/layout/PageHeader.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
+import DocumentTitle from "../navigation/DocumentTitle.js";
+function PageHeader({ title, eyebrow, subtitle, action, documentTitle }) {
+  const titleRef = useRef(null);
+  useRegisterPageTitle(title, titleRef);
+  return /* @__PURE__ */ jsxs(Stack, { component: "header", spacing: 1.25, sx: { alignItems: "center", textAlign: "center", py: { xs: 3, md: 4 } }, children: [
+    /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? title }),
+    eyebrow && /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", children: eyebrow }),
+    /* @__PURE__ */ jsx(Typography, { ref: titleRef, variant: "h4", component: "h1", children: title }),
+    subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", sx: { maxWidth: 640 }, children: subtitle }),
+    action && /* @__PURE__ */ jsx(Box, { sx: { pt: 1.5 }, children: action })
+  ] });
+}
+export {
+  PageHeader as default
+};
+//# sourceMappingURL=PageHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sources":["../../../src/ui/layout/PageHeader.jsx"],"sourcesContent":["// Encabezado centrado de una pantalla: eyebrow en versalitas, título, subtítulo y una acción en píldora\n// (p. ej. VENTAS · MÓDULO 1 / Pedidos del mes / ... / Nuevo pedido).\n//\n// También pone el título de la pestaña (DocumentTitle) y, dentro de AppLayout, sube el título a la barra al deslizar.\n// Para una pantalla de trabajo (lista, formulario) se ve mejor PageHeading, el de las plantillas de MUI.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef} from 'react';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useRegisterPageTitle} from '@/appShell/pageTitle.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\n\n/**\n * @param {object} props\n * @param {string} props.title texto ya traducido\n * @param {string} [props.eyebrow]\n * @param {import('react').ReactNode} [props.subtitle]\n * @param {import('react').ReactNode} [props.action] normalmente un <Button variant=\"contained\" shape=\"pill\">\n * @param {string} [props.documentTitle] título de la pestaña si difiere del visible\n */\nexport default function PageHeader({title, eyebrow, subtitle, action, documentTitle}) {\n    const titleRef = useRef(null);\n    useRegisterPageTitle(title, titleRef);\n    return (\n        <Stack component=\"header\" spacing={1.25} sx={{alignItems: 'center', textAlign: 'center', py: {xs: 3, md: 4}}}>\n            <DocumentTitle title={documentTitle ?? title} />\n            {/* text.secondary y no text.disabled: el eyebrow se lee, WCAG no lo exime (disabled daba 2.57:1 sobre el lienzo) */}\n            {eyebrow && (\n                <Typography variant=\"overline\" color=\"text.secondary\">{eyebrow}</Typography>\n            )}\n            <Typography ref={titleRef} variant=\"h4\" component=\"h1\">{title}</Typography>\n            {subtitle && (\n                <Typography variant=\"body1\" color=\"text.secondary\" sx={{maxWidth: 640}}>{subtitle}</Typography>\n            )}\n            {action && <Box sx={{pt: 1.5}}>{action}</Box>}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAuBA,SAAwB,WAAW,EAAC,OAAO,SAAS,UAAU,QAAQ,iBAAgB;AAClF,QAAM,WAAW,OAAO,IAAI;AAC5B,uBAAqB,OAAO,QAAQ;AACpC,8BACK,OAAA,EAAM,WAAU,UAAS,SAAS,MAAM,IAAI,EAAC,YAAY,UAAU,WAAW,UAAU,IAAI,EAAC,IAAI,GAAG,IAAI,OACrG,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,OAAO,iBAAiB,MAAA,CAAO;AAAA,IAE7C,WACG,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAkB,UAAA,SAAQ;AAAA,IAEnE,oBAAC,cAAW,KAAK,UAAU,SAAQ,MAAK,WAAU,MAAM,UAAA,MAAA,CAAM;AAAA,IAC7D,YACG,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAC,UAAU,IAAA,GAAO,UAAA,SAAA,CAAS;AAAA,IAErF,8BAAW,KAAA,EAAI,IAAI,EAAC,IAAI,IAAA,GAAO,UAAA,OAAA,CAAO;AAAA,EAAA,GAC3C;AAER;"}

package/dist/ui/layout/PageHeading.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useAppMenu } from "../../appShell/appMenuContext.js";
+import BarActions from "../../appShell/BarActions.js";
+import { useBarActionsSlot } from "../../appShell/barActionsSlot.js";
+import { menuItemLabelOf } from "../../appShell/menuItemText.js";
+import { useRegisterPageTitle } from "../../appShell/pageTitle.js";
+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, texts }) {
+  const { t } = useToolkitTranslation("layout", texts);
+  const { useLocation } = useToolkitNavigation();
+  const { pathname } = useLocation();
+  const { menuItems } = useAppMenu();
+  const titleRef = useRef(null);
+  useRegisterPageTitle(title, titleRef);
+  const { usesCapsules } = useBarActionsSlot();
+  const inlineActionsSx = { display: "flex", gap: 1, flexWrap: "wrap", flex: { xs: "1 1 auto", sm: "0 0 auto" }, "& > .MuiButton-root": { width: { xs: "100%", sm: "auto" } } };
+  const isActionsCapsule = Boolean(actions) && usesCapsules;
+  const crumbs = breadcrumbs === false ? [] : breadcrumbs ?? menuBreadcrumbsOf(menuItems, pathname).map((menuItem) => ({ label: menuItemLabelOf(menuItem, t), to: menuItem.to }));
+  return /* @__PURE__ */ jsxs(Box, { component: "header", sx: { mb: 3 }, children: [
+    /* @__PURE__ */ jsx(DocumentTitle, { title: documentTitle ?? title }),
+    crumbs.length >= MIN_BREADCRUMBS && /* @__PURE__ */ jsx(Box, { sx: { mb: 1 }, children: /* @__PURE__ */ jsx(PageBreadcrumbs, { items: crumbs }) }),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: isActionsCapsule ? "row" : { xs: "column", sm: "row" },
+        spacing: { xs: 1.5, sm: 2 },
+        sx: { alignItems: isActionsCapsule ? "flex-start" : { xs: "stretch", sm: "flex-start" }, justifyContent: "space-between" },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { ref: titleRef, variant: "h4", component: "h1", sx: { minWidth: 0 }, children: title }),
+          isActionsCapsule && /* @__PURE__ */ jsx(BarActions, { label: title, inlineSx: { flexShrink: 0 }, children: actions }),
+          actions && !usesCapsules && /* @__PURE__ */ jsx(Box, { sx: inlineActionsSx, children: actions })
+        ]
+      }
+    ),
+    description && /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", component: "div", sx: { mt: 0.75, maxWidth: 760 }, children: description })
+  ] });
+}
+export {
+  PageHeading as default
+};
+//# sourceMappingURL=PageHeading.js.map