@stackcraftmx/calcita 0.32.2 → 0.51.0

package/dist/DataTable/ServerTableFilterDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerTableFilterDrawer.js","sources":["../../src/DataTable/ServerTableFilterDrawer.jsx"],"sourcesContent":["// El botón «Filtros» de ServerTable con su cajón de búsqueda (FilterDrawer): se pone en toolbarExtra y lee y cambia los\n// filtros de SU tabla (los de la dirección, los mismos de los chips). El botón dice cuántos filtros del cajón hay puestos.\n//\n//   const FILTER_FIELDS = [{name: 'total', label: 'Total', kind: FILTER_FIELD_KIND.comparison, prefix: '$'}, …];\n//   <ServerTable … filterDefaults={{...MIS_DEFAULTS, ...filterDrawerDefaultsOf(FILTER_FIELDS)}}\n//                  filterKinds={{...MIS_KINDS, ...filterDrawerKindsOf(FILTER_FIELDS)}}\n//                  chipConfig={buildChipConfig(filterDrawerChipsOf(FILTER_FIELDS, {t, formatDate}))}\n//                  toolbarExtra={<ServerTableFilterDrawer fields={FILTER_FIELDS} />} />\n//\n// filterDefaults: la tabla solo guarda en la dirección lo que declara ahí. filterKinds: las listas se leen como lista. Los\n// chips dicen cada filtro en palabras y cada uno se quita con su ×.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaServerTableFilterDrawer con defaultProps, styleOverrides de\n// sus partes (button) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Button from '@mui/material/Button';\nimport TuneRoundedIcon from '@mui/icons-material/TuneRounded';\n\nimport {useTableFilter} from '@/DataTable/filterContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FilterDrawer from '@/ui/filters/FilterDrawer.jsx';\nimport {activeDrawerFilterCountOf} from '@/ui/filters/filterDrawerFields.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaServerTableFilterDrawer)\nconst THEME_NAME = 'CalcitaServerTableFilterDrawer';\nconst ServerTableFilterDrawerButton = piecePart(THEME_NAME, 'Button', Button);\n\n/**\n * @param {object} props\n * @param {object[]} props.fields los campos del cajón (filterDrawerFields.js)\n * @param {'left'|'right'} [props.anchor] de qué lado sale; por omisión la derecha\n * @param {number} [props.width] su ancho en escritorio\n * @param {string} [props.title] ya traducido; por omisión «Filtros»\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Filtros» (con los puestos, «Filtros (3)»)\n * @param {(values: Record<string, unknown>) => void} [props.onApply] aviso de lo que se buscó (la tabla ya se filtró)\n * @param {import('react').ReactNode} [props.children] algo más abajo de los campos del cajón\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction ServerTableFilterDrawerContent(props) {\n    const {fields, anchor, width, title, buttonLabel, onApply, children, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {filters, setFilters} = useTableFilter();\n    const [isOpen, setIsOpen] = useState(false);\n    const activeCount = activeDrawerFilterCountOf(fields, filters);\n\n    return (\n        <>\n            <ServerTableFilterDrawerButton size=\"small\" variant={activeCount > 0 ? 'contained' : 'outlined'} startIcon={<TuneRoundedIcon />}\n                    aria-haspopup=\"dialog\" onClick={() => setIsOpen(true)}>\n                {activeCount > 0 ? t('filterDrawer.openWithCount', {count: activeCount}) : (buttonLabel ?? t('filterDrawer.open'))}\n            </ServerTableFilterDrawerButton>\n            <FilterDrawer open={isOpen} onClose={() => setIsOpen(false)} fields={fields} values={filters} anchor={anchor} width={width} title={title}\n                          texts={texts}\n                          onApply={(values) => {\n                              setFilters(values);\n                              onApply?.(values);\n                          }}>\n                {children}\n            </FilterDrawer>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ServerTableFilterDrawer = withPieceSlots(ServerTableFilterDrawerContent, THEME_NAME);\nexport default ServerTableFilterDrawer;\n"],"names":[],"mappings":";;;;;;;;;;;AA4BA,MAAM,aAAa;AACnB,MAAM,gCAAgC,UAAU,YAAY,UAAU,MAAM;AAa5E,SAAS,+BAA+B,OAAO;AAC3C,QAAM,EAAC,QAAQ,QAAQ,OAAO,OAAO,aAAa,SAAS,UAAU,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC9H,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,SAAS,WAAA,IAAc,eAAA;AAC9B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,cAAc,0BAA0B,QAAQ,OAAO;AAE7D,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAA8B,MAAK;AAAA,QAAQ,SAAS,cAAc,IAAI,cAAc;AAAA,QAAY,+BAAY,iBAAA,EAAgB;AAAA,QACrH,iBAAc;AAAA,QAAS,SAAS,MAAM,UAAU,IAAI;AAAA,QACvD,UAAA,cAAc,IAAI,EAAE,8BAA8B,EAAC,OAAO,YAAA,CAAY,IAAK,eAAe,EAAE,mBAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpH;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,MAAM;AAAA,QAAQ,SAAS,MAAM,UAAU,KAAK;AAAA,QAAG;AAAA,QAAgB,QAAQ;AAAA,QAAS;AAAA,QAAgB;AAAA,QAAc;AAAA,QAC9G;AAAA,QACA,SAAS,CAAC,WAAW;AACjB,qBAAW,MAAM;AACjB,oBAAU,MAAM;AAAA,QACpB;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AAGA,MAAM,0BAA0B,eAAe,gCAAgC,UAAU;"}

