@acvl/mobile-components 0.0.0-stage → 0.0.1

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,194 @@
+// Elegir una foto o un archivo para subirlo: de la cámara, de la galería o un documento. Contesta lo
+// elegido ya listo para el `FormData` (las fotos reducidas a 1920 px); qué se hace con él —subirlo
+// en el momento, guardarlo para una cola— es de quien llama.
+import * as DocumentPicker from "expo-document-picker";
+import { File } from "expo-file-system";
+import * as ImagePicker from "expo-image-picker";
+import { avisar, mostrarDialogo } from "../dialogos/dialogos";
+import { reducirFoto, reducirImagenAdjunta } from "./reducir";
+
+/** Lo elegido: dónde está en el teléfono, su nombre, su tipo y si es una foto. */
+export interface ArchivoElegido {
+    uri: string;
+    nombre: string;
+    tipo: string;
+    esFoto: boolean;
+}
+
+/** 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",
+];
+
+/** Para qué se pide la cámara, dicho a quien la usa. */
+export interface PermisoDeCamara {
+    /** «tomar las fotos de evidencia»: va en «Para …, activa la cámara en los ajustes». */
+    para: string;
+    /**
+     * Lo que se explica antes del diálogo del sistema la primera vez: por qué y cuándo se usa. Sin
+     * esto, va directo al del sistema.
+     */
+    explicacion?: string;
+}
+
+/**
+ * El permiso de la cámara. Si ya se negó para siempre, se dice dónde activarlo; si nunca se ha
+ * pedido, primero la explicación de la app (si hay) y luego el diálogo del sistema.
+ */
+export async function pedirPermisoDeCamara({
+    para,
+    explicacion,
+}: PermisoDeCamara): Promise<boolean> {
+    const actual = await ImagePicker.getCameraPermissionsAsync();
+    if (actual.granted) return true;
+    if (!actual.canAskAgain) {
+        await avisar({
+            titulo: "Sin permiso de cámara",
+            mensaje: `Para ${para}, activa la cámara para la app en los ajustes del teléfono.`,
+            icono: "camera-off-outline",
+        });
+        return false;
+    }
+    if (explicacion) {
+        await avisar({
+            titulo: "La cámara",
+            mensaje: explicacion,
+            icono: "camera-outline",
+            cancelable: false,
+        });
+    }
+    return (await ImagePicker.requestCameraPermissionsAsync()).granted;
+}
+
+/** Las imágenes elegidas, reducidas a 1920 px en JPEG (`reducirFoto`). */
+async function deFotos(assets: ImagePicker.ImagePickerAsset[]): Promise<ArchivoElegido[]> {
+    const elegidos: ArchivoElegido[] = [];
+    for (const asset of assets) {
+        const reducida = await reducirFoto(asset);
+        elegidos.push({
+            uri: reducida.uri,
+            nombre: reducida.fileName ?? "foto.jpg",
+            tipo: reducida.mimeType ?? "image/jpeg",
+            esFoto: true,
+        });
+    }
+    return elegidos;
+}
+
+/** Una foto con la cámara, con su permiso. Vacío si no hubo permiso o se canceló. */
+export async function tomarFoto(permiso: PermisoDeCamara): Promise<ArchivoElegido[]> {
+    if (!(await pedirPermisoDeCamara(permiso))) return [];
+    const resultado = await ImagePicker.launchCameraAsync({ mediaTypes: ["images"], quality: 1 });
+    return resultado.canceled ? [] : deFotos(resultado.assets);
+}
+
+/**
+ * De la galería. En Android el selector de fotos del sistema no pide permiso de almacenamiento,
+ * así que no hay explicación previa que dar.
+ */
+export async function elegirDeGaleria({ varias = false } = {}): Promise<ArchivoElegido[]> {
+    const resultado = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ["images"],
+        allowsMultipleSelection: varias,
+        quality: 1,
+    });
+    return resultado.canceled ? [] : deFotos(resultado.assets);
+}
+
+/**
+ * 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,15 @@
+// `@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 fotos.
+export {
+    elegirAdjunto,
+    elegirDeGaleria,
+    elegirDocumentos,
+    pedirPermisoDeCamara,
+    TAMANO_MAXIMO_BYTES,
+    TIPOS_DE_ADJUNTO,
+    tomarFoto,
+    type ArchivoElegido,
+    type PermisoDeCamara,
+} from "./elegir";
+export { LADO_MAXIMO, reducirFoto, reducirImagenAdjunta } from "./reducir";

package/src/fotos/reducir.ts

@@ -0,0 +1,87 @@
+// Achicar las fotos en el teléfono antes de subirlas.
+import { ImageManipulator, SaveFormat } from "expo-image-manipulator";
+import type { ImagePickerAsset } from "expo-image-picker";
+import { Image } from "react-native";
+
+/**
+ * Lado más largo con el que se sube una foto. Es el mismo con el que el backend la guarda
+ * (`MAX_DIMENSION` en `core/shared/fields.py`): arriba de eso los píxeles viajan para que el
+ * servidor los tire.
+ */
+export const LADO_MAXIMO = 1920;
+
+/** Calidad JPEG de la copia reducida; el backend recodifica a 82 al guardarla. */
+const CALIDAD = 0.8;
+
+/**
+ * La foto con su lado más largo en `LADO_MAXIMO` y codificada en JPEG.
+ *
+ * Una foto de la cámara (12 MP o más) pesa de 2 a 5 MB, y se sube con la señal que haya en el
+ * camino o en el patio: reducida pesa unos cientos de KB, sale antes y no se pasa del tope
+ * de tamaño del servidor. El servidor no pierde nada, porque de todos modos la guarda a 1920 px.
+ *
+ * Falla en blando: si no se puede reducir, se guarda la original —pesa más, pero es mejor que
+ * perder la foto que se acaba de tomar—.
+ */
+export async function reducirFoto(asset: ImagePickerAsset): Promise<ImagePickerAsset> {
+    const { width, height } = asset;
+    const cabe = width > 0 && height > 0 && Math.max(width, height) <= LADO_MAXIMO;
+    if (cabe && asset.mimeType === "image/jpeg") return asset;
+
+    try {
+        const contexto = ImageManipulator.manipulate(asset.uri);
+        if (!cabe) {
+            // Se da un solo lado y el otro sale de la proporción.
+            contexto.resize(width >= height ? { width: LADO_MAXIMO } : { height: LADO_MAXIMO });
+        }
+        const imagen = await contexto.renderAsync();
+        const reducida = await imagen.saveAsync({ compress: CALIDAD, format: SaveFormat.JPEG });
+
+        const base = (asset.fileName ?? reducida.uri.split("/").pop() ?? "foto").replace(
+            /\.[^.]+$/,
+            "",
+        );
+        return {
+            ...asset,
+            uri: reducida.uri,
+            width: reducida.width,
+            height: reducida.height,
+            fileName: `${base}.jpg`,
+            mimeType: "image/jpeg",
+            fileSize: undefined,
+        };
+    } catch (error) {
+        console.warn("No se pudo reducir la foto; se sube la original.", error);
+        return asset;
+    }
+}
+
+/**
+ * Lo mismo para una imagen adjuntada como archivo (`DocumentPicker`), que no trae sus medidas: se
+ * leen del archivo y se reduce como una foto. Si no se pueden leer, se guarda la original.
+ */
+export async function reducirImagenAdjunta(archivo: {
+    uri: string;
+    nombre: string;
+    tipo: string;
+}): Promise<{ uri: string; nombre: string; tipo: string }> {
+    try {
+        const { width, height } = await Image.getSize(archivo.uri);
+        const reducida = await reducirFoto({
+            uri: archivo.uri,
+            width,
+            height,
+            fileName: archivo.nombre,
+            mimeType: archivo.tipo,
+            type: "image",
+        });
+        return {
+            uri: reducida.uri,
+            nombre: reducida.fileName ?? archivo.nombre,
+            tipo: reducida.mimeType ?? archivo.tipo,
+        };
+    } catch (error) {
+        console.warn("No se pudieron leer las medidas de la imagen; se sube la original.", error);
+        return archivo;
+    }
+}

