@acvl/mobile-components 0.0.0-stage → 0.0.2

package/src/formularios/errores.ts

@@ -0,0 +1,105 @@
+/** Si un texto es una página HTML y no un mensaje. */
+const pareceHtml = (texto: string) => /^\s*</.test(texto) || /<(html|body|head)[\s>]/i.test(texto);
+
+/**
+ * El mensaje que el backend mandó, listo para enseñárselo al usuario.
+ *
+ * Los errores de los backends de ACV salen de `drf_simple_api_errors`, que responde
+ * `{ title, detail?: string[], invalid_params?: [{ name, reason: string[] }] }`. Llegan en dos
+ * formas y se leen las dos:
+ *
+ * - `detail`: los errores de regla, que no cuelgan de un campo (el orden de los pasos, «falta lo
+ *   que la acción pide»). Si vienen varios se juntan todos, uno por renglón: enseñar sólo el
+ *   primero obligaba a corregir y reintentar para descubrir el siguiente.
+ * - `invalid_params`: los de un campo (`clave`, `lng`, `fecha_real`), cada uno con su motivo.
+ *
+ * `title` es la etiqueta del tipo de error («Validation error.»), que sola no le dice nada a
+ * nadie: sólo se usa si no hay nada más.
+ *
+ * Sirve para el feedback de una acción —un aviso, Pendientes—, no para pintar errores en los
+ * campos de un formulario: eso lo hace `setErrors` con `invalid_params`.
+ */
+export const mensajeDeError = (error: any, fallback: string): string => {
+    const data = error?.data;
+
+    if (typeof data === "string" && data) {
+        // Una página de error de un proxy (un 413 o un 502 de nginx) llega como `PARSING_ERROR`
+        // con el HTML en `data`: enseñarla tal cual llenaba Pendientes de etiquetas. Va el
+        // mensaje genérico con el código.
+        if (pareceHtml(data)) {
+            const codigo = error?.originalStatus ?? error?.status;
+            return typeof codigo === "number" ? `${fallback} (error ${codigo})` : fallback;
+        }
+        return data;
+    }
+
+    if (data && typeof data === "object") {
+        const renglones: string[] = [];
+
+        if (Array.isArray(data.detail)) renglones.push(...data.detail.map(String));
+        else if (typeof data.detail === "string" && data.detail) renglones.push(data.detail);
+
+        for (const param of Array.isArray(data.invalid_params) ? data.invalid_params : []) {
+            const razon = Array.isArray(param?.reason) ? param.reason.join(" ") : param?.reason;
+            if (razon) renglones.push(String(razon));
+        }
+
+        const limpios = renglones.map((r) => r.trim()).filter(Boolean);
+        if (limpios.length) return limpios.join("\n");
+
+        if (typeof data.title === "string" && data.title) return data.title;
+    }
+
+    // Un `Error` de la propia app (p. ej. el dispositivo no sabe compartir archivos) no trae
+    // `data`: su mensaje ya está escrito para el usuario.
+    if (typeof error?.message === "string" && error.message) return error.message;
+
+    return fallback;
+};
+
+/**
+ * Vuelca los motivos de un 400 sobre los campos del formulario.
+ *
+ * El backend responde en RFC 7807 (`invalid_params: [{ name, reason }]`). Un campo suelto trae
+ * su motivo como lista de textos y se cuelga de su nombre tal cual. Una **lista editable**
+ * (`useFieldArray`) trae en su lugar un objeto por renglón —vacío si ese
+ * renglón está bien—, que es como DRF reporta un serializador anidado `many=True`; ahí el motivo
+ * va a `lista.<índice>.<campo>`, que es justo como se llaman los inputs de la fila, para que se
+ * pinte sobre el campo que falla.
+ *
+ * Sin ese segundo caso el error quedaba a nombre de la lista entera, donde no hay ningún input
+ * registrado: quien capturaba sólo veía el aviso genérico de que no se pudo guardar. Es la misma
+ * traducción que hace el portal (`setErrors` de @acvl/frontend-components), así que la forma de
+ * la respuesta es una sola para los dos clientes.
+ */
+export const setErrors = (form: any, error: any) => {
+    // Sin respuesta (una falla de red) o un 400 de regla sin campos (`invalid_params: null`): no
+    // hay nada que colgar de los campos, y quien llama ya enseña el aviso general.
+    const params = error?.data?.invalid_params;
+    if (!params || typeof params !== "object") return;
+
+    Object.values(params).forEach((param: any) => {
+        const porRenglon =
+            Array.isArray(param.reason) &&
+            param.reason.length > 0 &&
+            param.reason.every(
+                (renglon: any) =>
+                    typeof renglon === "object" && renglon !== null && !Array.isArray(renglon),
+            );
+
+        if (porRenglon) {
+            param.reason.forEach((renglon: any, indice: number) => {
+                Object.entries(renglon).forEach(([campo, motivos]: [string, any]) => {
+                    form.setError(`${param.name}.${indice}.${campo}`, {
+                        message: Array.isArray(motivos) ? motivos.join(", ") : String(motivos),
+                    });
+                });
+            });
+            return;
+        }
+
+        form.setError(param.name, {
+            message: Array.isArray(param.reason) ? param.reason.join(", ") : param.reason,
+        });
+    });
+};