package/dist/DataTable/StackedCell.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const THEME_NAME = "CalcitaStackedCell";
+const StackedRoot = piecePart(THEME_NAME, "Root", "div");
+const StackedLine = piecePart(THEME_NAME, "Line", "div");
+const StackedLabel = piecePart(THEME_NAME, "Label", "span");
+const StackedValueRow = piecePart(THEME_NAME, "ValueRow", "span");
+const StackedPrimary = piecePart(THEME_NAME, "Primary", "span");
+const StackedSecondary = piecePart(THEME_NAME, "Secondary", "span");
+const StackedNote = piecePart(THEME_NAME, "Note", "span");
+const ONE_LINE_STYLES = Object.freeze({ display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1.4 });
+const LABEL_STYLES = Object.freeze({ ...ONE_LINE_STYLES, color: "text.secondary", fontSize: "0.6875rem", lineHeight: 1.3 });
+const VALUE_ROW_STYLES = Object.freeze({ display: "flex", alignItems: "baseline", gap: 0.75, minWidth: 0 });
+const NOTE_STYLES = Object.freeze({ flexShrink: 0, fontStyle: "italic", color: "text.secondary", fontSize: "0.75rem" });
+function isEmpty(value) {
+  return value === void 0 || value === null || value === "" || value === false;
+}
+function entryOf(entry) {
+  const hasShape = typeof entry === "object" && entry !== null && !isValidElement(entry) && !Array.isArray(entry) && "value" in entry;
+  return hasShape ? { label: entry.label, value: entry.value, note: entry.note, hasLabel: !isEmpty(entry.label) } : { label: void 0, value: entry, note: void 0, hasLabel: false };
+}
+function visibleEntriesOf(entries) {
+  return entries.map(entryOf).filter((entry, index) => index === 0 || entry.hasLabel || !isEmpty(entry.value));
+}
+function StackedCellContent(props) {
+  const { entries, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps("StackedCell", unknownProps);
+  const { t } = useToolkitTranslation("table");
+  return /* @__PURE__ */ jsx(StackedRoot, { ownSx: { display: "flex", flexDirection: "column", justifyContent: "center", gap: 0.25, minWidth: 0, py: 0.75 }, children: visibleEntriesOf(entries ?? []).map((entry, index) => {
+    const isPrimary = index === 0;
+    const Value = isPrimary ? StackedPrimary : StackedSecondary;
+    const value = isEmpty(entry.value) ? t("cells.empty") : entry.value;
+    return (
+      // la posición es la llave: los datos de una celda no se reordenan
+      /* @__PURE__ */ jsxs(StackedLine, { ownSx: { minWidth: 0 }, children: [
+        entry.hasLabel && /* @__PURE__ */ jsx(StackedLabel, { ownSx: LABEL_STYLES, children: entry.label }),
+        /* @__PURE__ */ jsxs(StackedValueRow, { ownSx: VALUE_ROW_STYLES, children: [
+          /* @__PURE__ */ jsx(
+            Value,
+            {
+              ownSx: isPrimary ? { ...ONE_LINE_STYLES, fontWeight: 600 } : { ...ONE_LINE_STYLES, color: "text.secondary", fontSize: "0.8125rem" },
+              title: typeof value === "string" ? value : void 0,
+              children: value
+            }
+          ),
+          !isEmpty(entry.note) && /* @__PURE__ */ jsx(StackedNote, { ownSx: NOTE_STYLES, children: entry.note })
+        ] })
+      ] }, index)
+    );
+  }) });
+}
+const StackedCell = withPieceSlots(StackedCellContent, THEME_NAME);
+export {
+  StackedCell as default
+};
+//# sourceMappingURL=StackedCell.js.map

package/dist/DataTable/StackedCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCell.js","sources":["../../src/DataTable/StackedCell.jsx"],"sourcesContent":["// La celda con varios datos apilados (la de stackedColumn): el principal arriba en negritas y los demás debajo en gris,\n// los que hagan falta. Lo que se lee de corrido va junto en una columna (la empresa, su RFC y su régimen; el contacto, su\n// correo y su teléfono) y la tabla no pide deslizar de lado con ocho columnas sueltas.\n//\n// Cada dato va solo o con su etiqueta arriba:\n//   - solo, cuando el encabezado de la columna ya dice qué son («Empresa»: la razón social y el RFC se reconocen);\n//   - con etiqueta ({label, value}), cuando el encabezado nombra al grupo y no a cada dato («Fechas»: alta y último\n//     cambio), como en una tarjeta. La etiqueta va arriba y no al lado: así el dato se queda con todo el ancho.\n//\n// Un dato vacío (null, undefined, '' o false) no se pinta, salvo el principal o uno con etiqueta: esos enseñan «—» (el\n// texto table.cells.empty, que un proyecto cambia), para que se vea qué falta en vez de que el renglón se recorra.\n//\n// Pieza genérica: function (regla de la casa).\nimport {isValidElement} from 'react';\n\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// las partes con su lugar en el tema (theme.components.CalcitaStackedCell)\nconst THEME_NAME = 'CalcitaStackedCell';\nconst StackedRoot = piecePart(THEME_NAME, 'Root', 'div');\nconst StackedLine = piecePart(THEME_NAME, 'Line', 'div');\nconst StackedLabel = piecePart(THEME_NAME, 'Label', 'span');\nconst StackedValueRow = piecePart(THEME_NAME, 'ValueRow', 'span');\nconst StackedPrimary = piecePart(THEME_NAME, 'Primary', 'span');\nconst StackedSecondary = piecePart(THEME_NAME, 'Secondary', 'span');\nconst StackedNote = piecePart(THEME_NAME, 'Note', 'span');\n\n// cada dato en su línea y con «…» si no cabe; la altura de línea propia (la de la celda no sirve: ver ServerTable)\nconst ONE_LINE_STYLES = Object.freeze({display: 'block', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.4});\nconst LABEL_STYLES = Object.freeze({...ONE_LINE_STYLES, color: 'text.secondary', fontSize: '0.6875rem', lineHeight: 1.3});\nconst VALUE_ROW_STYLES = Object.freeze({display: 'flex', alignItems: 'baseline', gap: 0.75, minWidth: 0});\nconst NOTE_STYLES = Object.freeze({flexShrink: 0, fontStyle: 'italic', color: 'text.secondary', fontSize: '0.75rem'});\n\n/**\n * Un dato de la celda: el valor solo, o con su etiqueta arriba y una nota corta junto al valor («nuevo», «sombra»).\n *\n * @typedef {import('react').ReactNode | {label?: import('react').ReactNode, value: import('react').ReactNode, note?: import('react').ReactNode}} StackedEntry\n */\n\nfunction isEmpty(value) {\n    return value === undefined || value === null || value === '' || value === false;\n}\n\n/** El dato con su forma completa: {label, value, note}; el que llegó solo, sin etiqueta. */\nfunction entryOf(entry) {\n    const hasShape = typeof entry === 'object' && entry !== null && !isValidElement(entry) && !Array.isArray(entry) && 'value' in entry;\n    return hasShape ? {label: entry.label, value: entry.value, note: entry.note, hasLabel: !isEmpty(entry.label)}\n        : {label: undefined, value: entry, note: undefined, hasLabel: false};\n}\n\n/**\n * Los datos que se pintan: el principal (el primero) siempre; de los demás, los que traen valor o etiqueta.\n *\n * @param {StackedEntry[]} entries\n */\nfunction visibleEntriesOf(entries) {\n    return entries.map(entryOf).filter((entry, index) => index === 0 || entry.hasLabel || !isEmpty(entry.value));\n}\n\n/**\n * La celda con varios datos, uno debajo del otro (lo que pinta stackedColumn; sirve también dentro de un renderCell propio).\n *\n *   <StackedCell entries={[row.business_name, row.rfc, {label: 'Régimen', value: row.regime, note: 'nuevo'}]} />\n *\n * @param {object} props\n * @param {StackedEntry[]} props.entries los datos en orden: el primero es el principal (negritas)\n * @returns {import('react').JSX.Element}\n */\nfunction StackedCellContent(props) {\n    const {entries, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps('StackedCell', unknownProps);\n    const {t} = useToolkitTranslation('table');\n\n    return (\n        <StackedRoot ownSx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 0.25, minWidth: 0, py: 0.75}}>\n            {visibleEntriesOf(entries ?? []).map((entry, index) => {\n                const isPrimary = index === 0;\n                const Value = isPrimary ? StackedPrimary : StackedSecondary;\n                const value = isEmpty(entry.value) ? t('cells.empty') : entry.value;\n                return (\n                    // la posición es la llave: los datos de una celda no se reordenan\n                    <StackedLine key={index} ownSx={{minWidth: 0}}>\n                        {entry.hasLabel && <StackedLabel ownSx={LABEL_STYLES}>{entry.label}</StackedLabel>}\n                        <StackedValueRow ownSx={VALUE_ROW_STYLES}>\n                            <Value ownSx={isPrimary ? {...ONE_LINE_STYLES, fontWeight: 600} : {...ONE_LINE_STYLES, color: 'text.secondary', fontSize: '0.8125rem'}}\n                                   // completo al pasar el cursor, por si la columna lo corta\n                                   title={typeof value === 'string' ? value : undefined}>\n                                {value}\n                            </Value>\n                            {!isEmpty(entry.note) && <StackedNote ownSx={NOTE_STYLES}>{entry.note}</StackedNote>}\n                        </StackedValueRow>\n                    </StackedLine>\n                );\n            })}\n        </StackedRoot>\n    );\n}\n\nconst StackedCell = withPieceSlots(StackedCellContent, THEME_NAME);\nexport default StackedCell;\n"],"names":[],"mappings":";;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,KAAK;AACvD,MAAM,cAAc,UAAU,YAAY,QAAQ,KAAK;AACvD,MAAM,eAAe,UAAU,YAAY,SAAS,MAAM;AAC1D,MAAM,kBAAkB,UAAU,YAAY,YAAY,MAAM;AAChE,MAAM,iBAAiB,UAAU,YAAY,WAAW,MAAM;AAC9D,MAAM,mBAAmB,UAAU,YAAY,aAAa,MAAM;AAClE,MAAM,cAAc,UAAU,YAAY,QAAQ,MAAM;AAGxD,MAAM,kBAAkB,OAAO,OAAO,EAAC,SAAS,SAAS,UAAU,GAAG,UAAU,UAAU,cAAc,YAAY,YAAY,UAAU,YAAY,KAAI;AAC1J,MAAM,eAAe,OAAO,OAAO,EAAC,GAAG,iBAAiB,OAAO,kBAAkB,UAAU,aAAa,YAAY,IAAA,CAAI;AACxH,MAAM,mBAAmB,OAAO,OAAO,EAAC,SAAS,QAAQ,YAAY,YAAY,KAAK,MAAM,UAAU,EAAA,CAAE;AACxG,MAAM,cAAc,OAAO,OAAO,EAAC,YAAY,GAAG,WAAW,UAAU,OAAO,kBAAkB,UAAU,UAAA,CAAU;AAQpH,SAAS,QAAQ,OAAO;AACpB,SAAO,UAAU,UAAa,UAAU,QAAQ,UAAU,MAAM,UAAU;AAC9E;AAGA,SAAS,QAAQ,OAAO;AACpB,QAAM,WAAW,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,eAAe,KAAK,KAAK,CAAC,MAAM,QAAQ,KAAK,KAAK,WAAW;AAC9H,SAAO,WAAW,EAAC,OAAO,MAAM,OAAO,OAAO,MAAM,OAAO,MAAM,MAAM,MAAM,UAAU,CAAC,QAAQ,MAAM,KAAK,EAAA,IACrG,EAAC,OAAO,QAAW,OAAO,OAAO,MAAM,QAAW,UAAU,MAAA;AACtE;AAOA,SAAS,iBAAiB,SAAS;AAC/B,SAAO,QAAQ,IAAI,OAAO,EAAE,OAAO,CAAC,OAAO,UAAU,UAAU,KAAK,MAAM,YAAY,CAAC,QAAQ,MAAM,KAAK,CAAC;AAC/G;AAWA,SAAS,mBAAmB,OAAO;AAC/B,QAAM,EAAC,SAAS,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAClE,mBAAiB,eAAe,YAAY;AAC5C,QAAM,EAAC,EAAA,IAAK,sBAAsB,OAAO;AAEzC,SACI,oBAAC,aAAA,EAAY,OAAO,EAAC,SAAS,QAAQ,eAAe,UAAU,gBAAgB,UAAU,KAAK,MAAM,UAAU,GAAG,IAAI,KAAA,GAChH,UAAA,iBAAiB,WAAW,CAAA,CAAE,EAAE,IAAI,CAAC,OAAO,UAAU;AACnD,UAAM,YAAY,UAAU;AAC5B,UAAM,QAAQ,YAAY,iBAAiB;AAC3C,UAAM,QAAQ,QAAQ,MAAM,KAAK,IAAI,EAAE,aAAa,IAAI,MAAM;AAC9D;AAAA;AAAA,2BAEK,aAAA,EAAwB,OAAO,EAAC,UAAU,KACtC,UAAA;AAAA,QAAA,MAAM,YAAY,oBAAC,cAAA,EAAa,OAAO,cAAe,gBAAM,OAAM;AAAA,QACnE,qBAAC,iBAAA,EAAgB,OAAO,kBACpB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAAM,OAAO,YAAY,EAAC,GAAG,iBAAiB,YAAY,IAAA,IAAO,EAAC,GAAG,iBAAiB,OAAO,kBAAkB,UAAU,YAAA;AAAA,cAEnH,OAAO,OAAO,UAAU,WAAW,QAAQ;AAAA,cAC7C,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEJ,CAAC,QAAQ,MAAM,IAAI,yBAAM,aAAA,EAAY,OAAO,aAAc,UAAA,MAAM,KAAA,CAAK;AAAA,QAAA,EAAA,CAC1E;AAAA,MAAA,EAAA,GATc,KAUlB;AAAA;AAAA,EAER,CAAC,EAAA,CACL;AAER;AAEA,MAAM,cAAc,eAAe,oBAAoB,UAAU;"}

package/dist/DataTable/TableCardsView.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import LinearProgress from "@mui/material/LinearProgress";
+import Pagination from "@mui/material/Pagination";
+import Stack from "@mui/material/Stack";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import Tooltip from "@mui/material/Tooltip";
+import TableRowsRoundedIcon from "@mui/icons-material/TableRowsRounded";
+import ViewAgendaOutlinedIcon from "@mui/icons-material/ViewAgendaOutlined";
+import EmptyState from "./EmptyState.js";
+import { TABLE_VIEW } from "./useTableView.js";
+import { piecePart, withPieceSlots } from "../theme/themePieces.js";
+import RecordCardSkeleton from "../ui/cards/RecordCardSkeleton.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+const THEME_NAME = "CalcitaServerTable";
+const TableCards = piecePart(THEME_NAME, "Cards", "div");
+const TableCardsPagination = piecePart(THEME_NAME, "CardsPagination", Stack);
+const TableViewToggleGroup = piecePart(THEME_NAME, "ViewToggle", ToggleButtonGroup);
+const MAX_SKELETON_CARDS = 3;
+function TableViewToggleContent({ view, onChange }) {
+  const { t } = useToolkitTranslation("table");
+  return /* @__PURE__ */ jsxs(
+    TableViewToggleGroup,
+    {
+      size: "small",
+      exclusive: true,
+      value: view,
+      "aria-label": t("views.label"),
+      onChange: (event, nextView) => nextView && onChange(nextView),
+      ownSx: { flexShrink: 0, alignSelf: { xs: "flex-end", md: "center" } },
+      children: [
+        /* @__PURE__ */ jsx(ToggleButton, { value: TABLE_VIEW.table, "aria-label": t("views.table"), children: /* @__PURE__ */ jsx(Tooltip, { title: t("views.table"), children: /* @__PURE__ */ jsx(TableRowsRoundedIcon, { fontSize: "small" }) }) }),
+        /* @__PURE__ */ jsx(ToggleButton, { value: TABLE_VIEW.cards, "aria-label": t("views.cards"), children: /* @__PURE__ */ jsx(Tooltip, { title: t("views.cards"), children: /* @__PURE__ */ jsx(ViewAgendaOutlinedIcon, { fontSize: "small" }) }) })
+      ]
+    }
+  );
+}
+function TableCardsViewContent({
+  rows,
+  renderCard,
+  rowIdOf,
+  isLoading,
+  page,
+  pageCount,
+  onPageChange,
+  hasActiveFilters,
+  emptyLabel,
+  onClearFilters,
+  skeleton,
+  ariaLabel
+}) {
+  const { t } = useToolkitTranslation("table");
+  const isFirstLoad = isLoading && rows.length === 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoading && !isFirstLoad && /* @__PURE__ */ jsx(LinearProgress, { sx: { mb: 1, borderRadius: 1 } }),
+    /* @__PURE__ */ jsxs(
+      TableCards,
+      {
+        role: "list",
+        "aria-label": ariaLabel ?? t("cards.label"),
+        "aria-busy": isLoading,
+        ownSx: { display: "grid", gap: 1.5, minWidth: 0 },
+        children: [
+          isFirstLoad && Array.from({ length: MAX_SKELETON_CARDS }, (unused, index) => /* @__PURE__ */ jsx("div", { role: "listitem", children: skeleton ?? /* @__PURE__ */ jsx(RecordCardSkeleton, {}) }, index)),
+          rows.map((row, index) => /* @__PURE__ */ jsx("div", { role: "listitem", children: renderCard(row, { index }) }, rowIdOf(row)))
+        ]
+      }
+    ),
+    !isLoading && rows.length === 0 && /* @__PURE__ */ jsx(EmptyState, { filtered: hasActiveFilters, label: emptyLabel, onClearFilters }),
+    pageCount > 1 && /* @__PURE__ */ jsx(TableCardsPagination, { direction: "row", ownSx: { justifyContent: "center", mt: 2 }, children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        count: pageCount,
+        page: page + 1,
+        onChange: (event, nextPage) => onPageChange(nextPage - 1),
+        getItemAriaLabel: (type, itemPage) => t(`cards.pagination.${type}`, { page: itemPage })
+      }
+    ) })
+  ] });
+}
+const TableCardsView = withPieceSlots(TableCardsViewContent, THEME_NAME, { sharedWithParent: true });
+const TableViewToggle = withPieceSlots(TableViewToggleContent, THEME_NAME, { sharedWithParent: true });
+export {
+  TableViewToggle,
+  TableCardsView as default
+};
+//# sourceMappingURL=TableCardsView.js.map

