@acvl/mobile-components 0.0.0-stage → 0.0.1

package/src/index.ts

@@ -0,0 +1,143 @@
+// ==============================|| TEMA ||============================== //
+
+export * from "./tema";
+export { Text, TextInput } from "./texto";
+
+// ==============================|| COMPONENTES ||============================== //
+
+export {
+    default as AccionesDelEncabezado,
+    type AccionDelEncabezado,
+} from "./componentes/AccionesDelEncabezado";
+export { default as BotonDeAvatar, inicialesDe } from "./componentes/BotonDeAvatar";
+export { default as BotonGrande } from "./componentes/BotonGrande";
+export { default as CabeceraEmpujada } from "./componentes/CabeceraEmpujada";
+export { default as Chip, type TonoDeChip } from "./componentes/Chip";
+export { default as ContenidoDePantalla } from "./componentes/ContenidoDePantalla";
+export { default as EstadoVacio } from "./componentes/EstadoVacio";
+export {
+    default as Foto,
+    ProveedorDeFotos,
+    type BajarFoto,
+    type FotoAVer,
+} from "./componentes/Foto";
+export { default as IconoDeRenglon } from "./componentes/IconoDeRenglon";
+export { Logo, LogoCompleto } from "./componentes/Logo";
+export { default as Nota } from "./componentes/Nota";
+export { default as OpcionesExcluyentes } from "./componentes/OpcionesExcluyentes";
+export {
+    default as PantallaDeError,
+    type PropsDePantallaDeError,
+} from "./componentes/PantallaDeError";
+export { default as Pestanas, type Pestana } from "./componentes/Pestanas";
+export { default as Rotulo } from "./componentes/Rotulo";
+export { default as RotuloDeSeccion } from "./componentes/RotuloDeSeccion";
+export { default as Tarjeta } from "./componentes/Tarjeta";
+export { default as TarjetaDeDatos } from "./componentes/TarjetaDeDatos";
+export { default as TiraDeFotos, type FotoDeLaTira } from "./componentes/TiraDeFotos";
+export { default as VisorDeFoto } from "./componentes/VisorDeFoto";
+
+// ==============================|| DIÁLOGOS ||============================== //
+
+export {
+    avisar,
+    confirmar,
+    mostrarDialogo,
+    type BotonDeDialogo,
+    type Dialogo,
+    type EstiloDeBoton,
+} from "./dialogos/dialogos";
+export { default as HostDeDialogos } from "./dialogos/HostDeDialogos";
+
+// ==============================|| NAVEGACIÓN ||============================== //
+
+export { default as BarraDePestanas, HUECO_DE_LA_BARRA } from "./navegacion/BarraDePestanas";
+export type { IconoDePestana } from "./navegacion/BotonDeBarra";
+export {
+    ALTO_DEL_ENCABEZADO,
+    TituloDelEncabezado,
+    useOpcionesDelEncabezado,
+} from "./navegacion/encabezado";
+
+// ==============================|| FORMULARIOS ||============================== //
+
+export {
+    CampoDeFecha,
+    CampoDeFechaHora,
+    CampoDeOpciones,
+    CampoDeTelefono,
+    CampoDeTexto,
+    CampoInterruptor,
+    Campo,
+    ErrorDelCampo,
+} from "./formularios/campos";
+export { default as CampoDeSeleccion, CampoDeVarias } from "./formularios/CampoDeSeleccion";
+export {
+    FechaControlada,
+    FechaHoraControlada,
+    InterruptorControlado,
+    OpcionesControladas,
+    SeleccionControlada,
+    TelefonoControlado,
+    TextoControlado,
+    VariasControladas,
+    type CampoAtado,
+    type SinValor,
+} from "./formularios/controlados";
+export { mensajeDeError, setErrors } from "./formularios/errores";
+export {
+    fechaONula,
+    isoONulo,
+    mismoInstante,
+    soloLoQueCambio,
+    textoONulo,
+    useGuardado,
+    volcarErrores,
+} from "./formularios/guardado";
+export {
+    default as SelectorDeOpcion,
+    SelectorDeVarias,
+    type Opcion,
+    type PropsDeSelectorDeOpcion,
+    type PropsDeSelectorDeVarias,
+} from "./formularios/SelectorDeOpcion";
+export { default as TextoDeAccesoControlado } from "./formularios/TextoDeAccesoControlado";
+export { useBusqueda } from "./formularios/useBusqueda";
+
+// ==============================|| LISTAS Y FICHAS ||============================== //
+
+export {
+    default as HojaDeFiltros,
+    InterruptorDeFiltro,
+    OpcionDeFiltro,
+    OpcionesMultiples,
+    OrdenDeLista,
+    SeccionDeFiltros,
+} from "./listas/HojaDeFiltros";
+export { default as ListaPaginada, type ConsultaPaginada } from "./listas/ListaPaginada";
+export { renglonesDe, type Pagina } from "./listas/paginado";
+export {
+    AvisoDeRecortados,
+    Buscador,
+    CabeceraDeLista,
+    EstadoDeHoja,
+    FilaConContador,
+    RenglonDeContacto,
+    RenglonDeHoja,
+    RenglonDeLiga,
+    SeccionDeFicha,
+    TarjetaDeLista,
+    type FiltrosDeCabecera,
+} from "./listas/piezas";
+export { default as TarjetaDeslizable, type AccionDeslizable } from "./listas/TarjetaDeslizable";
+
+// ==============================|| PANTALLAS ||============================== //
+
+export {
+    default as PantallaDeAcceso,
+    type DatosDeAcceso,
+    type ResultadoDeAcceso,
+} from "./pantallas/PantallaDeAcceso";
+export { EsperaDeEdicion, FormularioDeEdicion } from "./pantallas/PantallaDeEdicion";
+export { default as PantallaDeFicha } from "./pantallas/PantallaDeFicha";
+export { default as PantallaDePerfil } from "./pantallas/PantallaDePerfil";

