@stackcraftmx/calcita 0.47.0 → 0.52.0

package/dist/DataTable/columnWidths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnWidths.js","sources":["../../src/DataTable/columnWidths.js"],"sourcesContent":["// Cuánto mide una columna para que su texto más largo no se corte: se mide el texto con la letra de la página (en el\n// navegador, con un canvas) y se le suma lo que lleva alrededor. Sin navegador (al pintar en el servidor) se calcula por\n// letras: un poco de más es mejor que «Registrado pendiente de docum…».\n//\n// Funciones puras, no renderizan: function (regla de la casa). Pruebas en columnWidths.test.js.\n\n// la letra del estatus (StatusChip): 13 px de grosor medio\nconst STATUS_FONT_SIZE_PIXELS = 13;\nconst STATUS_FONT_WEIGHT = 500;\n// el ancho promedio de una letra de 13 px cuando no hay con qué medir\nconst AVERAGE_CHARACTER_WIDTH_PIXELS = 7.4;\n// lo que va alrededor del texto: el punto y su espacio (o el contorno del chip) y el respiro de la celda\nconst STATUS_EXTRA_PIXELS = Object.freeze({dot: 40, chip: 52});\n// el encabezado lleva además sus íconos de orden y de filtro\nconst HEADER_ICONS_PIXELS = 56;\n\nlet measuringContext = null;\n\n/**\n * El ancho de un texto en px con la letra de la página; sin navegador, por número de letras.\n *\n * @param {string} text\n * @param {{fontSize?: number, fontWeight?: number}} [options]\n * @returns {number}\n */\nexport function textWidthOf(text, {fontSize = STATUS_FONT_SIZE_PIXELS, fontWeight = STATUS_FONT_WEIGHT} = {}) {\n    const value = String(text ?? '');\n    if (typeof document === 'undefined') {\n        return value.length * AVERAGE_CHARACTER_WIDTH_PIXELS * (fontSize / STATUS_FONT_SIZE_PIXELS);\n    }\n    measuringContext ??= document.createElement('canvas').getContext('2d');\n    if (!measuringContext) {\n        return value.length * AVERAGE_CHARACTER_WIDTH_PIXELS * (fontSize / STATUS_FONT_SIZE_PIXELS);\n    }\n    const fontFamily = getComputedStyle(document.body).fontFamily || 'system-ui, sans-serif';\n    measuringContext.font = `${fontWeight} ${fontSize}px ${fontFamily}`;\n    return measuringContext.measureText(value).width;\n}\n\n/**\n * El ancho de una columna de estatus: el de su etiqueta más larga (o el del encabezado, con sus íconos) más lo de alrededor.\n *\n * @param {string[]} labels el encabezado primero y luego las etiquetas, ya traducidos\n * @param {{variant?: 'dot'|'chip'}} [options]\n * @returns {number} px, redondeado hacia arriba\n */\nexport function statusColumnWidthOf([header, ...labels], {variant = 'dot'} = {}) {\n    const extra = STATUS_EXTRA_PIXELS[variant] ?? STATUS_EXTRA_PIXELS.dot;\n    const widest = Math.max(0, ...labels.map((label) => textWidthOf(label) + extra));\n    const headerWidth = textWidthOf(header, {fontWeight: 600}) + HEADER_ICONS_PIXELS;\n    return Math.ceil(Math.max(widest, headerWidth));\n}\n"],"names":[],"mappings":"AAOA,MAAM,0BAA0B;AAChC,MAAM,qBAAqB;AAE3B,MAAM,iCAAiC;AAEvC,MAAM,sBAAsB,OAAO,OAAO,EAAC,KAAK,IAAI,MAAM,GAAE,CAAC;AAE7D,MAAM,sBAAsB;AAE5B,IAAI,mBAAmB;AAShB,SAAS,YAAY,MAAM,EAAC,WAAW,yBAAyB,aAAa,mBAAkB,IAAI,IAAI;AAC1G,QAAM,QAAQ,OAAO,QAAQ,EAAE;AAC/B,MAAI,OAAO,aAAa,aAAa;AACjC,WAAO,MAAM,SAAS,kCAAkC,WAAW;AAAA,EACvE;AACA,uBAAqB,SAAS,cAAc,QAAQ,EAAE,WAAW,IAAI;AACrE,MAAI,CAAC,kBAAkB;AACnB,WAAO,MAAM,SAAS,kCAAkC,WAAW;AAAA,EACvE;AACA,QAAM,aAAa,iBAAiB,SAAS,IAAI,EAAE,cAAc;AACjE,mBAAiB,OAAO,GAAG,UAAU,IAAI,QAAQ,MAAM,UAAU;AACjE,SAAO,iBAAiB,YAAY,KAAK,EAAE;AAC/C;AASO,SAAS,oBAAoB,CAAC,QAAQ,GAAG,MAAM,GAAG,EAAC,UAAU,MAAK,IAAI,IAAI;AAC7E,QAAM,QAAQ,oBAAoB,OAAO,KAAK,oBAAoB;AAClE,QAAM,SAAS,KAAK,IAAI,GAAG,GAAG,OAAO,IAAI,CAAC,UAAU,YAAY,KAAK,IAAI,KAAK,CAAC;AAC/E,QAAM,cAAc,YAAY,QAAQ,EAAC,YAAY,IAAG,CAAC,IAAI;AAC7D,SAAO,KAAK,KAAK,KAAK,IAAI,QAAQ,WAAW,CAAC;AAClD;"}

package/dist/DataTable/columns.js

@@ -8,9 +8,19 @@ import "./ColumnFilters/HeaderFilterPopover.js";
 import MultiSelectColumnFilter from "./ColumnFilters/MultiSelectColumnFilter.js";
 import SortableFilterHeader from "./ColumnFilters/SortableFilterHeader.js";
 import TextColumnFilter from "./ColumnFilters/TextColumnFilter.js";
+import { statusColumnWidthOf } from "./columnWidths.js";
+import StackedCell from "./StackedCell.js";
 import { useTableFilter } from "./filterContext.js";
 import { FILTER_KINDS, isFilterActive } from "./useTableState.js";
