@stackcraftmx/calcita 0.32.2 → 0.51.0

package/dist/ui/filters/QuickFilters.js

@@ -7,7 +7,7 @@ import { alpha } from "@mui/material/styles";
 import Chip from "@mui/material/Chip";
 import Typography from "@mui/material/Typography";
 import ScrollableRow from "../layout/ScrollableRow.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaQuickFilters";
 const QuickRoot = piecePart(THEME_NAME, "Root", Box);
@@ -32,7 +32,7 @@ function compactCount(count) {
   }
   return String(count);
 }
-function QuickFilters(props) {
+function QuickFiltersContent(props) {
   const { value, onChange, options = [], caption, ariaLabel, extra, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table", texts);
@@ -95,6 +95,7 @@ function QuickFilters(props) {
     ] })
   ] });
 }
+const QuickFilters = withPieceSlots(QuickFiltersContent, THEME_NAME);
 export {
   QuickFilters as default
 };

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// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaQuickFilters con defaultProps y\n// styleOverrides de sus partes: root, caption, chip, chipLabel, chipCount.\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';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaQuickFilters)\nconst THEME_NAME = 'CalcitaQuickFilters';\nconst QuickRoot = piecePart(THEME_NAME, 'Root', Box);\nconst QuickCaption = piecePart(THEME_NAME, 'Caption', Typography);\nconst QuickChip = piecePart(THEME_NAME, 'Chip', Chip);\nconst QuickChipLabel = piecePart(THEME_NAME, 'ChipLabel', Box);\nconst QuickChipCount = piecePart(THEME_NAME, 'ChipCount', Box);\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(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaQuickFilters.defaultProps) y encima lo que llega aquí\n    const {value, onChange, options = [], caption, ariaLabel, extra, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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        <QuickRoot ownSx={{mb: 1}}>\n            {caption && (\n                <QuickCaption variant=\"caption\" color=\"text.secondary\" ownSx={{px: 0.25}}>{caption}</QuickCaption>\n            )}\n            <ScrollableRow role=\"tablist\" aria-label={ariaLabel}>\n                {options.map((option) => {\n                    const isActive = option.value === value;\n                    return (\n                        <QuickChip\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                                <QuickChipLabel component=\"span\" ownSx={{display: 'inline-flex', alignItems: 'center', gap: 0.75}}>\n                                    <span>{option.label}</span>\n                                    {option.count !== null && option.count !== undefined && (\n                                        <QuickChipCount 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                                             ownSx={(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                                        </QuickChipCount>\n                                    )}\n                                </QuickChipLabel>\n                            )}\n                            ownSx={{flex: '0 0 auto', height: 32}}\n                        />\n                    );\n                })}\n                {extra}\n            </ScrollableRow>\n        </QuickRoot>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"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// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaQuickFilters con defaultProps y\n// styleOverrides de sus partes: root, caption, chip, chipLabel, chipCount.\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';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaQuickFilters)\nconst THEME_NAME = 'CalcitaQuickFilters';\nconst QuickRoot = piecePart(THEME_NAME, 'Root', Box);\nconst QuickCaption = piecePart(THEME_NAME, 'Caption', Typography);\nconst QuickChip = piecePart(THEME_NAME, 'Chip', Chip);\nconst QuickChipLabel = piecePart(THEME_NAME, 'ChipLabel', Box);\nconst QuickChipCount = piecePart(THEME_NAME, 'ChipCount', Box);\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 */\nfunction QuickFiltersContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaQuickFilters.defaultProps) y encima lo que llega aquí\n    const {value, onChange, options = [], caption, ariaLabel, extra, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\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        <QuickRoot ownSx={{mb: 1}}>\n            {caption && (\n                <QuickCaption variant=\"caption\" color=\"text.secondary\" ownSx={{px: 0.25}}>{caption}</QuickCaption>\n            )}\n            <ScrollableRow role=\"tablist\" aria-label={ariaLabel}>\n                {options.map((option) => {\n                    const isActive = option.value === value;\n                    return (\n                        <QuickChip\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                                <QuickChipLabel component=\"span\" ownSx={{display: 'inline-flex', alignItems: 'center', gap: 0.75}}>\n                                    <span>{option.label}</span>\n                                    {option.count !== null && option.count !== undefined && (\n                                        <QuickChipCount 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                                             ownSx={(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                                        </QuickChipCount>\n                                    )}\n                                </QuickChipLabel>\n                            )}\n                            ownSx={{flex: '0 0 auto', height: 32}}\n                        />\n                    );\n                })}\n                {extra}\n            </ScrollableRow>\n        </QuickRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst QuickFilters = withPieceSlots(QuickFiltersContent, THEME_NAME);\nexport default QuickFilters;\n"],"names":[],"mappings":"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"}

package/dist/ui/filters/filterDrawerFields.js