package/dist/DataTable/TableCardsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCardsView.js","sources":["../../src/DataTable/TableCardsView.jsx"],"sourcesContent":["// La otra vista de ServerTable: los mismos renglones (la misma búsqueda, filtros, orden y página) en tarjetas, una por\n// renglón, con lo que pinte la pantalla (renderCard; normalmente RecordCard). Mientras llega la primera página, esqueletos\n// con la forma de la tarjeta; al cambiar de página se quedan las de antes con una barra arriba (no brinca la pantalla).\n//\n// Se cambia desde el tema del proyecto, como la tabla: components.CalcitaServerTable con styleOverrides de sus partes\n// cards (la lista: una columna por omisión; con display grid se hacen columnas), cardsPagination y viewToggle.\n//\n// Genéricos del paquete: function (regla de la casa).\nimport LinearProgress from '@mui/material/LinearProgress';\nimport Pagination from '@mui/material/Pagination';\nimport Stack from '@mui/material/Stack';\nimport ToggleButton from '@mui/material/ToggleButton';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup';\nimport Tooltip from '@mui/material/Tooltip';\nimport TableRowsRoundedIcon from '@mui/icons-material/TableRowsRounded';\nimport ViewAgendaOutlinedIcon from '@mui/icons-material/ViewAgendaOutlined';\n\nimport EmptyState from '@/DataTable/EmptyState.jsx';\nimport {TABLE_VIEW} from '@/DataTable/useTableView.js';\nimport {piecePart, withPieceSlots} from '@/theme/themePieces.js';\nimport RecordCardSkeleton from '@/ui/cards/RecordCardSkeleton.jsx';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n// el nombre de la pieza en el tema: el de la tabla (theme.components.CalcitaServerTable)\nconst THEME_NAME = 'CalcitaServerTable';\nconst TableCards = piecePart(THEME_NAME, 'Cards', 'div');\nconst TableCardsPagination = piecePart(THEME_NAME, 'CardsPagination', Stack);\nconst TableViewToggleGroup = piecePart(THEME_NAME, 'ViewToggle', ToggleButtonGroup);\n\n// cuántos esqueletos mientras llega la primera página: los de una pantalla, no los de toda la página\nconst MAX_SKELETON_CARDS = 3;\n\n/**\n * El botón de dos posiciones para ver la lista en tabla o en tarjetas.\n *\n * @param {{view: 'table'|'cards', onChange: (view: 'table'|'cards') => void}} props\n */\nfunction TableViewToggleContent({view, onChange}) {\n    const {t} = useToolkitTranslation('table');\n    return (\n        <TableViewToggleGroup size=\"small\" exclusive value={view} aria-label={t('views.label')}\n                              onChange={(event, nextView) => nextView && onChange(nextView)} ownSx={{flexShrink: 0, alignSelf: {xs: 'flex-end', md: 'center'}}}>\n            <ToggleButton value={TABLE_VIEW.table} aria-label={t('views.table')}>\n                <Tooltip title={t('views.table')}><TableRowsRoundedIcon fontSize=\"small\" /></Tooltip>\n            </ToggleButton>\n            <ToggleButton value={TABLE_VIEW.cards} aria-label={t('views.cards')}>\n                <Tooltip title={t('views.cards')}><ViewAgendaOutlinedIcon fontSize=\"small\" /></Tooltip>\n            </ToggleButton>\n        </TableViewToggleGroup>\n    );\n}\n\n/**\n * @param {object} props\n * @param {any[]} props.rows los renglones de la página\n * @param {(row: any, helpers: {index: number}) => import('react').ReactNode} props.renderCard\n * @param {(row: any) => string|number} props.rowIdOf\n * @param {boolean} props.isLoading\n * @param {number} props.page desde 0\n * @param {number} props.pageCount\n * @param {(page: number) => void} props.onPageChange recibe la página desde 0\n * @param {boolean} props.hasActiveFilters\n * @param {string} [props.emptyLabel]\n * @param {() => void} props.onClearFilters\n * @param {import('react').ReactNode} [props.skeleton] el esqueleto de una tarjeta (por omisión RecordCardSkeleton)\n * @param {string} [props.ariaLabel] el nombre de la lista para el lector de pantalla\n */\nfunction TableCardsViewContent({\n    rows, renderCard, rowIdOf, isLoading, page, pageCount, onPageChange, hasActiveFilters, emptyLabel, onClearFilters, skeleton, ariaLabel,\n}) {\n    const {t} = useToolkitTranslation('table');\n    const isFirstLoad = isLoading && rows.length === 0;\n\n    return (\n        <>\n            {/* al cambiar de página se quedan las tarjetas de antes con una barra arriba: no brinca la pantalla */}\n            {isLoading && !isFirstLoad && <LinearProgress sx={{mb: 1, borderRadius: 1}} />}\n            <TableCards role=\"list\" aria-label={ariaLabel ?? t('cards.label')} aria-busy={isLoading}\n                        ownSx={{display: 'grid', gap: 1.5, minWidth: 0}}>\n                {isFirstLoad && Array.from({length: MAX_SKELETON_CARDS}, (unused, index) => (\n                    <div key={index} role=\"listitem\">{skeleton ?? <RecordCardSkeleton />}</div>\n                ))}\n                {rows.map((row, index) => <div key={rowIdOf(row)} role=\"listitem\">{renderCard(row, {index})}</div>)}\n            </TableCards>\n            {!isLoading && rows.length === 0 && (\n                <EmptyState filtered={hasActiveFilters} label={emptyLabel} onClearFilters={onClearFilters} />\n            )}\n            {pageCount > 1 && (\n                <TableCardsPagination direction=\"row\" ownSx={{justifyContent: 'center', mt: 2}}>\n                    <Pagination count={pageCount} page={page + 1} onChange={(event, nextPage) => onPageChange(nextPage - 1)}\n                                getItemAriaLabel={(type, itemPage) => t(`cards.pagination.${type}`, {page: itemPage})} />\n                </TableCardsPagination>\n            )}\n        </>\n    );\n}\n\n// dentro de ServerTable (mismo nombre en el tema) usan los slots de la tabla; solas, los suyos\nconst TableCardsView = withPieceSlots(TableCardsViewContent, THEME_NAME, {sharedWithParent: true});\nexport const TableViewToggle = withPieceSlots(TableViewToggleContent, THEME_NAME, {sharedWithParent: true});\nexport default TableCardsView;\n"],"names":[],"mappings":"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"}