+import { labelOf, lookup } from "../dictionaries/dictionaries.js";
+import ActionsMenu from "../ui/actions/ActionsMenu.js";
+import DictionaryText from "../ui/labels/DictionaryText.js";
+import StatusChip from "../ui/labels/StatusChip.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const DETAIL_COLUMN_FIELD = "__detail";
+const ACTIONS_COLUMN_FIELD = "__actions";
+const ACTIONS_COLUMN_WIDTH = 56;
+const COLUMN_STACKED_KEY = "calcitaStacked";
 function activeCountOf(kind, value) {
   if (!isFilterActive(kind, value)) {
     return 0;
@@ -99,7 +109,7 @@ function DetailCell({ row, onOpen, ariaLabelOf }) {
 function detailColumn({ onOpen, ariaLabelOf, ...unknownOptions }) {
   warnUnknownProps("detailColumn", unknownOptions);
   return {
-    field: "__detail",
+    field: DETAIL_COLUMN_FIELD,
     headerName: "",
     sortable: false,
     filterable: false,
@@ -109,9 +119,45 @@ function detailColumn({ onOpen, ariaLabelOf, ...unknownOptions }) {
     renderCell: ({ row }) => /* @__PURE__ */ jsx(DetailCell, { row, onOpen, ariaLabelOf })
   };
 }
+function stackedColumn({ field, label, entries, sort = true, filter = true, ...gridColumnProps }) {
+  return {
+    ...textColumn({ field, label, sort, filter, ...gridColumnProps }),
+    [COLUMN_STACKED_KEY]: true,
+    renderCell: (params) => /* @__PURE__ */ jsx(StackedCell, { entries: entries(params.row, params.formattedValue ?? params.value) })
+  };
+}
+function statusColumn({ field, label, dictionary, t, short = false, variant = "dot", sort = true, filter = true, facetKey, ...gridColumnProps }) {
+  const labels = t ? Object.keys(dictionary).map((value) => labelOf(lookup(dictionary, value), t)) : [];
+  const width = gridColumnProps.width ?? (labels.length > 0 ? statusColumnWidthOf([label, ...labels], { variant }) : 160);
+  const renderOption = (value) => /* @__PURE__ */ jsx(DictionaryText, { dictionary, value });
+  const base = filter ? facetColumn({ field, label, facetKey, renderOption, sort, ...gridColumnProps, width }) : textColumn({ field, label, sort, filter: false, ...gridColumnProps, width });
+  return {
+    ...base,
+    renderCell: ({ row }) => /* @__PURE__ */ jsx(StatusChip, { dictionary, value: row[field], short, variant })
+  };
+}
+function actionsColumn({ label, actionsOf, labelOf: labelOfRow, width = ACTIONS_COLUMN_WIDTH, ...unknownOptions }) {
+  warnUnknownProps("actionsColumn", unknownOptions);
+  return {
+    field: ACTIONS_COLUMN_FIELD,
+    headerName: "",
+    sortable: false,
+    filterable: false,
+    disableColumnMenu: true,
+    width,
+    align: "center",
+    renderCell: ({ row }) => /* @__PURE__ */ jsx(ActionsMenu, { label: labelOfRow?.(row) ?? label, actions: actionsOf(row) })
+  };
+}
 export {
+  ACTIONS_COLUMN_FIELD,
+  COLUMN_STACKED_KEY,
+  DETAIL_COLUMN_FIELD,
+  actionsColumn,
   detailColumn,
   facetColumn,
+  stackedColumn,
+  statusColumn,
   textColumn
 };
 //# sourceMappingURL=columns.js.map

package/dist/DataTable/columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../src/DataTable/columns.jsx"],"sourcesContent":["// Armadores de columna para ServerTable: la definición del DataGrid + su encabezado con orden y filtro.\n//\n// El filtro vive en el ENCABEZADO de su columna porque ahí está el dato. Aquí solo se COMPONE: el encabezado, el\n// globo y cada tipo de filtro viven en ColumnFilters/, uno por archivo.\n//\n// OJO: sortable y filterable del DataGrid van en false siempre. El orden y el filtro los pide la tabla al SERVIDOR;\n// los nativos del DataGrid ordenarían y filtrarían solo la página que ya llegó.\n//\n// Armadores genéricos: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\n\nimport {MultiSelectColumnFilter, SortableFilterHeader, TextColumnFilter} from '@/DataTable/ColumnFilters';\nimport {useTableFilter} from '@/DataTable/filterContext.js';\nimport {FILTER_KINDS, isFilterActive} from '@/DataTable/useTableState.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** Cuántos valores tiene puestos esta columna (lo que muestra el badge). */\nfunction activeCountOf(kind, value) {\n    if (!isFilterActive(kind, value)) {\n        return 0;\n    }\n    return kind === FILTER_KINDS.multiSelect ? value.length : 1;\n}\n\n/** Lo que todo encabezado necesita del contexto de la tabla. */\nfunction useColumnHeader(field, kind) {\n    const {filters, setFilter, clearFilter, sortOrders, toggleSort, clearSort, facets} = useTableFilter();\n\n    return {\n        value: filters[field],\n        setValue: (value) => setFilter(field, value),\n        onClear: () => clearFilter(field),\n        sortEntry: sortOrders.find((sortOrder) => sortOrder.column === field),\n        onSort: () => toggleSort(field),\n        onClearSort: clearSort,\n        activeCount: activeCountOf(kind, filters[field]),\n        facets,\n    };\n}\n\nfunction TextHeader({field, label, sort, filter}) {\n    const header = useColumnHeader(field, FILTER_KINDS.text);\n\n    return (\n        <SortableFilterHeader label={label} sortable={sort} filterable={filter} sortEntry={header.sortEntry}\n                              onSort={header.onSort} onClearSort={header.onClearSort} activeCount={header.activeCount}\n                              onClear={header.onClear}>\n            <TextColumnFilter value={header.value ?? ''} onChange={header.setValue} />\n        </SortableFilterHeader>\n    );\n}\n\nfunction FacetHeader({field, label, facetKey, renderOption, sort}) {\n    const header = useColumnHeader(field, FILTER_KINDS.multiSelect);\n\n    return (\n        <SortableFilterHeader label={label} sortable={sort} sortEntry={header.sortEntry} onSort={header.onSort}\n                              onClearSort={header.onClearSort} activeCount={header.activeCount} onClear={header.onClear}>\n            <MultiSelectColumnFilter value={header.value ?? []} onChange={header.setValue}\n                                     options={header.facets[facetKey] ?? []} renderOption={renderOption} />\n        </SortableFilterHeader>\n    );\n}\n\n/**\n * Las props de columna del DataGrid que más se usan, con su tipo, y cualquier otra suya (Record). OJO: tipo propio y no\n * GridColDef del DataGrid: apuntar a sus tipos hace que un proyecto estricto (skipLibCheck: false) revise los internos del\n * DataGrid, que no compilan con TypeScript 7.\n *\n * @typedef {{width?: number, minWidth?: number, maxWidth?: number, flex?: number, align?: 'left'|'center'|'right', headerAlign?: 'left'|'center'|'right', valueFormatter?: (value: any, row: any) => string, valueGetter?: (value: any, row: any) => any, renderCell?: (params: any) => import('react').ReactNode} & Record<string, any>} GridColumnProps\n */\n\n/**\n * Columna de texto con orden y filtro \"contiene\" en el servidor.\n *\n * @param {{field: string, label: string, sort?: boolean, filter?: boolean} & GridColumnProps} columnDeclaration\n *     label ya traducido; lo demás son props de columna del DataGrid (width, flex, valueFormatter, renderCell…)\n */\nexport function textColumn({field, label, sort = true, filter = true, ...gridColumnProps}) {\n    return {\n        field,\n        headerName: label,\n        sortable: false,\n        filterable: false,\n        ...gridColumnProps,\n        renderHeader: () => <TextHeader field={field} label={label} sort={sort} filter={filter} />,\n    };\n}\n\n/**\n * Columna con filtro de opciones alimentado por las FACETAS del servidor.\n *\n * @param {{field: string, label: string, facetKey?: string, renderOption?: (value: string) => import('react').ReactNode, sort?: boolean} & GridColumnProps} columnDeclaration\n */\nexport function facetColumn({field, label, facetKey, renderOption, sort = true, ...gridColumnProps}) {\n    return {\n        field,\n        headerName: label,\n        sortable: false,\n        filterable: false,\n        ...gridColumnProps,\n        renderHeader: () => (\n            <FacetHeader field={field} label={label} facetKey={facetKey ?? field} renderOption={renderOption} sort={sort} />\n        ),\n    };\n}\n\nfunction DetailCell({row, onOpen, ariaLabelOf}) {\n    const {t} = useToolkitTranslation('table');\n    const ariaLabel = ariaLabelOf?.(row) ?? t('detail.ariaLabel');\n\n    return (\n        <Tooltip title={t('detail.tooltip')}>\n            <IconButton size=\"small\" aria-label={ariaLabel} onClick={() => onOpen(row)}>\n                <VisibilityOutlinedIcon fontSize=\"small\" />\n            </IconButton>\n        </Tooltip>\n    );\n}\n\n/**\n * Columna de acción al final de la fila: un icono que abre el detalle (la ruta propia del renglón). Un icono y no la\n * fila entera a propósito: la fila como botón se dispara al seleccionar texto y no se ve que se puede abrir.\n *\n * El globo del icono se cambia con los textos de la tabla (ServerTable texts={{detail: {tooltip: '…'}}}), no aquí.\n *\n * @param {{onOpen: (row: any) => void, ariaLabelOf?: (row: any) => string}} declaration ariaLabelOf ya traducido\n */\nexport function detailColumn({onOpen, ariaLabelOf, ...unknownOptions}) {\n    // un nombre que no existe (label, tooltip) se perdía sin decir nada: se avisa mientras se programa\n    warnUnknownProps('detailColumn', unknownOptions);\n    return {\n        field: '__detail',\n        headerName: '',\n        sortable: false,\n        filterable: false,\n        disableColumnMenu: true,\n        width: 64,\n        align: 'center',\n        renderCell: ({row}) => <DetailCell row={row} onOpen={onOpen} ariaLabelOf={ariaLabelOf} />,\n    };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"columns.js","sources":["../../src/DataTable/columns.jsx"],"sourcesContent":["// Armadores de columna para ServerTable: la definición del DataGrid + su encabezado con orden y filtro.\n//\n// El filtro vive en el ENCABEZADO de su columna porque ahí está el dato. Aquí solo se COMPONE: el encabezado, el\n// globo y cada tipo de filtro viven en ColumnFilters/, uno por archivo.\n//\n// OJO: sortable y filterable del DataGrid van en false siempre. El orden y el filtro los pide la tabla al SERVIDOR;\n// los nativos del DataGrid ordenarían y filtrarían solo la página que ya llegó.\n//\n// Armadores genéricos: function (regla de la casa).\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\n\nimport {MultiSelectColumnFilter, SortableFilterHeader, TextColumnFilter} from '@/DataTable/ColumnFilters';\nimport {statusColumnWidthOf} from '@/DataTable/columnWidths.js';\nimport StackedCell from '@/DataTable/StackedCell.jsx';\nimport {useTableFilter} from '@/DataTable/filterContext.js';\nimport {FILTER_KINDS, isFilterActive} from '@/DataTable/useTableState.js';\nimport {labelOf, lookup} from '@/dictionaries/dictionaries.js';\nimport ActionsMenu from '@/ui/actions/ActionsMenu.jsx';\nimport DictionaryText from '@/ui/labels/DictionaryText.jsx';\nimport StatusChip from '@/ui/labels/StatusChip.jsx';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** El campo de las columnas de la casa que no son datos: para nombrarlas en fixedColumn ({fixedColumn: [ACTIONS_COLUMN_FIELD, …]}). */\nexport const DETAIL_COLUMN_FIELD = '__detail';\nexport const ACTIONS_COLUMN_FIELD = '__actions';\n// el ancho de la columna del «⋯»: el botón de 34 px y su respiro\nconst ACTIONS_COLUMN_WIDTH = 56;\n// la marca que deja una columna de datos apilados: con ella la tabla pone los renglones a su alto (ServerTable)\nexport const COLUMN_STACKED_KEY = 'calcitaStacked';\n\n/** Cuántos valores tiene puestos esta columna (lo que muestra el badge). */\nfunction activeCountOf(kind, value) {\n    if (!isFilterActive(kind, value)) {\n        return 0;\n    }\n    return kind === FILTER_KINDS.multiSelect ? value.length : 1;\n}\n\n/** Lo que todo encabezado necesita del contexto de la tabla. */\nfunction useColumnHeader(field, kind) {\n    const {filters, setFilter, clearFilter, sortOrders, toggleSort, clearSort, facets} = useTableFilter();\n\n    return {\n        value: filters[field],\n        setValue: (value) => setFilter(field, value),\n        onClear: () => clearFilter(field),\n        sortEntry: sortOrders.find((sortOrder) => sortOrder.column === field),\n        onSort: () => toggleSort(field),\n        onClearSort: clearSort,\n        activeCount: activeCountOf(kind, filters[field]),\n        facets,\n    };\n}\n\nfunction TextHeader({field, label, sort, filter}) {\n    const header = useColumnHeader(field, FILTER_KINDS.text);\n\n    return (\n        <SortableFilterHeader label={label} sortable={sort} filterable={filter} sortEntry={header.sortEntry}\n                              onSort={header.onSort} onClearSort={header.onClearSort} activeCount={header.activeCount}\n                              onClear={header.onClear}>\n            <TextColumnFilter value={header.value ?? ''} onChange={header.setValue} />\n        </SortableFilterHeader>\n    );\n}\n\nfunction FacetHeader({field, label, facetKey, renderOption, sort}) {\n    const header = useColumnHeader(field, FILTER_KINDS.multiSelect);\n\n    return (\n        <SortableFilterHeader label={label} sortable={sort} sortEntry={header.sortEntry} onSort={header.onSort}\n                              onClearSort={header.onClearSort} activeCount={header.activeCount} onClear={header.onClear}>\n            <MultiSelectColumnFilter value={header.value ?? []} onChange={header.setValue}\n                                     options={header.facets[facetKey] ?? []} renderOption={renderOption} />\n        </SortableFilterHeader>\n    );\n}\n\n/**\n * Las props de columna del DataGrid que más se usan, con su tipo, y cualquier otra suya (Record). OJO: tipo propio y no\n * GridColDef del DataGrid: apuntar a sus tipos hace que un proyecto estricto (skipLibCheck: false) revise los internos del\n * DataGrid, que no compilan con TypeScript 7.\n *\n * @typedef {{width?: number, minWidth?: number, maxWidth?: number, flex?: number, align?: 'left'|'center'|'right', headerAlign?: 'left'|'center'|'right', valueFormatter?: (value: any, row: any) => string, valueGetter?: (value: any, row: any) => any, renderCell?: (params: any) => import('react').ReactNode} & Record<string, any>} GridColumnProps\n */\n\n/**\n * Columna de texto con orden y filtro \"contiene\" en el servidor.\n *\n * @param {{field: string, label: string, sort?: boolean, filter?: boolean} & GridColumnProps} columnDeclaration\n *     label ya traducido; lo demás son props de columna del DataGrid (width, flex, valueFormatter, renderCell…)\n */\nexport function textColumn({field, label, sort = true, filter = true, ...gridColumnProps}) {\n    return {\n        field,\n        headerName: label,\n        sortable: false,\n        filterable: false,\n        ...gridColumnProps,\n        renderHeader: () => <TextHeader field={field} label={label} sort={sort} filter={filter} />,\n    };\n}\n\n/**\n * Columna con filtro de opciones alimentado por las FACETAS del servidor.\n *\n * @param {{field: string, label: string, facetKey?: string, renderOption?: (value: string) => import('react').ReactNode, sort?: boolean} & GridColumnProps} columnDeclaration\n */\nexport function facetColumn({field, label, facetKey, renderOption, sort = true, ...gridColumnProps}) {\n    return {\n        field,\n        headerName: label,\n        sortable: false,\n        filterable: false,\n        ...gridColumnProps,\n        renderHeader: () => (\n            <FacetHeader field={field} label={label} facetKey={facetKey ?? field} renderOption={renderOption} sort={sort} />\n        ),\n    };\n}\n\nfunction DetailCell({row, onOpen, ariaLabelOf}) {\n    const {t} = useToolkitTranslation('table');\n    const ariaLabel = ariaLabelOf?.(row) ?? t('detail.ariaLabel');\n\n    return (\n        <Tooltip title={t('detail.tooltip')}>\n            <IconButton size=\"small\" aria-label={ariaLabel} onClick={() => onOpen(row)}>\n                <VisibilityOutlinedIcon fontSize=\"small\" />\n            </IconButton>\n        </Tooltip>\n    );\n}\n\n/**\n * Columna de acción al final de la fila: un icono que abre el detalle (la ruta propia del renglón). Un icono y no la\n * fila entera a propósito: la fila como botón se dispara al seleccionar texto y no se ve que se puede abrir.\n *\n * El globo del icono se cambia con los textos de la tabla (ServerTable texts={{detail: {tooltip: '…'}}}), no aquí.\n *\n * @param {{onOpen: (row: any) => void, ariaLabelOf?: (row: any) => string}} declaration ariaLabelOf ya traducido\n */\nexport function detailColumn({onOpen, ariaLabelOf, ...unknownOptions}) {\n    // un nombre que no existe (label, tooltip) se perdía sin decir nada: se avisa mientras se programa\n    warnUnknownProps('detailColumn', unknownOptions);\n    return {\n        field: DETAIL_COLUMN_FIELD,\n        headerName: '',\n        sortable: false,\n        filterable: false,\n        disableColumnMenu: true,\n        width: 64,\n        align: 'center',\n        renderCell: ({row}) => <DetailCell row={row} onOpen={onOpen} ariaLabelOf={ariaLabelOf} />,\n    };\n}\n\n/**\n * Columna de datos apilados: los que se leen de corrido en un solo lugar, uno debajo del otro, los que hagan falta (la\n * empresa, su RFC y su régimen; el contacto, su correo y su teléfono). El primero es el principal (en negritas) y los demás\n * van en gris. Cada dato va solo, si el encabezado ya dice qué son, o con su etiqueta arriba ({label, value}) si el\n * encabezado nombra al grupo. Con orden y filtro en el servidor como textColumn, por el campo de la columna. La tabla pone\n * los renglones a su alto sola.\n *\n *   stackedColumn({field: 'business_name', label: 'Empresa', entries: (row) => [row.business_name, row.rfc, row.regime]})\n *   stackedColumn({field: 'created_at', label: 'Fechas', entries: (row) => [\n *       {label: 'Alta', value: formatDate(row.created_at)},\n *       {label: 'Último cambio', value: formatDate(row.updated_at)},\n *   ]})\n *\n * @param {{field: string, label: string, entries: (row: any, value: any) => import('@/DataTable/StackedCell.jsx').StackedEntry[], sort?: boolean, filter?: boolean} & GridColumnProps} columnDeclaration\n *     entries: los datos de cada renglón en orden; `value` es el de la columna ya con su valueFormatter. Un dato vacío\n *     no se pinta (salvo el principal o uno con etiqueta: enseñan «—»)\n */\nexport function stackedColumn({field, label, entries, sort = true, filter = true, ...gridColumnProps}) {\n    return {\n        ...textColumn({field, label, sort, filter, ...gridColumnProps}),\n        [COLUMN_STACKED_KEY]: true,\n        renderCell: (params) => <StackedCell entries={entries(params.row, params.formattedValue ?? params.value)} />,\n    };\n}\n\n/**\n * Columna de estatus desde un diccionario: el estatus con su color y su explicación (StatusChip), filtro con las facetas del\n * servidor (como facetColumn) y un ancho que alcanza para la etiqueta más larga del diccionario. Con `t` el ancho se mide\n * con las etiquetas en el idioma de la pantalla (sin él, 160 px o el `width` que se le dé).\n *\n *   statusColumn({field: 'status', label: 'Estado', dictionary: ORDER_STATUS, t})\n *\n * @param {{field: string, label: string, dictionary: Record<string, object>, t?: (key: string) => string, short?: boolean, variant?: 'dot'|'chip', sort?: boolean, filter?: boolean, facetKey?: string} & GridColumnProps} columnDeclaration\n *     filter false: sin filtro en el encabezado (cuando el servidor no da facetas de este campo)\n */\nexport function statusColumn({field, label, dictionary, t, short = false, variant = 'dot', sort = true, filter = true, facetKey, ...gridColumnProps}) {\n    const labels = t ? Object.keys(dictionary).map((value) => labelOf(lookup(dictionary, value), t)) : [];\n    const width = gridColumnProps.width ?? (labels.length > 0 ? statusColumnWidthOf([label, ...labels], {variant}) : 160);\n    const renderOption = (value) => <DictionaryText dictionary={dictionary} value={value} />;\n    const base = filter\n        ? facetColumn({field, label, facetKey, renderOption, sort, ...gridColumnProps, width})\n        : textColumn({field, label, sort, filter: false, ...gridColumnProps, width});\n    return {\n        ...base,\n        renderCell: ({row}) => <StatusChip dictionary={dictionary} value={row[field]} short={short} variant={variant} />,\n    };\n}\n\n/**\n * Columna con el menú «⋯» de cada renglón (ActionsMenu): las acciones van en su columna con un ícono, no con clic en toda\n * la fila. Va de un ancho fijo, así se puede dejar pegada al deslizar: fixedColumn={[ACTIONS_COLUMN_FIELD, 'company']}.\n *\n *   actionsColumn({label: 'Acciones del cliente', actionsOf: (row) => [{key: 'open', label: 'Abrir', to: `/clientes/${row.id}`}]})\n *\n * @param {object} declaration\n * @param {string} declaration.label el nombre del botón (lector de pantalla y su globo), ya traducido\n * @param {(row: any) => Array<object>} declaration.actionsOf las acciones de ese renglón, con la forma de ActionsMenu\n * @param {(row: any) => string} [declaration.labelOf] el nombre del botón por renglón («Acciones de Acme»)\n * @param {number} [declaration.width] por omisión 56\n */\nexport function actionsColumn({label, actionsOf, labelOf: labelOfRow, width = ACTIONS_COLUMN_WIDTH, ...unknownOptions}) {\n    warnUnknownProps('actionsColumn', unknownOptions);\n    return {\n        field: ACTIONS_COLUMN_FIELD,\n        headerName: '',\n        sortable: false,\n        filterable: false,\n        disableColumnMenu: true,\n        width,\n        align: 'center',\n        renderCell: ({row}) => <ActionsMenu label={labelOfRow?.(row) ?? label} actions={actionsOf(row)} />,\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/DataTable/fixedColumns.js

@@ -0,0 +1,24 @@
+const DATA_GRID_DEFAULT_COLUMN_WIDTH = 100;
+function fixedFieldsOf(fixedColumn) {
+  if (!fixedColumn) {
+    return [];
+  }
+  return Array.isArray(fixedColumn) ? fixedColumn.filter(Boolean) : [fixedColumn];
+}
+function fixedColumnOffsetsOf(fields, columns, { startLeft = 0 } = {}) {
+  const byField = new Map(columns.map((column) => [column.field, column]));
+  let left = startLeft;
+  return fields.map((field, index) => {
+    const column = byField.get(field) ?? {};
+    const isLast = index === fields.length - 1;
+    const hasFixedWidth = typeof column.width === "number" && !column.flex;
+    const placed = { field, left, isLast, hasUnknownWidth: !isLast && !hasFixedWidth };
+    left += hasFixedWidth ? column.width : column.minWidth ?? column.width ?? DATA_GRID_DEFAULT_COLUMN_WIDTH;
+    return placed;
+  });
+}
+export {
+  fixedColumnOffsetsOf,
+  fixedFieldsOf
+};
+//# sourceMappingURL=fixedColumns.js.map

package/dist/DataTable/fixedColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixedColumns.js","sources":["../../src/DataTable/fixedColumns.js"],"sourcesContent":["// Dónde se pega cada columna fija de la tabla al deslizar de lado: la primera junto a la orilla (o junto a la casilla de\n// elegir renglones) y cada siguiente corrida lo que miden las de antes.\n//\n// OJO: el desplazamiento sale del ancho que la columna declara (`width`). Una columna fija que NO es la última y no trae un\n// ancho fijo (va con `flex` o sin ancho) no se puede sumar: su ancho real lo decide el navegador. Ahí se usa su minWidth\n// (o el de siempre del DataGrid, 100 px) y se avisa: la que sigue podría quedar encima. La ÚLTIMA puede ser flexible\n// (su ancho no mueve a nadie).\n//\n// Funciones puras, no renderizan: function (regla de la casa).\n\n// el ancho de una columna del DataGrid que no dice el suyo\nconst DATA_GRID_DEFAULT_COLUMN_WIDTH = 100;\n\n/**\n * Los campos fijos como lista, con el orden en que se dieron.\n *\n * @param {string|string[]|null|undefined} fixedColumn\n * @returns {string[]}\n */\nexport function fixedFieldsOf(fixedColumn) {\n    if (!fixedColumn) {\n        return [];\n    }\n    return Array.isArray(fixedColumn) ? fixedColumn.filter(Boolean) : [fixedColumn];\n}\n\n/**\n * Cada columna fija con su `left` en px.\n *\n * @param {string[]} fields los campos fijos, de izquierda a derecha\n * @param {Array<{field: string, width?: number, minWidth?: number, flex?: number}>} columns las columnas de la tabla\n * @param {{startLeft?: number}} [options] startLeft: lo que ya va pegado antes (la casilla de elegir renglones)\n * @returns {Array<{field: string, left: number, isLast: boolean, hasUnknownWidth: boolean}>} hasUnknownWidth: no es la última\n *     y su ancho no es fijo (la siguiente podría encimarse)\n */\nexport function fixedColumnOffsetsOf(fields, columns, {startLeft = 0} = {}) {\n    const byField = new Map(columns.map((column) => [column.field, column]));\n    let left = startLeft;\n    return fields.map((field, index) => {\n        const column = byField.get(field) ?? {};\n        const isLast = index === fields.length - 1;\n        const hasFixedWidth = typeof column.width === 'number' && !column.flex;\n        const placed = {field, left, isLast, hasUnknownWidth: !isLast && !hasFixedWidth};\n        left += hasFixedWidth ? column.width : (column.minWidth ?? column.width ?? DATA_GRID_DEFAULT_COLUMN_WIDTH);\n        return placed;\n    });\n}\n"],"names":[],"mappings":"AAWA,MAAM,iCAAiC;AAQhC,SAAS,cAAc,aAAa;AACvC,MAAI,CAAC,aAAa;AACd,WAAO,CAAA;AAAA,EACX;AACA,SAAO,MAAM,QAAQ,WAAW,IAAI,YAAY,OAAO,OAAO,IAAI,CAAC,WAAW;AAClF;AAWO,SAAS,qBAAqB,QAAQ,SAAS,EAAC,YAAY,EAAC,IAAI,IAAI;AACxE,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,OAAO,MAAM,CAAC,CAAC;AACvE,MAAI,OAAO;AACX,SAAO,OAAO,IAAI,CAAC,OAAO,UAAU;AAChC,UAAM,SAAS,QAAQ,IAAI,KAAK,KAAK,CAAA;AACrC,UAAM,SAAS,UAAU,OAAO,SAAS;AACzC,UAAM,gBAAgB,OAAO,OAAO,UAAU,YAAY,CAAC,OAAO;AAClE,UAAM,SAAS,EAAC,OAAO,MAAM,QAAQ,iBAAiB,CAAC,UAAU,CAAC,cAAa;AAC/E,YAAQ,gBAAgB,OAAO,QAAS,OAAO,YAAY,OAAO,SAAS;AAC3E,WAAO;AAAA,EACX,CAAC;AACL;"}

package/dist/DataTable/useTableView.js

@@ -0,0 +1,29 @@
+"use client";
+import { useState } from "react";
+import { useQueryState, parseAsStringLiteral } from "nuqs";
+const TABLE_VIEW = Object.freeze({ table: "table", cards: "cards" });
+const VIEWS = Object.freeze(Object.values(TABLE_VIEW));
+function useTableView({ prefix, view, defaultView = TABLE_VIEW.table, onViewChange }) {
+  const [urlView, setUrlView] = useQueryState(
+    `${prefix ?? "table"}_view`,
+    parseAsStringLiteral(VIEWS).withDefault(defaultView).withOptions({ history: "replace" })
+  );
+  const [localView, setLocalView] = useState(defaultView);
+  const currentView = view ?? (prefix ? urlView : localView);
+  const setView = (nextView) => {
+    if (view === void 0) {
+      if (prefix) {
+        setUrlView(nextView === defaultView ? null : nextView);
+      } else {
+        setLocalView(nextView);
+      }
+    }
+    onViewChange?.(nextView);
+  };
+  return { view: currentView, setView };
+}
+export {
+  TABLE_VIEW,
+  useTableView
+};
+//# sourceMappingURL=useTableView.js.map

package/dist/DataTable/useTableView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableView.js","sources":["../../src/DataTable/useTableView.js"],"sourcesContent":["// Cómo se ve la lista de la tabla: en tabla o en tarjetas (ServerTable con renderCard). Con `prefix` vive en la dirección\n// (?orders_view=cards: se comparte la liga y sobrevive a recargar) y cambiarla REEMPLAZA la entrada del historial: es la misma\n// lista vista de otra forma, «atrás» sale de ella. Sin prefijo, en memoria. Con `view` la decide la pantalla.\n//\n// Hook genérico: function (regla de la casa).\nimport {useState} from 'react';\nimport {parseAsStringLiteral, useQueryState} from 'nuqs';\n\n/** Las dos vistas de la lista. */\nexport const TABLE_VIEW = Object.freeze({table: 'table', cards: 'cards'});\nconst VIEWS = Object.freeze(Object.values(TABLE_VIEW));\n\n/**\n * @param {object} options\n * @param {string} [options.prefix] el de la tabla: con él, la vista va en la dirección\n * @param {'table'|'cards'} [options.view] la vista que decide la pantalla (controlada)\n * @param {'table'|'cards'} [options.defaultView] por omisión 'table'\n * @param {(view: 'table'|'cards') => void} [options.onViewChange]\n * @returns {{view: 'table'|'cards', setView: (view: 'table'|'cards') => void}}\n */\nexport function useTableView({prefix, view, defaultView = TABLE_VIEW.table, onViewChange}) {\n    // OJO: los dos se piden siempre (un hook no puede ir dentro de un if); se usa el que toca\n    const [urlView, setUrlView] = useQueryState(`${prefix ?? 'table'}_view`,\n        parseAsStringLiteral(VIEWS).withDefault(defaultView).withOptions({history: 'replace'}));\n    const [localView, setLocalView] = useState(defaultView);\n    const currentView = view ?? (prefix ? urlView : localView);\n\n    const setView = (nextView) => {\n        if (view === undefined) {\n            if (prefix) {\n                setUrlView(nextView === defaultView ? null : nextView);\n            } else {\n                setLocalView(nextView);\n            }\n        }\n        onViewChange?.(nextView);\n    };\n    return {view: currentView, setView};\n}\n"],"names":[],"mappings":";;;AASY,MAAC,aAAa,OAAO,OAAO,EAAC,OAAO,SAAS,OAAO,QAAO,CAAC;AACxE,MAAM,QAAQ,OAAO,OAAO,OAAO,OAAO,UAAU,CAAC;AAU9C,SAAS,aAAa,EAAC,QAAQ,MAAM,cAAc,WAAW,OAAO,aAAY,GAAG;AAEvF,QAAM,CAAC,SAAS,UAAU,IAAI;AAAA,IAAc,GAAG,UAAU,OAAO;AAAA,IAC5D,qBAAqB,KAAK,EAAE,YAAY,WAAW,EAAE,YAAY,EAAC,SAAS,UAAS,CAAC;AAAA,EAAC;AAC1F,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW;AACtD,QAAM,cAAc,SAAS,SAAS,UAAU;AAEhD,QAAM,UAAU,CAAC,aAAa;AAC1B,QAAI,SAAS,QAAW;AACpB,UAAI,QAAQ;AACR,mBAAW,aAAa,cAAc,OAAO,QAAQ;AAAA,MACzD,OAAO;AACH,qBAAa,QAAQ;AAAA,MACzB;AAAA,IACJ;AACA,mBAAe,QAAQ;AAAA,EAC3B;AACA,SAAO,EAAC,MAAM,aAAa,QAAO;AACtC;"}

package/dist/access/PermissionMatrix.js

@@ -11,7 +11,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { groupStateOf, withPermissionGroup, withPermission } from "./permissionGroups.js";
 import ComponentTexts from "../toolkit/ComponentTexts.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 = "CalcitaPermissionMatrix";
 const PermissionsPermission = piecePart(THEME_NAME, "Permission", FormControlLabel);
@@ -83,12 +83,13 @@ function PermissionGroup({ group, value, onChange, isReadOnly }) {
     )) })
   ] });
 }
