@sincpro/mobile 0.1.1 → 0.3.1

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,15 +1,76 @@
 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<{
     children: ReactNode;
 }>;
+export interface BrandFontWeights {
+    light?: string;
+    regular?: string;
+    medium?: string;
+    semiBold?: string;
+    bold?: string;
+    extraBold?: string;
+    black?: string;
+}
+export interface BrandFontFamilies {
+    /** df — Display & headings. Brand character font. (Default: Inter) */
+    display?: BrandFontWeights;
+    /** bf — Body, labels, buttons. Interface text 13–15px. (Default: Inter) */
+    body?: BrandFontWeights;
+    /** cf — Captions, overlines, metadata. Uppercase + tracking. (Default: Fira Code) */
+    caption?: Pick<BrandFontWeights, "regular" | "medium">;
+    /** mono — Numeric data, SKU, amounts. Fixed-width. (Default: Fira Code) */
+    mono?: Pick<BrandFontWeights, "regular" | "medium">;
+}
+export interface BrandFontConfig {
+    /** Metro asset map: `{ "Satoshi-Bold": require("./assets/fonts/Satoshi-Bold.otf") }` */
+    files: Record<string, string | number>;
+    /** Semantic font family slots aligned with the brand manual (df / bf / cf / mono). */
+    families: BrandFontFamilies;
+}
 export interface AppShellConfig {
+    /**
+     * Domain modules to bootstrap. Each module registers its own repositories,
+     * migrations, subscribers, and cron workers. The built-in `baseModule` is
+     * always included automatically — do not pass it here.
+     */
     domains: DomainModule[];
+    /**
+     * Map of domain key → screen component. Domains without a matching entry
+     * here are bootstrapped (events, repos, crons) but have no UI — they run
+     * silently in the background. Must contain at least `ui[activeDomain]`.
+     */
     ui: Record<string, ComponentType>;
+    /**
+     * Key of the domain whose UI is shown on launch. Must match one of the
+     * keys in `domains` AND have a corresponding entry in `ui`.
+     */
     activeDomain: string;
+    /**
+     * Additional React context providers to wrap around the app. Providers are
+     * applied in array order, outermost last — i.e. the last element in the
+     * array becomes the outermost wrapper and can observe all others.
+     *
+     * Example: `[ConfirmationProvider, ProcessToastProvider]`
+     */
     providers?: ProviderComponent[];
+    /** Light theme tokens. Defaults to the DS base theme if omitted. */
     theme?: ThemeTokens;
+    /** Dark theme tokens. When provided, the system color-scheme toggle activates it. */
+    darkTheme?: ThemeTokens;
+    branding?: BrandingConfig;
+    /**
+     * Brand typeface declared as semantic slots (df / bf / cf / mono).
+     * The app owns all font asset files; the framework wires them into DS roles.
+     * Omitting a slot keeps the DS default (Inter for body, Fira Code for mono).
+     */
+    brandFont?: BrandFontConfig;
+    /** Component rendered while fonts + domain init complete. */
+    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,18 +1,61 @@
 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 { useAppFonts } from "@sincpro/mobile-ui/theme/typography";
+import { setBranding } from "@sincpro/mobile-ui";
+import { ToastProvider } from "@sincpro/mobile-ui/Feedback";
+import { setActiveTheme, themeToVars, useTheme, } from "@sincpro/mobile-ui/theme";
+import { configureFonts, useFonts } from "@sincpro/mobile-ui/theme/typography";
 import * as SplashScreen from "expo-splash-screen";
 import { vars } from "nativewind";
 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";
+/** Maps the semantic families object to the low-level DS FontRole record. */
+function familiesToRoles(families) {
+    const roles = {};
+    const { display, body, caption, mono } = families;
+    if (display) {
+        if (display.regular)
+            roles.titleRegular = display.regular;
+        if (display.medium)
+            roles.titleMedium = display.medium;
+        if (display.bold)
+            roles.title = display.bold;
+        if (display.black)
+            roles.titleBlack = display.black;
+    }
+    if (body) {
+        if (body.light)
+            roles.light = body.light;
+        if (body.regular)
+            roles.regular = body.regular;
+        if (body.medium)
+            roles.medium = body.medium;
+        if (body.semiBold)
+            roles.semiBold = body.semiBold;
+        if (body.extraBold)
+            roles.extraBold = body.extraBold;
+    }
+    if (caption) {
+        if (caption.regular)
+            roles.mono = caption.regular;
+        if (caption.medium)
+            roles.monoMedium = caption.medium;
+    }
+    if (mono) {
+        if (mono.regular)
+            roles.mono = mono.regular;
+        if (mono.medium)
+            roles.monoMedium = mono.medium;
+    }
+    return roles;
+}
+/** Wraps children in the provider list. reduceRight → first item = innermost wrapper. */
 function withProviders(providers, children) {
     return providers.reduceRight((acc, Provider) => _jsx(Provider, { children: acc }), children);
 }
@@ -28,10 +71,23 @@ 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);
+    }
+    // Wire brand font roles into the DS before first render.
+    if (config.brandFont?.families) {
+        configureFonts(familiesToRoles(config.brandFont.families));
+    }
     return function AppShell() {
         const [isReady, setIsReady] = useState(false);
-        const fontsLoaded = useAppFonts();
+        const [minDurationMet, setMinDurationMet] = useState(false);
+        const [brandFontsLoaded] = useFonts(config.brandFont?.files ?? {});
+        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 +102,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 (brandFontsLoaded && isReady && minDurationMet) {
                 SplashScreen.hideAsync().catch(() => { });
             }
-        }, [fontsLoaded, isReady]);
-        if (!isReady || !fontsLoaded) {
-            return null;
+        }, [brandFontsLoaded, isReady, minDurationMet]);
+        if (!isReady || !brandFontsLoaded || !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/entrypoints/ui/theme.d.ts

@@ -1,15 +1,16 @@
 import { type DeepPartial, type ThemeTokens } from "@sincpro/mobile-ui/theme";
 /**
- * API simple y extensible para que los clientes definan su theme.
- * Parte de los defaults del framework y aplica overrides parciales (tipados).
+ * Build a fully-typed theme from a partial override object.
+ * Starts from the DS base theme and deep-merges your tokens on top.
  *
- *   createApp({
- *     theme: createTheme({ primary: "#FF6600", bg: { page: "#141414" } }),
- *     domains: [...],
+ *   createAppShell({
+ *     theme: createTheme({ primary: "#FF6600", bg: { page: "#F5F5F5" } }),
+ *     darkTheme: createTheme({ bg: { page: "#0A0A0A" }, primary: "#F5F5F5" }),
+ *     ...
  *   });
  *
- * El resultado se inyecta una vez al bootstrap (estático, sin runtime switching)
- * y propaga tanto a `className` (CSS vars) como a `style={theme.x}`.
+ * The result is injected once at bootstrap (static, not swapped at runtime)
+ * and propagates as both NativeWind CSS vars (`className`) and inline style props.
  */
 export declare function createTheme(overrides?: DeepPartial<ThemeTokens>): ThemeTokens;
 export type { DeepPartial, ThemeTokens };

package/dist/entrypoints/ui/theme.js

@@ -1,15 +1,16 @@
 import { extendTheme } from "@sincpro/mobile-ui/theme";
 /**
- * API simple y extensible para que los clientes definan su theme.
- * Parte de los defaults del framework y aplica overrides parciales (tipados).
+ * Build a fully-typed theme from a partial override object.
+ * Starts from the DS base theme and deep-merges your tokens on top.
  *
- *   createApp({
- *     theme: createTheme({ primary: "#FF6600", bg: { page: "#141414" } }),
- *     domains: [...],
+ *   createAppShell({
+ *     theme: createTheme({ primary: "#FF6600", bg: { page: "#F5F5F5" } }),
+ *     darkTheme: createTheme({ bg: { page: "#0A0A0A" }, primary: "#F5F5F5" }),
+ *     ...
  *   });
  *
- * El resultado se inyecta una vez al bootstrap (estático, sin runtime switching)
- * y propaga tanto a `className` (CSS vars) como a `style={theme.x}`.
+ * The result is injected once at bootstrap (static, not swapped at runtime)
+ * and propagates as both NativeWind CSS vars (`className`) and inline style props.
  */
 export function createTheme(overrides) {
     return extendTheme(overrides);

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;