@sincpro/mobile 0.1.0

package/dist/tools/utils/date.js

@@ -0,0 +1,126 @@
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import { getLocales } from "expo-localization";
+const DEFAULT_TIMEZONE = "America/Costa_Rica";
+const DEFAULT_LOCALE = "es-CR";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+/**
+ * Formatea una fecha en la zona horaria indicada respetando la granularidad de la entrada.
+ *
+ * Reglas de detección:
+ * 1. Si `input` es un string 'YYYY-MM-DD' (solo fecha) => se interpreta como medianoche (00:00:00)
+ *    en la zona horaria destino y se devuelve SOLO la parte de fecha (sin hora).
+ * 2. Si `input` incluye componente de tiempo (ISO completo o Date) => se convierte a la zona destino
+ *    y se muestra fecha + hora (HH:MM) salvo que se fuerce lo contrario mediante `options.showTime`.
+ * 3. Cuando `options.showTime` es `true` o `false` se sobre‑escribe la auto‑detección.
+ * 4. Si `timezone` es null/undefined o inválido se retorna la cadena "Error de formateo".
+ *
+ * Localización:
+ * - Usa el primer locale del dispositivo (`expo-localization`) como predeterminado.
+ * - Puedes forzar uno diferente con `options.locale` (ej: 'es-CR', 'en-US').
+ *
+ * Seguridad de zona horaria:
+ * - El parse de una fecha sin hora NO se hace en la zona local del dispositivo para luego convertir,
+ *   sino directamente en la zona destino para evitar corrimientos de día.
+ *
+ * Ejemplos:
+ * ```ts
+ * formatDate('2025-09-02', 'America/Costa_Rica');
+ * // => "2 de septiembre de 2025"
+ *
+ * formatDate('2025-09-02T18:30:00Z', 'America/Costa_Rica');
+ * // => "2 de septiembre de 2025, 12:30 p. m." (dependiendo del locale real)
+ *
+ * formatDate(new Date('2025-09-02T23:15:00Z'), 'Europe/Madrid');
+ * // => "3 de septiembre de 2025, 01:15" (cambio de día por zona +02)
+ *
+ * formatDate('2025-09-02', 'America/Costa_Rica', { showTime: true });
+ * // => "2 de septiembre de 2025, 12:00 a. m." (fuerza hora)
+ * ```
+ *
+ * @param input      Fecha (string ISO, 'YYYY-MM-DD' o instancia Date)
+ * @param timezone   Zona horaria IANA (ej: 'America/Costa_Rica', 'Asia/Tokyo'). Si es null/undefined usa Costa Rica
+ * @param options    Opcional: locale forzado y/o bandera para mostrar hora
+ * @returns          Cadena localizada o "Error de formateo" si no se puede procesar
+ */
+export function formatDate(input, timezone, options) {
+    // Usar timezone por defecto si no se proporciona
+    const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
+    const fallbackLocale = DEFAULT_LOCALE.split("-")[0]; // "es" from "es-CR"
+    const deviceLocale = getLocales()?.[0]?.languageTag ?? fallbackLocale;
+    const usedLocale = options?.locale ?? deviceLocale;
+    try {
+        const rawStr = typeof input === "string" ? input : input.toISOString();
+        const isDateOnly = /^\d{4}-\d{2}-\d{2}$/.test(rawStr);
+        // Auto-detect showTime si no se pasa explicitamente
+        const effectiveShowTime = options?.showTime !== undefined
+            ? options.showTime
+            : !isDateOnly && /T\d{2}:\d{2}/.test(rawStr); // tiene componente hora
+        const dateInstance = isDateOnly
+            ? dayjs.tz(`${rawStr}T00:00:00`, effectiveTimezone)
+            : dayjs.utc(rawStr).tz(effectiveTimezone);
+        const dateInZone = dateInstance.toDate();
+        const formatOptions = {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+            timeZone: effectiveTimezone,
+        };
+        if (effectiveShowTime) {
+            formatOptions.hour = "2-digit";
+            formatOptions.minute = "2-digit";
+        }
+        return new Intl.DateTimeFormat(usedLocale, formatOptions).format(dateInZone);
+    }
+    catch (error) {
+        console.warn("Error formateando fecha:", error);
+        return "Error de formateo";
+    }
+}
+/**
+ * Formatea una fecha usando automáticamente el timezone por defecto (Costa Rica).
+ * Útil para casos donde no se tiene acceso al timezone del usuario.
+ *
+ * @param input      Fecha (string ISO, 'YYYY-MM-DD' o instancia Date)
+ * @param options    Opcional: locale forzado y/o bandera para mostrar hora
+ * @returns          Cadena localizada en timezone de Costa Rica
+ */
+export function formatDateWithDefaultTimezone(input, options) {
+    return formatDate(input, DEFAULT_TIMEZONE, options);
+}
+/**
+ * Obtiene la fecha actual en formato YYYY-MM-DD en el timezone especificado.
+ * Útil para crear fechas de programación que respeten el timezone del usuario.
+ *
+ * @param timezone Zona horaria IANA. Si es null/undefined usa Costa Rica
+ * @returns Fecha actual en formato YYYY-MM-DD en el timezone especificado
+ */
+export function getCurrentDateInTimezone(timezone) {
+    const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
+    try {
+        return dayjs().tz(effectiveTimezone).format("YYYY-MM-DD");
+    }
+    catch (error) {
+        console.warn("Error obteniendo fecha actual en timezone:", error);
+        return dayjs().format("YYYY-MM-DD"); // Fallback to local
+    }
+}
+/**
+ * Obtiene la fecha y hora actual en formato ISO en el timezone especificado.
+ * Útil para timestamps que necesiten reflejar el timezone del usuario.
+ *
+ * @param timezone Zona horaria IANA. Si es null/undefined usa Costa Rica
+ * @returns Fecha actual en formato ISO en el timezone especificado
+ */
+export function getCurrentDateTimeInTimezone(timezone) {
+    const effectiveTimezone = timezone || DEFAULT_TIMEZONE;
+    try {
+        return dayjs().tz(effectiveTimezone).toISOString();
+    }
+    catch (error) {
+        console.warn("Error obteniendo fecha/hora actual en timezone:", error);
+        return dayjs().toISOString(); // Fallback to local
+    }
+}