-function PermissionMatrix(props) {
+function PermissionMatrixContent(props) {
   const { groups, value, onChange, readOnly = false, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const isReadOnly = readOnly || !onChange;
   return /* @__PURE__ */ jsx(ComponentTexts, { namespace: "access", texts, children: /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: groups.map((group) => /* @__PURE__ */ jsx(PermissionGroup, { group, value, onChange, isReadOnly }, group.key)) }) });
 }
+const PermissionMatrix = withPieceSlots(PermissionMatrixContent, THEME_NAME);
 export {
   PermissionMatrix as default
 };

package/dist/access/PermissionMatrix.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionMatrix.js","sources":["../../src/access/PermissionMatrix.jsx"],"sourcesContent":["// Los permisos de un perfil, agrupados (un grupo por módulo), para la pantalla de «Perfiles y permisos»: cada grupo con\n// su casilla de «todos» (a medias si tiene algunos) y cuántos tiene, y cada permiso con su nombre y, si hace falta, qué\n// deja hacer en palabras normales.\n//\n//   <PermissionMatrix groups={PERMISSION_GROUPS} value={profile.abilities} onChange={setAbilities} />\n//\n// Los permisos son los mismos textos que piden los menu.js y las rutas (access: {ability: 'orders.view'}), así que lo que\n// se palomea aquí es lo que el menú enseña o esconde. La lista de grupos la arma el proyecto (RBAC propio); guardar es\n// cosa de la pantalla.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPermissionMatrix con defaultProps y\n// styleOverrides de sus partes: permission, checkbox, group, groupHeader, groupTitle, grid.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega ya traducido.\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Checkbox from '@mui/material/Checkbox';\nimport Chip from '@mui/material/Chip';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {groupStateOf, withPermission, withPermissionGroup} from '@/access/permissionGroups.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.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.CalcitaPermissionMatrix)\nconst THEME_NAME = 'CalcitaPermissionMatrix';\nconst PermissionsPermission = piecePart(THEME_NAME, 'Permission', FormControlLabel);\nconst PermissionsCheckbox = piecePart(THEME_NAME, 'Checkbox', Checkbox);\nconst PermissionsGroup = piecePart(THEME_NAME, 'Group', Paper);\nconst PermissionsGroupHeader = piecePart(THEME_NAME, 'GroupHeader', Stack);\nconst PermissionsGroupTitle = piecePart(THEME_NAME, 'GroupTitle', Typography);\nconst PermissionsGrid = piecePart(THEME_NAME, 'Grid', Box);\n\n/**\n * Un permiso: su casilla, su nombre y qué deja hacer.\n *\n * @param {{permission: {key: string, label: string, description?: string}, isGranted: boolean, readOnly: boolean, onToggle: (isGranted: boolean) => void}} props\n */\nfunction PermissionOption({permission, isGranted, readOnly, onToggle}) {\n    return (\n        <PermissionsPermission\n            ownSx={{alignItems: 'flex-start', m: 0, gap: 0.5}}\n            control={<PermissionsCheckbox size=\"small\" checked={isGranted} disabled={readOnly} onChange={(event) => onToggle(event.target.checked)}\n                               slotProps={{input: {'data-permission': permission.key}}} ownSx={{mt: -0.5}} />}\n            label={(\n                <Box>\n                    <Typography variant=\"body2\">{permission.label}</Typography>\n                    {permission.description && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{permission.description}</Typography>}\n                </Box>\n            )}\n        />\n    );\n}\n\n/**\n * Un grupo: su encabezado con «todos» y cuántos tiene, y sus permisos.\n *\n * OJO: es un grupo con role=\"group\" y no un <fieldset>: el navegador pinta el <legend> encima del borde y dejaba una franja\n * blanca arriba del encabezado.\n *\n * @param {{group: object, value: string[], onChange: Function, isReadOnly: boolean}} props\n */\nfunction PermissionGroup({group, value, onChange, isReadOnly}) {\n    const {t} = useToolkitTranslation('access');\n    const titleId = useId();\n    const state = groupStateOf(group, value);\n    return (\n        <PermissionsGroup variant=\"outlined\" role=\"group\" aria-labelledby={titleId} data-group={group.key} ownSx={{overflow: 'hidden'}}>\n            <PermissionsGroupHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', px: 1.5, py: 0.75, borderBottom: 1, borderColor: 'divider', bgcolor: 'action.hover'}}>\n                <Checkbox size=\"small\" checked={state.isAll} indeterminate={state.isSome} disabled={isReadOnly || state.total === 0}\n                          onChange={(event) => onChange(withPermissionGroup(value, group, event.target.checked))}\n                          slotProps={{input: {'aria-label': t('permissions.allOf', {group: group.label})}}} />\n                <PermissionsGroupTitle id={titleId} variant=\"subtitle2\" component=\"h3\" ownSx={{flexGrow: 1}}>{group.label}</PermissionsGroupTitle>\n                <Chip size=\"small\" label={t('permissions.countOf', {count: state.grantedCount, total: state.total})}\n                      color={state.grantedCount > 0 ? 'primary' : 'default'} variant={state.isAll ? 'filled' : 'outlined'} />\n            </PermissionsGroupHeader>\n            <PermissionsGrid ownSx={{display: 'grid', gridTemplateColumns: {xs: '1fr', md: 'repeat(2, minmax(0, 1fr))'}, gap: 1.5, p: 2}}>\n                {group.permissions.map((permission) => (\n                    <PermissionOption key={permission.key} permission={permission} isGranted={value.includes(permission.key)} readOnly={isReadOnly}\n                                      onToggle={(isGranted) => onChange(withPermission(value, permission.key, isGranted))} />\n                ))}\n            </PermissionsGrid>\n        </PermissionsGroup>\n    );\n}\n\n/**\n * @param {object} props\n * @param {Array<{key: string, label: string, permissions: Array<{key: string, label: string, description?: string}>}>} props.groups\n * @param {string[]} props.value los permisos del perfil\n * @param {(value: string[]) => void} [props.onChange] sin ella, o con readOnly, solo se ven\n * @param {boolean} [props.readOnly] un perfil que no se puede cambiar (el de administración)\n * @param {object} [props.texts] los textos que cambian, con la forma de `access` en los textos del paquete\n */\nexport default function PermissionMatrix(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPermissionMatrix.defaultProps) y encima lo que llega aquí\n    const {groups, value, onChange, readOnly = false, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const isReadOnly = readOnly || !onChange;\n    return (\n        <ComponentTexts namespace=\"access\" texts={texts}>\n            <Stack spacing={1.5}>\n                {groups.map((group) => <PermissionGroup key={group.key} group={group} value={value} onChange={onChange} isReadOnly={isReadOnly} />)}\n            </Stack>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PermissionMatrix.js","sources":["../../src/access/PermissionMatrix.jsx"],"sourcesContent":["// Los permisos de un perfil, agrupados (un grupo por módulo), para la pantalla de «Perfiles y permisos»: cada grupo con\n// su casilla de «todos» (a medias si tiene algunos) y cuántos tiene, y cada permiso con su nombre y, si hace falta, qué\n// deja hacer en palabras normales.\n//\n//   <PermissionMatrix groups={PERMISSION_GROUPS} value={profile.abilities} onChange={setAbilities} />\n//\n// Los permisos son los mismos textos que piden los menu.js y las rutas (access: {ability: 'orders.view'}), así que lo que\n// se palomea aquí es lo que el menú enseña o esconde. La lista de grupos la arma el proyecto (RBAC propio); guardar es\n// cosa de la pantalla.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPermissionMatrix con defaultProps y\n// styleOverrides de sus partes: permission, checkbox, group, groupHeader, groupTitle, grid.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: todo llega ya traducido.\nimport {useId} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Checkbox from '@mui/material/Checkbox';\nimport Chip from '@mui/material/Chip';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {groupStateOf, withPermission, withPermissionGroup} from '@/access/permissionGroups.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.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.CalcitaPermissionMatrix)\nconst THEME_NAME = 'CalcitaPermissionMatrix';\nconst PermissionsPermission = piecePart(THEME_NAME, 'Permission', FormControlLabel);\nconst PermissionsCheckbox = piecePart(THEME_NAME, 'Checkbox', Checkbox);\nconst PermissionsGroup = piecePart(THEME_NAME, 'Group', Paper);\nconst PermissionsGroupHeader = piecePart(THEME_NAME, 'GroupHeader', Stack);\nconst PermissionsGroupTitle = piecePart(THEME_NAME, 'GroupTitle', Typography);\nconst PermissionsGrid = piecePart(THEME_NAME, 'Grid', Box);\n\n/**\n * Un permiso: su casilla, su nombre y qué deja hacer.\n *\n * @param {{permission: {key: string, label: string, description?: string}, isGranted: boolean, readOnly: boolean, onToggle: (isGranted: boolean) => void}} props\n */\nfunction PermissionOption({permission, isGranted, readOnly, onToggle}) {\n    return (\n        <PermissionsPermission\n            ownSx={{alignItems: 'flex-start', m: 0, gap: 0.5}}\n            control={<PermissionsCheckbox size=\"small\" checked={isGranted} disabled={readOnly} onChange={(event) => onToggle(event.target.checked)}\n                               slotProps={{input: {'data-permission': permission.key}}} ownSx={{mt: -0.5}} />}\n            label={(\n                <Box>\n                    <Typography variant=\"body2\">{permission.label}</Typography>\n                    {permission.description && <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{permission.description}</Typography>}\n                </Box>\n            )}\n        />\n    );\n}\n\n/**\n * Un grupo: su encabezado con «todos» y cuántos tiene, y sus permisos.\n *\n * OJO: es un grupo con role=\"group\" y no un <fieldset>: el navegador pinta el <legend> encima del borde y dejaba una franja\n * blanca arriba del encabezado.\n *\n * @param {{group: object, value: string[], onChange: Function, isReadOnly: boolean}} props\n */\nfunction PermissionGroup({group, value, onChange, isReadOnly}) {\n    const {t} = useToolkitTranslation('access');\n    const titleId = useId();\n    const state = groupStateOf(group, value);\n    return (\n        <PermissionsGroup variant=\"outlined\" role=\"group\" aria-labelledby={titleId} data-group={group.key} ownSx={{overflow: 'hidden'}}>\n            <PermissionsGroupHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', px: 1.5, py: 0.75, borderBottom: 1, borderColor: 'divider', bgcolor: 'action.hover'}}>\n                <Checkbox size=\"small\" checked={state.isAll} indeterminate={state.isSome} disabled={isReadOnly || state.total === 0}\n                          onChange={(event) => onChange(withPermissionGroup(value, group, event.target.checked))}\n                          slotProps={{input: {'aria-label': t('permissions.allOf', {group: group.label})}}} />\n                <PermissionsGroupTitle id={titleId} variant=\"subtitle2\" component=\"h3\" ownSx={{flexGrow: 1}}>{group.label}</PermissionsGroupTitle>\n                <Chip size=\"small\" label={t('permissions.countOf', {count: state.grantedCount, total: state.total})}\n                      color={state.grantedCount > 0 ? 'primary' : 'default'} variant={state.isAll ? 'filled' : 'outlined'} />\n            </PermissionsGroupHeader>\n            <PermissionsGrid ownSx={{display: 'grid', gridTemplateColumns: {xs: '1fr', md: 'repeat(2, minmax(0, 1fr))'}, gap: 1.5, p: 2}}>\n                {group.permissions.map((permission) => (\n                    <PermissionOption key={permission.key} permission={permission} isGranted={value.includes(permission.key)} readOnly={isReadOnly}\n                                      onToggle={(isGranted) => onChange(withPermission(value, permission.key, isGranted))} />\n                ))}\n            </PermissionsGrid>\n        </PermissionsGroup>\n    );\n}\n\n/**\n * @param {object} props\n * @param {Array<{key: string, label: string, permissions: Array<{key: string, label: string, description?: string}>}>} props.groups\n * @param {string[]} props.value los permisos del perfil\n * @param {(value: string[]) => void} [props.onChange] sin ella, o con readOnly, solo se ven\n * @param {boolean} [props.readOnly] un perfil que no se puede cambiar (el de administración)\n * @param {object} [props.texts] los textos que cambian, con la forma de `access` en los textos del paquete\n */\nfunction PermissionMatrixContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPermissionMatrix.defaultProps) y encima lo que llega aquí\n    const {groups, value, onChange, readOnly = false, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const isReadOnly = readOnly || !onChange;\n    return (\n        <ComponentTexts namespace=\"access\" texts={texts}>\n            <Stack spacing={1.5}>\n                {groups.map((group) => <PermissionGroup key={group.key} group={group} value={value} onChange={onChange} isReadOnly={isReadOnly} />)}\n            </Stack>\n        </ComponentTexts>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst PermissionMatrix = withPieceSlots(PermissionMatrixContent, THEME_NAME);\nexport default PermissionMatrix;\n"],"names":[],"mappings":"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"}

