@stackcraftmx/calcita 0.0.0-stage → 0.23.0

package/dist/DataTable/columns.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import "react";
+import "@mui/material/Badge";
+import "@mui/material/Box";
+import "@mui/material/Button";
+import "@mui/material/Popover";
+import "@mui/material/Stack";
+import "@mui/icons-material/FilterAlt";
+import "@mui/icons-material/FilterAltOutlined";
+import MultiSelectColumnFilter from "./ColumnFilters/MultiSelectColumnFilter.js";
+import SortableFilterHeader from "./ColumnFilters/SortableFilterHeader.js";
+import TextColumnFilter from "./ColumnFilters/TextColumnFilter.js";
+import { useTableFilter } from "./filterContext.js";
+import { FILTER_KINDS, isFilterActive } from "./useTableState.js";
+function activeCountOf(kind, value) {
+  if (!isFilterActive(kind, value)) {
+    return 0;
+  }
+  return kind === FILTER_KINDS.multiSelect ? value.length : 1;
+}
+function useColumnHeader(field, kind) {
+  const { filters, setFilter, clearFilter, sortOrders, toggleSort, clearSort, facets } = useTableFilter();
+  return {
+    value: filters[field],
+    setValue: (value) => setFilter(field, value),
+    onClear: () => clearFilter(field),
+    sortEntry: sortOrders.find((sortOrder) => sortOrder.column === field),
+    onSort: () => toggleSort(field),
+    onClearSort: clearSort,
+    activeCount: activeCountOf(kind, filters[field]),
+    facets
+  };
+}
+function TextHeader({ field, label, sort, filter }) {
+  const header = useColumnHeader(field, FILTER_KINDS.text);
+  return /* @__PURE__ */ jsx(
+    SortableFilterHeader,
+    {
+      label,
+      sortable: sort,
+      filterable: filter,
+      sortEntry: header.sortEntry,
+      onSort: header.onSort,
+      onClearSort: header.onClearSort,
+      activeCount: header.activeCount,
+      onClear: header.onClear,
+      children: /* @__PURE__ */ jsx(TextColumnFilter, { value: header.value ?? "", onChange: header.setValue })
+    }
+  );
+}
+function FacetHeader({ field, label, facetKey, renderOption, sort }) {
+  const header = useColumnHeader(field, FILTER_KINDS.multiSelect);
+  return /* @__PURE__ */ jsx(
+    SortableFilterHeader,
+    {
+      label,
+      sortable: sort,
+      sortEntry: header.sortEntry,
+      onSort: header.onSort,
+      onClearSort: header.onClearSort,
+      activeCount: header.activeCount,
+      onClear: header.onClear,
+      children: /* @__PURE__ */ jsx(
+        MultiSelectColumnFilter,
+        {
+          value: header.value ?? [],
+          onChange: header.setValue,
+          options: header.facets[facetKey] ?? [],
+          renderOption
+        }
+      )
+    }
+  );
+}
+function textColumn({ field, label, sort = true, filter = true, ...gridColumnProps }) {
+  return {
+    field,
+    headerName: label,
+    sortable: false,
+    filterable: false,
+    ...gridColumnProps,
+    renderHeader: () => /* @__PURE__ */ jsx(TextHeader, { field, label, sort, filter })
+  };
+}
+function facetColumn({ field, label, facetKey, renderOption, sort = true, ...gridColumnProps }) {
+  return {
+    field,
+    headerName: label,
+    sortable: false,
+    filterable: false,
+    ...gridColumnProps,
+    renderHeader: () => /* @__PURE__ */ jsx(FacetHeader, { field, label, facetKey: facetKey ?? field, renderOption, sort })
+  };
+}
+function DetailCell({ row, onOpen, ariaLabelOf }) {
+  const { t } = useToolkitTranslation("table");
+  const ariaLabel = ariaLabelOf?.(row) ?? t("detail.ariaLabel");
+  return /* @__PURE__ */ jsx(Tooltip, { title: t("detail.tooltip"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", "aria-label": ariaLabel, onClick: () => onOpen(row), children: /* @__PURE__ */ jsx(VisibilityOutlinedIcon, { fontSize: "small" }) }) });
+}
+function detailColumn({ onOpen, ariaLabelOf }) {
+  return {
+    field: "__detail",
+    headerName: "",
+    sortable: false,
+    filterable: false,
+    disableColumnMenu: true,
+    width: 64,
+    align: "center",
+    renderCell: ({ row }) => /* @__PURE__ */ jsx(DetailCell, { row, onOpen, ariaLabelOf })
+  };
+}
+export {
+  detailColumn,
+  facetColumn,
+  textColumn
+};
+//# sourceMappingURL=columns.js.map

package/dist/DataTable/columns.js.map

@@ -0,0 +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';\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 * @param {{onOpen: (row: any) => void, ariaLabelOf?: (row: any) => string}} declaration ariaLabelOf ya traducido\n */\nexport function detailColumn({onOpen, ariaLabelOf}) {\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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"}

package/dist/DataTable/filterContext.js

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, useContext } from "react";
+const TableFilterContext = createContext(null);
+function useTableFilter() {
+  const tableFilterValue = useContext(TableFilterContext);
+  if (!tableFilterValue) {
+    throw new Error("Un encabezado de columna se montó fuera de <ServerTable>.");
+  }
+  return tableFilterValue;
+}
+export {
+  TableFilterContext,
+  useTableFilter
+};
+//# sourceMappingURL=filterContext.js.map

package/dist/DataTable/filterContext.js.map

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

package/dist/DataTable/serverTableParams.js

@@ -0,0 +1,19 @@
+function toServerTableParams({ filters = {}, sortOrders = [], page, pageSize }, { parameterNames = {} } = {}) {
+  const params = { page: page + 1, page_size: pageSize };
+  if (sortOrders.length > 0) {
+    params.sort = sortOrders[0].column;
+    params.direction = sortOrders[0].direction;
+  }
+  for (const [field, value] of Object.entries(filters)) {
+    const isEmpty = value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0;
+    if (isEmpty) {
+      continue;
+    }
+    params[parameterNames[field] ?? field] = value;
+  }
+  return params;
+}
+export {
+  toServerTableParams
+};
+//# sourceMappingURL=serverTableParams.js.map

package/dist/DataTable/serverTableParams.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"serverTableParams.js","sources":["../../src/DataTable/serverTableParams.js"],"sourcesContent":["// Traductor del estado de ServerTable a la query del backend (contrato ServerTable del API).\n//\n//   {filters, sortOrders, page, pageSize}  →  {page, page_size, sort, direction, <filtro>: valor}\n//\n// Lo que se decide aquí y no en cada pantalla:\n//   - page: la tabla cuenta desde 0 (DataGrid) y el API desde 1;\n//   - un filtro vacío ('' o []) NO viaja: el backend lo leería como \"filtrar por vacío\";\n//   - un filtro múltiple viaja como arreglo; axios lo serializa como status[]=a&status[]=b, que es lo que valida Laravel.\n//\n// Pura: sin imports; se prueba con node --test (serverTableParams.test.js).\n\n/**\n * @param {{filters?: object, sortOrders?: Array<{column: string, direction: 'asc'|'desc'}>, page: number, pageSize: number}} tableRequest\n * @param {{parameterNames?: Record<string, string>}} [options] campo de la tabla → nombre del parámetro en el API\n * @returns {Record<string, unknown>} params para getInfo\n */\nexport function toServerTableParams({filters = {}, sortOrders = [], page, pageSize}, {parameterNames = {}} = {}) {\n    const params = {page: page + 1, page_size: pageSize};\n\n    if (sortOrders.length > 0) {\n        params.sort = sortOrders[0].column;\n        params.direction = sortOrders[0].direction;\n    }\n\n    for (const [field, value] of Object.entries(filters)) {\n        const isEmpty = value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0);\n        // guard clause: un filtro sin valor no se manda\n        if (isEmpty) {\n            continue;\n        }\n        params[parameterNames[field] ?? field] = value;\n    }\n\n    return params;\n}\n"],"names":[],"mappings":"AAgBO,SAAS,oBAAoB,EAAC,UAAU,CAAA,GAAI,aAAa,CAAA,GAAI,MAAM,SAAQ,GAAG,EAAC,iBAAiB,CAAA,EAAE,IAAI,CAAA,GAAI;AAC7G,QAAM,SAAS,EAAC,MAAM,OAAO,GAAG,WAAW,SAAQ;AAEnD,MAAI,WAAW,SAAS,GAAG;AACvB,WAAO,OAAO,WAAW,CAAC,EAAE;AAC5B,WAAO,YAAY,WAAW,CAAC,EAAE;AAAA,EACrC;AAEA,aAAW,CAAC,OAAO,KAAK,KAAK,OAAO,QAAQ,OAAO,GAAG;AAClD,UAAM,UAAU,UAAU,QAAQ,UAAU,UAAa,UAAU,MAAO,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAEnH,QAAI,SAAS;AACT;AAAA,IACJ;AACA,WAAO,eAAe,KAAK,KAAK,KAAK,IAAI;AAAA,EAC7C;AAEA,SAAO;AACX;"}

package/dist/DataTable/tableMachine.js

@@ -0,0 +1,87 @@
+import { assign, setup, fromPromise } from "xstate";
+function isCancellation(error) {
+  return error?.name === "AbortError" || error?.name === "CanceledError" || error?.code === "ERR_CANCELED";
+}
+const startNewRequest = assign({
+  error: null,
+  requestId: ({ context }) => context.requestId + 1
+});
+const tableMachine = setup({
+  actors: {
+    // lo reemplaza buildTableActors; si alguien olvida proveerlo, que truene con un mensaje claro
+    fetchPage: fromPromise(async () => {
+      throw new Error("tableMachine: falta proveer fetchPage con buildTableActors().");
+    })
+  },
+  guards: {
+    isStaleResponse: ({ context, event }) => event.output.requestId !== context.requestId,
+    isCancellation: ({ event }) => isCancellation(event.error)
+  }
+}).createMachine({
+  id: "table",
+  initial: "idle",
+  context: {
+    rows: [],
+    total: 0,
+    facets: {},
+    capped: false,
+    // el error tal cual (normalmente un ApiError con el mensaje ya traducido)
+    error: null,
+    // se incrementa en cada FETCH: identifica cuál es la consulta vigente
+    requestId: 0
+  },
+  states: {
+    // nadie ha pedido nada todavía
+    idle: {
+      on: { FETCH: { target: "loading", actions: startNewRequest } }
+    },
+    loading: {
+      invoke: {
+        src: "fetchPage",
+        // las acciones de la transición corren ANTES de entrar al estado: aquí el requestId ya es el nuevo
+        input: ({ context, event }) => ({ ...event.params, requestId: context.requestId }),
+        onDone: [
+          // respuesta de una consulta que ya no es la vigente: se tira en silencio (es una carrera)
+          { guard: "isStaleResponse" },
+          {
+            target: "ready",
+            actions: assign({
+              rows: ({ event }) => event.output.rows ?? [],
+              total: ({ event }) => event.output.total ?? 0,
+              capped: ({ event }) => event.output.capped ?? false,
+              // si la respuesta no trae facetas (páginas 2 en adelante) se conservan las que había
+              facets: ({ context, event }) => Object.keys(event.output.facets ?? {}).length ? event.output.facets : context.facets,
+              error: null
+            })
+          }
+        ],
+        onError: [
+          { guard: "isCancellation" },
+          { target: "error", actions: assign({ error: ({ event }) => event.error }) }
+        ]
+      },
+      on: { FETCH: { target: "loading", reenter: true, actions: startNewRequest } }
+    },
+    ready: {
+      on: { FETCH: { target: "loading", actions: startNewRequest } }
+    },
+    error: {
+      on: { FETCH: { target: "loading", actions: startNewRequest } }
+    }
+  }
+});
+function buildTableActors(fetchPage) {
+  return {
+    fetchPage: fromPromise(async ({ input, signal }) => {
+      const { requestId, ...params } = input;
+      const tablePage = await fetchPage(params, signal);
+      return { ...tablePage, requestId };
+    })
+  };
+}
+export {
+  buildTableActors,
+  isCancellation,
+  tableMachine
+};
+//# sourceMappingURL=tableMachine.js.map

package/dist/DataTable/tableMachine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableMachine.js","sources":["../../src/DataTable/tableMachine.js"],"sourcesContent":["// Máquina de la tabla de servidor: el ciclo de vida de la petición, y nada más.\n//\n// Reparto de responsabilidades, a propósito:\n//   la URL (nuqs)  es la fuente de verdad de filtros, orden y página;\n//   esta máquina   es la fuente de verdad de \"¿está cargando?, ¿qué trajo?\".\n// Tener los filtros en los dos lados es lo que produce pantallas donde la tabla dice una cosa y la URL otra.\n//\n//   idle ──FETCH──▶ loading ──onDone──▶ ready\n//                     │  ▲                │\n//                     │  └──── FETCH ─────┤   (reenter: aborta la petición anterior)\n//                     └──onError──▶ error ┘\n//\n// IMPORTANTE: abortar es una PETICIÓN al navegador, no una garantía; una respuesta que ya venía en camino puede\n// resolverse igual. Por eso cada consulta lleva un requestId y se descarta todo lo que no sea la última: sin eso se\n// ven filas de dos filtros distintos mezcladas.\n//\n// Pura: solo importa xstate. La petición la pone quien la usa con buildTableActors(fetchPage). Prueba en\n// tableMachine.test.js (node --test).\nimport {assign, fromPromise, setup} from 'xstate';\n\n/**\n * ¿El error es una cancelación (axios o fetch)? Cancelar una consulta que ya no interesa no es un error que mostrar.\n *\n * @param {unknown} error\n * @returns {boolean}\n */\nexport function isCancellation(error) {\n    return error?.name === 'AbortError' || error?.name === 'CanceledError' || error?.code === 'ERR_CANCELED';\n}\n\nconst startNewRequest = assign({\n    error: null,\n    requestId: ({context}) => context.requestId + 1,\n});\n\nexport const tableMachine = setup({\n    actors: {\n        // lo reemplaza buildTableActors; si alguien olvida proveerlo, que truene con un mensaje claro\n        fetchPage: fromPromise(async () => {\n            throw new Error('tableMachine: falta proveer fetchPage con buildTableActors().');\n        }),\n    },\n    guards: {\n        isStaleResponse: ({context, event}) => event.output.requestId !== context.requestId,\n        isCancellation: ({event}) => isCancellation(event.error),\n    },\n}).createMachine({\n    id: 'table',\n    initial: 'idle',\n    context: {\n        rows: [],\n        total: 0,\n        facets: {},\n        capped: false,\n        // el error tal cual (normalmente un ApiError con el mensaje ya traducido)\n        error: null,\n        // se incrementa en cada FETCH: identifica cuál es la consulta vigente\n        requestId: 0,\n    },\n    states: {\n        // nadie ha pedido nada todavía\n        idle: {\n            on: {FETCH: {target: 'loading', actions: startNewRequest}},\n        },\n        loading: {\n            invoke: {\n                src: 'fetchPage',\n                // las acciones de la transición corren ANTES de entrar al estado: aquí el requestId ya es el nuevo\n                input: ({context, event}) => ({...event.params, requestId: context.requestId}),\n                onDone: [\n                    // respuesta de una consulta que ya no es la vigente: se tira en silencio (es una carrera)\n                    {guard: 'isStaleResponse'},\n                    {\n                        target: 'ready',\n                        actions: assign({\n                            rows: ({event}) => event.output.rows ?? [],\n                            total: ({event}) => event.output.total ?? 0,\n                            capped: ({event}) => event.output.capped ?? false,\n                            // si la respuesta no trae facetas (páginas 2 en adelante) se conservan las que había\n                            facets: ({context, event}) => (Object.keys(event.output.facets ?? {}).length\n                                ? event.output.facets\n                                : context.facets),\n                            error: null,\n                        }),\n                    },\n                ],\n                onError: [\n                    {guard: 'isCancellation'},\n                    {target: 'error', actions: assign({error: ({event}) => event.error})},\n                ],\n            },\n            on: {FETCH: {target: 'loading', reenter: true, actions: startNewRequest}},\n        },\n        ready: {\n            on: {FETCH: {target: 'loading', actions: startNewRequest}},\n        },\n        error: {\n            on: {FETCH: {target: 'loading', actions: startNewRequest}},\n        },\n    },\n});\n\n/**\n * El actor fetchPage a partir de la función de la pantalla.\n *\n * @param {(params: {filters: object, sortOrders: Array, page: number, pageSize: number}, signal: AbortSignal) => Promise<{rows: Array, total: number, facets?: object, capped?: boolean}>} fetchPage\n */\nexport function buildTableActors(fetchPage) {\n    return {\n        fetchPage: fromPromise(async ({input, signal}) => {\n            const {requestId, ...params} = input;\n            const tablePage = await fetchPage(params, signal);\n            // el id viaja de vuelta con la respuesta: así se sabe si sigue siendo la consulta vigente\n            return {...tablePage, requestId};\n        }),\n    };\n}\n"],"names":[],"mappings":";AA0BO,SAAS,eAAe,OAAO;AAClC,SAAO,OAAO,SAAS,gBAAgB,OAAO,SAAS,mBAAmB,OAAO,SAAS;AAC9F;AAEA,MAAM,kBAAkB,OAAO;AAAA,EAC3B,OAAO;AAAA,EACP,WAAW,CAAC,EAAC,QAAO,MAAM,QAAQ,YAAY;AAClD,CAAC;AAEW,MAAC,eAAe,MAAM;AAAA,EAC9B,QAAQ;AAAA;AAAA,IAEJ,WAAW,YAAY,YAAY;AAC/B,YAAM,IAAI,MAAM,+DAA+D;AAAA,IACnF,CAAC;AAAA,EACT;AAAA,EACI,QAAQ;AAAA,IACJ,iBAAiB,CAAC,EAAC,SAAS,MAAK,MAAM,MAAM,OAAO,cAAc,QAAQ;AAAA,IAC1E,gBAAgB,CAAC,EAAC,MAAK,MAAM,eAAe,MAAM,KAAK;AAAA,EAC/D;AACA,CAAC,EAAE,cAAc;AAAA,EACb,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,SAAS;AAAA,IACL,MAAM,CAAA;AAAA,IACN,OAAO;AAAA,IACP,QAAQ,CAAA;AAAA,IACR,QAAQ;AAAA;AAAA,IAER,OAAO;AAAA;AAAA,IAEP,WAAW;AAAA,EACnB;AAAA,EACI,QAAQ;AAAA;AAAA,IAEJ,MAAM;AAAA,MACF,IAAI,EAAC,OAAO,EAAC,QAAQ,WAAW,SAAS,gBAAe,EAAC;AAAA,IACrE;AAAA,IACQ,SAAS;AAAA,MACL,QAAQ;AAAA,QACJ,KAAK;AAAA;AAAA,QAEL,OAAO,CAAC,EAAC,SAAS,MAAK,OAAO,EAAC,GAAG,MAAM,QAAQ,WAAW,QAAQ,UAAS;AAAA,QAC5E,QAAQ;AAAA;AAAA,UAEJ,EAAC,OAAO,kBAAiB;AAAA,UACzB;AAAA,YACI,QAAQ;AAAA,YACR,SAAS,OAAO;AAAA,cACZ,MAAM,CAAC,EAAC,MAAK,MAAM,MAAM,OAAO,QAAQ,CAAA;AAAA,cACxC,OAAO,CAAC,EAAC,MAAK,MAAM,MAAM,OAAO,SAAS;AAAA,cAC1C,QAAQ,CAAC,EAAC,MAAK,MAAM,MAAM,OAAO,UAAU;AAAA;AAAA,cAE5C,QAAQ,CAAC,EAAC,SAAS,MAAK,MAAO,OAAO,KAAK,MAAM,OAAO,UAAU,CAAA,CAAE,EAAE,SAChE,MAAM,OAAO,SACb,QAAQ;AAAA,cACd,OAAO;AAAA,YACnC,CAAyB;AAAA,UACzB;AAAA,QACA;AAAA,QACgB,SAAS;AAAA,UACL,EAAC,OAAO,iBAAgB;AAAA,UACxB,EAAC,QAAQ,SAAS,SAAS,OAAO,EAAC,OAAO,CAAC,EAAC,MAAK,MAAM,MAAM,MAAK,CAAC,EAAC;AAAA,QACxF;AAAA,MACA;AAAA,MACY,IAAI,EAAC,OAAO,EAAC,QAAQ,WAAW,SAAS,MAAM,SAAS,gBAAe,EAAC;AAAA,IACpF;AAAA,IACQ,OAAO;AAAA,MACH,IAAI,EAAC,OAAO,EAAC,QAAQ,WAAW,SAAS,gBAAe,EAAC;AAAA,IACrE;AAAA,IACQ,OAAO;AAAA,MACH,IAAI,EAAC,OAAO,EAAC,QAAQ,WAAW,SAAS,gBAAe,EAAC;AAAA,IACrE;AAAA,EACA;AACA,CAAC;AAOM,SAAS,iBAAiB,WAAW;AACxC,SAAO;AAAA,IACH,WAAW,YAAY,OAAO,EAAC,OAAO,OAAM,MAAM;AAC9C,YAAM,EAAC,WAAW,GAAG,OAAM,IAAI;AAC/B,YAAM,YAAY,MAAM,UAAU,QAAQ,MAAM;AAEhD,aAAO,EAAC,GAAG,WAAW,UAAS;AAAA,IACnC,CAAC;AAAA,EACT;AACA;"}

package/dist/DataTable/useDebouncedFilter.js

@@ -0,0 +1,29 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+const DEFAULT_DEBOUNCE_MILLISECONDS = 350;
+function useDebouncedFilter(value, commit, delayMilliseconds = DEFAULT_DEBOUNCE_MILLISECONDS) {
+  const [draft, setDraft] = useState(value ?? "");
+  const committedValue = useRef(value ?? "");
+  useEffect(() => {
+    if (value !== committedValue.current) {
+      committedValue.current = value ?? "";
+      setDraft(value ?? "");
+    }
+  }, [value]);
+  useEffect(() => {
+    if (draft === committedValue.current) {
+      return void 0;
+    }
+    const timer = setTimeout(() => {
+      committedValue.current = draft;
+      commit(draft);
+    }, delayMilliseconds);
+    return () => clearTimeout(timer);
+  }, [draft, delayMilliseconds]);
+  return [draft, setDraft];
+}
+export {
+  DEFAULT_DEBOUNCE_MILLISECONDS,
+  useDebouncedFilter
+};
+//# sourceMappingURL=useDebouncedFilter.js.map

package/dist/DataTable/useDebouncedFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedFilter.js","sources":["../../src/DataTable/useDebouncedFilter.js"],"sourcesContent":["// Rebote para las cajas de texto que filtran en el servidor.\n//\n// Sin esto, cada tecla dispara una consulta: escribir \"VIDA\" son cuatro consultas de las que tres nacen muertas, y\n// con respuestas de medio segundo las carreras entre ellas se ven. El valor que se TECLEA es inmediato (la caja nunca\n// se siente lenta); el que viaja al servidor espera a que la persona deje de escribir.\n//\n// Hook genérico, no renderiza: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\n\nexport const DEFAULT_DEBOUNCE_MILLISECONDS = 350;\n\n/**\n * @param {string|undefined} value valor confirmado (el de la URL)\n * @param {(value: string) => void} commit se llama con el valor ya rebotado\n * @param {number} [delayMilliseconds]\n * @returns {[string, (value: string) => void]} borrador que pinta la caja y su setter\n */\nexport function useDebouncedFilter(value, commit, delayMilliseconds = DEFAULT_DEBOUNCE_MILLISECONDS) {\n    const [draft, setDraft] = useState(value ?? '');\n    const committedValue = useRef(value ?? '');\n\n    // cambios que vienen de FUERA (la URL, \"Limpiar todo\") se reflejan en la caja sin dispararla de vuelta\n    useEffect(() => {\n        if (value !== committedValue.current) {\n            committedValue.current = value ?? '';\n            setDraft(value ?? '');\n        }\n    }, [value]);\n\n    useEffect(() => {\n        // guard clause: nada nuevo que mandar\n        if (draft === committedValue.current) {\n            return undefined;\n        }\n        const timer = setTimeout(() => {\n            committedValue.current = draft;\n            commit(draft);\n        }, delayMilliseconds);\n        return () => clearTimeout(timer);\n        // OJO: commit fuera de las dependencias a propósito; suele ser una función nueva en cada render\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [draft, delayMilliseconds]);\n\n    return [draft, setDraft];\n}\n"],"names":[],"mappings":";;AASY,MAAC,gCAAgC;AAQtC,SAAS,mBAAmB,OAAO,QAAQ,oBAAoB,+BAA+B;AACjG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,SAAS,EAAE;AAC9C,QAAM,iBAAiB,OAAO,SAAS,EAAE;AAGzC,YAAU,MAAM;AACZ,QAAI,UAAU,eAAe,SAAS;AAClC,qBAAe,UAAU,SAAS;AAClC,eAAS,SAAS,EAAE;AAAA,IACxB;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AAEZ,QAAI,UAAU,eAAe,SAAS;AAClC,aAAO;AAAA,IACX;AACA,UAAM,QAAQ,WAAW,MAAM;AAC3B,qBAAe,UAAU;AACzB,aAAO,KAAK;AAAA,IAChB,GAAG,iBAAiB;AACpB,WAAO,MAAM,aAAa,KAAK;AAAA,EAGnC,GAAG,CAAC,OAAO,iBAAiB,CAAC;AAE7B,SAAO,CAAC,OAAO,QAAQ;AAC3B;"}

package/dist/DataTable/useTableState.js

@@ -0,0 +1,132 @@
+"use client";
+import { useMemo, useState } from "react";
+import { parseAsString, parseAsInteger, useQueryStates, parseAsArrayOf } from "nuqs";
+const FILTER_KINDS = Object.freeze({
+  text: "text",
+  multiSelect: "multiSelect"
+});
+const SORT_SEPARATOR = ":";
+const DEFAULT_PAGE_SIZE = 25;
+function isFilterActive(kind, value) {
+  if (value === null || value === void 0) {
+    return false;
+  }
+  if (kind === FILTER_KINDS.multiSelect) {
+    return value.length > 0;
+  }
+  return value !== "";
+}
+function parserFor(kind, defaultValue) {
+  if (kind === FILTER_KINDS.multiSelect) {
+    return parseAsArrayOf(parseAsString).withDefault(defaultValue);
+  }
+  return parseAsString.withDefault(defaultValue);
+}
+function parseSortValue(sortValue) {
+  if (!sortValue) {
+    return [];
+  }
+  const [column, direction] = sortValue.split(SORT_SEPARATOR);
+  return column ? [{ column, direction: direction === "asc" ? "asc" : "desc" }] : [];
+}
+function serializeSortOrders(sortOrders) {
+  return sortOrders.length ? `${sortOrders[0].column}${SORT_SEPARATOR}${sortOrders[0].direction}` : "";
+}
+function filtersForDatasetSwitch(filterDefaults, values) {
+  return { ...filterDefaults, ...values };
+}
+function useUrlTableState(prefix, filterDefaults, filterKinds, defaultPageSize) {
+  const parsers = useMemo(() => Object.fromEntries([
+    ...Object.entries(filterDefaults).map(([field, defaultValue]) => [field, parserFor(filterKinds[field], defaultValue)]),
+    ["sort", parseAsString.withDefault("")],
+    ["page", parseAsInteger.withDefault(0)],
+    ["pageSize", parseAsInteger.withDefault(defaultPageSize)]
+  ]), [filterDefaults, filterKinds, defaultPageSize]);
+  const [urlState, setUrlState] = useQueryStates(parsers, {
+    urlKeys: Object.fromEntries(Object.keys(parsers).map((key) => [key, `${prefix}_${key}`])),
+    // replace: filtrar no llena el historial de entradas intermedias; el Atrás del detalle regresa a la lista
+    history: "replace",
+    // lo que vale su default no se escribe en la URL
+    clearOnDefault: true
+  });
+  const filters = useMemo(
+    () => Object.fromEntries(Object.keys(filterDefaults).map((field) => [field, urlState[field]])),
+    [urlState, filterDefaults]
+  );
+  const sortOrders = useMemo(() => parseSortValue(urlState.sort), [urlState.sort]);
+  return {
+    filters,
+    sortOrders,
+    page: urlState.page,
+    pageSize: urlState.pageSize,
+    // IMPORTANTE: filtrar SIEMPRE regresa a la página 0; quedarse en la 3 de un resultado que ahora tiene una
+    // sola página deja la tabla vacía y parece que el filtro no encontró nada
+    setFilter: (field, value) => setUrlState({ [field]: value, page: 0 }),
+    // varios en UNA escritura: en dos, la tabla consultaría una vez con la mitad del cambio
+    setFilters: (values) => setUrlState({ ...values, page: 0 }),
+    clearFilter: (field) => setUrlState({ [field]: filterDefaults[field], page: 0 }),
+    clearAll: () => setUrlState({ ...filterDefaults, page: 0 }),
+    setSort: (orders) => setUrlState({ sort: serializeSortOrders(orders), page: 0 }),
+    // cambio de conjunto (otro producto): filtros, orden y página a su default en UNA escritura; el tamaño de
+    // página se respeta porque es preferencia de quien mira, no del conjunto
+    switchDataset: (values) => setUrlState({ ...filtersForDatasetSwitch(filterDefaults, values), sort: "", page: 0 }),
+    setPage: (page) => setUrlState({ page }),
+    setPageSize: (pageSize) => setUrlState({ pageSize, page: 0 })
+  };
+}
+function useLocalTableState(filterDefaults, defaultPageSize) {
+  const [filters, setFilters] = useState(filterDefaults);
+  const [sortOrders, setSortOrders] = useState([]);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  return {
+    filters,
+    sortOrders,
+    page,
+    pageSize,
+    setFilter: (field, value) => {
+      setFilters((currentFilters) => ({ ...currentFilters, [field]: value }));
+      setPage(0);
+    },
+    setFilters: (values) => {
+      setFilters((currentFilters) => ({ ...currentFilters, ...values }));
+      setPage(0);
+    },
+    clearFilter: (field) => {
+      setFilters((currentFilters) => ({ ...currentFilters, [field]: filterDefaults[field] }));
+      setPage(0);
+    },
+    clearAll: () => {
+      setFilters(filterDefaults);
+      setPage(0);
+    },
+    setSort: (orders) => {
+      setSortOrders(orders);
+      setPage(0);
+    },
+    switchDataset: (values) => {
+      setFilters(filtersForDatasetSwitch(filterDefaults, values));
+      setSortOrders([]);
+      setPage(0);
+    },
+    setPage,
+    setPageSize: (nextPageSize) => {
+      setPageSize(nextPageSize);
+      setPage(0);
+    }
+  };
+}
+function useTableState({ prefix, filterDefaults = {}, filterKinds = {}, defaultPageSize = DEFAULT_PAGE_SIZE }) {
+  const urlTableState = useUrlTableState(prefix ?? "table", filterDefaults, filterKinds, defaultPageSize);
+  const localTableState = useLocalTableState(filterDefaults, defaultPageSize);
+  return prefix ? urlTableState : localTableState;
+}
+export {
+  FILTER_KINDS,
+  filtersForDatasetSwitch,
+  isFilterActive,
+  parseSortValue,
+  serializeSortOrders,
+  useTableState
+};
+//# sourceMappingURL=useTableState.js.map

package/dist/DataTable/useTableState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableState.js","sources":["../../src/DataTable/useTableState.js"],"sourcesContent":["// Filtros, orden y página de una tabla. Con prefijo, la URL es la fuente de verdad (nuqs).\n//\n// Dos modos con la misma forma de salida, para que la tabla no sepa cuál está usando:\n//   con `prefix`  el estado vive en la URL: la pantalla se comparte por enlace, sobrevive a recargar y el botón\n//                 Atrás del detalle regresa a la lista tal como estaba;\n//   sin `prefix`  estado local, para tablas embebidas (un diálogo) donde reflejar filtros en la URL solo ensucia.\n//\n// El prefijo permite dos tablas en la misma pantalla sin pisarse (loads_year contra users_year). Las llaves que se\n// ven en la barra de direcciones son <prefijo>_<campo>.\n//\n// Hooks y funciones puras, no renderizan: function (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {parseAsArrayOf, parseAsInteger, parseAsString, useQueryStates} from 'nuqs';\n\nexport const FILTER_KINDS = Object.freeze({\n    text: 'text',\n    multiSelect: 'multiSelect',\n});\n\n// el orden viaja como columna:dirección, legible en la barra de direcciones\nconst SORT_SEPARATOR = ':';\n\nconst DEFAULT_PAGE_SIZE = 25;\n\n/**\n * ¿El filtro está puesto? Un texto vacío o una lista vacía no cuentan.\n *\n * @param {string|undefined} kind uno de FILTER_KINDS\n * @param {unknown} value valor del filtro\n * @returns {boolean}\n */\nexport function isFilterActive(kind, value) {\n    if (value === null || value === undefined) {\n        return false;\n    }\n    if (kind === FILTER_KINDS.multiSelect) {\n        return value.length > 0;\n    }\n    return value !== '';\n}\n\n/**\n * Parser de nuqs según el tipo de filtro.\n *\n * @param {string|undefined} kind uno de FILTER_KINDS\n * @param {unknown} defaultValue valor cuando la URL no trae el parámetro\n */\nfunction parserFor(kind, defaultValue) {\n    if (kind === FILTER_KINDS.multiSelect) {\n        return parseAsArrayOf(parseAsString).withDefault(defaultValue);\n    }\n    return parseAsString.withDefault(defaultValue);\n}\n\n/**\n * \"year:desc\" → [{column: 'year', direction: 'desc'}].\n *\n * @param {string} sortValue valor de la URL\n * @returns {Array<{column: string, direction: 'asc'|'desc'}>}\n */\nexport function parseSortValue(sortValue) {\n    if (!sortValue) {\n        return [];\n    }\n    const [column, direction] = sortValue.split(SORT_SEPARATOR);\n    return column ? [{column, direction: direction === 'asc' ? 'asc' : 'desc'}] : [];\n}\n\n/**\n * [{column: 'year', direction: 'desc'}] → \"year:desc\" ('' sin orden).\n *\n * @param {Array<{column: string, direction: 'asc'|'desc'}>} sortOrders\n * @returns {string}\n */\nexport function serializeSortOrders(sortOrders) {\n    return sortOrders.length ? `${sortOrders[0].column}${SORT_SEPARATOR}${sortOrders[0].direction}` : '';\n}\n\n/**\n * Filtros con los que arranca una tabla cuando cambia el CONJUNTO que muestra (otro producto, otra pestaña).\n *\n * Por qué existe: los filtros, el orden y la página pertenecen al conjunto que se estaba viendo. Si al cambiar de\n * producto se conservan, la tabla nueva sale filtrada por un estado o un formato que la persona eligió para el otro\n * producto y parece que \"no hay datos\". Todo vuelve a su default salvo lo que el cambio fija (p. ej. el producto).\n *\n * @param {Record<string, unknown>} filterDefaults campo → valor sin filtro\n * @param {Record<string, unknown>} values lo que fija el cambio de conjunto ({product: 'SHOES'})\n * @returns {Record<string, unknown>} todos los filtros en su default más los valores fijados\n */\nexport function filtersForDatasetSwitch(filterDefaults, values) {\n    return {...filterDefaults, ...values};\n}\n\nfunction useUrlTableState(prefix, filterDefaults, filterKinds, defaultPageSize) {\n    const parsers = useMemo(() => Object.fromEntries([\n        ...Object.entries(filterDefaults).map(([field, defaultValue]) => [field, parserFor(filterKinds[field], defaultValue)]),\n        ['sort', parseAsString.withDefault('')],\n        ['page', parseAsInteger.withDefault(0)],\n        ['pageSize', parseAsInteger.withDefault(defaultPageSize)],\n    ]), [filterDefaults, filterKinds, defaultPageSize]);\n\n    const [urlState, setUrlState] = useQueryStates(parsers, {\n        urlKeys: Object.fromEntries(Object.keys(parsers).map((key) => [key, `${prefix}_${key}`])),\n        // replace: filtrar no llena el historial de entradas intermedias; el Atrás del detalle regresa a la lista\n        history: 'replace',\n        // lo que vale su default no se escribe en la URL\n        clearOnDefault: true,\n    });\n\n    const filters = useMemo(\n        () => Object.fromEntries(Object.keys(filterDefaults).map((field) => [field, urlState[field]])),\n        [urlState, filterDefaults],\n    );\n\n    const sortOrders = useMemo(() => parseSortValue(urlState.sort), [urlState.sort]);\n\n    return {\n        filters,\n        sortOrders,\n        page: urlState.page,\n        pageSize: urlState.pageSize,\n        // IMPORTANTE: filtrar SIEMPRE regresa a la página 0; quedarse en la 3 de un resultado que ahora tiene una\n        // sola página deja la tabla vacía y parece que el filtro no encontró nada\n        setFilter: (field, value) => setUrlState({[field]: value, page: 0}),\n        // varios en UNA escritura: en dos, la tabla consultaría una vez con la mitad del cambio\n        setFilters: (values) => setUrlState({...values, page: 0}),\n        clearFilter: (field) => setUrlState({[field]: filterDefaults[field], page: 0}),\n        clearAll: () => setUrlState({...filterDefaults, page: 0}),\n        setSort: (orders) => setUrlState({sort: serializeSortOrders(orders), page: 0}),\n        // cambio de conjunto (otro producto): filtros, orden y página a su default en UNA escritura; el tamaño de\n        // página se respeta porque es preferencia de quien mira, no del conjunto\n        switchDataset: (values) => setUrlState({...filtersForDatasetSwitch(filterDefaults, values), sort: '', page: 0}),\n        setPage: (page) => setUrlState({page}),\n        setPageSize: (pageSize) => setUrlState({pageSize, page: 0}),\n    };\n}\n\nfunction useLocalTableState(filterDefaults, defaultPageSize) {\n    const [filters, setFilters] = useState(filterDefaults);\n    const [sortOrders, setSortOrders] = useState([]);\n    const [page, setPage] = useState(0);\n    const [pageSize, setPageSize] = useState(defaultPageSize);\n\n    return {\n        filters,\n        sortOrders,\n        page,\n        pageSize,\n        setFilter: (field, value) => {\n            setFilters((currentFilters) => ({...currentFilters, [field]: value}));\n            setPage(0);\n        },\n        setFilters: (values) => {\n            setFilters((currentFilters) => ({...currentFilters, ...values}));\n            setPage(0);\n        },\n        clearFilter: (field) => {\n            setFilters((currentFilters) => ({...currentFilters, [field]: filterDefaults[field]}));\n            setPage(0);\n        },\n        clearAll: () => {\n            setFilters(filterDefaults);\n            setPage(0);\n        },\n        setSort: (orders) => {\n            setSortOrders(orders);\n            setPage(0);\n        },\n        switchDataset: (values) => {\n            setFilters(filtersForDatasetSwitch(filterDefaults, values));\n            setSortOrders([]);\n            setPage(0);\n        },\n        setPage,\n        setPageSize: (nextPageSize) => {\n            setPageSize(nextPageSize);\n            setPage(0);\n        },\n    };\n}\n\n/**\n * Estado de una tabla de servidor.\n *\n * OJO: filterDefaults y filterKinds se pasan como constantes de módulo (fuera del componente). Un objeto nuevo en\n * cada render arma parsers nuevos en cada render.\n *\n * @param {object} options\n * @param {string} [options.prefix] con prefijo, en la URL; sin él, en memoria\n * @param {Record<string, unknown>} [options.filterDefaults] campo → valor sin filtro ('' o [])\n * @param {Record<string, string>} [options.filterKinds] campo → FILTER_KINDS\n * @param {number} [options.defaultPageSize]\n */\nexport function useTableState({prefix, filterDefaults = {}, filterKinds = {}, defaultPageSize = DEFAULT_PAGE_SIZE}) {\n    // los dos hooks se llaman SIEMPRE (regla de los hooks); el que no aplica no se usa\n    const urlTableState = useUrlTableState(prefix ?? 'table', filterDefaults, filterKinds, defaultPageSize);\n    const localTableState = useLocalTableState(filterDefaults, defaultPageSize);\n    return prefix ? urlTableState : localTableState;\n}\n"],"names":[],"mappings":"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"}

package/dist/access/Can.js

@@ -0,0 +1,9 @@
+"use client";
+import { useCan } from "./useCan.js";
+function Can({ access, children, fallback = null }) {
+  return useCan(access) ? children : fallback;
+}
+export {
+  Can as default
+};
+//# sourceMappingURL=Can.js.map

package/dist/access/Can.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Can.js","sources":["../../src/access/Can.jsx"],"sourcesContent":["// Pinta lo de adentro solo si la sesión puede (la misma regla del menú y las rutas):\n//\n//   <Can access={{ability: 'orders.cancel'}}><Button>Cancelar pedido</Button></Can>\n//\n// Lo que no se puede, no se ve (fallback, si se quiere enseñar otra cosa). El backend vuelve a revisar cada petición.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useCan} from '@/access/useCan.js';\n\n/**\n * @param {object} props\n * @param {object} props.access la regla (accessRules.js)\n * @param {import('react').ReactNode} props.children\n * @param {import('react').ReactNode} [props.fallback] lo que se pinta si no puede; por omisión nada\n */\nexport default function Can({access, children, fallback = null}) {\n    return useCan(access) ? children : fallback;\n}\n"],"names":[],"mappings":";;AAeA,SAAwB,IAAI,EAAC,QAAQ,UAAU,WAAW,QAAO;AAC7D,SAAO,OAAO,MAAM,IAAI,WAAW;AACvC;"}

package/dist/access/PermissionMatrix.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import Chip from "@mui/material/Chip";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { groupStateOf, withPermissionGroup, withPermission } from "./permissionGroups.js";
+function PermissionOption({ permission, isGranted, readOnly, onToggle }) {
+  return /* @__PURE__ */ jsx(
+    FormControlLabel,
+    {
+      sx: { alignItems: "flex-start", m: 0, gap: 0.5 },
+      control: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "small",
+          checked: isGranted,
+          disabled: readOnly,
+          onChange: (event) => onToggle(event.target.checked),
+          slotProps: { input: { "data-permission": permission.key } },
+          sx: { mt: -0.5 }
+        }
+      ),
+      label: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: permission.label }),
+        permission.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", component: "p", children: permission.description })
+      ] })
+    }
+  );
+}
+function PermissionGroup({ group, value, onChange, isReadOnly }) {
+  const { t } = useToolkitTranslation("access");
+  const titleId = useId();
+  const state = groupStateOf(group, value);
+  return /* @__PURE__ */ jsxs(Paper, { variant: "outlined", role: "group", "aria-labelledby": titleId, "data-group": group.key, sx: { overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center", px: 1.5, py: 0.75, borderBottom: 1, borderColor: "divider", bgcolor: "action.hover" }, children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "small",
+          checked: state.isAll,
+          indeterminate: state.isSome,
+          disabled: isReadOnly || state.total === 0,
+          onChange: (event) => onChange(withPermissionGroup(value, group, event.target.checked)),
+          slotProps: { input: { "aria-label": t("permissions.allOf", { group: group.label }) } }
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "subtitle2", component: "h3", sx: { flexGrow: 1 }, children: group.label }),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          size: "small",
+          label: t("permissions.countOf", { count: state.grantedCount, total: state.total }),
+          color: state.grantedCount > 0 ? "primary" : "default",
+          variant: state.isAll ? "filled" : "outlined"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: { display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(2, minmax(0, 1fr))" }, gap: 1.5, p: 2 }, children: group.permissions.map((permission) => /* @__PURE__ */ jsx(
+      PermissionOption,
+      {
+        permission,
+        isGranted: value.includes(permission.key),
+        readOnly: isReadOnly,
+        onToggle: (isGranted) => onChange(withPermission(value, permission.key, isGranted))
+      },
+      permission.key
+    )) })
+  ] });
+}
+function PermissionMatrix({ groups, value, onChange, readOnly = false }) {
+  const isReadOnly = readOnly || !onChange;
+  return /* @__PURE__ */ jsx(Stack, { spacing: 1.5, children: groups.map((group) => /* @__PURE__ */ jsx(PermissionGroup, { group, value, onChange, isReadOnly }, group.key)) });
+}
+export {
+  PermissionMatrix as default
+};
+//# sourceMappingURL=PermissionMatrix.js.map