@@ -0,0 +1,119 @@
+const FILTER_FIELD_KIND = Object.freeze({
+  text: "text",
+  select: "select",
+  multiSelect: "multiSelect",
+  catalog: "catalog",
+  checkboxes: "checkboxes",
+  numberRange: "numberRange",
+  dateRange: "dateRange",
+  comparison: "comparison",
+  custom: "custom"
+});
+const COMPARISON_OPERATOR = Object.freeze({ equals: "eq", greaterThan: "gt", greaterOrEqual: "gte", lessThan: "lt", lessOrEqual: "lte" });
+const OPERATOR_SYMBOLS = Object.freeze({ eq: "=", gt: ">", gte: "≥", lt: "<", lte: "≤" });
+const COMPARISON_SEPARATOR = ":";
+const LIST_KINDS = /* @__PURE__ */ new Set([FILTER_FIELD_KIND.multiSelect, FILTER_FIELD_KIND.checkboxes]);
+function isListField(field) {
+  return LIST_KINDS.has(field.kind) || field.kind === FILTER_FIELD_KIND.catalog && Boolean(field.multiple);
+}
+function filterKeysOf(field) {
+  if (field.kind === FILTER_FIELD_KIND.numberRange) {
+    return [field.keys?.from ?? `${field.name}_min`, field.keys?.to ?? `${field.name}_max`];
+  }
+  if (field.kind === FILTER_FIELD_KIND.dateRange) {
+    return [field.keys?.from ?? `${field.name}_from`, field.keys?.to ?? `${field.name}_to`];
+  }
+  return [field.name];
+}
+function comparisonOf(text) {
+  const [operator, ...rest] = String(text ?? "").split(COMPARISON_SEPARATOR);
+  const value = rest.join(COMPARISON_SEPARATOR);
+  return OPERATOR_SYMBOLS[operator] && value !== "" ? { operator, value } : null;
+}
+function comparisonTextOf(operator, value) {
+  return value === "" || value === null || value === void 0 ? "" : `${operator}${COMPARISON_SEPARATOR}${value}`;
+}
+function isFilterValueSet(value) {
+  return Array.isArray(value) ? value.length > 0 : value !== "" && value !== null && value !== void 0;
+}
+function filterDrawerKindsOf(fields) {
+  return Object.fromEntries(fields.filter(isListField).map((field) => [field.name, "multiSelect"]));
+}
+function drawerValuesOf(fields, filters) {
+  return Object.fromEntries(fields.flatMap((field) => filterKeysOf(field).map((key) => [key, filters?.[key] ?? (isListField(field) ? [] : "")])));
+}
+function emptyDrawerValuesOf(fields) {
+  return drawerValuesOf(fields, {});
+}
+function filterDrawerDefaultsOf(fields) {
+  return emptyDrawerValuesOf(fields);
+}
+function activeDrawerFilterCountOf(fields, filters) {
+  return fields.filter((field) => filterKeysOf(field).some((key) => isFilterValueSet(filters?.[key]))).length;
+}
+function invalidRangesOf(fields, values) {
+  const invalid = {};
+  for (const field of fields) {
+    if (field.kind !== FILTER_FIELD_KIND.numberRange && field.kind !== FILTER_FIELD_KIND.dateRange) {
+      continue;
+    }
+    const [fromKey, toKey] = filterKeysOf(field);
+    const from = values?.[fromKey];
+    const to = values?.[toKey];
+    if (!isFilterValueSet(from) || !isFilterValueSet(to)) {
+      continue;
+    }
+    const isBackwards = field.kind === FILTER_FIELD_KIND.numberRange ? Number(to) < Number(from) : String(to) < String(from);
+    if (isBackwards) {
+      invalid[toKey] = true;
+    }
+  }
+  return invalid;
+}
+function filterDrawerChipsOf(fields, { t, formatDate = (date) => date }) {
+  const text = [];
+  const multiSelect = [];
+  const optionLabelOf = (field, value) => field.options?.find((option) => (option.value ?? option.code) === value)?.label ?? String(value);
+  for (const field of fields) {
+    const withUnit = (value) => `${field.prefix ?? ""}${value}${field.suffix ? ` ${field.suffix}` : ""}`;
+    if (isListField(field)) {
+      multiSelect.push({ key: field.name, label: field.label, itemLabel: (value) => optionLabelOf(field, value) });
+    } else if (field.kind === FILTER_FIELD_KIND.numberRange || field.kind === FILTER_FIELD_KIND.dateRange) {
+      const [fromKey, toKey] = filterKeysOf(field);
+      const format = field.kind === FILTER_FIELD_KIND.dateRange ? formatDate : withUnit;
+      text.push({ key: fromKey, label: t("filterDrawer.chipFrom", { label: field.label }), format });
+      text.push({ key: toKey, label: t("filterDrawer.chipTo", { label: field.label }), format });
+    } else if (field.kind === FILTER_FIELD_KIND.comparison) {
+      text.push({
+        key: field.name,
+        label: field.label,
+        format: (value) => {
+          const parts = comparisonOf(value);
+          return parts ? `${OPERATOR_SYMBOLS[parts.operator]} ${withUnit(parts.value)}` : String(value);
+        }
+      });
+    } else if (field.kind === FILTER_FIELD_KIND.select || field.kind === FILTER_FIELD_KIND.catalog) {
+      text.push({ key: field.name, label: field.label, format: (value) => optionLabelOf(field, value) });
+    } else {
+      text.push({ key: field.name, label: field.label, ...field.chipFormat && { format: field.chipFormat } });
+    }
+  }
+  return { text, multiSelect };
+}
+export {
+  COMPARISON_OPERATOR,
+  FILTER_FIELD_KIND,
+  activeDrawerFilterCountOf,
+  comparisonOf,
+  comparisonTextOf,
+  drawerValuesOf,
+  emptyDrawerValuesOf,
+  filterDrawerChipsOf,
+  filterDrawerDefaultsOf,
+  filterDrawerKindsOf,
+  filterKeysOf,
+  invalidRangesOf,
+  isFilterValueSet,
+  isListField
+};
+//# sourceMappingURL=filterDrawerFields.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filterDrawerFields.js","sources":["../../../src/ui/filters/filterDrawerFields.js"],"sourcesContent":["// Los campos del cajón de búsqueda (FilterDrawer): cómo viaja cada uno en los filtros de la lista, cuántos hay puestos y\n// cómo se dicen en sus chips. Un campo se declara una vez y de ahí sale todo:\n//\n//   text          un texto                            {name}: 'ana'\n//   select        una opción                          {name}: 'card'\n//   multiSelect   varias opciones (lista)             {name}: ['card', 'cash']\n//   catalog       una o varias de un catálogo largo   {name}: 'NL' o ['NL', 'JA'] (multiple)\n//   checkboxes    varias, a la vista                  {name}: ['email', 'sms']\n//   numberRange   desde y hasta                       {name}_min: '3', {name}_max: '10'\n//   dateRange     del día al día (AAAA-MM-DD)         {name}_from: '2026-11-01', {name}_to: '2026-11-30'\n//   comparison    un número con su operador           {name}: 'gte:500' (mayor o igual que 500)\n//   custom        uno propio (render)                 {name}: lo que el proyecto decida\n//\n// Los nombres de un rango se cambian con keys ({from: 'created_from', to: 'created_to'}) para usar los que ya tiene el\n// backend. Los textos llegan ya traducidos (label, options[].label); los de la casa salen de `t` (common.filterDrawer).\n//\n// Puro (sin React): se prueba con node (filterDrawerFields.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/** Los tipos de campo del cajón. */\nexport const FILTER_FIELD_KIND = Object.freeze({\n    text: 'text', select: 'select', multiSelect: 'multiSelect', catalog: 'catalog', checkboxes: 'checkboxes',\n    numberRange: 'numberRange', dateRange: 'dateRange', comparison: 'comparison', custom: 'custom',\n});\n\n/** Los operadores de un campo de comparación, como viajan ('gte:500'). */\nexport const COMPARISON_OPERATOR = Object.freeze({equals: 'eq', greaterThan: 'gt', greaterOrEqual: 'gte', lessThan: 'lt', lessOrEqual: 'lte'});\n\n// cómo se dice cada operador en un chip, corto\nconst OPERATOR_SYMBOLS = Object.freeze({eq: '=', gt: '>', gte: '≥', lt: '<', lte: '≤'});\nconst COMPARISON_SEPARATOR = ':';\n// los que guardan una lista: así los lee la tabla en la dirección\nconst LIST_KINDS = new Set([FILTER_FIELD_KIND.multiSelect, FILTER_FIELD_KIND.checkboxes]);\n\n/**\n * ¿El campo guarda una lista?\n *\n * @param {{kind: string, multiple?: boolean}} field\n * @returns {boolean}\n */\nexport function isListField(field) {\n    return LIST_KINDS.has(field.kind) || (field.kind === FILTER_FIELD_KIND.catalog && Boolean(field.multiple));\n}\n\n/**\n * Los nombres con que viaja un campo en los filtros: uno, o dos para un rango.\n *\n * @param {{name: string, kind: string, keys?: {from?: string, to?: string}}} field\n * @returns {string[]}\n */\nexport function filterKeysOf(field) {\n    if (field.kind === FILTER_FIELD_KIND.numberRange) {\n        return [field.keys?.from ?? `${field.name}_min`, field.keys?.to ?? `${field.name}_max`];\n    }\n    if (field.kind === FILTER_FIELD_KIND.dateRange) {\n        return [field.keys?.from ?? `${field.name}_from`, field.keys?.to ?? `${field.name}_to`];\n    }\n    return [field.name];\n}\n\n/**\n * Un valor de comparación ('gte:500') en sus partes; null si viene vacío o no se entiende.\n *\n * @param {unknown} text\n * @returns {{operator: string, value: string}|null}\n */\nexport function comparisonOf(text) {\n    const [operator, ...rest] = String(text ?? '').split(COMPARISON_SEPARATOR);\n    const value = rest.join(COMPARISON_SEPARATOR);\n    return OPERATOR_SYMBOLS[operator] && value !== '' ? {operator, value} : null;\n}\n\n/**\n * Las partes de una comparación como viajan; '' si falta el número.\n *\n * @param {string} operator COMPARISON_OPERATOR\n * @param {string} value\n * @returns {string}\n */\nexport function comparisonTextOf(operator, value) {\n    return value === '' || value === null || value === undefined ? '' : `${operator}${COMPARISON_SEPARATOR}${value}`;\n}\n\n/**\n * ¿Ese valor de filtro está puesto? Un texto vacío o una lista vacía no cuentan.\n *\n * @param {unknown} value\n * @returns {boolean}\n */\nexport function isFilterValueSet(value) {\n    return Array.isArray(value) ? value.length > 0 : value !== '' && value !== null && value !== undefined;\n}\n\n/**\n * Los tipos de filtro para ServerTable (filterKinds): los de lista se leen como lista en la dirección.\n *\n * @param {object[]} fields\n * @returns {Record<string, string>}\n */\nexport function filterDrawerKindsOf(fields) {\n    return Object.fromEntries(fields.filter(isListField).map((field) => [field.name, 'multiSelect']));\n}\n\n/**\n * Lo que hay en los filtros para los campos del cajón (lo demás no se toca).\n *\n * @param {object[]} fields\n * @param {Record<string, unknown>} filters\n * @returns {Record<string, unknown>}\n */\nexport function drawerValuesOf(fields, filters) {\n    return Object.fromEntries(fields.flatMap((field) => filterKeysOf(field).map((key) => [key, filters?.[key] ?? (isListField(field) ? [] : '')])));\n}\n\n/**\n * Los campos del cajón vacíos: lo que deja «Limpiar».\n *\n * @param {object[]} fields\n * @returns {Record<string, unknown>}\n */\nexport function emptyDrawerValuesOf(fields) {\n    return drawerValuesOf(fields, {});\n}\n\n/**\n * Los campos del cajón vacíos, para sumarlos a filterDefaults de ServerTable: la tabla solo guarda en la dirección los\n * filtros que declara ahí.\n *\n * @param {object[]} fields\n * @returns {Record<string, unknown>}\n */\nexport function filterDrawerDefaultsOf(fields) {\n    return emptyDrawerValuesOf(fields);\n}\n\n/**\n * Cuántos campos del cajón tienen algo puesto (un rango con «desde» y «hasta» cuenta uno): el número del botón «Filtros».\n *\n * @param {object[]} fields\n * @param {Record<string, unknown>} filters\n * @returns {number}\n */\nexport function activeDrawerFilterCountOf(fields, filters) {\n    return fields.filter((field) => filterKeysOf(field).some((key) => isFilterValueSet(filters?.[key]))).length;\n}\n\n/**\n * Los rangos que no tienen sentido («hasta» menor que «desde»): {llave de «hasta»: true}.\n *\n * @param {object[]} fields\n * @param {Record<string, unknown>} values\n * @returns {Record<string, boolean>}\n */\nexport function invalidRangesOf(fields, values) {\n    const invalid = {};\n    for (const field of fields) {\n        if (field.kind !== FILTER_FIELD_KIND.numberRange && field.kind !== FILTER_FIELD_KIND.dateRange) {\n            continue;\n        }\n        const [fromKey, toKey] = filterKeysOf(field);\n        const from = values?.[fromKey];\n        const to = values?.[toKey];\n        if (!isFilterValueSet(from) || !isFilterValueSet(to)) {\n            continue;\n        }\n        // los números como números y las fechas AAAA-MM-DD como texto (ya se ordenan solas)\n        const isBackwards = field.kind === FILTER_FIELD_KIND.numberRange ? Number(to) < Number(from) : String(to) < String(from);\n        if (isBackwards) {\n            invalid[toKey] = true;\n        }\n    }\n    return invalid;\n}\n\n/**\n * Los chips de los campos del cajón, con la forma de buildChipConfig: cada valor con su etiqueta, ya dicho en palabras.\n *\n * @param {object[]} fields\n * @param {object} helpers\n * @param {(key: string, values?: object) => string} helpers.t el de common (filterDrawer.chipFrom, chipTo)\n * @param {(date: string) => string} [helpers.formatDate] cómo se ve una fecha\n * @returns {{text: Array<{key: string, label: string, format?: (value: string) => string}>, multiSelect: Array<{key: string, label: string, itemLabel?: (value: string) => string}>}}\n */\nexport function filterDrawerChipsOf(fields, {t, formatDate = (date) => date}) {\n    const text = [];\n    const multiSelect = [];\n    const optionLabelOf = (field, value) => field.options?.find((option) => (option.value ?? option.code) === value)?.label ?? String(value);\n    for (const field of fields) {\n        const withUnit = (value) => `${field.prefix ?? ''}${value}${field.suffix ? ` ${field.suffix}` : ''}`;\n        if (isListField(field)) {\n            multiSelect.push({key: field.name, label: field.label, itemLabel: (value) => optionLabelOf(field, value)});\n        } else if (field.kind === FILTER_FIELD_KIND.numberRange || field.kind === FILTER_FIELD_KIND.dateRange) {\n            const [fromKey, toKey] = filterKeysOf(field);\n            const format = field.kind === FILTER_FIELD_KIND.dateRange ? formatDate : withUnit;\n            text.push({key: fromKey, label: t('filterDrawer.chipFrom', {label: field.label}), format});\n            text.push({key: toKey, label: t('filterDrawer.chipTo', {label: field.label}), format});\n        } else if (field.kind === FILTER_FIELD_KIND.comparison) {\n            text.push({\n                key: field.name, label: field.label,\n                format: (value) => {\n                    const parts = comparisonOf(value);\n                    return parts ? `${OPERATOR_SYMBOLS[parts.operator]} ${withUnit(parts.value)}` : String(value);\n                },\n            });\n        } else if (field.kind === FILTER_FIELD_KIND.select || field.kind === FILTER_FIELD_KIND.catalog) {\n            text.push({key: field.name, label: field.label, format: (value) => optionLabelOf(field, value)});\n        } else {\n            text.push({key: field.name, label: field.label, ...(field.chipFormat && {format: field.chipFormat})});\n        }\n    }\n    return {text, multiSelect};\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/help/HelpButton.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import HelpOutlineRoundedIcon from "@mui/icons-material/HelpOutlineRounded";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+const THEME_NAME = "CalcitaHelpButton";
+const HelpButtonRoot = piecePart(THEME_NAME, "Root", IconButton);
+function HelpButtonContent(props) {
+  const { onClick, label, size = "medium", sx, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const text = label ?? t("help.button");
+  return /* @__PURE__ */ jsx(Tooltip, { title: text, children: /* @__PURE__ */ jsx(HelpButtonRoot, { "aria-label": text, onClick, size, sx, children: /* @__PURE__ */ jsx(HelpOutlineRoundedIcon, { fontSize: size === "small" ? "small" : "medium" }) }) });
+}
+const HelpButton = withPieceSlots(HelpButtonContent, THEME_NAME);
+export {
+  HelpButton as default
+};
+//# sourceMappingURL=HelpButton.js.map

package/dist/ui/help/HelpButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpButton.js","sources":["../../../src/ui/help/HelpButton.jsx"],"sourcesContent":["// El botón «?» que vuelve a abrir la ayuda de una pantalla (la del carrusel o la que sea): un ícono con su nombre para el\n// lector de pantalla y su globo al pasar el cursor.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaHelpButton con defaultProps, styleOverrides de\n// sus partes (root) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaHelpButton)\nconst THEME_NAME = 'CalcitaHelpButton';\nconst HelpButtonRoot = piecePart(THEME_NAME, 'Root', IconButton);\n\n/**\n * @param {object} props\n * @param {() => void} props.onClick\n * @param {string} [props.label] ya traducido; por omisión «Ayuda de esta pantalla»\n * @param {'small'|'medium'|'large'} [props.size]\n * @param {object} [props.sx]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction HelpButtonContent(props) {\n    const {onClick, label, size = 'medium', sx, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const text = label ?? t('help.button');\n    return (\n        <Tooltip title={text}>\n            <HelpButtonRoot aria-label={text} onClick={onClick} size={size} sx={sx}>\n                <HelpOutlineRoundedIcon fontSize={size === 'small' ? 'small' : 'medium'} />\n            </HelpButtonRoot>\n        </Tooltip>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst HelpButton = withPieceSlots(HelpButtonContent, THEME_NAME);\nexport default HelpButton;\n"],"names":[],"mappings":";;;;;;;;AAgBA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,QAAQ,UAAU;AAU/D,SAAS,kBAAkB,OAAO;AAC9B,QAAM,EAAC,SAAS,OAAO,OAAO,UAAU,IAAI,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACrG,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,OAAO,SAAS,EAAE,aAAa;AACrC,6BACK,SAAA,EAAQ,OAAO,MACZ,UAAA,oBAAC,gBAAA,EAAe,cAAY,MAAM,SAAkB,MAAY,IAC5D,UAAA,oBAAC,0BAAuB,UAAU,SAAS,UAAU,UAAU,UAAU,GAC7E,EAAA,CACJ;AAER;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/ui/help/HelpCarouselDialog.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import ButtonBase from "@mui/material/ButtonBase";
+import Checkbox from "@mui/material/Checkbox";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import Fade from "@mui/material/Fade";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+const HELP_CLOSE_REASON = Object.freeze({ finished: "finished", closed: "closed" });
+const SWIPE_DISTANCE = 50;
+const FADE_MILLISECONDS = 220;
+const MEDIA_HEIGHT = 200;
+const THEME_NAME = "CalcitaHelpCarouselDialog";
+const HelpMedia = piecePart(THEME_NAME, "Media", Box);
+const HelpContent = piecePart(THEME_NAME, "Content", DialogContent);
+const HelpDots = piecePart(THEME_NAME, "Dots", Stack);
+const HelpActions = piecePart(THEME_NAME, "Actions", DialogActions);
+function HelpCarouselDialogContent(props) {
+  const {
+    open,
+    onClose,
+    steps,
+    title,
+    showDontShowAgain = true,
+    onStepChange,
+    initialStep = 0,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const titleId = useId();
+  const [stepIndex, setStepIndex] = useState(initialStep);
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+  const reducesMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const swipeStartRef = useRef(null);
+  const lastIndex = steps.length - 1;
+  const step = steps[Math.min(stepIndex, lastIndex)];
+  useEffect(() => {
+    if (open) {
+      setStepIndex(initialStep);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      onStepChange?.(stepIndex);
+    }
+  }, [open, stepIndex]);
+  const goTo = (index) => setStepIndex(Math.max(0, Math.min(lastIndex, index)));
+  const close = (reason) => onClose(reason, { dontShowAgain });
+  const next = () => stepIndex >= lastIndex ? close(HELP_CLOSE_REASON.finished) : goTo(stepIndex + 1);
+  if (!step) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose: () => close(HELP_CLOSE_REASON.closed),
+      maxWidth: "sm",
+      fullWidth: true,
+      "aria-labelledby": titleId,
+      onKeyDown: (event) => {
+        if (event.key === "ArrowRight") {
+          goTo(stepIndex + 1);
+        } else if (event.key === "ArrowLeft") {
+          goTo(stepIndex - 1);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            onPointerDown: (event) => {
+              swipeStartRef.current = event.clientX;
+            },
+            onPointerUp: (event) => {
+              const distance = swipeStartRef.current === null ? 0 : event.clientX - swipeStartRef.current;
+              swipeStartRef.current = null;
+              if (Math.abs(distance) >= SWIPE_DISTANCE) {
+                goTo(stepIndex + (distance < 0 ? 1 : -1));
+              }
+            },
+            sx: { position: "relative", touchAction: "pan-y" },
+            children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  "aria-label": t("help.close"),
+                  onClick: () => close(HELP_CLOSE_REASON.closed),
+                  sx: { position: "absolute", top: 8, right: 8, zIndex: 1 },
+                  children: /* @__PURE__ */ jsx(CloseRoundedIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(Fade, { in: true, appear: !reducesMotion, timeout: reducesMotion ? 0 : FADE_MILLISECONDS, children: /* @__PURE__ */ jsxs("div", { children: [
+                (step.image || step.media) && /* @__PURE__ */ jsx(HelpMedia, { ownSx: { height: MEDIA_HEIGHT, display: "grid", placeItems: "center", overflow: "hidden", bgcolor: "action.hover" }, children: step.media ?? /* @__PURE__ */ jsx(Box, { component: "img", src: step.image, alt: step.imageAlt ?? "", sx: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }) }),
+                /* @__PURE__ */ jsxs(HelpContent, { ownSx: { pt: 2.5 }, children: [
+                  title && /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", component: "p", children: title }),
+                  /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "h6", component: "h2", sx: { pr: 4 }, children: step.title }),
+                  /* @__PURE__ */ jsx(Typography, { component: "div", color: "text.secondary", sx: { mt: 1 }, children: step.content })
+                ] })
+              ] }) }, stepIndex)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(HelpDots, { direction: "row", ownSx: { justifyContent: "center", gap: 1, pb: 1 }, role: "group", "aria-label": t("help.stepOf", { current: stepIndex + 1, total: steps.length }), children: steps.map((unused, index) => /* @__PURE__ */ jsx(
+          ButtonBase,
+          {
+            onClick: () => goTo(index),
+            "aria-label": t("help.goToStep", { number: index + 1 }),
+            "aria-current": index === stepIndex ? "step" : void 0,
+            sx: {
+              width: index === stepIndex ? 22 : 8,
+              height: 8,
+              borderRadius: 4,
+              transition: reducesMotion ? "none" : "width 200ms",
+              bgcolor: index === stepIndex ? "primary.main" : "action.disabled"
+            }
+          },
+          index
+        )) }),
+        /* @__PURE__ */ jsxs(HelpActions, { ownSx: { px: 3, pb: 2, gap: 1, flexWrap: "wrap" }, children: [
+          showDontShowAgain && /* @__PURE__ */ jsx(
+            FormControlLabel,
+            {
+              sx: { mr: "auto" },
+              label: t("help.dontShowAgain"),
+              control: /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: dontShowAgain, onChange: (event) => setDontShowAgain(event.target.checked) })
+            }
+          ),
+          stepIndex > 0 && /* @__PURE__ */ jsx(Button, { onClick: () => goTo(stepIndex - 1), children: t("help.back") }),
+          /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: next, autoFocus: true, children: stepIndex >= lastIndex ? t("help.done") : t("help.next") })
+        ] })
+      ]
+    }
+  );
+}
+const HelpCarouselDialog = withPieceSlots(HelpCarouselDialogContent, THEME_NAME);
+export {
+  HELP_CLOSE_REASON,
+  HelpCarouselDialog as default
+};
+//# sourceMappingURL=HelpCarouselDialog.js.map