package/src/formularios/guardado.ts

@@ -0,0 +1,76 @@
+import { router } from "expo-router";
+import React from "react";
+import type { FieldValues, UseFormReturn } from "react-hook-form";
+import { avisar } from "../dialogos/dialogos";
+import { mensajeDeError, setErrors } from "./errores";
+
+/**
+ * Lo que comparten los formularios de edición: cómo se compara lo capturado contra lo que vino,
+ * cómo se lee un rechazo del servidor y cómo se guarda.
+ */
+
+/** Un texto anulable como se manda: sin espacios a los lados, y vacío es `null`. */
+export const textoONulo = (texto: string | null | undefined): string | null => {
+    const limpio = (texto ?? "").trim();
+    return limpio ? limpio : null;
+};
+
+/** Una fecha como se manda: ISO **con su hora** (la hora es el dato), o `null`. */
+export const isoONulo = (fecha: Date | null): string | null => (fecha ? fecha.toISOString() : null);
+
+/** Una fecha del servidor como la captura el formulario. */
+export const fechaONula = (iso: string | null | undefined): Date | null =>
+    iso ? new Date(iso) : null;
+
+/** Si dos instantes son el mismo; dos nulos también lo son. */
+export const mismoInstante = (a: Date | null, b: Date | null): boolean =>
+    (a?.getTime() ?? null) === (b?.getTime() ?? null);
+
+/**
+ * Cuelga de cada campo el motivo con el que el servidor lo rechazó (`invalid_params`). Sólo si
+ * vienen como lista: un 400 de regla trae `detail` y `invalid_params` nulo, y `setErrors` no lo
+ * aguanta. Lo que no es de un campo lo dice quien llama, con `mensajeDeError`.
+ */
+export const volcarErrores = <T extends FieldValues>(form: UseFormReturn<T>, error: unknown) => {
+    const data = (error as { data?: { invalid_params?: unknown } } | null)?.data;
+    if (data && Array.isArray(data.invalid_params)) setErrors(form, error);
+};
+
+/**
+ * Guardar un formulario de edición, igual en todos: si nada cambió, sólo se regresa; si el
+ * servidor lo rechaza, cada motivo se cuelga de su campo (`volcarErrores`), el mensaje queda
+ * abajo del formulario (`error`) y se avisa. Al guardar, regresa a la pantalla de antes.
+ */
+export function useGuardado<T extends FieldValues>(form: UseFormReturn<T>) {
+    const [error, setError] = React.useState<string | null>(null);
+    const guardar = async (cambios: object, mandar: () => Promise<unknown>) => {
+        if (Object.keys(cambios).length === 0) {
+            router.back();
+            return;
+        }
+        setError(null);
+        try {
+            await mandar();
+            router.back();
+        } catch (falla) {
+            volcarErrores(form, falla);
+            const mensaje = mensajeDeError(falla, "Revisa la señal e intenta de nuevo.");
+            setError(mensaje);
+            await avisar({ titulo: "No se guardó", mensaje, icono: "alert-circle-outline" });
+        }
+    };
+    return { error, guardar };
+}
+
+/**
+ * De dos cuerpos completos —lo que se mandaría con lo que vino y con lo capturado—, sólo las
+ * llaves que cambiaron, como el `formParser` del portal: un `PATCH` con todo pisaría lo que alguien
+ * cambió en el portal mientras la pantalla estaba abierta. Compara por valor (`JSON`), así que
+ * sirve con listas y objetos (los contactos, una dirección).
+ */
+export const soloLoQueCambio = <T extends Record<string, unknown>>(antes: T, despues: T) =>
+    Object.fromEntries(
+        Object.entries(despues).filter(
+            ([llave, valor]) => JSON.stringify(valor) !== JSON.stringify(antes[llave]),
+        ),
+    ) as Partial<T>;