package/src/hoja/HojaInferior.tsx

@@ -0,0 +1,102 @@
+import { crearEstilos, renglon, tipografia } from "../tema";
+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>
+                {abierta ? children : null}
+            </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,4 @@
+// `@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 HojaInferior } from "./HojaInferior";
+export { useMasDeLaFicha, type ListaDeLaFicha } from "./useMasDeLaFicha";

package/src/hoja/useMasDeLaFicha.tsx

@@ -0,0 +1,63 @@
+import HojaInferior from "./HojaInferior";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { FilaConContador, SeccionDeFicha } from "../listas/piezas";
+
+/** Una lista de «Más»: su renglón con contador y lo que abre en la hoja. */
+export interface ListaDeLaFicha {
+    clave: string;
+    titulo: string;
+    icono: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+    /** `null` mientras se cuenta. */
+    cuantos: number | null;
+    /** Lo que acompaña al número: «2 vencidas», «1 pendiente». */
+    detalle?: string | null;
+    /** Lo que enseña la hoja; sólo se monta abierta. */
+    contenido: React.ReactNode;
+}
+
+/**
+ * «Más» de una ficha (un tracto, un cliente): lo que cuelga de ella, un renglón con cuántos hay
+ * que abre su hoja desde abajo (`HojaInferior`). Devuelve la sección (`seccion`, dentro del
+ * scroll) y la hoja (`hoja`, encima de la ficha, en `PantallaDeFicha.encima`).
+ *
+ * Quien llama pasa sólo las listas que se ven (cada una con su permiso); sin ninguna, la sección
+ * no se pinta.
+ */
+export function useMasDeLaFicha(listas: ListaDeLaFicha[], subtitulo?: string) {
+    // Lo que enseña se queda al cerrarla, para que su título no se vacíe mientras baja.
+    const [clave, setClave] = React.useState<string | null>(null);
+    const [abierta, setAbierta] = React.useState(false);
+    const cerrar = React.useCallback(() => setAbierta(false), []);
+    const elegida = listas.find((l) => l.clave === clave);
+
+    const seccion = listas.length ? (
+        <SeccionDeFicha titulo="Más">
+            {listas.map((l) => (
+                <FilaConContador
+                    key={l.clave}
+                    icono={l.icono}
+                    etiqueta={l.titulo}
+                    cuantos={l.cuantos}
+                    detalle={l.detalle}
+                    onPress={() => {
+                        setClave(l.clave);
+                        setAbierta(true);
+                    }}
+                />
+            ))}
+        </SeccionDeFicha>
+    ) : null;
+
+    const hoja = (
+        <HojaInferior
+            abierta={abierta && Boolean(elegida)}
+            onCerrar={cerrar}
+            titulo={elegida?.titulo ?? ""}
+            subtitulo={subtitulo}
+        >
+            {abierta ? elegida?.contenido : null}
+        </HojaInferior>
+    );
+    return { seccion, hoja };
+}