package/dist/ui/help/HelpCarouselDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpCarouselDialog.js","sources":["../../../src/ui/help/HelpCarouselDialog.jsx"],"sourcesContent":["// La ayuda en carrusel: unos cuantos pasos, cada uno con su imagen o ilustración, su título y su texto, para explicar una\n// pantalla la primera vez que se entra (o cuando cambia). Se avanza con «Siguiente», con los puntos de abajo, con las\n// flechas del teclado o deslizando con el dedo; el último paso dice «Listo». Con «reducir movimiento» del sistema no hay\n// animación.\n//\n// Cuándo sale y que se recuerde lo hace useHelpCarousel; esta ventana solo enseña y avisa:\n//   onClose(reason, {dontShowAgain})   reason 'finished' (terminó) o 'closed' (la cerró antes); el proyecto puede guardarlo\n//                                      también en su servidor\n//   onStepChange(index)                cada paso que se ve\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaHelpCarouselDialog con defaultProps y\n// styleOverrides de sus partes: media, content, dots, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useId, useRef, useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Checkbox from '@mui/material/Checkbox';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport Fade from '@mui/material/Fade';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\n\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** Por qué se cerró la ayuda. */\nexport const HELP_CLOSE_REASON = Object.freeze({finished: 'finished', closed: 'closed'});\n\n// lo que hay que deslizar con el dedo para cambiar de paso (px)\nconst SWIPE_DISTANCE = 50;\nconst FADE_MILLISECONDS = 220;\nconst MEDIA_HEIGHT = 200;\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaHelpCarouselDialog)\nconst THEME_NAME = 'CalcitaHelpCarouselDialog';\nconst HelpMedia = piecePart(THEME_NAME, 'Media', Box);\nconst HelpContent = piecePart(THEME_NAME, 'Content', DialogContent);\nconst HelpDots = piecePart(THEME_NAME, 'Dots', Stack);\nconst HelpActions = piecePart(THEME_NAME, 'Actions', DialogActions);\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {(reason: string, details: {dontShowAgain: boolean}) => void} props.onClose HELP_CLOSE_REASON y si marcó «No volver a mostrar»\n * @param {Array<{title: string, content: import('react').ReactNode, image?: string, imageAlt?: string, media?: import('react').ReactNode}>} props.steps\n *     title y content ya traducidos; image (una dirección) o media (una ilustración propia) arriba\n * @param {string} [props.title] ya traducido: de qué es la ayuda («Cómo usar el tablero»), arriba de los pasos\n * @param {boolean} [props.showDontShowAgain] la casilla «No volver a mostrar al entrar» (por omisión sí)\n * @param {(index: number) => void} [props.onStepChange]\n * @param {number} [props.initialStep]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction HelpCarouselDialogContent(props) {\n    const {\n        open, onClose, steps, title, showDontShowAgain = true, onStepChange, initialStep = 0, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const titleId = useId();\n    const [stepIndex, setStepIndex] = useState(initialStep);\n    const [dontShowAgain, setDontShowAgain] = useState(false);\n    const reducesMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n    const swipeStartRef = useRef(null);\n    const lastIndex = steps.length - 1;\n    const step = steps[Math.min(stepIndex, lastIndex)];\n\n    // cada vez que se abre empieza en su primer paso\n    useEffect(() => {\n        if (open) {\n            setStepIndex(initialStep);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n    useEffect(() => {\n        if (open) {\n            onStepChange?.(stepIndex);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open, stepIndex]);\n\n    const goTo = (index) => setStepIndex(Math.max(0, Math.min(lastIndex, index)));\n    const close = (reason) => onClose(reason, {dontShowAgain});\n    const next = () => (stepIndex >= lastIndex ? close(HELP_CLOSE_REASON.finished) : goTo(stepIndex + 1));\n\n    if (!step) {\n        return null;\n    }\n    return (\n        <Dialog\n            open={open}\n            onClose={() => close(HELP_CLOSE_REASON.closed)}\n            maxWidth=\"sm\"\n            fullWidth\n            aria-labelledby={titleId}\n            onKeyDown={(event) => {\n                // las flechas cambian de paso (dentro de la casilla o de un botón también: no escriben nada)\n                if (event.key === 'ArrowRight') {\n                    goTo(stepIndex + 1);\n                } else if (event.key === 'ArrowLeft') {\n                    goTo(stepIndex - 1);\n                }\n            }}\n        >\n            <Box\n                onPointerDown={(event) => {\n                    swipeStartRef.current = event.clientX;\n                }}\n                onPointerUp={(event) => {\n                    const distance = swipeStartRef.current === null ? 0 : event.clientX - swipeStartRef.current;\n                    swipeStartRef.current = null;\n                    if (Math.abs(distance) >= SWIPE_DISTANCE) {\n                        goTo(stepIndex + (distance < 0 ? 1 : -1));\n                    }\n                }}\n                sx={{position: 'relative', touchAction: 'pan-y'}}\n            >\n                <IconButton aria-label={t('help.close')} onClick={() => close(HELP_CLOSE_REASON.closed)}\n                            sx={{position: 'absolute', top: 8, right: 8, zIndex: 1}}>\n                    <CloseRoundedIcon />\n                </IconButton>\n                <Fade key={stepIndex} in appear={!reducesMotion} timeout={reducesMotion ? 0 : FADE_MILLISECONDS}>\n                    <div>\n                        {(step.image || step.media) && (\n                            <HelpMedia ownSx={{height: MEDIA_HEIGHT, display: 'grid', placeItems: 'center', overflow: 'hidden', bgcolor: 'action.hover'}}>\n                                {step.media ?? <Box component=\"img\" src={step.image} alt={step.imageAlt ?? ''} sx={{maxWidth: '100%', maxHeight: '100%', objectFit: 'contain'}} />}\n                            </HelpMedia>\n                        )}\n                        <HelpContent ownSx={{pt: 2.5}}>\n                            {title && <Typography variant=\"overline\" color=\"text.secondary\" component=\"p\">{title}</Typography>}\n                            <Typography id={titleId} variant=\"h6\" component=\"h2\" sx={{pr: 4}}>{step.title}</Typography>\n                            <Typography component=\"div\" color=\"text.secondary\" sx={{mt: 1}}>{step.content}</Typography>\n                        </HelpContent>\n                    </div>\n                </Fade>\n            </Box>\n            {/* los puntos: dónde va y para saltar a un paso */}\n            <HelpDots direction=\"row\" ownSx={{justifyContent: 'center', gap: 1, pb: 1}} role=\"group\" aria-label={t('help.stepOf', {current: stepIndex + 1, total: steps.length})}>\n                {steps.map((unused, index) => (\n                    <ButtonBase key={index} onClick={() => goTo(index)} aria-label={t('help.goToStep', {number: index + 1})}\n                                aria-current={index === stepIndex ? 'step' : undefined}\n                                sx={{width: index === stepIndex ? 22 : 8, height: 8, borderRadius: 4, transition: reducesMotion ? 'none' : 'width 200ms',\n                                    bgcolor: index === stepIndex ? 'primary.main' : 'action.disabled'}} />\n                ))}\n            </HelpDots>\n            <HelpActions ownSx={{px: 3, pb: 2, gap: 1, flexWrap: 'wrap'}}>\n                {showDontShowAgain && (\n                    <FormControlLabel sx={{mr: 'auto'}} label={t('help.dontShowAgain')}\n                                      control={<Checkbox size=\"small\" checked={dontShowAgain} onChange={(event) => setDontShowAgain(event.target.checked)} />} />\n                )}\n                {stepIndex > 0 && <Button onClick={() => goTo(stepIndex - 1)}>{t('help.back')}</Button>}\n                <Button variant=\"contained\" onClick={next} autoFocus>\n                    {stepIndex >= lastIndex ? t('help.done') : t('help.next')}\n                </Button>\n            </HelpActions>\n        </Dialog>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst HelpCarouselDialog = withPieceSlots(HelpCarouselDialogContent, THEME_NAME);\nexport default HelpCarouselDialog;\n"],"names":[],"mappings":"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"}