package/dist/tools/utils/maps.d.ts

@@ -0,0 +1,4 @@
+export declare const openMapWithRoute: (destination: {
+    latitude: number;
+    longitude: number;
+}) => Promise<void>;

package/dist/tools/utils/maps.js

@@ -0,0 +1,20 @@
+import * as Linking from "expo-linking";
+import { Platform } from "react-native";
+export const openMapWithRoute = async (destination) => {
+    const { latitude, longitude } = destination;
+    const url = Platform.OS === "ios"
+        ? `http://maps.apple.com/?daddr=${latitude},${longitude}`
+        : `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`;
+    try {
+        const canOpen = await Linking.canOpenURL(url);
+        if (canOpen) {
+            await Linking.openURL(url);
+        }
+        else {
+            console.error("No se puede abrir la URL del mapa:", url);
+        }
+    }
+    catch (error) {
+        console.error("Error al abrir la URL del mapa:", error);
+    }
+};

package/dist/tools/utils/monetary.d.ts

@@ -0,0 +1,3 @@
+export declare function parseToMonetaryNumber(input?: string | number | null): number;
+export declare function formatTwoDecimals(value?: number | string | null): string;
+export declare function calculateDiscountedTotal(total: number, discount: number): number;

package/dist/tools/utils/monetary.js