package/dist/account/AccountProvider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useState, useCallback, useRef, useEffect, useMemo, useContext } from "react";
+import { createContext, useContext, useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { missingConnectorFunctionsOf } from "./accountConnector.js";
 import { createAccessChecker } from "../access/accessRules.js";
 import ErrorPage, { ERROR_PAGE_KIND } from "../ui/layout/ErrorPage.js";

package/dist/account/AccountSecuritySection.js

@@ -14,14 +14,14 @@ import { createPasskey, passkeysSupported } from "../security/passkeys.js";
 import SessionsCard from "../security/SessionsCard.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import SectionCard from "../ui/layout/SectionCard.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 = "CalcitaAccountSecurity";
 const SecurityTitle = piecePart(THEME_NAME, "Title", Typography);
 const SecurityForm = piecePart(THEME_NAME, "Form", Stack);
 const FORM_MAX_WIDTH = 520;
 const LOADING_HEIGHT_PIXELS = 220;
-function AccountSecuritySection(props) {
+function AccountSecuritySectionContent(props) {
   const { showPasswordChange = true, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("account", texts);
@@ -82,6 +82,7 @@ function AccountSecuritySection(props) {
     /* @__PURE__ */ jsx(ActivityLog, { events })
   ] });
 }
+const AccountSecuritySection = withPieceSlots(AccountSecuritySectionContent, THEME_NAME);
 export {
   AccountSecuritySection as default
 };

package/dist/account/AccountSecuritySection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountSecuritySection.js","sources":["../../src/account/AccountSecuritySection.jsx"],"sourcesContent":["// La seguridad de la cuenta, completa: cambiar la contraseña (ChangePasswordForm), la verificación en dos pasos\n// (TwoStepVerificationCard: llaves de acceso, app autenticadora y códigos de recuperación), las sesiones abiertas\n// (SessionsCard) y la bitácora (ActivityLog). Todo lo del servidor sale del conector de la cuenta.\n//\n// Las llaves de acceso se crean aquí con el navegador (createPasskey) y la respuesta va al servidor (savePasskey). La\n// bitácora se vuelve a pedir después de cada cambio: así se ve aparecer lo que se acaba de hacer.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAccountSecurity con defaultProps y\n// styleOverrides de sus partes: title, form.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useCallback, useEffect, useMemo, useState} from 'react';\nimport Alert from '@mui/material/Alert';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useAccount} from '@/account/AccountProvider.jsx';\nimport DemoTotpCodeButton from '@/account/DemoTotpCodeButton.jsx';\nimport ChangePasswordForm from '@/forms/auth/ChangePasswordForm.jsx';\nimport TwoStepVerificationCard from '@/forms/security/TwoStepVerificationCard.jsx';\nimport ActivityLog from '@/security/ActivityLog.jsx';\nimport {createPasskey, passkeysSupported} from '@/security/passkeys.js';\nimport SessionsCard from '@/security/SessionsCard.jsx';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport SectionCard from '@/ui/layout/SectionCard.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.CalcitaAccountSecurity)\nconst THEME_NAME = 'CalcitaAccountSecurity';\nconst SecurityTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst SecurityForm = piecePart(THEME_NAME, 'Form', Stack);\n\n// lo ancho del formulario de la contraseña: un renglón cómodo\nconst FORM_MAX_WIDTH = 520;\nconst LOADING_HEIGHT_PIXELS = 220;\n\n/**\n * @param {object} props\n * @param {boolean} [props.showPasswordChange] por omisión sí\n * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete\n */\nexport default function AccountSecuritySection(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAccountSecurity.defaultProps) y encima lo que llega aquí\n    const {showPasswordChange = true, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('account', texts);\n    const {connector, session} = useAccount();\n    const [security, setSecurity] = useState(null);\n    const [sessions, setSessions] = useState(null);\n    const [events, setEvents] = useState(null);\n    const [loadError, setLoadError] = useState(null);\n    const isDemo = typeof connector.demoTotpCode === 'function';\n\n    const refreshActivity = useCallback(() => connector.listActivity().then(setEvents).catch((error) => setLoadError(error.message)), [connector]);\n    const refreshSessions = useCallback(() => connector.listSessions().then(setSessions).catch((error) => setLoadError(error.message)), [connector]);\n\n    useEffect(() => {\n        connector.loadSecurity().then(setSecurity).catch((error) => setLoadError(error.message));\n        refreshSessions();\n        refreshActivity();\n    }, [connector, refreshActivity, refreshSessions]);\n\n    // lo que hace la tarjeta de dos pasos en cada caso, con el conector\n    const actions = useMemo(() => ({\n        addPasskey: async (name) => connector.savePasskey({name, credential: await createPasskey(await connector.passkeyRegistrationOptions())}),\n        removePasskey: (passkey, password) => connector.removePasskey({passkeyId: passkey.id, password}),\n        startTotp: async () => ({\n            ...await connector.startTotp(),\n            // en la demostración, el atajo del código abajo del campo\n            extra: isDemo ? <DemoTotpCodeButton loadCode={connector.demoTotpCode} /> : undefined,\n        }),\n        confirmTotp: (code) => connector.confirmTotp(code),\n        disableTotp: (password) => connector.disableTotp(password),\n        regenerateRecoveryCodes: (password) => connector.regenerateRecoveryCodes(password),\n    }), [connector, isDemo]);\n\n    const changeSecurity = (nextSecurity) => {\n        setSecurity(nextSecurity);\n        refreshActivity();\n    };\n\n    return (\n        <Stack spacing={3}>\n            {loadError && <Alert severity=\"error\">{loadError}</Alert>}\n            {showPasswordChange && (\n                <SectionCard title={t('profile.password.title')}>\n                    <SecurityTitle variant=\"body2\" color=\"text.secondary\" ownSx={{mb: 2}}>{t('profile.password.text')}</SecurityTitle>\n                    <SecurityForm ownSx={{maxWidth: FORM_MAX_WIDTH}}>\n                        <ChangePasswordForm onSubmit={async (values) => {\n                            await connector.changePassword(values);\n                            refreshActivity();\n                        }} />\n                    </SecurityForm>\n                </SectionCard>\n            )}\n            {security\n                ? <TwoStepVerificationCard security={security} onSecurityChange={changeSecurity} actions={actions}\n                                           canUsePasskeys={passkeysSupported()} account={session?.user.email}\n                                           // en la demostración la llave es de verdad pero el servidor se olvida al recargar:\n                                           // se avisa antes de crearla para que nadie se quede con una llave huérfana\n                                           passkeyNotice={isDemo ? t('demo.passkeyNote') : undefined} />\n                : <Skeleton variant=\"rounded\" height={LOADING_HEIGHT_PIXELS} />}\n            {isDemo && <Alert severity=\"info\">{t('demo.securityNote')}</Alert>}\n            <SessionsCard sessions={sessions} onCloseOthers={connector.closeOtherSessions} onClosed={() => {\n                refreshSessions();\n                refreshActivity();\n            }} />\n            <ActivityLog events={events} />\n        </Stack>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccountSecuritySection.js","sources":["../../src/account/AccountSecuritySection.jsx"],"sourcesContent":["// La seguridad de la cuenta, completa: cambiar la contraseña (ChangePasswordForm), la verificación en dos pasos\n// (TwoStepVerificationCard: llaves de acceso, app autenticadora y códigos de recuperación), las sesiones abiertas\n// (SessionsCard) y la bitácora (ActivityLog). Todo lo del servidor sale del conector de la cuenta.\n//\n// Las llaves de acceso se crean aquí con el navegador (createPasskey) y la respuesta va al servidor (savePasskey). La\n// bitácora se vuelve a pedir después de cada cambio: así se ve aparecer lo que se acaba de hacer.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAccountSecurity con defaultProps y\n// styleOverrides de sus partes: title, form.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useCallback, useEffect, useMemo, useState} from 'react';\nimport Alert from '@mui/material/Alert';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {useAccount} from '@/account/AccountProvider.jsx';\nimport DemoTotpCodeButton from '@/account/DemoTotpCodeButton.jsx';\nimport ChangePasswordForm from '@/forms/auth/ChangePasswordForm.jsx';\nimport TwoStepVerificationCard from '@/forms/security/TwoStepVerificationCard.jsx';\nimport ActivityLog from '@/security/ActivityLog.jsx';\nimport {createPasskey, passkeysSupported} from '@/security/passkeys.js';\nimport SessionsCard from '@/security/SessionsCard.jsx';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport SectionCard from '@/ui/layout/SectionCard.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.CalcitaAccountSecurity)\nconst THEME_NAME = 'CalcitaAccountSecurity';\nconst SecurityTitle = piecePart(THEME_NAME, 'Title', Typography);\nconst SecurityForm = piecePart(THEME_NAME, 'Form', Stack);\n\n// lo ancho del formulario de la contraseña: un renglón cómodo\nconst FORM_MAX_WIDTH = 520;\nconst LOADING_HEIGHT_PIXELS = 220;\n\n/**\n * @param {object} props\n * @param {boolean} [props.showPasswordChange] por omisión sí\n * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete\n */\nfunction AccountSecuritySectionContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAccountSecurity.defaultProps) y encima lo que llega aquí\n    const {showPasswordChange = true, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('account', texts);\n    const {connector, session} = useAccount();\n    const [security, setSecurity] = useState(null);\n    const [sessions, setSessions] = useState(null);\n    const [events, setEvents] = useState(null);\n    const [loadError, setLoadError] = useState(null);\n    const isDemo = typeof connector.demoTotpCode === 'function';\n\n    const refreshActivity = useCallback(() => connector.listActivity().then(setEvents).catch((error) => setLoadError(error.message)), [connector]);\n    const refreshSessions = useCallback(() => connector.listSessions().then(setSessions).catch((error) => setLoadError(error.message)), [connector]);\n\n    useEffect(() => {\n        connector.loadSecurity().then(setSecurity).catch((error) => setLoadError(error.message));\n        refreshSessions();\n        refreshActivity();\n    }, [connector, refreshActivity, refreshSessions]);\n\n    // lo que hace la tarjeta de dos pasos en cada caso, con el conector\n    const actions = useMemo(() => ({\n        addPasskey: async (name) => connector.savePasskey({name, credential: await createPasskey(await connector.passkeyRegistrationOptions())}),\n        removePasskey: (passkey, password) => connector.removePasskey({passkeyId: passkey.id, password}),\n        startTotp: async () => ({\n            ...await connector.startTotp(),\n            // en la demostración, el atajo del código abajo del campo\n            extra: isDemo ? <DemoTotpCodeButton loadCode={connector.demoTotpCode} /> : undefined,\n        }),\n        confirmTotp: (code) => connector.confirmTotp(code),\n        disableTotp: (password) => connector.disableTotp(password),\n        regenerateRecoveryCodes: (password) => connector.regenerateRecoveryCodes(password),\n    }), [connector, isDemo]);\n\n    const changeSecurity = (nextSecurity) => {\n        setSecurity(nextSecurity);\n        refreshActivity();\n    };\n\n    return (\n        <Stack spacing={3}>\n            {loadError && <Alert severity=\"error\">{loadError}</Alert>}\n            {showPasswordChange && (\n                <SectionCard title={t('profile.password.title')}>\n                    <SecurityTitle variant=\"body2\" color=\"text.secondary\" ownSx={{mb: 2}}>{t('profile.password.text')}</SecurityTitle>\n                    <SecurityForm ownSx={{maxWidth: FORM_MAX_WIDTH}}>\n                        <ChangePasswordForm onSubmit={async (values) => {\n                            await connector.changePassword(values);\n                            refreshActivity();\n                        }} />\n                    </SecurityForm>\n                </SectionCard>\n            )}\n            {security\n                ? <TwoStepVerificationCard security={security} onSecurityChange={changeSecurity} actions={actions}\n                                           canUsePasskeys={passkeysSupported()} account={session?.user.email}\n                                           // en la demostración la llave es de verdad pero el servidor se olvida al recargar:\n                                           // se avisa antes de crearla para que nadie se quede con una llave huérfana\n                                           passkeyNotice={isDemo ? t('demo.passkeyNote') : undefined} />\n                : <Skeleton variant=\"rounded\" height={LOADING_HEIGHT_PIXELS} />}\n            {isDemo && <Alert severity=\"info\">{t('demo.securityNote')}</Alert>}\n            <SessionsCard sessions={sessions} onCloseOthers={connector.closeOtherSessions} onClosed={() => {\n                refreshSessions();\n                refreshActivity();\n            }} />\n            <ActivityLog events={events} />\n        </Stack>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst AccountSecuritySection = withPieceSlots(AccountSecuritySectionContent, THEME_NAME);\nexport default AccountSecuritySection;\n"],"names":[],"mappings":"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"}

package/dist/account/DemoTotpCodeButton.js

@@ -6,12 +6,12 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import ScienceOutlinedIcon from "@mui/icons-material/ScienceOutlined";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.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 = "CalcitaDemoTotpCode";
 const TotpRoot = piecePart(THEME_NAME, "Root", Stack);
 const TotpCode = piecePart(THEME_NAME, "Code", Typography);
-function DemoTotpCodeButton(props) {
+function DemoTotpCodeButtonContent(props) {
   const { loadCode, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("account");
@@ -27,6 +27,7 @@ function DemoTotpCodeButton(props) {
     /* @__PURE__ */ jsx(TotpCode, { variant: "caption", color: "text.secondary", ownSx: { textAlign: "center" }, children: t("demo.totpCodeHelp") })
   ] });
 }
+const DemoTotpCodeButton = withPieceSlots(DemoTotpCodeButtonContent, THEME_NAME);
 export {
   DemoTotpCodeButton as default
 };

package/dist/account/DemoTotpCodeButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DemoTotpCodeButton.js","sources":["../../src/account/DemoTotpCodeButton.jsx"],"sourcesContent":["// El atajo de la DEMOSTRACIÓN para la app autenticadora: llena el campo «code» del formulario con el código que enseñaría\n// la app ahorita. Para quien prueba sin la app en su teléfono (y para las pruebas automáticas, que no escanean QR). Solo\n// sale cuando el conector trae demoTotpCode: con un backend de verdad no existe (el código solo lo conoce la app).\n//\n// Va dentro del formulario de formik (abajo del segundo paso o en el diálogo de activar la app).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDemoTotpCode con defaultProps y\n// styleOverrides de sus partes: root, code.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormikContext} from 'formik';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ScienceOutlinedIcon from '@mui/icons-material/ScienceOutlined';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\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.CalcitaDemoTotpCode)\nconst THEME_NAME = 'CalcitaDemoTotpCode';\nconst TotpRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst TotpCode = piecePart(THEME_NAME, 'Code', Typography);\n\n/**\n * @param {{loadCode: () => Promise<string|null>}} props\n */\nexport default function DemoTotpCodeButton(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDemoTotpCode.defaultProps) y encima lo que llega aquí\n    const {loadCode, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('account');\n    const {setFieldValue} = useFormikContext();\n\n    const fillCode = async () => {\n        const code = await loadCode();\n        if (code) {\n            setFieldValue('code', code);\n        }\n    };\n\n    return (\n        <TotpRoot spacing={0.5} ownSx={{alignItems: 'center'}}>\n            <Button size=\"small\" startIcon={<ScienceOutlinedIcon />} onClick={fillCode}>{t('demo.totpCode')}</Button>\n            <TotpCode variant=\"caption\" color=\"text.secondary\" ownSx={{textAlign: 'center'}}>{t('demo.totpCodeHelp')}</TotpCode>\n        </TotpRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,WAAW,UAAU,YAAY,QAAQ,KAAK;AACpD,MAAM,WAAW,UAAU,YAAY,QAAQ,UAAU;AAKzD,SAAwB,mBAAmB,OAAO;AAE9C,QAAM,EAAC,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AACnE,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS;AAC3C,QAAM,EAAC,cAAA,IAAiB,iBAAA;AAExB,QAAM,WAAW,YAAY;AACzB,UAAM,OAAO,MAAM,SAAA;AACnB,QAAI,MAAM;AACN,oBAAc,QAAQ,IAAI;AAAA,IAC9B;AAAA,EACJ;AAEA,SACI,qBAAC,YAAS,SAAS,KAAK,OAAO,EAAC,YAAY,YACxC,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,MAAK,SAAQ,WAAW,oBAAC,qBAAA,CAAA,CAAoB,GAAI,SAAS,UAAW,UAAA,EAAE,eAAe,GAAE;AAAA,IAChG,oBAAC,UAAA,EAAS,SAAQ,WAAU,OAAM,kBAAiB,OAAO,EAAC,WAAW,SAAA,GAAY,UAAA,EAAE,mBAAmB,EAAA,CAAE;AAAA,EAAA,GAC7G;AAER;"}
+{"version":3,"file":"DemoTotpCodeButton.js","sources":["../../src/account/DemoTotpCodeButton.jsx"],"sourcesContent":["// El atajo de la DEMOSTRACIÓN para la app autenticadora: llena el campo «code» del formulario con el código que enseñaría\n// la app ahorita. Para quien prueba sin la app en su teléfono (y para las pruebas automáticas, que no escanean QR). Solo\n// sale cuando el conector trae demoTotpCode: con un backend de verdad no existe (el código solo lo conoce la app).\n//\n// Va dentro del formulario de formik (abajo del segundo paso o en el diálogo de activar la app).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDemoTotpCode con defaultProps y\n// styleOverrides de sus partes: root, code.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useFormikContext} from 'formik';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport ScienceOutlinedIcon from '@mui/icons-material/ScienceOutlined';\n\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\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.CalcitaDemoTotpCode)\nconst THEME_NAME = 'CalcitaDemoTotpCode';\nconst TotpRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst TotpCode = piecePart(THEME_NAME, 'Code', Typography);\n\n/**\n * @param {{loadCode: () => Promise<string|null>}} props\n */\nfunction DemoTotpCodeButtonContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDemoTotpCode.defaultProps) y encima lo que llega aquí\n    const {loadCode, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('account');\n    const {setFieldValue} = useFormikContext();\n\n    const fillCode = async () => {\n        const code = await loadCode();\n        if (code) {\n            setFieldValue('code', code);\n        }\n    };\n\n    return (\n        <TotpRoot spacing={0.5} ownSx={{alignItems: 'center'}}>\n            <Button size=\"small\" startIcon={<ScienceOutlinedIcon />} onClick={fillCode}>{t('demo.totpCode')}</Button>\n            <TotpCode variant=\"caption\" color=\"text.secondary\" ownSx={{textAlign: 'center'}}>{t('demo.totpCodeHelp')}</TotpCode>\n        </TotpRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DemoTotpCodeButton = withPieceSlots(DemoTotpCodeButtonContent, THEME_NAME);\nexport default DemoTotpCodeButton;\n"],"names":[],"mappings":";;;;;;;;;;AAqBA,MAAM,aAAa;AACnB,MAAM,WAAW,UAAU,YAAY,QAAQ,KAAK;AACpD,MAAM,WAAW,UAAU,YAAY,QAAQ,UAAU;AAKzD,SAAS,0BAA0B,OAAO;AAEtC,QAAM,EAAC,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AACnE,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS;AAC3C,QAAM,EAAC,cAAA,IAAiB,iBAAA;AAExB,QAAM,WAAW,YAAY;AACzB,UAAM,OAAO,MAAM,SAAA;AACnB,QAAI,MAAM;AACN,oBAAc,QAAQ,IAAI;AAAA,IAC9B;AAAA,EACJ;AAEA,SACI,qBAAC,YAAS,SAAS,KAAK,OAAO,EAAC,YAAY,YACxC,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,MAAK,SAAQ,WAAW,oBAAC,qBAAA,CAAA,CAAoB,GAAI,SAAS,UAAW,UAAA,EAAE,eAAe,GAAE;AAAA,IAChG,oBAAC,UAAA,EAAS,SAAQ,WAAU,OAAM,kBAAiB,OAAO,EAAC,WAAW,SAAA,GAAY,UAAA,EAAE,mBAAmB,EAAA,CAAE;AAAA,EAAA,GAC7G;AAER;AAGA,MAAM,qBAAqB,eAAe,2BAA2B,UAAU;"}

package/dist/account/ProfileScreen.js

@@ -20,7 +20,7 @@ import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import ProfileHeader from "../ui/layout/ProfileHeader.js";
 import SectionCard from "../ui/layout/SectionCard.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 = "CalcitaProfileScreen";
 const ProfileScreenSectionTitle = piecePart(THEME_NAME, "SectionTitle", Typography);
@@ -74,7 +74,7 @@ function ProfileDataSection({ extraFields, onProfileSaved, texts }) {
     ] }) }) })
   ] });
 }