package/src/formularios/useBusqueda.ts

@@ -0,0 +1,19 @@
+import React from "react";
+
+/** Lo que tarda en buscar después de la última tecla: no una petición por letra. */
+const PAUSA_MS = 300;
+
+/**
+ * Un buscador que pide al servidor: `[texto, busqueda, setTexto]`. `texto` es lo escrito, al
+ * momento, para el campo; `busqueda` es lo mismo sin espacios a los lados y **300 ms después de la
+ * última tecla**, para la consulta.
+ */
+export function useBusqueda(): [string, string, (texto: string) => void] {
+    const [texto, setTexto] = React.useState("");
+    const [busqueda, setBusqueda] = React.useState("");
+    React.useEffect(() => {
+        const espera = setTimeout(() => setBusqueda(texto.trim()), PAUSA_MS);
+        return () => clearTimeout(espera);
+    }, [texto]);
+    return [texto, busqueda, setTexto];
+}

package/src/fotos/elegir.ts

@@ -0,0 +1,116 @@
+// Elegir un documento para subirlo, o preguntar de dónde (cámara, galería o documento). Contesta lo
+// elegido ya listo para el `FormData`; qué se hace con él es de quien llama. La cámara y la
+// galería solas están en `camara/`, que no pide expo-document-picker.
+import * as DocumentPicker from "expo-document-picker";
+import { File } from "expo-file-system";
+import {
+    elegirDeGaleria,
+    tomarFoto,
+    type ArchivoElegido,
+    type PermisoDeCamara,
+} from "../camara/elegir";
+import { reducirImagenAdjunta } from "../camara/reducir";
+import { avisar, mostrarDialogo } from "../dialogos/dialogos";
+
+/** El tope de un archivo en el servidor (`ConArchivoSubido.TAMANO_MAXIMO`): 25 MB. */
+export const TAMANO_MAXIMO_BYTES = 25 * 1024 * 1024;
+
+/**
+ * Lo que el servidor acepta de un adjunto (`core/shared/serializers.py`): PDF, imágenes y hojas de
+ * cálculo. Lo demás ni se ofrece en el selector.
+ */
+export const TIPOS_DE_ADJUNTO = [
+    "application/pdf",
+    "image/*",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/vnd.ms-excel",
+    "text/csv",
+];
+
+/**
+ * Documentos (un PDF, una foto ya escaneada). Uno más pesado que el tope del servidor se rechaza al
+ * subirlo, así que se avisa aquí y se deja fuera. Una imagen adjuntada como archivo también se
+ * reduce, igual que una de la cámara.
+ */
+export async function elegirDocumentos({
+    tipos = TIPOS_DE_ADJUNTO,
+    varias = false,
+    tamanoMaximo = TAMANO_MAXIMO_BYTES,
+}: { tipos?: string[]; varias?: boolean; tamanoMaximo?: number } = {}): Promise<ArchivoElegido[]> {
+    const resultado = await DocumentPicker.getDocumentAsync({
+        type: tipos,
+        multiple: varias,
+        copyToCacheDirectory: true,
+    });
+    if (resultado.canceled) return [];
+    const elegidos: ArchivoElegido[] = [];
+    for (const doc of resultado.assets) {
+        const pesa = doc.size ?? new File(doc.uri).size;
+        if (pesa > tamanoMaximo) {
+            await avisar({
+                titulo: "Archivo demasiado pesado",
+                mensaje:
+                    `«${doc.name}» pesa ${(pesa / (1024 * 1024)).toFixed(1)} MB y el tope son ` +
+                    `${tamanoMaximo / (1024 * 1024)} MB. Elige uno más ligero o tómale una foto.`,
+                icono: "file-alert-outline",
+            });
+            continue;
+        }
+        const tipo = doc.mimeType ?? "application/octet-stream";
+        const esFoto = tipo.startsWith("image/");
+        const archivo = esFoto
+            ? await reducirImagenAdjunta({ uri: doc.uri, nombre: doc.name, tipo })
+            : { uri: doc.uri, nombre: doc.name, tipo };
+        elegidos.push({ ...archivo, esFoto });
+    }
+    return elegidos;
+}
+
+/**
+ * Pregunta de dónde (cámara, galería o un documento) y elige uno. Contesta `null` si se canceló en
+ * cualquier paso o el archivo no se puede subir (y ya se dijo por qué).
+ */
+export async function elegirAdjunto({
+    titulo = "Subir un archivo",
+    permiso,
+    tipos,
+}: {
+    titulo?: string;
+    permiso: PermisoDeCamara;
+    tipos?: string[];
+}): Promise<ArchivoElegido | null> {
+    const origen = await mostrarDialogo<"camara" | "galeria" | "documento" | null>({
+        titulo,
+        icono: "paperclip",
+        botones: [
+            {
+                texto: "Tomar una foto",
+                icono: "camera-outline",
+                estilo: "principal",
+                valor: "camara",
+            },
+            {
+                texto: "De la galería",
+                icono: "image-outline",
+                estilo: "secundario",
+                valor: "galeria",
+            },
+            {
+                texto: "Un documento",
+                icono: "file-document-outline",
+                estilo: "secundario",
+                valor: "documento",
+            },
+            { texto: "Cancelar", estilo: "cancelar", valor: null },
+        ],
+    });
+    const elegidos =
+        origen === "camara"
+            ? await tomarFoto(permiso)
+            : origen === "galeria"
+              ? await elegirDeGaleria()
+              : origen === "documento"
+                ? await elegirDocumentos({ tipos })
+                : [];
+    return elegidos[0] ?? null;
+}