package/src/listas/HojaDeFiltros.tsx

@@ -0,0 +1,261 @@
+import BotonGrande from "../componentes/BotonGrande";
+import IconoDeRenglon from "../componentes/IconoDeRenglon";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import React from "react";
+import { Modal, Pressable, ScrollView, Switch, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/**
+ * La hoja de filtros y orden de una lista (viajes, recursos), a pantalla completa
+ * como la del mapa: con la letra al 180% un menú deja ver dos opciones. Se aplica al tocar, sin
+ * «Aplicar»; el botón de abajo dice cuántos renglones quedan. Cada lista pone sus secciones.
+ */
+export default function HojaDeFiltros({
+    abierta,
+    onCerrar,
+    hayAlgo,
+    onQuitar,
+    visibles,
+    nombres,
+    children,
+}: {
+    abierta: boolean;
+    onCerrar: () => void;
+    /** Si hay algo puesto (un filtro o un orden distinto): ofrece «Quitar». */
+    hayAlgo: boolean;
+    onQuitar: () => void;
+    /** Cuántos quedan con todo lo puesto; `null` mientras se cuentan. */
+    visibles: number | null;
+    /** Cómo se dice uno y varios: `["viaje", "viajes"]`. */
+    nombres: readonly [string, string];
+    children: React.ReactNode;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    return (
+        <Modal visible={abierta} animationType="slide" onRequestClose={onCerrar}>
+            <View style={[styles.hoja, { paddingTop: insets.top + 10 }]}>
+                <View style={styles.cabecera}>
+                    <TouchableOpacity onPress={onCerrar} accessibilityLabel="Cerrar">
+                        <MaterialIcons name="arrow-back" size={45} color={c.primary} />
+                    </TouchableOpacity>
+                    <Text style={styles.titulo}>Filtros</Text>
+                    {hayAlgo ? (
+                        <TouchableOpacity onPress={onQuitar}>
+                            <Text style={styles.limpiar}>Quitar</Text>
+                        </TouchableOpacity>
+                    ) : null}
+                </View>
+
+                <ScrollView contentContainerStyle={styles.contenido}>{children}</ScrollView>
+
+                <View style={{ paddingBottom: insets.bottom + 16 }}>
+                    <BotonGrande onPress={onCerrar}>
+                        {visibles === null
+                            ? "Listo"
+                            : `Ver ${visibles} ${visibles === 1 ? nombres[0] : nombres[1]}`}
+                    </BotonGrande>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+/** El rótulo de una sección de la hoja. */
+export function SeccionDeFiltros({ children }: { children: string }) {
+    const styles = useStyles();
+    return <Text style={styles.seccion}>{children}</Text>;
+}
+
+/** Una opción como renglón: casilla (de varias) o círculo (de una), como la hoja del mapa. */
+export function OpcionDeFiltro({
+    texto,
+    elegida,
+    unica = false,
+    onPress,
+}: {
+    texto: string;
+    elegida: boolean;
+    unica?: boolean;
+    onPress: () => void;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityRole={unica ? "radio" : "checkbox"}
+            accessibilityState={{ checked: elegida }}
+            style={[styles.opcion, elegida && styles.opcionElegida]}
+        >
+            <IconoDeRenglon
+                name={
+                    unica
+                        ? elegida
+                            ? "radiobox-marked"
+                            : "radiobox-blank"
+                        : elegida
+                          ? "checkbox-marked"
+                          : "checkbox-blank-outline"
+                }
+                fontSize={tipografia.subtitulo}
+                color={elegida ? c.primary : c.secondary}
+            />
+            <Text style={styles.opcionTexto}>{texto}</Text>
+        </Pressable>
+    );
+}
+
+/** Varias opciones de un mismo filtro, cada una se prende y se apaga sola. */
+export function OpcionesMultiples<V extends string | number>({
+    titulo,
+    opciones,
+    elegidas,
+    onCambiar,
+}: {
+    titulo: string;
+    opciones: readonly { value: V; label: string }[];
+    elegidas: V[];
+    onCambiar: (elegidas: V[]) => void;
+}) {
+    return (
+        <>
+            <SeccionDeFiltros>{titulo}</SeccionDeFiltros>
+            {opciones.map((o) => (
+                <OpcionDeFiltro
+                    key={String(o.value)}
+                    texto={o.label}
+                    elegida={elegidas.includes(o.value)}
+                    onPress={() =>
+                        onCambiar(
+                            elegidas.includes(o.value)
+                                ? elegidas.filter((v) => v !== o.value)
+                                : [...elegidas, o.value],
+                        )
+                    }
+                />
+            ))}
+        </>
+    );
+}
+
+/** Un filtro de sí o no: el renglón entero lo alterna, no sólo el interruptor. */
+export function InterruptorDeFiltro({
+    texto,
+    prendido,
+    onCambiar,
+}: {
+    texto: string;
+    prendido: boolean;
+    onCambiar: (prendido: boolean) => void;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    return (
+        <Pressable
+            onPress={() => onCambiar(!prendido)}
+            accessibilityRole="switch"
+            accessibilityState={{ checked: prendido }}
+            style={[styles.opcion, styles.interruptor, prendido && styles.opcionElegida]}
+        >
+            <Text style={styles.opcionTexto}>{texto}</Text>
+            <Switch
+                value={prendido}
+                onValueChange={onCambiar}
+                trackColor={{ true: c.primaryLight }}
+                thumbColor={prendido ? c.primary : undefined}
+            />
+        </Pressable>
+    );
+}
+
+/**
+ * «Ordenar por» y su sentido. `orden` es el `ordering` que se manda (`-codigo`), o `undefined` si
+ * se deja el del servidor; con `porOmision`, ese «sin orden» se ofrece como opción.
+ */
+export function OrdenDeLista({
+    campos,
+    orden,
+    onOrdenar,
+    porOmision,
+}: {
+    campos: readonly { value: string; label: string }[];
+    orden: string | undefined;
+    /** El nuevo `ordering`, o `null` para el del servidor. */
+    onOrdenar: (orden: string | null) => void;
+    porOmision?: string;
+}) {
+    const descendente = orden?.startsWith("-") ?? false;
+    const campo = orden?.replace(/^-/, "");
+    return (
+        <>
+            <SeccionDeFiltros>Ordenar por</SeccionDeFiltros>
+            {porOmision ? (
+                <OpcionDeFiltro
+                    texto={porOmision}
+                    unica
+                    elegida={orden === undefined}
+                    onPress={() => onOrdenar(null)}
+                />
+            ) : null}
+            {campos.map((c) => (
+                <OpcionDeFiltro
+                    key={c.value}
+                    texto={c.label}
+                    unica
+                    elegida={campo === c.value}
+                    onPress={() => onOrdenar(`${descendente ? "-" : ""}${c.value}`)}
+                />
+            ))}
+            {campo !== undefined ? (
+                <>
+                    <SeccionDeFiltros>Sentido</SeccionDeFiltros>
+                    <OpcionDeFiltro
+                        texto="Ascendente"
+                        unica
+                        elegida={!descendente}
+                        onPress={() => onOrdenar(campo)}
+                    />
+                    <OpcionDeFiltro
+                        texto="Descendente"
+                        unica
+                        elegida={descendente}
+                        onPress={() => onOrdenar(`-${campo}`)}
+                    />
+                </>
+            ) : null}
+        </>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    hoja: { flex: 1, backgroundColor: c.fondo, paddingHorizontal: 18, gap: 12 },
+    cabecera: { flexDirection: "row", alignItems: "center", gap: 8 },
+    titulo: { flex: 1, fontSize: tipografia.titulo, fontWeight: "900", color: c.primary },
+    limpiar: { ...renglon(tipografia.cuerpo), fontWeight: "700", color: c.primary },
+    contenido: { gap: 8, paddingBottom: 16 },
+    seccion: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+        marginTop: 10,
+    },
+    opcion: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 10,
+        backgroundColor: c.superficie,
+        borderRadius: 14,
+        borderWidth: 2,
+        borderColor: c.secondaryLighter,
+        padding: 12,
+    },
+    opcionElegida: { borderColor: c.primary, backgroundColor: c.primaryWash },
+    interruptor: { alignItems: "center" },
+    opcionTexto: { flex: 1, ...renglon(tipografia.subtitulo), fontWeight: "700", color: c.texto },
+}));

package/src/listas/ListaPaginada.tsx

@@ -0,0 +1,117 @@
+import BotonGrande from "../componentes/BotonGrande";
+import EstadoVacio from "../componentes/EstadoVacio";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { HUECO_DE_LA_BARRA } from "../navegacion/BarraDePestanas";
+import { Text } from "../texto";
+import type MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { ActivityIndicator, FlatList, RefreshControl } from "react-native";
+import { renglonesDe, type Pagina } from "./paginado";
+
+/** Lo que la lista lee de un `use…InfiniteQuery` de RTK Query. */
+export interface ConsultaPaginada<T> {
+    data?: { pages: Pagina<T>[] };
+    isLoading: boolean;
+    isError: boolean;
+    isFetching: boolean;
+    isFetchingNextPage: boolean;
+    hasNextPage: boolean;
+    fetchNextPage: () => unknown;
+    refetch: () => unknown;
+}
+
+interface Props<T> {
+    consulta: ConsultaPaginada<T>;
+    renderItem: (item: T) => React.ReactElement;
+    llave: (item: T) => string | number;
+    /** Lo que se dice sin renglones: «Ningún viaje en curso». */
+    vacio: {
+        icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+        titulo: string;
+        texto?: string;
+    };
+    /** Cómo se cuentan: `["viaje", "viajes"]` → «128 viajes». */
+    nombres: [string, string];
+}
+
+/**
+ * Una lista **paginada con scroll infinito**: pide la página siguiente al acercarse
+ * al final, se refresca jalando hacia abajo y dice cuántos hay en total. Lo que la llena es de
+ * quien la usa (`renderItem`); el buscador y las pestañas van arriba, fuera de ella.
+ *
+ * Deja libre lo que tapa la barra de pestañas, que flota sobre la pantalla.
+ */
+export default function ListaPaginada<T>({
+    consulta,
+    renderItem,
+    llave,
+    vacio,
+    nombres,
+}: Props<T>) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const renglones = renglonesDe(consulta.data);
+    const total = consulta.data?.pages[0]?.count;
+
+    if (consulta.isLoading) {
+        return <ActivityIndicator color={c.primary} size="large" style={styles.cargando} />;
+    }
+    if (consulta.isError && !consulta.data) {
+        return (
+            <EstadoVacio
+                icono="cloud-off-outline"
+                titulo="No se pudo cargar"
+                texto="Revisa tu señal e intenta de nuevo."
+            >
+                <BotonGrande icono="refresh" onPress={() => consulta.refetch()}>
+                    Reintentar
+                </BotonGrande>
+            </EstadoVacio>
+        );
+    }
+
+    return (
+        <FlatList
+            data={renglones}
+            keyExtractor={(item) => String(llave(item))}
+            renderItem={({ item }) => renderItem(item)}
+            contentContainerStyle={[styles.contenido, !renglones.length && styles.vacia]}
+            ListHeaderComponent={
+                total !== undefined && renglones.length ? (
+                    <Text style={styles.total}>
+                        {total === 1 ? `1 ${nombres[0]}` : `${total} ${nombres[1]}`}
+                    </Text>
+                ) : null
+            }
+            ListEmptyComponent={
+                <EstadoVacio icono={vacio.icono} titulo={vacio.titulo} texto={vacio.texto} />
+            }
+            ListFooterComponent={
+                consulta.isFetchingNextPage ? (
+                    <ActivityIndicator color={c.primary} style={styles.mas} />
+                ) : null
+            }
+            onEndReachedThreshold={0.5}
+            onEndReached={() => {
+                if (consulta.hasNextPage && !consulta.isFetching) consulta.fetchNextPage();
+            }}
+            refreshControl={
+                <RefreshControl
+                    refreshing={consulta.isFetching && !consulta.isFetchingNextPage}
+                    onRefresh={() => consulta.refetch()}
+                    colors={[c.primary]}
+                    progressBackgroundColor={c.superficie}
+                />
+            }
+            keyboardShouldPersistTaps="handled"
+        />
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    cargando: { marginTop: 40 },
+    contenido: { gap: 10, paddingBottom: HUECO_DE_LA_BARRA },
+    vacia: { flexGrow: 1 },
+    total: { ...renglon(tipografia.secundario), color: c.secondary },
+    mas: { marginVertical: 16 },
+}));

