@stackcraftmx/calcita 0.23.0 → 0.26.0

package/dist/types/DataTable/ServerTable.d.ts

@@ -1,6 +1,10 @@
+import { SELECTION_PHONE_LAYOUT } from '../ui/actions/SelectionActions.js';
+export { SELECTION_PHONE_LAYOUT };
+export type RowSelection = import('./rowSelection.js').RowSelection;
+/** @typedef {import('./rowSelection.js').RowSelection} RowSelection */
 /**
  * @param {object} props
- * @param {(params: {filters: Record<string, any>, sortOrders: Array<{column: string, direction: 'asc'|'desc'}>, page: number, pageSize: number}, signal: AbortSignal) => Promise<{rows: any[], total: number, facets?: Record<string, Array<{value: any, total: number}>>, capped?: boolean}>} props.fetchPage
+ * @param {(params: {filters: Record<string, any>, sortOrders: Array<{column: string, direction: 'asc'|'desc'}>, page: number, pageSize: number}, signal: AbortSignal) => Promise<{rows: any[], total: number, facets?: Record<string, Array<{value: any, total: number}> | number>, capped?: boolean}>} props.fetchPage
  *     page cuenta desde 0; toServerTableParams lo convierte a la query del API
  * @param {string} props.queryKey cambia cuando cambia el CONJUNTO (no los filtros): dispara recarga
  * @param {boolean} [props.enabled] false mientras la sección está oculta: una tabla que nadie ve no consulta
@@ -48,8 +52,32 @@
  * @param {string} [props.ariaLabel] nombre de la tabla para lectores de pantalla
  * @param {string} [props.fixedColumn] campo de la columna que se queda pegada a la izquierda al deslizar de lado (como
  *     fixedSelectColumn de mui-datatables)
+ * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: 'inherit'|'primary'|'secondary'|'error'|'info'|'success'|'warning', isDisabled?: (selection: RowSelection) => boolean, onClick: (selection: RowSelection, helpers: {clearSelection: () => void, refresh: () => void}) => unknown}>} [props.selectionActions]
+ *     con ellas cada renglón lleva su casilla y, al elegir, sale la barra de los elegidos con estas acciones. label ya
+ *     traducido; onClick recibe la selección (con isAllMatching mande `filters`, no `ids`) y cómo quitar la selección y volver
+ *     a consultar después de actuar
+ * @param {(row: any) => boolean} [props.isRowSelectable] cuáles renglones se pueden elegir (un pedido entregado no se cancela)
+ * @param {boolean} [props.allowSelectAllMatching] la casilla de arriba elige todos los que coinciden (la acción recibe los
+ *     filtros) y el aviso deja quedarse solo con la página; por omisión sí. false: la casilla elige la página y nunca se
+ *     ofrece «todos»
+ * @param {(selection: RowSelection) => void} [props.onSelectionChange] cada que cambia la selección; también enciende las
+ *     casillas sin barra de acciones (la pantalla pinta las suyas)
+ * @param {'top'|'split'} [props.selectionPhoneLayout] SELECTION_PHONE_LAYOUT: en el teléfono con vidrio o minimalista, todo
+ *     arriba (por omisión) o el conteo arriba y las acciones abajo. Sin vidrio, en el renglón como en escritorio
+ * @param {(request: {filters: Record<string, any>, sortOrders: Array<{column: string, direction: 'asc'|'desc'}>, page: number, pageSize: number}) => void} [props.onQueryChange]
+ *     cada que cambia lo que pide la tabla (un filtro, el orden, la página), antes de consultar: para la lógica de negocio que
+ *     depende de lo filtrado («si eligió Cancelados, enseñe el motivo»)
+ * @param {(result: {rows: any[], total: number, facets: object, capped: boolean}) => void} [props.onLoaded] cada que llega una
+ *     página del servidor
+ * @param {(error: unknown) => void} [props.onLoadError] cuando la consulta falla (la tabla ya enseña su aviso con «Reintentar»)
+ * @param {object} [props.gridProps] lo demás del DataGrid de MUI, sobre todo sus eventos (onRowClick, onRowDoubleClick,
+ *     onCellKeyDown…). OJO: lo que la tabla controla (paginar, ordenar y filtrar en el servidor, el alto, la selección) no se
+ *     reemplaza desde aquí: para eso están sus props
+ * @param {object} [props.texts] los textos de la tabla que cambian, con la forma de `table` en los textos del paquete
+ *     (src/locales/es.js), ya en el idioma de la pantalla: {selection: {clear: 'Deseleccionar'}, empty: {filtered: '…'}}.
+ *     También les llegan a sus filtros de columna, sus chips y su barra de elegidos
  */
