@gaozh1024/rn-kit 0.3.4 → 0.4.0

package/dist/index.mjs

@@ -250,6 +250,11 @@ import { useMemo as useMemo2 } from "react";
 function getThemeColors(theme, isDark) {
   return {
     primary: theme.colors.primary?.[500] || "#f38b32",
+    success: theme.colors.success?.[500] || "#22c55e",
+    warning: theme.colors.warning?.[500] || "#f59e0b",
+    error: theme.colors.error?.[500] || "#ef4444",
+    info: theme.colors.info?.[500] || theme.colors.secondary?.[500] || "#3b82f6",
+    muted: isDark ? "#9ca3af" : "#6b7280",
     primarySurface: isDark ? theme.colors.primary?.[900] || "#7c2d12" : theme.colors.primary?.[50] || "#fff7ed",
     background: theme.colors.background?.[500] || (isDark ? "#0a0a0a" : "#ffffff"),
     card: theme.colors.card?.[500] || (isDark ? "#1f2937" : "#ffffff"),
@@ -346,6 +351,189 @@ function useAsyncState() {
 
 // src/core/api/create-api.ts
 import { ZodError } from "zod";
+
+// src/core/logger/utils.ts
+var LOG_LEVEL_WEIGHT = {
+  debug: 10,
+  info: 20,
+  warn: 30,
+  error: 40
+};
+function shouldLog(currentLevel, nextLevel) {
+  return LOG_LEVEL_WEIGHT[nextLevel] >= LOG_LEVEL_WEIGHT[currentLevel];
+}
+function createLogEntry(input) {
+  return {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    level: input.level,
+    message: input.message,
+    data: input.data,
+    namespace: input.namespace,
+    timestamp: Date.now(),
+    source: input.source ?? "logger"
+  };
+}
+function formatLogTime(timestamp) {
+  const date = new Date(timestamp);
+  const hh = String(date.getHours()).padStart(2, "0");
+  const mm = String(date.getMinutes()).padStart(2, "0");
+  const ss = String(date.getSeconds()).padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+function stringifyLogData(data) {
+  if (data === void 0) return "";
+  if (typeof data === "string") return data;
+  try {
+    return JSON.stringify(data, null, 2);
+  } catch {
+    return String(data);
+  }
+}
+function normalizeConsoleArgs(args) {
+  if (args.length === 0) {
+    return { message: "", data: void 0 };
+  }
+  const [first, ...rest] = args;
+  if (typeof first === "string") {
+    return {
+      message: first,
+      data: rest.length === 0 ? void 0 : rest.length === 1 ? rest[0] : rest
+    };
+  }
+  return {
+    message: stringifyLogData(first),
+    data: args.length === 1 ? first : args
+  };
+}
+function serializeLogEntries(entries) {
+  return JSON.stringify(
+    entries.map((entry) => ({
+      id: entry.id,
+      level: entry.level,
+      message: entry.message,
+      namespace: entry.namespace,
+      timestamp: entry.timestamp,
+      source: entry.source,
+      data: entry.data
+    })),
+    null,
+    2
+  );
+}
+
+// src/core/logger/transports.ts
+var ANSI_COLORS = {
+  debug: "\x1B[90m",
+  info: "\x1B[36m",
+  warn: "\x1B[33m",
+  error: "\x1B[31m",
+  reset: "\x1B[0m"
+};
+function supportsAnsiColors() {
+  return typeof process !== "undefined" && Boolean(process.stdout?.isTTY);
+}
+function resolveConsoleMethod(consoleRef, entry) {
+  const target = consoleRef ?? console;
+  if (entry.level === "debug" && typeof target.debug === "function") return target.debug.bind(target);
+  if (entry.level === "info" && typeof target.info === "function") return target.info.bind(target);
+  if (entry.level === "warn" && typeof target.warn === "function") return target.warn.bind(target);
+  if (entry.level === "error" && typeof target.error === "function") return target.error.bind(target);
+  return target.log.bind(target);
+}
+function createConsoleTransport(options = {}) {
+  const useAnsiColors = options.useAnsiColors ?? supportsAnsiColors();
+  return (entry) => {
+    if (entry.source === "console") return;
+    const method = resolveConsoleMethod(options.consoleRef, entry);
+    const time = formatLogTime(entry.timestamp);
+    const basePrefix = `[${time}] [${entry.level.toUpperCase()}]${entry.namespace ? ` [${entry.namespace}]` : ""}`;
+    const prefix = useAnsiColors ? `${ANSI_COLORS[entry.level]}${basePrefix}${ANSI_COLORS.reset}` : basePrefix;
+    if (entry.data === void 0) {
+      method(`${prefix} ${entry.message}`);
+      return;
+    }
+    method(`${prefix} ${entry.message}`, entry.data);
+  };
+}
+
+// src/core/logger/registry.ts
+var globalLogger = null;
+function setGlobalLogger(logger) {
+  globalLogger = logger;
+}
+function getGlobalLogger() {
+  return globalLogger;
+}
+
+// src/core/api/observability.ts
+function defaultSanitize(value, sanitize, stage, field) {
+  if (!sanitize) return value;
+  return sanitize(value, { stage, field });
+}
+function resolveMessage(event) {
+  if (event.stage === "request") {
+    return `API Request ${event.method} ${event.path}`;
+  }
+  if (event.stage === "response") {
+    return `API Response ${event.method} ${event.path} ${event.statusCode ?? "-"}`;
+  }
+  return `API Error ${event.method} ${event.path}`;
+}
+function resolveLevel(error) {
+  if (!error) return "info";
+  if (error.code === "VALIDATION" || error.code === "BUSINESS") return "warn";
+  return "error";
+}
+function createApiLoggerTransport(config = {}) {
+  return (event) => {
+    const logger = config.logger ?? getGlobalLogger();
+    if (!logger) return;
+    const data = {
+      endpointName: event.endpointName,
+      method: event.method,
+      path: event.path,
+      url: event.url,
+      statusCode: event.statusCode,
+      durationMs: event.durationMs,
+      input: config.includeInput || event.stage !== "request" ? defaultSanitize(event.input, config.sanitize, event.stage, "input") : void 0,
+      responseData: config.includeResponseData ? defaultSanitize(event.responseData, config.sanitize, event.stage, "responseData") : void 0,
+      error: event.error ? defaultSanitize(
+        {
+          code: event.error.code,
+          message: event.error.message,
+          statusCode: event.error.statusCode,
+          retryable: event.error.retryable
+        },
+        config.sanitize,
+        event.stage,
+        "error"
+      ) : void 0
+    };
+    const namespace = config.namespace ?? "api";
+    const message = resolveMessage(event);
+    if (event.stage === "request") {
+      logger.debug(message, data, namespace);
+      return;
+    }
+    if (event.stage === "response") {
+      logger.info(message, data, namespace);
+      return;
+    }
+    logger[resolveLevel(event.error)](message, data, namespace);
+  };
+}
+function resolveApiObservability(config) {
+  const enabled = config?.enabled ?? isDevelopment();
+  if (!enabled) {
+    return { enabled, transports: [] };
+  }
+  return {
+    enabled,
+    transports: [createApiLoggerTransport(config), ...config?.transports ?? []]
+  };
+}
+
+// src/core/api/create-api.ts
 function parseZodError(error) {
   const first = error.errors[0];
   return {
@@ -398,6 +586,7 @@ async function notifyError(error, context, endpoint, config) {
 function createAPI(config) {
   const endpoints = {};
   const fetcher = config.fetcher ?? fetch;
+  const observability = resolveApiObservability(config.observability);
   for (const [name, ep] of Object.entries(config.endpoints)) {
     endpoints[name] = async (input) => {
       const context = {
@@ -413,11 +602,43 @@ function createAPI(config) {
         }
       }
       const url = config.baseURL + ep.path;
+      const startAt = Date.now();
+      if (observability.enabled) {
+        await Promise.all(
+          observability.transports.map(
+            (transport) => transport({
+              stage: "request",
+              endpointName: name,
+              path: ep.path,
+              method: ep.method,
+              url,
+              input
+            })
+          )
+        );
+      }
       let response;
       try {
         response = await fetcher(url, { method: ep.method });
       } catch (error) {
-        throw await notifyError(parseNetworkError(error), context, ep, config);
+        const enhanced = await notifyError(parseNetworkError(error), context, ep, config);
+        if (observability.enabled) {
+          await Promise.all(
+            observability.transports.map(
+              (transport) => transport({
+                stage: "error",
+                endpointName: name,
+                path: ep.path,
+                method: ep.method,
+                url,
+                input,
+                durationMs: Date.now() - startAt,
+                error: enhanced
+              })
+            )
+          );
+        }
+        throw enhanced;
       }
       context.response = response;
       let data = void 0;
@@ -432,18 +653,115 @@ function createAPI(config) {
       }
       context.responseData = data;
       if (!response.ok) {
-        throw await notifyError(parseHttpError(response, data), context, ep, config);
+        const enhanced = await notifyError(parseHttpError(response, data), context, ep, config);
+        if (observability.enabled) {
+          await Promise.all(
+            observability.transports.map(
+              (transport) => transport({
+                stage: "error",
+                endpointName: name,
+                path: ep.path,
+                method: ep.method,
+                url,
+                input,
+                response,
+                responseData: data,
+                statusCode: response.status,
+                durationMs: Date.now() - startAt,
+                error: enhanced
+              })
+            )
+          );
+        }
+        throw enhanced;
       }
       const businessError = ep.parseBusinessError?.(data, response) ?? config.parseBusinessError?.(data, response);
       if (businessError) {
-        throw await notifyError(businessError, context, ep, config);
+        const enhanced = await notifyError(businessError, context, ep, config);
+        if (observability.enabled) {
+          await Promise.all(
+            observability.transports.map(
+              (transport) => transport({
+                stage: "error",
+                endpointName: name,
+                path: ep.path,
+                method: ep.method,
+                url,
+                input,
+                response,
+                responseData: data,
+                statusCode: response.status,
+                durationMs: Date.now() - startAt,
+                error: enhanced
+              })
+            )
+          );
+        }
+        throw enhanced;
       }
       try {
         if (ep.output) {
-          return ep.output.parse(data);
+          const parsed = ep.output.parse(data);
+          if (observability.enabled) {
+            await Promise.all(
+              observability.transports.map(
+                (transport) => transport({
+                  stage: "response",
+                  endpointName: name,
+                  path: ep.path,
+                  method: ep.method,
+                  url,
+                  input,
+                  response,
+                  responseData: parsed,
+                  statusCode: response.status,
+                  durationMs: Date.now() - startAt
+                })
+              )
+            );
+          }
+          return parsed;
         }
       } catch (error) {
-        throw await notifyError(parseUnknownError(error), context, ep, config);
+        const enhanced = await notifyError(parseUnknownError(error), context, ep, config);
+        if (observability.enabled) {
+          await Promise.all(
+            observability.transports.map(
+              (transport) => transport({
+                stage: "error",
+                endpointName: name,
+                path: ep.path,
+                method: ep.method,
+                url,
+                input,
+                response,
+                responseData: data,
+                statusCode: response.status,
+                durationMs: Date.now() - startAt,
+                error: enhanced
+              })
+            )
+          );
+        }
+        throw enhanced;
+      }
+      if (observability.enabled) {
+        await Promise.all(
+          observability.transports.map(
+            (transport) => transport({
+              stage: "response",
+              endpointName: name,
+              path: ep.path,
+              method: ep.method,
+              url,
+              input,
+              response,
+              responseData: data,
+              statusCode: response.status,
+              durationMs: Date.now() - startAt
+            })
+          )
+        );
       }
       return data;
     };
@@ -1037,7 +1355,7 @@ function AppView({
 }
 
 // src/ui/primitives/AppScrollView.tsx
-import { ScrollView } from "react-native";
+import { Keyboard, ScrollView, TouchableWithoutFeedback } from "react-native";
 import { jsx as jsx3 } from "nativewind/jsx-runtime";
 function AppScrollView({
   flex,
@@ -1049,6 +1367,7 @@ function AppScrollView({
   surface,
   rounded,
   className,
+  dismissKeyboardOnPressOutside = false,
   children,
   style,
   ...props
@@ -1056,7 +1375,7 @@ function AppScrollView({
   const { theme, isDark } = useOptionalTheme();
   const resolvedBgColor = resolveSurfaceColor(surface, theme, isDark) ?? resolveNamedColor(bg, theme, isDark);
   const shouldUseClassBg = !!bg && !resolvedBgColor;
-  return /* @__PURE__ */ jsx3(
+  const content = /* @__PURE__ */ jsx3(
     ScrollView,
     {
       className: cn(
@@ -1069,11 +1388,16 @@ function AppScrollView({
         rounded && `rounded-${rounded}`,
         className
       ),
-      style: [resolvedBgColor ? { backgroundColor: resolvedBgColor } : void 0, style],
       ...props,
+      style: [resolvedBgColor ? { backgroundColor: resolvedBgColor } : void 0, style],
+      keyboardShouldPersistTaps: dismissKeyboardOnPressOutside ? props.keyboardShouldPersistTaps ?? "handled" : props.keyboardShouldPersistTaps,
       children
     }
   );
+  if (!dismissKeyboardOnPressOutside) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx3(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, accessible: false, children: content });
 }
 
 // src/ui/primitives/AppText.tsx
@@ -1156,8 +1480,19 @@ function AppPressable({
   );
 }
 
-// src/ui/layout/Row.tsx
+// src/ui/primitives/KeyboardDismissView.tsx
+import { Keyboard as Keyboard2, TouchableWithoutFeedback as TouchableWithoutFeedback2 } from "react-native";
 import { jsx as jsx6 } from "nativewind/jsx-runtime";
+function KeyboardDismissView({ enabled = true, children, ...props }) {
+  const content = /* @__PURE__ */ jsx6(AppView, { ...props, children });
+  if (!enabled) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx6(TouchableWithoutFeedback2, { onPress: Keyboard2.dismiss, accessible: false, children: content });
+}
+
+// src/ui/layout/Row.tsx
+import { jsx as jsx7 } from "nativewind/jsx-runtime";
 var justifyMap = {
   start: "justify-start",
   center: "justify-center",
@@ -1172,11 +1507,11 @@ var itemsMap = {
   stretch: "items-stretch"
 };
 function Row({ justify = "start", items = "center", className, ...props }) {
-  return /* @__PURE__ */ jsx6(AppView, { row: true, className: cn(justifyMap[justify], itemsMap[items], className), ...props });
+  return /* @__PURE__ */ jsx7(AppView, { row: true, className: cn(justifyMap[justify], itemsMap[items], className), ...props });
 }
 
 // src/ui/layout/Col.tsx
-import { jsx as jsx7 } from "nativewind/jsx-runtime";
+import { jsx as jsx8 } from "nativewind/jsx-runtime";
 var justifyMap2 = {
   start: "justify-start",
   center: "justify-center",
@@ -1191,19 +1526,19 @@ var itemsMap2 = {
   stretch: "items-stretch"
 };
 function Col({ justify = "start", items = "stretch", className, ...props }) {
-  return /* @__PURE__ */ jsx7(AppView, { className: cn(justifyMap2[justify], itemsMap2[items], className), ...props });
+  return /* @__PURE__ */ jsx8(AppView, { className: cn(justifyMap2[justify], itemsMap2[items], className), ...props });
 }
 
 // src/ui/layout/Center.tsx
-import { jsx as jsx8 } from "nativewind/jsx-runtime";
+import { jsx as jsx9 } from "nativewind/jsx-runtime";
 function Center({ flex = true, ...props }) {
-  return /* @__PURE__ */ jsx8(AppView, { center: true, flex, ...props });
+  return /* @__PURE__ */ jsx9(AppView, { center: true, flex, ...props });
 }
 
 // src/ui/layout/SafeScreen.tsx
-import { View as View2, StyleSheet as StyleSheet2 } from "react-native";
+import { Keyboard as Keyboard3, TouchableWithoutFeedback as TouchableWithoutFeedback3, View as View2, StyleSheet as StyleSheet2 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { jsx as jsx9 } from "nativewind/jsx-runtime";
+import { jsx as jsx10 } from "nativewind/jsx-runtime";
 function SafeScreen({
   top = true,
   bottom = true,
@@ -1212,6 +1547,7 @@ function SafeScreen({
   bg,
   surface,
   flex = true,
+  dismissKeyboardOnPressOutside = false,
   className,
   children,
   style,
@@ -1221,7 +1557,7 @@ function SafeScreen({
   const { theme, isDark } = useOptionalTheme();
   const resolvedBgColor = resolveSurfaceColor(surface, theme, isDark) ?? resolveNamedColor(bg, theme, isDark);
   const shouldUseClassBg = !!bg && !resolvedBgColor;
-  return /* @__PURE__ */ jsx9(
+  const content = /* @__PURE__ */ jsx10(
     View2,
     {
       className: cn(flex && "flex-1", shouldUseClassBg && `bg-${bg}`, className),
@@ -1240,6 +1576,10 @@ function SafeScreen({
       children
     }
   );
+  if (!dismissKeyboardOnPressOutside) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx10(TouchableWithoutFeedback3, { onPress: Keyboard3.dismiss, accessible: false, children: content });
 }
 var styles = StyleSheet2.create({
   flex: {
@@ -1251,19 +1591,20 @@ function AppScreen({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(SafeScreen, { flex: true, surface: "background", ...props, className, children });
+  return /* @__PURE__ */ jsx10(SafeScreen, { flex: true, surface: "background", ...props, className, children });
 }
 function SafeBottom({
   children,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(SafeScreen, { bottom: true, left: true, right: true, flex: false, ...props, className, children });
+  return /* @__PURE__ */ jsx10(SafeScreen, { bottom: true, left: true, right: true, flex: false, ...props, className, children });
 }
 
 // src/ui/actions/AppButton.tsx
-import { ActivityIndicator } from "react-native";
-import { jsx as jsx10 } from "nativewind/jsx-runtime";
+import { useCallback as useCallback9 } from "react";
+import { ActivityIndicator, Keyboard as Keyboard4 } from "react-native";
+import { jsx as jsx11 } from "nativewind/jsx-runtime";
 function AppButton({
   variant = "solid",
   size = "md",
@@ -1271,6 +1612,7 @@ function AppButton({
   loading,
   disabled,
   onPress,
+  dismissKeyboardOnPress = true,
   children,
   className
 }) {
@@ -1291,11 +1633,17 @@ function AppButton({
   const ghostBackgroundColor = isDark ? "rgba(255,255,255,0.04)" : "transparent";
   const loadingColor = variant === "solid" ? "white" : buttonColors[color];
   const textColor = variant === "solid" ? "#ffffff" : variant === "ghost" ? ghostTextColor : buttonColors[color];
+  const handlePress = useCallback9(() => {
+    if (dismissKeyboardOnPress) {
+      Keyboard4.dismiss();
+    }
+    onPress?.();
+  }, [dismissKeyboardOnPress, onPress]);
   const buttonStyle = variant === "solid" ? { backgroundColor: buttonColors[color] } : variant === "outline" ? { borderWidth: 0.5, borderColor: buttonColors[color], backgroundColor: "transparent" } : { backgroundColor: ghostBackgroundColor };
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     AppPressable,
     {
-      onPress,
+      onPress: onPress ? handlePress : void 0,
       disabled: isDisabled,
       className: cn(
         "flex-row items-center justify-center rounded-lg",
@@ -1304,30 +1652,61 @@ function AppButton({
         className
       ),
       style: buttonStyle,
-      children: loading ? /* @__PURE__ */ jsx10(ActivityIndicator, { size: "small", color: loadingColor }) : /* @__PURE__ */ jsx10(AppText, { weight: "semibold", style: { color: textColor }, children })
+      children: loading ? /* @__PURE__ */ jsx11(ActivityIndicator, { size: "small", color: loadingColor }) : /* @__PURE__ */ jsx11(AppText, { weight: "semibold", style: { color: textColor }, children })
     }
   );
 }
 
 // src/ui/feedback/Toast.tsx
-import { jsx as jsx11 } from "nativewind/jsx-runtime";
-var typeStyles = {
-  success: "bg-green-500",
-  error: "bg-red-500",
-  warning: "bg-yellow-500",
-  info: "bg-blue-500"
-};
-function Toast({ message, type = "info", visible = true }) {
+import { jsx as jsx12 } from "nativewind/jsx-runtime";
+function Toast({ message, type = "info", visible = true, testID }) {
+  const { theme } = useOptionalTheme();
   if (!visible) return null;
-  return /* @__PURE__ */ jsx11(AppView, { className: cn("px-4 py-3 rounded-lg", typeStyles[type]), children: /* @__PURE__ */ jsx11(AppText, { color: "white", children: message }) });
+  const palette = {
+    success: {
+      backgroundColor: theme.colors.success?.[500] || "#22c55e",
+      textColor: "#ffffff"
+    },
+    error: {
+      backgroundColor: theme.colors.error?.[500] || "#ef4444",
+      textColor: "#ffffff"
+    },
+    warning: {
+      backgroundColor: theme.colors.warning?.[500] || "#f59e0b",
+      textColor: "#111827"
+    },
+    info: {
+      backgroundColor: theme.colors.info?.[500] || theme.colors.primary?.[500] || "#3b82f6",
+      textColor: "#ffffff"
+    }
+  };
+  const currentPalette = palette[type];
+  return /* @__PURE__ */ jsx12(
+    AppView,
+    {
+      testID,
+      className: "px-4 py-3 rounded-lg",
+      style: { backgroundColor: currentPalette.backgroundColor },
+      children: /* @__PURE__ */ jsx12(AppText, { style: { color: currentPalette.textColor }, children: message })
+    }
+  );
 }
 
 // src/ui/feedback/Alert.tsx
-import { useCallback as useCallback9 } from "react";
-import { Modal, TouchableOpacity, StyleSheet as StyleSheet3 } from "react-native";
-import { jsx as jsx12, jsxs } from "nativewind/jsx-runtime";
+import { useCallback as useCallback10, useEffect as useEffect5, useRef as useRef6 } from "react";
+import { Modal, TouchableOpacity, StyleSheet as StyleSheet3, Animated } from "react-native";
+import { jsx as jsx13, jsxs } from "nativewind/jsx-runtime";
+function createAnimatedValue(value) {
+  const AnimatedValue = Animated.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
 function Alert({ visible, title, message, buttons, onClose }) {
   const { theme, isDark } = useTheme();
+  const progress = useRef6(createAnimatedValue(0)).current;
   const modalBgColor = isDark ? "#1f2937" : "#ffffff";
   const textColor = isDark ? "#ffffff" : "#1f2937";
   const messageColor = isDark ? "#9ca3af" : "#6b7280";
@@ -1335,7 +1714,19 @@ function Alert({ visible, title, message, buttons, onClose }) {
   const cancelButtonBg = isDark ? "#374151" : "#f3f4f6";
   const cancelButtonText = isDark ? "#ffffff" : "#374151";
   const destructiveColor = theme.colors.error?.[500] || "#ef4444";
-  const handleButtonPress = useCallback9(
+  useEffect5(() => {
+    if (!visible) {
+      progress.setValue(0);
+      return;
+    }
+    progress.setValue(0);
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: 220,
+      useNativeDriver: true
+    }).start();
+  }, [progress, visible]);
+  const handleButtonPress = useCallback10(
     (button) => (e) => {
       e.stopPropagation();
       button.onPress?.();
@@ -1372,104 +1763,137 @@ function Alert({ visible, title, message, buttons, onClose }) {
     }
     return "#ffffff";
   };
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Modal,
     {
       visible,
       transparent: true,
-      animationType: "fade",
+      animationType: "none",
       onRequestClose: onClose,
       statusBarTranslucent: true,
-      children: /* @__PURE__ */ jsx12(AppView, { className: "flex-1", style: { backgroundColor: "rgba(0,0,0,0.5)" }, center: true, children: /* @__PURE__ */ jsxs(
-        AppView,
-        {
-          className: "rounded-xl mx-8 min-w-[280px]",
-          style: { backgroundColor: modalBgColor },
-          children: [
-            /* @__PURE__ */ jsxs(AppView, { className: "px-6 py-5", children: [
-              /* @__PURE__ */ jsx12(
-                AppText,
-                {
-                  size: "lg",
-                  weight: "semibold",
-                  className: "text-center mb-2",
-                  style: { color: textColor },
-                  children: title
-                }
-              ),
-              message && /* @__PURE__ */ jsx12(AppText, { size: "sm", style: { color: messageColor }, className: "text-center leading-5", children: message })
-            ] }),
-            /* @__PURE__ */ jsx12(AppView, { className: "border-t", style: { borderTopColor: borderColor }, children: buttons.length === 1 ? (
-              // 单个按钮
-              /* @__PURE__ */ jsx12(
-                TouchableOpacity,
-                {
-                  onPress: handleButtonPress(buttons[0]),
-                  className: "py-3 rounded-b-xl",
-                  style: [styles2.singleButton, getButtonStyle(buttons[0])],
-                  children: /* @__PURE__ */ jsx12(
-                    AppText,
-                    {
-                      weight: "medium",
-                      className: "text-center",
-                      style: { color: getButtonTextColor(buttons[0]) },
-                      children: buttons[0].text
-                    }
-                  )
-                }
-              )
-            ) : buttons.length === 2 ? (
-              // 两个按钮横向排列
-              /* @__PURE__ */ jsx12(AppView, { row: true, style: styles2.twoButtonContainer, children: buttons.map((button, index) => /* @__PURE__ */ jsx12(
-                TouchableOpacity,
-                {
-                  onPress: handleButtonPress(button),
-                  className: cn(
-                    "py-3 flex-1",
-                    index === 0 && "rounded-bl-xl",
-                    index === 1 && "rounded-br-xl"
-                  ),
-                  style: [
-                    styles2.twoButton,
-                    index > 0 && { borderLeftColor: borderColor },
-                    getButtonStyle(button)
-                  ],
-                  children: /* @__PURE__ */ jsx12(
-                    AppText,
-                    {
-                      weight: "medium",
-                      className: "text-center",
-                      style: { color: getButtonTextColor(button) },
-                      children: button.text
-                    }
-                  )
-                },
-                index
-              )) })
-            ) : (
-              // 多个按钮纵向排列
-              /* @__PURE__ */ jsx12(AppView, { className: "gap-2 pb-4 px-4", children: buttons.map((button, index) => /* @__PURE__ */ jsx12(
-                TouchableOpacity,
-                {
-                  onPress: handleButtonPress(button),
-                  className: "py-3 rounded-lg",
-                  style: getButtonStyle(button),
-                  children: /* @__PURE__ */ jsx12(
-                    AppText,
-                    {
-                      weight: "medium",
-                      className: "text-center",
-                      style: { color: getButtonTextColor(button) },
-                      children: button.text
-                    }
-                  )
-                },
-                index
-              )) })
-            ) })
-          ]
-        }
-      ) })
+      children: /* @__PURE__ */ jsxs(AppView, { className: "flex-1", center: true, children: [
+        /* @__PURE__ */ jsx13(
+          Animated.View,
+          {
+            style: [
+              StyleSheet3.absoluteFillObject,
+              {
+                backgroundColor: "rgba(0,0,0,0.5)",
+                opacity: progress
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            className: "rounded-xl mx-8 min-w-[280px]",
+            style: [
+              {
+                backgroundColor: modalBgColor,
+                opacity: progress,
+                transform: [
+                  {
+                    translateY: progress.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [16, 0]
+                    })
+                  },
+                  {
+                    scale: progress.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [0.96, 1]
+                    })
+                  }
+                ]
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsxs(AppView, { className: "px-6 py-5", children: [
+                /* @__PURE__ */ jsx13(
+                  AppText,
+                  {
+                    size: "lg",
+                    weight: "semibold",
+                    className: "text-center mb-2",
+                    style: { color: textColor },
+                    children: title
+                  }
+                ),
+                message && /* @__PURE__ */ jsx13(AppText, { size: "sm", style: { color: messageColor }, className: "text-center leading-5", children: message })
+              ] }),
+              /* @__PURE__ */ jsx13(AppView, { className: "border-t", style: { borderTopColor: borderColor }, children: buttons.length === 1 ? (
+                // 单个按钮
+                /* @__PURE__ */ jsx13(
+                  TouchableOpacity,
+                  {
+                    onPress: handleButtonPress(buttons[0]),
+                    className: "py-3 rounded-b-xl",
+                    style: [styles2.singleButton, getButtonStyle(buttons[0])],
+                    children: /* @__PURE__ */ jsx13(
+                      AppText,
+                      {
+                        weight: "medium",
+                        className: "text-center",
+                        style: { color: getButtonTextColor(buttons[0]) },
+                        children: buttons[0].text
+                      }
+                    )
+                  }
+                )
+              ) : buttons.length === 2 ? (
+                // 两个按钮横向排列
+                /* @__PURE__ */ jsx13(AppView, { row: true, style: styles2.twoButtonContainer, children: buttons.map((button, index) => /* @__PURE__ */ jsx13(
+                  TouchableOpacity,
+                  {
+                    onPress: handleButtonPress(button),
+                    className: cn(
+                      "py-3 flex-1",
+                      index === 0 && "rounded-bl-xl",
+                      index === 1 && "rounded-br-xl"
+                    ),
+                    style: [
+                      styles2.twoButton,
+                      index > 0 && { borderLeftColor: borderColor },
+                      getButtonStyle(button)
+                    ],
+                    children: /* @__PURE__ */ jsx13(
+                      AppText,
+                      {
+                        weight: "medium",
+                        className: "text-center",
+                        style: { color: getButtonTextColor(button) },
+                        children: button.text
+                      }
+                    )
+                  },
+                  index
+                )) })
+              ) : (
+                // 多个按钮纵向排列
+                /* @__PURE__ */ jsx13(AppView, { className: "gap-2 pb-4 px-4", children: buttons.map((button, index) => /* @__PURE__ */ jsx13(
+                  TouchableOpacity,
+                  {
+                    onPress: handleButtonPress(button),
+                    className: "py-3 rounded-lg",
+                    style: getButtonStyle(button),
+                    children: /* @__PURE__ */ jsx13(
+                      AppText,
+                      {
+                        weight: "medium",
+                        className: "text-center",
+                        style: { color: getButtonTextColor(button) },
+                        children: button.text
+                      }
+                    )
+                  },
+                  index
+                )) })
+              ) })
+            ]
+          }
+        )
+      ] })
     }
   );
 }
@@ -1488,19 +1912,8 @@ var styles2 = StyleSheet3.create({
 });
 
 // src/ui/feedback/Loading.tsx
-import { ActivityIndicator as ActivityIndicator2 } from "react-native";
-import { jsx as jsx13, jsxs as jsxs2 } from "nativewind/jsx-runtime";
-function Loading({ text, color, overlay = false, visible = true, testID }) {
-  if (!visible) return null;
-  const content = /* @__PURE__ */ jsxs2(AppView, { center: true, gap: 3, testID, children: [
-    /* @__PURE__ */ jsx13(ActivityIndicator2, { size: "large", color }),
-    text && /* @__PURE__ */ jsx13(AppText, { style: color ? { color } : void 0, children: text })
-  ] });
-  if (overlay) {
-    return /* @__PURE__ */ jsx13(AppView, { center: true, flex: true, className: "absolute inset-0 bg-black/30", testID, children: content });
-  }
-  return content;
-}
+import { ActivityIndicator as ActivityIndicator4 } from "react-native";
+import { useEffect as useEffect6, useState as useState12 } from "react";
 
 // src/ui/display/Progress.tsx
 import { jsx as jsx14 } from "nativewind/jsx-runtime";
@@ -1694,13 +2107,13 @@ var FileIcons = {
 };
 
 // src/ui/display/AppImage.tsx
-import { useState as useState10, useCallback as useCallback10 } from "react";
+import { useState as useState10, useCallback as useCallback11 } from "react";
 import {
   Image,
-  ActivityIndicator as ActivityIndicator3,
+  ActivityIndicator as ActivityIndicator2,
   View as View4
 } from "react-native";
-import { jsx as jsx17, jsxs as jsxs3 } from "nativewind/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs2 } from "nativewind/jsx-runtime";
 var radiusMap = {
   none: 0,
   sm: 2,
@@ -1738,11 +2151,11 @@ function AppImage({
   const [hasError, setHasError] = useState10(false);
   const { theme } = useTheme();
   const resolvedRadius = resolveRadius(borderRadius);
-  const handleLoad = useCallback10(() => {
+  const handleLoad = useCallback11(() => {
     setIsLoading(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = useCallback10(
+  const handleError = useCallback11(
     (error) => {
       setIsLoading(false);
       setHasError(true);
@@ -1783,7 +2196,7 @@ function AppImage({
             center: true,
             className: "absolute inset-0 bg-gray-100",
             style: { borderRadius: resolvedRadius },
-            children: /* @__PURE__ */ jsx17(ActivityIndicator3, { color: theme.colors.primary?.[500] })
+            children: /* @__PURE__ */ jsx17(ActivityIndicator2, { color: theme.colors.primary?.[500] })
           }
         );
       }
@@ -1823,7 +2236,7 @@ function AppImage({
   };
   const isNumberWidth = typeof width === "number";
   const isNumberHeight = typeof height === "number";
-  const content = /* @__PURE__ */ jsxs3(
+  const content = /* @__PURE__ */ jsxs2(
     View4,
     {
       className: cn("overflow-hidden", className),
@@ -1856,22 +2269,31 @@ function AppImage({
 }
 
 // src/ui/display/AppList.tsx
-import { useState as useState11, useCallback as useCallback11, useMemo as useMemo3 } from "react";
+import React4, { useState as useState11, useCallback as useCallback12, useMemo as useMemo3 } from "react";
 import {
   FlatList,
   RefreshControl,
-  ActivityIndicator as ActivityIndicator4,
+  ActivityIndicator as ActivityIndicator3,
   StyleSheet as StyleSheet4
 } from "react-native";
-import { Fragment, jsx as jsx18, jsxs as jsxs4 } from "nativewind/jsx-runtime";
+import { Fragment, jsx as jsx18, jsxs as jsxs3 } from "nativewind/jsx-runtime";
+function renderListSlot(slot) {
+  if (!slot) return null;
+  if (React4.isValidElement(slot)) return slot;
+  if (typeof slot === "function") {
+    const SlotComponent = slot;
+    return /* @__PURE__ */ jsx18(SlotComponent, {});
+  }
+  return null;
+}
 function SkeletonItem2({ render }) {
   const colors = useThemeColors();
   if (render) {
     return render();
   }
-  return /* @__PURE__ */ jsx18(AppView, { p: 4, gap: 3, testID: "skeleton", children: /* @__PURE__ */ jsxs4(AppView, { row: true, gap: 3, children: [
+  return /* @__PURE__ */ jsx18(AppView, { p: 4, gap: 3, testID: "skeleton", children: /* @__PURE__ */ jsxs3(AppView, { row: true, gap: 3, children: [
     /* @__PURE__ */ jsx18(AppView, { className: "w-16 h-16 rounded-lg", style: { backgroundColor: colors.divider } }),
-    /* @__PURE__ */ jsxs4(AppView, { flex: true, gap: 2, children: [
+    /* @__PURE__ */ jsxs3(AppView, { flex: true, gap: 2, children: [
       /* @__PURE__ */ jsx18(AppView, { className: "h-4 w-3/4 rounded", style: { backgroundColor: colors.divider } }),
       /* @__PURE__ */ jsx18(AppView, { className: "h-3 w-1/2 rounded", style: { backgroundColor: colors.divider } })
     ] })
@@ -1883,7 +2305,7 @@ function EmptyState({
   icon
 }) {
   const colors = useThemeColors();
-  return /* @__PURE__ */ jsxs4(Center, { py: 20, children: [
+  return /* @__PURE__ */ jsxs3(Center, { py: 20, children: [
     /* @__PURE__ */ jsx18(Icon, { name: icon || "inbox", size: 64, color: colors.textMuted }),
     /* @__PURE__ */ jsx18(AppText, { size: "lg", weight: "medium", className: "mt-4", style: { color: colors.text }, children: title || "\u6682\u65E0\u6570\u636E" }),
     description && /* @__PURE__ */ jsx18(AppText, { size: "sm", className: "mt-2", style: { color: colors.textMuted }, children: description })
@@ -1897,7 +2319,7 @@ function ErrorState({
   retryText
 }) {
   const colors = useThemeColors();
-  return /* @__PURE__ */ jsxs4(Center, { py: 20, children: [
+  return /* @__PURE__ */ jsxs3(Center, { py: 20, children: [
     /* @__PURE__ */ jsx18(Icon, { name: "error-outline", size: 64, color: "error-300" }),
     /* @__PURE__ */ jsx18(AppText, { size: "lg", weight: "medium", color: "error-500", className: "mt-4", children: errorTitle || "\u52A0\u8F7D\u5931\u8D25" }),
     /* @__PURE__ */ jsx18(AppText, { size: "sm", style: { color: colors.textMuted }, className: "mt-2 text-center px-8", children: error.message || errorDescription || "\u8BF7\u68C0\u67E5\u7F51\u7EDC\u540E\u91CD\u8BD5" }),
@@ -1917,7 +2339,7 @@ function ErrorState({
 }
 function LoadMoreFooter({ loading }) {
   if (!loading) return null;
-  return /* @__PURE__ */ jsx18(Center, { py: 4, children: /* @__PURE__ */ jsx18(ActivityIndicator4, { size: "small" }) });
+  return /* @__PURE__ */ jsx18(Center, { py: 4, children: /* @__PURE__ */ jsx18(ActivityIndicator3, { size: "small" }) });
 }
 function Divider({ style }) {
   const colors = useThemeColors();
@@ -1964,7 +2386,7 @@ function AppList({
 }) {
   const { theme } = useTheme();
   const [isLoadingMore, setIsLoadingMore] = useState11(false);
-  const handleEndReached = useCallback11(async () => {
+  const handleEndReached = useCallback12(async () => {
     if (isLoadingMore || !hasMore || !onEndReached) return;
     setIsLoadingMore(true);
     try {
@@ -1973,16 +2395,16 @@ function AppList({
       setIsLoadingMore(false);
     }
   }, [isLoadingMore, hasMore, onEndReached]);
-  const defaultKeyExtractor = useCallback11(
+  const defaultKeyExtractor = useCallback12(
     (item, index) => {
       if (keyExtractor) return keyExtractor(item, index);
       return `item-${index}`;
     },
     [keyExtractor]
   );
-  const wrappedRenderItem = useCallback11(
+  const wrappedRenderItem = useCallback12(
     (info) => {
-      return /* @__PURE__ */ jsxs4(Fragment, { children: [
+      return /* @__PURE__ */ jsxs3(Fragment, { children: [
         divider && info.index > 0 && /* @__PURE__ */ jsx18(Divider, { style: dividerStyle }),
         renderItem(info)
       ] });
@@ -1993,10 +2415,14 @@ function AppList({
     () => new Array(skeletonCount).fill(null).map((_, i) => ({ _skeletonId: i })),
     [skeletonCount]
   );
-  const skeletonRenderItem = useCallback11(
+  const skeletonRenderItem = useCallback12(
     () => /* @__PURE__ */ jsx18(SkeletonItem2, { render: skeletonRender }),
     [skeletonRender]
   );
+  const flatListKey = useMemo3(() => {
+    if (horizontal) return "app-list-horizontal";
+    return `app-list-columns-${numColumns ?? 1}`;
+  }, [horizontal, numColumns]);
   if (loading && data.length === 0) {
     return /* @__PURE__ */ jsx18(
       FlatList,
@@ -2008,7 +2434,8 @@ function AppList({
         style,
         showsVerticalScrollIndicator,
         showsHorizontalScrollIndicator
-      }
+      },
+      `${flatListKey}-skeleton`
     );
   }
   if (error && data.length === 0) {
@@ -2024,15 +2451,19 @@ function AppList({
     ) });
   }
   const ListEmptyComponent = useMemo3(() => {
-    if (EmptyComponent) return /* @__PURE__ */ jsx18(EmptyComponent, {});
+    if (EmptyComponent) return renderListSlot(EmptyComponent);
     return /* @__PURE__ */ jsx18(EmptyState, { title: emptyTitle, description: emptyDescription, icon: emptyIcon });
   }, [EmptyComponent, emptyTitle, emptyDescription, emptyIcon]);
   const FooterComponent = useMemo3(() => {
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    return /* @__PURE__ */ jsxs3(Fragment, { children: [
       /* @__PURE__ */ jsx18(LoadMoreFooter, { loading: isLoadingMore }),
-      ListFooterComponent
+      renderListSlot(ListFooterComponent)
     ] });
   }, [isLoadingMore, ListFooterComponent]);
+  const HeaderComponent = useMemo3(
+    () => renderListSlot(ListHeaderComponent),
+    [ListHeaderComponent]
+  );
   return /* @__PURE__ */ jsx18(
     FlatList,
     {
@@ -2051,7 +2482,7 @@ function AppList({
       onEndReached: onEndReached ? handleEndReached : void 0,
       onEndReachedThreshold,
       ListEmptyComponent,
-      ListHeaderComponent,
+      ListHeaderComponent: HeaderComponent,
       ListFooterComponent: FooterComponent,
       contentContainerStyle,
       style,
@@ -2064,7 +2495,8 @@ function AppList({
       maxToRenderPerBatch: 10,
       windowSize: 10,
       initialNumToRender: 10
-    }
+    },
+    flatListKey
   );
 }
 var styles3 = StyleSheet4.create({
@@ -2076,7 +2508,7 @@ var styles3 = StyleSheet4.create({
 // src/ui/display/PageDrawer.tsx
 import React5 from "react";
 import { BackHandler, Modal as Modal2, PanResponder, StyleSheet as StyleSheet5 } from "react-native";
-import { jsx as jsx19, jsxs as jsxs5 } from "nativewind/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs4 } from "nativewind/jsx-runtime";
 function PageDrawer({
   visible,
   onClose,
@@ -2096,7 +2528,6 @@ function PageDrawer({
 }) {
   const colors = useThemeColors();
   const [translateX, setTranslateX] = React5.useState(0);
-  if (!visible) return null;
   const handleClose = React5.useCallback(() => {
     setTranslateX(0);
     onClose?.();
@@ -2140,7 +2571,8 @@ function PageDrawer({
     }),
     [handleClose, placement, swipeEnabled, swipeThreshold, width]
   );
-  const drawerContent = /* @__PURE__ */ jsxs5(
+  if (!visible) return null;
+  const drawerContent = /* @__PURE__ */ jsxs4(
     AppView,
     {
       testID: contentTestID,
@@ -2159,7 +2591,7 @@ function PageDrawer({
         }
       ],
       children: [
-        (header || title || showCloseButton) && /* @__PURE__ */ jsxs5(
+        (header || title || showCloseButton) && /* @__PURE__ */ jsxs4(
           AppView,
           {
             row: true,
@@ -2187,7 +2619,7 @@ function PageDrawer({
       ]
     }
   );
-  return /* @__PURE__ */ jsx19(Modal2, { visible: true, transparent: true, animationType: "fade", onRequestClose: handleClose, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx19(Modal2, { visible: true, transparent: true, animationType: "fade", onRequestClose: handleClose, children: /* @__PURE__ */ jsxs4(
     AppView,
     {
       testID,
@@ -2236,14 +2668,57 @@ function GradientView({
   return /* @__PURE__ */ jsx20(LinearGradient, { colors: [...colors], start, end, style, ...props, children });
 }
 
+// src/ui/feedback/Loading.tsx
+import { jsx as jsx21, jsxs as jsxs5 } from "nativewind/jsx-runtime";
+var LOADING_CLOSE_DELAY = 3e4;
+function Loading({
+  text,
+  color,
+  overlay = false,
+  visible = true,
+  testID,
+  onClose
+}) {
+  const [showCloseButton, setShowCloseButton] = useState12(false);
+  useEffect6(() => {
+    if (!visible) {
+      setShowCloseButton(false);
+      return;
+    }
+    setShowCloseButton(false);
+    const timer = setTimeout(() => {
+      setShowCloseButton(true);
+    }, LOADING_CLOSE_DELAY);
+    return () => clearTimeout(timer);
+  }, [visible]);
+  if (!visible) return null;
+  const content = /* @__PURE__ */ jsxs5(AppView, { center: true, gap: 3, testID, children: [
+    /* @__PURE__ */ jsx21(ActivityIndicator4, { size: "large", color }),
+    text && /* @__PURE__ */ jsx21(AppText, { style: color ? { color } : void 0, children: text }),
+    showCloseButton && onClose && /* @__PURE__ */ jsx21(
+      AppPressable,
+      {
+        testID: testID ? `${testID}-close` : "loading-close",
+        className: "mt-1 p-1",
+        onPress: onClose,
+        children: /* @__PURE__ */ jsx21(Icon, { name: "close", size: "md", color: color || "white" })
+      }
+    )
+  ] });
+  if (overlay) {
+    return /* @__PURE__ */ jsx21(AppView, { center: true, flex: true, className: "absolute inset-0 bg-black/30", testID, children: content });
+  }
+  return content;
+}
+
 // src/ui/form/AppInput.tsx
-import { forwardRef, useState as useState12 } from "react";
+import { forwardRef, useState as useState13 } from "react";
 import { TextInput, View as View5, StyleSheet as StyleSheet6 } from "react-native";
-import { jsx as jsx21, jsxs as jsxs6 } from "nativewind/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs6 } from "nativewind/jsx-runtime";
 var AppInput = forwardRef(
   ({ label, error, disabled = false, leftIcon, rightIcon, className, style, ...props }, ref) => {
     const colors = useThemeColors();
-    const [isFocused, setIsFocused] = useState12(false);
+    const [isFocused, setIsFocused] = useState13(false);
     const errorColor = "#ef4444";
     const getBorderColor = () => {
       if (error) return errorColor;
@@ -2251,7 +2726,7 @@ var AppInput = forwardRef(
       return colors.border;
     };
     return /* @__PURE__ */ jsxs6(AppView, { className: cn("flex-col gap-1", className), children: [
-      label && /* @__PURE__ */ jsx21(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
+      label && /* @__PURE__ */ jsx22(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
       /* @__PURE__ */ jsxs6(
         AppView,
         {
@@ -2267,8 +2742,8 @@ var AppInput = forwardRef(
             }
           ],
           children: [
-            leftIcon && /* @__PURE__ */ jsx21(View5, { style: styles5.icon, children: leftIcon }),
-            /* @__PURE__ */ jsx21(
+            leftIcon && /* @__PURE__ */ jsx22(View5, { style: styles5.icon, children: leftIcon }),
+            /* @__PURE__ */ jsx22(
               TextInput,
               {
                 ref,
@@ -2287,11 +2762,11 @@ var AppInput = forwardRef(
                 ...props
               }
             ),
-            rightIcon && /* @__PURE__ */ jsx21(View5, { style: styles5.icon, children: rightIcon })
+            rightIcon && /* @__PURE__ */ jsx22(View5, { style: styles5.icon, children: rightIcon })
           ]
         }
       ),
-      error && /* @__PURE__ */ jsx21(AppText, { size: "xs", style: { color: errorColor }, children: error })
+      error && /* @__PURE__ */ jsx22(AppText, { size: "xs", style: { color: errorColor }, children: error })
     ] });
   }
 );
@@ -2313,9 +2788,9 @@ var styles5 = StyleSheet6.create({
 });
 
 // src/ui/form/Checkbox.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { TouchableOpacity as TouchableOpacity2, StyleSheet as StyleSheet7 } from "react-native";
-import { jsx as jsx22, jsxs as jsxs7 } from "nativewind/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs7 } from "nativewind/jsx-runtime";
 function Checkbox({
   checked,
   defaultChecked,
@@ -2326,7 +2801,7 @@ function Checkbox({
   testID
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = useState13(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = useState14(defaultChecked || false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const toggle = () => {
     if (disabled) return;
@@ -2347,7 +2822,7 @@ function Checkbox({
       testID,
       activeOpacity: 0.7,
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           AppView,
           {
             className: cn(
@@ -2361,10 +2836,10 @@ function Checkbox({
                 borderColor: isChecked ? colors.primary : colors.border
               }
             ],
-            children: isChecked && /* @__PURE__ */ jsx22(AppView, { testID: `${testID}-icon`, children: /* @__PURE__ */ jsx22(Icon, { name: "check", size: "sm", color: "white" }) })
+            children: isChecked && /* @__PURE__ */ jsx23(AppView, { pointerEvents: "none", style: styles6.iconContainer, testID: `${testID}-icon`, children: /* @__PURE__ */ jsx23(Icon, { name: "check", size: 14, color: "white", style: styles6.icon }) })
           }
         ),
-        children && /* @__PURE__ */ jsx22(AppText, { size: "sm", style: { color: colors.text }, children })
+        children && /* @__PURE__ */ jsx23(AppText, { size: "sm", style: { color: colors.text }, children })
       ]
     }
   );
@@ -2372,6 +2847,16 @@ function Checkbox({
 var styles6 = StyleSheet7.create({
   checkbox: {
     borderWidth: 0.5
+  },
+  iconContainer: {
+    ...StyleSheet7.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  icon: {
+    lineHeight: 14,
+    includeFontPadding: false,
+    textAlignVertical: "center"
   }
 });
 
@@ -2387,7 +2872,7 @@ var isGroupOptionDisabled = (groupDisabled, optionDisabled) => {
 };
 
 // src/ui/form/CheckboxGroup.tsx
-import { jsx as jsx23 } from "nativewind/jsx-runtime";
+import { jsx as jsx24 } from "nativewind/jsx-runtime";
 function CheckboxGroup({
   value = [],
   onChange,
@@ -2400,7 +2885,7 @@ function CheckboxGroup({
     onChange(toggleGroupValue(value, optionValue, checked));
   };
   const isRow = direction === "row";
-  return /* @__PURE__ */ jsx23(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ jsx24(
     Checkbox,
     {
       checked: value.includes(option.value),
@@ -2413,9 +2898,9 @@ function CheckboxGroup({
 }
 
 // src/ui/form/Radio.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { TouchableOpacity as TouchableOpacity3, StyleSheet as StyleSheet8 } from "react-native";
-import { jsx as jsx24, jsxs as jsxs8 } from "nativewind/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs8 } from "nativewind/jsx-runtime";
 function Radio({
   checked,
   defaultChecked,
@@ -2426,7 +2911,7 @@ function Radio({
   testID
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = useState14(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = useState15(defaultChecked || false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const toggle = () => {
     if (disabled) return;
@@ -2447,7 +2932,7 @@ function Radio({
       testID,
       activeOpacity: 0.7,
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           AppView,
           {
             className: cn("w-5 h-5 rounded-full items-center justify-center", isChecked && "border-2"),
@@ -2459,7 +2944,7 @@ function Radio({
                 borderWidth: isChecked ? 0.5 : 0.5
               }
             ],
-            children: isChecked && /* @__PURE__ */ jsx24(
+            children: isChecked && /* @__PURE__ */ jsx25(
               AppView,
               {
                 className: "rounded-full",
@@ -2468,7 +2953,7 @@ function Radio({
             )
           }
         ),
-        children && /* @__PURE__ */ jsx24(AppText, { size: "sm", style: { color: colors.text }, children })
+        children && /* @__PURE__ */ jsx25(AppText, { size: "sm", style: { color: colors.text }, children })
       ]
     }
   );
@@ -2484,7 +2969,7 @@ var styles7 = StyleSheet8.create({
 });
 
 // src/ui/form/RadioGroup.tsx
-import { jsx as jsx25 } from "nativewind/jsx-runtime";
+import { jsx as jsx26 } from "nativewind/jsx-runtime";
 function RadioGroup({
   value,
   onChange,
@@ -2493,7 +2978,7 @@ function RadioGroup({
   disabled = false
 }) {
   const isRow = direction === "row";
-  return /* @__PURE__ */ jsx25(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ jsx26(
     Radio,
     {
       checked: value === option.value,
@@ -2506,9 +2991,17 @@ function RadioGroup({
 }
 
 // src/ui/form/Switch.tsx
-import { useState as useState15 } from "react";
-import { TouchableOpacity as TouchableOpacity4, StyleSheet as StyleSheet9 } from "react-native";
-import { jsx as jsx26 } from "nativewind/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef7, useState as useState16 } from "react";
+import { Animated as Animated2, StyleSheet as StyleSheet9, TouchableOpacity as TouchableOpacity4 } from "react-native";
+import { jsx as jsx27 } from "nativewind/jsx-runtime";
+function createAnimatedValue2(value) {
+  const AnimatedValue = Animated2.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
 function Switch({
   checked,
   defaultChecked,
@@ -2520,35 +3013,79 @@ function Switch({
   style
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = useState15(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = useState16(defaultChecked || false);
+  const [isInteractionLocked, setIsInteractionLocked] = useState16(false);
+  const isFirstRender = useRef7(true);
+  const unlockTimerRef = useRef7(null);
   const isChecked = checked !== void 0 ? checked : internalChecked;
+  const sizes = {
+    sm: { width: 36, height: 20, thumb: 16, padding: 2 },
+    md: { width: 48, height: 26, thumb: 22, padding: 2 },
+    lg: { width: 60, height: 32, thumb: 28, padding: 2 }
+  };
+  const config = sizes[size];
+  const maxTranslateX = config.width - config.thumb - config.padding * 2;
+  const thumbTranslateX = useRef7(createAnimatedValue2(isChecked ? maxTranslateX : 0)).current;
+  const clearUnlockTimer = () => {
+    if (!unlockTimerRef.current) return;
+    clearTimeout(unlockTimerRef.current);
+    unlockTimerRef.current = null;
+  };
+  const animateThumb = (nextChecked, shouldUnlock = true) => {
+    Animated2.timing(thumbTranslateX, {
+      toValue: nextChecked ? maxTranslateX : 0,
+      duration: 180,
+      useNativeDriver: true
+    }).start((result) => {
+      if (result?.finished ?? true) {
+        thumbTranslateX.setValue(nextChecked ? maxTranslateX : 0);
+      }
+      if (shouldUnlock) {
+        clearUnlockTimer();
+        setIsInteractionLocked(false);
+      }
+    });
+  };
+  useEffect7(() => {
+    if (isFirstRender.current) {
+      thumbTranslateX.setValue(isChecked ? maxTranslateX : 0);
+      isFirstRender.current = false;
+      return;
+    }
+    animateThumb(isChecked);
+  }, [isChecked, maxTranslateX, thumbTranslateX]);
+  useEffect7(() => {
+    return () => {
+      clearUnlockTimer();
+    };
+  }, []);
   const toggle = () => {
-    if (disabled) return;
+    if (disabled || isInteractionLocked) return;
     const newChecked = !isChecked;
+    setIsInteractionLocked(true);
     if (checked === void 0) {
       setInternalChecked(newChecked);
+    } else {
+      animateThumb(newChecked, false);
+      unlockTimerRef.current = setTimeout(() => {
+        unlockTimerRef.current = null;
+        setIsInteractionLocked(false);
+      }, 220);
     }
     onChange?.(newChecked);
   };
-  const uncheckedTrackColor = colors.divider;
-  const checkedTrackColor = colors.primary;
-  const disabledOpacity = 0.4;
-  const sizes = {
-    sm: { width: 36, height: 20, thumb: 16, padding: 2 },
-    md: { width: 48, height: 26, thumb: 22, padding: 2 },
-    lg: { width: 60, height: 32, thumb: 28, padding: 2 }
-  };
-  const config = sizes[size];
-  const thumbPosition = isChecked ? config.width - config.thumb - config.padding : config.padding;
-  return /* @__PURE__ */ jsx26(
+  const trackBackgroundColor = disabled ? isChecked ? colors.primarySurface : colors.divider : isChecked ? colors.primary : colors.divider;
+  const trackBorderColor = disabled ? isChecked ? colors.primarySurface : colors.border : isChecked ? colors.primary : colors.border;
+  const thumbBackgroundColor = disabled ? colors.card : colors.textInverse;
+  return /* @__PURE__ */ jsx27(
     TouchableOpacity4,
     {
       onPress: toggle,
-      disabled,
+      disabled: disabled || isInteractionLocked,
       className: cn(className),
       testID,
-      activeOpacity: disabled ? 1 : 0.8,
-      children: /* @__PURE__ */ jsx26(
+      activeOpacity: disabled || isInteractionLocked ? 1 : 0.8,
+      children: /* @__PURE__ */ jsx27(
         AppView,
         {
           className: "rounded-full",
@@ -2557,22 +3094,22 @@ function Switch({
             {
               width: config.width,
               height: config.height,
-              backgroundColor: isChecked ? checkedTrackColor : uncheckedTrackColor,
-              opacity: disabled ? disabledOpacity : 1
+              backgroundColor: trackBackgroundColor,
+              borderColor: trackBorderColor
             },
             style
           ],
-          children: /* @__PURE__ */ jsx26(
-            AppView,
+          children: /* @__PURE__ */ jsx27(
+            Animated2.View,
             {
-              className: "rounded-full",
               style: [
                 styles8.thumb,
                 {
                   width: config.thumb,
                   height: config.thumb,
-                  backgroundColor: colors.textInverse,
-                  transform: [{ translateX: thumbPosition }],
+                  borderRadius: config.thumb / 2,
+                  backgroundColor: thumbBackgroundColor,
+                  transform: [{ translateX: thumbTranslateX }],
                   shadowColor: "#000000",
                   shadowOffset: { width: 0, height: 1 },
                   shadowOpacity: 0.25,
@@ -2589,7 +3126,8 @@ function Switch({
 var styles8 = StyleSheet9.create({
   track: {
     justifyContent: "center",
-    padding: 2
+    padding: 2,
+    borderWidth: 0.5
   },
   thumb: {
     elevation: 2,
@@ -2601,7 +3139,7 @@ var styles8 = StyleSheet9.create({
 });
 
 // src/ui/form/Slider.tsx
-import { useState as useState16, useCallback as useCallback12, useRef as useRef6 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef8, useState as useState17 } from "react";
 import {
   View as View6,
   PanResponder as PanResponder2,
@@ -2634,7 +3172,7 @@ function useFormThemeColors() {
 }
 
 // src/ui/form/Slider.tsx
-import { jsx as jsx27, jsxs as jsxs9 } from "nativewind/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs9 } from "nativewind/jsx-runtime";
 function Slider({
   value,
   defaultValue = 0,
@@ -2648,53 +3186,82 @@ function Slider({
   className
 }) {
   const colors = useFormThemeColors();
-  const [internalValue, setInternalValue] = useState16(defaultValue);
-  const [trackWidth, setTrackWidth] = useState16(0);
-  const [isDragging, setIsDragging] = useState16(false);
+  const [internalValue, setInternalValue] = useState17(defaultValue);
+  const [isDragging, setIsDragging] = useState17(false);
+  const trackWidthRef = useRef8(0);
+  const currentValueRef = useRef8(value ?? defaultValue);
+  const dragStartValueRef = useRef8(value ?? defaultValue);
   const currentValue = value !== void 0 ? value : internalValue;
+  const range = max - min;
   const disabledOpacity = 0.4;
-  const progress = (currentValue - min) / (max - min) * 100;
-  const getValueFromPosition = useCallback12(
+  const progress = range <= 0 ? 0 : (currentValue - min) / range * 100;
+  useEffect8(() => {
+    currentValueRef.current = currentValue;
+  }, [currentValue]);
+  const clampValue = useCallback13(
+    (nextValue) => {
+      if (!Number.isFinite(nextValue)) return currentValueRef.current;
+      return Math.min(max, Math.max(min, nextValue));
+    },
+    [max, min]
+  );
+  const valueToPosition = useCallback13(
+    (nextValue) => {
+      if (trackWidthRef.current <= 0 || range <= 0) return 0;
+      return (clampValue(nextValue) - min) / range * trackWidthRef.current;
+    },
+    [clampValue, min, range]
+  );
+  const getValueFromPosition = useCallback13(
     (position) => {
-      const percentage = Math.max(0, Math.min(1, position / trackWidth));
-      const rawValue = min + percentage * (max - min);
-      const steppedValue = Math.round(rawValue / step) * step;
-      return Math.min(max, Math.max(min, steppedValue));
+      if (trackWidthRef.current <= 0 || range <= 0 || !Number.isFinite(position)) {
+        return clampValue(currentValueRef.current);
+      }
+      const percentage = Math.max(0, Math.min(1, position / trackWidthRef.current));
+      const rawValue = min + percentage * range;
+      const steppedValue = step > 0 ? Math.round((rawValue - min) / step) * step + min : rawValue;
+      return clampValue(steppedValue);
     },
-    [trackWidth, min, max, step]
+    [clampValue, min, range, step]
   );
-  const setValue = useCallback12(
+  const setValue = useCallback13(
     (newValue) => {
-      const clampedValue = Math.min(max, Math.max(min, newValue));
+      const clampedValue = clampValue(newValue);
       if (value === void 0) {
         setInternalValue(clampedValue);
       }
+      currentValueRef.current = clampedValue;
       onChange?.(clampedValue);
     },
-    [value, min, max, onChange]
+    [clampValue, onChange, value]
   );
-  const panResponder = useRef6(
-    PanResponder2.create({
+  const panResponder = useMemo5(
+    () => PanResponder2.create({
       onStartShouldSetPanResponder: () => !disabled,
       onMoveShouldSetPanResponder: () => !disabled,
       onPanResponderGrant: () => {
+        dragStartValueRef.current = currentValueRef.current;
         setIsDragging(true);
       },
       onPanResponderMove: (_, gestureState) => {
-        const position = progress / 100 * trackWidth + gestureState.dx;
+        const position = valueToPosition(dragStartValueRef.current) + gestureState.dx;
         const newValue = getValueFromPosition(position);
         setValue(newValue);
       },
       onPanResponderRelease: (_, gestureState) => {
-        const position = progress / 100 * trackWidth + gestureState.dx;
+        const position = valueToPosition(dragStartValueRef.current) + gestureState.dx;
         const newValue = getValueFromPosition(position);
         setValue(newValue);
         setIsDragging(false);
         onChangeEnd?.(newValue);
+      },
+      onPanResponderTerminate: () => {
+        setIsDragging(false);
       }
-    })
-  ).current;
-  const handleTrackPress = useCallback12(
+    }),
+    [disabled, getValueFromPosition, onChangeEnd, setValue, valueToPosition]
+  );
+  const handleTrackPress = useCallback13(
     (event) => {
       if (disabled) return;
       const { locationX } = event.nativeEvent;
@@ -2704,8 +3271,9 @@ function Slider({
     },
     [disabled, getValueFromPosition, setValue, onChangeEnd]
   );
-  const onLayout = useCallback12((event) => {
-    setTrackWidth(event.nativeEvent.layout.width);
+  const onLayout = useCallback13((event) => {
+    const width = event.nativeEvent.layout.width;
+    trackWidthRef.current = width;
   }, []);
   return /* @__PURE__ */ jsxs9(AppView, { className: cn("py-2", className), children: [
     showTooltip && isDragging && /* @__PURE__ */ jsxs9(
@@ -2721,8 +3289,8 @@ function Slider({
           }
         ],
         children: [
-          /* @__PURE__ */ jsx27(AppText, { size: "xs", style: { color: colors.text }, children: Math.round(currentValue) }),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(AppText, { size: "xs", style: { color: colors.text }, children: Math.round(currentValue) }),
+          /* @__PURE__ */ jsx28(
             AppView,
             {
               style: [
@@ -2747,7 +3315,7 @@ function Slider({
         ],
         onTouchEnd: handleTrackPress,
         children: [
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             AppView,
             {
               className: "rounded-full",
@@ -2760,7 +3328,7 @@ function Slider({
               ]
             }
           ),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             AppView,
             {
               className: "absolute rounded-full items-center justify-center",
@@ -2777,7 +3345,7 @@ function Slider({
                 }
               ],
               ...panResponder.panHandlers,
-              children: /* @__PURE__ */ jsx27(
+              children: /* @__PURE__ */ jsx28(
                 AppView,
                 {
                   className: "rounded-full",
@@ -2837,16 +3405,215 @@ var styles9 = StyleSheet10.create({
 });
 
 // src/ui/form/Select.tsx
-import { useState as useState17, useCallback as useCallback13, useMemo as useMemo5 } from "react";
+import { useState as useState19, useCallback as useCallback14, useMemo as useMemo7 } from "react";
 import {
-  Modal as Modal3,
   View as View7,
   TouchableOpacity as TouchableOpacity5,
   FlatList as FlatList2,
   TextInput as TextInput2,
+  StyleSheet as StyleSheet12
+} from "react-native";
+
+// src/ui/form/BottomSheetModal.tsx
+import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef9, useState as useState18 } from "react";
+import {
+  Animated as Animated3,
+  Modal as Modal3,
+  PanResponder as PanResponder3,
   StyleSheet as StyleSheet11
 } from "react-native";
-import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs10 } from "nativewind/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs10 } from "nativewind/jsx-runtime";
+var SHEET_OPEN_DURATION = 220;
+var SHEET_CLOSE_DURATION = 180;
+var OVERLAY_OPEN_DURATION = 180;
+var OVERLAY_CLOSE_DURATION = 160;
+var SHEET_INITIAL_OFFSET = 24;
+var SHEET_CLOSED_OFFSET = 240;
+var SHEET_DRAG_CLOSE_THRESHOLD = 72;
+var SHEET_DRAG_VELOCITY_THRESHOLD = 1;
+function createAnimatedValue3(value) {
+  const AnimatedValue = Animated3.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
+function startAnimations(animations, onComplete) {
+  if (animations.length === 0) {
+    onComplete?.();
+    return;
+  }
+  let completed = 0;
+  animations.forEach((animation) => {
+    animation.start(() => {
+      completed += 1;
+      if (completed >= animations.length) {
+        onComplete?.();
+      }
+    });
+  });
+}
+function BottomSheetModal({
+  visible,
+  onRequestClose,
+  overlayColor,
+  surfaceColor,
+  children,
+  closeOnBackdropPress = false,
+  maxHeight = "70%",
+  showHandle = true,
+  contentClassName,
+  contentStyle,
+  swipeToClose = true,
+  backdropTestID = "bottom-sheet-backdrop",
+  handleTestID = "bottom-sheet-handle"
+}) {
+  const [renderVisible, setRenderVisible] = useState18(visible);
+  const overlayOpacity = useRef9(createAnimatedValue3(0)).current;
+  const sheetTranslateY = useRef9(createAnimatedValue3(SHEET_INITIAL_OFFSET)).current;
+  const isDraggingRef = useRef9(false);
+  const handlePanResponder = useMemo6(
+    () => PanResponder3.create({
+      onMoveShouldSetPanResponder: (_event, gestureState) => {
+        if (!visible || !swipeToClose) return false;
+        const isVertical = Math.abs(gestureState.dy) > Math.abs(gestureState.dx);
+        return isVertical && gestureState.dy > 6;
+      },
+      onPanResponderGrant: () => {
+        isDraggingRef.current = true;
+      },
+      onPanResponderMove: (_event, gestureState) => {
+        if (!visible || !swipeToClose) return;
+        sheetTranslateY.setValue(Math.max(0, Math.min(SHEET_CLOSED_OFFSET, gestureState.dy)));
+      },
+      onPanResponderRelease: (_event, gestureState) => {
+        isDraggingRef.current = false;
+        if (!visible || !swipeToClose) {
+          sheetTranslateY.setValue(0);
+          return;
+        }
+        const shouldClose = gestureState.dy >= SHEET_DRAG_CLOSE_THRESHOLD || gestureState.vy >= SHEET_DRAG_VELOCITY_THRESHOLD;
+        if (shouldClose) {
+          onRequestClose();
+          return;
+        }
+        Animated3.timing(sheetTranslateY, {
+          toValue: 0,
+          duration: SHEET_OPEN_DURATION,
+          useNativeDriver: true
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        isDraggingRef.current = false;
+        Animated3.timing(sheetTranslateY, {
+          toValue: 0,
+          duration: SHEET_OPEN_DURATION,
+          useNativeDriver: true
+        }).start();
+      }
+    }),
+    [onRequestClose, sheetTranslateY, swipeToClose, visible]
+  );
+  useEffect9(() => {
+    if (visible) {
+      setRenderVisible(true);
+      overlayOpacity.setValue(0);
+      sheetTranslateY.setValue(SHEET_INITIAL_OFFSET);
+      startAnimations([
+        Animated3.timing(overlayOpacity, {
+          toValue: 1,
+          duration: OVERLAY_OPEN_DURATION,
+          useNativeDriver: true
+        }),
+        Animated3.timing(sheetTranslateY, {
+          toValue: 0,
+          duration: SHEET_OPEN_DURATION,
+          useNativeDriver: true
+        })
+      ]);
+      return;
+    }
+    if (!renderVisible) return;
+    isDraggingRef.current = false;
+    startAnimations(
+      [
+        Animated3.timing(overlayOpacity, {
+          toValue: 0,
+          duration: OVERLAY_CLOSE_DURATION,
+          useNativeDriver: true
+        }),
+        Animated3.timing(sheetTranslateY, {
+          toValue: SHEET_CLOSED_OFFSET,
+          duration: SHEET_CLOSE_DURATION,
+          useNativeDriver: true
+        })
+      ],
+      () => {
+        setRenderVisible(false);
+      }
+    );
+  }, [overlayOpacity, renderVisible, sheetTranslateY, visible]);
+  return /* @__PURE__ */ jsx29(Modal3, { visible: renderVisible, transparent: true, animationType: "none", onRequestClose, children: /* @__PURE__ */ jsxs10(AppView, { flex: true, justify: "end", children: [
+    /* @__PURE__ */ jsx29(
+      Animated3.View,
+      {
+        pointerEvents: "none",
+        style: [StyleSheet11.absoluteFillObject, { backgroundColor: overlayColor, opacity: overlayOpacity }]
+      }
+    ),
+    closeOnBackdropPress && /* @__PURE__ */ jsx29(AppPressable, { testID: backdropTestID, className: "flex-1", onPress: onRequestClose }),
+    /* @__PURE__ */ jsxs10(
+      Animated3.View,
+      {
+        className: contentClassName,
+        style: [
+          styles10.sheet,
+          {
+            backgroundColor: surfaceColor,
+            maxHeight,
+            transform: [{ translateY: sheetTranslateY }]
+          },
+          contentStyle
+        ],
+        children: [
+          showHandle && /* @__PURE__ */ jsx29(
+            AppView,
+            {
+              testID: handleTestID,
+              center: true,
+              className: "pt-2 pb-1",
+              ...swipeToClose ? handlePanResponder.panHandlers : void 0,
+              children: /* @__PURE__ */ jsx29(AppView, { style: styles10.handle })
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] }) });
+}
+var styles10 = StyleSheet11.create({
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: "rgba(156,163,175,0.7)"
+  },
+  sheet: {
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: "hidden",
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 12
+  }
+});
+
+// src/ui/form/Select.tsx
+import { Fragment as Fragment2, jsx as jsx30, jsxs as jsxs11 } from "nativewind/jsx-runtime";
 function formatSelectedCountText(template, count) {
   return template.replace("{{count}}", String(count));
 }
@@ -2869,24 +3636,24 @@ function Select({
   className
 }) {
   const colors = useFormThemeColors();
-  const [visible, setVisible] = useState17(false);
-  const [searchKeyword, setSearchKeyword] = useState17("");
-  const selectedValues = useMemo5(() => {
+  const [visible, setVisible] = useState19(false);
+  const [searchKeyword, setSearchKeyword] = useState19("");
+  const selectedValues = useMemo7(() => {
     if (multiple) {
       return Array.isArray(value) ? value : [];
     }
     return value ? [value] : [];
   }, [value, multiple]);
-  const displayText = useMemo5(() => {
+  const displayText = useMemo7(() => {
     if (selectedValues.length === 0) return placeholder;
     const selectedLabels = options.filter((opt) => selectedValues.includes(opt.value)).map((opt) => opt.label);
     return selectedLabels.join(", ") || placeholder;
   }, [selectedValues, options, placeholder]);
-  const filteredOptions = useMemo5(() => {
+  const filteredOptions = useMemo7(() => {
     if (!searchable || !searchKeyword) return options;
     return options.filter((opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase()));
   }, [options, searchable, searchKeyword]);
-  const handleSelect = useCallback13(
+  const handleSelect = useCallback14(
     (optionValue) => {
       if (multiple) {
         const currentValues = Array.isArray(value) ? value : [];
@@ -2897,26 +3664,26 @@ function Select({
         setVisible(false);
       }
     },
-    [multiple, value, onChange]
+    [multiple, onChange, value]
   );
-  const handleClear = useCallback13(
+  const handleClear = useCallback14(
     (e) => {
       e.stopPropagation();
       onChange?.(multiple ? [] : "");
     },
     [multiple, onChange]
   );
-  const handleSearch = useCallback13(
+  const handleSearch = useCallback14(
     (text) => {
       setSearchKeyword(text);
       onSearch?.(text);
     },
     [onSearch]
   );
-  const renderOption = useCallback13(
+  const renderOption = useCallback14(
     ({ item }) => {
       const isSelected = selectedValues.includes(item.value);
-      return /* @__PURE__ */ jsxs10(
+      return /* @__PURE__ */ jsxs11(
         AppPressable,
         {
           className: cn(
@@ -2924,22 +3691,22 @@ function Select({
             isSelected && "bg-primary-50"
           ),
           style: [
-            styles10.optionItem,
+            styles11.optionItem,
             { borderBottomColor: colors.divider },
             isSelected && { backgroundColor: colors.primarySurface }
           ],
           onPress: () => handleSelect(item.value),
           children: [
-            /* @__PURE__ */ jsx28(AppText, { style: { color: isSelected ? colors.primary : colors.text }, children: item.label }),
-            isSelected && /* @__PURE__ */ jsx28(Icon, { name: "check", size: "sm", color: "primary-500" })
+            /* @__PURE__ */ jsx30(AppText, { style: { color: isSelected ? colors.primary : colors.text }, children: item.label }),
+            isSelected && /* @__PURE__ */ jsx30(Icon, { name: "check", size: "sm", color: "primary-500" })
           ]
         }
       );
     },
     [selectedValues, handleSelect, colors]
   );
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsxs11(
       AppPressable,
       {
         className: cn(
@@ -2947,11 +3714,11 @@ function Select({
           disabled ? "opacity-60" : "",
           className
         ),
-        style: [styles10.trigger, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles11.trigger, { backgroundColor: colors.surface, borderColor: colors.border }],
         disabled,
         onPress: () => setVisible(true),
         children: [
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx30(
             AppText,
             {
               className: "flex-1",
@@ -2960,111 +3727,106 @@ function Select({
               children: displayText
             }
           ),
-          /* @__PURE__ */ jsxs10(View7, { className: "flex-row items-center", children: [
-            clearable && selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsx28(TouchableOpacity5, { onPress: handleClear, className: "mr-2 p-1", children: /* @__PURE__ */ jsx28(Icon, { name: "close", size: "sm", color: colors.icon }) }),
-            /* @__PURE__ */ jsx28(Icon, { name: "keyboard-arrow-down", size: "md", color: colors.icon })
+          /* @__PURE__ */ jsxs11(View7, { className: "flex-row items-center", children: [
+            clearable && selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsx30(TouchableOpacity5, { onPress: handleClear, className: "mr-2 p-1", children: /* @__PURE__ */ jsx30(Icon, { name: "close", size: "sm", color: colors.icon }) }),
+            /* @__PURE__ */ jsx30(Icon, { name: "keyboard-arrow-down", size: "md", color: colors.icon })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx28(
-      Modal3,
+    /* @__PURE__ */ jsx30(
+      BottomSheetModal,
       {
         visible,
-        transparent: true,
-        animationType: "slide",
         onRequestClose: () => setVisible(false),
-        children: /* @__PURE__ */ jsx28(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ jsxs10(
-          AppView,
-          {
-            className: "rounded-t-2xl max-h-[70%]",
-            style: { backgroundColor: colors.surface },
-            children: [
-              /* @__PURE__ */ jsxs10(
-                AppView,
-                {
-                  row: true,
-                  between: true,
-                  items: "center",
-                  className: "px-4 py-3",
-                  style: [styles10.header, { borderBottomColor: colors.divider }],
-                  children: [
-                    /* @__PURE__ */ jsx28(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: multiple ? multipleSelectTitle : singleSelectTitle }),
-                    /* @__PURE__ */ jsx28(TouchableOpacity5, { onPress: () => setVisible(false), children: /* @__PURE__ */ jsx28(Icon, { name: "close", size: "md", color: colors.icon }) })
-                  ]
-                }
-              ),
-              searchable && /* @__PURE__ */ jsx28(
-                AppView,
-                {
-                  className: "px-4 py-3",
-                  style: [styles10.searchBox, { borderBottomColor: colors.divider }],
-                  children: /* @__PURE__ */ jsxs10(
-                    AppView,
-                    {
-                      row: true,
-                      items: "center",
-                      className: "px-3 py-2 rounded-lg",
-                      style: { backgroundColor: colors.surfaceMuted },
-                      children: [
-                        /* @__PURE__ */ jsx28(View7, { style: { marginRight: 8 }, children: /* @__PURE__ */ jsx28(Icon, { name: "search", size: "sm", color: colors.icon }) }),
-                        /* @__PURE__ */ jsx28(
-                          TextInput2,
-                          {
-                            className: "flex-1 text-base",
-                            style: { color: colors.text },
-                            placeholder: searchPlaceholder,
-                            placeholderTextColor: colors.textMuted,
-                            value: searchKeyword,
-                            onChangeText: handleSearch,
-                            autoFocus: true
-                          }
-                        ),
-                        searchKeyword.length > 0 && /* @__PURE__ */ jsx28(TouchableOpacity5, { onPress: () => setSearchKeyword(""), children: /* @__PURE__ */ jsx28(Icon, { name: "close", size: "sm", color: colors.icon }) })
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx28(
-                FlatList2,
-                {
-                  data: filteredOptions,
-                  keyExtractor: (item) => item.value,
-                  renderItem: renderOption,
-                  ListEmptyComponent: /* @__PURE__ */ jsx28(AppView, { center: true, className: "py-8", children: /* @__PURE__ */ jsx28(AppText, { style: { color: colors.textMuted }, children: emptyText }) })
-                }
-              ),
-              multiple && /* @__PURE__ */ jsxs10(
+        overlayColor: colors.overlay,
+        surfaceColor: colors.surface,
+        closeOnBackdropPress: true,
+        contentClassName: "max-h-[70%]",
+        children: /* @__PURE__ */ jsxs11(Fragment2, { children: [
+          /* @__PURE__ */ jsxs11(
+            AppView,
+            {
+              row: true,
+              between: true,
+              items: "center",
+              className: "px-4 py-3",
+              style: [styles11.header, { borderBottomColor: colors.divider }],
+              children: [
+                /* @__PURE__ */ jsx30(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: multiple ? multipleSelectTitle : singleSelectTitle }),
+                /* @__PURE__ */ jsx30(TouchableOpacity5, { onPress: () => setVisible(false), children: /* @__PURE__ */ jsx30(Icon, { name: "close", size: "md", color: colors.icon }) })
+              ]
+            }
+          ),
+          searchable && /* @__PURE__ */ jsx30(
+            AppView,
+            {
+              className: "px-4 py-3",
+              style: [styles11.searchBox, { borderBottomColor: colors.divider }],
+              children: /* @__PURE__ */ jsxs11(
                 AppView,
                 {
                   row: true,
-                  between: true,
                   items: "center",
-                  className: "px-4 py-3",
-                  style: [styles10.footer, { borderTopColor: colors.divider }],
+                  className: "px-3 py-2 rounded-lg",
+                  style: { backgroundColor: colors.surfaceMuted },
                   children: [
-                    /* @__PURE__ */ jsx28(AppText, { style: { color: colors.textMuted }, children: formatSelectedCountText(selectedCountText, selectedValues.length) }),
-                    /* @__PURE__ */ jsx28(
-                      TouchableOpacity5,
+                    /* @__PURE__ */ jsx30(View7, { style: { marginRight: 8 }, children: /* @__PURE__ */ jsx30(Icon, { name: "search", size: "sm", color: colors.icon }) }),
+                    /* @__PURE__ */ jsx30(
+                      TextInput2,
                       {
-                        className: "px-4 py-2 rounded-lg",
-                        style: { backgroundColor: colors.primary },
-                        onPress: () => setVisible(false),
-                        children: /* @__PURE__ */ jsx28(AppText, { className: "font-medium", style: { color: colors.textInverse }, children: confirmText })
+                        className: "flex-1 text-base",
+                        style: { color: colors.text },
+                        placeholder: searchPlaceholder,
+                        placeholderTextColor: colors.textMuted,
+                        value: searchKeyword,
+                        onChangeText: handleSearch,
+                        autoFocus: true
                       }
-                    )
+                    ),
+                    searchKeyword.length > 0 && /* @__PURE__ */ jsx30(TouchableOpacity5, { onPress: () => setSearchKeyword(""), children: /* @__PURE__ */ jsx30(Icon, { name: "close", size: "sm", color: colors.icon }) })
                   ]
                 }
               )
-            ]
-          }
-        ) })
+            }
+          ),
+          /* @__PURE__ */ jsx30(
+            FlatList2,
+            {
+              data: filteredOptions,
+              keyExtractor: (item, index) => `${item.value}-${index}`,
+              renderItem: renderOption,
+              ListEmptyComponent: /* @__PURE__ */ jsx30(AppView, { center: true, className: "py-8", children: /* @__PURE__ */ jsx30(AppText, { style: { color: colors.textMuted }, children: emptyText }) })
+            }
+          ),
+          multiple && /* @__PURE__ */ jsxs11(
+            AppView,
+            {
+              row: true,
+              between: true,
+              items: "center",
+              className: "px-4 py-3",
+              style: [styles11.footer, { borderTopColor: colors.divider }],
+              children: [
+                /* @__PURE__ */ jsx30(AppText, { style: { color: colors.textMuted }, children: formatSelectedCountText(selectedCountText, selectedValues.length) }),
+                /* @__PURE__ */ jsx30(
+                  TouchableOpacity5,
+                  {
+                    className: "px-4 py-2 rounded-lg",
+                    style: { backgroundColor: colors.primary },
+                    onPress: () => setVisible(false),
+                    children: /* @__PURE__ */ jsx30(AppText, { className: "font-medium", style: { color: colors.textInverse }, children: confirmText })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     )
   ] });
 }
-var styles10 = StyleSheet11.create({
+var styles11 = StyleSheet12.create({
   trigger: {
     borderWidth: 0.5
   },
@@ -3082,126 +3844,306 @@ var styles10 = StyleSheet11.create({
   }
 });
 
-// src/ui/form/DatePicker.tsx
-import { useState as useState18, useCallback as useCallback14, useMemo as useMemo6 } from "react";
-import { Modal as Modal4, TouchableOpacity as TouchableOpacity6, StyleSheet as StyleSheet12 } from "react-native";
-import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs11 } from "nativewind/jsx-runtime";
-function PickerColumn({
-  title,
-  values,
+// src/ui/form/Picker.tsx
+import { useCallback as useCallback15, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef10, useState as useState20 } from "react";
+import {
+  ScrollView as ScrollView2,
+  StyleSheet as StyleSheet13,
+  TouchableOpacity as TouchableOpacity6
+} from "react-native";
+import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs12 } from "nativewind/jsx-runtime";
+function findFirstEnabledValue(column) {
+  return column.options.find((option) => !option.disabled)?.value;
+}
+function normalizeValues(columns, values) {
+  return columns.map((column, index) => {
+    const candidate = values?.[index];
+    const matched = column.options.find((option) => option.value === candidate && !option.disabled);
+    return matched?.value ?? findFirstEnabledValue(column) ?? column.options[0]?.value ?? "";
+  });
+}
+function WheelPickerColumn({
+  colors,
+  column,
+  onChange,
+  rowHeight,
   selectedValue,
-  onSelect,
-  isDisabled,
-  formatLabel = (value) => String(value),
   showDivider = false,
-  colors
+  visibleRows
 }) {
-  return /* @__PURE__ */ jsxs11(
+  const scrollRef = useRef10(null);
+  const paddingRows = Math.floor(visibleRows / 2);
+  const selectedIndex = Math.max(
+    0,
+    column.options.findIndex((option) => option.value === selectedValue)
+  );
+  const scrollToIndex = useCallback15(
+    (index, animated) => {
+      scrollRef.current?.scrollTo?.({ y: index * rowHeight, animated });
+    },
+    [rowHeight]
+  );
+  const selectNearestEnabled = useCallback15(
+    (targetIndex) => {
+      if (column.options.length === 0) return;
+      const maxIndex = column.options.length - 1;
+      const clampedIndex = Math.max(0, Math.min(maxIndex, targetIndex));
+      const exactOption = column.options[clampedIndex];
+      if (exactOption && !exactOption.disabled) {
+        onChange(exactOption.value);
+        scrollToIndex(clampedIndex, true);
+        return;
+      }
+      for (let distance = 1; distance <= maxIndex; distance += 1) {
+        const prevIndex = clampedIndex - distance;
+        if (prevIndex >= 0) {
+          const prevOption = column.options[prevIndex];
+          if (prevOption && !prevOption.disabled) {
+            onChange(prevOption.value);
+            scrollToIndex(prevIndex, true);
+            return;
+          }
+        }
+        const nextIndex = clampedIndex + distance;
+        if (nextIndex <= maxIndex) {
+          const nextOption = column.options[nextIndex];
+          if (nextOption && !nextOption.disabled) {
+            onChange(nextOption.value);
+            scrollToIndex(nextIndex, true);
+            return;
+          }
+        }
+      }
+    },
+    [column.options, onChange, scrollToIndex]
+  );
+  const handleScrollEnd = useCallback15(
+    (event) => {
+      const offsetY = event.nativeEvent.contentOffset?.y ?? 0;
+      selectNearestEnabled(Math.round(offsetY / rowHeight));
+    },
+    [rowHeight, selectNearestEnabled]
+  );
+  useEffect10(() => {
+    scrollToIndex(selectedIndex, false);
+  }, [scrollToIndex, selectedIndex]);
+  return /* @__PURE__ */ jsxs12(
     AppView,
     {
       flex: true,
       style: [
-        showDivider && styles11.column,
+        showDivider ? styles12.columnDivider : void 0,
         showDivider ? { borderRightColor: colors.divider } : void 0
       ],
       children: [
-        /* @__PURE__ */ jsx29(AppView, { center: true, className: "py-2", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ jsx29(AppText, { className: "text-sm font-medium", style: { color: colors.textMuted }, children: title }) }),
-        /* @__PURE__ */ jsx29(AppView, { className: "flex-1", children: values.map((value) => {
-          const selected = selectedValue === value;
-          const disabled = isDisabled(value);
-          return /* @__PURE__ */ jsx29(
-            TouchableOpacity6,
-            {
-              className: cn("py-2 items-center", selected && "bg-primary-50"),
-              style: selected ? { backgroundColor: colors.primarySurface } : void 0,
-              disabled,
-              onPress: () => onSelect(value),
-              children: /* @__PURE__ */ jsx29(
-                AppText,
+        column.title && /* @__PURE__ */ jsx31(AppView, { center: true, className: "py-2", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ jsx31(AppText, { className: "text-sm font-medium", style: { color: colors.textMuted }, children: column.title }) }),
+        /* @__PURE__ */ jsxs12(
+          AppView,
+          {
+            style: [
+              styles12.wheelViewport,
+              {
+                height: rowHeight * visibleRows,
+                backgroundColor: colors.surface
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx31(
+                ScrollView2,
                 {
-                  className: cn(selected ? "font-semibold" : void 0, disabled && "opacity-30"),
-                  style: {
-                    color: selected ? colors.primary : colors.textSecondary
-                  },
-                  children: formatLabel(value)
+                  ref: scrollRef,
+                  showsVerticalScrollIndicator: false,
+                  snapToInterval: rowHeight,
+                  decelerationRate: "fast",
+                  onMomentumScrollEnd: handleScrollEnd,
+                  onScrollEndDrag: handleScrollEnd,
+                  contentContainerStyle: { paddingVertical: rowHeight * paddingRows },
+                  children: column.options.map((option, index) => {
+                    const selected = option.value === selectedValue;
+                    return /* @__PURE__ */ jsx31(
+                      TouchableOpacity6,
+                      {
+                        disabled: option.disabled,
+                        onPress: () => {
+                          if (option.disabled) return;
+                          onChange(option.value);
+                          scrollToIndex(index, true);
+                        },
+                        style: [
+                          styles12.optionButton,
+                          {
+                            height: rowHeight,
+                            opacity: option.disabled ? 0.35 : selected ? 1 : 0.72
+                          }
+                        ],
+                        children: /* @__PURE__ */ jsx31(
+                          AppText,
+                          {
+                            className: cn(selected ? "font-semibold" : void 0),
+                            style: { color: selected ? colors.primary : colors.text },
+                            children: option.label
+                          }
+                        )
+                      },
+                      `${column.key}-${String(option.value)}-${index}`
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                AppView,
+                {
+                  pointerEvents: "none",
+                  style: [
+                    styles12.fadeMask,
+                    {
+                      top: 0,
+                      height: rowHeight * paddingRows
+                    }
+                  ],
+                  children: [0.92, 0.72, 0.48, 0.24].map((opacity) => /* @__PURE__ */ jsx31(
+                    AppView,
+                    {
+                      flex: true,
+                      style: { backgroundColor: colors.surface, opacity }
+                    },
+                    `top-${opacity}`
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                AppView,
+                {
+                  pointerEvents: "none",
+                  style: [
+                    styles12.fadeMask,
+                    {
+                      bottom: 0,
+                      height: rowHeight * paddingRows
+                    }
+                  ],
+                  children: [0.24, 0.48, 0.72, 0.92].map((opacity) => /* @__PURE__ */ jsx31(
+                    AppView,
+                    {
+                      flex: true,
+                      style: { backgroundColor: colors.surface, opacity }
+                    },
+                    `bottom-${opacity}`
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx31(
+                AppView,
+                {
+                  pointerEvents: "none",
+                  style: [
+                    styles12.selectionOverlay,
+                    {
+                      top: rowHeight * paddingRows,
+                      height: rowHeight,
+                      borderColor: colors.divider,
+                      backgroundColor: colors.primarySurface
+                    }
+                  ]
                 }
               )
-            },
-            value
-          );
-        }) })
+            ]
+          }
+        )
       ]
     }
   );
 }
-function DatePicker({
+function Picker({
   value,
   onChange,
-  placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
+  columns,
+  placeholder = "\u8BF7\u9009\u62E9",
   disabled = false,
-  format = "yyyy-MM-dd",
-  minDate,
-  maxDate,
   className,
+  pickerTitle = "\u8BF7\u9009\u62E9",
   cancelText = "\u53D6\u6D88",
   confirmText = "\u786E\u5B9A",
-  pickerTitle = "\u9009\u62E9\u65E5\u671F",
-  pickerDateFormat = "yyyy\u5E74MM\u6708dd\u65E5",
-  yearLabel = "\u5E74",
-  monthLabel = "\u6708",
-  dayLabel = "\u65E5",
-  todayText = "\u4ECA\u5929",
-  minDateText = "\u6700\u65E9",
-  maxDateText = "\u6700\u665A"
+  triggerIconName = "keyboard-arrow-down",
+  renderDisplayText,
+  renderFooter,
+  tempValue,
+  defaultTempValue,
+  onTempChange,
+  onOpen,
+  rowHeight = 40,
+  visibleRows = 5
 }) {
   const colors = useFormThemeColors();
-  const [visible, setVisible] = useState18(false);
-  const [tempDate, setTempDate] = useState18(value || /* @__PURE__ */ new Date());
-  const displayText = useMemo6(() => {
-    return value ? formatDate(value, format) : placeholder;
-  }, [value, format, placeholder]);
-  const handleConfirm = useCallback14(() => {
-    onChange?.(tempDate);
-    setVisible(false);
-  }, [tempDate, onChange]);
-  const years = useMemo6(() => {
-    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-    const arr = [];
-    for (let i = currentYear - 50; i <= currentYear + 50; i++) {
-      arr.push(i);
+  const [visible, setVisible] = useState20(false);
+  const [internalTempValues, setInternalTempValues] = useState20(
+    normalizeValues(columns, defaultTempValue ?? value)
+  );
+  const isControlledTemp = tempValue !== void 0;
+  const tempValues = useMemo8(
+    () => isControlledTemp ? normalizeValues(columns, tempValue) : internalTempValues,
+    [columns, internalTempValues, isControlledTemp, tempValue]
+  );
+  useEffect10(() => {
+    if (!isControlledTemp) {
+      setInternalTempValues((previous) => normalizeValues(columns, previous));
     }
-    return arr;
-  }, []);
-  const months = useMemo6(() => {
-    return Array.from({ length: 12 }, (_, i) => i + 1);
-  }, []);
-  const days = useMemo6(() => {
-    const year = tempDate.getFullYear();
-    const month = tempDate.getMonth();
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
-  }, [tempDate]);
-  const isDateDisabled = useCallback14(
-    (year, month, day) => {
-      const date = new Date(year, month - 1, day);
-      if (minDate && date < minDate) return true;
-      if (maxDate && date > maxDate) return true;
-      return false;
+  }, [columns, isControlledTemp]);
+  const selectedOptions = useMemo8(
+    () => columns.map(
+      (column, index) => column.options.find((option) => option.value === value?.[index] && !option.disabled)
+    ),
+    [columns, value]
+  );
+  const displayText = useMemo8(() => {
+    if (!value || value.length === 0) return placeholder;
+    if (renderDisplayText) return renderDisplayText(selectedOptions);
+    const labels = selectedOptions.map((option) => option?.label).filter(Boolean);
+    return labels.length > 0 ? labels.join(" / ") : placeholder;
+  }, [placeholder, renderDisplayText, selectedOptions, value]);
+  const setTempValues = useCallback15(
+    (nextValues) => {
+      const normalized = normalizeValues(columns, nextValues);
+      if (isControlledTemp) {
+        onTempChange?.(normalized);
+        return;
+      }
+      setInternalTempValues(normalized);
+      onTempChange?.(normalized);
     },
-    [minDate, maxDate]
+    [columns, isControlledTemp, onTempChange]
   );
-  const updateTempDate = useCallback14(
-    (year, month, day) => {
-      const newDate = new Date(tempDate);
-      if (year !== void 0) newDate.setFullYear(year);
-      if (month !== void 0) newDate.setMonth(month - 1);
-      if (day !== void 0) newDate.setDate(day);
-      setTempDate(newDate);
+  const updateColumnValue = useCallback15(
+    (columnIndex, nextValue) => {
+      const nextValues = [...tempValues];
+      nextValues[columnIndex] = nextValue;
+      setTempValues(nextValues);
     },
-    [tempDate]
+    [setTempValues, tempValues]
   );
-  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    /* @__PURE__ */ jsxs11(
+  const openModal = useCallback15(() => {
+    const normalized = normalizeValues(columns, tempValue ?? value ?? defaultTempValue);
+    if (!isControlledTemp) {
+      setInternalTempValues(normalized);
+    }
+    onTempChange?.(normalized);
+    onOpen?.();
+    setVisible(true);
+  }, [
+    columns,
+    defaultTempValue,
+    isControlledTemp,
+    onOpen,
+    onTempChange,
+    tempValue,
+    value
+  ]);
+  const handleConfirm = useCallback15(() => {
+    onChange?.(tempValues);
+    setVisible(false);
+  }, [onChange, tempValues]);
+  return /* @__PURE__ */ jsxs12(Fragment3, { children: [
+    /* @__PURE__ */ jsxs12(
       AppPressable,
       {
         className: cn(
@@ -3209,147 +4151,252 @@ function DatePicker({
           disabled ? "opacity-60" : "",
           className
         ),
-        style: [styles11.trigger, { backgroundColor: colors.surface, borderColor: colors.border }],
+        style: [styles12.trigger, { backgroundColor: colors.surface, borderColor: colors.border }],
         disabled,
-        onPress: () => {
-          setTempDate(value || /* @__PURE__ */ new Date());
-          setVisible(true);
-        },
+        onPress: openModal,
         children: [
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx31(
             AppText,
             {
               className: "flex-1",
-              style: { color: value ? colors.text : colors.textMuted },
+              style: { color: value && value.length > 0 ? colors.text : colors.textMuted },
               numberOfLines: 1,
               children: displayText
             }
           ),
-          /* @__PURE__ */ jsx29(Icon, { name: "calendar-today", size: "md", color: colors.icon })
+          /* @__PURE__ */ jsx31(Icon, { name: triggerIconName, size: "md", color: colors.icon })
         ]
       }
     ),
-    /* @__PURE__ */ jsx29(
-      Modal4,
+    /* @__PURE__ */ jsx31(
+      BottomSheetModal,
       {
         visible,
-        transparent: true,
-        animationType: "slide",
         onRequestClose: () => setVisible(false),
-        children: /* @__PURE__ */ jsx29(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ jsxs11(AppView, { className: "rounded-t-2xl", style: { backgroundColor: colors.surface }, children: [
-          /* @__PURE__ */ jsxs11(
+        overlayColor: colors.overlay,
+        surfaceColor: colors.surface,
+        closeOnBackdropPress: true,
+        children: /* @__PURE__ */ jsxs12(Fragment3, { children: [
+          /* @__PURE__ */ jsxs12(
             AppView,
             {
               row: true,
               between: true,
               items: "center",
               className: "px-4 py-3",
-              style: [styles11.header, { borderBottomColor: colors.divider }],
+              style: [styles12.header, { borderBottomColor: colors.divider }],
               children: [
-                /* @__PURE__ */ jsx29(TouchableOpacity6, { onPress: () => setVisible(false), children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.textMuted }, children: cancelText }) }),
-                /* @__PURE__ */ jsx29(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: pickerTitle }),
-                /* @__PURE__ */ jsx29(TouchableOpacity6, { onPress: handleConfirm, children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.primary }, className: "font-medium", children: confirmText }) })
+                /* @__PURE__ */ jsx31(TouchableOpacity6, { onPress: () => setVisible(false), children: /* @__PURE__ */ jsx31(AppText, { style: { color: colors.textMuted }, children: cancelText }) }),
+                /* @__PURE__ */ jsx31(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: pickerTitle }),
+                /* @__PURE__ */ jsx31(TouchableOpacity6, { onPress: handleConfirm, children: /* @__PURE__ */ jsx31(AppText, { className: "font-medium", style: { color: colors.primary }, children: confirmText }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx29(AppView, { center: true, className: "py-4", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ jsx29(AppText, { className: "text-2xl font-semibold", style: { color: colors.text }, children: formatDate(tempDate, pickerDateFormat) }) }),
-          /* @__PURE__ */ jsxs11(AppView, { row: true, className: "h-48", children: [
-            /* @__PURE__ */ jsx29(
-              PickerColumn,
-              {
-                title: yearLabel,
-                values: years,
-                selectedValue: tempDate.getFullYear(),
-                onSelect: (year) => updateTempDate(year),
-                isDisabled: (year) => isDateDisabled(year, tempDate.getMonth() + 1, tempDate.getDate()),
-                colors,
-                showDivider: true
-              }
-            ),
-            /* @__PURE__ */ jsx29(
-              PickerColumn,
-              {
-                title: monthLabel,
-                values: months,
-                selectedValue: tempDate.getMonth() + 1,
-                onSelect: (month) => updateTempDate(void 0, month),
-                isDisabled: (month) => isDateDisabled(tempDate.getFullYear(), month, tempDate.getDate()),
-                formatLabel: (month) => `${month}\u6708`,
-                colors,
-                showDivider: true
-              }
-            ),
-            /* @__PURE__ */ jsx29(
-              PickerColumn,
-              {
-                title: dayLabel,
-                values: days,
-                selectedValue: tempDate.getDate(),
-                onSelect: (day) => updateTempDate(void 0, void 0, day),
-                isDisabled: (day) => isDateDisabled(tempDate.getFullYear(), tempDate.getMonth() + 1, day),
-                colors
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsx31(AppView, { row: true, children: columns.map((column, index) => /* @__PURE__ */ jsx31(
+            WheelPickerColumn,
+            {
+              colors,
+              column,
+              onChange: (nextValue) => updateColumnValue(index, nextValue),
+              rowHeight,
+              selectedValue: tempValues[index],
+              showDivider: index < columns.length - 1,
+              visibleRows
+            },
+            column.key
+          )) }),
+          renderFooter && /* @__PURE__ */ jsx31(
             AppView,
             {
-              row: true,
-              className: "px-4 py-3 gap-2",
-              style: [styles11.footer, { borderTopColor: colors.divider }],
-              children: [
-                /* @__PURE__ */ jsx29(
-                  TouchableOpacity6,
-                  {
-                    className: "flex-1 py-2 items-center rounded-lg",
-                    style: { backgroundColor: colors.surfaceMuted },
-                    onPress: () => setTempDate(/* @__PURE__ */ new Date()),
-                    children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.text }, children: todayText })
-                  }
-                ),
-                minDate && /* @__PURE__ */ jsx29(
-                  TouchableOpacity6,
-                  {
-                    className: "flex-1 py-2 items-center rounded-lg",
-                    style: { backgroundColor: colors.surfaceMuted },
-                    onPress: () => setTempDate(minDate),
-                    children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.text }, children: minDateText })
-                  }
-                ),
-                maxDate && /* @__PURE__ */ jsx29(
-                  TouchableOpacity6,
-                  {
-                    className: "flex-1 py-2 items-center rounded-lg",
-                    style: { backgroundColor: colors.surfaceMuted },
-                    onPress: () => setTempDate(maxDate),
-                    children: /* @__PURE__ */ jsx29(AppText, { style: { color: colors.text }, children: maxDateText })
-                  }
-                )
-              ]
+              className: "px-4 py-3",
+              style: [styles12.footer, { borderTopColor: colors.divider }],
+              children: renderFooter({ close: () => setVisible(false), setTempValues, tempValues })
             }
           )
-        ] }) })
+        ] })
       }
     )
   ] });
 }
-var styles11 = StyleSheet12.create({
+var styles12 = StyleSheet13.create({
   trigger: {
     borderWidth: 0.5
   },
   header: {
     borderBottomWidth: 0.5
   },
-  column: {
-    borderRightWidth: 0.5
+  footer: {
+    borderTopWidth: 0.5
+  },
+  columnDivider: {
+    borderRightWidth: 0.5
+  },
+  wheelViewport: {
+    position: "relative",
+    overflow: "hidden"
+  },
+  fadeMask: {
+    position: "absolute",
+    left: 0,
+    right: 0
   },
-  footer: {
-    borderTopWidth: 0.5
+  selectionOverlay: {
+    position: "absolute",
+    left: 8,
+    right: 8,
+    borderRadius: 12,
+    borderWidth: 0.5
+  },
+  optionButton: {
+    alignItems: "center",
+    justifyContent: "center"
   }
 });
 
+// src/ui/form/DatePicker.tsx
+import { useCallback as useCallback16, useEffect as useEffect11, useMemo as useMemo9, useState as useState21 } from "react";
+import { TouchableOpacity as TouchableOpacity7 } from "react-native";
+import { jsx as jsx32 } from "nativewind/jsx-runtime";
+function createSafeDate(year, month, day) {
+  const daysInMonth = new Date(year, month, 0).getDate();
+  return new Date(year, month - 1, Math.min(day, daysInMonth));
+}
+function getDateValues(date) {
+  return [date.getFullYear(), date.getMonth() + 1, date.getDate()];
+}
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
+  disabled = false,
+  format = "yyyy-MM-dd",
+  minDate,
+  maxDate,
+  className,
+  cancelText = "\u53D6\u6D88",
+  confirmText = "\u786E\u5B9A",
+  pickerTitle = "\u9009\u62E9\u65E5\u671F",
+  pickerDateFormat: _pickerDateFormat = "yyyy\u5E74MM\u6708dd\u65E5",
+  yearLabel = "\u5E74",
+  monthLabel = "\u6708",
+  dayLabel = "\u65E5",
+  todayText = "\u4ECA\u5929",
+  minDateText = "\u6700\u65E9",
+  maxDateText = "\u6700\u665A"
+}) {
+  const colors = useFormThemeColors();
+  const [tempDate, setTempDate] = useState21(value || /* @__PURE__ */ new Date());
+  useEffect11(() => {
+    if (value) setTempDate(value);
+  }, [value]);
+  const years = useMemo9(() => {
+    const baseYear = value?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear();
+    const startYear = minDate?.getFullYear() ?? baseYear - 50;
+    const endYear = maxDate?.getFullYear() ?? baseYear + 50;
+    return Array.from({ length: endYear - startYear + 1 }, (_, index) => startYear + index);
+  }, [maxDate, minDate, value]);
+  const months = useMemo9(() => Array.from({ length: 12 }, (_, index) => index + 1), []);
+  const days = useMemo9(() => {
+    const daysInMonth = new Date(tempDate.getFullYear(), tempDate.getMonth() + 1, 0).getDate();
+    return Array.from({ length: daysInMonth }, (_, index) => index + 1);
+  }, [tempDate]);
+  const isDateDisabled = useCallback16(
+    (year, month, day) => {
+      const date = createSafeDate(year, month, day);
+      if (minDate && date < minDate) return true;
+      if (maxDate && date > maxDate) return true;
+      return false;
+    },
+    [maxDate, minDate]
+  );
+  const columns = useMemo9(
+    () => [
+      {
+        key: "year",
+        title: yearLabel,
+        options: years.map((year) => ({
+          label: String(year),
+          value: year,
+          disabled: isDateDisabled(year, tempDate.getMonth() + 1, tempDate.getDate())
+        }))
+      },
+      {
+        key: "month",
+        title: monthLabel,
+        options: months.map((month) => ({
+          label: `${month}\u6708`,
+          value: month,
+          disabled: isDateDisabled(tempDate.getFullYear(), month, tempDate.getDate())
+        }))
+      },
+      {
+        key: "day",
+        title: dayLabel,
+        options: days.map((day) => ({
+          label: `${day}\u65E5`,
+          value: day,
+          disabled: isDateDisabled(tempDate.getFullYear(), tempDate.getMonth() + 1, day)
+        }))
+      }
+    ],
+    [dayLabel, days, isDateDisabled, monthLabel, months, tempDate, yearLabel, years]
+  );
+  const handleTempChange = useCallback16((nextValues) => {
+    const [nextYear, nextMonth, nextDay] = nextValues;
+    if (typeof nextYear !== "number" || typeof nextMonth !== "number" || typeof nextDay !== "number") {
+      return;
+    }
+    setTempDate(createSafeDate(nextYear, nextMonth, nextDay));
+  }, []);
+  const handleChange = useCallback16(
+    (nextValues) => {
+      const [nextYear, nextMonth, nextDay] = nextValues;
+      if (typeof nextYear !== "number" || typeof nextMonth !== "number" || typeof nextDay !== "number") {
+        return;
+      }
+      onChange?.(createSafeDate(nextYear, nextMonth, nextDay));
+    },
+    [onChange]
+  );
+  const quickActions = useMemo9(() => {
+    const actions = [{ label: todayText, date: /* @__PURE__ */ new Date() }];
+    if (minDate) actions.push({ label: minDateText, date: minDate });
+    if (maxDate) actions.push({ label: maxDateText, date: maxDate });
+    return actions;
+  }, [maxDate, maxDateText, minDate, minDateText, todayText]);
+  return /* @__PURE__ */ jsx32(
+    Picker,
+    {
+      value: value ? getDateValues(value) : void 0,
+      tempValue: getDateValues(tempDate),
+      onTempChange: handleTempChange,
+      onChange: handleChange,
+      onOpen: () => setTempDate(value || /* @__PURE__ */ new Date()),
+      columns,
+      placeholder,
+      disabled,
+      className,
+      pickerTitle,
+      cancelText,
+      confirmText,
+      triggerIconName: "calendar-today",
+      renderDisplayText: () => value ? formatDate(value, format) : placeholder,
+      renderFooter: () => /* @__PURE__ */ jsx32(AppView, { row: true, className: "gap-2", children: quickActions.map((action) => /* @__PURE__ */ jsx32(
+        TouchableOpacity7,
+        {
+          className: "flex-1 py-2 items-center rounded-lg",
+          style: { backgroundColor: colors.surfaceMuted },
+          onPress: () => setTempDate(action.date),
+          children: /* @__PURE__ */ jsx32(AppText, { style: { color: colors.text }, children: action.label })
+        },
+        action.label
+      )) })
+    }
+  );
+}
+
 // src/ui/form/FormItem.tsx
-import { jsx as jsx30, jsxs as jsxs12 } from "nativewind/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs13 } from "nativewind/jsx-runtime";
 function FormItem({
   name: _name,
   label,
@@ -3361,19 +4408,19 @@ function FormItem({
   labelClassName
 }) {
   const colors = useThemeColors();
-  return /* @__PURE__ */ jsxs12(AppView, { className: cn("mb-4", className), children: [
-    label && /* @__PURE__ */ jsxs12(AppView, { row: true, items: "center", gap: 1, className: cn("mb-2", labelClassName), children: [
-      /* @__PURE__ */ jsx30(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
-      required && /* @__PURE__ */ jsx30(AppText, { color: "error-500", children: "*" })
+  return /* @__PURE__ */ jsxs13(AppView, { className: cn("mb-4", className), children: [
+    label && /* @__PURE__ */ jsxs13(AppView, { row: true, items: "center", gap: 1, className: cn("mb-2", labelClassName), children: [
+      /* @__PURE__ */ jsx33(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
+      required && /* @__PURE__ */ jsx33(AppText, { color: "error-500", children: "*" })
     ] }),
     children,
-    error && /* @__PURE__ */ jsx30(AppText, { size: "sm", color: "error-500", className: "mt-1", children: error }),
-    help && !error && /* @__PURE__ */ jsx30(AppText, { size: "sm", className: "mt-1", style: { color: colors.textMuted }, children: help })
+    error && /* @__PURE__ */ jsx33(AppText, { size: "sm", color: "error-500", className: "mt-1", children: error }),
+    help && !error && /* @__PURE__ */ jsx33(AppText, { size: "sm", className: "mt-1", style: { color: colors.textMuted }, children: help })
   ] });
 }
 
 // src/ui/form/useForm.ts
-import { useState as useState19, useCallback as useCallback15, useMemo as useMemo7 } from "react";
+import { useState as useState22, useCallback as useCallback17, useMemo as useMemo10 } from "react";
 var getIssuePath = (issue) => issue.path.map(String).join(".");
 var getFieldError = (issues, name) => {
   const exactIssue = issues.find((issue) => getIssuePath(issue) === name);
@@ -3389,16 +4436,16 @@ var buildFormErrors = (issues) => {
   }, {});
 };
 function useForm({ schema, defaultValues }) {
-  const [values, setValues] = useState19(defaultValues);
-  const [errors, setErrors] = useState19({});
-  const [isSubmitting, setIsSubmitting] = useState19(false);
-  const isDirty = useMemo7(() => {
+  const [values, setValues] = useState22(defaultValues);
+  const [errors, setErrors] = useState22({});
+  const [isSubmitting, setIsSubmitting] = useState22(false);
+  const isDirty = useMemo10(() => {
     return JSON.stringify(values) !== JSON.stringify(defaultValues);
   }, [values, defaultValues]);
-  const isValid = useMemo7(() => {
+  const isValid = useMemo10(() => {
     return Object.keys(errors).length === 0;
   }, [errors]);
-  const clearFieldError = useCallback15((name) => {
+  const clearFieldError = useCallback17((name) => {
     setErrors((prev) => {
       if (!(name in prev)) return prev;
       const next = { ...prev };
@@ -3406,20 +4453,20 @@ function useForm({ schema, defaultValues }) {
       return next;
     });
   }, []);
-  const setValue = useCallback15(
+  const setValue = useCallback17(
     (name, value) => {
       setValues((prev) => ({ ...prev, [name]: value }));
       clearFieldError(name);
     },
     [clearFieldError]
   );
-  const getValue = useCallback15(
+  const getValue = useCallback17(
     (name) => {
       return values[name];
     },
     [values]
   );
-  const validateField = useCallback15(
+  const validateField = useCallback17(
     async (name) => {
       const fieldName = name;
       const result = await schema.safeParseAsync(values);
@@ -3440,7 +4487,7 @@ function useForm({ schema, defaultValues }) {
     },
     [schema, values, clearFieldError]
   );
-  const validate = useCallback15(async () => {
+  const validate = useCallback17(async () => {
     const result = await schema.safeParseAsync(values);
     if (result.success) {
       setErrors({});
@@ -3449,12 +4496,12 @@ function useForm({ schema, defaultValues }) {
     setErrors(buildFormErrors(result.error.issues));
     return false;
   }, [schema, values]);
-  const reset = useCallback15(() => {
+  const reset = useCallback17(() => {
     setValues(defaultValues);
     setErrors({});
     setIsSubmitting(false);
   }, [defaultValues]);
-  const handleSubmit = useCallback15(
+  const handleSubmit = useCallback17(
     async (onSubmit) => {
       const valid = await validate();
       if (!valid) return;
@@ -3483,38 +4530,38 @@ function useForm({ schema, defaultValues }) {
 }
 
 // src/ui/hooks/useToggle.ts
-import { useCallback as useCallback16, useState as useState20 } from "react";
+import { useCallback as useCallback18, useState as useState23 } from "react";
 function useToggle(defaultValue = false) {
-  const [value, setValue] = useState20(defaultValue);
-  const toggle = useCallback16(() => {
+  const [value, setValue] = useState23(defaultValue);
+  const toggle = useCallback18(() => {
     setValue((v) => !v);
   }, []);
-  const set = useCallback16((newValue) => {
+  const set = useCallback18((newValue) => {
     setValue(newValue);
   }, []);
-  const setTrue = useCallback16(() => {
+  const setTrue = useCallback18(() => {
     setValue(true);
   }, []);
-  const setFalse = useCallback16(() => {
+  const setFalse = useCallback18(() => {
     setValue(false);
   }, []);
   return [value, { toggle, set, setTrue, setFalse }];
 }
 
 // src/ui/hooks/usePageDrawer.ts
-import { useCallback as useCallback17, useState as useState21 } from "react";
+import { useCallback as useCallback19, useState as useState24 } from "react";
 function usePageDrawer(defaultVisible = false) {
-  const [visible, setVisibleState] = useState21(defaultVisible);
-  const open = useCallback17(() => {
+  const [visible, setVisibleState] = useState24(defaultVisible);
+  const open = useCallback19(() => {
     setVisibleState(true);
   }, []);
-  const close = useCallback17(() => {
+  const close = useCallback19(() => {
     setVisibleState(false);
   }, []);
-  const toggle = useCallback17(() => {
+  const toggle = useCallback19(() => {
     setVisibleState((current) => !current);
   }, []);
-  const setVisible = useCallback17((nextVisible) => {
+  const setVisible = useCallback19((nextVisible) => {
     setVisibleState(nextVisible);
   }, []);
   return {
@@ -3527,10 +4574,10 @@ function usePageDrawer(defaultVisible = false) {
 }
 
 // src/ui/hooks/useDebounce.ts
-import { useEffect as useEffect5, useState as useState22 } from "react";
+import { useEffect as useEffect12, useState as useState25 } from "react";
 function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = useState22(value);
-  useEffect5(() => {
+  const [debouncedValue, setDebouncedValue] = useState25(value);
+  useEffect12(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -3542,11 +4589,11 @@ function useDebounce(value, delay = 500) {
 }
 
 // src/ui/hooks/useThrottle.ts
-import { useEffect as useEffect6, useRef as useRef7, useState as useState23 } from "react";
+import { useEffect as useEffect13, useRef as useRef11, useState as useState26 } from "react";
 function useThrottle(value, delay = 200) {
-  const [throttledValue, setThrottledValue] = useState23(value);
-  const lastUpdatedRef = useRef7(Date.now());
-  useEffect6(() => {
+  const [throttledValue, setThrottledValue] = useState26(value);
+  const lastUpdatedRef = useRef11(Date.now());
+  useEffect13(() => {
     const now = Date.now();
     const timeElapsed = now - lastUpdatedRef.current;
     if (timeElapsed >= delay) {
@@ -3567,12 +4614,12 @@ function useThrottle(value, delay = 200) {
 }
 
 // src/ui/hooks/useKeyboard.ts
-import { useEffect as useEffect7, useState as useState24, useCallback as useCallback18 } from "react";
-import { Keyboard, Platform } from "react-native";
+import { useEffect as useEffect14, useState as useState27, useCallback as useCallback20 } from "react";
+import { Keyboard as Keyboard5, Platform } from "react-native";
 function useKeyboard() {
-  const [visible, setVisible] = useState24(false);
-  const [height, setHeight] = useState24(0);
-  useEffect7(() => {
+  const [visible, setVisible] = useState27(false);
+  const [height, setHeight] = useState27(0);
+  useEffect14(() => {
     const handleKeyboardWillShow = (event) => {
       setVisible(true);
       setHeight(event.endCoordinates.height);
@@ -3589,11 +4636,11 @@ function useKeyboard() {
       setVisible(false);
       setHeight(0);
     };
-    const willShowSub = Keyboard.addListener(
+    const willShowSub = Keyboard5.addListener(
       Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
       Platform.OS === "ios" ? handleKeyboardWillShow : handleKeyboardDidShow
     );
-    const willHideSub = Keyboard.addListener(
+    const willHideSub = Keyboard5.addListener(
       Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
       Platform.OS === "ios" ? handleKeyboardWillHide : handleKeyboardDidHide
     );
@@ -3602,17 +4649,17 @@ function useKeyboard() {
       willHideSub.remove();
     };
   }, []);
-  const dismiss = useCallback18(() => {
-    Keyboard.dismiss();
+  const dismiss = useCallback20(() => {
+    Keyboard5.dismiss();
   }, []);
   return { visible, height, dismiss };
 }
 
 // src/ui/hooks/useDimensions.ts
-import { useEffect as useEffect8, useState as useState25 } from "react";
+import { useEffect as useEffect15, useState as useState28 } from "react";
 import { Dimensions } from "react-native";
 function useDimensions() {
-  const [dimensions, setDimensions] = useState25(() => {
+  const [dimensions, setDimensions] = useState28(() => {
     const window = Dimensions.get("window");
     return {
       width: window.width,
@@ -3621,7 +4668,7 @@ function useDimensions() {
       fontScale: window.fontScale
     };
   });
-  useEffect8(() => {
+  useEffect15(() => {
     const handleChange = ({ window }) => {
       setDimensions({
         width: window.width,
@@ -3639,15 +4686,15 @@ function useDimensions() {
 }
 
 // src/ui/hooks/useOrientation.ts
-import { useEffect as useEffect9, useState as useState26 } from "react";
+import { useEffect as useEffect16, useState as useState29 } from "react";
 import { Dimensions as Dimensions2 } from "react-native";
 function useOrientation() {
   const getOrientation = () => {
     const { width, height } = Dimensions2.get("window");
     return width > height ? "landscape" : "portrait";
   };
-  const [orientation, setOrientation] = useState26(getOrientation);
-  useEffect9(() => {
+  const [orientation, setOrientation] = useState29(getOrientation);
+  useEffect16(() => {
     const handleChange = ({ window }) => {
       const newOrientation = window.width > window.height ? "landscape" : "portrait";
       setOrientation(newOrientation);
@@ -3693,7 +4740,7 @@ function createNavigationTheme(pantherTheme, isDark) {
 }
 
 // src/navigation/provider.tsx
-import { jsx as jsx31 } from "nativewind/jsx-runtime";
+import { jsx as jsx34 } from "nativewind/jsx-runtime";
 function NavigationProvider({
   children,
   linking,
@@ -3708,7 +4755,7 @@ function NavigationProvider({
     () => customTheme || createNavigationTheme(theme, isDark),
     [customTheme, theme, isDark]
   );
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx34(
     NavigationContainer,
     {
       theme: navigationTheme,
@@ -3726,14 +4773,14 @@ function NavigationProvider({
 import { createStackNavigator, TransitionPresets } from "@react-navigation/stack";
 
 // src/navigation/navigators/StackNavigator.tsx
-import { jsx as jsx32 } from "nativewind/jsx-runtime";
+import { jsx as jsx35 } from "nativewind/jsx-runtime";
 var NativeStack = createStackNavigator();
 var defaultScreenOptions = {
   headerShown: false,
   ...TransitionPresets.SlideFromRightIOS
 };
 function StackNavigator({ initialRouteName, screenOptions, children }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx35(
     NativeStack.Navigator,
     {
       initialRouteName,
@@ -3745,7 +4792,7 @@ function StackNavigator({ initialRouteName, screenOptions, children }) {
 StackNavigator.Screen = NativeStack.Screen;
 StackNavigator.Group = NativeStack.Group;
 function createStackScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ jsx32(
+  return routes.map((route) => /* @__PURE__ */ jsx35(
     StackNavigator.Screen,
     {
       name: route.name,
@@ -3762,9 +4809,9 @@ import React7 from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 
 // src/navigation/components/BottomTabBar.tsx
-import { View as View8, TouchableOpacity as TouchableOpacity7, StyleSheet as StyleSheet13 } from "react-native";
+import { View as View8, TouchableOpacity as TouchableOpacity8, StyleSheet as StyleSheet14 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
-import { jsx as jsx33, jsxs as jsxs13 } from "nativewind/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs14 } from "nativewind/jsx-runtime";
 var DEFAULT_TAB_BAR_HEIGHT = 65;
 function BottomTabBar({
   state,
@@ -3786,11 +4833,11 @@ function BottomTabBar({
   const inactiveColor = inactiveTintColor || colors.textMuted;
   const backgroundColor = style?.backgroundColor || colors.card;
   const borderTopColor = colors.divider;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx36(
     View8,
     {
       style: [
-        styles12.container,
+        styles13.container,
         { borderTopColor },
         { backgroundColor, height: height + insets.bottom, paddingBottom: insets.bottom },
         style
@@ -3821,8 +4868,8 @@ function BottomTabBar({
           size: 24
         }) : null;
         const badge = options.tabBarBadge;
-        return /* @__PURE__ */ jsxs13(
-          TouchableOpacity7,
+        return /* @__PURE__ */ jsxs14(
+          TouchableOpacity8,
           {
             accessibilityRole: "button",
             accessibilityState: isFocused ? { selected: true } : {},
@@ -3831,21 +4878,21 @@ function BottomTabBar({
             onPress,
             onLongPress,
             style: [
-              styles12.tab,
+              styles13.tab,
               {
                 backgroundColor: isFocused ? activeBackgroundColor : inactiveBackgroundColor
               }
             ],
             children: [
-              /* @__PURE__ */ jsxs13(View8, { style: [styles12.iconContainer, iconStyle], children: [
+              /* @__PURE__ */ jsxs14(View8, { style: [styles13.iconContainer, iconStyle], children: [
                 iconName,
-                badge != null && /* @__PURE__ */ jsx33(View8, { style: [styles12.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ jsx33(AppText, { style: styles12.badgeText, children: typeof badge === "number" && badge > 99 ? "99+" : badge }) })
+                badge != null && /* @__PURE__ */ jsx36(View8, { style: [styles13.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ jsx36(AppText, { style: styles13.badgeText, children: typeof badge === "number" && badge > 99 ? "99+" : badge }) })
               ] }),
-              showLabel && /* @__PURE__ */ jsx33(
+              showLabel && /* @__PURE__ */ jsx36(
                 AppText,
                 {
                   style: [
-                    styles12.label,
+                    styles13.label,
                     { color: isFocused ? activeColor : inactiveColor },
                     labelStyle
                   ],
@@ -3861,7 +4908,7 @@ function BottomTabBar({
     }
   );
 }
-var styles12 = StyleSheet13.create({
+var styles13 = StyleSheet14.create({
   container: {
     flexDirection: "row",
     borderTopWidth: 0.5,
@@ -3904,7 +4951,7 @@ var styles12 = StyleSheet13.create({
 });
 
 // src/navigation/navigators/TabNavigator.tsx
-import { jsx as jsx34 } from "nativewind/jsx-runtime";
+import { jsx as jsx37 } from "nativewind/jsx-runtime";
 var NativeTab = createBottomTabNavigator();
 var defaultScreenOptions2 = {
   headerShown: false,
@@ -3952,7 +4999,7 @@ function TabNavigator({
   }, [tabBarOptions, screenOptions]);
   const resolvedTabBar = React7.useMemo(() => {
     if (tabBar) return tabBar;
-    return (props) => /* @__PURE__ */ jsx34(
+    return (props) => /* @__PURE__ */ jsx37(
       BottomTabBar,
       {
         ...props,
@@ -3979,7 +5026,7 @@ function TabNavigator({
     tabBarOptions?.style,
     tabBarOptions?.height
   ]);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx37(
     NativeTab.Navigator,
     {
       initialRouteName,
@@ -3991,7 +5038,7 @@ function TabNavigator({
 }
 TabNavigator.Screen = NativeTab.Screen;
 function createTabScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ jsx34(
+  return routes.map((route) => /* @__PURE__ */ jsx37(
     TabNavigator.Screen,
     {
       name: route.name,
@@ -4006,7 +5053,7 @@ function createTabScreens(routes) {
 // src/navigation/navigators/DrawerNavigator.tsx
 import React8 from "react";
 import { createDrawerNavigator } from "@react-navigation/drawer";
-import { jsx as jsx35 } from "nativewind/jsx-runtime";
+import { jsx as jsx38 } from "nativewind/jsx-runtime";
 var NativeDrawer = createDrawerNavigator();
 function DrawerNavigator({
   initialRouteName,
@@ -4036,7 +5083,7 @@ function DrawerNavigator({
       ...screenOptions
     };
   }, [screenOptions, drawerOptions, navigationTheme, theme]);
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx38(
     NativeDrawer.Navigator,
     {
       initialRouteName,
@@ -4048,7 +5095,7 @@ function DrawerNavigator({
 }
 DrawerNavigator.Screen = NativeDrawer.Screen;
 function createDrawerScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ jsx35(
+  return routes.map((route) => /* @__PURE__ */ jsx38(
     DrawerNavigator.Screen,
     {
       name: route.name,
@@ -4061,7 +5108,7 @@ function createDrawerScreens(routes) {
 }
 
 // src/navigation/components/AppHeader.tsx
-import { StyleSheet as StyleSheet17 } from "react-native";
+import { StyleSheet as StyleSheet18 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
 
 // src/overlay/AppProvider.tsx
@@ -4070,7 +5117,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 // src/overlay/AppStatusBar.tsx
 import { StatusBar } from "react-native";
 import { useIsFocused } from "@react-navigation/native";
-import { jsx as jsx36 } from "nativewind/jsx-runtime";
+import { jsx as jsx39 } from "nativewind/jsx-runtime";
 function AppStatusBar({
   barStyle = "auto",
   backgroundColor,
@@ -4080,7 +5127,7 @@ function AppStatusBar({
   const { theme, isDark } = useTheme();
   const resolvedBarStyle = barStyle === "auto" ? isDark ? "light-content" : "dark-content" : barStyle;
   const resolvedBackgroundColor = backgroundColor ?? (translucent ? "transparent" : theme.colors.background?.[500] || "#ffffff");
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx39(
     StatusBar,
     {
       barStyle: resolvedBarStyle,
@@ -4093,11 +5140,11 @@ function AppStatusBar({
 function AppFocusedStatusBar(props) {
   const isFocused = useIsFocused();
   if (!isFocused) return null;
-  return /* @__PURE__ */ jsx36(AppStatusBar, { ...props });
+  return /* @__PURE__ */ jsx39(AppStatusBar, { ...props });
 }
 
 // src/overlay/loading/provider.tsx
-import { useState as useState27, useCallback as useCallback19 } from "react";
+import { useState as useState31, useCallback as useCallback21, useEffect as useEffect18, useRef as useRef12 } from "react";
 
 // src/overlay/loading/context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -4109,15 +5156,42 @@ function useLoadingContext() {
 }
 
 // src/overlay/loading/component.tsx
-import { View as View9, Modal as Modal5, ActivityIndicator as ActivityIndicator5, StyleSheet as StyleSheet14 } from "react-native";
-import { jsx as jsx37, jsxs as jsxs14 } from "nativewind/jsx-runtime";
-function LoadingModal({ visible, text }) {
-  return /* @__PURE__ */ jsx37(Modal5, { transparent: true, visible, animationType: "fade", children: /* @__PURE__ */ jsx37(View9, { style: styles13.overlay, children: /* @__PURE__ */ jsxs14(View9, { style: [styles13.loadingBox, { backgroundColor: "rgba(0,0,0,0.8)" }], children: [
-    /* @__PURE__ */ jsx37(ActivityIndicator5, { size: "large", color: "#fff" }),
-    text && /* @__PURE__ */ jsx37(AppText, { className: "text-white mt-3 text-sm", children: text })
+import { useEffect as useEffect17, useState as useState30 } from "react";
+import { View as View9, Modal as Modal4, ActivityIndicator as ActivityIndicator5, StyleSheet as StyleSheet15 } from "react-native";
+import { jsx as jsx40, jsxs as jsxs15 } from "nativewind/jsx-runtime";
+var LOADING_CLOSE_DELAY2 = 3e4;
+function LoadingModal({
+  visible,
+  text,
+  onRequestClose
+}) {
+  const [showCloseButton, setShowCloseButton] = useState30(false);
+  useEffect17(() => {
+    if (!visible) {
+      setShowCloseButton(false);
+      return;
+    }
+    setShowCloseButton(false);
+    const timer = setTimeout(() => {
+      setShowCloseButton(true);
+    }, LOADING_CLOSE_DELAY2);
+    return () => clearTimeout(timer);
+  }, [visible]);
+  return /* @__PURE__ */ jsx40(Modal4, { transparent: true, visible, animationType: "fade", children: /* @__PURE__ */ jsx40(View9, { style: styles14.overlay, children: /* @__PURE__ */ jsxs15(View9, { style: [styles14.loadingBox, { backgroundColor: "rgba(0,0,0,0.8)" }], children: [
+    /* @__PURE__ */ jsx40(ActivityIndicator5, { size: "large", color: "#fff" }),
+    text && /* @__PURE__ */ jsx40(AppText, { className: "text-white mt-3 text-sm", children: text }),
+    showCloseButton && onRequestClose && /* @__PURE__ */ jsx40(
+      AppPressable,
+      {
+        testID: "loading-close",
+        className: "mt-3 p-1",
+        onPress: onRequestClose,
+        children: /* @__PURE__ */ jsx40(Icon, { name: "close", size: "md", color: "#ffffff" })
+      }
+    )
   ] }) }) });
 }
-var styles13 = StyleSheet14.create({
+var styles14 = StyleSheet15.create({
   overlay: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.5)",
@@ -4133,24 +5207,53 @@ var styles13 = StyleSheet14.create({
 });
 
 // src/overlay/loading/provider.tsx
-import { jsx as jsx38, jsxs as jsxs15 } from "nativewind/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs16 } from "nativewind/jsx-runtime";
+var MIN_VISIBLE_DURATION = 500;
 function LoadingProvider({ children }) {
-  const [state, setState] = useState27({ visible: false });
-  const show = useCallback19((text) => {
-    setState({ visible: true, text });
+  const [state, setState] = useState31({ visible: false });
+  const shownAtRef = useRef12(0);
+  const pendingCountRef = useRef12(0);
+  const hideTimerRef = useRef12(null);
+  const clearHideTimer = useCallback21(() => {
+    if (!hideTimerRef.current) return;
+    clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = null;
   }, []);
-  const hide = useCallback19(() => {
-    setState({ visible: false });
-  }, []);
-  return /* @__PURE__ */ jsxs15(LoadingContext.Provider, { value: { show, hide }, children: [
+  const show = useCallback21((text) => {
+    pendingCountRef.current += 1;
+    clearHideTimer();
+    setState((previous) => {
+      if (!previous.visible) {
+        shownAtRef.current = Date.now();
+      }
+      return { visible: true, text };
+    });
+  }, [clearHideTimer]);
+  const hide = useCallback21(() => {
+    pendingCountRef.current = Math.max(0, pendingCountRef.current - 1);
+    if (pendingCountRef.current > 0) return;
+    const elapsed = Date.now() - shownAtRef.current;
+    const remaining = Math.max(0, MIN_VISIBLE_DURATION - elapsed);
+    clearHideTimer();
+    if (remaining === 0) {
+      setState({ visible: false });
+      return;
+    }
+    hideTimerRef.current = setTimeout(() => {
+      hideTimerRef.current = null;
+      setState({ visible: false });
+    }, remaining);
+  }, [clearHideTimer]);
+  useEffect18(() => () => clearHideTimer(), [clearHideTimer]);
+  return /* @__PURE__ */ jsxs16(LoadingContext.Provider, { value: { show, hide }, children: [
     children,
-    /* @__PURE__ */ jsx38(LoadingModal, { ...state })
+    /* @__PURE__ */ jsx41(LoadingModal, { ...state, onRequestClose: hide })
   ] });
 }
 
 // src/overlay/toast/provider.tsx
-import { useState as useState28, useCallback as useCallback20, useRef as useRef9 } from "react";
-import { View as View10, StyleSheet as StyleSheet15 } from "react-native";
+import { useState as useState32, useCallback as useCallback22, useRef as useRef14 } from "react";
+import { View as View10, StyleSheet as StyleSheet16 } from "react-native";
 
 // src/overlay/toast/context.ts
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -4162,26 +5265,54 @@ function useToastContext() {
 }
 
 // src/overlay/toast/component.tsx
-import { useRef as useRef8, useEffect as useEffect10 } from "react";
-import { Animated } from "react-native";
-import { jsx as jsx39 } from "nativewind/jsx-runtime";
+import { useRef as useRef13, useEffect as useEffect19 } from "react";
+import { Animated as Animated4 } from "react-native";
+import { jsx as jsx42 } from "nativewind/jsx-runtime";
+function createAnimatedValue4(value) {
+  const AnimatedValue = Animated4.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
 function ToastItemView({ message, type, onHide }) {
-  const fadeAnim = useRef8(new Animated.Value(0)).current;
-  useEffect10(() => {
-    Animated.sequence([
-      Animated.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
-      Animated.delay(2500),
-      Animated.timing(fadeAnim, { toValue: 0, duration: 200, useNativeDriver: true })
+  const fadeAnim = useRef13(createAnimatedValue4(0)).current;
+  const { theme } = useOptionalTheme();
+  useEffect19(() => {
+    Animated4.sequence([
+      Animated4.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
+      Animated4.delay(2500),
+      Animated4.timing(fadeAnim, { toValue: 0, duration: 200, useNativeDriver: true })
     ]).start(onHide);
   }, []);
-  const bgColors = {
-    success: "bg-success-500",
-    error: "bg-error-500",
-    warning: "bg-warning-500",
-    info: "bg-primary-500"
+  const palette = {
+    success: {
+      backgroundColor: theme.colors.success?.[500] || "#22c55e",
+      textColor: "#ffffff"
+    },
+    error: {
+      backgroundColor: theme.colors.error?.[500] || "#ef4444",
+      textColor: "#ffffff"
+    },
+    warning: {
+      backgroundColor: theme.colors.warning?.[500] || "#f59e0b",
+      textColor: "#111827"
+    },
+    info: {
+      backgroundColor: theme.colors.info?.[500] || theme.colors.primary?.[500] || "#3b82f6",
+      textColor: "#ffffff"
+    }
   };
-  return /* @__PURE__ */ jsx39(
-    Animated.View,
+  const currentPalette = palette[type];
+  const bgStyles = {
+    success: "bg-green-500",
+    error: "bg-red-500",
+    warning: "bg-yellow-500",
+    info: "bg-blue-500"
+  };
+  return /* @__PURE__ */ jsx42(
+    Animated4.View,
     {
       style: {
         opacity: fadeAnim,
@@ -4194,17 +5325,25 @@ function ToastItemView({ message, type, onHide }) {
           }
         ]
       },
-      children: /* @__PURE__ */ jsx39(AppView, { className: `${bgColors[type]} px-4 py-3 rounded-lg mb-2 mx-4 shadow-lg`, children: /* @__PURE__ */ jsx39(AppText, { className: "text-white text-center", children: message }) })
+      children: /* @__PURE__ */ jsx42(
+        AppView,
+        {
+          testID: `toast-item-${type}`,
+          className: `${bgStyles[type]} px-4 py-3 rounded-lg mb-2 mx-4 shadow-lg`,
+          style: { backgroundColor: currentPalette.backgroundColor },
+          children: /* @__PURE__ */ jsx42(AppText, { className: "text-center", style: { color: currentPalette.textColor }, children: message })
+        }
+      )
     }
   );
 }
 
 // src/overlay/toast/provider.tsx
-import { jsx as jsx40, jsxs as jsxs16 } from "nativewind/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs17 } from "nativewind/jsx-runtime";
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState28([]);
-  const timersRef = useRef9(/* @__PURE__ */ new Map());
-  const remove = useCallback20((id) => {
+  const [toasts, setToasts] = useState32([]);
+  const timersRef = useRef14(/* @__PURE__ */ new Map());
+  const remove = useCallback22((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
     const timer = timersRef.current.get(id);
     if (timer) {
@@ -4212,7 +5351,7 @@ function ToastProvider({ children }) {
       timersRef.current.delete(id);
     }
   }, []);
-  const show = useCallback20(
+  const show = useCallback22(
     (message, type = "info", duration = 3e3) => {
       const id = Math.random().toString(36).substring(7);
       const toast = { id, message, type, duration };
@@ -4222,28 +5361,28 @@ function ToastProvider({ children }) {
     },
     [remove]
   );
-  const success = useCallback20(
+  const success = useCallback22(
     (message, duration) => show(message, "success", duration),
     [show]
   );
-  const error = useCallback20(
+  const error = useCallback22(
     (message, duration) => show(message, "error", duration),
     [show]
   );
-  const info = useCallback20(
+  const info = useCallback22(
     (message, duration) => show(message, "info", duration),
     [show]
   );
-  const warning = useCallback20(
+  const warning = useCallback22(
     (message, duration) => show(message, "warning", duration),
     [show]
   );
-  return /* @__PURE__ */ jsxs16(ToastContext.Provider, { value: { show, success, error, info, warning }, children: [
+  return /* @__PURE__ */ jsxs17(ToastContext.Provider, { value: { show, success, error, info, warning }, children: [
     children,
-    /* @__PURE__ */ jsx40(View10, { style: styles14.toastContainer, pointerEvents: "none", children: toasts.map((toast) => /* @__PURE__ */ jsx40(ToastItemView, { ...toast, onHide: () => remove(toast.id) }, toast.id)) })
+    /* @__PURE__ */ jsx43(View10, { style: styles15.toastContainer, pointerEvents: "none", children: toasts.map((toast) => /* @__PURE__ */ jsx43(ToastItemView, { ...toast, onHide: () => remove(toast.id) }, toast.id)) })
   ] });
 }
-var styles14 = StyleSheet15.create({
+var styles15 = StyleSheet16.create({
   toastContainer: {
     position: "absolute",
     top: 60,
@@ -4254,7 +5393,7 @@ var styles14 = StyleSheet15.create({
 });
 
 // src/overlay/alert/provider.tsx
-import { useState as useState29, useCallback as useCallback21 } from "react";
+import { useState as useState33, useCallback as useCallback23 } from "react";
 
 // src/overlay/alert/context.ts
 import { createContext as createContext4, useContext as useContext4 } from "react";
@@ -4266,8 +5405,17 @@ function useAlertContext() {
 }
 
 // src/overlay/alert/component.tsx
-import { View as View11, Modal as Modal6, StyleSheet as StyleSheet16 } from "react-native";
-import { jsx as jsx41, jsxs as jsxs17 } from "nativewind/jsx-runtime";
+import { useEffect as useEffect20, useRef as useRef15 } from "react";
+import { View as View11, Modal as Modal5, StyleSheet as StyleSheet17, Animated as Animated5 } from "react-native";
+import { jsx as jsx44, jsxs as jsxs18 } from "nativewind/jsx-runtime";
+function createAnimatedValue5(value) {
+  const AnimatedValue = Animated5.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
 function AlertModal({
   visible,
   title,
@@ -4278,23 +5426,67 @@ function AlertModal({
   onConfirm,
   onCancel
 }) {
+  const progress = useRef15(createAnimatedValue5(0)).current;
+  useEffect20(() => {
+    if (!visible) {
+      progress.setValue(0);
+      return;
+    }
+    progress.setValue(0);
+    Animated5.timing(progress, {
+      toValue: 1,
+      duration: 220,
+      useNativeDriver: true
+    }).start();
+  }, [progress, visible]);
   if (!visible) return null;
-  return /* @__PURE__ */ jsx41(Modal6, { transparent: true, visible: true, animationType: "fade", children: /* @__PURE__ */ jsx41(View11, { style: styles15.overlay, children: /* @__PURE__ */ jsxs17(View11, { style: styles15.alertBox, children: [
-    title && /* @__PURE__ */ jsx41(AppText, { className: "text-lg font-semibold text-center mb-2", children: title }),
-    message && /* @__PURE__ */ jsx41(AppText, { className: "text-gray-600 text-center mb-4", children: message }),
-    /* @__PURE__ */ jsxs17(AppView, { row: true, gap: 3, className: "mt-2", children: [
-      showCancel && /* @__PURE__ */ jsx41(AppPressable, { onPress: onCancel, className: "flex-1 py-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsx41(AppText, { className: "text-center text-gray-700", children: cancelText || "\u53D6\u6D88" }) }),
-      /* @__PURE__ */ jsx41(AppPressable, { onPress: onConfirm, className: "flex-1 py-3 bg-primary-500 rounded-lg", children: /* @__PURE__ */ jsx41(AppText, { className: "text-center text-white", children: confirmText || "\u786E\u5B9A" }) })
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsx44(Modal5, { transparent: true, visible: true, animationType: "none", children: /* @__PURE__ */ jsxs18(View11, { style: styles16.container, children: [
+    /* @__PURE__ */ jsx44(Animated5.View, { style: [styles16.overlay, { opacity: progress }] }),
+    /* @__PURE__ */ jsxs18(
+      Animated5.View,
+      {
+        style: [
+          styles16.alertBox,
+          {
+            opacity: progress,
+            transform: [
+              {
+                translateY: progress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [16, 0]
+                })
+              },
+              {
+                scale: progress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0.96, 1]
+                })
+              }
+            ]
+          }
+        ],
+        children: [
+          title && /* @__PURE__ */ jsx44(AppText, { className: "text-lg font-semibold text-center mb-2", children: title }),
+          message && /* @__PURE__ */ jsx44(AppText, { className: "text-gray-600 text-center mb-4", children: message }),
+          /* @__PURE__ */ jsxs18(AppView, { row: true, gap: 3, className: "mt-2", children: [
+            showCancel && /* @__PURE__ */ jsx44(AppPressable, { onPress: onCancel, className: "flex-1 py-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsx44(AppText, { className: "text-center text-gray-700", children: cancelText || "\u53D6\u6D88" }) }),
+            /* @__PURE__ */ jsx44(AppPressable, { onPress: onConfirm, className: "flex-1 py-3 bg-primary-500 rounded-lg", children: /* @__PURE__ */ jsx44(AppText, { className: "text-center text-white", children: confirmText || "\u786E\u5B9A" }) })
+          ] })
+        ]
+      }
+    )
+  ] }) });
 }
-var styles15 = StyleSheet16.create({
-  overlay: {
+var styles16 = StyleSheet17.create({
+  container: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.5)",
     justifyContent: "center",
     alignItems: "center"
   },
+  overlay: {
+    ...StyleSheet17.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.5)"
+  },
   alertBox: {
     backgroundColor: "white",
     borderRadius: 12,
@@ -4310,32 +5502,32 @@ var styles15 = StyleSheet16.create({
 });
 
 // src/overlay/alert/provider.tsx
-import { jsx as jsx42, jsxs as jsxs18 } from "nativewind/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs19 } from "nativewind/jsx-runtime";
 function AlertProvider({ children }) {
-  const [alert, setAlert] = useState29(null);
-  const showAlert = useCallback21((options) => {
+  const [alert, setAlert] = useState33(null);
+  const showAlert = useCallback23((options) => {
     setAlert({ ...options, visible: true });
   }, []);
-  const confirm = useCallback21(
+  const confirm = useCallback23(
     (options) => {
       showAlert({ ...options, showCancel: true });
     },
     [showAlert]
   );
-  const hide = useCallback21(() => {
+  const hide = useCallback23(() => {
     setAlert(null);
   }, []);
-  const handleConfirm = useCallback21(() => {
+  const handleConfirm = useCallback23(() => {
     alert?.onConfirm?.();
     hide();
   }, [alert, hide]);
-  const handleCancel = useCallback21(() => {
+  const handleCancel = useCallback23(() => {
     alert?.onCancel?.();
     hide();
   }, [alert, hide]);
-  return /* @__PURE__ */ jsxs18(AlertContext.Provider, { value: { alert: showAlert, confirm }, children: [
+  return /* @__PURE__ */ jsxs19(AlertContext.Provider, { value: { alert: showAlert, confirm }, children: [
     children,
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx45(
       AlertModal,
       {
         visible: alert?.visible ?? false,
@@ -4351,14 +5543,378 @@ function AlertProvider({ children }) {
   ] });
 }
 
+// src/overlay/logger/provider.tsx
+import { useCallback as useCallback24, useEffect as useEffect21, useMemo as useMemo12, useState as useState35 } from "react";
+
+// src/overlay/logger/context.ts
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var LoggerContext = createContext5(null);
+function useLoggerContext() {
+  const ctx = useContext5(LoggerContext);
+  if (!ctx) throw new Error("useLogger must be used within LoggerProvider");
+  return ctx;
+}
+
+// src/overlay/logger/component.tsx
+import { useMemo as useMemo11, useState as useState34 } from "react";
+import { jsx as jsx46, jsxs as jsxs20 } from "nativewind/jsx-runtime";
+var FILTERS = ["all", "error", "warn", "info", "debug"];
+var ALL_NAMESPACE = "all";
+var DEFAULT_SEARCH_PLACEHOLDER = "\u641C\u7D22\u65E5\u5FD7";
+function withAlpha(color, alpha = "20") {
+  return color.startsWith("#") && color.length === 7 ? `${color}${alpha}` : color;
+}
+function matchesSearch(entry, keyword) {
+  if (!keyword.trim()) return true;
+  const normalized = keyword.trim().toLowerCase();
+  const detail = stringifyLogData(entry.data).toLowerCase();
+  return [entry.message, entry.namespace ?? "", detail].join(" ").toLowerCase().includes(normalized);
+}
+function LogOverlay({
+  entries,
+  onClear,
+  defaultExpanded = false,
+  exportEnabled = true,
+  onExport
+}) {
+  const colors = useThemeColors();
+  const [expanded, setExpanded] = useState34(defaultExpanded);
+  const [filter, setFilter] = useState34("all");
+  const [namespaceFilter, setNamespaceFilter] = useState34(ALL_NAMESPACE);
+  const [keyword, setKeyword] = useState34("");
+  const namespaces = useMemo11(
+    () => [
+      ALL_NAMESPACE,
+      ...Array.from(
+        new Set(
+          entries.map((entry) => entry.namespace).filter((value) => Boolean(value))
+        )
+      )
+    ],
+    [entries]
+  );
+  const filteredEntries = useMemo11(() => {
+    return entries.filter((entry) => {
+      const levelMatched = filter === "all" ? true : entry.level === filter;
+      const namespaceMatched = namespaceFilter === ALL_NAMESPACE ? true : entry.namespace === namespaceFilter;
+      const searchMatched = matchesSearch(entry, keyword);
+      return levelMatched && namespaceMatched && searchMatched;
+    });
+  }, [entries, filter, keyword, namespaceFilter]);
+  const levelStyles = {
+    debug: { text: colors.muted, bg: colors.cardElevated },
+    info: { text: colors.info, bg: withAlpha(colors.info) },
+    warn: { text: colors.warning, bg: withAlpha(colors.warning) },
+    error: { text: colors.error, bg: withAlpha(colors.error) }
+  };
+  const handleExport = () => {
+    const payload = {
+      entries: filteredEntries,
+      serialized: serializeLogEntries(filteredEntries)
+    };
+    if (onExport) {
+      onExport(payload);
+      return;
+    }
+    console.info("[LoggerExport]", payload.serialized);
+  };
+  return /* @__PURE__ */ jsxs20(AppView, { pointerEvents: "box-none", style: { position: "absolute", right: 12, bottom: 24, left: 12, zIndex: 9998 }, children: [
+    expanded && /* @__PURE__ */ jsxs20(
+      AppView,
+      {
+        testID: "logger-overlay-panel",
+        style: {
+          maxHeight: 360,
+          borderRadius: 16,
+          backgroundColor: colors.card,
+          borderWidth: 0.5,
+          borderColor: colors.border,
+          shadowColor: "#000000",
+          shadowOpacity: 0.15,
+          shadowRadius: 16,
+          shadowOffset: { width: 0, height: 8 },
+          elevation: 12,
+          marginBottom: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxs20(AppView, { row: true, items: "center", justify: "between", className: "px-4 py-3", style: { borderBottomWidth: 0.5, borderBottomColor: colors.divider }, children: [
+            /* @__PURE__ */ jsx46(AppText, { weight: "semibold", children: "\u5F00\u53D1\u65E5\u5FD7" }),
+            /* @__PURE__ */ jsxs20(AppView, { row: true, gap: 2, children: [
+              exportEnabled ? /* @__PURE__ */ jsx46(AppPressable, { testID: "logger-overlay-export", onPress: handleExport, className: "px-3 py-1 rounded-full", style: { backgroundColor: colors.cardElevated }, children: /* @__PURE__ */ jsx46(AppText, { size: "xs", tone: "muted", children: "\u5BFC\u51FA" }) }) : null,
+              /* @__PURE__ */ jsx46(AppPressable, { onPress: onClear, className: "px-3 py-1 rounded-full", style: { backgroundColor: colors.cardElevated }, children: /* @__PURE__ */ jsx46(AppText, { size: "xs", tone: "muted", children: "\u6E05\u7A7A" }) }),
+              /* @__PURE__ */ jsx46(AppPressable, { onPress: () => setExpanded(false), className: "px-3 py-1 rounded-full", style: { backgroundColor: colors.cardElevated }, children: /* @__PURE__ */ jsx46(AppText, { size: "xs", tone: "muted", children: "\u6536\u8D77" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx46(AppScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, className: "px-3 py-2", contentContainerStyle: { gap: 8 }, children: FILTERS.map((item) => {
+            const active = filter === item;
+            return /* @__PURE__ */ jsx46(
+              AppPressable,
+              {
+                onPress: () => setFilter(item),
+                className: "px-3 py-1 rounded-full",
+                style: { backgroundColor: active ? colors.primary : colors.cardElevated },
+                children: /* @__PURE__ */ jsx46(AppText, { size: "xs", style: { color: active ? colors.textInverse : colors.textSecondary }, children: item.toUpperCase() })
+              },
+              item
+            );
+          }) }),
+          /* @__PURE__ */ jsx46(AppScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, className: "px-3 pb-2", contentContainerStyle: { gap: 8 }, children: namespaces.map((item) => {
+            const active = namespaceFilter === item;
+            const label = item === ALL_NAMESPACE ? "\u5168\u90E8\u6A21\u5757" : String(item);
+            return /* @__PURE__ */ jsx46(
+              AppPressable,
+              {
+                testID: `logger-namespace-${item}`,
+                onPress: () => setNamespaceFilter(item),
+                className: "px-3 py-1 rounded-full",
+                style: { backgroundColor: active ? colors.info : colors.cardElevated },
+                children: /* @__PURE__ */ jsx46(AppText, { size: "xs", style: { color: active ? colors.textInverse : colors.textSecondary }, children: label })
+              },
+              item
+            );
+          }) }),
+          /* @__PURE__ */ jsx46(AppView, { className: "px-3 pb-2", children: /* @__PURE__ */ jsx46(
+            AppInput,
+            {
+              placeholder: DEFAULT_SEARCH_PLACEHOLDER,
+              value: keyword,
+              onChangeText: setKeyword
+            }
+          ) }),
+          /* @__PURE__ */ jsx46(AppScrollView, { className: "px-3 pb-3", showsVerticalScrollIndicator: false, children: /* @__PURE__ */ jsx46(AppView, { gap: 2, children: filteredEntries.length === 0 ? /* @__PURE__ */ jsx46(AppView, { className: "py-8 items-center", children: /* @__PURE__ */ jsx46(AppText, { tone: "muted", children: "\u6682\u65E0\u65E5\u5FD7" }) }) : filteredEntries.map((entry) => {
+            const palette = levelStyles[entry.level];
+            const detail = stringifyLogData(entry.data);
+            return /* @__PURE__ */ jsxs20(
+              AppView,
+              {
+                className: "px-3 py-3 rounded-xl",
+                style: { backgroundColor: colors.cardElevated, borderWidth: 0.5, borderColor: colors.divider },
+                children: [
+                  /* @__PURE__ */ jsxs20(AppView, { row: true, items: "center", justify: "between", children: [
+                    /* @__PURE__ */ jsxs20(AppView, { row: true, items: "center", gap: 2, children: [
+                      /* @__PURE__ */ jsx46(AppView, { className: "px-2 py-1 rounded-full", style: { backgroundColor: palette.bg }, children: /* @__PURE__ */ jsx46(AppText, { size: "xs", style: { color: palette.text }, children: entry.level.toUpperCase() }) }),
+                      entry.namespace ? /* @__PURE__ */ jsxs20(AppText, { size: "xs", tone: "muted", children: [
+                        "[",
+                        entry.namespace,
+                        "]"
+                      ] }) : null
+                    ] }),
+                    /* @__PURE__ */ jsx46(AppText, { size: "xs", tone: "muted", children: formatLogTime(entry.timestamp) })
+                  ] }),
+                  /* @__PURE__ */ jsx46(AppText, { className: "mt-2", size: "sm", children: entry.message }),
+                  detail ? /* @__PURE__ */ jsx46(AppView, { className: "mt-2 px-2 py-2 rounded-lg", style: { backgroundColor: colors.background }, children: /* @__PURE__ */ jsx46(AppText, { size: "xs", tone: "muted", children: detail }) }) : null
+                ]
+              },
+              entry.id
+            );
+          }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx46(AppView, { pointerEvents: "box-none", row: true, justify: "end", children: /* @__PURE__ */ jsx46(
+      AppPressable,
+      {
+        testID: "logger-overlay-toggle",
+        onPress: () => setExpanded((value) => !value),
+        className: "px-4 py-3 rounded-full",
+        style: { backgroundColor: colors.primary, shadowColor: "#000000", shadowOpacity: 0.18, shadowRadius: 12, shadowOffset: { width: 0, height: 4 }, elevation: 8 },
+        children: /* @__PURE__ */ jsxs20(AppText, { weight: "semibold", style: { color: colors.textInverse }, children: [
+          "Logs ",
+          entries.length
+        ] })
+      }
+    ) })
+  ] });
+}
+
+// src/overlay/logger/provider.tsx
+import { jsx as jsx47, jsxs as jsxs21 } from "nativewind/jsx-runtime";
+function LoggerProvider({
+  children,
+  enabled = false,
+  level = "debug",
+  maxEntries = 200,
+  overlayEnabled = false,
+  defaultExpanded = false,
+  consoleEnabled = true,
+  transports = [],
+  exportEnabled = true,
+  onExport
+}) {
+  const [entries, setEntries] = useState35([]);
+  const clear = useCallback24(() => {
+    setEntries([]);
+  }, []);
+  const resolvedTransports = useMemo12(() => {
+    const list = [];
+    if (enabled && consoleEnabled) {
+      list.push(createConsoleTransport());
+    }
+    if (transports.length > 0) {
+      list.push(...transports);
+    }
+    return list;
+  }, [consoleEnabled, enabled, transports]);
+  const write = useCallback24(
+    (nextLevel, message, data, namespace) => {
+      if (!enabled || !shouldLog(level, nextLevel)) return;
+      const entry = createLogEntry({ level: nextLevel, message, data, namespace, source: "logger" });
+      setEntries((prev) => [entry, ...prev].slice(0, maxEntries));
+      resolvedTransports.forEach((transport) => transport(entry));
+    },
+    [enabled, level, maxEntries, resolvedTransports]
+  );
+  const contextValue = useMemo12(
+    () => ({
+      entries,
+      enabled,
+      level,
+      clear,
+      log: write,
+      debug: (message, data, namespace) => write("debug", message, data, namespace),
+      info: (message, data, namespace) => write("info", message, data, namespace),
+      warn: (message, data, namespace) => write("warn", message, data, namespace),
+      error: (message, data, namespace) => write("error", message, data, namespace)
+    }),
+    [clear, enabled, entries, level, write]
+  );
+  useEffect21(() => {
+    if (!enabled) {
+      setGlobalLogger(null);
+      return;
+    }
+    setGlobalLogger(contextValue);
+    return () => {
+      setGlobalLogger(null);
+    };
+  }, [contextValue, enabled]);
+  return /* @__PURE__ */ jsxs21(LoggerContext.Provider, { value: contextValue, children: [
+    children,
+    enabled && overlayEnabled ? /* @__PURE__ */ jsx47(
+      LogOverlay,
+      {
+        entries,
+        onClear: clear,
+        defaultExpanded,
+        exportEnabled,
+        onExport
+      }
+    ) : null
+  ] });
+}
+
+// src/overlay/error-boundary/component.tsx
+import React12 from "react";
+import { jsx as jsx48, jsxs as jsxs22 } from "nativewind/jsx-runtime";
+function areResetKeysChanged(prev = [], next = []) {
+  if (prev.length !== next.length) return true;
+  return prev.some((item, index) => !Object.is(item, next[index]));
+}
+function DefaultFallback({
+  error,
+  onReset,
+  title = "\u9875\u9762\u53D1\u751F\u5F02\u5E38",
+  description = "\u5DF2\u81EA\u52A8\u6355\u83B7\u6E32\u67D3\u9519\u8BEF\uFF0C\u4F60\u53EF\u4EE5\u91CD\u8BD5\u5E76\u7ED3\u5408\u5F00\u53D1\u65E5\u5FD7\u7EE7\u7EED\u6392\u67E5\u3002",
+  resetText = "\u91CD\u8BD5",
+  showDetails = isDevelopment()
+}) {
+  return /* @__PURE__ */ jsxs22(AppView, { testID: "app-error-boundary", flex: true, center: true, className: "px-6 py-8", gap: 4, children: [
+    /* @__PURE__ */ jsxs22(AppView, { className: "items-center", gap: 2, children: [
+      /* @__PURE__ */ jsx48(AppText, { size: "xl", weight: "semibold", children: title }),
+      /* @__PURE__ */ jsx48(AppText, { tone: "muted", style: { textAlign: "center" }, children: description })
+    ] }),
+    showDetails ? /* @__PURE__ */ jsx48(
+      AppView,
+      {
+        className: "w-full px-4 py-3 rounded-xl",
+        style: { maxWidth: 560, borderWidth: 0.5 },
+        children: /* @__PURE__ */ jsx48(AppText, { testID: "app-error-boundary-detail", size: "sm", children: error.message || String(error) })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx48(
+      AppPressable,
+      {
+        testID: "app-error-boundary-reset",
+        onPress: onReset,
+        className: "px-4 py-3 rounded-lg",
+        style: { borderWidth: 0.5 },
+        children: /* @__PURE__ */ jsx48(AppText, { weight: "semibold", children: resetText })
+      }
+    )
+  ] });
+}
+var AppErrorBoundary = class extends React12.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      error: null
+    };
+    this.handleReset = () => {
+      this.setState({ error: null });
+      this.props.onReset?.();
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.context?.error(
+      "React ErrorBoundary \u6355\u83B7\u6E32\u67D3\u5F02\u5E38",
+      {
+        name: error.name,
+        message: error.message,
+        stack: error.stack,
+        componentStack: errorInfo.componentStack
+      },
+      "react"
+    );
+    this.props.onError?.(error, errorInfo);
+  }
+  componentDidUpdate(prevProps) {
+    if (!this.state.error) return;
+    if (areResetKeysChanged(prevProps.resetKeys, this.props.resetKeys)) {
+      this.handleReset();
+    }
+  }
+  render() {
+    const {
+      children,
+      enabled = false,
+      fallback,
+      title,
+      description,
+      showDetails,
+      resetText
+    } = this.props;
+    if (!enabled) return children;
+    if (!this.state.error) return children;
+    if (typeof fallback === "function") {
+      return fallback({ error: this.state.error, reset: this.handleReset });
+    }
+    if (fallback) return fallback;
+    return /* @__PURE__ */ jsx48(
+      DefaultFallback,
+      {
+        error: this.state.error,
+        onReset: this.handleReset,
+        title,
+        description,
+        showDetails,
+        resetText
+      }
+    );
+  }
+};
+AppErrorBoundary.contextType = LoggerContext;
+
 // src/overlay/provider.tsx
-import { jsx as jsx43 } from "nativewind/jsx-runtime";
-function OverlayProvider({ children }) {
-  return /* @__PURE__ */ jsx43(LoadingProvider, { children: /* @__PURE__ */ jsx43(ToastProvider, { children: /* @__PURE__ */ jsx43(AlertProvider, { children }) }) });
+import { jsx as jsx49 } from "nativewind/jsx-runtime";
+function OverlayProvider({ children, loggerProps, errorBoundaryProps }) {
+  return /* @__PURE__ */ jsx49(LoggerProvider, { ...loggerProps, children: /* @__PURE__ */ jsx49(AppErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx49(LoadingProvider, { children: /* @__PURE__ */ jsx49(ToastProvider, { children: /* @__PURE__ */ jsx49(AlertProvider, { children }) }) }) }) });
 }
 
 // src/overlay/AppProvider.tsx
-import { Fragment as Fragment4, jsx as jsx44, jsxs as jsxs19 } from "nativewind/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs23 } from "nativewind/jsx-runtime";
 var defaultLightTheme = {
   colors: {
     primary: "#f38b32",
@@ -4384,6 +5940,8 @@ function AppProvider({
   enableNavigation = true,
   enableOverlay = true,
   enableTheme = true,
+  enableLogger = isDevelopment(),
+  enableErrorBoundary = isDevelopment(),
   enableStatusBar = true,
   enableSafeArea = true,
   lightTheme = defaultLightTheme,
@@ -4391,25 +5949,41 @@ function AppProvider({
   defaultDark = false,
   isDark,
   statusBarProps,
+  loggerProps,
+  errorBoundaryProps,
   ...navigationProps
 }) {
   let content = children;
   if (enableOverlay) {
-    content = /* @__PURE__ */ jsx44(OverlayProvider, { children: content });
+    content = /* @__PURE__ */ jsx50(
+      OverlayProvider,
+      {
+        loggerProps: enableLogger ? { enabled: true, overlayEnabled: true, ...loggerProps } : { enabled: false, overlayEnabled: false, ...loggerProps },
+        errorBoundaryProps: enableErrorBoundary ? { enabled: true, ...errorBoundaryProps } : { enabled: false, ...errorBoundaryProps },
+        children: content
+      }
+    );
+  } else {
+    if (enableErrorBoundary) {
+      content = /* @__PURE__ */ jsx50(AppErrorBoundary, { enabled: true, ...errorBoundaryProps, children: content });
+    }
+    if (enableLogger) {
+      content = /* @__PURE__ */ jsx50(LoggerProvider, { enabled: true, overlayEnabled: true, ...loggerProps, children: content });
+    }
   }
   if (enableNavigation) {
-    content = /* @__PURE__ */ jsx44(NavigationProvider, { ...navigationProps, children: content });
+    content = /* @__PURE__ */ jsx50(NavigationProvider, { ...navigationProps, children: content });
   }
   if (enableTheme) {
-    content = /* @__PURE__ */ jsx44(ThemeProvider, { light: lightTheme, dark: darkTheme, defaultDark, isDark, children: /* @__PURE__ */ jsxs19(Fragment4, { children: [
-      enableStatusBar && /* @__PURE__ */ jsx44(AppStatusBar, { testID: "status-bar", ...statusBarProps }),
+    content = /* @__PURE__ */ jsx50(ThemeProvider, { light: lightTheme, dark: darkTheme, defaultDark, isDark, children: /* @__PURE__ */ jsxs23(Fragment4, { children: [
+      enableStatusBar && /* @__PURE__ */ jsx50(AppStatusBar, { testID: "status-bar", ...statusBarProps }),
       content
     ] }) });
   }
   if (enableSafeArea) {
-    content = /* @__PURE__ */ jsx44(SafeAreaProvider, { children: content });
+    content = /* @__PURE__ */ jsx50(SafeAreaProvider, { children: content });
   }
-  return /* @__PURE__ */ jsx44(Fragment4, { children: content });
+  return /* @__PURE__ */ jsx50(Fragment4, { children: content });
 }
 
 // src/overlay/loading/hooks.ts
@@ -4427,8 +6001,29 @@ function useAlert() {
   return useAlertContext();
 }
 
+// src/overlay/logger/hooks.ts
+import { useMemo as useMemo13 } from "react";
+function useLogger(namespace) {
+  const logger = useLoggerContext();
+  return useMemo13(
+    () => ({
+      entries: logger.entries,
+      enabled: logger.enabled,
+      level: logger.level,
+      clear: logger.clear,
+      namespace,
+      log: (level, message, data) => logger.log(level, message, data, namespace),
+      debug: (message, data) => logger.debug(message, data, namespace),
+      info: (message, data) => logger.info(message, data, namespace),
+      warn: (message, data) => logger.warn(message, data, namespace),
+      error: (message, data) => logger.error(message, data, namespace)
+    }),
+    [logger, namespace]
+  );
+}
+
 // src/navigation/components/AppHeader.tsx
-import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs20 } from "nativewind/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs24 } from "nativewind/jsx-runtime";
 function AppHeader({
   title,
   subtitle,
@@ -4442,9 +6037,9 @@ function AppHeader({
   const colors = useThemeColors();
   const insets = useSafeAreaInsets3();
   const backgroundColor = transparent ? "transparent" : colors.card;
-  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsx45(AppFocusedStatusBar, { translucent: true, backgroundColor: "transparent" }),
-    /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs24(Fragment5, { children: [
+    /* @__PURE__ */ jsx51(AppFocusedStatusBar, { translucent: true, backgroundColor: "transparent" }),
+    /* @__PURE__ */ jsx51(
       AppView,
       {
         style: [
@@ -4454,39 +6049,39 @@ function AppHeader({
           },
           style
         ],
-        children: /* @__PURE__ */ jsxs20(AppView, { row: true, items: "center", px: 4, style: styles16.container, children: [
-          /* @__PURE__ */ jsx45(AppView, { style: [styles16.sideContainer, styles16.leftContainer], children: leftIcon && /* @__PURE__ */ jsx45(AppPressable, { onPress: onLeftPress, style: styles16.iconButton, children: /* @__PURE__ */ jsx45(Icon, { name: leftIcon, size: 24, color: colors.text }) }) }),
-          /* @__PURE__ */ jsxs20(AppView, { style: styles16.centerContainer, children: [
-            title && /* @__PURE__ */ jsx45(
+        children: /* @__PURE__ */ jsxs24(AppView, { row: true, items: "center", px: 4, style: styles17.container, children: [
+          /* @__PURE__ */ jsx51(AppView, { style: [styles17.sideContainer, styles17.leftContainer], children: leftIcon && /* @__PURE__ */ jsx51(AppPressable, { onPress: onLeftPress, style: styles17.iconButton, children: /* @__PURE__ */ jsx51(Icon, { name: leftIcon, size: 24, color: colors.text }) }) }),
+          /* @__PURE__ */ jsxs24(AppView, { style: styles17.centerContainer, children: [
+            title && /* @__PURE__ */ jsx51(
               AppText,
               {
                 size: "lg",
                 weight: "semibold",
-                style: [styles16.title, { color: colors.text }],
+                style: [styles17.title, { color: colors.text }],
                 numberOfLines: 1,
                 children: title
               }
             ),
-            subtitle && /* @__PURE__ */ jsx45(
+            subtitle && /* @__PURE__ */ jsx51(
               AppText,
               {
                 size: "xs",
-                style: [styles16.subtitle, { color: colors.textMuted }],
+                style: [styles17.subtitle, { color: colors.textMuted }],
                 numberOfLines: 1,
                 children: subtitle
               }
             )
           ] }),
-          /* @__PURE__ */ jsx45(AppView, { row: true, items: "center", style: [styles16.sideContainer, styles16.rightContainer], children: rightIcons.map((icon, index) => /* @__PURE__ */ jsx45(AppPressable, { onPress: icon.onPress, style: styles16.iconButton, children: /* @__PURE__ */ jsxs20(AppView, { children: [
-            /* @__PURE__ */ jsx45(Icon, { name: icon.icon, size: 24, color: colors.text }),
-            icon.badge ? /* @__PURE__ */ jsx45(AppView, { style: styles16.badge, children: /* @__PURE__ */ jsx45(AppText, { size: "xs", color: "white", style: styles16.badgeText, children: icon.badge > 99 ? "99+" : icon.badge }) }) : null
+          /* @__PURE__ */ jsx51(AppView, { row: true, items: "center", style: [styles17.sideContainer, styles17.rightContainer], children: rightIcons.map((icon, index) => /* @__PURE__ */ jsx51(AppPressable, { onPress: icon.onPress, style: styles17.iconButton, children: /* @__PURE__ */ jsxs24(AppView, { children: [
+            /* @__PURE__ */ jsx51(Icon, { name: icon.icon, size: 24, color: colors.text }),
+            icon.badge ? /* @__PURE__ */ jsx51(AppView, { style: styles17.badge, children: /* @__PURE__ */ jsx51(AppText, { size: "xs", color: "white", style: styles17.badgeText, children: icon.badge > 99 ? "99+" : icon.badge }) }) : null
           ] }) }, index)) })
         ] })
       }
     )
   ] });
 }
-var styles16 = StyleSheet17.create({
+var styles17 = StyleSheet18.create({
   container: {
     height: 44
     // iOS 标准导航栏高度
@@ -4537,9 +6132,9 @@ var styles16 = StyleSheet17.create({
 });
 
 // src/navigation/components/DrawerContent.tsx
-import { View as View12, TouchableOpacity as TouchableOpacity8, StyleSheet as StyleSheet18 } from "react-native";
+import { View as View12, TouchableOpacity as TouchableOpacity9, StyleSheet as StyleSheet19 } from "react-native";
 import { DrawerContentScrollView } from "@react-navigation/drawer";
-import { jsx as jsx46, jsxs as jsxs21 } from "nativewind/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs25 } from "nativewind/jsx-runtime";
 function DrawerContent({
   state,
   descriptors,
@@ -4568,20 +6163,20 @@ function DrawerContent({
       badge: options.tabBarBadge
     };
   });
-  return /* @__PURE__ */ jsxs21(DrawerContentScrollView, { style: [styles17.container, { backgroundColor }], children: [
-    header && /* @__PURE__ */ jsx46(View12, { style: [styles17.header, { borderBottomColor: dividerColor }], children: header }),
-    /* @__PURE__ */ jsx46(AppView, { className: "py-2", children: drawerItems.map((item) => {
+  return /* @__PURE__ */ jsxs25(DrawerContentScrollView, { style: [styles18.container, { backgroundColor }], children: [
+    header && /* @__PURE__ */ jsx52(View12, { style: [styles18.header, { borderBottomColor: dividerColor }], children: header }),
+    /* @__PURE__ */ jsx52(AppView, { className: "py-2", children: drawerItems.map((item) => {
       const isFocused = state.routes[state.index].name === item.name;
       const onPress = () => {
         navigation.navigate(item.name);
       };
-      return /* @__PURE__ */ jsxs21(
-        TouchableOpacity8,
+      return /* @__PURE__ */ jsxs25(
+        TouchableOpacity9,
         {
           onPress,
-          style: [styles17.item, isFocused && { backgroundColor: activeBgColor }],
+          style: [styles18.item, isFocused && { backgroundColor: activeBgColor }],
           children: [
-            item.icon && /* @__PURE__ */ jsx46(View12, { style: styles17.iconContainer, children: /* @__PURE__ */ jsx46(
+            item.icon && /* @__PURE__ */ jsx52(View12, { style: styles18.iconContainer, children: /* @__PURE__ */ jsx52(
               Icon,
               {
                 name: item.icon,
@@ -4589,28 +6184,28 @@ function DrawerContent({
                 color: isFocused ? activeColor : inactiveColor
               }
             ) }),
-            /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsx52(
               AppText,
               {
                 style: [
-                  styles17.label,
+                  styles18.label,
                   { color: isFocused ? activeColor : inactiveColor },
-                  isFocused && styles17.activeLabel
+                  isFocused && styles18.activeLabel
                 ],
                 numberOfLines: 1,
                 children: item.label
               }
             ),
-            item.badge != null && /* @__PURE__ */ jsx46(View12, { style: [styles17.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ jsx46(AppText, { style: styles17.badgeText, children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge }) })
+            item.badge != null && /* @__PURE__ */ jsx52(View12, { style: [styles18.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ jsx52(AppText, { style: styles18.badgeText, children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge }) })
           ]
         },
         item.name
       );
     }) }),
-    footer && /* @__PURE__ */ jsx46(View12, { style: [styles17.footer, { borderTopColor: dividerColor }], children: footer })
+    footer && /* @__PURE__ */ jsx52(View12, { style: [styles18.footer, { borderTopColor: dividerColor }], children: footer })
   ] });
 }
-var styles17 = StyleSheet18.create({
+var styles18 = StyleSheet19.create({
   container: {
     flex: 1
   },
@@ -4660,7 +6255,7 @@ var styles17 = StyleSheet18.create({
 });
 
 // src/navigation/hooks/useNavigation.ts
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect22 } from "react";
 import { useNavigation as useRNNavigation } from "@react-navigation/native";
 function useNavigation() {
   return useRNNavigation();
@@ -4676,7 +6271,7 @@ function useDrawerNavigation() {
 }
 function useBackHandler(handler) {
   const navigation = useRNNavigation();
-  useEffect11(() => {
+  useEffect22(() => {
     const unsubscribe = navigation.addListener("beforeRemove", (e) => {
       if (!handler()) {
         e.preventDefault();
@@ -4714,6 +6309,7 @@ export {
   ActionIcons,
   Alert,
   AppButton,
+  AppErrorBoundary,
   AppFocusedStatusBar,
   AppHeader,
   AppImage,
@@ -4741,13 +6337,18 @@ export {
   FormItem,
   GradientView,
   Icon,
+  KeyboardDismissView,
+  LOG_LEVEL_WEIGHT,
   Loading,
+  LogOverlay,
+  LoggerProvider,
   MemoryStorage,
   NavigationContainer2 as NavigationContainer,
   NavigationIcons,
   NavigationProvider,
   OverlayProvider,
   PageDrawer,
+  Picker,
   Progress,
   Radio,
   RadioGroup,
@@ -4769,7 +6370,10 @@ export {
   clsx,
   cn,
   createAPI,
+  createApiLoggerTransport,
+  createConsoleTransport,
   createDrawerScreens,
+  createLogEntry,
   createNavigationTheme,
   createStackScreens,
   createTabScreens,
@@ -4778,10 +6382,12 @@ export {
   enhanceError,
   formatCurrency,
   formatDate,
+  formatLogTime,
   formatNumber,
   formatPercent,
   formatRelativeTime,
   generateColorPalette,
+  getGlobalLogger,
   getThemeColors,
   getValidationErrors,
   hexToRgb,
@@ -4789,11 +6395,16 @@ export {
   isValidEmail,
   isValidPhone,
   mapHttpStatus,
+  normalizeConsoleArgs,
   omit,
   pick,
   rgbToHex,
+  serializeLogEntries,
+  setGlobalLogger,
+  shouldLog,
   slugify,
   storage,
+  stringifyLogData,
   truncate,
   twMerge,
   useAlert,
@@ -4808,6 +6419,7 @@ export {
   useIsFocused2 as useIsFocused,
   useKeyboard,
   useLoading,
+  useLogger,
   useMemoizedFn,
   useMutation,
   useNavigation,