package/dist/DataTable/columnWidths.js

@@ -0,0 +1,30 @@
+const STATUS_FONT_SIZE_PIXELS = 13;
+const STATUS_FONT_WEIGHT = 500;
+const AVERAGE_CHARACTER_WIDTH_PIXELS = 7.4;
+const STATUS_EXTRA_PIXELS = Object.freeze({ dot: 40, chip: 52 });
+const HEADER_ICONS_PIXELS = 56;
+let measuringContext = null;
+function textWidthOf(text, { fontSize = STATUS_FONT_SIZE_PIXELS, fontWeight = STATUS_FONT_WEIGHT } = {}) {
+  const value = String(text ?? "");
+  if (typeof document === "undefined") {
+    return value.length * AVERAGE_CHARACTER_WIDTH_PIXELS * (fontSize / STATUS_FONT_SIZE_PIXELS);
+  }
+  measuringContext ??= document.createElement("canvas").getContext("2d");
+  if (!measuringContext) {
+    return value.length * AVERAGE_CHARACTER_WIDTH_PIXELS * (fontSize / STATUS_FONT_SIZE_PIXELS);
+  }
+  const fontFamily = getComputedStyle(document.body).fontFamily || "system-ui, sans-serif";
+  measuringContext.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  return measuringContext.measureText(value).width;
+}
+function statusColumnWidthOf([header, ...labels], { variant = "dot" } = {}) {
+  const extra = STATUS_EXTRA_PIXELS[variant] ?? STATUS_EXTRA_PIXELS.dot;
+  const widest = Math.max(0, ...labels.map((label) => textWidthOf(label) + extra));
+  const headerWidth = textWidthOf(header, { fontWeight: 600 }) + HEADER_ICONS_PIXELS;
+  return Math.ceil(Math.max(widest, headerWidth));
+}
+export {
+  statusColumnWidthOf,
+  textWidthOf
+};
+//# sourceMappingURL=columnWidths.js.map

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/filterContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"filterContext.js","sources":["../../src/DataTable/filterContext.js"],"sourcesContent":["// Contexto que comparten los encabezados de columna con la tabla.\n//\n// Existe para que renderHeader de cada columna no reciba media docena de props: el encabezado pide lo que necesita\n// (el filtro de SU campo, el orden y las facetas del servidor) y la tabla no se entera.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\nimport {createContext, useContext} from 'react';\n\nexport const TableFilterContext = createContext(null);\n\n/**\n * @returns {{filters: object, setFilter: Function, clearFilter: Function, sortOrders: Array, toggleSort: Function, clearSort: Function, facets: object}}\n */\nexport function useTableFilter() {\n    const tableFilterValue = useContext(TableFilterContext);\n    if (!tableFilterValue) {\n        // mejor tronar aquí que pintar un encabezado muerto que no filtra y nadie entiende por qué\n        throw new Error('Un encabezado de columna se montó fuera de <ServerTable>.');\n    }\n    return tableFilterValue;\n}\n"],"names":[],"mappings":";;AAQY,MAAC,qBAAqB,cAAc,IAAI;AAK7C,SAAS,iBAAiB;AAC7B,QAAM,mBAAmB,WAAW,kBAAkB;AACtD,MAAI,CAAC,kBAAkB;AAEnB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC/E;AACA,SAAO;AACX;"}
+{"version":3,"file":"filterContext.js","sources":["../../src/DataTable/filterContext.js"],"sourcesContent":["// Contexto que comparten los encabezados de columna con la tabla.\n//\n// Existe para que renderHeader de cada columna no reciba media docena de props: el encabezado pide lo que necesita\n// (el filtro de SU campo, el orden y las facetas del servidor) y la tabla no se entera.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\nimport {createContext, useContext} from 'react';\n\nexport const TableFilterContext = createContext(null);\n\n/**\n * @returns {{filters: object, setFilter: Function, setFilters: Function, clearFilter: Function, sortOrders: Array, toggleSort: Function, clearSort: Function, facets: object}}\n */\nexport function useTableFilter() {\n    const tableFilterValue = useContext(TableFilterContext);\n    if (!tableFilterValue) {\n        // mejor tronar aquí que pintar un encabezado muerto que no filtra y nadie entiende por qué\n        throw new Error('Un encabezado de columna se montó fuera de <ServerTable>.');\n    }\n    return tableFilterValue;\n}\n"],"names":[],"mappings":";;AAQY,MAAC,qBAAqB,cAAc,IAAI;AAK7C,SAAS,iBAAiB;AAC7B,QAAM,mBAAmB,WAAW,kBAAkB;AACtD,MAAI,CAAC,kBAAkB;AAEnB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC/E;AACA,SAAO;AACX;"}

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/goToPageOptions.js

