@acvl/mobile-components 0.0.0-stage → 0.0.1

package/src/componentes/TiraDeFotos.tsx

@@ -0,0 +1,189 @@
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { crearEstilos, tipografia, usePaleta } from "../tema";
+import { Text } from "../texto";
+import Foto, { type FotoAVer } from "./Foto";
+import VisorDeFoto from "./VisorDeFoto";
+
+/** Una miniatura de la tira: qué se pinta, qué abre el visor y qué se puede hacer con ella. */
+export interface FotoDeLaTira {
+    llave: string;
+    /** Un archivo que no es foto (un PDF) se ve con su icono y no entra al visor. */
+    esFoto: boolean;
+    miniatura: FotoAVer;
+    /** La foto completa, si la miniatura es una previa chica del servidor. Por omisión, ésa. */
+    completa?: FotoAVer;
+    /** El nombre del archivo: se ve en un documento que no es foto. */
+    nombre?: string;
+    /** Una nube en la esquina: verde si ya está en el servidor, ámbar si sigue en el teléfono. */
+    marca?: "enviada" | "sinSubir";
+    /** Con esto lleva su «×» para quitarla. */
+    onQuitar?: () => void;
+    /** Con esto, el visor lleva «descargar» en ella. Rechaza si no se pudo. */
+    onDescargar?: () => Promise<void>;
+    /** Lo que dice el lector de pantalla, si no basta con «Ver la foto». */
+    etiqueta?: string;
+}
+
+interface Props {
+    fotos: FotoDeLaTira[];
+    /** El lado de cada miniatura. */
+    lado: number;
+    /** En cuadrícula (una hoja, donde hay lugar) o en un renglón que se desliza a los lados. */
+    cuadricula?: boolean;
+}
+
+/**
+ * Unas fotos en miniatura; tocar una abre el visor en ésa y se desliza entre las demás, **en el
+ * mismo orden** que las miniaturas. Quien la usa arma las piezas con lo suyo (lo del servidor
+ * primero y lo del teléfono después, por ejemplo) y les pone su marca y sus acciones.
+ */
+const TiraDeFotos = ({ fotos: piezas, lado, cuadricula = false }: Props) => {
+    const styles = useStyles();
+    const [viendo, setViendo] = React.useState<number | null>(null);
+    if (piezas.length === 0) return null;
+
+    const fotos = piezas.filter((p) => p.esFoto);
+    const carrusel = fotos.map((p) => p.completa ?? p.miniatura);
+    const descargables = fotos.some((p) => p.onDescargar);
+    const tamano = { width: lado, height: lado };
+
+    const miniaturas = piezas.map((p) => (
+        <View key={p.llave}>
+            <Pressable
+                disabled={!p.esFoto}
+                onPress={() => setViendo(fotos.indexOf(p))}
+                accessibilityRole={p.esFoto ? "imagebutton" : undefined}
+                accessibilityLabel={
+                    p.etiqueta ?? (p.esFoto ? "Ver la foto" : `Archivo ${p.nombre ?? ""}`.trim())
+                }
+            >
+                {p.esFoto ? (
+                    <Foto
+                        foto={p.miniatura}
+                        style={[styles.miniatura, tamano]}
+                        resizeMethod="resize"
+                    />
+                ) : (
+                    <Documento lado={lado} nombre={p.nombre} />
+                )}
+                {p.marca === "enviada" ? (
+                    <View style={[styles.marca, styles.marcaEnviada]}>
+                        <MaterialCommunityIcons name="cloud-check" size={16} color="#fff" />
+                    </View>
+                ) : null}
+                {p.marca === "sinSubir" ? (
+                    <View style={[styles.marca, styles.marcaSinSubir]}>
+                        <MaterialCommunityIcons name="cloud-clock-outline" size={16} color="#fff" />
+                    </View>
+                ) : null}
+            </Pressable>
+            {p.onQuitar ? (
+                <Pressable
+                    onPress={p.onQuitar}
+                    hitSlop={10}
+                    accessibilityRole="button"
+                    accessibilityLabel={p.esFoto ? "Quitar esta foto" : "Quitar este archivo"}
+                    style={styles.quitar}
+                >
+                    <MaterialCommunityIcons name="close" size={24} color="#fff" />
+                </Pressable>
+            ) : null}
+        </View>
+    ));
+
+    return (
+        <>
+            {cuadricula ? (
+                <View style={styles.cuadricula}>{miniaturas}</View>
+            ) : (
+                // Un solo renglón que se desliza: con varias fotos no se parte en filas.
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerStyle={styles.renglon}
+                >
+                    {miniaturas}
+                </ScrollView>
+            )}
+            <VisorDeFoto
+                fotos={carrusel}
+                inicio={viendo}
+                onCerrar={() => setViendo(null)}
+                onDescargar={
+                    descargables
+                        ? async (i) => {
+                              const descargar = fotos[i]?.onDescargar;
+                              if (!descargar) throw new Error("Esta foto no se puede descargar.");
+                              await descargar();
+                          }
+                        : undefined
+                }
+            />
+        </>
+    );
+};
+
+/** La miniatura de un archivo que no es foto (un PDF): un icono y, si cabe, su nombre. */
+function Documento({ lado, nombre }: { lado: number; nombre?: string }) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const conNombre = Boolean(nombre) && lado >= 100;
+    return (
+        <View style={[styles.miniatura, styles.documento, { width: lado, height: lado }]}>
+            <MaterialCommunityIcons
+                name="file-document-outline"
+                size={Math.round(lado * 0.3)}
+                color={c.secondary}
+            />
+            {conNombre ? (
+                // Dentro de un cuadro fijo: el nombre largo de un PDF tiene que cortarse.
+                <Text numberOfLines={2} style={styles.documentoNombre}>
+                    {nombre}
+                </Text>
+            ) : null}
+        </View>
+    );
+}
+
+// Las marcas y la «×» van encima de la foto: sus colores son fijos para leerse sobre cualquier foto.
+const useStyles = crearEstilos((c) => ({
+    renglon: { gap: 8 },
+    cuadricula: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
+    miniatura: { borderRadius: 10, backgroundColor: c.secondaryLighter },
+    documento: { alignItems: "center", justifyContent: "center", padding: 6, gap: 2 },
+    documentoNombre: {
+        fontSize: tipografia.etiqueta,
+        color: c.secondaryDark,
+        textAlign: "center",
+    },
+    marca: {
+        position: "absolute",
+        bottom: 4,
+        right: 4,
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    marcaEnviada: { backgroundColor: "#2e7d32" },
+    // La nube ámbar sobre una foto que sigue en el teléfono sin subir.
+    marcaSinSubir: { backgroundColor: "#b26a00" },
+    quitar: {
+        position: "absolute",
+        top: 6,
+        right: 6,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: c.primaryDark,
+        alignItems: "center",
+        justifyContent: "center",
+        borderWidth: 2,
+        borderColor: "#fff",
+    },
+}));
+
+export default TiraDeFotos;

package/src/componentes/VisorDeFoto.tsx

@@ -0,0 +1,181 @@
+import { renglon, tipografia } from "../tema";
+import { Text } from "../texto";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import {
+    ActivityIndicator,
+    FlatList,
+    Modal,
+    Pressable,
+    StyleSheet,
+    useWindowDimensions,
+    View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Foto, { type FotoAVer } from "./Foto";
+
+export type { FotoAVer };
+
+interface Props {
+    /** Las fotos, en el orden de sus miniaturas. Los archivos que no son foto no entran. */
+    fotos: FotoAVer[];
+    /** La que se tocó; `null` cierra el visor. */
+    inicio: number | null;
+    onCerrar: () => void;
+    /**
+     * Con esto, la barra lleva «descargar» para la foto que se ve.
+     * Recibe su lugar en `fotos`; rechaza si no se pudo.
+     */
+    onDescargar?: (indice: number) => Promise<void>;
+}
+
+/** Cómo va la descarga de la foto que se ve: el icono de la barra lo dice. */
+type Descarga = "nada" | "bajando" | "lista" | "fallo";
+const ICONO_DE_DESCARGA = {
+    nada: "download",
+    lista: "check",
+    fallo: "alert-circle-outline",
+} as const;
+
+const llave = (foto: FotoAVer, i: number) => ("ruta" in foto ? foto.ruta : foto.uri) + i;
+
+/**
+ * Unas fotos a pantalla completa, sobre fondo negro: se abre en la que se tocó y se pasa a la
+ * siguiente o la anterior deslizando a los lados, con «2 de 4» arriba. Mezcla las subidas y las del
+ * teléfono. Se cierra con la X o con atrás. Lo abre `TiraDeFotos`.
+ */
+const VisorDeFoto = ({ fotos, inicio, onCerrar, onDescargar }: Props) => (
+    <Modal
+        visible={inicio !== null}
+        transparent
+        animationType="fade"
+        statusBarTranslucent
+        onRequestClose={onCerrar}
+    >
+        {/* Con `key`, cada apertura nace en la foto que se tocó. */}
+        {inicio !== null ? (
+            <Carrusel
+                key={inicio}
+                fotos={fotos}
+                inicio={inicio}
+                onCerrar={onCerrar}
+                onDescargar={onDescargar}
+            />
+        ) : null}
+    </Modal>
+);
+
+function Carrusel({
+    fotos,
+    inicio,
+    onCerrar,
+    onDescargar,
+}: {
+    fotos: FotoAVer[];
+    inicio: number;
+    onCerrar: () => void;
+    onDescargar?: (indice: number) => Promise<void>;
+}) {
+    const insets = useSafeAreaInsets();
+    const { width, height } = useWindowDimensions();
+    const primera = Math.min(inicio, Math.max(0, fotos.length - 1));
+    const [actual, setActual] = React.useState(primera);
+    const [descarga, setDescarga] = React.useState<Descarga>("nada");
+
+    // Lo que dice el icono es de la foto en la que estaba: al pasar a otra, vuelve a «descargar».
+    const pasarA = (indice: number) => {
+        if (indice !== actual) setDescarga("nada");
+        setActual(indice);
+    };
+
+    const descargar = async () => {
+        if (!onDescargar || descarga === "bajando") return;
+        setDescarga("bajando");
+        try {
+            await onDescargar(actual);
+            setDescarga("lista");
+        } catch {
+            setDescarga("fallo");
+        }
+    };
+
+    return (
+        <View style={styles.fondo}>
+            <FlatList
+                data={fotos}
+                keyExtractor={llave}
+                horizontal
+                pagingEnabled
+                showsHorizontalScrollIndicator={false}
+                initialScrollIndex={primera}
+                getItemLayout={(_, i) => ({ length: width, offset: width * i, index: i })}
+                onMomentumScrollEnd={(e) =>
+                    pasarA(Math.round(e.nativeEvent.contentOffset.x / width))
+                }
+                renderItem={({ item }) => (
+                    <View style={{ width, height }}>
+                        <Foto foto={item} style={styles.foto} resizeMode="contain" />
+                    </View>
+                )}
+            />
+
+            <View style={[styles.barra, { top: insets.top + 12 }]}>
+                {fotos.length > 1 ? (
+                    <Text style={styles.cuenta}>
+                        {actual + 1} de {fotos.length}
+                    </Text>
+                ) : (
+                    <View />
+                )}
+                <View style={styles.botones}>
+                    {onDescargar ? (
+                        <Pressable
+                            onPress={descargar}
+                            hitSlop={12}
+                            accessibilityRole="button"
+                            accessibilityLabel={
+                                descarga === "lista"
+                                    ? "Guardada en la galería"
+                                    : descarga === "fallo"
+                                      ? "No se pudo guardar; intentar de nuevo"
+                                      : "Guardar en la galería"
+                            }
+                            accessibilityState={{ busy: descarga === "bajando" }}
+                        >
+                            {descarga === "bajando" ? (
+                                <ActivityIndicator size={32} color="#fff" />
+                            ) : (
+                                <MaterialCommunityIcons
+                                    name={ICONO_DE_DESCARGA[descarga]}
+                                    size={32}
+                                    color="#fff"
+                                />
+                            )}
+                        </Pressable>
+                    ) : null}
+                    <Pressable onPress={onCerrar} hitSlop={12} accessibilityLabel="Cerrar">
+                        <MaterialCommunityIcons name="close" size={32} color="#fff" />
+                    </Pressable>
+                </View>
+            </View>
+        </View>
+    );
+}
+
+// Sobre la foto: negro con texto blanco, en claro y en oscuro.
+const styles = StyleSheet.create({
+    fondo: { flex: 1, backgroundColor: "rgba(0,0,0,0.95)" },
+    foto: { width: "100%", height: "100%" },
+    barra: {
+        position: "absolute",
+        left: 16,
+        right: 16,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    botones: { flexDirection: "row", alignItems: "center", gap: 28 },
+    cuenta: { ...renglon(tipografia.cuerpo), color: "#fff", fontWeight: "800" },
+});
+
+export default VisorDeFoto;

package/src/dialogos/HostDeDialogos.tsx

@@ -0,0 +1,172 @@
+import { crearEstilos, renglon, tipografia, usePaleta } from "../tema";
+import BotonGrande from "../componentes/BotonGrande";
+import { Text } from "../texto";
+import {
+    dialogoActual,
+    responderDialogo,
+    suscribirDialogos,
+    type BotonDeDialogo,
+} from "./dialogos";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { Modal, Pressable, ScrollView, useWindowDimensions, View } from "react-native";
+
+/**
+ * Pinta los diálogos que abre `mostrarDialogo` (`dialogos.ts`), de uno en uno. Se monta una
+ * sola vez, en el layout raíz de la app.
+ *
+ * Es el diálogo de la casa —el `ConfirmDialog` de las revisiones de wms— con la letra grande de las apps:
+ * una tarjeta blanca sobre fondo oscuro, el icono arriba, título y mensaje sin recortar, y los
+ * botones **apilados a lo ancho**: lado a lado no caben con la letra al 180%. «Cancelar» va como
+ * texto discreto al pie. Atrás y el toque fuera cierran como cancelar, salvo que el diálogo diga
+ * que no es cancelable.
+ */
+const HostDeDialogos = () => {
+    const c = usePaleta();
+    const styles = useStyles();
+    const dialogo = React.useSyncExternalStore(suscribirDialogos, dialogoActual);
+    const { height } = useWindowDimensions();
+
+    if (!dialogo) return null;
+
+    const cancelable = dialogo.cancelable ?? true;
+    const cerrar = () => {
+        if (cancelable) responderDialogo(dialogo, undefined);
+    };
+    const acciones = dialogo.botones.filter((b) => b.estilo !== "cancelar");
+    const cancelar = dialogo.botones.find((b) => b.estilo === "cancelar");
+
+    return (
+        <Modal
+            visible
+            transparent
+            animationType="fade"
+            statusBarTranslucent
+            navigationBarTranslucent
+            onRequestClose={cerrar}
+        >
+            <Pressable style={styles.fondo} onPress={cerrar} accessibilityLabel="Cerrar">
+                {/* El `Pressable` vacío de la tarjeta se queda con el toque: tocar adentro no cierra. */}
+                <Pressable
+                    style={[styles.tarjeta, { maxHeight: height * 0.85 }]}
+                    onPress={() => {}}
+                >
+                    <ScrollView
+                        contentContainerStyle={styles.contenido}
+                        showsVerticalScrollIndicator={false}
+                    >
+                        {dialogo.icono ? (
+                            <View style={styles.icono}>
+                                <MaterialCommunityIcons
+                                    name={dialogo.icono}
+                                    size={34}
+                                    color={c.primary}
+                                />
+                            </View>
+                        ) : null}
+                        <Text style={styles.titulo}>{dialogo.titulo}</Text>
+                        {dialogo.mensaje ? (
+                            <Text style={styles.mensaje}>{dialogo.mensaje}</Text>
+                        ) : null}
+
+                        <View style={styles.botones}>
+                            {acciones.map((boton, i) => (
+                                <Boton
+                                    key={`${boton.texto}-${i}`}
+                                    boton={boton}
+                                    onPress={() => responderDialogo(dialogo, boton.valor)}
+                                />
+                            ))}
+                            {cancelar ? (
+                                <Pressable
+                                    onPress={() => responderDialogo(dialogo, cancelar.valor)}
+                                    hitSlop={8}
+                                    accessibilityRole="button"
+                                    style={({ pressed }) => [
+                                        styles.cancelar,
+                                        pressed && { opacity: 0.6 },
+                                    ]}
+                                >
+                                    <Text style={styles.cancelarTexto}>{cancelar.texto}</Text>
+                                </Pressable>
+                            ) : null}
+                        </View>
+                    </ScrollView>
+                </Pressable>
+            </Pressable>
+        </Modal>
+    );
+};
+
+function Boton({ boton, onPress }: { boton: BotonDeDialogo<unknown>; onPress: () => void }) {
+    const estilo = boton.estilo ?? "principal";
+    return (
+        <BotonGrande
+            icono={boton.icono}
+            modo={
+                estilo === "secundario"
+                    ? "contorno"
+                    : estilo === "destructivo"
+                      ? "destructivo"
+                      : "relleno"
+            }
+            onPress={onPress}
+        >
+            {boton.texto}
+        </BotonGrande>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    fondo: {
+        flex: 1,
+        backgroundColor: c.velo,
+        justifyContent: "center",
+        padding: 20,
+    },
+    tarjeta: {
+        width: "100%",
+        maxWidth: 480,
+        alignSelf: "center",
+        backgroundColor: c.superficie,
+        borderRadius: 20,
+        overflow: "hidden",
+        elevation: 12,
+        shadowColor: c.sombra,
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.25,
+        shadowRadius: 24,
+    },
+    contenido: { padding: 22, gap: 10 },
+    icono: {
+        alignSelf: "center",
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        backgroundColor: c.primaryWash,
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: 4,
+    },
+    titulo: {
+        ...renglon(tipografia.titulo),
+        fontWeight: "900",
+        color: c.texto,
+        textAlign: "center",
+    },
+    mensaje: {
+        ...renglon(tipografia.cuerpo),
+        color: c.secondaryDark,
+        textAlign: "center",
+    },
+    botones: { gap: 10, marginTop: 12 },
+    cancelar: { alignSelf: "center", paddingVertical: 12, paddingHorizontal: 20 },
+    cancelarTexto: {
+        ...renglon(tipografia.cuerpo),
+        fontWeight: "700",
+        color: c.secondary,
+        textAlign: "center",
+    },
+}));
+
+export default HostDeDialogos;

package/src/dialogos/dialogos.ts

@@ -0,0 +1,148 @@
+// Los diálogos de las apps, con su diseño y no el `Alert` del sistema. Esto es la API: la abren las
+// pantallas y también código que no es componente (una cola de envíos, la ubicación, la
+// navegación). Los pinta `HostDeDialogos`, montado una vez en el layout raíz.
+import type MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import type React from "react";
+
+type NombreDeIcono = React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+
+/**
+ * - `principal`: la acción esperada, en rojo.
+ * - `secundario`: otra opción válida, en contorno.
+ * - `destructivo`: borra o deshace algo (Deshacer, Descartar, Cerrar sesión), en rojo oscuro.
+ * - `cancelar`: no hacer nada, como texto discreto al pie.
+ */
+export type EstiloDeBoton = "principal" | "secundario" | "destructivo" | "cancelar";
+
+export interface BotonDeDialogo<V> {
+    texto: string;
+    estilo?: EstiloDeBoton;
+    icono?: NombreDeIcono;
+    /** Lo que resuelve la promesa de `mostrarDialogo` al tocarlo. */
+    valor: V;
+}
+
+export interface Dialogo<V> {
+    titulo: string;
+    mensaje?: string;
+    icono?: NombreDeIcono;
+    botones: BotonDeDialogo<V>[];
+    /**
+     * Si el botón atrás de Android y el toque fuera de la tarjeta lo cierran (resolviendo
+     * `undefined`, como cancelar). Por omisión, sí.
+     */
+    cancelable?: boolean;
+}
+
+interface EnEspera {
+    dialogo: Dialogo<unknown>;
+    responder: (valor: unknown) => void;
+}
+
+/**
+ * La fila de diálogos. Vive en `globalThis` para que Fast Refresh, al re-evaluar este módulo, no
+ * deje al host escuchando una fila vieja con promesas que nunca se resuelven.
+ */
+const g = globalThis as typeof globalThis & {
+    __dialogos?: { fila: EnEspera[]; oyentes: Set<() => void> };
+};
+const estado = (g.__dialogos ??= { fila: [], oyentes: new Set() });
+
+const avisarCambio = () => estado.oyentes.forEach((oyente) => oyente());
+
+/**
+ * Abre un diálogo y espera la respuesta: el `valor` del botón tocado, o `undefined` si se cerró
+ * sin elegir (atrás, toque fuera). Si ya hay uno abierto, éste espera su turno: se muestran de uno
+ * en uno, en el orden en que llegaron.
+ */
+export function mostrarDialogo<V>(dialogo: Dialogo<V>): Promise<V | undefined> {
+    return new Promise((resolver) => {
+        estado.fila.push({
+            dialogo: dialogo as Dialogo<unknown>,
+            responder: resolver as (valor: unknown) => void,
+        });
+        avisarCambio();
+    });
+}
+
+/**
+ * Una pregunta de sí o no. Resuelve `true` sólo si se tocó el botón de confirmar; cancelar,
+ * atrás y el toque fuera dan `false`.
+ */
+export async function confirmar({
+    titulo,
+    mensaje,
+    textoConfirmar,
+    textoCancelar = "Cancelar",
+    destructivo = false,
+    icono,
+}: {
+    titulo: string;
+    mensaje?: string;
+    textoConfirmar: string;
+    textoCancelar?: string;
+    destructivo?: boolean;
+    icono?: NombreDeIcono;
+}): Promise<boolean> {
+    const respuesta = await mostrarDialogo({
+        titulo,
+        mensaje,
+        icono: icono ?? (destructivo ? "alert-circle-outline" : "help-circle-outline"),
+        botones: [
+            {
+                texto: textoConfirmar,
+                estilo: destructivo ? "destructivo" : "principal",
+                valor: true,
+            },
+            { texto: textoCancelar, estilo: "cancelar", valor: false },
+        ],
+    });
+    return respuesta === true;
+}
+
+/** Un aviso con un solo botón. Resuelve al cerrarse. */
+export async function avisar({
+    titulo,
+    mensaje,
+    icono = "information-outline",
+    textoBoton = "Entendido",
+    cancelable = true,
+}: {
+    titulo: string;
+    mensaje?: string;
+    icono?: NombreDeIcono;
+    textoBoton?: string;
+    cancelable?: boolean;
+}): Promise<void> {
+    await mostrarDialogo({
+        titulo,
+        mensaje,
+        icono,
+        cancelable,
+        botones: [{ texto: textoBoton, estilo: "principal", valor: true }],
+    });
+}
+
+// ==============================|| PARA EL HOST ||============================== //
+
+/** El que se está mostrando, o `null`. */
+export const dialogoActual = (): Dialogo<unknown> | null => estado.fila[0]?.dialogo ?? null;
+
+export function suscribirDialogos(oyente: () => void): () => void {
+    estado.oyentes.add(oyente);
+    return () => {
+        estado.oyentes.delete(oyente);
+    };
+}
+
+/**
+ * Cierra `dialogo` con `valor` y pasa al siguiente de la fila. Sólo si `dialogo` sigue siendo el
+ * actual: el segundo toque de un doble toque llega con el diálogo que ya se contestó, y sin esta
+ * comparación contestaba también el siguiente de la fila sin que el operador lo viera.
+ */
+export function responderDialogo(dialogo: Dialogo<unknown>, valor: unknown): void {
+    if (estado.fila[0]?.dialogo !== dialogo) return;
+    const actual = estado.fila.shift();
+    actual?.responder(valor);
+    avisarCambio();
+}