package/dist/access/PermissionMatrix.js.map

@@ -0,0 +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// 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';\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        <FormControlLabel\n            sx={{alignItems: 'flex-start', m: 0, gap: 0.5}}\n            control={<Checkbox size=\"small\" checked={isGranted} disabled={readOnly} onChange={(event) => onToggle(event.target.checked)}\n                               slotProps={{input: {'data-permission': permission.key}}} sx={{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        <Paper variant=\"outlined\" role=\"group\" aria-labelledby={titleId} data-group={group.key} sx={{overflow: 'hidden'}}>\n            <Stack direction=\"row\" spacing={1} sx={{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                <Typography id={titleId} variant=\"subtitle2\" component=\"h3\" sx={{flexGrow: 1}}>{group.label}</Typography>\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            </Stack>\n            <Box sx={{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            </Box>\n        </Paper>\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 */\nexport default function PermissionMatrix({groups, value, onChange, readOnly = false}) {\n    const isReadOnly = readOnly || !onChange;\n    return (\n        <Stack spacing={1.5}>\n            {groups.map((group) => <PermissionGroup key={group.key} group={group} value={value} onChange={onChange} isReadOnly={isReadOnly} />)}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/access/RequireAccess.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCan } from "./useCan.js";
+import ErrorPage, { ERROR_PAGE_KIND } from "../ui/layout/ErrorPage.js";
+function RequireAccess({ access, children, fallback }) {
+  if (useCan(access)) {
+    return children;
+  }
+  return fallback ?? /* @__PURE__ */ jsx(ErrorPage, { kind: ERROR_PAGE_KIND.forbidden });
+}
+export {
+  RequireAccess as default
+};
+//# sourceMappingURL=RequireAccess.js.map

