@acvl/frontend-components 0.0.66 → 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;
@@ -696,7 +703,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;
@@ -763,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
@@ -868,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;
@@ -1115,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 {
@@ -1150,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;
@@ -1198,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`.
  *
@@ -1314,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;
         /**
@@ -1825,6 +1921,207 @@ 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"];
@@ -1844,6 +2141,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);
@@ -2014,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. */
@@ -2051,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;
@@ -2068,105 +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 `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
@@ -2250,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;
     /**
@@ -2291,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. */
@@ -2345,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;
@@ -2359,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 };