package/src/listas/TarjetaDeslizable.tsx

@@ -0,0 +1,126 @@
+import { crearEstilos, renglon, tipografia } from "../tema";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import * as Haptics from "expo-haptics";
+import React, { useRef } from "react";
+import { View } from "react-native";
+import ReanimatedSwipeable, {
+    SwipeDirection,
+    type SwipeableMethods,
+} from "react-native-gesture-handler/ReanimatedSwipeable";
+
+/** Lo que mide el panel que asoma al deslizar, y desde dónde ya cuenta como hecho. */
+const ANCHO = 132;
+const UMBRAL = 96;
+
+/**
+ * El color del panel. **Fijos y no de la paleta**: es un relleno con letra blanca, y los tonos del
+ * modo oscuro son claros, para leerse como texto; con blanco encima no se leerían.
+ */
+const COLORES = {
+    exito: "#2e7d32",
+    info: "#1565c0",
+    peligro: "#c62828",
+} as const;
+
+export interface AccionDeslizable {
+    etiqueta: string;
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    color: keyof typeof COLORES;
+    /** Lo que hace. Quien la da decide si pregunta antes (las que no se deshacen, sí). */
+    onAccion: () => void;
+}
+
+const Panel = ({ accion, lado }: { accion: AccionDeslizable; lado: "izquierda" | "derecha" }) => {
+    const styles = useStyles();
+    return (
+        <View
+            style={[
+                styles.panel,
+                { backgroundColor: COLORES[accion.color] },
+                lado === "izquierda" ? styles.izquierda : styles.derecha,
+            ]}
+        >
+            <MaterialCommunityIcons name={accion.icono} size={26} color="#ffffff" />
+            <Text style={styles.etiqueta}>{accion.etiqueta}</Text>
+        </View>
+    );
+};
+
+/**
+ * Un renglón de una lista que **hace algo al deslizarlo**: hacia la derecha asoma la acción de la
+ * izquierda (`alDeslizarALaDerecha`) y hacia la izquierda la otra. Se suelta pasado el umbral y la
+ * acción corre; la tarjeta regresa sola a su lugar. Con una vibración corta, para que se sienta
+ * que pasó algo.
+ *
+ * Sin acciones es la tarjeta de siempre: no hay nada que deslizar.
+ */
+export default function TarjetaDeslizable({
+    alDeslizarALaDerecha,
+    alDeslizarALaIzquierda,
+    children,
+}: {
+    alDeslizarALaDerecha?: AccionDeslizable | null;
+    alDeslizarALaIzquierda?: AccionDeslizable | null;
+    children: React.ReactNode;
+}) {
+    const styles = useStyles();
+    const deslizable = useRef<SwipeableMethods>(null);
+
+    if (!alDeslizarALaDerecha && !alDeslizarALaIzquierda) return <>{children}</>;
+
+    return (
+        <ReanimatedSwipeable
+            ref={deslizable}
+            friction={1.5}
+            leftThreshold={UMBRAL}
+            rightThreshold={UMBRAL}
+            overshootLeft={false}
+            overshootRight={false}
+            containerStyle={styles.contenedor}
+            renderLeftActions={
+                alDeslizarALaDerecha
+                    ? () => <Panel accion={alDeslizarALaDerecha} lado="izquierda" />
+                    : undefined
+            }
+            renderRightActions={
+                alDeslizarALaIzquierda
+                    ? () => <Panel accion={alDeslizarALaIzquierda} lado="derecha" />
+                    : undefined
+            }
+            // `RIGHT`: la tarjeta se fue a la derecha, así que asomó el panel de la izquierda.
+            onSwipeableWillOpen={(direccion) => {
+                const accion =
+                    direccion === SwipeDirection.RIGHT
+                        ? alDeslizarALaDerecha
+                        : alDeslizarALaIzquierda;
+                deslizable.current?.close();
+                if (!accion) return;
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+                accion.onAccion();
+            }}
+        >
+            {children}
+        </ReanimatedSwipeable>
+    );
+}
+
+const useStyles = crearEstilos(() => ({
+    // El redondeo de la tarjeta, para que el panel que asoma no se vea cuadrado detrás.
+    contenedor: { borderRadius: 14 },
+    panel: {
+        width: ANCHO,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 4,
+        paddingHorizontal: 8,
+    },
+    izquierda: { borderTopLeftRadius: 14, borderBottomLeftRadius: 14 },
+    derecha: { borderTopRightRadius: 14, borderBottomRightRadius: 14 },
+    etiqueta: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: "#ffffff",
+        textAlign: "center",
+    },
+}));

package/src/listas/paginado.ts

@@ -0,0 +1,15 @@
+/**
+ * Una página de una lista del servidor (`CustomPagination` de los backends de ACV): `?page=N` y
+ * `?page_size=N`, y la respuesta `{count, next, previous, results}`. Las listas la leen de a poco,
+ * con scroll infinito (`ListaPaginada`).
+ */
+export interface Pagina<T> {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: T[];
+}
+
+/** Todos los renglones cargados hasta ahora, de todas las páginas. */
+export const renglonesDe = <T>(data: { pages: Pagina<T>[] } | undefined): T[] =>
+    data?.pages.flatMap((p) => p.results) ?? [];