-function ProfileScreen(props) {
+function ProfileScreenContent(props) {
   const {
     showColorScheme = true,
     extraFields,
@@ -136,6 +136,7 @@ function ProfileScreen(props) {
     activeExtraTab?.content
   ] });
 }
+const ProfileScreen = withPieceSlots(ProfileScreenContent, THEME_NAME);
 export {
   PROFILE_TAB,
   ProfileScreen as default

package/dist/account/ProfileScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileScreen.js","sources":["../../src/account/ProfileScreen.jsx"],"sourcesContent":["// Mi perfil, completo: quién está dentro (ProfileHeader con sus perfiles como chips) y tres pestañas:\n//   - Sus datos: nombre y teléfono (el correo se ve pero no se cambia aquí); al guardar se vuelve a leer la sesión, así la\n//     barra y el menú de la cuenta ya dicen el nombre nuevo;\n//   - Seguridad: AccountSecuritySection (contraseña, dos pasos, sesiones y bitácora);\n//   - Preferencias: AppearanceSettings (tamaño de letra, idioma y modo de color).\n// La pestaña abierta va en la dirección (?tab=): se puede compartir o recargar sin perderla. Lo del servidor sale del\n// conector de la cuenta.\n//\n// Se extiende sin tocar el framework (cada proyecto tiene su perfil «especial»):\n//   - extraFields: campos propios en «Sus datos» (el área, el número de empleado…), con su valor de inicio sacado del usuario\n//     de la sesión, sus reglas de yup y sus campos. Al guardar viajan a connector.updateProfile junto con name y phone: un\n//     backend que ya existe recibe lo suyo con sus nombres;\n//   - extraTabs: pestañas propias después de las de la casa (facturación, notificaciones…); hiddenTabs esconde las de la casa;\n//   - eventos: onTabChange y onProfileSaved (lo guardado y lo que contestó el servidor);\n//   - texts: cualquier texto, con la forma de `account` en los textos del paquete.\n//\n//   <ProfileScreen />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaProfileScreen con defaultProps y\n// styleOverrides de sus partes: sectionTitle, form, preferences.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo} from 'react';\nimport {Form, Formik} from 'formik';\nimport Stack from '@mui/material/Stack';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport Typography from '@mui/material/Typography';\n\nimport AccountSecuritySection from '@/account/AccountSecuritySection.jsx';\nimport {useAccount} from '@/account/AccountProvider.jsx';\nimport AppearanceSettings from '@/appShell/AppearanceSettings.jsx';\nimport {toastSuccess} from '@/feedback/toast.jsx';\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport FormTextField from '@/forms/FormTextField.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport {applyServerProblem} from '@/forms/applyServerProblem.js';\nimport {Yup} from '@/forms/validation.js';\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ProfileHeader from '@/ui/layout/ProfileHeader.jsx';\nimport SectionCard from '@/ui/layout/SectionCard.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.CalcitaProfileScreen)\nconst THEME_NAME = 'CalcitaProfileScreen';\nconst ProfileScreenSectionTitle = piecePart(THEME_NAME, 'SectionTitle', Typography);\nconst ProfileScreenForm = piecePart(THEME_NAME, 'Form', Stack);\nconst ProfileScreenPreferences = piecePart(THEME_NAME, 'Preferences', Stack);\n\n/** Las pestañas, en el orden en que se pintan. */\nexport const PROFILE_TAB = Object.freeze({data: 'data', security: 'security', preferences: 'preferences'});\nconst TAB_PARAM = 'tab';\n// el teléfono: dígitos, con + opcional al inicio (formato internacional); lo largo que permite el plan de numeración\nconst PHONE_PATTERN = /^\\+?\\d{7,15}$/;\n// lo ancho de los formularios: un renglón cómodo, no toda la pantalla\nconst FORM_MAX_WIDTH = 520;\n\n/**\n * Sus datos: nombre, teléfono y los campos propios del proyecto (extraFields).\n *\n * @param {object} props\n * @param {object} [props.extraFields]\n * @param {Function} [props.onProfileSaved]\n * @param {object} [props.texts]\n */\nfunction ProfileDataSection({extraFields, onProfileSaved, texts}) {\n    const {t} = useToolkitTranslation('account', texts);\n    const {connector, session, refreshSession} = useAccount();\n    const extraRules = extraFields?.rules;\n    // el esquema se arma al pintar: yup toma sus mensajes al armarlo. Las reglas propias se suman a las de la casa\n    const schema = useMemo(() => Yup.object({\n        name: Yup.string().trim().required(),\n        phone: Yup.string().trim().matches(PHONE_PATTERN, {message: {key: 'account:profile.data.phoneInvalid'}, excludeEmptyString: true}),\n        ...extraRules,\n    }), [extraRules]);\n    const initialValues = {name: session.user.name ?? '', phone: session.user.phone ?? '', ...extraFields?.initialValues?.(session.user)};\n\n    const save = async (values, formikHelpers) => {\n        // lo de la casa limpio de espacios; lo propio, tal como lo dejaron sus campos\n        const profile = {...values, name: values.name.trim(), phone: values.phone.trim()};\n        try {\n            const response = await connector.updateProfile(profile);\n            await refreshSession();\n            toastSuccess(response?.message ?? t('profile.data.saved'));\n            onProfileSaved?.({values: profile, response});\n        } catch (error) {\n            applyServerProblem(error, {...formikHelpers, values});\n        }\n    };\n\n    return (\n        <SectionCard title={t('profile.data.title')}>\n            <ProfileScreenSectionTitle variant=\"body2\" color=\"text.secondary\" ownSx={{mb: 2}}>{t('profile.data.text')}</ProfileScreenSectionTitle>\n            <Formik initialValues={initialValues} validationSchema={schema} onSubmit={save}>\n                <Form noValidate>\n                    <ProfileScreenForm spacing={2} ownSx={{maxWidth: FORM_MAX_WIDTH}}>\n                        <FormProblemAlert />\n                        <FormTextField name=\"name\" label={t('profile.data.name')} autoComplete=\"name\" />\n                        {/* el correo se ve con el mismo estilo de los demás campos, pero no se cambia aquí */}\n                        <TextInput name=\"email\" label={t('profile.data.email')} value={session.user.email} onChange={() => {}}\n                                   helperText={t('profile.data.emailHelp')} disabled />\n                        <FormTextField name=\"phone\" label={t('profile.data.phone')} type=\"tel\" autoComplete=\"tel\" inputMode=\"tel\" />\n                        {extraFields?.fields}\n                        <SubmitButton sx={{alignSelf: 'flex-start'}}>{t('profile.data.save')}</SubmitButton>\n                    </ProfileScreenForm>\n                </Form>\n            </Formik>\n        </SectionCard>\n    );\n}\n\n/** @typedef {import('@/account/accountConnector.js').AccountUser} AccountUser */\n\n/**\n * @param {object} props\n * @param {boolean} [props.showColorScheme] el ajuste de claro u oscuro en Preferencias; sin modo oscuro, false\n * @param {{initialValues?: (user: AccountUser & Record<string, any>) => Record<string, any>, rules?: Record<string, any>, fields: import('react').ReactNode}} [props.extraFields]\n *     campos propios en «Sus datos», debajo del teléfono: sus valores de inicio salen del usuario de la sesión (lo que su\n *     conector ponga en session.user), sus reglas de yup y sus campos (FormTextField, FormSelectField… de /forms). Al guardar\n *     viajan a connector.updateProfile junto con name y phone\n * @param {Array<{key: string, label: string, content: import('react').ReactNode}>} [props.extraTabs] pestañas propias,\n *     después de las de la casa; label ya traducido\n * @param {Array<'data'|'security'|'preferences'>} [props.hiddenTabs] pestañas de la casa que no se ven (PROFILE_TAB)\n * @param {(tab: string) => void} [props.onTabChange] cada que se cambia de pestaña\n * @param {(saved: {values: Record<string, any>, response: unknown}) => void} [props.onProfileSaved] después de guardar «Sus datos»\n * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete:\n *     {profile: {tabs: {data: 'Mis datos'}}}\n */\nexport default function ProfileScreen(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaProfileScreen.defaultProps) y encima lo que llega aquí\n    const {\n    showColorScheme = true, extraFields, extraTabs = [], hiddenTabs = [], onTabChange, onProfileSaved, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('account', texts);\n    const {session} = useAccount();\n    const {useNavigate, useLocation} = useToolkitNavigation();\n    const navigate = useNavigate();\n    const {pathname, search} = useLocation();\n    // las pestañas que se ven: las de la casa que no se escondieron y luego las del proyecto\n    const tabs = [\n        ...Object.values(PROFILE_TAB).filter((tab) => !hiddenTabs.includes(tab)).map((tab) => ({key: tab, label: t(`profile.tabs.${tab}`)})),\n        ...extraTabs.map(({key, label}) => ({key, label})),\n    ];\n    const requestedTab = new URLSearchParams(search).get(TAB_PARAM);\n    const activeTab = tabs.some((tab) => tab.key === requestedTab) ? requestedTab : tabs[0]?.key;\n    const activeExtraTab = extraTabs.find((tab) => tab.key === activeTab);\n    const changeTab = (tab) => {\n        navigate(`${pathname}?${TAB_PARAM}=${tab}`, {replace: true});\n        onTabChange?.(tab);\n    };\n\n    // guard clause: sin sesión no hay perfil que enseñar (el marco de la app ya lleva a entrar)\n    if (!session) {\n        return null;\n    }\n\n    return (\n        <Stack spacing={2}>\n            <ProfileHeader name={session.user.name} email={session.user.email} subtitle={session.user.subtitle} avatarUrl={session.user.avatarUrl}\n                           chips={session.labels ?? []} />\n            <Tabs value={activeTab} onChange={(event, tab) => changeTab(tab)} aria-label={t('profile.tabs.label')}\n                  variant=\"scrollable\" allowScrollButtonsMobile>\n                {tabs.map((tab) => <Tab key={tab.key} value={tab.key} label={tab.label} />)}\n            </Tabs>\n            {activeTab === PROFILE_TAB.data && <ProfileDataSection extraFields={extraFields} onProfileSaved={onProfileSaved} texts={texts} />}\n            {activeTab === PROFILE_TAB.security && <AccountSecuritySection />}\n            {activeTab === PROFILE_TAB.preferences && (\n                <SectionCard title={t('profile.preferences.title')}>\n                    <ProfileScreenSectionTitle variant=\"body2\" color=\"text.secondary\" ownSx={{mb: 1}}>{t('profile.preferences.text')}</ProfileScreenSectionTitle>\n                    <ProfileScreenPreferences ownSx={{maxWidth: FORM_MAX_WIDTH, mx: -1}}>\n                        <AppearanceSettings showColorScheme={showColorScheme} />\n                    </ProfileScreenPreferences>\n                </SectionCard>\n            )}\n            {activeExtraTab?.content}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProfileScreen.js","sources":["../../src/account/ProfileScreen.jsx"],"sourcesContent":["// Mi perfil, completo: quién está dentro (ProfileHeader con sus perfiles como chips) y tres pestañas:\n//   - Sus datos: nombre y teléfono (el correo se ve pero no se cambia aquí); al guardar se vuelve a leer la sesión, así la\n//     barra y el menú de la cuenta ya dicen el nombre nuevo;\n//   - Seguridad: AccountSecuritySection (contraseña, dos pasos, sesiones y bitácora);\n//   - Preferencias: AppearanceSettings (tamaño de letra, idioma y modo de color).\n// La pestaña abierta va en la dirección (?tab=): se puede compartir o recargar sin perderla. Lo del servidor sale del\n// conector de la cuenta.\n//\n// Se extiende sin tocar el framework (cada proyecto tiene su perfil «especial»):\n//   - extraFields: campos propios en «Sus datos» (el área, el número de empleado…), con su valor de inicio sacado del usuario\n//     de la sesión, sus reglas de yup y sus campos. Al guardar viajan a connector.updateProfile junto con name y phone: un\n//     backend que ya existe recibe lo suyo con sus nombres;\n//   - extraTabs: pestañas propias después de las de la casa (facturación, notificaciones…); hiddenTabs esconde las de la casa;\n//   - eventos: onTabChange y onProfileSaved (lo guardado y lo que contestó el servidor);\n//   - texts: cualquier texto, con la forma de `account` en los textos del paquete.\n//\n//   <ProfileScreen />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaProfileScreen con defaultProps y\n// styleOverrides de sus partes: sectionTitle, form, preferences.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo} from 'react';\nimport {Form, Formik} from 'formik';\nimport Stack from '@mui/material/Stack';\nimport Tab from '@mui/material/Tab';\nimport Tabs from '@mui/material/Tabs';\nimport Typography from '@mui/material/Typography';\n\nimport AccountSecuritySection from '@/account/AccountSecuritySection.jsx';\nimport {useAccount} from '@/account/AccountProvider.jsx';\nimport AppearanceSettings from '@/appShell/AppearanceSettings.jsx';\nimport {toastSuccess} from '@/feedback/toast.jsx';\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport FormTextField from '@/forms/FormTextField.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport {applyServerProblem} from '@/forms/applyServerProblem.js';\nimport {Yup} from '@/forms/validation.js';\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport ProfileHeader from '@/ui/layout/ProfileHeader.jsx';\nimport SectionCard from '@/ui/layout/SectionCard.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.CalcitaProfileScreen)\nconst THEME_NAME = 'CalcitaProfileScreen';\nconst ProfileScreenSectionTitle = piecePart(THEME_NAME, 'SectionTitle', Typography);\nconst ProfileScreenForm = piecePart(THEME_NAME, 'Form', Stack);\nconst ProfileScreenPreferences = piecePart(THEME_NAME, 'Preferences', Stack);\n\n/** Las pestañas, en el orden en que se pintan. */\nexport const PROFILE_TAB = Object.freeze({data: 'data', security: 'security', preferences: 'preferences'});\nconst TAB_PARAM = 'tab';\n// el teléfono: dígitos, con + opcional al inicio (formato internacional); lo largo que permite el plan de numeración\nconst PHONE_PATTERN = /^\\+?\\d{7,15}$/;\n// lo ancho de los formularios: un renglón cómodo, no toda la pantalla\nconst FORM_MAX_WIDTH = 520;\n\n/**\n * Sus datos: nombre, teléfono y los campos propios del proyecto (extraFields).\n *\n * @param {object} props\n * @param {object} [props.extraFields]\n * @param {Function} [props.onProfileSaved]\n * @param {object} [props.texts]\n */\nfunction ProfileDataSection({extraFields, onProfileSaved, texts}) {\n    const {t} = useToolkitTranslation('account', texts);\n    const {connector, session, refreshSession} = useAccount();\n    const extraRules = extraFields?.rules;\n    // el esquema se arma al pintar: yup toma sus mensajes al armarlo. Las reglas propias se suman a las de la casa\n    const schema = useMemo(() => Yup.object({\n        name: Yup.string().trim().required(),\n        phone: Yup.string().trim().matches(PHONE_PATTERN, {message: {key: 'account:profile.data.phoneInvalid'}, excludeEmptyString: true}),\n        ...extraRules,\n    }), [extraRules]);\n    const initialValues = {name: session.user.name ?? '', phone: session.user.phone ?? '', ...extraFields?.initialValues?.(session.user)};\n\n    const save = async (values, formikHelpers) => {\n        // lo de la casa limpio de espacios; lo propio, tal como lo dejaron sus campos\n        const profile = {...values, name: values.name.trim(), phone: values.phone.trim()};\n        try {\n            const response = await connector.updateProfile(profile);\n            await refreshSession();\n            toastSuccess(response?.message ?? t('profile.data.saved'));\n            onProfileSaved?.({values: profile, response});\n        } catch (error) {\n            applyServerProblem(error, {...formikHelpers, values});\n        }\n    };\n\n    return (\n        <SectionCard title={t('profile.data.title')}>\n            <ProfileScreenSectionTitle variant=\"body2\" color=\"text.secondary\" ownSx={{mb: 2}}>{t('profile.data.text')}</ProfileScreenSectionTitle>\n            <Formik initialValues={initialValues} validationSchema={schema} onSubmit={save}>\n                <Form noValidate>\n                    <ProfileScreenForm spacing={2} ownSx={{maxWidth: FORM_MAX_WIDTH}}>\n                        <FormProblemAlert />\n                        <FormTextField name=\"name\" label={t('profile.data.name')} autoComplete=\"name\" />\n                        {/* el correo se ve con el mismo estilo de los demás campos, pero no se cambia aquí */}\n                        <TextInput name=\"email\" label={t('profile.data.email')} value={session.user.email} onChange={() => {}}\n                                   helperText={t('profile.data.emailHelp')} disabled />\n                        <FormTextField name=\"phone\" label={t('profile.data.phone')} type=\"tel\" autoComplete=\"tel\" inputMode=\"tel\" />\n                        {extraFields?.fields}\n                        <SubmitButton sx={{alignSelf: 'flex-start'}}>{t('profile.data.save')}</SubmitButton>\n                    </ProfileScreenForm>\n                </Form>\n            </Formik>\n        </SectionCard>\n    );\n}\n\n/** @typedef {import('@/account/accountConnector.js').AccountUser} AccountUser */\n\n/**\n * @param {object} props\n * @param {boolean} [props.showColorScheme] el ajuste de claro u oscuro en Preferencias; sin modo oscuro, false\n * @param {{initialValues?: (user: AccountUser & Record<string, any>) => Record<string, any>, rules?: Record<string, any>, fields: import('react').ReactNode}} [props.extraFields]\n *     campos propios en «Sus datos», debajo del teléfono: sus valores de inicio salen del usuario de la sesión (lo que su\n *     conector ponga en session.user), sus reglas de yup y sus campos (FormTextField, FormSelectField… de /forms). Al guardar\n *     viajan a connector.updateProfile junto con name y phone\n * @param {Array<{key: string, label: string, content: import('react').ReactNode}>} [props.extraTabs] pestañas propias,\n *     después de las de la casa; label ya traducido\n * @param {Array<'data'|'security'|'preferences'>} [props.hiddenTabs] pestañas de la casa que no se ven (PROFILE_TAB)\n * @param {(tab: string) => void} [props.onTabChange] cada que se cambia de pestaña\n * @param {(saved: {values: Record<string, any>, response: unknown}) => void} [props.onProfileSaved] después de guardar «Sus datos»\n * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete:\n *     {profile: {tabs: {data: 'Mis datos'}}}\n */\nfunction ProfileScreenContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaProfileScreen.defaultProps) y encima lo que llega aquí\n    const {\n    showColorScheme = true, extraFields, extraTabs = [], hiddenTabs = [], onTabChange, onProfileSaved, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('account', texts);\n    const {session} = useAccount();\n    const {useNavigate, useLocation} = useToolkitNavigation();\n    const navigate = useNavigate();\n    const {pathname, search} = useLocation();\n    // las pestañas que se ven: las de la casa que no se escondieron y luego las del proyecto\n    const tabs = [\n        ...Object.values(PROFILE_TAB).filter((tab) => !hiddenTabs.includes(tab)).map((tab) => ({key: tab, label: t(`profile.tabs.${tab}`)})),\n        ...extraTabs.map(({key, label}) => ({key, label})),\n    ];\n    const requestedTab = new URLSearchParams(search).get(TAB_PARAM);\n    const activeTab = tabs.some((tab) => tab.key === requestedTab) ? requestedTab : tabs[0]?.key;\n    const activeExtraTab = extraTabs.find((tab) => tab.key === activeTab);\n    const changeTab = (tab) => {\n        navigate(`${pathname}?${TAB_PARAM}=${tab}`, {replace: true});\n        onTabChange?.(tab);\n    };\n\n    // guard clause: sin sesión no hay perfil que enseñar (el marco de la app ya lleva a entrar)\n    if (!session) {\n        return null;\n    }\n\n    return (\n        <Stack spacing={2}>\n            <ProfileHeader name={session.user.name} email={session.user.email} subtitle={session.user.subtitle} avatarUrl={session.user.avatarUrl}\n                           chips={session.labels ?? []} />\n            <Tabs value={activeTab} onChange={(event, tab) => changeTab(tab)} aria-label={t('profile.tabs.label')}\n                  variant=\"scrollable\" allowScrollButtonsMobile>\n                {tabs.map((tab) => <Tab key={tab.key} value={tab.key} label={tab.label} />)}\n            </Tabs>\n            {activeTab === PROFILE_TAB.data && <ProfileDataSection extraFields={extraFields} onProfileSaved={onProfileSaved} texts={texts} />}\n            {activeTab === PROFILE_TAB.security && <AccountSecuritySection />}\n            {activeTab === PROFILE_TAB.preferences && (\n                <SectionCard title={t('profile.preferences.title')}>\n                    <ProfileScreenSectionTitle variant=\"body2\" color=\"text.secondary\" ownSx={{mb: 1}}>{t('profile.preferences.text')}</ProfileScreenSectionTitle>\n                    <ProfileScreenPreferences ownSx={{maxWidth: FORM_MAX_WIDTH, mx: -1}}>\n                        <AppearanceSettings showColorScheme={showColorScheme} />\n                    </ProfileScreenPreferences>\n                </SectionCard>\n            )}\n            {activeExtraTab?.content}\n        </Stack>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ProfileScreen = withPieceSlots(ProfileScreenContent, THEME_NAME);\nexport default ProfileScreen;\n"],"names":[],"mappings":"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"}

package/dist/account/SignInScreen.js

@@ -12,11 +12,11 @@ import { signWithPasskey, passkeysSupported } from "../security/passkeys.js";
 import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import ComponentTexts from "../toolkit/ComponentTexts.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 = "CalcitaSignInScreen";
 const SignInAlert = piecePart(THEME_NAME, "Alert", Alert);
-function SignInScreen(props) {
+function SignInScreenContent(props) {
   const { homePath = "/", forgotPasswordPath, logo, brandName, footer, showLanguageToggle = true, showColorSchemeToggle = true, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("auth", texts);
@@ -102,6 +102,7 @@ function SignInScreen(props) {
     }
   ) });
 }
+const SignInScreen = withPieceSlots(SignInScreenContent, THEME_NAME);
 export {
   SignInScreen as default
 };