package/dist/ui/help/useHelpCarousel.js

@@ -0,0 +1,25 @@
+"use client";
+import { useState } from "react";
+import { acceptedVersionOf, rememberAcceptedVersion } from "../../legal/consentStorage.js";
+const STORAGE_PREFIX = "calcita:help:";
+function useHelpCarousel({ helpKey, version = "1", autoOpen = true, seen = false }) {
+  const storageKey = `${STORAGE_PREFIX}${helpKey}`;
+  const wasSeen = seen || acceptedVersionOf(storageKey) === version;
+  const [open, setOpen] = useState(() => autoOpen && !wasSeen);
+  return {
+    open,
+    wasSeen,
+    openHelp: () => setOpen(true),
+    // terminarla la recuerda; cerrarla antes, solo con «No volver a mostrar»
+    closeHelp: (reason, { dontShowAgain = false } = {}) => {
+      setOpen(false);
+      if (reason === "finished" || dontShowAgain) {
+        rememberAcceptedVersion(storageKey, version);
+      }
+    }
+  };
+}
+export {
+  useHelpCarousel
+};
+//# sourceMappingURL=useHelpCarousel.js.map

package/dist/ui/help/useHelpCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHelpCarousel.js","sources":["../../../src/ui/help/useHelpCarousel.js"],"sourcesContent":["// Cuándo sale la ayuda en carrusel (HelpCarouselDialog): sola la primera vez que se entra, y otra vez cuando cambia\n// (versión nueva), hasta que la persona la termina o marca «No volver a mostrar». Se recuerda en este navegador; si el\n// proyecto ya sabe en su servidor que la persona la vio (como el «primeras instrucciones» de un usuario), lo pasa en seen\n// y manda.\n//\n//   const help = useHelpCarousel({helpKey: 'tasks', version: '2'});\n//   <HelpButton onClick={help.openHelp} />\n//   <HelpCarouselDialog open={help.open} onClose={help.closeHelp} steps={…} />\n//\n// Hook genérico: function (regla de la casa).\nimport {useState} from 'react';\n\nimport {acceptedVersionOf, rememberAcceptedVersion} from '@/legal/consentStorage.js';\n\nconst STORAGE_PREFIX = 'calcita:help:';\n\n/**\n * @param {object} options\n * @param {string} options.helpKey de qué pantalla es la ayuda ('tasks'): una llave por ayuda\n * @param {string} [options.version] súbala cuando la ayuda cambie y deba volver a salir\n * @param {boolean} [options.autoOpen] que salga sola la primera vez (por omisión sí)\n * @param {boolean} [options.seen] lo que sabe el servidor del proyecto: true = ya la vio (no sale sola)\n * @returns {{open: boolean, openHelp: () => void, closeHelp: (reason?: string, details?: {dontShowAgain: boolean}) => void, wasSeen: boolean}}\n */\nexport function useHelpCarousel({helpKey, version = '1', autoOpen = true, seen = false}) {\n    const storageKey = `${STORAGE_PREFIX}${helpKey}`;\n    const wasSeen = seen || acceptedVersionOf(storageKey) === version;\n    const [open, setOpen] = useState(() => autoOpen && !wasSeen);\n\n    return {\n        open,\n        wasSeen,\n        openHelp: () => setOpen(true),\n        // terminarla la recuerda; cerrarla antes, solo con «No volver a mostrar»\n        closeHelp: (reason, {dontShowAgain = false} = {}) => {\n            setOpen(false);\n            if (reason === 'finished' || dontShowAgain) {\n                rememberAcceptedVersion(storageKey, version);\n            }\n        },\n    };\n}\n"],"names":[],"mappings":";;;AAcA,MAAM,iBAAiB;AAUhB,SAAS,gBAAgB,EAAC,SAAS,UAAU,KAAK,WAAW,MAAM,OAAO,MAAK,GAAG;AACrF,QAAM,aAAa,GAAG,cAAc,GAAG,OAAO;AAC9C,QAAM,UAAU,QAAQ,kBAAkB,UAAU,MAAM;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,YAAY,CAAC,OAAO;AAE3D,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA,UAAU,MAAM,QAAQ,IAAI;AAAA;AAAA,IAE5B,WAAW,CAAC,QAAQ,EAAC,gBAAgB,MAAK,IAAI,CAAA,MAAO;AACjD,cAAQ,KAAK;AACb,UAAI,WAAW,cAAc,eAAe;AACxC,gCAAwB,YAAY,OAAO;AAAA,MAC/C;AAAA,IACJ;AAAA,EACR;AACA;"}