package/dist/access/RequireAccess.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequireAccess.js","sources":["../../src/access/RequireAccess.jsx"],"sourcesContent":["// Una pantalla (o un grupo de pantallas) que solo se ve con permiso, con la misma regla de su menu.js: quien no puede ve\n// la página de «sin permiso» (403) en lugar de una pantalla vacía que truena al pedir sus datos.\n//\n//   <RequireAccess access={{ability: 'users.admin'}}><UsersPage /></RequireAccess>\n//\n// Con react-router, withAccess (@stackcraftmx/calcita/react-router) envuelve un grupo de rutas con esto.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useCan} from '@/access/useCan.js';\nimport ErrorPage, {ERROR_PAGE_KIND} from '@/ui/layout/ErrorPage.jsx';\n\n/**\n * @param {object} props\n * @param {object} [props.access] la regla (accessRules.js); sin ella se ve\n * @param {import('react').ReactNode} props.children\n * @param {import('react').ReactNode} [props.fallback] lo que se ve sin permiso; por omisión la página de 403\n */\nexport default function RequireAccess({access, children, fallback}) {\n    if (useCan(access)) {\n        return children;\n    }\n    return fallback ?? <ErrorPage kind={ERROR_PAGE_KIND.forbidden} />;\n}\n"],"names":[],"mappings":";;;;AAiBA,SAAwB,cAAc,EAAC,QAAQ,UAAU,YAAW;AAChE,MAAI,OAAO,MAAM,GAAG;AAChB,WAAO;AAAA,EACX;AACA,SAAO,YAAY,oBAAC,WAAA,EAAU,MAAM,gBAAgB,WAAW;AACnE;"}