@@ -0,0 +1,31 @@
+import { Big } from "big.js";
+export function parseToMonetaryNumber(input) {
+    if (input == null)
+        return 0;
+    const s = String(input).trim();
+    if (!/[0-9]/.test(s))
+        return 0;
+    const cleaned = s.replace(/[^0-9.-]+/g, "");
+    try {
+        return Number(new Big(cleaned).toString());
+    }
+    catch {
+        return 0;
+    }
+}
+export function formatTwoDecimals(value) {
+    const raw = parseToMonetaryNumber(value);
+    const rounded = new Big(raw).toFixed(2);
+    const num = Number(rounded);
+    return new Intl.NumberFormat("de-DE", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(num);
+}
+export function calculateDiscountedTotal(total, discount) {
+    if (discount === 0) {
+        return 0;
+    }
+    const result = (parseToMonetaryNumber(total) * discount) / 100;
+    return parseToMonetaryNumber(result);
+}

package/dist/tools/utils/quantity.d.ts

@@ -0,0 +1,11 @@
+/** Redondea a la precisión indicada usando round half up */
+export declare function roundTo(value: number, precision: number): number;
+/** Normaliza la cantidad al múltiplo más cercano del incremento mínimo */
+export declare function normalizeQuantity(value: number, minIncrement: number, precision: number): number;
+/** Convierte un valor a entero escalado según precisión para cálculos seguros */
+export declare function toScaledInt(value: number, precision: number): number;
+export declare function fromScaledInt(scaled: number, precision: number): number;
+/** Multiplicación segura evitando errores binarios típicos */
+export declare function safeMul(a: number, b: number, precision: number): number;
+/** Valida si un valor es múltiplo del incremento mínimo dentro de la precisión */
+export declare function isMultipleOfIncrement(value: number, minIncrement: number, precision: number): boolean;

package/dist/tools/utils/quantity.js

@@ -0,0 +1,44 @@
+import { Big } from "big.js";
+/** Redondea a la precisión indicada usando round half up */
+export function roundTo(value, precision) {
+    if (isNaN(value))
+        return 0;
+    const factor = new Big(10).pow(precision);
+    return Number(new Big(value).times(factor).round(0, 1).div(factor).toString());
+}
+/** Normaliza la cantidad al múltiplo más cercano del incremento mínimo */
+export function normalizeQuantity(value, minIncrement, precision) {
+    if (!isFinite(value))
+        return 0;
+    if (value < 0)
+        value = 0;
+    if (minIncrement <= 0)
+        return roundTo(value, precision);
+    const steps = Math.round(value / minIncrement);
+    const normalized = steps * minIncrement;
+    return roundTo(normalized, precision);
+}
+/** Convierte un valor a entero escalado según precisión para cálculos seguros */
+export function toScaledInt(value, precision) {
+    if (!isFinite(value))
+        return 0;
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor);
+}
+export function fromScaledInt(scaled, precision) {
+    const factor = Math.pow(10, precision);
+    return scaled / factor;
+}
+/** Multiplicación segura evitando errores binarios típicos */
+export function safeMul(a, b, precision) {
+    const factor = Math.pow(10, precision);
+    return (Math.round(a * factor) * Math.round(b * factor)) / (factor * factor);
+}
+/** Valida si un valor es múltiplo del incremento mínimo dentro de la precisión */
+export function isMultipleOfIncrement(value, minIncrement, precision) {
+    if (minIncrement <= 0)
+        return true;
+    const scaledValue = toScaledInt(value, precision + 3); // extra precisión para reducir error
+    const scaledInc = toScaledInt(minIncrement, precision + 3);
+    return scaledValue % scaledInc === 0;
+}