package/src/fotos/index.ts

@@ -0,0 +1,6 @@
+// `@acvl/mobile-components/fotos`: tomar y elegir fotos y archivos. Va aparte de la entrada
+// principal porque usa expo-image-picker, expo-image-manipulator, expo-document-picker y
+// expo-file-system, que sólo instala la app que sube archivos. Lo de la cámara sola (sin
+// documentos) está también en `camara`.
+export * from "../camara";
+export { elegirAdjunto, elegirDocumentos, TAMANO_MAXIMO_BYTES, TIPOS_DE_ADJUNTO } from "./elegir";

package/src/hoja/HojaDeLista.tsx

@@ -0,0 +1,214 @@
+import BottomSheet, {
+    BottomSheetBackdrop,
+    BottomSheetFlatList,
+    BottomSheetTextInput,
+    type BottomSheetBackdropProps,
+} from "@gorhom/bottom-sheet";
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, BackHandler, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import BotonGrande from "../componentes/BotonGrande";
+import { EnHoja } from "../componentes/Tarjeta";
+import { Buscador } from "../listas/piezas";
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+
+/** Lo alto de la hoja: arriba se sigue viendo un poco de la ficha, que dice dónde se está. */
+const ALTO = "85%";
+
+/** Lo que la hoja lee de la consulta de su lista, sea de páginas o de scroll infinito. */
+export interface ListaDeLaHoja<T> {
+    /** Lo cargado hasta ahora, de todas las páginas. */
+    renglones: T[];
+    /** Cuántos hay en total, si el servidor lo dice. */
+    total?: number | null;
+    /** La primera carga: todavía no hay nada que enseñar. */
+    cargando: boolean;
+    /** Falló y no hay nada que enseñar. */
+    fallo: boolean;
+    hayMas: boolean;
+    cargandoMas: boolean;
+    onMas: () => void;
+    onReintentar: () => void;
+}
+
+/**
+ * Una lista que sube desde abajo sobre una ficha: lo que cuelga de ella (las transferencias de un
+ * embarque, las facturas de un pedimento), **con su buscador, su scroll infinito y lo que se hace
+ * con ella** (agregar, quitar), sin salir de la ficha. Es la hermana de `HojaInferior` para cuando
+ * lo de adentro es una lista larga: aquélla mide su contenido y ésta tiene alto fijo, porque al
+ * buscar la lista crece y se encoge y la hoja no debe brincar.
+ *
+ * Los renglones son `RenglonDeHoja` o los de la lista de la app: una `Tarjeta` adentro ya va del
+ * color del fondo (`EnHoja`) para que se distinga de la hoja. Arriba de la lista, el buscador (si lo hay), `acciones` (los botones de la
+ * lista) y cuántos hay. Se cierra deslizándola, tocando el velo o con atrás.
+ *
+ * Sólo se monta abierta: quien la usa pide su consulta sólo entonces (`skip`).
+ */
+export default function HojaDeLista<T>({
+    abierta,
+    onCerrar,
+    titulo,
+    subtitulo,
+    buscador,
+    acciones,
+    lista,
+    llave,
+    renderItem,
+    vacio,
+    nombres,
+}: {
+    abierta: boolean;
+    onCerrar: () => void;
+    titulo: string;
+    subtitulo?: string | null;
+    buscador?: { texto: string; onCambiar: (texto: string) => void; placeholder: string };
+    /** Lo que se hace con la lista entera: «Agregar transferencias». */
+    acciones?: React.ReactNode;
+    lista: ListaDeLaHoja<T>;
+    llave: (item: T) => string | number;
+    renderItem: (item: T) => React.ReactElement;
+    /** Lo que se dice sin renglones: «Este embarque no trae transferencias». */
+    vacio: string;
+    /** Cómo se cuentan: `["transferencia", "transferencias"]` → «12 transferencias». */
+    nombres?: readonly [string, string];
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const hoja = useRef<BottomSheet>(null);
+    const insets = useSafeAreaInsets();
+
+    // **Sólo existe abierta.** Cerrada (`index={-1}`), gorhom la estaciona justo debajo de su
+    // contenedor, y en Android con la barra de navegación de borde a borde ese contenedor mide
+    // menos que la pantalla: la hoja se asomaba al pie de la ficha desde que se entraba. Se monta
+    // al abrir y se desmonta cuando termina de bajar (`onClose`), así cerrada no hay nada que se
+    // asome, y la lista y su consulta tampoco viven de más.
+    const [montada, setMontada] = useState(abierta);
+    useEffect(() => {
+        if (abierta) setMontada(true);
+        else hoja.current?.close();
+    }, [abierta]);
+
+    useEffect(() => {
+        if (!abierta) return;
+        const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+            onCerrar();
+            return true;
+        });
+        return () => sub.remove();
+    }, [abierta, onCerrar]);
+
+    const { renglones, total } = lista;
+
+    const cabecera = (
+        <View style={styles.cabecera}>
+            <View style={styles.titulos}>
+                <Text style={styles.titulo}>{titulo}</Text>
+                {subtitulo ? <Text style={styles.subtitulo}>{subtitulo}</Text> : null}
+            </View>
+            {buscador ? (
+                <Buscador
+                    texto={buscador.texto}
+                    onCambiar={buscador.onCambiar}
+                    placeholder={buscador.placeholder}
+                    entrada={BottomSheetTextInput}
+                    style={styles.buscador}
+                />
+            ) : null}
+            {acciones}
+            {nombres && total != null && renglones.length ? (
+                <Text style={styles.cuenta}>
+                    {total === 1 ? `1 ${nombres[0]}` : `${total} ${nombres[1]}`}
+                </Text>
+            ) : null}
+        </View>
+    );
+
+    const sinRenglones = lista.cargando ? (
+        <ActivityIndicator color={c.primary} style={styles.espera} />
+    ) : lista.fallo ? (
+        <View style={styles.vacio}>
+            <Text style={styles.linea}>No se pudo cargar. Revisa tu señal.</Text>
+            <BotonGrande icono="refresh" modo="contorno" onPress={lista.onReintentar}>
+                Reintentar
+            </BotonGrande>
+        </View>
+    ) : (
+        <Text style={[styles.linea, styles.vacio]}>{vacio}</Text>
+    );
+
+    if (!montada) return null;
+
+    return (
+        <BottomSheet
+            ref={hoja}
+            index={0}
+            animateOnMount
+            snapPoints={[ALTO]}
+            enableDynamicSizing={false}
+            enablePanDownToClose
+            onClose={() => {
+                setMontada(false);
+                onCerrar();
+            }}
+            // Con el teclado, la hoja sube a lo que quede de pantalla en vez de quedar tapada.
+            keyboardBehavior="extend"
+            keyboardBlurBehavior="restore"
+            android_keyboardInputMode="adjustResize"
+            backdropComponent={(props: BottomSheetBackdropProps) => (
+                <BottomSheetBackdrop
+                    {...props}
+                    appearsOnIndex={0}
+                    disappearsOnIndex={-1}
+                    pressBehavior="close"
+                />
+            )}
+            backgroundStyle={styles.fondo}
+            handleIndicatorStyle={styles.agarradera}
+        >
+            <EnHoja.Provider value>
+                <BottomSheetFlatList
+                    data={renglones}
+                    keyExtractor={(item: T) => String(llave(item))}
+                    renderItem={({ item }: { item: T }) => renderItem(item)}
+                    ListHeaderComponent={cabecera}
+                    ListEmptyComponent={sinRenglones}
+                    ListFooterComponent={
+                        lista.cargandoMas ? (
+                            <ActivityIndicator color={c.primary} style={styles.espera} />
+                        ) : null
+                    }
+                    onEndReachedThreshold={0.5}
+                    onEndReached={() => {
+                        if (lista.hayMas && !lista.cargandoMas) lista.onMas();
+                    }}
+                    keyboardShouldPersistTaps="handled"
+                    contentContainerStyle={[
+                        styles.contenido,
+                        { paddingBottom: insets.bottom + 24 },
+                    ]}
+                />
+            </EnHoja.Provider>
+        </BottomSheet>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    fondo: {
+        backgroundColor: c.superficie,
+        borderWidth: c.esOscuro ? 1 : 0,
+        borderColor: c.secondaryLighter,
+    },
+    agarradera: { backgroundColor: c.secondaryLight },
+    contenido: { paddingHorizontal: 20, gap: 10 },
+    cabecera: { gap: 12, paddingBottom: 2 },
+    titulos: { gap: 2 },
+    titulo: { ...renglon(tipografia.titulo), fontWeight: "900", color: c.texto },
+    subtitulo: { ...renglon(tipografia.secundario), color: c.secondary },
+    // Sobre la hoja (superficie), el buscador va del color del fondo para que se vea su caja.
+    buscador: { backgroundColor: c.fondo },
+    cuenta: { ...renglon(tipografia.secundario), color: c.secondary },
+    linea: { ...renglon(tipografia.secundario), color: c.secondary },
+    vacio: { gap: 12, paddingVertical: 16 },
+    espera: { marginVertical: 16 },
+}));

