@acvl/frontend-components 0.0.66 → 0.0.68

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,6 +672,28 @@ interface MainDrawerV2Props {
     width?: number | string;
     /** Lado desde el que entra el panel. Por defecto `"right"`. */
     anchor?: DrawerProps["anchor"];
+    /**
+     * `"temporary"` (por defecto) flota sobre la página con backdrop, y se cierra con
+     * Escape o al hacer clic fuera.
+     *
+     * `"docked"` se queda acoplado en el flujo: no hay backdrop ni modal, y el panel
+     * ocupa su propio hueco encogiendo a lo que tenga al lado, de modo que se puede
+     * seguir trabajando en la página con el panel abierto.
+     *
+     * Se pinta en el hueco que reserva `MainLayout` —al costado de la pantalla— sin
+     * importar desde dónde se declare: viaja hasta ahí por portal (ver
+     * `SidePanelHostContext`), así que una grilla enterrada en el contenido abre un panel
+     * de pantalla completa igual que el `sidePanel` del layout. Sin `MainLayout` arriba se
+     * queda donde esté declarado.
+     *
+     * El hueco es uno solo y se turnan: abrir un panel encoge al que estuviera puesto, y
+     * cerrarlo le devuelve el turno. Nunca se reparten el ancho entre varios.
+     *
+     * En acoplado el ancho se anima al abrir y cerrar, y `anchor` sólo decide de qué
+     * lado va el tirador de arrastre: la posición la fija el contenedor. `slotProps.drawer`
+     * y `slotProps.paper` no aplican —no hay `Drawer` ni `Paper` que configurar.
+     */
+    variant?: "temporary" | "docked";
     /**
      * 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
@@ -674,7 +703,10 @@ interface MainDrawerV2Props {
     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. */
+    /**
+     * Tamaño máximo en px. Por defecto, el viewport menos un margen: lo justo para dejar
+     * backdrop que clicar en el flotante, y un hueco de trabajo de verdad en el acoplado.
+     */
     maxWidth?: number;
     /**
      * Recuerda el tamaño arrastrado bajo esta clave en `localStorage`, de modo que sobreviva a
@@ -696,7 +728,7 @@ interface MainDrawerV2Props {
     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;
@@ -743,8 +775,52 @@ interface MainDrawerV2Props {
  * 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.
+ *
+ * Con `variant="docked"` el mismo panel se acopla en el flujo en vez de flotar: sin backdrop,
+ * encogiendo a lo que tenga al lado en lugar de taparlo, de modo que la página de atrás sigue
+ * usable con el panel abierto. Ver el `sidePanel` de `MainLayout`.
  */
-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 function MainDrawer$1({ open, onClose, title, subtitle, children, width, anchor, variant, resizable, minWidth, maxWidth, widthStorageKey, onWidthChange, disableBackdropClose, hideCloseButton, disableGutters, pageBackgroundColor, chromeBackgroundColor, contentGap, contentBorderRadius, slots, slotProps, }: MainDrawerV2Props): react_jsx_runtime.JSX.Element;
+
+interface SidePanelHost {
+    /**
+     * El nodo donde `MainLayout` reserva sitio para los paneles acoplados, o `null` si no
+     * hay a dónde viajar —porque ya se está dentro del hueco, que es el caso de lo que se
+     * pasa por `sidePanel`—.
+     */
+    element: HTMLElement | null;
+    /**
+     * Anuncia si este panel está abierto. Sólo se muestra uno a la vez, y el último en
+     * anunciarse es el que manda: hay un único hueco y repartirlo entre varios los deja a
+     * todos angostos, además de empujar la página fuera de la pantalla.
+     *
+     * La identidad la pone el propio panel (un `useId`). Hay que soltar el turno al
+     * desmontar, o el hueco se queda esperando a un panel que ya no existe.
+     */
+    registrar: (id: string, abierto: boolean) => void;
+    /**
+     * Los paneles abiertos, en el orden en que pidieron el hueco. El último lo tiene; los
+     * demás esperan encogidos su turno.
+     *
+     * Es la pila entera y no sólo el de encima porque un panel también necesita saber si
+     * hay algo debajo: es lo que convierte su botón de cerrar en un "volver".
+     */
+    pila: string[];
+}
+/**
+ * Cómo llega un panel acoplado al costado de la pantalla, y cómo se turnan entre ellos.
+ *
+ * Un panel acoplado tiene que salir al costado, y quien lo abre casi nunca está ahí: una
+ * grilla vive dentro del contenido, varios niveles abajo. Dejarlo donde se declara lo
+ * pintaría dentro de la página, que es justo lo que no se quiere; así que un
+ * `MainDrawer_v2` con `variant="docked"` se teletransporta (portal) hasta `element`.
+ *
+ * Fuera de un `MainLayout` el contexto es `null`: el panel se pinta donde esté declarado y
+ * no se turna con nadie.
+ */
+declare const SidePanelHostContext: React.Context<SidePanelHost | null>;
+/** El hueco de paneles acoplados del layout, o `null` si no hay ninguno arriba. */
+declare const useSidePanelHost: () => SidePanelHost | null;
 
 declare module "@mui/x-data-grid" {
     interface ToolbarPropsOverrides {
@@ -763,6 +839,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
@@ -868,8 +952,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;
@@ -1105,9 +1203,30 @@ interface _HistorialDrawerProps {
     open: boolean;
     handleDrawer: () => void;
     endpoint?: string;
+    /**
+     * Cómo se coloca el panel. Por defecto `"docked"`: se acopla al costado de la pantalla y
+     * encoge la página en vez de taparla, que es lo que pide el historial —se abre justo para
+     * cotejar lo que dice contra el registro que se está mirando, y con el panel encima había
+     * que cerrarlo entre campo y campo—.
+     *
+     * `"temporary"` lo devuelve a flotar sobre la página, con backdrop y modal. Hace falta
+     * donde no haya un `MainLayout_v2` arriba que le reserve el hueco: sin él, el acoplado se
+     * pinta donde esté declarado, o sea dentro de la propia página.
+     */
+    variant?: MainDrawerV2Props["variant"];
+    /** Ancho del panel en px. Por defecto el de `MainDrawer_v2` (600). */
+    width?: number | string;
+    /**
+     * Permite arrastrar el borde interior para cambiar el ancho. Activo por defecto: acoplado,
+     * el panel le quita sitio a la página, así que cuánto se lleva tiene que poder decidirlo
+     * quien lo está usando. El ancho arrastrado se recuerda entre visitas.
+     */
+    resizable?: boolean;
+    /** Dónde se recuerda el ancho arrastrado. Cadena vacía para no recordarlo. */
+    widthStorageKey?: string;
 }
 
-interface HistorialDrawerProps extends Pick<_HistorialDrawerProps, "endpoint"> {
+interface HistorialDrawerProps extends Pick<_HistorialDrawerProps, "endpoint" | "variant" | "width"> {
     iconButtonProps?: IconButtonProps;
 }
 declare const HistorialDrawer: React__default.FC<HistorialDrawerProps>;
@@ -1115,6 +1234,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 {
@@ -1150,7 +1273,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;
@@ -1198,6 +1338,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`.
  *
@@ -1314,6 +1490,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;
         /**
@@ -1730,6 +1916,12 @@ interface SubsectionProps {
     description?: string;
     first?: boolean;
     slotProps?: {
+        /**
+         * Grid raíz de la subsección. Su `size`/`offset` —por defecto `12`— resuelve igual que el
+         * de un campo: contra el ancho del formulario cuando este corre en modo contenedor, así
+         * que un `{ xs: 12, md: 6 }` parte el formulario en dos columnas cuando *el formulario*
+         * es ancho, no cuando lo es la pantalla.
+         */
         parentGrid?: Partial<GridProps>;
     };
     fields?: FieldProps[];
@@ -1825,6 +2017,225 @@ 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.
+ *
+ * Se puede anidar reusando el mismo nombre: un elemento nunca resuelve sus propias
+ * `@container` contra sí mismo, sino contra el contenedor ancestro más cercano. Así una
+ * subsección con `size` responsivo mide contra el formulario mientras sus campos miden contra
+ * ella.
+ */
+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 the `size` breakpoints inside the form resolve against — each field's, and each
+     * subsection's own (`slotProps.parentGrid.size`).
+     *
+     * `"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. A
+     * subsection that asks for a width of its own becomes, in turn, the container its own fields
+     * resolve against.
+     * @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"];
+    /**
+     * `"temporary"` (the default) floats over the page. `"docked"` takes its own space at
+     * the side of the screen and shrinks the app instead of covering it, so the page behind
+     * stays usable — see `MainDrawer_v2`.
+     *
+     * Docked drops the modal: nothing stops the user from touching the page while the form
+     * is open, so a drawer that guards unsaved edits behind the backdrop no longer does.
+     */
+    variant?: MainDrawerV2Props["variant"];
+    /**
+     * 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 the `size` breakpoints of the fields — and of the subsections themselves — 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, variant, 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"];
@@ -1832,6 +2243,21 @@ interface DrawerGridDrawerConfig {
     permissionsPath?: string;
     /** Panel width. Defaults to the drawer's own default (600). */
     width?: number | string;
+    /**
+     * How the panel sits on the screen. Defaults to `"temporary"`: it floats over the page,
+     * modal, the way it always has.
+     *
+     * `"docked"` gives it its own space at the side and shrinks the app instead of covering
+     * it, so the grid stays visible next to the record. Worth it where the row and the list
+     * are read together; it costs two things, both from dropping the modal:
+     *
+     * - Nothing stops the user from re-sorting, filtering or paging the grid while the
+     *   drawer is open, and the footer navigator walks the rows it sampled when the record
+     *   opened. It stays on the list the user was reading, which is usually what's wanted,
+     *   but it can no longer claim to match what's on screen.
+     * - Unsaved edits are no longer fenced off by the backdrop.
+     */
+    variant?: DetailFormDrawerProps["variant"];
     /**
      * 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
@@ -1844,6 +2270,14 @@ interface DrawerGridDrawerConfig {
     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);
@@ -1927,8 +2361,13 @@ interface DrawerGridProps {
 }
 /**
  * A `ServerGrid_v2` whose rows and create button open a `DetailFormDrawer_v2` instead of
- * navigating to a full page — without giving up the full-page routes. A row click and the
- * create menu's "Manual" option both open the drawer; Ctrl/Cmd+click still opens the full
+ * navigating to a full page — without giving up the full-page routes.
+ *
+ * The panel floats over the page by default. `drawer.variant: "docked"` gives it its own
+ * space at the side instead, shrinking the app so the grid stays visible next to the
+ * record; read that prop before switching, the two differ in more than looks.
+ *
+ * A row click and the create menu's "Manual" option both open the drawer; Ctrl/Cmd+click still opens the full
  * page in a new tab, Alt+click opens it in the same tab, and the record drawer carries an
  * "open full page" button — so the routes stay reachable either way. Grids whose rows have
  * no route of their own turn all three off with `drawer.showOpenFullPage: false`.
@@ -1978,11 +2417,45 @@ interface ConfirmDialogProps {
  *  confirmar puede mostrar estado de carga mientras se resuelve la acción. */
 declare function ConfirmDialog({ open, titulo, mensaje, confirmLabel, cancelLabel, confirmColor, confirmIcon, isLoading, onConfirm, onClose, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 
+interface ActionsMenuProps {
+    delete?: {
+        mutation: any;
+        disableNavBack?: boolean;
+    };
+    historial?: {
+        endpoint?: string;
+        /** Defaults to `"docked"` — the panel takes its own space beside the page. */
+        variant?: _HistorialDrawerProps["variant"];
+        /** Panel width in px. Defaults to 600. */
+        width?: number | string;
+    };
+    extraButtons?: {
+        title: string;
+        icon: ReactNode;
+        onClick: () => void;
+    }[];
+}
+
 interface DetailPageV2Props {
     api: DetailFormApi;
     form: DetailFormConfig["form"];
     sections: DetailFormConfig["sections"];
     pageType: PageType;
+    /**
+     * What the `size` breakpoints of the fields — and of the subsections themselves — resolve
+     * against. Defaults to `"container"`: the width of the form, not of the screen.
+     *
+     * A full page is no longer the whole viewport minus the sidebar — a docked side panel
+     * takes its share of it — so the screen stopped being a good proxy for how much room
+     * the fields actually have. Against the form they re-flow as that room changes, with
+     * no re-render: the breakpoint ladder is CSS.
+     *
+     * `"viewport"` restores MUI's own behaviour for a page that needs it.
+     * @see DetailFormProps.responsiveTo
+     */
+    responsiveTo?: DetailFormProps["responsiveTo"];
+    /** @see DetailFormProps.containerBreakpoints */
+    containerBreakpoints?: DetailFormProps["containerBreakpoints"];
     slots?: {
         button?: ReactNode;
         extraButtons?: {
@@ -2003,9 +2476,12 @@ interface DetailPageV2Props {
             };
             cancel?: Partial<ButtonProps>;
         };
-        historial?: {
-            endpoint?: string;
-        };
+        /**
+         * The history panel opened from the actions menu. It docks beside the page rather
+         * than floating over it, so the record stays readable next to what the history says
+         * about it — see `ActionsMenuProps.historial` for how to change that.
+         */
+        historial?: ActionsMenuProps["historial"];
         permissionsPath?: string;
         deleteButton?: {
             disableNavBack?: boolean;
@@ -2014,30 +2490,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. */
@@ -2051,6 +2503,15 @@ interface DetailFormDialogProps {
     permissionsPath?: string;
     /** Runs after a successful mutation, before the dialog closes. Receives the response. */
     onSuccess?: (response: any) => void;
+    /**
+     * What the `size` breakpoints of the fields — and of the subsections themselves — 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;
@@ -2068,105 +2529,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 `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;
-    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, 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
@@ -2202,6 +2565,9 @@ interface MainLayoutPageHeaderProps extends PageHeaderProps {
  *
  * Atajo Shift+F: alterna pantalla completa (oculta navegación y encabezados).
  *
+ * Con `sidePanel` el cascarón deja de ocupar el viewport entero y comparte la fila
+ * con un panel acoplado a la derecha (ver esa prop).
+ *
  * El estado plegado/expandido del sidebar de escritorio se guarda en
  * `localStorage` y se restaura al recargar (ver `sidebarStorageKey`).
  **/
@@ -2250,11 +2616,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;
     /**
@@ -2291,6 +2661,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. */
@@ -2298,9 +2675,38 @@ interface MainLayoutProps {
         /** Contenido de cada snack de progreso. Por defecto una barra de progreso. */
         progressStatus?: (data: any) => ReactNode;
     };
+    /**
+     * Panel acoplado a la derecha del cascarón, a lo alto del viewport: al lado del
+     * header, del sidebar y del contenido, no encima. Mientras esté abierto el
+     * dashboard entero se encoge para dejarle sitio, así que la página de atrás sigue
+     * usable —es la diferencia con un drawer, que la tapa—.
+     *
+     * Aquí sólo se le reserva el hueco; el panel maneja su propio ancho, su animación y
+     * si está abierto o cerrado. Lo natural es un `MainDrawer_v2` con `variant="docked"`,
+     * que además queda con el encabezado a la misma altura que la barra superior.
+     *
+     * El ancho que ocupe se publica en `SIDE_PANEL_WIDTH_VAR`, para que lo que esté fijo
+     * al viewport pueda apartarse.
+     */
+    sidePanel?: ReactNode;
     /** Contenido a renderizar; por defecto el `<Outlet />` del router. */
     children?: ReactNode;
 }
+/**
+ * Variable CSS con el ancho que ocupa ahora mismo el `sidePanel`, publicada en la raíz
+ * del documento.
+ *
+ * El panel encoge el cascarón, pero no lo que está fijo al viewport —un FAB, los snacks
+ * de progreso—, que quedaría debajo. Leyendo esta variable esos elementos se apartan
+ * solos, y siguen el ancho aunque el panel se anime o el usuario lo arrastre:
+ *
+ *     right: `calc(${theme.spacing(4)} + var(--acv-side-panel-width, 0px))`
+ *
+ * Va en `documentElement` porque buena parte de esos elementos se pintan en portales,
+ * fuera del árbol del layout. Sin panel abierto vale `0px`, y fuera de este layout no
+ * existe: de ahí que se lea siempre con un fallback.
+ */
+declare const SIDE_PANEL_WIDTH_VAR = "--acv-side-panel-width";
 declare const MainLayout: (props: MainLayoutProps) => react_jsx_runtime.JSX.Element;
 
 /**
@@ -2345,6 +2751,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;
@@ -2359,5 +2815,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, SIDE_PANEL_WIDTH_VAR, SaveCancelButton, ServerGrid as ServerGrid_v2, SidePanelHostContext, 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, useSidePanelHost, 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, SidePanelHost, UseColorModeResult, UseServerGridOptions };