@acvl/frontend-components 0.0.65 → 0.0.67

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import * as _mui_material from '@mui/material';
 import { ButtonProps, ButtonGroupProps, IconButtonProps, MenuItemProps, AlertProps, BoxProps, AutocompleteProps, SliderProps, SwitchProps, GridProps, DrawerProps, SxProps, Theme, StackProps, TypographyProps, MenuProps, PaletteColorOptions, TextFieldProps as TextFieldProps$1, InputBaseProps, DialogProps, DialogContentProps } from '@mui/material';
 import * as React from 'react';
-import React__default, { ReactNode, Dispatch, SetStateAction, JSX, RefObject, FC, BaseSyntheticEvent, JSXElementConstructor, ElementType } from 'react';
+import React__default, { ReactNode, Dispatch, SetStateAction, JSX, RefObject, ReactElement, FC, BaseSyntheticEvent, JSXElementConstructor, ElementType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GridRowId, GridRowSelectionModel, GridSortModel, GridFilterModel, GridRowModesModel, GridRenderEditCellParams, GridToolbarProps, DataGridProps as DataGridProps$1, GridApi, GridPaginationModel, GridColumnVisibilityModel, useGridApiRef, GridColDef } from '@mui/x-data-grid';
 import { DataGridProps, GridBaseColDef } from '@mui/x-data-grid/internals';
 import { NavigateOptions } from 'react-router-dom';
 import * as zod_v4_core from 'zod/v4/core';
 import * as zod from 'zod';
-import { coerce } from 'zod';
+import { coerce, z } from 'zod';
 import { NumericFormatProps } from 'react-number-format';
 import { TextFieldProps } from '@mui/material/TextField';
 export { default as dayjs } from 'dayjs';
@@ -16,11 +16,11 @@ import * as redux from 'redux';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
+import { Theme as Theme$1, CssVarsTheme, CSSObject } from '@mui/material/styles';
 import { DebouncedFunc } from 'lodash';
 import { UseFormReturn } from 'react-hook-form';
 import { Breadcrumb, PageHeaderProps, Navigation, Branding, Session, Authentication, DashboardHeaderProps } from '@toolpad/core';
 import { SidebarFooterProps } from '@toolpad/core/DashboardLayout';