package/dist/tools/utils/searchTools.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Search Tools: concurrency helpers for use-case level search orchestration.
+ *
+ * Exposes LatestDebounced to coordinate frequent, user-driven async searches
+ * while avoiding race conditions and backend hammering.
+ */
+/**
+ * LatestDebounced
+ *
+ * What it solves (use case):
+ * - In interactive UIs (search bars, live filters) users type quickly.
+ * - Each key stroke can trigger an async search/use case request.
+ * - Without control, multiple in-flight requests compete and late responses can override newer results (race conditions), while also hammering the backend.
+ *
+ * Core idea:
+ * - Allow scheduling tasks frequently, but only execute the latest one and enforce a minimal time gap between executions (debounce at the use-case layer).
+ * - If an older scheduled task finishes after a newer one, its result is considered stale and can be replaced by a fallback (e.g., re-read latest local results) via the optional onStale handler.
+ *
+ * Why use this instead of UI-level debounce?
+ * - Keeps UI dead-simple and pushes orchestration to application logic (use cases), matching Clean Architecture.
+ * - Centralizes race-condition handling; UI doesn't need abort controllers or timers.
+ *
+ * Typical usage:
+ *   const gate = new LatestDebounced(1000); // 1s min interval
+ *   return gate.run(async () => doSearch(query), async () => getLatestLocal(query));
+ */
+export declare class LatestDebounced {
+    private readonly minIntervalMs;
+    private token;
+    private lastAt;
+    constructor(minIntervalMs?: number);
+    /**
+     * Runs the provided async task ensuring:
+     * - A minimum interval between consecutive executions is respected.
+     * - Only the latest scheduled call's result is returned; previous ones are treated as stale.
+     * If a stale task completes, onStale (if provided) is invoked to produce a safe value.
+     */
+    run<T>(task: () => Promise<T>, onStale?: () => Promise<T>): Promise<T>;
+}

package/dist/tools/utils/searchTools.js

@@ -0,0 +1,56 @@
+/**
+ * Search Tools: concurrency helpers for use-case level search orchestration.
+ *
+ * Exposes LatestDebounced to coordinate frequent, user-driven async searches
+ * while avoiding race conditions and backend hammering.
+ */
+/**
+ * LatestDebounced
+ *
+ * What it solves (use case):
+ * - In interactive UIs (search bars, live filters) users type quickly.
+ * - Each key stroke can trigger an async search/use case request.
+ * - Without control, multiple in-flight requests compete and late responses can override newer results (race conditions), while also hammering the backend.
+ *
+ * Core idea:
+ * - Allow scheduling tasks frequently, but only execute the latest one and enforce a minimal time gap between executions (debounce at the use-case layer).
+ * - If an older scheduled task finishes after a newer one, its result is considered stale and can be replaced by a fallback (e.g., re-read latest local results) via the optional onStale handler.
+ *
+ * Why use this instead of UI-level debounce?
+ * - Keeps UI dead-simple and pushes orchestration to application logic (use cases), matching Clean Architecture.
+ * - Centralizes race-condition handling; UI doesn't need abort controllers or timers.
+ *
+ * Typical usage:
+ *   const gate = new LatestDebounced(1000); // 1s min interval
+ *   return gate.run(async () => doSearch(query), async () => getLatestLocal(query));
+ */
+export class LatestDebounced {
+    minIntervalMs;
+    token = 0;
+    lastAt = 0;
+    constructor(minIntervalMs = 800) {
+        this.minIntervalMs = minIntervalMs;
+    }
+    /**
+     * Runs the provided async task ensuring:
+     * - A minimum interval between consecutive executions is respected.
+     * - Only the latest scheduled call's result is returned; previous ones are treated as stale.
+     * If a stale task completes, onStale (if provided) is invoked to produce a safe value.
+     */
+    async run(task, onStale) {
+        const current = ++this.token;
+        const now = Date.now();
+        const elapsed = now - this.lastAt;
+        if (elapsed < this.minIntervalMs) {
+            await new Promise((r) => setTimeout(r, this.minIntervalMs - elapsed));
+        }
+        this.lastAt = Date.now();
+        const result = await task();
+        if (current !== this.token) {
+            if (onStale) {
+                return onStale();
+            }
+        }
+        return result;
+    }
+}

package/dist/tools/utils/serializer.d.ts