@@ -0,0 +1,17 @@
+function pageNumbersOf(pageCount) {
+  return Array.from({ length: pageCount }, (unused, position) => position + 1);
+}
+function filterPages(pageNumbers, { inputValue }) {
+  const typedText = inputValue.trim();
+  if (!typedText) {
+    return pageNumbers;
+  }
+  const startingWith = pageNumbers.filter((pageNumber) => String(pageNumber).startsWith(typedText));
+  const containing = pageNumbers.filter((pageNumber) => !String(pageNumber).startsWith(typedText) && String(pageNumber).includes(typedText));
+  return [...startingWith, ...containing];
+}
+export {
+  filterPages,
+  pageNumbersOf
+};
+//# sourceMappingURL=goToPageOptions.js.map

package/dist/DataTable/goToPageOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goToPageOptions.js","sources":["../../src/DataTable/goToPageOptions.js"],"sourcesContent":["// «Ir a la página N»: qué páginas enseña la lista según lo que se teclea.\n//\n// Sin recorte: GoToPage pinta solo las páginas que se ven (react-window), así que la lista puede traer decenas de miles de\n// páginas y deslizarse hasta la última. Al teclear, primero las que EMPIEZAN con lo tecleado (13 da 13, 130, 131...) y\n// después las que lo contienen (213, 1013...).\n//\n// Puro (sin React): se prueba con node (goToPageOptions.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/**\n * @param {number} pageCount cuántas páginas tiene la tabla\n * @returns {number[]} las páginas como las cuenta una persona: 1, 2, 3... pageCount\n */\nexport function pageNumbersOf(pageCount) {\n    return Array.from({length: pageCount}, (unused, position) => position + 1);\n}\n\n/**\n * filterOptions del Autocomplete.\n *\n * @param {number[]} pageNumbers todas las páginas\n * @param {{inputValue: string}} state lo que lleva tecleado la persona\n * @returns {number[]} sin teclear, todas; tecleando, primero las que empiezan así y luego las que lo contienen\n */\nexport function filterPages(pageNumbers, {inputValue}) {\n    const typedText = inputValue.trim();\n    if (!typedText) {\n        return pageNumbers;\n    }\n\n    const startingWith = pageNumbers.filter((pageNumber) => String(pageNumber).startsWith(typedText));\n    const containing = pageNumbers.filter((pageNumber) => !String(pageNumber).startsWith(typedText) && String(pageNumber).includes(typedText));\n    return [...startingWith, ...containing];\n}\n"],"names":[],"mappings":"AAcO,SAAS,cAAc,WAAW;AACrC,SAAO,MAAM,KAAK,EAAC,QAAQ,UAAS,GAAG,CAAC,QAAQ,aAAa,WAAW,CAAC;AAC7E;AASO,SAAS,YAAY,aAAa,EAAC,WAAU,GAAG;AACnD,QAAM,YAAY,WAAW,KAAI;AACjC,MAAI,CAAC,WAAW;AACZ,WAAO;AAAA,EACX;AAEA,QAAM,eAAe,YAAY,OAAO,CAAC,eAAe,OAAO,UAAU,EAAE,WAAW,SAAS,CAAC;AAChG,QAAM,aAAa,YAAY,OAAO,CAAC,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,SAAS,KAAK,OAAO,UAAU,EAAE,SAAS,SAAS,CAAC;AACzI,SAAO,CAAC,GAAG,cAAc,GAAG,UAAU;AAC1C;"}

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
 };