package/dist/ui/labels/IconBadge.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Tooltip from "@mui/material/Tooltip";
+import { styled, useThemeProps } from "@mui/material/styles";
+import { lookup, labelOf } from "../../dictionaries/dictionaries.js";
+import { paletteOf } from "../../theme/components/paletteOf.js";
+import { accentTextStylesOf } from "../../theme/glassSurface.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+const ICON_BADGE_VARIANT = Object.freeze({ outlined: "outlined", soft: "soft", plain: "plain" });
+const PALETTE_TONES = ["primary", "secondary", "success", "warning", "error", "info"];
+const SOFT_FILL_PERCENT = 10;
+const SIZES = Object.freeze({
+  small: { fontSize: 12, iconSize: 16, paddingBlock: 2, paddingInline: 8, gap: 4 },
+  medium: { fontSize: 14, iconSize: 20, paddingBlock: 5, paddingInline: 10, gap: 6 }
+});
+const THEME_NAME = "CalcitaIconBadge";
+const ICON_BADGE_CLASSES = Object.freeze({ root: `${THEME_NAME}-root`, icon: `${THEME_NAME}-icon`, label: `${THEME_NAME}-label` });
+const IconBadgeRoot = styled("span", { name: THEME_NAME, slot: "Root" })(({ theme, ownerState }) => {
+  const palette = paletteOf(theme);
+  const tone = PALETTE_TONES.includes(ownerState.tone) ? palette[ownerState.tone] : null;
+  const size = SIZES[ownerState.size] ?? SIZES.small;
+  const isBoxed = ownerState.variant !== ICON_BADGE_VARIANT.plain;
+  const textColors = tone ? { ...accentTextStylesOf(theme, ownerState.tone), borderColor: "currentColor" } : { color: palette.text.secondary, borderColor: palette.divider };
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: size.gap,
+    maxWidth: "100%",
+    verticalAlign: "middle",
+    fontSize: size.fontSize,
+    fontWeight: 600,
+    lineHeight: 1.4,
+    whiteSpace: "nowrap",
+    ...textColors,
+    ...isBoxed && {
+      paddingBlock: size.paddingBlock,
+      paddingInline: size.paddingInline,
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: `color-mix(in srgb, ${tone?.main ?? palette.text.secondary} ${SOFT_FILL_PERCENT}%, transparent)`,
+      borderWidth: ownerState.variant === ICON_BADGE_VARIANT.outlined ? 1.5 : 0,
+      borderStyle: "solid"
+    }
+  };
+});
+const IconBadgeIcon = styled("span", { name: THEME_NAME, slot: "Icon" })(({ ownerState }) => {
+  const size = SIZES[ownerState.size] ?? SIZES.small;
+  return { display: "inline-flex", flexShrink: 0, "& svg": { fontSize: size.iconSize } };
+});
+const IconBadgeLabel = styled("span", { name: THEME_NAME, slot: "Label" })({ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" });
+function IconBadge(props) {
+  const {
+    dictionary,
+    value,
+    icon,
+    label,
+    tone = "primary",
+    variant = ICON_BADGE_VARIANT.outlined,
+    size = "small",
+    tooltip,
+    sx,
+    ...unknownProps
+  } = useThemeProps({ props, name: THEME_NAME });
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("dictionaries");
+  const entry = dictionary ? lookup(dictionary, value) : null;
+  const Icon = entry?.icon ?? icon;
+  const text = entry ? labelOf(entry, t) : label;
+  const explanation = tooltip ?? (entry ? t(entry.tooltipKey, { defaultValue: "" }) : null);
+  const ownerState = { tone: entry?.color ?? tone, variant, size };
+  const badge = /* @__PURE__ */ jsxs(IconBadgeRoot, { ownerState, className: ICON_BADGE_CLASSES.root, sx, children: [
+    Icon && /* @__PURE__ */ jsx(IconBadgeIcon, { ownerState, className: ICON_BADGE_CLASSES.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+    /* @__PURE__ */ jsx(IconBadgeLabel, { ownerState, className: ICON_BADGE_CLASSES.label, children: text })
+  ] });
+  return explanation ? /* @__PURE__ */ jsx(Tooltip, { title: explanation, children: badge }) : badge;
+}
+export {
+  ICON_BADGE_CLASSES,
+  ICON_BADGE_VARIANT,
+  IconBadge as default
+};
+//# sourceMappingURL=IconBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconBadge.js","sources":["../../../src/ui/labels/IconBadge.jsx"],"sourcesContent":["// La insignia: un ícono y un texto corto con el color de lo que significan («Envío asegurado», «Pago con tarjeta», «Requiere\n// factura»). Para destacar una característica de un registro en su encabezado o en su tarjeta; no es un botón.\n//\n// Tres estilos (variant):\n//   outlined   borde de su color y fondo tenue (por omisión): resalta en una tarjeta\n//   soft       solo el fondo tenue, sin borde: varias juntas sin ruido\n//   plain      sin caja, el ícono y el texto de su color: dentro de un renglón de texto\n// El texto va en su color oscurecido en claro y aclarado en oscuro, lo justo para leerse (accentTextStylesOf, la regla del\n// tema; con el tono «dark» de la paleta, el azul sin caja daba 4.28 : 1 sobre una tarjeta, medido).\n//\n// Desde un diccionario (la regla de la casa: etiqueta, tooltip, color e ícono salen de ahí): dictionary + value; la entrada\n// trae su ícono con dictionaryEntryOf(…, {icon}). O suelta: icon, label y tone.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaIconBadge con defaultProps y\n// styleOverrides de sus partes: root, icon, label.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Tooltip from '@mui/material/Tooltip';\nimport {styled, useThemeProps} from '@mui/material/styles';\n\nimport {labelOf, lookup} from '@/dictionaries/dictionaries.js';\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {accentTextStylesOf} from '@/theme/glassSurface.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** Los estilos de la insignia. */\nexport const ICON_BADGE_VARIANT = Object.freeze({outlined: 'outlined', soft: 'soft', plain: 'plain'});\n\n// los colores de la paleta que se pueden usar; otro (o «default») se pinta neutro, en gris\nconst PALETTE_TONES = ['primary', 'secondary', 'success', 'warning', 'error', 'info'];\n// cuánto del color lleva el fondo tenue\nconst SOFT_FILL_PERCENT = 10;\nconst SIZES = Object.freeze({\n    small: {fontSize: 12, iconSize: 16, paddingBlock: 2, paddingInline: 8, gap: 4},\n    medium: {fontSize: 14, iconSize: 20, paddingBlock: 5, paddingInline: 10, gap: 6},\n});\n\n// el nombre de la pieza en el tema (theme.components.CalcitaIconBadge) y sus clases fijas, para el CSS de un proyecto o una\n// prueba (como las de MUI: el nombre que pone styled no sale en la versión construida)\nconst THEME_NAME = 'CalcitaIconBadge';\nexport const ICON_BADGE_CLASSES = Object.freeze({root: `${THEME_NAME}-root`, icon: `${THEME_NAME}-icon`, label: `${THEME_NAME}-label`});\n\nconst IconBadgeRoot = styled('span', {name: THEME_NAME, slot: 'Root'})(({theme, ownerState}) => {\n    const palette = paletteOf(theme);\n    const tone = PALETTE_TONES.includes(ownerState.tone) ? palette[ownerState.tone] : null;\n    const size = SIZES[ownerState.size] ?? SIZES.small;\n    const isBoxed = ownerState.variant !== ICON_BADGE_VARIANT.plain;\n    // el texto y el borde: su color oscurecido en claro y aclarado en oscuro (borderColor: currentColor toma el mismo)\n    const textColors = tone\n        ? {...accentTextStylesOf(theme, ownerState.tone), borderColor: 'currentColor'}\n        : {color: palette.text.secondary, borderColor: palette.divider};\n    return {\n        display: 'inline-flex', alignItems: 'center', gap: size.gap, maxWidth: '100%', verticalAlign: 'middle',\n        fontSize: size.fontSize, fontWeight: 600, lineHeight: 1.4, whiteSpace: 'nowrap',\n        ...textColors,\n        ...(isBoxed && {\n            paddingBlock: size.paddingBlock, paddingInline: size.paddingInline, borderRadius: theme.shape.borderRadius,\n            backgroundColor: `color-mix(in srgb, ${tone?.main ?? palette.text.secondary} ${SOFT_FILL_PERCENT}%, transparent)`,\n            borderWidth: ownerState.variant === ICON_BADGE_VARIANT.outlined ? 1.5 : 0, borderStyle: 'solid',\n        }),\n    };\n});\nconst IconBadgeIcon = styled('span', {name: THEME_NAME, slot: 'Icon'})(({ownerState}) => {\n    const size = SIZES[ownerState.size] ?? SIZES.small;\n    return {display: 'inline-flex', flexShrink: 0, '& svg': {fontSize: size.iconSize}};\n});\n// el texto en su propio span: un nodo de texto suelto dentro de un flex se corta sin «…»\nconst IconBadgeLabel = styled('span', {name: THEME_NAME, slot: 'Label'})({minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'});\n\n/**\n * @param {object} props\n * @param {Record<string, object>} [props.dictionary] de donde sale la etiqueta, el tooltip, el color y el ícono\n * @param {string|null} [props.value] con dictionary: el código del API\n * @param {import('react').ElementType} [props.icon] suelta: el ícono (un componente, p. ej. VerifiedUserOutlinedIcon)\n * @param {import('react').ReactNode} [props.label] suelta: el texto, ya traducido\n * @param {'primary'|'secondary'|'success'|'warning'|'error'|'info'|'default'} [props.tone] suelta: el color\n * @param {'outlined'|'soft'|'plain'} [props.variant] ICON_BADGE_VARIANT\n * @param {'small'|'medium'} [props.size]\n * @param {import('react').ReactNode} [props.tooltip] lo que explica al pasar el cursor (con dictionary, el del diccionario)\n * @param {object} [props.sx]\n */\nexport default function IconBadge(props) {\n    const {\n        dictionary, value, icon, label, tone = 'primary', variant = ICON_BADGE_VARIANT.outlined, size = 'small', tooltip, sx,\n        ...unknownProps\n    } = useThemeProps({props, name: THEME_NAME});\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('dictionaries');\n    const entry = dictionary ? lookup(dictionary, value) : null;\n    const Icon = entry?.icon ?? icon;\n    const text = entry ? labelOf(entry, t) : label;\n    const explanation = tooltip ?? (entry ? t(entry.tooltipKey, {defaultValue: ''}) : null);\n    const ownerState = {tone: entry?.color ?? tone, variant, size};\n\n    const badge = (\n        <IconBadgeRoot ownerState={ownerState} className={ICON_BADGE_CLASSES.root} sx={sx}>\n            {Icon && <IconBadgeIcon ownerState={ownerState} className={ICON_BADGE_CLASSES.icon} aria-hidden=\"true\"><Icon /></IconBadgeIcon>}\n            <IconBadgeLabel ownerState={ownerState} className={ICON_BADGE_CLASSES.label}>{text}</IconBadgeLabel>\n        </IconBadgeRoot>\n    );\n    // sin explicación no se envuelve (un Tooltip vacío igual agrega listeners)\n    return explanation ? <Tooltip title={explanation}>{badge}</Tooltip> : badge;\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/labels/MarkedText.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { Fragment as Fragment$1, isValidElement, cloneElement, createElement } from "react";
+import { parseMarkedText } from "./markedTextPieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+function renderPieces(pieces, marks, keyPrefix) {
+  return pieces.map((piece, index) => {
+    const key = `${keyPrefix}${index}`;
+    if (piece.type === "text") {
+      return /* @__PURE__ */ jsx(Fragment$1, { children: piece.value }, key);
+    }
+    const children = piece.children.length > 0 ? renderPieces(piece.children, marks, `${key}.`) : void 0;
+    const mark = marks[piece.name];
+    if (isValidElement(mark)) {
+      return cloneElement(mark, { key }, children);
+    }
+    if (typeof mark === "function") {
+      return /* @__PURE__ */ jsx(Fragment$1, { children: mark(children) }, key);
+    }
+    return createElement(mark, { key }, children);
+  });
+}
+function MarkedText({ text, marks, ...unknownProps }) {
+  warnUnknownProps("MarkedText", unknownProps);
+  const pieces = parseMarkedText(text, Object.keys(marks ?? {}));
+  return /* @__PURE__ */ jsx(Fragment, { children: renderPieces(pieces, marks ?? {}, "") });
+}
+export {
+  MarkedText as default
+};
+//# sourceMappingURL=MarkedText.js.map