@sincpro/mobile 0.1.1 → 0.2.0

package/dist/entrypoints/queue/printImage.subscriber.js

@@ -6,9 +6,9 @@ export class PrintImageSubscriber extends Subscriber {
     requiresAuth = false;
     listen = [PrintImageRequestedEvent];
     async process(event) {
-        if (!(await printerService.isConnected())) {
-            throw new DomainValidationError("No printer connected");
+        const printed = await printerService.printImageBase64(event.imageBase64);
+        if (!printed) {
+            throw new DomainValidationError("Print failed — printer not connected or timed out");
         }
-        await printerService.printImageBase64(event.imageBase64);
     }
 }

package/dist/entrypoints/ui/AppShell.d.ts

@@ -1,4 +1,5 @@
 import type { DomainModule } from "../../framework/domain_module";
+import { type BrandingConfig } from "@sincpro/mobile-ui";
 import { type ThemeTokens } from "@sincpro/mobile-ui/theme";
 import { type ComponentType, type ReactNode } from "react";
 type ProviderComponent = ComponentType<{
@@ -10,6 +11,12 @@ export interface AppShellConfig {
     activeDomain: string;
     providers?: ProviderComponent[];
     theme?: ThemeTokens;
+    darkTheme?: ThemeTokens;
+    branding?: BrandingConfig;
+    /** Component rendered while fonts + domain init complete. Use `AppSplashView` from the DS or roll your own. */
+    splashComponent?: ComponentType;
+    /** Minimum time (ms) the splash stays visible. Default 2000. */
+    splashDuration?: number;
 }
 export declare function createAppShell(config: AppShellConfig): ComponentType;
 export {};

package/dist/entrypoints/ui/AppShell.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { DefaultTheme as NavDefaultTheme, NavigationContainer, } from "@react-navigation/native";
 import { createApp } from "../../framework/createApp";
 import { ToastHost } from "../../infrastructure/ui/ToastHost";
-import { setActiveTheme, themeToVars } from "@sincpro/mobile-ui/theme";
+import { setBranding } from "@sincpro/mobile-ui";
+import { ToastProvider } from "@sincpro/mobile-ui/Feedback";
+import { setActiveTheme, themeToVars, useTheme, } from "@sincpro/mobile-ui/theme";
 import { useAppFonts } from "@sincpro/mobile-ui/theme/typography";
 import * as SplashScreen from "expo-splash-screen";
 import { vars } from "nativewind";
@@ -9,8 +12,7 @@ import { useEffect, useState } from "react";
 import { View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
-import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context";
-import { NativeRouter } from "react-router-native";
+import { initialWindowMetrics, SafeAreaProvider, SafeAreaView, } from "react-native-safe-area-context";
 import { CommonProvider } from "./common_provider";
 import { ActiveDomainApp, DomainSwitcherProvider } from "./domain_switcher";
 function withProviders(providers, children) {
@@ -28,10 +30,19 @@ export function createAppShell(config) {
     if (config.theme) {
         setActiveTheme(config.theme);
     }
-    const themeStyle = config.theme ? vars(themeToVars(config.theme)) : undefined;
+    if (config.branding) {
+        setBranding(config.branding);
+    }
     return function AppShell() {
         const [isReady, setIsReady] = useState(false);
+        const [minDurationMet, setMinDurationMet] = useState(false);
         const fontsLoaded = useAppFonts();
+        const activeTheme = useTheme();
+        const themeStyle = vars(themeToVars(activeTheme));
+        const navTheme = {
+            ...NavDefaultTheme,
+            colors: { ...NavDefaultTheme.colors, background: activeTheme.bg.page },
+        };
         useEffect(() => {
             let active = true;
             createApp({ domains: config.domains }).then(() => {
@@ -46,13 +57,18 @@ export function createAppShell(config) {
             SplashScreen.preventAutoHideAsync().catch(() => { });
         }, []);
         useEffect(() => {
-            if (fontsLoaded && isReady) {
+            const t = setTimeout(() => setMinDurationMet(true), config.splashDuration ?? 2000);
+            return () => clearTimeout(t);
+        }, []);
+        useEffect(() => {
+            if (fontsLoaded && isReady && minDurationMet) {
                 SplashScreen.hideAsync().catch(() => { });
             }
-        }, [fontsLoaded, isReady]);
-        if (!isReady || !fontsLoaded) {
-            return null;
+        }, [fontsLoaded, isReady, minDurationMet]);
+        if (!isReady || !fontsLoaded || !minDurationMet) {
+            const Splash = config.splashComponent;
+            return Splash ? (_jsx(Splash, {})) : (_jsx(View, { style: { flex: 1, backgroundColor: activeTheme.bg.page } }));
         }
-        return (_jsx(GestureHandlerRootView, { style: { flex: 1 }, children: _jsx(View, { className: "flex-1", style: themeStyle, children: _jsx(SafeAreaProvider, { initialMetrics: initialWindowMetrics, children: _jsx(KeyboardProvider, { children: _jsxs(CommonProvider, { children: [withProviders(providers, _jsx(DomainSwitcherProvider, { apps: apps, initialDomain: config.activeDomain, children: _jsx(NativeRouter, { children: _jsx(ActiveDomainApp, {}) }) })), _jsx(ToastHost, {})] }) }) }) }) }));
+        return (_jsx(GestureHandlerRootView, { style: { flex: 1 }, children: _jsx(View, { className: "flex-1", style: themeStyle, children: _jsx(SafeAreaProvider, { initialMetrics: initialWindowMetrics, children: _jsx(SafeAreaView, { edges: ["top"], style: { flex: 1 }, children: _jsx(KeyboardProvider, { children: _jsx(CommonProvider, { darkTheme: config.darkTheme, lightTheme: config.theme, children: _jsxs(ToastProvider, { position: "top", children: [withProviders(providers, _jsx(DomainSwitcherProvider, { apps: apps, initialDomain: config.activeDomain, children: _jsx(NavigationContainer, { theme: navTheme, children: _jsx(ActiveDomainApp, {}) }) })), _jsx(ToastHost, {})] }) }) }) }) }) }) }));
     };
 }

package/dist/entrypoints/ui/common_provider.d.ts

@@ -1,3 +1,4 @@
+import type { ThemeTokens } from "@sincpro/mobile-ui/theme";
 import { ReactNode } from "react";
 export interface TimezoneLocale {
     timezone: string;
@@ -26,10 +27,14 @@ interface ICommonContext {
     requestGeoPermission: () => Promise<boolean>;
     timezone: string | null;
     updateTimezone: (tz: TimezoneLocale) => Promise<void>;
+    colorScheme: "light" | "dark" | "system";
+    setColorScheme: (scheme: "light" | "dark" | "system") => Promise<void>;
 }
 interface CommonProviderProps {
     children: ReactNode;
+    lightTheme?: ThemeTokens;
+    darkTheme?: ThemeTokens;
 }
-export declare function CommonProvider({ children }: CommonProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommonProvider({ children, lightTheme, darkTheme }: CommonProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useCommon(): ICommonContext;
 export {};

package/dist/entrypoints/ui/common_provider.js

@@ -4,13 +4,16 @@ import { SettingsRepository } from "../../adapters/repositories/setting.reposito
 import { QueueEndEvent, QueueStartEvent } from "../../domain/events";
 import logger, { loggerUseCases } from "../../infrastructure/logger";
 import { UIEventBus } from "../../infrastructure/ui/UIEventBus";
+import { DEFAULT_DARK_THEME, DEFAULT_THEME, setActiveTheme } from "@sincpro/mobile-ui/theme";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { Appearance, AppState } from "react-native";
 const DEBUG_MODE_SETTING_KEY = "app.debug_mode";
 const TIMEZONE_SETTING_KEY = "app.timezone";
 const LOCALE_SETTING_KEY = "app.locale";
+const COLOR_SCHEME_SETTING_KEY = "app.color_scheme";
 const QUEUE_MIN_VISIBLE_MS = 1200;
 const CommonContext = createContext(null);
-export function CommonProvider({ children }) {
+export function CommonProvider({ children, lightTheme, darkTheme }) {
     const [debugMode, setDebugMode] = useState(false);
     const [debugModeLoaded, setDebugModeLoaded] = useState(false);
     const [currentActivity, setCurrentActivity] = useState(undefined);
@@ -21,6 +24,7 @@ export function CommonProvider({ children }) {
     const [geoIsLoading, setGeoIsLoading] = useState(false);
     const [geoError, setGeoError] = useState(null);
     const [timezone, setTimezone] = useState(null);
+    const [colorScheme, setColorSchemeState] = useState("system");
     const errorTimeoutRef = useRef(null);
     const queueClearTimeoutRef = useRef(null);
     useEffect(() => {
@@ -86,6 +90,42 @@ export function CommonProvider({ children }) {
             logger.warn(error);
         }
     }, []);
+    const applyTheme = useCallback((scheme) => {
+        const resolved = scheme === "system" ? (Appearance.getColorScheme() ?? "light") : scheme;
+        setActiveTheme(resolved === "dark"
+            ? (darkTheme ?? DEFAULT_DARK_THEME)
+            : (lightTheme ?? DEFAULT_THEME));
+    }, [lightTheme, darkTheme]);
+    const setColorScheme = useCallback(async (scheme) => {
+        await SettingsRepository.saveOneSetting(COLOR_SCHEME_SETTING_KEY, scheme);
+        setColorSchemeState(scheme);
+        applyTheme(scheme);
+    }, [applyTheme]);
+    useEffect(() => {
+        checkGeoPermission();
+        const sub = AppState.addEventListener("change", (state) => {
+            if (state === "active")
+                checkGeoPermission();
+        });
+        return () => sub.remove();
+    }, [checkGeoPermission]);
+    // Load persisted color scheme on mount
+    useEffect(() => {
+        async function loadColorScheme() {
+            const saved = await SettingsRepository.getSettingByName(COLOR_SCHEME_SETTING_KEY);
+            const scheme = saved === "light" || saved === "dark" || saved === "system" ? saved : "system";
+            setColorSchemeState(scheme);
+            applyTheme(scheme);
+        }
+        loadColorScheme();
+    }, [applyTheme]);
+    // Follow system changes when scheme is "system"
+    useEffect(() => {
+        if (colorScheme !== "system")
+            return;
+        const sub = Appearance.addChangeListener(() => applyTheme("system"));
+        return () => sub.remove();
+    }, [colorScheme, applyTheme]);
     useEffect(() => {
         async function loadTimezone() {
             try {
@@ -217,6 +257,8 @@ export function CommonProvider({ children }) {
         requestGeoPermission,
         timezone,
         updateTimezone,
+        colorScheme,
+        setColorScheme,
     }), [
         debugMode,
         debugModeLoaded,
@@ -232,6 +274,8 @@ export function CommonProvider({ children }) {
         requestGeoPermission,
         timezone,
         updateTimezone,
+        colorScheme,
+        setColorScheme,
     ]);
     return _jsx(CommonContext.Provider, { value: value, children: children });
 }

package/dist/entrypoints/ui/domain_switcher.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createContext, useContext, useState, } from "react";
+const RootStack = createNativeStackNavigator();
 const DomainSwitcherContext = createContext(null);
 export function DomainSwitcherProvider(props) {
     const [activeDomain, setActiveDomain] = useState(props.initialDomain);
@@ -14,9 +16,8 @@ export function useDomainSwitcher() {
 }
 export function ActiveDomainApp() {
     const { activeDomain, apps } = useDomainSwitcher();
-    const app = apps.find((entry) => entry.key === activeDomain);
-    if (!app)
+    const currentApp = apps.find((entry) => entry.key === activeDomain);
+    if (!currentApp)
         return null;
-    const Component = app.component;
-    return _jsx(Component, {});
+    return (_jsx(RootStack.Navigator, { screenOptions: { headerShown: false }, children: _jsx(RootStack.Screen, { component: currentApp.component, name: currentApp.key }) }));
 }

package/dist/index.d.ts

@@ -13,4 +13,3 @@ export { DomainModule } from "./framework/domain_module";
 export { Kernel } from "./framework/kernel";
 export { orchestrator } from "./framework/orchestrator";
 export { installGlobalErrorHandler } from "./infrastructure/ui/errorHandler";
-export { PlainLayout, TabNavigatorLayout } from "./ui/layouts/router_layouts";

package/dist/index.js

@@ -8,4 +8,3 @@ export { DomainModule } from "./framework/domain_module";
 export { Kernel } from "./framework/kernel";
 export { orchestrator } from "./framework/orchestrator";
 export { installGlobalErrorHandler } from "./infrastructure/ui/errorHandler";
-export { PlainLayout, TabNavigatorLayout } from "./ui/layouts/router_layouts";

package/dist/infrastructure/ui/ToastHost.d.ts

@@ -1 +1,6 @@
-export declare function ToastHost(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Bridges the framework's `UI_NOTIFICATION_EVENT` (emitted by services via UIEventBus)
+ * to the design-system Toast. Renders nothing; the toast stack is rendered by
+ * `ToastProvider` (mounted in AppShell). Must live inside `ToastProvider`.
+ */
+export declare function ToastHost(): null;

package/dist/infrastructure/ui/ToastHost.js

@@ -1,19 +1,28 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { useToast } from "@sincpro/mobile-ui/Feedback";
 import { useEffect } from "react";
-import Toast from "react-native-toast-message";
 import { UI_NOTIFICATION_EVENT } from "./events";
 import { UIEventBus } from "./UIEventBus";
+const VARIANT_BY_TYPE = {
+    success: "success",
+    error: "danger",
+    info: "info",
+};
+/**
+ * Bridges the framework's `UI_NOTIFICATION_EVENT` (emitted by services via UIEventBus)
+ * to the design-system Toast. Renders nothing; the toast stack is rendered by
+ * `ToastProvider` (mounted in AppShell). Must live inside `ToastProvider`.
+ */
 export function ToastHost() {
+    const toast = useToast();
     useEffect(() => {
         const off = UIEventBus.on(UI_NOTIFICATION_EVENT, (payload) => {
             const notification = payload;
-            Toast.show({
-                type: notification.type ?? "info",
-                text1: notification.text1,
-                text2: notification.text2,
-            });
+            const variant = VARIANT_BY_TYPE[notification.type ?? "info"];
+            const message = notification.text2 ?? notification.text1 ?? "";
+            const title = notification.text2 ? notification.text1 : undefined;
+            toast.show({ message, title, variant });
         });
         return off;
-    }, []);
-    return _jsx(Toast, {});
+    }, [toast]);
+    return null;
 }

package/dist/services/printer.service.d.ts

@@ -19,6 +19,12 @@ declare class PrinterService {
     printFromView(viewRef: RefObject<View | null>): Promise<boolean>;
     printHtml(html: string): Promise<boolean>;
     private htmlToPdfBase64;
+    /**
+     * Drops the current BLE connection (even if cached as "connected") and
+     * reconnects to the last saved printer. Used as a one-shot recovery after
+     * a failed print caused by a stale connection.
+     */
+    private forceReconnect;
     private ensureConnected;
 }
 export declare const printerService: PrinterService;

package/dist/services/printer.service.js

@@ -133,9 +133,24 @@ class PrinterService {
             await getPrinterDriver().printImageBase64(base64Data);
             return true;
         }
-        catch (error) {
-            loggerUseCases.error("Error printing image", error);
-            return false;
+        catch (firstError) {
+            loggerUseCases.warn("Print failed — attempting grace reconnect", firstError);
+            const reconnected = await this.forceReconnect();
+            if (!reconnected)
+                return false; // connect() ya notificó al usuario
+            try {
+                await getPrinterDriver().printImageBase64(base64Data);
+                return true;
+            }
+            catch (retryError) {
+                loggerUseCases.error("Print retry after reconnect also failed", retryError);
+                UIEventBus.emit(UI_NOTIFICATION_EVENT, {
+                    type: "error",
+                    text1: "Error de impresión",
+                    text2: "No se pudo imprimir incluso tras reconectar la impresora",
+                });
+                return false;
+            }
         }
     }
     async printFromView(viewRef) {
@@ -202,6 +217,24 @@ class PrinterService {
             return null;
         }
     }
+    /**
+     * Drops the current BLE connection (even if cached as "connected") and
+     * reconnects to the last saved printer. Used as a one-shot recovery after
+     * a failed print caused by a stale connection.
+     */
+    async forceReconnect() {
+        try {
+            await getPrinterDriver().disconnect();
+        }
+        catch {
+            // Expected when the BLE link is already dead — ignore.
+        }
+        const printer = await this.getSelectedPrinter();
+        if (!printer)
+            return false;
+        loggerUseCases.info(`Grace reconnect: reconnecting to ${printer.name} (${printer.address})`);
+        return this.connect(printer.address, printer.name);
+    }
     async ensureConnected() {
         if (this.isConnected()) {
             return true;

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

@@ -1,15 +1,11 @@
 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";
+import { Feedback } from "@sincpro/mobile-ui/Feedback";
 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" }) }));
+    if (!debugMode) {
+        return null;
     }
-    return renderBanner();
+    return _jsx(Feedback.Banner, { message: "Est\u00E1s en modo Debug", tone: "warning" });
 }
 export { DebugBanner };

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

@@ -0,0 +1,4 @@
+import { CustomIconProps } from "@sincpro/mobile-ui/icons/props";
+import React from "react";
+declare const PrinterIcon: React.FC<CustomIconProps>;
+export default PrinterIcon;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Svg, { Path, Rect } from "react-native-svg";
+const PrinterIcon = ({ size = 24, color = "#000000" }) => (_jsxs(Svg, { fill: "none", height: size, viewBox: "0 0 24 24", width: size, children: [_jsx(Path, { d: "M6 9V2H18V9", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }), _jsx(Rect, { height: "8", rx: "1", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", width: "16", x: "4", y: "9" }), _jsx(Path, { d: "M6 18H4C3.44772 18 3 17.5523 3 17V10C3 9.44772 3.44772 9 4 9H20C20.5523 9 21 9.44772 21 10V17C21 17.5523 20.5523 18 20 18H18", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }), _jsx(Rect, { height: "6", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", width: "12", x: "6", y: "14" })] }));
+export default PrinterIcon;

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

@@ -1 +1,2 @@
 export { DebugBanner } from "./DebugBanner";
+export { default as PrinterIcon } from "./PrinterIcon";

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

@@ -1 +1,2 @@
 export { DebugBanner } from "./DebugBanner";
+export { default as PrinterIcon } from "./PrinterIcon";

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

@@ -1,20 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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 PrinterIcon from "../../../ui/components/atoms/PrinterIcon";
+import Sheet from "@sincpro/mobile-ui/Dialog/Sheet";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { Form } from "@sincpro/mobile-ui/Form";
+import { useTheme } 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";
+import { 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" }) }))] }));
+    const theme = useTheme();
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 rounded-xl ${isSelected ? "bg-success-light" : "bg-bg-card"}`, 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-text-tertiary text-xs", children: device.address }), device.isPrinter && (_jsx(Typography.Text, { className: "text-success text-xs", children: "Impresora detectada" }))] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-success 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" })] }));
+    const theme = useTheme();
+    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-text-secondary text-center mt-4", children: "No hay dispositivos vinculados" }), _jsx(Typography.Text, { className: "text-text-tertiary text-center text-sm mt-2", children: "Vincula una impresora desde configuración de Bluetooth del sistema" })] }));
 }
 function BluetoothDeviceSelectorModal({ visible, onClose, onSelect, }) {
+    const theme = useTheme();
     const [devices, setDevices] = useState([]);
     const [loading, setLoading] = useState(false);
     const [selectedDevice, setSelectedDevice] = useState(null);
@@ -55,7 +59,9 @@ function BluetoothDeviceSelectorModal({ visible, onClose, onSelect, }) {
     }
     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" }) }))] })] }));
+    function renderRow(item) {
+        return (_jsx(DeviceRow, { device: item, isSelected: selectedDevice?.address === item.address, onSelect: () => setSelectedDevice(item) }, item.address));
+    }
+    return (_jsxs(Sheet, { onClose: onClose, title: "Seleccionar Impresora", visible: visible, children: [_jsxs(View, { className: "flex-row items-center justify-between mb-3", children: [_jsx(Typography.Text, { className: "text-text-secondary text-xs", children: "Dispositivos Bluetooth vinculados" }), _jsx(TouchableOpacity, { accessibilityLabel: "Actualizar", disabled: loading, hitSlop: 8, onPress: loadDevices, children: _jsx(Display.Icon, { color: theme.icon.secondary, name: "refresh", size: 20, type: "material" }) })] }), devices.length === 0 && !loading ? (_jsx(EmptyState, {})) : (_jsxs(View, { className: "gap-1", children: [printers.length > 0 ? (_jsxs(Typography.Text, { className: "text-text-secondary px-1 py-1", semibold: true, children: ["Impresoras (", printers.length, ")"] })) : null, printers.map(renderRow), otherDevices.length > 0 ? (_jsxs(Typography.Text, { className: "text-text-secondary px-1 py-1 mt-1", semibold: true, children: ["Otros dispositivos (", otherDevices.length, ")"] })) : null, otherDevices.map(renderRow)] })), _jsxs(View, { className: "flex-row gap-2 mt-4", 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: "cta" }) })) : null] })] }));
 }
 export { BluetoothDeviceSelectorModal };

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

@@ -1,14 +1,15 @@
 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 { useTheme } 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, }) {
+    const theme = useTheme();
     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" }) }))] }));
+    return (_jsxs(View, { className: cn("border-l-[3px] border-danger bg-danger-light p-2.5 rounded-xl mb-3", expanded && "bg-danger-light"), 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-danger ml-1.5", semibold: true, variant: "bodySmall", children: "Error" })] }), !expanded && (_jsxs(Typography.Text, { className: "text-danger", numberOfLines: 3, variant: "bodySmall", children: [preview, truncated ? "…" : ""] })), expanded && (_jsx(View, { className: "bg-bg-card rounded-lg p-2.5 border border-danger/30", children: _jsx(Typography.Text, { className: "text-danger 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-danger underline", semibold: true, variant: "bodySmall", children: "Ver error completo" }) }))] }));
 }
 export default DeadLetterErrorBlock;

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

@@ -2,41 +2,11 @@ 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 { useTheme } 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:
@@ -57,9 +27,37 @@ function formatEventName(name) {
 }
 function EventTimelineItem({ event, isLast = false }) {
     const [expanded, setExpanded] = useState(false);
-    const statusInfo = getStatusColor(event.status);
+    const theme = useTheme();
+    const statusColorMap = {
+        [EEventStatus.ACKNOWLEDGED]: {
+            bg: "bg-success",
+            color: theme.success,
+            light: `${theme.success}4D`,
+        },
+        [EEventStatus.PENDING]: {
+            bg: "bg-warning",
+            color: theme.warning,
+            light: `${theme.warning}4D`,
+        },
+        [EEventStatus.PROCESSING]: {
+            bg: "bg-accent",
+            color: theme.warning,
+            light: `${theme.warning}4D`,
+        },
+        [EEventStatus.FAILED]: {
+            bg: "bg-danger",
+            color: theme.danger,
+            light: `${theme.danger}4D`,
+        },
+    };
+    const defaultStatus = {
+        bg: "bg-text-tertiary",
+        color: theme.text.secondary,
+        light: `${theme.text.secondary}4D`,
+    };
+    const statusInfo = statusColorMap[event.status] ?? defaultStatus;
     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) }) })] }))] })] }));
+    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-bg-card rounded-xl p-3 mb-3 border border-border-light 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-border-light 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-bg-muted rounded-lg border border-border-default overflow-hidden", children: _jsx(JsonPreview, { selectedJson: event.asJSON(true) }) })] }))] })] }));
 }
 export default EventTimelineItem;

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

@@ -0,0 +1,8 @@
+interface GeoPermissionCardProps {
+    title: string;
+    hasPermission?: boolean;
+    loading?: boolean;
+    handleRequestPermission?: () => void;
+}
+declare function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }: GeoPermissionCardProps): import("react/jsx-runtime").JSX.Element;
+export default GeoPermissionCard;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { Display } from "@sincpro/mobile-ui/Display";
+import { Form } from "@sincpro/mobile-ui/Form";
+import { useTheme } from "@sincpro/mobile-ui/theme";
+import { Typography } from "@sincpro/mobile-ui/Typography";
+import { View } from "react-native";
+import { tv } from "tailwind-variants";
+const statusTextVariants = tv({
+    variants: {
+        granted: {
+            true: "text-success",
+            false: "text-danger",
+        },
+    },
+});
+function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }) {
+    const theme = useTheme();
+    const granted = hasPermission !== undefined ? hasPermission : false;
+    return (_jsx(Display.Card, { className: "my-2.5", children: _jsxs(View, { className: "flex-row items-start", children: [_jsx(Display.Icon, { color: granted ? theme.success : theme.danger, name: granted ? "check-circle" : "location-off", size: 35, type: "material" }), _jsxs(View, { className: "ml-2.5 flex-1", children: [_jsx(Typography.Text, { className: "text-base mb-1", semibold: true, children: title }), _jsx(Typography.Text, { className: statusTextVariants({ granted }), children: granted ? "Permiso activo." : "Permiso inactivo." }), !granted && (_jsx(Form.Button, { loading: loading, onPress: handleRequestPermission, size: "small", title: "Abrir Configuración", variant: "cta" }))] })] }) }));
+}
+export default GeoPermissionCard;

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

@@ -1,5 +1,8 @@
-interface Props {
-    position?: "top" | "bottom";
-}
-declare function ProcessToast({ position }: Props): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Bridges the framework's queue/cron activity state (from CommonProvider) to the
+ * design-system Toast: a persistent `loading` toast while a queue/cron task runs, and a
+ * `danger` toast on failure. Renders nothing — the toast UI is owned by the DS
+ * `ToastProvider` (mounted in AppShell), so this must live inside it.
+ */
+declare function ProcessToast(): null;
 export default ProcessToast;