@@ -0,0 +1,2 @@
+export declare function safeJsonStringify(obj: any, pretty?: boolean): string;
+export declare function safeJsonParse(json: string): any;

package/dist/tools/utils/serializer.js

@@ -0,0 +1,44 @@
+export function safeJsonStringify(obj, pretty = false) {
+    const seen = new WeakSet();
+    if (pretty) {
+        return JSON.stringify(obj, (key, value) => {
+            if (key.startsWith("_")) {
+                return undefined;
+            }
+            if (value instanceof Map) {
+                return Object.fromEntries(value);
+            }
+            if (value instanceof Set) {
+                return Array.from(value);
+            }
+            if (typeof value === "object" && value !== null) {
+                if (seen.has(value)) {
+                    return "[Circular]";
+                }
+                seen.add(value);
+            }
+            return value;
+        }, 2);
+    }
+    return JSON.stringify(obj, (key, value) => {
+        if (key.startsWith("_")) {
+            return undefined;
+        }
+        if (value instanceof Map) {
+            return Object.fromEntries(value);
+        }
+        if (value instanceof Set) {
+            return Array.from(value);
+        }
+        if (typeof value === "object" && value !== null) {
+            if (seen.has(value)) {
+                return "[Circular]";
+            }
+            seen.add(value);
+        }
+        return value;
+    });
+}
+export function safeJsonParse(json) {
+    return JSON.parse(json);
+}

package/dist/ui/components/atoms/DebugBanner.d.ts

@@ -0,0 +1,2 @@
+declare function DebugBanner(): import("react/jsx-runtime").JSX.Element | null;
+export { DebugBanner };

package/dist/ui/components/atoms/DebugBanner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useCommon } from "../../../entrypoints/ui/common_provider";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import { View } from "react-native";
+function DebugBanner() {
+    const { debugMode } = useCommon();
+    function renderBanner() {
+        if (!debugMode) {
+            return null;
+        }
+        return (_jsx(View, { className: "bg-accent py-2 px-4", children: _jsx(Typography.Text, { className: "text-white font-bold text-center", semibold: true, children: "⚠️ Estás en modo Debug" }) }));
+    }
+    return renderBanner();
+}
+export { DebugBanner };

package/dist/ui/components/atoms/index.d.ts

@@ -0,0 +1 @@
+export { DebugBanner } from "./DebugBanner";

package/dist/ui/components/atoms/index.js

@@ -0,0 +1 @@
+export { DebugBanner } from "./DebugBanner";

package/dist/ui/components/molecules/BluetoothDeviceSelectorModal.d.ts

@@ -0,0 +1,8 @@
+import { BluetoothDevice } from "../../../domain/print";
+interface BluetoothDeviceSelectorModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSelect: (device: BluetoothDevice) => void;
+}
+declare function BluetoothDeviceSelectorModal({ visible, onClose, onSelect, }: BluetoothDeviceSelectorModalProps): import("react/jsx-runtime").JSX.Element;
+export { BluetoothDeviceSelectorModal };