-export default function ServerTable({ fetchPage, queryKey, enabled, columns, filterKinds, filterDefaults, chipConfig, quickFilters, searchField, searchPlaceholder, searchInBar, collapseSearchInBar, emptyLabel, countLabel, pageSizeOptions, defaultPageSize, getRowId, prefix, refreshToken, footer, toolbarExtra, header, beforeQuickFilters, columnGroupingModel, getRowClassName, isRowVisible, hideFooterWhenAllRowsFit, showGoToPage, striped, getRowHeight, gridSx, maxGridHeight, ariaLabel, fixedColumn, }: {
+export default function ServerTable({ fetchPage, queryKey, enabled, columns, filterKinds, filterDefaults, chipConfig, quickFilters, searchField, searchPlaceholder, searchInBar, collapseSearchInBar, emptyLabel, countLabel, pageSizeOptions, defaultPageSize, getRowId, prefix, refreshToken, footer, toolbarExtra, header, beforeQuickFilters, columnGroupingModel, getRowClassName, isRowVisible, hideFooterWhenAllRowsFit, showGoToPage, striped, getRowHeight, gridSx, maxGridHeight, ariaLabel, fixedColumn, selectionActions, isRowSelectable, allowSelectAllMatching, onSelectionChange, selectionPhoneLayout, onQueryChange, onLoaded, onLoadError, gridProps, texts, }: {
     fetchPage: (params: {
         filters: Record<string, any>;
         sortOrders: Array<{
@@ -64,7 +92,7 @@ export default function ServerTable({ fetchPage, queryKey, enabled, columns, fil
         facets?: Record<string, Array<{
             value: any;
             total: number;
-        }>>;
+        }> | number>;
         capped?: boolean;
     }>;
     queryKey: string;
@@ -107,4 +135,37 @@ export default function ServerTable({ fetchPage, queryKey, enabled, columns, fil
     maxGridHeight?: number;
     ariaLabel?: string;
     fixedColumn?: string;
+    selectionActions?: Array<{
+        key: string;
+        label: string;
+        icon?: import('react').ReactNode;
+        color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+        isDisabled?: (selection: RowSelection) => boolean;
+        onClick: (selection: RowSelection, helpers: {
+            clearSelection: () => void;
+            refresh: () => void;
+        }) => unknown;
+    }>;
+    isRowSelectable?: (row: any) => boolean;
+    allowSelectAllMatching?: boolean;
+    onSelectionChange?: (selection: RowSelection) => void;
+    selectionPhoneLayout?: 'top' | 'split';
+    onQueryChange?: (request: {
+        filters: Record<string, any>;
+        sortOrders: Array<{
+            column: string;
+            direction: 'asc' | 'desc';
+        }>;
+        page: number;
+        pageSize: number;
+    }) => void;
+    onLoaded?: (result: {
+        rows: any[];
+        total: number;
+        facets: object;
+        capped: boolean;
+    }) => void;
+    onLoadError?: (error: unknown) => void;
+    gridProps?: object;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/DataTable/index.d.ts

@@ -3,7 +3,7 @@ export { default as AuditTrailTable } from './AuditTrailTable.js';
 export { default as EmptyState } from './EmptyState.js';
 export { default as FilterChips } from './FilterChips.js';
 export { default as GoToPage } from './GoToPage.js';
-export { default as ServerTable } from './ServerTable.js';
+export { SELECTION_PHONE_LAYOUT, default as ServerTable } from './ServerTable.js';
 export { buildChipConfig } from './buildChipConfig.js';
 export { detailColumn, facetColumn, textColumn } from './columns.js';
 export { TableFilterContext, useTableFilter } from './filterContext.js';

package/dist/types/DataTable/rowSelection.d.ts

@@ -0,0 +1,113 @@
+export type RowSelection = {
+    /**
+     * los ids elegidos; vacío con isAllMatching
+     */
+    ids: Array<string | number>;
+    /**
+     * los renglones elegidos tal como se vieron; vacío con isAllMatching
+     */
+    rows: any[];
+    /**
+     * cuántos van: los elegidos o, con isAllMatching, el total de la tabla
+     */
+    count: number;
+    /**
+     * true = todos los que coinciden con `filters` (mande los filtros, no los ids)
+     */
+    isAllMatching: boolean;
+    /**
+     * con isAllMatching, el total es «al menos esto» (el servidor cuenta hasta un tope)
+     */
+    isCapped: boolean;
+    /**
+     * los filtros puestos en la tabla
+     */
+    filters: Record<string, any>;
+};
+/**
+ * Lo que recibe cada acción de los elegidos (y onSelectionChange).
+ *
+ * @typedef {object} RowSelection
+ * @property {Array<string|number>} ids los ids elegidos; vacío con isAllMatching
+ * @property {any[]} rows los renglones elegidos tal como se vieron; vacío con isAllMatching
+ * @property {number} count cuántos van: los elegidos o, con isAllMatching, el total de la tabla
+ * @property {boolean} isAllMatching true = todos los que coinciden con `filters` (mande los filtros, no los ids)
+ * @property {boolean} isCapped con isAllMatching, el total es «al menos esto» (el servidor cuenta hasta un tope)
+ * @property {Record<string, any>} filters los filtros puestos en la tabla
+ */
+/** Nada elegido. */
+export declare const EMPTY_ROW_SELECTION: Readonly<{
+    rowsById: Map<any, any>;
+    isAllMatching: false;
+}>;
+/**
+ * Lo que reciben las acciones, a partir del estado de la tabla.
+ *
+ * @param {{rowsById: Map<string|number, any>, isAllMatching: boolean}} selection
+ * @param {{total: number, capped?: boolean, filters: Record<string, any>}} table
+ * @returns {RowSelection}
+ */
+export declare function rowSelectionOf(selection: {
+    rowsById: Map<string | number, any>;
+    isAllMatching: boolean;
+}, { total, capped, filters }: {
+    total: number;
+    capped?: boolean;
+    filters: Record<string, any>;
+}): RowSelection;
+/**
+ * Los ids que el DataGrid debe pintar marcados en la página que se ve. Con «todos los que coinciden», todos los de la
+ * página que se pueden elegir.
+ *
+ * @param {{rowsById: Map<string|number, any>, isAllMatching: boolean}} selection
+ * @param {Array<string|number>} selectablePageIds los ids de la página que se pueden elegir
+ * @returns {Set<string|number>}
+ */
+export declare function checkedIdsOf(selection: {
+    rowsById: Map<string | number, any>;
+    isAllMatching: boolean;
+}, selectablePageIds: Array<string | number>): Set<string | number>;
+/**
+ * El DataGrid avisó qué ids quedaron marcados (por una casilla de renglón o la de la página).
+ *
+ * Con «todos los que coinciden», desmarcar uno sale de ese modo y se quedan elegidos los de esta página que siguen
+ * marcados (lo mismo que hace Gmail).
+ *
+ * Con allMatchingOnWholePage, la página completa elegida DE UN GOLPE (la casilla de arriba, o un rango con Shift que la
+ * cubre) elige todos los que coinciden. OJO: se decide por lo que cambió y no por el motivo que manda el DataGrid, que usa
+ * el mismo para la casilla de arriba y para un rango. Llenar la página picando uno por uno no: ahí el aviso lo ofrece. Si
+ * no hay más renglones que los de la página, se quedan los picados (la acción recibe ids, que es lo más claro).
+ *
+ * @param {{rowsById: Map<string|number, any>, isAllMatching: boolean}} selection
+ * @param {Set<string|number>} checkedIds lo que el DataGrid trae marcado (incluye los de otras páginas)
+ * @param {Map<string|number, any>} pageRowsById los renglones de la página que se ve, por id
+ * @param {Array<string|number>} selectablePageIds los ids de la página que se pueden elegir
+ * @param {{allMatchingOnWholePage?: boolean, total?: number, capped?: boolean}} [options]
+ * @returns {{rowsById: Map<string|number, any>, isAllMatching: boolean}}
+ */
+export declare function selectionAfterCheck(selection: {
+    rowsById: Map<string | number, any>;
+    isAllMatching: boolean;
+}, checkedIds: Set<string | number>, pageRowsById: Map<string | number, any>, selectablePageIds: Array<string | number>, { allMatchingOnWholePage, total, capped }?: {
+    allMatchingOnWholePage?: boolean;
+    total?: number;
+    capped?: boolean;
+}): {
+    rowsById: Map<string | number, any>;
+    isAllMatching: boolean;
+};
+/**
+ * ¿Se le ofrece «Elegir los N que coinciden»? Cuando ya eligió toda la página y hay más renglones que esos.
+ *
+ * @param {{rowsById: Map<string|number, any>, isAllMatching: boolean}} selection
+ * @param {Array<string|number>} selectablePageIds
+ * @param {{total: number, capped?: boolean}} table
+ * @returns {boolean}
+ */
+export declare function canSelectAllMatching(selection: {
+    rowsById: Map<string | number, any>;
+    isAllMatching: boolean;
+}, selectablePageIds: Array<string | number>, { total, capped }: {
+    total: number;
+    capped?: boolean;
+}): boolean;

package/dist/types/access/PermissionMatrix.d.ts

@@ -4,8 +4,9 @@
  * @param {string[]} props.value los permisos del perfil
  * @param {(value: string[]) => void} [props.onChange] sin ella, o con readOnly, solo se ven
  * @param {boolean} [props.readOnly] un perfil que no se puede cambiar (el de administración)
+ * @param {object} [props.texts] los textos que cambian, con la forma de `access` en los textos del paquete
  */
-export default function PermissionMatrix({ groups, value, onChange, readOnly }: {
+export default function PermissionMatrix({ groups, value, onChange, readOnly, texts }: {
     groups: Array<{
         key: string;
         label: string;
@@ -18,4 +19,5 @@ export default function PermissionMatrix({ groups, value, onChange, readOnly }:
     value: string[];
     onChange?: (value: string[]) => void;
     readOnly?: boolean;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/account/AccountSecuritySection.d.ts

@@ -1,7 +1,9 @@
 /**
  * @param {object} props
  * @param {boolean} [props.showPasswordChange] por omisión sí
+ * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete
  */
-export default function AccountSecuritySection({ showPasswordChange }: {
+export default function AccountSecuritySection({ showPasswordChange, texts }: {
     showPasswordChange?: boolean;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/account/ForgotPasswordScreen.d.ts

@@ -5,11 +5,13 @@
  * @param {string} [props.brandName]
  * @param {boolean} [props.showLanguageToggle]
  * @param {boolean} [props.showColorSchemeToggle]
+ * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete
  */
-export default function ForgotPasswordScreen({ signInPath, logo, brandName, showLanguageToggle, showColorSchemeToggle }: {
+export default function ForgotPasswordScreen({ signInPath, logo, brandName, showLanguageToggle, showColorSchemeToggle, texts }: {
     signInPath?: string;
     logo?: import('react').ReactNode;
     brandName?: string;
     showLanguageToggle?: boolean;
     showColorSchemeToggle?: boolean;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/account/ProfileScreen.d.ts

@@ -4,10 +4,40 @@ export declare const PROFILE_TAB: Readonly<{
     security: "security";
     preferences: "preferences";
 }>;
+export type AccountUser = import('./accountConnector.js').AccountUser;
+/** @typedef {import('./accountConnector.js').AccountUser} AccountUser */
 /**
  * @param {object} props
  * @param {boolean} [props.showColorScheme] el ajuste de claro u oscuro en Preferencias; sin modo oscuro, false
+ * @param {{initialValues?: (user: AccountUser & Record<string, any>) => Record<string, any>, rules?: Record<string, any>, fields: import('react').ReactNode}} [props.extraFields]
+ *     campos propios en «Sus datos», debajo del teléfono: sus valores de inicio salen del usuario de la sesión (lo que su
+ *     conector ponga en session.user), sus reglas de yup y sus campos (FormTextField, FormSelectField… de /forms). Al guardar
+ *     viajan a connector.updateProfile junto con name y phone
+ * @param {Array<{key: string, label: string, content: import('react').ReactNode}>} [props.extraTabs] pestañas propias,
+ *     después de las de la casa; label ya traducido
+ * @param {Array<'data'|'security'|'preferences'>} [props.hiddenTabs] pestañas de la casa que no se ven (PROFILE_TAB)
+ * @param {(tab: string) => void} [props.onTabChange] cada que se cambia de pestaña
+ * @param {(saved: {values: Record<string, any>, response: unknown}) => void} [props.onProfileSaved] después de guardar «Sus datos»
+ * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete:
+ *     {profile: {tabs: {data: 'Mis datos'}}}
  */
-export default function ProfileScreen({ showColorScheme }: {
+export default function ProfileScreen({ showColorScheme, extraFields, extraTabs, hiddenTabs, onTabChange, onProfileSaved, texts, }: {
     showColorScheme?: boolean;
+    extraFields?: {
+        initialValues?: (user: AccountUser & Record<string, any>) => Record<string, any>;
+        rules?: Record<string, any>;
+        fields: import('react').ReactNode;
+    };
+    extraTabs?: Array<{
+        key: string;
+        label: string;
+        content: import('react').ReactNode;
+    }>;
+    hiddenTabs?: Array<'data' | 'security' | 'preferences'>;
+    onTabChange?: (tab: string) => void;
+    onProfileSaved?: (saved: {
+        values: Record<string, any>;
+        response: unknown;
+    }) => void;
+    texts?: object;
 }): import("react").JSX.Element | null;

package/dist/types/account/ResetPasswordScreen.d.ts

@@ -7,8 +7,9 @@
  * @param {string} [props.brandName]
  * @param {boolean} [props.showLanguageToggle]
  * @param {boolean} [props.showColorSchemeToggle]
+ * @param {object} [props.texts] los textos que cambian, con la forma de `account` en los textos del paquete
  */
-export default function ResetPasswordScreen({ signInPath, forgotPasswordPath, tokenParam, logo, brandName, showLanguageToggle, showColorSchemeToggle, }: {
+export default function ResetPasswordScreen({ signInPath, forgotPasswordPath, tokenParam, logo, brandName, showLanguageToggle, showColorSchemeToggle, texts, }: {
     signInPath: string;
     forgotPasswordPath?: string;
     tokenParam?: string;
@@ -16,4 +17,5 @@ export default function ResetPasswordScreen({ signInPath, forgotPasswordPath, to
     brandName?: string;
     showLanguageToggle?: boolean;
     showColorSchemeToggle?: boolean;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/account/SignInScreen.d.ts

@@ -7,8 +7,9 @@
  * @param {import('react').ReactNode | ((helpers: {signIn: (credentials: {email: string, password: string, remember?: boolean}) => Promise<void>}) => import('react').ReactNode)} [props.footer]
  * @param {boolean} [props.showLanguageToggle] por omisión sí
  * @param {boolean} [props.showColorSchemeToggle] por omisión sí
+ * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete
  */
-export default function SignInScreen({ homePath, forgotPasswordPath, logo, brandName, footer, showLanguageToggle, showColorSchemeToggle }: {
+export default function SignInScreen({ homePath, forgotPasswordPath, logo, brandName, footer, showLanguageToggle, showColorSchemeToggle, texts }: {
     homePath?: string;
     forgotPasswordPath?: string;
     logo?: import('react').ReactNode;
@@ -22,4 +23,5 @@ export default function SignInScreen({ homePath, forgotPasswordPath, logo, brand
     }) => import('react').ReactNode);
     showLanguageToggle?: boolean;
     showColorSchemeToggle?: boolean;
+    texts?: object;
 }): import("react").JSX.Element | null;

package/dist/types/account/accountConnector.d.ts

@@ -113,10 +113,14 @@ export type AccountConnector = {
         token: string;
         newPassword: string;
     }) => Promise<void>;
+    /**
+     * name, phone y
+     * los campos propios de ProfileScreen (extraFields)
+     */
     updateProfile: (input: {
         name: string;
         phone: string;
-    }) => Promise<{
+    } & Record<string, any>) => Promise<{
         message?: string;
     } | void>;
     changePassword: (input: {
@@ -236,7 +240,8 @@ export type AccountConnector = {
  * @property {() => Promise<void>} signOut
  * @property {(input: {email: string}) => Promise<void>} requestPasswordReset contesta igual exista o no el correo
  * @property {(input: {token: string, newPassword: string}) => Promise<void>} resetPassword desde el enlace del correo
- * @property {(input: {name: string, phone: string}) => Promise<{message?: string}|void>} updateProfile
+ * @property {(input: {name: string, phone: string} & Record<string, any>) => Promise<{message?: string}|void>} updateProfile name, phone y
+ *     los campos propios de ProfileScreen (extraFields)
  * @property {(input: {currentPassword?: string, newPassword: string}) => Promise<void>} changePassword
  * @property {() => Promise<AccountSecurity>} loadSecurity
  * @property {() => Promise<{secret: string, qrImageUrl?: string|null}>} startTotp una clave nueva (todavía sin activar)

package/dist/types/adapters/reactRouterRoutes.d.ts

@@ -3,9 +3,13 @@
  *
  * @param {object|undefined} access la regla (accessRules.js); sin ella, el grupo es de todos
  * @param {object[]} routes las rutas del módulo
+ * @param {{fallback?: import('react').ReactNode}} [options] fallback: lo que ve quien no tiene permiso; por omisión la página
+ *     de «sin permiso» de la casa (con ErrorPage y sus props se arma una propia: un botón para pedir acceso)
  * @returns {object} la ruta de react-router
  */
-export declare function withAccess(access: object | undefined, routes: object[]): object;
+export declare function withAccess(access: object | undefined, routes: object[], { fallback }?: {
+    fallback?: import('react').ReactNode;
+}): object;
 /**
  * ¿Se está descargando la pantalla siguiente?
  *
@@ -26,5 +30,13 @@ export declare function withChunkRecovery(routes: object[]): object[];
  * nuestro lado». Las dos últimas con su botón para recargar.
  *
  *   createBrowserRouter([{path: '/', element: <App />, ErrorBoundary: RouteErrorScreen, children: [...]}])
+ *
+ * Con props (como errorElement) se extiende igual que ErrorPage, y onError recibe lo que tronó (para Sentry o su aviso):
+ *   {errorElement: <RouteErrorScreen onError={(error) => reportError(error)} extraActions={<SupportButton />} />}
+ *
+ * @param {object} [props] las de ErrorPage (extraActions, actions, children, icon, homePath, onGoHome, texts) y:
+ * @param {(error: unknown, kind: string) => void} [props.onError] cada error que llega aquí, con su tipo (ERROR_PAGE_KIND)
  */
-export declare function RouteErrorScreen(): import("react").JSX.Element;
+export declare function RouteErrorScreen({ onError, ...errorPageProps }?: {
+    onError?: (error: unknown, kind: string) => void;
+}): import("react").JSX.Element;

package/dist/types/api/createApiClient.d.ts

@@ -22,6 +22,23 @@ export declare function apiUrlOf(baseUrl: string, path: string, params?: Record<
  * @returns {number|null}
  */
 export declare function retryAfterSecondsOf(retryAfterHeader: string | null): number | null;
+/**
+ * El ApiError de una respuesta que salió mal, para lo que no pasa por createApiClient: la subida con avance
+ * (uploadWithProgress regresa la respuesta tal cual) o un fetch propio. Es el mismo error que da el cliente: el problema RFC
+ * 9457 del servidor ({title, detail, errors}), su status (401 = sesión vencida, 422 = errores por campo) y el texto del
+ * paquete si el cuerpo no es JSON (un 502 del proxy). Así la pantalla no lee el error a mano.
+ *
+ *   const response = await uploadWithProgress(url, form, {headers, onProgress, signal});
+ *   if (!response.ok) throw await apiErrorOf(response);
+ *
+ * @param {Response} response
+ * @param {{toProblem?: (body: any, response: Response) => any}} [options] el mismo adaptador de createApiClient, para un
+ *     backend que contesta a su manera (Laravel manda {message, errors})
+ * @returns {Promise<ApiError>}
+ */
+export declare function apiErrorOf(response: Response, { toProblem }?: {
+    toProblem?: (body: any, response: Response) => any;
+}): Promise<ApiError>;
 export type ApiRequestOptions = {
     /**
      * objeto → JSON; FormData, Blob o URLSearchParams tal cual
@@ -126,10 +143,19 @@ export type ApiClient = {
  *     {refreshPath: '/auth/csrf-token'}; por omisión la cookie XSRF-TOKEN y el header X-XSRF-TOKEN
  * @param {number} [options.timeoutMilliseconds] el tiempo máximo de una consulta (0 = sin límite); por omisión 60 s
  * @param {(error: ApiError) => void} [options.onUnauthenticated] qué hacer con un 401 (normalmente ir a iniciar sesión)
+ * @param {(request: {method: string, url: string}) => void} [options.onRequest] cada petición, al salir
+ * @param {(response: {method: string, url: string, status: number, durationMilliseconds: number}) => void} [options.onResponse]
+ *     cada respuesta, buena o mala, al llegar
+ * @param {(error: ApiError, request: {method: string, url: string}) => void} [options.onError] cada error (sin red, 4xx, 5xx,
+ *     una respuesta que no es JSON), en un solo lugar: Sentry, un aviso propio. Cancelar no es error
+ * @param {(body: any, response: Response) => object|null} [options.toProblem] el error de un backend que no contesta en
+ *     RFC 9457, a esa forma: (body) => ({title: body.message, errors: body.errors}). Por omisión el cuerpo tal cual
+ * @param {(body: any, request: {method: string, url: string}) => any} [options.mapResponse] la respuesta buena de un backend
+ *     que la envuelve: (body) => body.data. Por omisión tal cual
  * @param {typeof fetch} [options.fetch] para un servidor de mentira o para las pruebas; por omisión el del navegador
  * @returns {ApiClient}
  */
-export declare function createApiClient({ baseUrl, credentials, getToken, headers: commonHeaders, publishedBuildHeader, csrf, timeoutMilliseconds: defaultTimeoutMilliseconds, onUnauthenticated, fetch: fetchImplementation, }?: {
+export declare function createApiClient({ baseUrl, credentials, getToken, headers: commonHeaders, publishedBuildHeader, csrf, timeoutMilliseconds: defaultTimeoutMilliseconds, onUnauthenticated, onRequest, onResponse, onError, toProblem, mapResponse, fetch: fetchImplementation, }?: {
     baseUrl?: string;
     credentials?: RequestCredentials;
     getToken?: () => string | null | undefined;
@@ -142,5 +168,24 @@ export declare function createApiClient({ baseUrl, credentials, getToken, header
     } | null;
     timeoutMilliseconds?: number;
     onUnauthenticated?: (error: ApiError) => void;
+    onRequest?: (request: {
+        method: string;
+        url: string;
+    }) => void;
+    onResponse?: (response: {
+        method: string;
+        url: string;
+        status: number;
+        durationMilliseconds: number;
+    }) => void;
+    onError?: (error: ApiError, request: {
+        method: string;
+        url: string;
+    }) => void;
+    toProblem?: (body: any, response: Response) => object | null;
+    mapResponse?: (body: any, request: {
+        method: string;
+        url: string;
+    }) => any;
     fetch?: typeof fetch;
 }): ApiClient;

package/dist/types/appShell/AppLayout.d.ts

@@ -6,6 +6,9 @@ export declare const MENU_POSITION: Readonly<{
 /**
  * @param {object} props
  * @param {import('react').ReactNode} [props.logo] el logo chico (28 px), en la barra junto al nombre y en el cajón del teléfono
+ * @param {import('react').ReactNode} [props.wordmark] el logo ancho, la marca con su nombre en una sola imagen (como el de muchas
+ *     empresas): va en lugar del logo y el nombre en la barra y arriba del menú del teléfono, a 24 px de alto. Con el menú
+ *     encogido se queda el logo chico (logo), si lo hay. brandName sigue siendo su nombre para el lector de pantalla
  * @param {string} [props.brandName] el nombre de la app; por omisión el appName de ToolkitProvider
  * @param {string} [props.brandCaption] el renglón chico debajo del nombre («Panel de administración»)
  * @param {string} [props.homePath] por omisión '/'
@@ -31,10 +34,17 @@ export declare const MENU_POSITION: Readonly<{
  * @param {boolean} [props.minimizeTabBarOnScroll] en el teléfono con vidrio, la barra de pestañas se encoge al leer hacia
  *     abajo y regresa al subir (como iOS 26); por omisión sí
  * @param {number|string} [props.contentMaxWidth] por omisión 1400
+ * @param {(collapsed: boolean) => void} [props.onMenuCollapse] la persona encogió (true) o abrió (false) el menú lateral
+ * @param {(isOpen: boolean) => void} [props.onMobileMenuChange] se abrió o se cerró el menú del teléfono (el cajón)
+ * @param {(keys: string[]|null) => void} [props.onMobileTabsChange] la persona eligió sus pestañas del teléfono (las llaves
+ *     de menuItemKeyOf; null: regresó a las de omisión). Se recuerdan en el navegador; con esto el proyecto las puede guardar
+ *     en su servidor
+ * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete (para todo el marco)
  * @param {import('react').ReactNode} props.children el contenido
  */
-export declare const AppLayout: ({ logo, brandName, brandCaption, homePath, menuItems, menuPosition, user, profilePath, accountMenuItems, onSignOut, isSigningOut, headerActions, accountSettings, menuBadges, sidebarFooter, showFontSizeToggle, showLanguageToggle, showColorSchemeToggle, ribbons, isNavigating, defaultCollapsed, minimizeTabBarOnScroll, contentMaxWidth, children, }: {
+export declare const AppLayout: ({ logo, wordmark, brandName, brandCaption, homePath, menuItems, menuPosition, user, profilePath, accountMenuItems, onSignOut, isSigningOut, headerActions, accountSettings, menuBadges, sidebarFooter, showFontSizeToggle, showLanguageToggle, showColorSchemeToggle, ribbons, isNavigating, defaultCollapsed, minimizeTabBarOnScroll, contentMaxWidth, onMenuCollapse, onMobileMenuChange, onMobileTabsChange, texts, children, }: {
     logo?: import('react').ReactNode;
+    wordmark?: import('react').ReactNode;
     brandName?: string;
     brandCaption?: string;
     homePath?: string;
@@ -62,5 +72,9 @@ export declare const AppLayout: ({ logo, brandName, brandCaption, homePath, menu
     defaultCollapsed?: boolean;
     minimizeTabBarOnScroll?: boolean;
     contentMaxWidth?: number | string;
+    onMenuCollapse?: (collapsed: boolean) => void;
+    onMobileMenuChange?: (isOpen: boolean) => void;
+    onMobileTabsChange?: (keys: string[] | null) => void;
+    texts?: object;
     children: import('react').ReactNode;
 }) => import("react").JSX.Element;

package/dist/types/appShell/AppearanceSettings.d.ts

@@ -26,9 +26,16 @@ export declare function SettingSection({ label, value, options, onChange }: {
  * @param {boolean} [props.showFontSize] por omisión sí
  * @param {boolean} [props.showLanguage] por omisión sí
  * @param {boolean} [props.showColorScheme] por omisión sí
+ * @param {(level: string) => void} [props.onFontSizeChange] la persona eligió otro tamaño de letra (para guardarlo en su
+ *     servidor; el idioma ya sale por onLanguageChange de ToolkitProvider)
+ * @param {(mode: 'light'|'dark'|'system') => void} [props.onColorSchemeChange] la persona eligió otro modo
+ * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function AppearanceSettings({ showFontSize, showLanguage, showColorScheme }: {
+export default function AppearanceSettings({ showFontSize, showLanguage, showColorScheme, onFontSizeChange, onColorSchemeChange, texts, }: {
     showFontSize?: boolean;
     showLanguage?: boolean;
     showColorScheme?: boolean;
+    onFontSizeChange?: (level: string) => void;
+    onColorSchemeChange?: (mode: 'light' | 'dark' | 'system') => void;
+    texts?: object;
 }): import("react").JSX.Element[];

package/dist/types/appShell/BarActionButton.d.ts

@@ -1,14 +1,14 @@
 /**
  * @param {object} props
  * @param {string} props.label el nombre de la acción, ya traducido: «Agregar sucursal»
- * @param {import('react').ReactNode} props.icon el ícono (<AddRoundedIcon />)
+ * @param {import('react').ReactNode} [props.icon] el ícono (<AddRoundedIcon />); sin él, se ve su texto
  * @param {(event: object) => void} [props.onClick]
  * @param {boolean} [props.disabled]
  * @param {'inherit'|'primary'|'secondary'|'success'|'error'|'info'|'warning'} [props.color] por omisión primary
  */
 export default function BarActionButton({ label, icon, onClick, disabled, color, ...buttonProps }: {
     label: string;
-    icon: import('react').ReactNode;
+    icon?: import('react').ReactNode;
     onClick?: (event: object) => void;
     disabled?: boolean;
     color?: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';

package/dist/types/appShell/BarActions.d.ts

@@ -7,12 +7,17 @@
  *     grupo, en la franja)
  * @param {object|Function|Array} [props.inlineSx] estilos de la cápsula cuando se queda en la pantalla
  * @param {boolean} [props.bare] sin cápsula alrededor: lo de adentro ya es una (un buscador)
+ * @param {boolean} [props.exclusive] en el teléfono, mientras se ve, es lo único del renglón flotante (con los demás grupos
+ *     exclusivos): los otros se esconden, como el modo de edición del iPhone deja solo lo de lo elegido. Lo usa SelectionActions
+ * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function BarActions({ children, label, order, sx, inlineSx, bare }: {
+export default function BarActions({ children, label, order, sx, inlineSx, bare, exclusive, texts }: {
     children: import('react').ReactNode;
     label?: string;
     order?: number;
     sx?: object | Function | any[];
     inlineSx?: object | Function | any[];
     bare?: boolean;
+    exclusive?: boolean;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/appShell/BarCapsule.d.ts

@@ -1,4 +1,12 @@
 export declare const BAR_CAPSULE_HEIGHT_PIXELS = 48;
+/**
+ * Los botones de adentro de un solo color y sin relleno, borde ni sombra (la regla de la barra con vidrio). La usan también
+ * la franja (BarActions) y lo que se ponga junto a la barra.
+ *
+ * @param {string} color el del texto de la barra ('inherit' en la franja)
+ * @returns {object} estilos para el sx del contenedor
+ */
+export declare function monochromeButtonsSxOf(color: string): object;
 /**
  * Lo demás va al div de la cápsula: aria-label (el nombre del grupo para quien usa lector de pantalla), id, onClick…
  * role va por omisión en 'group' (lo que se agrupa se anuncia junto).

package/dist/types/appShell/BarSearch.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @param {object} props
+ * @param {string} props.value lo escrito
+ * @param {(value: string) => void} props.onChange recibe el texto, no el evento
+ * @param {string} props.placeholder ya traducido: qué se busca («Buscar por título o etiqueta»); también es su nombre para el
+ *     lector de pantalla
+ * @param {boolean} [props.inBar] en la barra de la app (por omisión) o dentro de la pantalla
+ * @param {boolean} [props.collapsible] en la barra, sin usar se encoge a la lupa; por omisión sí (false: siempre abierta)
+ * @param {number} [props.order] en qué lugar va entre las cápsulas de la barra (por omisión la primera)
+ * @param {() => void} [props.onFocus]
+ * @param {() => void} [props.onBlur]
+ * @param {import('react').Ref<HTMLInputElement>} [props.inputRef] la caja, para enfocarla desde afuera (un atajo «/»)
+ */
+export default function BarSearch({ value, onChange, placeholder, inBar, collapsible, order, onFocus, onBlur, inputRef }: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder: string;
+    inBar?: boolean;
+    collapsible?: boolean;
+    order?: number;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    inputRef?: import('react').Ref<HTMLInputElement>;
+}): import("react").JSX.Element;

package/dist/types/appShell/MenuLinks.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @param {object} props
+ * @param {Array<{to?: string, href?: string, onClick?: Function, label?: string, labelKey?: string, Icon?: import('react').ElementType, icon?: import('react').ReactNode}>} props.links
+ * @param {() => void} props.onClose cierra el menú al elegir
+ */
+export default function MenuLinks({ links, onClose }: {
+    links: Array<{
+        to?: string;
+        href?: string;
+        onClick?: Function;
+        label?: string;
+        labelKey?: string;
+        Icon?: import('react').ElementType;
+        icon?: import('react').ReactNode;
+    }>;
+    onClose: () => void;
+}): import("react").JSX.Element[];

package/dist/types/appShell/MobileTabBar.d.ts

@@ -6,12 +6,15 @@
  * @param {import('react').ReactNode} [props.account] la cuenta (o el engrane), en su círculo junto a la barra
  * @param {import('react').ReactNode} [props.moreFooter] lo que va al final de la hoja de «Más» (la tarjeta del menú lateral)
  * @param {boolean} [props.minimizeOnScroll] se encoge al leer hacia abajo; por omisión sí
+ * @param {(keys: string[]|null) => void} [props.onPinnedTabsChange] la persona eligió sus pestañas (null: regresó a las de
+ *     omisión)
  */
-export default function MobileTabBar({ menuItems, activeItem, menuBadges, account, moreFooter, minimizeOnScroll }: {
+export default function MobileTabBar({ menuItems, activeItem, menuBadges, account, moreFooter, minimizeOnScroll, onPinnedTabsChange }: {
     menuItems: object[];
     activeItem: object | null;
     menuBadges?: Record<string, number>;
     account?: import('react').ReactNode;
     moreFooter?: import('react').ReactNode;
     minimizeOnScroll?: boolean;
+    onPinnedTabsChange?: (keys: string[] | null) => void;
 }): import("react").JSX.Element;