package/src/hoja/HojaInferior.tsx

@@ -0,0 +1,103 @@
+import { crearEstilos, renglon, tipografia } from "../tema";
+import { EnHoja } from "../componentes/Tarjeta";
+import { Text } from "../texto";
+import BottomSheet, {
+    BottomSheetBackdrop,
+    BottomSheetScrollView,
+    type BottomSheetBackdropProps,
+} from "@gorhom/bottom-sheet";
+import React, { useEffect, useRef } from "react";
+import { BackHandler, useWindowDimensions, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/** Lo más que sube: arriba se sigue viendo un poco de la ficha, que dice dónde se está. */
+const ALTO_MAXIMO = 0.85;
+
+/**
+ * Una hoja que sube desde abajo sobre una ficha, para lo que se consulta y se cierra sin salir
+ * de ella: los hitos de un tramo, las excepciones, las comisiones. **Mide lo que
+ * su contenido**, hasta `ALTO_MAXIMO` de la pantalla; lo demás se recorre adentro.
+ *
+ * Se cierra deslizándola, tocando el velo de atrás o con atrás. Va **dentro de la pantalla** (no
+ * es un modal): en una ficha empujada no hay barra de pestañas que librar. Donde sí la hay (un
+ * mapa en una pestaña), la hoja es de la app.
+ *
+ * Está en `@acvl/mobile-components/hoja` y no en la entrada principal: usa `@gorhom/bottom-sheet`,
+ * que sólo instala la app que la usa.
+ */
+export default function HojaInferior({
+    abierta,
+    onCerrar,
+    titulo,
+    subtitulo,
+    children,
+}: {
+    abierta: boolean;
+    onCerrar: () => void;
+    titulo: string;
+    subtitulo?: string | null;
+    children: React.ReactNode;
+}) {
+    const styles = useStyles();
+    const hoja = useRef<BottomSheet>(null);
+    const insets = useSafeAreaInsets();
+    const { height } = useWindowDimensions();
+
+    useEffect(() => {
+        if (abierta) hoja.current?.snapToIndex(0);
+        else hoja.current?.close();
+    }, [abierta]);
+
+    useEffect(() => {
+        if (!abierta) return;
+        const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+            onCerrar();
+            return true;
+        });
+        return () => sub.remove();
+    }, [abierta, onCerrar]);
+
+    return (
+        <BottomSheet
+            ref={hoja}
+            index={-1}
+            enableDynamicSizing
+            maxDynamicContentSize={height * ALTO_MAXIMO}
+            enablePanDownToClose
+            onClose={onCerrar}
+            backdropComponent={(props: BottomSheetBackdropProps) => (
+                <BottomSheetBackdrop
+                    {...props}
+                    appearsOnIndex={0}
+                    disappearsOnIndex={-1}
+                    pressBehavior="close"
+                />
+            )}
+            backgroundStyle={styles.fondo}
+            handleIndicatorStyle={styles.agarradera}
+        >
+            <BottomSheetScrollView
+                contentContainerStyle={[styles.contenido, { paddingBottom: insets.bottom + 24 }]}
+            >
+                <View style={styles.cabecera}>
+                    <Text style={styles.titulo}>{titulo}</Text>
+                    {subtitulo ? <Text style={styles.subtitulo}>{subtitulo}</Text> : null}
+                </View>
+                <EnHoja.Provider value>{abierta ? children : null}</EnHoja.Provider>
+            </BottomSheetScrollView>
+        </BottomSheet>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    fondo: {
+        backgroundColor: c.superficie,
+        borderWidth: c.esOscuro ? 1 : 0,
+        borderColor: c.secondaryLighter,
+    },
+    agarradera: { backgroundColor: c.secondaryLight },
+    contenido: { paddingHorizontal: 20, gap: 12 },
+    cabecera: { gap: 2 },
+    titulo: { ...renglon(tipografia.titulo), fontWeight: "900", color: c.texto },
+    subtitulo: { ...renglon(tipografia.secundario), color: c.secondary },
+}));

package/src/hoja/index.ts

@@ -0,0 +1,5 @@
+// `@acvl/mobile-components/hoja`: lo que sube desde abajo sobre una ficha. Va aparte de la entrada
+// principal porque usa `@gorhom/bottom-sheet`, que sólo instala la app que la usa.
+export { default as HojaDeLista, type ListaDeLaHoja } from "./HojaDeLista";
+export { default as HojaInferior } from "./HojaInferior";
+export { useMasDeLaFicha, type ListaDeLaFicha } from "./useMasDeLaFicha";