package/dist/ui/components/molecules/BluetoothDeviceSelectorModal.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { bluetoothService } from "../../../services/bluetooth.service";
+import { printerService } from "../../../services/printer.service";
+import { Display, Form } from "@sincpro/mobile-ui";
+import { BottomSheet } from "@sincpro/mobile-ui/Dialog/BottomSheet";
+import PrinterIcon from "@sincpro/mobile-ui/icons/PrinterIcon";
+import { theme } from "@sincpro/mobile-ui/theme";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import { useCallback, useEffect, useState } from "react";
+import { FlatList, RefreshControl, TouchableOpacity, View } from "react-native";
+function DeviceRow({ device, onSelect, isSelected }) {
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 border-b border-gray-100 ${isSelected ? "bg-green-50" : "bg-white"}`, onPress: onSelect, children: [_jsx(Display.Icon, { color: device.isPrinter ? theme.success : theme.text.secondary, customIcon: PrinterIcon, size: 24, type: "custom" }), _jsxs(View, { className: "ml-3 flex-1", children: [_jsx(Typography.Text, { semibold: true, children: device.name || "Dispositivo sin nombre" }), _jsx(Typography.Text, { className: "text-gray-400 text-xs", children: device.address }), device.isPrinter && (_jsx(Typography.Text, { className: "text-green-600 text-xs", children: "Impresora detectada" }))] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-green-500 items-center justify-center", children: _jsx(Display.Icon, { color: theme.text.inverse, name: "check", size: 16, type: "material" }) }))] }));
+}
+function EmptyState() {
+    return (_jsxs(View, { className: "p-8 items-center justify-center", style: { minHeight: 250 }, children: [_jsx(Display.Icon, { color: theme.text.tertiary, customIcon: PrinterIcon, size: 64, type: "custom" }), _jsx(Typography.Text, { className: "text-gray-500 text-center mt-4", children: "No hay dispositivos vinculados" }), _jsx(Typography.Text, { className: "text-gray-400 text-center text-sm mt-2", children: "Vincula una impresora desde configuración de Bluetooth del sistema" })] }));
+}
+function BluetoothDeviceSelectorModal({ visible, onClose, onSelect, }) {
+    const [devices, setDevices] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [selectedDevice, setSelectedDevice] = useState(null);
+    const [connecting, setConnecting] = useState(false);
+    const loadDevices = useCallback(async () => {
+        setLoading(true);
+        try {
+            const hasPermission = await bluetoothService.ensurePermissionsForPrinter();
+            if (!hasPermission)
+                return;
+            const pairedDevices = await printerService.getPairedDevices();
+            setDevices(pairedDevices);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (visible) {
+            loadDevices();
+            setSelectedDevice(null);
+        }
+    }, [visible, loadDevices]);
+    async function handleConfirm() {
+        if (!selectedDevice)
+            return;
+        setConnecting(true);
+        try {
+            const success = await printerService.connect(selectedDevice.address, selectedDevice.name || "Impresora");
+            if (success) {
+                onSelect(selectedDevice);
+                onClose();
+            }
+        }
+        finally {
+            setConnecting(false);
+        }
+    }
+    const printers = devices.filter((d) => d.isPrinter);
+    const otherDevices = devices.filter((d) => !d.isPrinter);
+    const allDevices = [...printers, ...otherDevices];
+    return (_jsxs(BottomSheet.Root, { onClose: onClose, size: "large", visible: visible, children: [_jsx(BottomSheet.Header, { children: _jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { bold: true, variant: "subtitle", children: "Seleccionar Impresora" }), _jsx(Typography.Text, { className: "text-gray-500 text-xs", children: "Dispositivos Bluetooth vinculados" })] }) }), _jsx(BottomSheet.Content, { scrollable: true, children: devices.length === 0 && !loading ? (_jsx(EmptyState, {})) : (_jsx(FlatList, { data: allDevices, keyExtractor: (item) => item.address, ListHeaderComponent: printers.length > 0 ? (_jsxs(Typography.Text, { className: "text-gray-600 px-4 py-2 bg-gray-50", semibold: true, children: ["Impresoras (", printers.length, ")"] })) : null, refreshControl: _jsx(RefreshControl, { onRefresh: loadDevices, refreshing: loading }), renderItem: ({ item, index }) => (_jsxs(_Fragment, { children: [index === printers.length && otherDevices.length > 0 && (_jsxs(Typography.Text, { className: "text-gray-600 px-4 py-2 bg-gray-50", semibold: true, children: ["Otros dispositivos (", otherDevices.length, ")"] })), _jsx(DeviceRow, { device: item, isSelected: selectedDevice?.address === item.address, onSelect: () => setSelectedDevice(item) })] })), scrollEnabled: false })) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", children: [_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: onClose, title: "Cancelar", variant: "outline" }) }), selectedDevice && (_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { loading: connecting, onPress: handleConfirm, title: "Conectar", variant: "primary" }) }))] })] }));
+}
+export { BluetoothDeviceSelectorModal };

package/dist/ui/components/molecules/DeadLetterErrorBlock.d.ts

@@ -0,0 +1,8 @@
+interface DeadLetterErrorBlockProps {
+    errorMessage?: string | null;
+    expanded: boolean;
+    onToggle: () => void;
+    previewChars?: number;
+}
+declare function DeadLetterErrorBlock({ errorMessage, expanded, onToggle, previewChars, }: DeadLetterErrorBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export default DeadLetterErrorBlock;

package/dist/ui/components/molecules/DeadLetterErrorBlock.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { theme } from "@sincpro/mobile-ui/theme";
+import { cn } from "@sincpro/mobile-ui/theme/tw";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import { TouchableOpacity, View } from "react-native";
+function DeadLetterErrorBlock({ errorMessage, expanded, onToggle, previewChars = 140, }) {
+    if (!errorMessage)
+        return null;
+    const preview = errorMessage.substring(0, previewChars);
+    const truncated = errorMessage.length > previewChars;
+    return (_jsxs(View, { className: cn("border-l-[3px] border-red-500 bg-red-50 p-2.5 rounded-xl mb-3", expanded && "bg-red-100"), children: [_jsxs(TouchableOpacity, { accessibilityRole: "button", activeOpacity: 0.75, className: "flex-row items-center mb-1", onPress: onToggle, children: [_jsx(Display.Icon, { color: theme.danger, name: "alert-circle", size: 16, type: "feather" }), _jsx(Typography.Text, { className: "text-red-600 ml-1.5", semibold: true, variant: "bodySmall", children: "Error" })] }), !expanded && (_jsxs(Typography.Text, { className: "text-red-600", numberOfLines: 3, variant: "bodySmall", children: [preview, truncated ? "…" : ""] })), expanded && (_jsx(View, { className: "bg-white rounded-lg p-2.5 border border-red-100", children: _jsx(Typography.Text, { className: "text-red-600 text-xs leading-4", variant: "bodySmall", children: errorMessage }) })), truncated && !expanded && (_jsx(TouchableOpacity, { accessibilityRole: "button", activeOpacity: 0.7, className: "mt-1.5", onPress: onToggle, children: _jsx(Typography.Text, { className: "text-red-600 underline", semibold: true, variant: "bodySmall", children: "Ver error completo" }) }))] }));
+}
+export default DeadLetterErrorBlock;

package/dist/ui/components/molecules/EventTimelineItem.d.ts

@@ -0,0 +1,7 @@
+import { DomainEvent } from "../../../domain/event_sourcing";
+interface EventTimelineItemProps {
+    event: DomainEvent;
+    isLast?: boolean;
+}
+declare function EventTimelineItem({ event, isLast }: EventTimelineItemProps): import("react/jsx-runtime").JSX.Element;
+export default EventTimelineItem;

package/dist/ui/components/molecules/EventTimelineItem.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { EEventStatus } from "../../../domain/event_sourcing";
+import { Display } from "@sincpro/mobile-ui/Display";
+import CopyableText from "@sincpro/mobile-ui/Display/Display.CopyableText";
+import { theme } from "@sincpro/mobile-ui/theme";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import JsonPreview from "@sincpro/mobile-ui/widgets/JSONViewer";
+import { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+const statusColorMap = {
+    [EEventStatus.ACKNOWLEDGED]: {
+        bg: "bg-emerald-600",
+        color: theme.success,
+        light: `${theme.success}4D`,
+    },
+    [EEventStatus.PENDING]: {
+        bg: "bg-amber-500",
+        color: theme.warning,
+        light: `${theme.warning}4D`,
+    },
+    [EEventStatus.PROCESSING]: {
+        bg: "bg-accent",
+        color: theme.warning,
+        light: `${theme.warning}4D`,
+    },
+    [EEventStatus.FAILED]: {
+        bg: "bg-red-500",
+        color: theme.danger,
+        light: `${theme.danger}4D`,
+    },
+};
+const defaultStatus = {
+    bg: "bg-gray-500",
+    color: theme.text.secondary,
+    light: `${theme.text.secondary}4D`,
+};
+function getStatusColor(status) {
+    return statusColorMap[status] ?? defaultStatus;
+}
+function getStatusIcon(status) {
+    switch (status) {
+        case EEventStatus.ACKNOWLEDGED:
+            return "check-circle";
+        case EEventStatus.PENDING:
+            return "clock";
+        case EEventStatus.PROCESSING:
+            return "loader";
+        case EEventStatus.FAILED:
+            return "x-circle";
+        default:
+            return "circle";
+    }
+}
+function formatEventName(name) {
+    const parts = name.split(".");
+    return parts[parts.length - 1]?.replace(/_/g, " ").toUpperCase() || name;
+}
+function EventTimelineItem({ event, isLast = false }) {
+    const [expanded, setExpanded] = useState(false);
+    const statusInfo = getStatusColor(event.status);
+    const statusIcon = getStatusIcon(event.status);
+    const friendlyName = formatEventName(event.name);
+    return (_jsxs(View, { className: "flex-row px-4", children: [_jsxs(View, { className: "items-center w-8 mr-3", children: [_jsx(View, { className: `w-6 h-6 rounded-full items-center justify-center ${statusInfo.bg}`, children: _jsx(Display.Icon, { color: "#ffffff", name: statusIcon, size: 12, type: "feather" }) }), !isLast && (_jsx(View, { className: "w-0.5 flex-1 mt-1", style: { backgroundColor: statusInfo.light } }))] }), _jsxs(TouchableOpacity, { activeOpacity: 0.7, className: "flex-1 bg-white rounded-xl p-3 mb-3 border border-gray-100 shadow-sm", onPress: () => setExpanded(!expanded), children: [_jsxs(View, { className: "flex-row justify-between items-center mb-2", children: [_jsx(Typography.Text, { semibold: true, variant: "body", children: friendlyName }), _jsx(Display.Icon, { color: theme.text.secondary, name: expanded ? "chevron-up" : "chevron-down", size: 16, type: "feather" })] }), _jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: theme.text.secondary, name: "clock", size: 12, type: "feather" }), _jsx(Display.Date, { className: "text-text-tertiary", showTime: true, textVariant: "caption", value: event.createdAt })] }), _jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: statusInfo.color, name: statusIcon, size: 12, type: "feather" }), _jsxs(Typography.Text, { style: { color: statusInfo.color }, variant: "caption", children: [event.status, " \u2022 Intentos: ", event.attempts] })] }), (event.sequence ?? 0) > 0 && (_jsxs(View, { className: "flex-row items-center mb-1 gap-1.5", children: [_jsx(Display.Icon, { color: theme.text.secondary, name: "hash", size: 12, type: "feather" }), _jsxs(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: ["Secuencia: ", event.sequence] })] })), expanded && event && (_jsxs(View, { className: "mt-3 border-t border-gray-100 pt-3", children: [_jsxs(View, { className: "flex-row justify-between items-center mb-2", children: [_jsx(Typography.Text, { className: "text-text-tertiary", semibold: true, variant: "caption", children: "Payload" }), _jsx(CopyableText, { className: "text-primary text-xs", getValue: () => event.asJSON(true), label: "copy" })] }), _jsx(View, { className: "bg-gray-50 rounded-lg border border-gray-200 overflow-hidden", children: _jsx(JsonPreview, { selectedJson: event.asJSON(true) }) })] }))] })] }));
+}
+export default EventTimelineItem;

package/dist/ui/components/molecules/ProcessToast.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    position?: "top" | "bottom";
+}
+declare function ProcessToast({ position }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default ProcessToast;