-import { Theme as Theme$1, CSSObject } from '@mui/material/styles';
 
 interface NormalOrIconProps {
     buttonProps: ButtonProps;
@@ -396,6 +396,14 @@ declare const ExportCSV: React__default.FC<ExportCSVButtonProps>;
 
 declare const CustomNoRows: () => react_jsx_runtime.JSX.Element;
 
+interface BaseControlledFieldProps {
+    name: string;
+    label?: string;
+    control: any;
+}
+
+declare const TrueFalse: React__default.FC<BaseControlledFieldProps>;
+
 interface ExtraActions {
     label: string;
     onClick: (rowSelectionModel: GridRowSelectionModel) => void;
@@ -445,12 +453,6 @@ interface ActiveIconProps {
 }
 declare const ActiveIcon: React__default.FC<ActiveIconProps>;
 
-interface BaseControlledFieldProps {
-    name: string;
-    label?: string;
-    control: any;
-}
-
 interface ControlledDateProps extends BaseControlledFieldProps {
     fieldProps?: any;
     extraProps: {
@@ -626,6 +628,11 @@ interface FieldProps$1 {
     detail_name?: string;
     label: string;
     type: any;
+    /**
+     * Sus breakpoints resuelven contra el viewport. La v1 solo se renderiza a página completa,
+     * así que alcanza; si algún día gana un shell angosto, ver
+     * `@v2/layout/pages/DetailPage/formLayout` para resolverlos contra el contenedor.
+     */
     gridProps?: GridProps;
     fieldProps?: object;
     extraProps?: any;
@@ -665,13 +672,38 @@ interface MainDrawerV2Props {
     width?: number | string;
     /** Lado desde el que entra el panel. Por defecto `"right"`. */
     anchor?: DrawerProps["anchor"];
+    /**
+     * Añade un tirador en el borde interior del panel para arrastrar su tamaño. Mientras el
+     * usuario no lo arrastre, `width` manda; en cuanto lo hace, el tamaño arrastrado la pisa
+     * y sobrevive a cerrar y reabrir el panel (mientras el componente siga montado). Doble
+     * clic en el tirador vuelve a `width`.
+     */
+    resizable?: boolean;
+    /** Tamaño mínimo en px al que se puede arrastrar. Por defecto `320`. */
+    minWidth?: number;
+    /** Tamaño máximo en px. Por defecto, el viewport menos un margen para el backdrop. */
+    maxWidth?: number;
+    /**
+     * Recuerda el tamaño arrastrado bajo esta clave en `localStorage`, de modo que sobreviva a
+     * desmontar el panel —el caso de `DrawerGrid_v2`, que lo remonta en cada apertura— y a
+     * recargar la página. Sin clave, el tamaño dura lo que dure el componente montado.
+     *
+     * La clave debe ser única por panel: dos que la compartan se pisan el ancho entre sí.
+     */
+    widthStorageKey?: string;
+    /**
+     * Se invoca al soltar el arrastre (y en cada paso del teclado) con el tamaño en px, o
+     * `null` cuando el doble clic lo devuelve a `width`. Para reaccionar al cambio o guardarlo
+     * en otro sitio; `widthStorageKey` no lo necesita.
+     */
+    onWidthChange?: (width: number | null) => void;
     /** Impide que un clic en el backdrop cierre el panel (formularios con cambios sin guardar). */
     disableBackdropClose?: boolean;
     /** Oculta el botón de cerrar integrado, para reemplazarlo desde `slots.headerActions`. */
     hideCloseButton?: boolean;
     /** Quita el padding interno del panel de contenido, para contenido a sangre. */
     disableGutters?: boolean;
-    /** Color de fondo del panel de contenido. Por defecto `#f7f7f7`. */
+    /** Color de fondo del panel de contenido. Por defecto el fondo del tema. */
     pageBackgroundColor?: string;
     /** Color del contorno: encabezado, pie y el marco alrededor del contenido. */
     chromeBackgroundColor?: string;
@@ -696,6 +728,8 @@ interface MainDrawerV2Props {
         footer?: Partial<BoxProps>;
         title?: Partial<TypographyProps>;
         closeButton?: Partial<IconButtonProps>;
+        /** Tirador de arrastre; sólo se renderiza con `resizable`. */
+        resizeHandle?: Partial<BoxProps>;
     };
 }
 /**
@@ -712,8 +746,12 @@ interface MainDrawerV2Props {
  * `theme.shape.borderRadius` y sigue al `anchor`; y el `sx` que llega por `slotProps` se
  * concatena en vez de reemplazar el propio. No depende de `@toolpad/core`, así que sirve
  * fuera de un layout de Toolpad.
+ *
+ * Con `resizable`, el borde interior lleva un tirador: se arrastra con el puntero, se ajusta
+ * con las flechas cuando tiene el foco y vuelve a `width` con doble clic. Con
+ * `widthStorageKey`, además, el tamaño se recuerda entre visitas.
  */
-declare function MainDrawer$1({ open, onClose, title, subtitle, children, width, anchor, disableBackdropClose, hideCloseButton, disableGutters, pageBackgroundColor, chromeBackgroundColor, contentGap, contentBorderRadius, slots, slotProps, }: MainDrawerV2Props): react_jsx_runtime.JSX.Element;
+declare function MainDrawer$1({ open, onClose, title, subtitle, children, width, anchor, resizable, minWidth, maxWidth, widthStorageKey, onWidthChange, disableBackdropClose, hideCloseButton, disableGutters, pageBackgroundColor, chromeBackgroundColor, contentGap, contentBorderRadius, slots, slotProps, }: MainDrawerV2Props): react_jsx_runtime.JSX.Element;
 
 declare module "@mui/x-data-grid" {
     interface ToolbarPropsOverrides {
@@ -732,6 +770,14 @@ interface ArrayFieldProps {
     pageType?: PageType;
     parser?: JSONParserProps;
     fields: FieldProps$1[];
+    /**
+     * What the edit panel's fields resolve their `size` breakpoints against. Defaults to
+     * `"container"`: that panel is a drawer, narrow by construction. It needs its own setting
+     * because `MainDrawer_v2` portals to `document.body`, so the panel is not a DOM descendant
+     * of the surrounding form and cannot inherit its container.
+     * @see DetailFormProps.responsiveTo
+     */
+    responsiveTo?: "viewport" | "container";
     slotProps?: {
         /**
          * Se aplica sobre el panel de edición. `open` y `onClose` los gobierna este
@@ -837,8 +883,22 @@ declare const LoadingComponent: React__default.FC<LoadingComponentProps>;
 
 /**
  * Muestra el logo de la empresa
+ *
+ * El archivo de marca es un JPG con fondo blanco, bola roja y letras negras: tal
+ * cual, en modo oscuro se ve un recuadro blanco. Como no hay versión clara del
+ * archivo, en oscuro se recolorea por CSS a blanco sobre transparente.
 **/
-declare const Logo: () => react_jsx_runtime.JSX.Element;
+interface LogoProps {
+    /** Altura máxima en px. */
+    maxHeight?: number;
+    /**
+     * Logo alternativo para modo oscuro. Lo suyo es un SVG o PNG blanco con fondo
+     * transparente: en cuanto exista, pasarlo aquí sustituye el recoloreado por
+     * el archivo de verdad sin tocar nada más.
+     */
+    darkSrc?: string;
+}
+declare const Logo: ({ maxHeight, darkSrc }?: LogoProps) => react_jsx_runtime.JSX.Element;
 
 interface MyTab {
     value: string;
@@ -851,6 +911,25 @@ interface MyTabProps {
     initialValue?: string;
     storageKey?: string;
     type?: PageType;
+    /**
+     * Alto que se ajusta al contenido, con `ALTO` de tope, en vez del alto fijo de siempre.
+     *
+     * El default arma la cadena de altos con porcentajes: el contenedor mide `ALTO`, el de
+     * los paneles 93.5% de él y cada panel 100% del anterior. Eso sólo funciona con un alto
+     * definido arriba — si el contenedor midiera `100%` de un padre sin alto, toda la cadena
+     * resuelve a `auto` y lo de adentro (un DataGrid, por ejemplo) crece con su contenido y
+     * se desborda.
+     *
+     * Con `fitContent` la cadena es flex: el contenedor no fija alto, sólo `maxHeight`, y
+     * cada eslabón va con `flex: 1 1 auto` + `minHeight: 0` para poder encoger. Las pestañas
+     * miden entonces lo que mida su contenido y, al pasarse del tope, es el contenido el que
+     * encoge y scrollea por dentro. El contenido tiene que seguir la cadena: cualquier
+     * envoltura propia entre el panel y el grid necesita también `flex: 1 1 auto` y
+     * `minHeight: 0`, en lugar de `height: 1`.
+     *
+     * @default false
+     */
+    fitContent?: boolean;
     slotProps?: {
         mainContainer?: BoxProps;
         contentContainer?: BoxProps;
@@ -1065,6 +1144,10 @@ declare const HistorialDrawer: React__default.FC<HistorialDrawerProps>;
 /**
  * Personaliza la temática de la página
  * Declara colores, tipo de letra, etc
+ *
+ * El tema publica dos esquemas de color (claro y oscuro) como variables CSS, así
+ * que cambiar de modo no reconstruye el tema: solo cambia el atributo del `<html>`
+ * y el navegador resuelve las variables. Ver `useColorMode` para el interruptor.
 **/
 declare module '@mui/material/styles' {
     interface PaletteColor {
@@ -1100,7 +1183,24 @@ declare module '@mui/material/styles' {
         largeAvatar?: any;
     }
 }
-declare const theme: () => _mui_material.Theme;
+/**
+ * Atributo que MUI escribe en `<html>` con el esquema activo (`light`/`dark`).
+ *
+ * Hace falta declararlo: con dos esquemas y sin selector, MUI usa `media`, es
+ * decir el tema sigue a la preferencia del sistema operativo y el interruptor no
+ * puede cambiarlo. Con un atributo manda el usuario.
+ */
+declare const COLOR_SCHEME_SELECTOR = "data-color-scheme";
+/**
+ * El tema de la librería, con lo que aporta trabajar por variables CSS: `vars`
+ * (los colores como `var(--mui-…)`, que siguen al esquema activo) y
+ * `colorSchemes`.
+ *
+ * Hace falta nombrarlo porque `responsiveFontSizes` declara devolver `Theme` a
+ * secas: el objeto que sale sí trae las dos cosas, pero la firma las esconde.
+ */
+type AppTheme = Theme$1 & CssVarsTheme;
+declare const theme: () => AppTheme;
 
 interface KpiCardProps {
     icon: ReactNode;
@@ -1148,6 +1248,42 @@ interface PollingCountdownChipProps {
  *  fetch reinicia el conteo; opcionalmente refresca al hacer clic. */
 declare function PollingCountdownChip({ pollingInterval, isFetching, onRefresh, }: PollingCountdownChipProps): react_jsx_runtime.JSX.Element;
 
+interface FilterInput {
+    /** The column this input filters on — used only as a React key. */
+    field: string;
+    /**
+     * The query keys this input writes. Usually one, but a range input owns two
+     * (`_min`/`_max`, `_after`/`_before`), which is why this isn't just `field`.
+     */
+    keys: string[];
+    label: string;
+    type: string;
+    element: ReactElement;
+}
+/**
+ * A filter the page adds itself, for something no column represents — a scope toggle, a flag
+ * the backend computes, anything whose value isn't a column's value.
+ *
+ * The element is read fresh on every render rather than captured with the schema, so an input
+ * that closes over page state stays current.
+ */
+interface CustomFilterDef {
+    /**
+     * The query key sent to the backend, and the form field name the element must bind to.
+     *
+     * Wins over a column that would generate the same key: the column's input is dropped from
+     * the panel, so one key never gets two inputs writing to it.
+     */
+    field: string;
+    label: string;
+    /** Any controlled input. The panel clones `control` in, exactly as it does for columns. */
+    element: ReactElement;
+    /** Defaults to `z.any().optional()` — enough for a value the backend validates anyway. */
+    schema?: z.ZodType<any, any>;
+    /** What the panel resets to, and what "Limpiar" restores. Defaults to `""`. */
+    defaultValue?: any;
+}
+
 /**
  * What the grid hands its RTK lazy query — the corrected `GridArgs`.
  *
@@ -1201,6 +1337,17 @@ interface ServerGridEditApi {
 interface ServerGridEditToggleApi {
     /** Hides the button and its shortcuts without touching permissions. */
     disabled?: boolean;
+    /**
+     * Drives edit mode from outside instead of leaving it to the toolbar toggle — e.g. a grid
+     * embedded in a detail form that should follow the form's own edit state.
+     *
+     * Leave it `undefined` and the layer owns the mode, as always. Pass a boolean and the
+     * caller owns it: the toolbar button and its shortcuts disappear, because two edit
+     * affordances for one grid only raises the question of which one won, and the checkbox
+     * column is left alone — whoever drives the mode also decides what it looks like. Still
+     * fail-closed — `true` without the model's change permission stays off.
+     */
+    active?: boolean;
     /** Notified whenever the toggle flips. */
     onEditModeChange?: (edit: boolean) => void;
 }
@@ -1253,6 +1400,16 @@ interface ServerGridProps {
         tab?: string;
         /** Scopes the filter panel's option lookups to the current detail record. */
         columnsFilter?: string;
+        /**
+         * Filters the page adds to the panel itself, for things no column represents — a
+         * scope toggle, a flag the backend computes. They render above the column-derived
+         * inputs and behave like any other filter from there on: counted by the badge,
+         * cleared by "Limpiar", persisted, and sent as query args.
+         *
+         * Gate them at the call site — build the array only for the users who should see the
+         * filter. The grid has no notion of who is looking at it.
+         */
+        customFilters?: CustomFilterDef[];
         /** Skip session persistence entirely. */
         dontSaveState?: boolean;
         /**
@@ -1764,13 +1921,234 @@ interface DetailFormController {
  */
 declare function useDetailForm(config: DetailFormConfig): DetailFormController;
 
+/**
+ * Layout de campos relativo al **contenedor** en vez de al viewport.
+ *
+ * MUI resuelve los breakpoints de `size` contra media queries del viewport. Eso es correcto en
+ * una página completa, pero el mismo formulario también se renderiza dentro de un drawer de
+ * 460px o de un diálogo `maxWidth="sm"`: ahí la pantalla es ancha, gana el valor de `lg` y los
+ * campos quedan apretados.
+ *
+ * Estas utilidades traducen el mismo objeto `size` a reglas `@container`, de modo que una sola
+ * definición de secciones sirve para página, diálogo y drawer — y se re-acomoda en vivo al
+ * arrastrar el borde del drawer, sin re-render.
+ */
+type FormBreakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * `container-name` que declara todo formulario en modo contenedor. Es público a propósito: un
+ * consumidor puede apuntarle desde su propio `sx` con la sintaxis corta de MUI —
+ * `sx={{ p: { "@700/acvform": 3 } }}`. Usar siempre la forma **numérica**: `@md/acvform`
+ * resolvería contra `theme.breakpoints.values` (900), no contra esta escalera (700).
+ */
+declare const FORM_CONTAINER_NAME = "acvform";
+/**
+ * Ancho del *formulario* (px) a partir del cual aplica cada clave. Escalera pensada para
+ * paneles, no una copia de `theme.breakpoints.values`: esos son umbrales de viewport y un
+ * formulario de 552px (un drawer de 600) caería en `xs`, o sea un campo por renglón — peor que
+ * el problema que esto resuelve. Derivada de una columna útil de ~190–230px con gutter de 16px.
+ */
+declare const DEFAULT_FORM_BREAKPOINTS: Record<FormBreakpoint, number>;
+interface FormGridSxOptions {
+    /** @default FORM_CONTAINER_NAME */
+    containerName?: string;
+    /** Se mezcla encima de {@link DEFAULT_FORM_BREAKPOINTS}. */
+    breakpoints?: Partial<Record<FormBreakpoint, number>>;
+}
+/**
+ * Traduce el `size`/`offset` de un Grid a reglas `@container` que reproducen, contra el ancho
+ * del formulario, exactamente lo que MUI deriva de ellos contra el viewport.
+ *
+ * **Todos** los escalones se emiten como container query —`xs` incluido, en `min-width:0px`—;
+ * nunca hay regla base. Por eso un campo renderizado fuera de un contenedor de formulario no
+ * empata con ninguna de estas reglas y conserva intacto el comportamiento por viewport de MUI:
+ * ahí está toda la compatibilidad hacia atrás.
+ *
+ * El resultado va en `sx`, que se serializa *después* de los estilos propios del Grid y con la
+ * misma especificidad, así que gana donde aplica.
+ */
+declare const formGridSx: (size: GridProps["size"], offset?: GridProps["offset"], options?: FormGridSxOptions) => CSSObject | undefined;
+/**
+ * Convierte un elemento en el contenedor contra el que resuelven los campos que contiene.
+ *
+ * `inline-size`, nunca `size`: el `Collapse` de `Subsection` anima midiendo `clientHeight`, y
+ * contener el eje de bloque lo rompería.
+ */
+declare const formContainerSx: (containerName?: string) => CSSObject;
+
+interface DetailFormProps {
+    /** Result of `useDetailForm`. */
+    controller: DetailFormController;
+    /**
+     * `id` of the `<form>` element. External submit buttons (e.g. inside a dialog footer,
+     * which live outside the form tree) submit via `<button form={formId} type="submit">`.
+     * Defaults to `"formulario"` for parity with `SaveCancelButton`.
+     */
+    formId?: string;
+    /** Persist-tab key for multi-section forms. Defaults to `formId`. */
+    storageKey?: string;
+    /** Height factor passed to the loading spinner. Defaults to `0.7`. */
+    loadingHeight?: number;
+    /**
+     * What each field's `size` breakpoints resolve against.
+     *
+     * `"viewport"` is MUI's own behaviour. `"container"` resolves them against the width of
+     * *this form*, so one section definition serves a full page, a `maxWidth="sm"` dialog and a
+     * 460px drawer without a hand-picked size per shell — and re-flows live as the drawer is
+     * dragged. Note that it makes the `<form>` a CSS containment context, so a `slotProps.form`
+     * that overrides `width` with a content-dependent value would no longer resolve.
+     * @default "viewport"
+     */
+    responsiveTo?: "viewport" | "container";
+    /**
+     * Form widths (px) at which each breakpoint key starts applying. Shallow-merged over
+     * {@link DEFAULT_FORM_BREAKPOINTS}; only read in `"container"` mode.
+     */
+    containerBreakpoints?: Partial<Record<FormBreakpoint, number>>;
+    slotProps?: {
+        form?: Partial<BoxProps>;
+    };
+}
+/**
+ * Presentational, chrome-less body of a record form: the `FormProvider`, the `<form>`
+ * element and the section/tab render tree — no page layout, no header buttons. Compose it
+ * inside a page, dialog or drawer shell that supplies the surrounding chrome.
+ */
+declare function DetailForm({ controller, formId, storageKey, loadingHeight, responsiveTo, containerBreakpoints, slotProps, }: DetailFormProps): react_jsx_runtime.JSX.Element;
+
+interface DetailFormDrawerNavigation {
+    /** Open the previous record of the list the drawer is walking. */
+    onPrev: () => void;
+    onNext: () => void;
+    /** Whether a previous/next record exists. The arrows are disabled when it doesn't. */
+    hasPrev: boolean;
+    hasNext: boolean;
+    /** 1-based position of the current record, shown between the arrows. */
+    position?: number;
+    /** Size of the list; shown as `position / count`. */
+    count?: number;
+    /** Blocks both arrows for a caller-side reason (e.g. while the next batch loads). */
+    disabled?: boolean;
+}
+interface DetailFormDrawerProps {
+    open: boolean;
+    /** Close the drawer. Also invoked after a successful save and on cancel. */
+    onClose: () => void;
+    title?: ReactNode;
+    api: DetailFormApi;
+    form: DetailFormConfig["form"];
+    sections: DetailFormConfig["sections"];
+    /** Defaults to `"create"`. */
+    pageType?: PageType;
+    /**
+     * Open a `"detail"` drawer straight in edit mode, as if the user had hit the Editar
+     * button. Ignored for the other page types, and for records the user may not edit.
+     */
+    startInEdit?: boolean;
+    /**
+     * Identity of the record on show. Swapping it (as the navigator does, without remounting
+     * the drawer) re-derives the per-record chrome — the in-place edit toggle drops back to
+     * read-only and `startInEdit` is re-applied against the new record's own permissions.
+     */
+    recordKey?: string | number;
+    permissionsPath?: string;
+    /** Runs after a successful mutation, before the drawer closes. Receives the response. */
+    onSuccess?: (response: any) => void;
+    /**
+     * Footer record navigator: prev/next arrows (Alt+↑ / Alt+↓) that step through a list of
+     * sibling records — e.g. the rows of the grid the drawer was opened from — without
+     * closing the drawer. Omit it and no navigator renders.
+     */
+    navigation?: DetailFormDrawerNavigation;
+    /** Panel width. Defaults to `600`. */
+    width?: number | string;
+    /** Side the drawer slides in from. Defaults to `"right"`. */
+    anchor?: DrawerProps["anchor"];
+    /**
+     * Let the user drag the drawer's inner edge to resize it. Forwarded to `MainDrawer_v2`
+     * along with the four props below — see it for the full behaviour.
+     */
+    resizable?: boolean;
+    /** Smallest width the drag allows, in px. Defaults to `320`. */
+    minWidth?: number;
+    /** Largest width the drag allows, in px. Defaults to the viewport minus a margin. */
+    maxWidth?: number;
+    /**
+     * Remember the dragged width under this `localStorage` key. Worth setting whenever the
+     * drawer is remounted per record — a fresh mount otherwise forgets the drag.
+     */
+    widthStorageKey?: string;
+    /** Fires with the final dragged width in px, or `null` when a double click resets it. */
+    onWidthChange?: (width: number | null) => void;
+    /**
+     * What each field's `size` breakpoints resolve against. Defaults to `"container"`: a drawer
+     * is narrow by construction, so viewport breakpoints would pick the wide-screen value and
+     * cram the fields — and they would not react to a drag either.
+     * @see DetailFormProps.responsiveTo
+     */
+    responsiveTo?: DetailFormProps["responsiveTo"];
+    /** @see DetailFormProps.containerBreakpoints */
+    containerBreakpoints?: DetailFormProps["containerBreakpoints"];
+    labels?: {
+        save?: string;
+        cancel?: string;
+        /**
+         * Rótulo del guardar-y-seguir. Por defecto `"Guardar ↓"`, corto porque va junto al
+         * Guardar de siempre y el tooltip ya dice qué hace; pásale un texto propio donde el
+         * paso al siguiente registro merezca nombrarse ("Guardar y siguiente bulto").
+         */
+        saveAndNext?: string;
+    };
+    slots?: {
+        /** Extra actions rendered in the header, left of the close button (e.g. "open full page"). */
+        headerActions?: ReactNode;
+    };
+    slotProps?: {
+        drawer?: Partial<DrawerProps>;
+        saveButton?: Partial<ButtonProps>;
+        cancelButton?: Partial<ButtonProps>;
+        saveAndNextButton?: Partial<ButtonProps>;
+    };
+}
+/**
+ * A record form inside a side drawer. Reuses the same `useDetailForm` engine and
+ * `DetailForm` body as `DetailPage_v2`, and `MainDrawer_v2` for the chrome — so it frames
+ * the form exactly like every other v2 drawer. What it adds on top is the per-record
+ * furniture: edit/delete in the header, and a footer holding the form actions and, when
+ * `navigation` is given, a prev/next record navigator (Alt+↑ / Alt+↓) plus "Guardar ↓"
+ * (Alt+Shift+↓) — a save that steps to the next record instead of closing, so a column can be
+ * captured down a list in one pass without the hands leaving the keyboard. Rename it with
+ * `labels.saveAndNext`. Guardar sits outside the `<form>` and submits via the native
+ * `form={formId}` attribute; Guardar ↓ submits by hand, so the implicit Enter stays Guardar.
+ */
+declare function DetailFormDrawer({ open, onClose, title, api, form, sections, pageType, startInEdit, recordKey, permissionsPath, onSuccess, navigation, width, anchor, resizable, minWidth, maxWidth, widthStorageKey, onWidthChange, responsiveTo, containerBreakpoints, labels, slots, slotProps, }: DetailFormDrawerProps): react_jsx_runtime.JSX.Element;
+
 interface DrawerGridDrawerConfig {
     /** Shared field layout, used by every mode. Same shape as `DetailPage_v2`'s `form`/`sections`. */
     form: DetailFormConfig["form"];
     sections: DetailFormConfig["sections"];
     permissionsPath?: string;
-    /** Panel width. Defaults to the drawer's own default (480). */
+    /** Panel width. Defaults to the drawer's own default (600). */
     width?: number | string;
+    /**
+     * Let the user drag the drawer's inner edge to resize it. The dragged width is remembered
+     * across openings under a key derived from the grid's own storage key — override it with
+     * `widthStorageKey`, or turn the memory off by passing an empty string.
+     */
+    resizable?: boolean;
+    /** Smallest width the drag allows, in px. Defaults to `320`. */
+    minWidth?: number;
+    /** Largest width the drag allows, in px. Defaults to the viewport minus a margin. */
+    maxWidth?: number;
+    /** Where the dragged width is remembered. Defaults to the grid's storage key + `_DW`. */
+    widthStorageKey?: string;
+    /**
+     * What the fields' `size` breakpoints resolve against. Defaults to `"container"` — the
+     * width of the panel, not of the screen.
+     * @see DetailFormDrawerProps.responsiveTo
+     */
+    responsiveTo?: DetailFormDrawerProps["responsiveTo"];
+    /** @see DetailFormDrawerProps.containerBreakpoints */
+    containerBreakpoints?: DetailFormDrawerProps["containerBreakpoints"];
     title?: {
         create?: ReactNode;
         record?: ReactNode | ((id: GridRowId) => ReactNode);
@@ -1814,16 +2192,28 @@ interface DrawerGridDrawerConfig {
     /**
      * Show the footer navigator that walks the grid's rows — prev/next arrows plus the
      * record's position — in the record drawer. Defaults to `true`.
+     *
+     * It also gates "Guardar ↓", the save that steps to the next row instead of closing:
+     * without a list to walk there is nothing to continue to.
      */
     showNavigator?: boolean;
+    /** Rótulos del pie del cajón. `saveAndNext` por defecto es `"Guardar ↓"`. */
     labels?: {
         save?: string;
         cancel?: string;
+        saveAndNext?: string;
     };
 }
 interface DrawerGridEditConfig {
     /** Hides the toggle (and its shortcuts) without touching permissions. */
     disabled?: boolean;
+    /**
+     * Drives edit mode from outside instead of leaving it to the toolbar toggle — pass the
+     * edit state of the form this grid is embedded in and a row click follows it, opening the
+     * drawer already editing without the user flipping a second switch. The toolbar button
+     * disappears while it's set, and it stays fail-closed against the model's permission.
+     */
+    active?: boolean;
 }
 interface DrawerGridProps {
     /**
@@ -1855,10 +2245,18 @@ interface DrawerGridProps {
  * the current filters — not just the ones on screen. Turn it off with
  * `drawer.showNavigator: false`.
  *
+ * Editing a list that way gets a third footer button, "Guardar ↓" / Alt+Shift+↓ (rename it
+ * with `drawer.labels.saveAndNext`): it saves and steps to the next row instead of closing,
+ * carrying the edit mode over, so capturing a column across many rows is one pass rather than
+ * open-edit-save-reopen per row — and with the shortcut, without leaving the keyboard. It
+ * rides on the navigator — no navigator, or last row, and there is just Guardar.
+ *
  * Edit mode is opt-in with `api.edit: {}` and adds nothing to the grid but a toolbar toggle —
  * no mutation, no actions column, no in-grid editing. While it's on, a row click opens the
  * record drawer already editing, provided the record allows it; the drawer form is the only
- * thing that writes.
+ * thing that writes. A grid embedded in a detail form can hand the mode over instead, with
+ * `api.edit: { active: pageType === "edit" }`, so it follows the form rather than asking for
+ * a second switch.
  *
  * The full grid config goes under `grid` (`{ pathname, api, dataGridProps, slotProps }`),
  * alongside `drawer`.
@@ -1921,30 +2319,6 @@ interface DetailPageV2Props {
 }
 declare function DetailPage(props: DetailPageV2Props): react_jsx_runtime.JSX.Element;
 
-interface DetailFormProps {
-    /** Result of `useDetailForm`. */
-    controller: DetailFormController;
-    /**
-     * `id` of the `<form>` element. External submit buttons (e.g. inside a dialog footer,
-     * which live outside the form tree) submit via `<button form={formId} type="submit">`.
-     * Defaults to `"formulario"` for parity with `SaveCancelButton`.
-     */
-    formId?: string;
-    /** Persist-tab key for multi-section forms. Defaults to `formId`. */
-    storageKey?: string;
-    /** Height factor passed to the loading spinner. Defaults to `0.7`. */
-    loadingHeight?: number;
-    slotProps?: {
-        form?: Partial<BoxProps>;
-    };
-}
-/**
- * Presentational, chrome-less body of a record form: the `FormProvider`, the `<form>`
- * element and the section/tab render tree — no page layout, no header buttons. Compose it
- * inside a page, dialog or drawer shell that supplies the surrounding chrome.
- */
-declare function DetailForm({ controller, formId, storageKey, loadingHeight, slotProps, }: DetailFormProps): react_jsx_runtime.JSX.Element;
-
 interface DetailFormDialogProps {
     open: boolean;
     /** Close the dialog. Also invoked after a successful save and on cancel. */
@@ -1958,6 +2332,15 @@ interface DetailFormDialogProps {
     permissionsPath?: string;
     /** Runs after a successful mutation, before the dialog closes. Receives the response. */
     onSuccess?: (response: any) => void;
+    /**
+     * What each field's `size` breakpoints resolve against. Defaults to `"container"`: a
+     * `maxWidth="sm"` dialog is narrow by construction, so viewport breakpoints would pick the
+     * wide-screen value and cram the fields.
+     * @see DetailFormProps.responsiveTo
+     */
+    responsiveTo?: DetailFormProps["responsiveTo"];
+    /** @see DetailFormProps.containerBreakpoints */
+    containerBreakpoints?: DetailFormProps["containerBreakpoints"];
     labels?: {
         save?: string;
         cancel?: string;
@@ -1975,79 +2358,7 @@ interface DetailFormDialogProps {
  * becomes a `DialogTitle` and the buttons move into `DialogActions`. The save button lives
  * outside the `<form>` tree, so it submits via the native `form={formId}` attribute.
  */
-declare function DetailFormDialog({ open, onClose, title, api, form, sections, pageType, permissionsPath, onSuccess, labels, slotProps, }: DetailFormDialogProps): react_jsx_runtime.JSX.Element;
-
-interface DetailFormDrawerNavigation {
-    /** Open the previous record of the list the drawer is walking. */
-    onPrev: () => void;
-    onNext: () => void;
-    /** Whether a previous/next record exists. The arrows are disabled when it doesn't. */
-    hasPrev: boolean;
-    hasNext: boolean;
-    /** 1-based position of the current record, shown between the arrows. */
-    position?: number;
-    /** Size of the list; shown as `position / count`. */
-    count?: number;
-    /** Blocks both arrows for a caller-side reason (e.g. while the next batch loads). */
-    disabled?: boolean;
-}
-interface DetailFormDrawerProps {
-    open: boolean;
-    /** Close the drawer. Also invoked after a successful save and on cancel. */
-    onClose: () => void;
-    title?: ReactNode;
-    api: DetailFormApi;
-    form: DetailFormConfig["form"];
-    sections: DetailFormConfig["sections"];
-    /** Defaults to `"create"`. */
-    pageType?: PageType;
-    /**
-     * Open a `"detail"` drawer straight in edit mode, as if the user had hit the Editar
-     * button. Ignored for the other page types, and for records the user may not edit.
-     */
-    startInEdit?: boolean;
-    /**
-     * Identity of the record on show. Swapping it (as the navigator does, without remounting
-     * the drawer) re-derives the per-record chrome — the in-place edit toggle drops back to
-     * read-only and `startInEdit` is re-applied against the new record's own permissions.
-     */
-    recordKey?: string | number;
-    permissionsPath?: string;
-    /** Runs after a successful mutation, before the drawer closes. Receives the response. */
-    onSuccess?: (response: any) => void;
-    /**
-     * Footer record navigator: prev/next arrows (Alt+↑ / Alt+↓) that step through a list of
-     * sibling records — e.g. the rows of the grid the drawer was opened from — without
-     * closing the drawer. Omit it and no navigator renders.
-     */
-    navigation?: DetailFormDrawerNavigation;
-    /** Panel width. Defaults to `480`. */
-    width?: number | string;
-    /** Side the drawer slides in from. Defaults to `"right"`. */
-    anchor?: DrawerProps["anchor"];
-    labels?: {
-        save?: string;
-        cancel?: string;
-    };
-    slots?: {
-        /** Extra actions rendered in the header, left of the close button (e.g. "open full page"). */
-        headerActions?: ReactNode;
-    };
-    slotProps?: {
-        drawer?: Partial<DrawerProps>;
-        saveButton?: Partial<ButtonProps>;
-        cancelButton?: Partial<ButtonProps>;
-    };
-}
-/**
- * A record form inside a side drawer. Reuses the same `useDetailForm` engine and
- * `DetailForm` body as `DetailPage_v2`, and `MainDrawer_v2` for the chrome — so it frames
- * the form exactly like every other v2 drawer. What it adds on top is the per-record
- * furniture: edit/delete in the header, and a footer holding the form actions and, when
- * `navigation` is given, a prev/next record navigator. The save button sits outside the
- * `<form>`, so it submits via the native `form={formId}` attribute.
- */
-declare function DetailFormDrawer({ open, onClose, title, api, form, sections, pageType, startInEdit, recordKey, permissionsPath, onSuccess, navigation, width, anchor, labels, slots, slotProps, }: DetailFormDrawerProps): react_jsx_runtime.JSX.Element;
+declare function DetailFormDialog({ open, onClose, title, api, form, sections, pageType, permissionsPath, onSuccess, responsiveTo, containerBreakpoints, labels, slotProps, }: DetailFormDialogProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Encabezado por defecto del `PageContainer`: resuelve título y breadcrumbs a
@@ -2131,11 +2442,15 @@ interface MainLayoutProps {
      * Color de fondo del área de contenido. Se aplica al scroll container
      * (`<main>`) para que cubra toda la altura scrolleable y no se corte cuando
      * la página es más larga que el viewport.
+     *
+     * Por defecto el fondo del tema, escrito como variable CSS para que siga al
+     * esquema de color activo; un valor fijo lo deja igual en claro y en oscuro.
      */
     pageBackgroundColor?: string;
     /**
      * Color del contorno: el marco continuo que forman el header y el sidebar
-     * alrededor del panel de contenido.
+     * alrededor del panel de contenido. Por defecto el color de superficie del
+     * tema, con la misma salvedad que `pageBackgroundColor`.
      */
     chromeBackgroundColor?: string;
     /**
@@ -2172,6 +2487,13 @@ interface MainLayoutProps {
     slots?: {
         /** Barra superior del dashboard. Por defecto la de Toolpad. */
         header?: JSXElementConstructor<DashboardHeaderProps>;
+        /**
+         * Acciones de la derecha de la barra superior. Por defecto Toolpad pinta
+         * ahí el interruptor de claro/oscuro y el menú de cuenta; reemplazarlo es
+         * la forma de mover ese interruptor (`useColorMode`) a otro sitio, o de
+         * añadir acciones propias, sin rehacer el header entero.
+         */
+        toolbarActions?: JSXElementConstructor<{}>;
         /** Pie del sidebar. Por defecto muestra versión y copyright. */
         sidebarFooter?: ElementType<SidebarFooterProps>;
         /** Encabezado de página. Por defecto resuelve título/breadcrumbs. */
@@ -2226,6 +2548,56 @@ declare const useMutationHandler: ({ mutationFn, form, onSuccess, onValidationEr
 
 declare const useHasPermission_v2: (path?: string) => boolean;
 
+/**
+ * Lee y cambia el esquema de color de la aplicación.
+ *
+ * Es la pieza que la librería expone para que cada proyecto ponga el interruptor
+ * donde quiera (cabecera, menú de usuario, ajustes…): la librería no dibuja
+ * ningún control, solo da el estado y las acciones.
+ *
+ * Funciona dentro del proveedor de tema que monta `MainLayout`, y el modo
+ * elegido se guarda en `localStorage`, así que sobrevive a recargas sin que el
+ * proyecto tenga que persistir nada.
+ *
+ * @example
+ * const { isDark, toggle } = useColorMode();
+ * <IconButton onClick={toggle}>{isDark ? <LightModeIcon /> : <DarkModeIcon />}</IconButton>
+ *
+ * @example
+ * // Con las tres opciones, incluida "seguir al sistema"
+ * const { mode, setMode } = useColorMode();
+ * <ToggleButtonGroup value={mode} exclusive onChange={(_, v) => v && setMode(v)}>
+ *     <ToggleButton value={"light"}>Claro</ToggleButton>
+ *     <ToggleButton value={"dark"}>Oscuro</ToggleButton>
+ *     <ToggleButton value={"system"}>Sistema</ToggleButton>
+ * </ToggleButtonGroup>
+ */
+/** Preferencia del usuario. `system` sigue a la configuración del dispositivo. */
+type ColorMode = "light" | "dark" | "system";
+interface UseColorModeResult {
+    /**
+     * Preferencia elegida, incluida `system`. Es el valor que debe marcar un
+     * selector de tres posiciones. En el primer render puede ser `undefined`,
+     * antes de que se lea lo guardado.
+     */
+    mode: ColorMode | undefined;
+    /** Esquema realmente aplicado, con `system` ya resuelto. */
+    resolvedMode: "light" | "dark";
+    /** Atajo de `resolvedMode === "dark"`, para elegir icono o texto. */
+    isDark: boolean;
+    /** Fija la preferencia y la guarda. */
+    setMode: (mode: ColorMode) => void;
+    /** Alterna entre claro y oscuro partiendo del esquema aplicado. */
+    toggle: () => void;
+    /**
+     * `false` si el tema en uso solo declara un esquema — un proyecto que pasa a
+     * `MainLayout` un tema propio construido sin `colorSchemes`. Sirve para
+     * esconder el interruptor en vez de dejar uno que no hace nada.
+     */
+    isSupported: boolean;
+}
+declare function useColorMode(): UseColorModeResult;
+
 interface PulseDotProps {
     /** Cuando es `true`, el punto es verde y parpadea; si no, usa `inactiveColor`. */
     active: boolean;
@@ -2240,5 +2612,5 @@ interface PulseDotProps {
  *  contrario un color fijo. Se usa para indicar conexión/actividad en vivo. */
 declare function PulseDot({ active, inactiveColor, size, title }: PulseDotProps): react_jsx_runtime.JSX.Element;
 
-export { APIContext, APIProvider, ActiveCell, ActiveIcon, Base, ButtonWithDrawer, CSVUpload, ConfirmDialog, ContentLayout, ControlledAddressAutocomplete, ControlledAmountWithCurrency, ControlledDate$1 as ControlledDate, ControlledDate as ControlledDate_v2, ControlledDropdown, ControlledFileField$1 as ControlledFileField, ControlledFileField as ControlledFileField_v2, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect$1 as ControlledSelect, ControlledSelect as ControlledSelect_v2, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, CrudDropdown, CustomNoRows, DEFAULT_PAGINATION, DeleteButton, DeleteConfirmationDialog, DetailFormDialog as DetailFormDialog_v2, DetailFormDrawer as DetailFormDrawer_v2, DetailForm as DetailForm_v2, DetailPage$1 as DetailPage, DetailPage as DetailPage_v2, DrawerGrid as DrawerGrid_v2, EditButton, ExportCSV, ExtraButtons, HistorialDrawer, KpiCard, LAYER_ORDER, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MainDrawer$1 as MainDrawer_v2, MainLayout, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, PAGE_SIZE_OPTIONS, Panel, PollingCountdownChip, PulseDot, SaveCancelButton, ServerGrid as ServerGrid_v2, StatusBadge, StyledMenu, Tabs, Transitions, UncontrolledText, changeTitle, closeProgressSnack, composeGridProps, deleteColumn$1 as deleteColumn, deleteColumn as deleteColumn_v2, editColumn, filterQuery, formParser, _default as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, resolveInitialState, setErrors, _default$1 as snackProgressReducer, tags, theme, togglableFields, updateProgressSnackData, useAPI, useDetailForm, useHasPermission, useHasPermission_v2, useKeyboardShortcut, useMutationHandler, useNavigation, useServerGrid, valueLabel };
-export type { APIcontextProps, AddressValue, ComoOpcionesProps, ConfirmDialogProps, ControlledInput, CustomToolbarProps, DeleteGridColumnsProps$1 as DeleteGridColumnsProps, DetachedPage, DetailFormApi, DetailFormConfig, DetailFormController, DetailFormDialogProps, DetailFormDrawerNavigation, DetailFormDrawerProps, DetailFormProps, DetailFormStatus, DetailPageV2Props, DetailRenderProps, DrawerGridDrawerConfig, DrawerGridEditConfig, DrawerGridProps, EditGridColumnsProps, EditReadOnlyFields, FieldFilter, FieldProps$1 as FieldProps, FieldValidationProps, GridArgs, GridColDefPropsOverrides, GridLayerContribution, GridLayerId, GridLayerMap, JSONFormProps, JSONParserProps, KeyboardShortcut, KpiCardProps, MainDrawerV2Props, MainLayoutPageHeaderProps, MainLayoutProps, MainLayoutSidebarFooterProps, MyDataGridProps, MyGridFilterModel, MyTab, MyTabProps, PageType, PanelProps, PollingCountdownChipProps, ProgressStatusProps, PulseDotProps, RowsSnapshot, ServerGridArgs, ServerGridCreateApi, ServerGridDataApi, ServerGridDeleteApi, ServerGridEditApi, ServerGridEditToggleApi, ServerGridHandle, ServerGridProps, ServerGridSnapshot, ServerGridState, UseServerGridOptions };
+export { APIContext, APIProvider, ActiveCell, ActiveIcon, Base, ButtonWithDrawer, COLOR_SCHEME_SELECTOR, CSVUpload, ConfirmDialog, ContentLayout, ControlledAddressAutocomplete, ControlledAmountWithCurrency, ControlledDate$1 as ControlledDate, ControlledDate as ControlledDate_v2, ControlledDropdown, ControlledFileField$1 as ControlledFileField, ControlledFileField as ControlledFileField_v2, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect$1 as ControlledSelect, ControlledSelect as ControlledSelect_v2, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, CrudDropdown, CustomNoRows, DEFAULT_FORM_BREAKPOINTS, DEFAULT_PAGINATION, DeleteButton, DeleteConfirmationDialog, DetailFormDialog as DetailFormDialog_v2, DetailFormDrawer as DetailFormDrawer_v2, DetailForm as DetailForm_v2, DetailPage$1 as DetailPage, DetailPage as DetailPage_v2, DrawerGrid as DrawerGrid_v2, EditButton, ExportCSV, ExtraButtons, FORM_CONTAINER_NAME, HistorialDrawer, KpiCard, LAYER_ORDER, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MainDrawer$1 as MainDrawer_v2, MainLayout, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, PAGE_SIZE_OPTIONS, Panel, PollingCountdownChip, PulseDot, SaveCancelButton, ServerGrid as ServerGrid_v2, StatusBadge, StyledMenu, Tabs, Transitions, TrueFalse, UncontrolledText, changeTitle, closeProgressSnack, composeGridProps, deleteColumn$1 as deleteColumn, deleteColumn as deleteColumn_v2, editColumn, filterQuery, formContainerSx, formGridSx, formParser, _default as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, resolveInitialState, setErrors, _default$1 as snackProgressReducer, tags, theme, togglableFields, updateProgressSnackData, useAPI, useColorMode, useDetailForm, useHasPermission, useHasPermission_v2, useKeyboardShortcut, useMutationHandler, useNavigation, useServerGrid, valueLabel };
+export type { APIcontextProps, AddressValue, AppTheme, ColorMode, ComoOpcionesProps, ConfirmDialogProps, ControlledInput, CustomFilterDef, CustomToolbarProps, DeleteGridColumnsProps$1 as DeleteGridColumnsProps, DetachedPage, DetailFormApi, DetailFormConfig, DetailFormController, DetailFormDialogProps, DetailFormDrawerNavigation, DetailFormDrawerProps, DetailFormProps, DetailFormStatus, DetailPageV2Props, DetailRenderProps, DrawerGridDrawerConfig, DrawerGridEditConfig, DrawerGridProps, EditGridColumnsProps, EditReadOnlyFields, FieldFilter, FieldProps$1 as FieldProps, FieldValidationProps, FilterInput, FormBreakpoint, FormGridSxOptions, GridArgs, GridColDefPropsOverrides, GridLayerContribution, GridLayerId, GridLayerMap, JSONFormProps, JSONParserProps, KeyboardShortcut, KpiCardProps, MainDrawerV2Props, MainLayoutPageHeaderProps, MainLayoutProps, MainLayoutSidebarFooterProps, MyDataGridProps, MyGridFilterModel, MyTab, MyTabProps, PageType, PanelProps, PollingCountdownChipProps, ProgressStatusProps, PulseDotProps, RowsSnapshot, ServerGridArgs, ServerGridCreateApi, ServerGridDataApi, ServerGridDeleteApi, ServerGridEditApi, ServerGridEditToggleApi, ServerGridHandle, ServerGridProps, ServerGridSnapshot, ServerGridState, UseColorModeResult, UseServerGridOptions };