@gaozh1024/rn-kit 0.3.4 → 0.4.0

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   ActionIcons: () => ActionIcons,
   Alert: () => Alert,
   AppButton: () => AppButton,
+  AppErrorBoundary: () => AppErrorBoundary,
   AppFocusedStatusBar: () => AppFocusedStatusBar,
   AppHeader: () => AppHeader,
   AppImage: () => AppImage,
@@ -60,13 +61,18 @@ __export(index_exports, {
   FormItem: () => FormItem,
   GradientView: () => GradientView,
   Icon: () => Icon,
+  KeyboardDismissView: () => KeyboardDismissView,
+  LOG_LEVEL_WEIGHT: () => LOG_LEVEL_WEIGHT,
   Loading: () => Loading,
+  LogOverlay: () => LogOverlay,
+  LoggerProvider: () => LoggerProvider,
   MemoryStorage: () => MemoryStorage,
   NavigationContainer: () => import_native6.NavigationContainer,
   NavigationIcons: () => NavigationIcons,
   NavigationProvider: () => NavigationProvider,
   OverlayProvider: () => OverlayProvider,
   PageDrawer: () => PageDrawer,
+  Picker: () => Picker,
   Progress: () => Progress,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
@@ -88,7 +94,10 @@ __export(index_exports, {
   clsx: () => import_clsx.clsx,
   cn: () => cn,
   createAPI: () => createAPI,
+  createApiLoggerTransport: () => createApiLoggerTransport,
+  createConsoleTransport: () => createConsoleTransport,
   createDrawerScreens: () => createDrawerScreens,
+  createLogEntry: () => createLogEntry,
   createNavigationTheme: () => createNavigationTheme,
   createStackScreens: () => createStackScreens,
   createTabScreens: () => createTabScreens,
@@ -97,10 +106,12 @@ __export(index_exports, {
   enhanceError: () => enhanceError,
   formatCurrency: () => formatCurrency,
   formatDate: () => formatDate,
+  formatLogTime: () => formatLogTime,
   formatNumber: () => formatNumber,
   formatPercent: () => formatPercent,
   formatRelativeTime: () => formatRelativeTime,
   generateColorPalette: () => generateColorPalette,
+  getGlobalLogger: () => getGlobalLogger,
   getThemeColors: () => getThemeColors,
   getValidationErrors: () => getValidationErrors,
   hexToRgb: () => hexToRgb,
@@ -108,11 +119,16 @@ __export(index_exports, {
   isValidEmail: () => isValidEmail,
   isValidPhone: () => isValidPhone,
   mapHttpStatus: () => mapHttpStatus,
+  normalizeConsoleArgs: () => normalizeConsoleArgs,
   omit: () => omit,
   pick: () => pick,
   rgbToHex: () => rgbToHex,
+  serializeLogEntries: () => serializeLogEntries,
+  setGlobalLogger: () => setGlobalLogger,
+  shouldLog: () => shouldLog,
   slugify: () => slugify,
   storage: () => storage,
+  stringifyLogData: () => stringifyLogData,
   truncate: () => truncate,
   twMerge: () => import_tailwind_merge.twMerge,
   useAlert: () => useAlert,
@@ -127,6 +143,7 @@ __export(index_exports, {
   useIsFocused: () => import_native5.useIsFocused,
   useKeyboard: () => useKeyboard,
   useLoading: () => useLoading,
+  useLogger: () => useLogger,
   useMemoizedFn: () => useMemoizedFn,
   useMutation: () => import_react_query.useMutation,
   useNavigation: () => useNavigation,
@@ -406,6 +423,11 @@ var import_react2 = require("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"),
@@ -502,6 +524,189 @@ function useAsyncState() {
 
 // src/core/api/create-api.ts
 var import_zod = require("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 {
@@ -554,6 +759,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 = {
@@ -569,11 +775,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;
@@ -588,18 +826,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;
     };
@@ -1205,6 +1540,7 @@ function AppScrollView({
   surface,
   rounded,
   className,
+  dismissKeyboardOnPressOutside = false,
   children,
   style,
   ...props
@@ -1212,7 +1548,7 @@ function AppScrollView({
   const { theme, isDark } = useOptionalTheme();
   const resolvedBgColor = resolveSurfaceColor(surface, theme, isDark) ?? resolveNamedColor(bg, theme, isDark);
   const shouldUseClassBg = !!bg && !resolvedBgColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_react_native2.ScrollView,
     {
       className: cn(
@@ -1225,11 +1561,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__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.TouchableWithoutFeedback, { onPress: import_react_native2.Keyboard.dismiss, accessible: false, children: content });
 }
 
 // src/ui/primitives/AppText.tsx
@@ -1312,8 +1653,19 @@ function AppPressable({
   );
 }
 
-// src/ui/layout/Row.tsx
+// src/ui/primitives/KeyboardDismissView.tsx
+var import_react_native5 = require("react-native");
 var import_jsx_runtime6 = require("nativewind/jsx-runtime");
+function KeyboardDismissView({ enabled = true, children, ...props }) {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AppView, { ...props, children });
+  if (!enabled) {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: import_react_native5.Keyboard.dismiss, accessible: false, children: content });
+}
+
+// src/ui/layout/Row.tsx
+var import_jsx_runtime7 = require("nativewind/jsx-runtime");
 var justifyMap = {
   start: "justify-start",
   center: "justify-center",
@@ -1328,11 +1680,11 @@ var itemsMap = {
   stretch: "items-stretch"
 };
 function Row({ justify = "start", items = "center", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AppView, { row: true, className: cn(justifyMap[justify], itemsMap[items], className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AppView, { row: true, className: cn(justifyMap[justify], itemsMap[items], className), ...props });
 }
 
 // src/ui/layout/Col.tsx
-var import_jsx_runtime7 = require("nativewind/jsx-runtime");
+var import_jsx_runtime8 = require("nativewind/jsx-runtime");
 var justifyMap2 = {
   start: "justify-start",
   center: "justify-center",
@@ -1347,19 +1699,19 @@ var itemsMap2 = {
   stretch: "items-stretch"
 };
 function Col({ justify = "start", items = "stretch", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AppView, { className: cn(justifyMap2[justify], itemsMap2[items], className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AppView, { className: cn(justifyMap2[justify], itemsMap2[items], className), ...props });
 }
 
 // src/ui/layout/Center.tsx
-var import_jsx_runtime8 = require("nativewind/jsx-runtime");
+var import_jsx_runtime9 = require("nativewind/jsx-runtime");
 function Center({ flex = true, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AppView, { center: true, flex, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AppView, { center: true, flex, ...props });
 }
 
 // src/ui/layout/SafeScreen.tsx
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
-var import_jsx_runtime9 = require("nativewind/jsx-runtime");
+var import_jsx_runtime10 = require("nativewind/jsx-runtime");
 function SafeScreen({
   top = true,
   bottom = true,
@@ -1368,6 +1720,7 @@ function SafeScreen({
   bg,
   surface,
   flex = true,
+  dismissKeyboardOnPressOutside = false,
   className,
   children,
   style,
@@ -1377,8 +1730,8 @@ function SafeScreen({
   const { theme, isDark } = useOptionalTheme();
   const resolvedBgColor = resolveSurfaceColor(surface, theme, isDark) ?? resolveNamedColor(bg, theme, isDark);
   const shouldUseClassBg = !!bg && !resolvedBgColor;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_react_native5.View,
+  const content = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_native6.View,
     {
       className: cn(flex && "flex-1", shouldUseClassBg && `bg-${bg}`, className),
       style: [
@@ -1396,8 +1749,12 @@ function SafeScreen({
       children
     }
   );
+  if (!dismissKeyboardOnPressOutside) {
+    return content;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native6.TouchableWithoutFeedback, { onPress: import_react_native6.Keyboard.dismiss, accessible: false, children: content });
 }
-var styles = import_react_native5.StyleSheet.create({
+var styles = import_react_native6.StyleSheet.create({
   flex: {
     flex: 1
   }
@@ -1407,19 +1764,20 @@ function AppScreen({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SafeScreen, { flex: true, surface: "background", ...props, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SafeScreen, { flex: true, surface: "background", ...props, className, children });
 }
 function SafeBottom({
   children,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SafeScreen, { bottom: true, left: true, right: true, flex: false, ...props, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SafeScreen, { bottom: true, left: true, right: true, flex: false, ...props, className, children });
 }
 
 // src/ui/actions/AppButton.tsx
-var import_react_native6 = require("react-native");
-var import_jsx_runtime10 = require("nativewind/jsx-runtime");
+var import_react13 = require("react");
+var import_react_native7 = require("react-native");
+var import_jsx_runtime11 = require("nativewind/jsx-runtime");
 function AppButton({
   variant = "solid",
   size = "md",
@@ -1427,6 +1785,7 @@ function AppButton({
   loading,
   disabled,
   onPress,
+  dismissKeyboardOnPress = true,
   children,
   className
 }) {
@@ -1447,11 +1806,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 = (0, import_react13.useCallback)(() => {
+    if (dismissKeyboardOnPress) {
+      import_react_native7.Keyboard.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__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     AppPressable,
     {
-      onPress,
+      onPress: onPress ? handlePress : void 0,
       disabled: isDisabled,
       className: cn(
         "flex-row items-center justify-center rounded-lg",
@@ -1460,30 +1825,61 @@ function AppButton({
         className
       ),
       style: buttonStyle,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native6.ActivityIndicator, { size: "small", color: loadingColor }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AppText, { weight: "semibold", style: { color: textColor }, children })
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.ActivityIndicator, { size: "small", color: loadingColor }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AppText, { weight: "semibold", style: { color: textColor }, children })
     }
   );
 }
 
 // src/ui/feedback/Toast.tsx
-var import_jsx_runtime11 = require("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 }) {
+var import_jsx_runtime12 = require("nativewind/jsx-runtime");
+function Toast({ message, type = "info", visible = true, testID }) {
+  const { theme } = useOptionalTheme();
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AppView, { className: cn("px-4 py-3 rounded-lg", typeStyles[type]), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime12.jsx)(
+    AppView,
+    {
+      testID,
+      className: "px-4 py-3 rounded-lg",
+      style: { backgroundColor: currentPalette.backgroundColor },
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AppText, { style: { color: currentPalette.textColor }, children: message })
+    }
+  );
 }
 
 // src/ui/feedback/Alert.tsx
-var import_react13 = require("react");
-var import_react_native7 = require("react-native");
-var import_jsx_runtime12 = require("nativewind/jsx-runtime");
+var import_react14 = require("react");
+var import_react_native8 = require("react-native");
+var import_jsx_runtime13 = require("nativewind/jsx-runtime");
+function createAnimatedValue(value) {
+  const AnimatedValue = import_react_native8.Animated.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
 function Alert({ visible, title, message, buttons, onClose }) {
   const { theme, isDark } = useTheme();
+  const progress = (0, import_react14.useRef)(createAnimatedValue(0)).current;
   const modalBgColor = isDark ? "#1f2937" : "#ffffff";
   const textColor = isDark ? "#ffffff" : "#1f2937";
   const messageColor = isDark ? "#9ca3af" : "#6b7280";
@@ -1491,7 +1887,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 = (0, import_react13.useCallback)(
+  (0, import_react14.useEffect)(() => {
+    if (!visible) {
+      progress.setValue(0);
+      return;
+    }
+    progress.setValue(0);
+    import_react_native8.Animated.timing(progress, {
+      toValue: 1,
+      duration: 220,
+      useNativeDriver: true
+    }).start();
+  }, [progress, visible]);
+  const handleButtonPress = (0, import_react14.useCallback)(
     (button) => (e) => {
       e.stopPropagation();
       button.onPress?.();
@@ -1528,108 +1936,141 @@ function Alert({ visible, title, message, buttons, onClose }) {
     }
     return "#ffffff";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native7.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_native8.Modal,
     {
       visible,
       transparent: true,
-      animationType: "fade",
+      animationType: "none",
       onRequestClose: onClose,
       statusBarTranslucent: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AppView, { className: "flex-1", style: { backgroundColor: "rgba(0,0,0,0.5)" }, center: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        AppView,
-        {
-          className: "rounded-xl mx-8 min-w-[280px]",
-          style: { backgroundColor: modalBgColor },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AppView, { className: "px-6 py-5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                AppText,
-                {
-                  size: "lg",
-                  weight: "semibold",
-                  className: "text-center mb-2",
-                  style: { color: textColor },
-                  children: title
-                }
-              ),
-              message && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AppText, { size: "sm", style: { color: messageColor }, className: "text-center leading-5", children: message })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AppView, { className: "border-t", style: { borderTopColor: borderColor }, children: buttons.length === 1 ? (
-              // 单个按钮
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                import_react_native7.TouchableOpacity,
-                {
-                  onPress: handleButtonPress(buttons[0]),
-                  className: "py-3 rounded-b-xl",
-                  style: [styles2.singleButton, getButtonStyle(buttons[0])],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    AppText,
-                    {
-                      weight: "medium",
-                      className: "text-center",
-                      style: { color: getButtonTextColor(buttons[0]) },
-                      children: buttons[0].text
-                    }
-                  )
-                }
-              )
-            ) : buttons.length === 2 ? (
-              // 两个按钮横向排列
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AppView, { row: true, style: styles2.twoButtonContainer, children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                import_react_native7.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__ */ (0, import_jsx_runtime12.jsx)(
-                    AppText,
-                    {
-                      weight: "medium",
-                      className: "text-center",
-                      style: { color: getButtonTextColor(button) },
-                      children: button.text
-                    }
-                  )
-                },
-                index
-              )) })
-            ) : (
-              // 多个按钮纵向排列
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AppView, { className: "gap-2 pb-4 px-4", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                import_react_native7.TouchableOpacity,
-                {
-                  onPress: handleButtonPress(button),
-                  className: "py-3 rounded-lg",
-                  style: getButtonStyle(button),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    AppText,
-                    {
-                      weight: "medium",
-                      className: "text-center",
-                      style: { color: getButtonTextColor(button) },
-                      children: button.text
-                    }
-                  )
-                },
-                index
-              )) })
-            ) })
-          ]
-        }
-      ) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(AppView, { className: "flex-1", center: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_native8.Animated.View,
+          {
+            style: [
+              import_react_native8.StyleSheet.absoluteFillObject,
+              {
+                backgroundColor: "rgba(0,0,0,0.5)",
+                opacity: progress
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_react_native8.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__ */ (0, import_jsx_runtime13.jsxs)(AppView, { className: "px-6 py-5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  AppText,
+                  {
+                    size: "lg",
+                    weight: "semibold",
+                    className: "text-center mb-2",
+                    style: { color: textColor },
+                    children: title
+                  }
+                ),
+                message && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AppText, { size: "sm", style: { color: messageColor }, className: "text-center leading-5", children: message })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AppView, { className: "border-t", style: { borderTopColor: borderColor }, children: buttons.length === 1 ? (
+                // 单个按钮
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_react_native8.TouchableOpacity,
+                  {
+                    onPress: handleButtonPress(buttons[0]),
+                    className: "py-3 rounded-b-xl",
+                    style: [styles2.singleButton, getButtonStyle(buttons[0])],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      AppText,
+                      {
+                        weight: "medium",
+                        className: "text-center",
+                        style: { color: getButtonTextColor(buttons[0]) },
+                        children: buttons[0].text
+                      }
+                    )
+                  }
+                )
+              ) : buttons.length === 2 ? (
+                // 两个按钮横向排列
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AppView, { row: true, style: styles2.twoButtonContainer, children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_react_native8.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__ */ (0, import_jsx_runtime13.jsx)(
+                      AppText,
+                      {
+                        weight: "medium",
+                        className: "text-center",
+                        style: { color: getButtonTextColor(button) },
+                        children: button.text
+                      }
+                    )
+                  },
+                  index
+                )) })
+              ) : (
+                // 多个按钮纵向排列
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AppView, { className: "gap-2 pb-4 px-4", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  import_react_native8.TouchableOpacity,
+                  {
+                    onPress: handleButtonPress(button),
+                    className: "py-3 rounded-lg",
+                    style: getButtonStyle(button),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      AppText,
+                      {
+                        weight: "medium",
+                        className: "text-center",
+                        style: { color: getButtonTextColor(button) },
+                        children: button.text
+                      }
+                    )
+                  },
+                  index
+                )) })
+              ) })
+            ]
+          }
+        )
+      ] })
     }
   );
 }
-var styles2 = import_react_native7.StyleSheet.create({
+var styles2 = import_react_native8.StyleSheet.create({
   singleButton: {
     borderBottomLeftRadius: 12,
     borderBottomRightRadius: 12
@@ -1644,19 +2085,8 @@ var styles2 = import_react_native7.StyleSheet.create({
 });
 
 // src/ui/feedback/Loading.tsx
-var import_react_native8 = require("react-native");
-var import_jsx_runtime13 = require("nativewind/jsx-runtime");
-function Loading({ text, color, overlay = false, visible = true, testID }) {
-  if (!visible) return null;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(AppView, { center: true, gap: 3, testID, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native8.ActivityIndicator, { size: "large", color }),
-    text && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AppText, { style: color ? { color } : void 0, children: text })
-  ] });
-  if (overlay) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AppView, { center: true, flex: true, className: "absolute inset-0 bg-black/30", testID, children: content });
-  }
-  return content;
-}
+var import_react_native14 = require("react-native");
+var import_react18 = require("react");
 
 // src/ui/display/Progress.tsx
 var import_jsx_runtime14 = require("nativewind/jsx-runtime");
@@ -1850,7 +2280,7 @@ var FileIcons = {
 };
 
 // src/ui/display/AppImage.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_native11 = require("react-native");
 var import_jsx_runtime17 = require("nativewind/jsx-runtime");
 var radiusMap = {
@@ -1886,15 +2316,15 @@ function AppImage({
   className,
   style
 }) {
-  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
-  const [hasError, setHasError] = (0, import_react14.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react15.useState)(true);
+  const [hasError, setHasError] = (0, import_react15.useState)(false);
   const { theme } = useTheme();
   const resolvedRadius = resolveRadius(borderRadius);
-  const handleLoad = (0, import_react14.useCallback)(() => {
+  const handleLoad = (0, import_react15.useCallback)(() => {
     setIsLoading(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = (0, import_react14.useCallback)(
+  const handleError = (0, import_react15.useCallback)(
     (error) => {
       setIsLoading(false);
       setHasError(true);
@@ -2008,9 +2438,18 @@ function AppImage({
 }
 
 // src/ui/display/AppList.tsx
-var import_react15 = require("react");
+var import_react16 = __toESM(require("react"));
 var import_react_native12 = require("react-native");
 var import_jsx_runtime18 = require("nativewind/jsx-runtime");
+function renderListSlot(slot) {
+  if (!slot) return null;
+  if (import_react16.default.isValidElement(slot)) return slot;
+  if (typeof slot === "function") {
+    const SlotComponent = slot;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SlotComponent, {});
+  }
+  return null;
+}
 function SkeletonItem2({ render }) {
   const colors = useThemeColors();
   if (render) {
@@ -2110,8 +2549,8 @@ function AppList({
   showsHorizontalScrollIndicator
 }) {
   const { theme } = useTheme();
-  const [isLoadingMore, setIsLoadingMore] = (0, import_react15.useState)(false);
-  const handleEndReached = (0, import_react15.useCallback)(async () => {
+  const [isLoadingMore, setIsLoadingMore] = (0, import_react16.useState)(false);
+  const handleEndReached = (0, import_react16.useCallback)(async () => {
     if (isLoadingMore || !hasMore || !onEndReached) return;
     setIsLoadingMore(true);
     try {
@@ -2120,14 +2559,14 @@ function AppList({
       setIsLoadingMore(false);
     }
   }, [isLoadingMore, hasMore, onEndReached]);
-  const defaultKeyExtractor = (0, import_react15.useCallback)(
+  const defaultKeyExtractor = (0, import_react16.useCallback)(
     (item, index) => {
       if (keyExtractor) return keyExtractor(item, index);
       return `item-${index}`;
     },
     [keyExtractor]
   );
-  const wrappedRenderItem = (0, import_react15.useCallback)(
+  const wrappedRenderItem = (0, import_react16.useCallback)(
     (info) => {
       return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
         divider && info.index > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Divider, { style: dividerStyle }),
@@ -2136,14 +2575,18 @@ function AppList({
     },
     [renderItem, divider, dividerStyle]
   );
-  const skeletonData = (0, import_react15.useMemo)(
+  const skeletonData = (0, import_react16.useMemo)(
     () => new Array(skeletonCount).fill(null).map((_, i) => ({ _skeletonId: i })),
     [skeletonCount]
   );
-  const skeletonRenderItem = (0, import_react15.useCallback)(
+  const skeletonRenderItem = (0, import_react16.useCallback)(
     () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SkeletonItem2, { render: skeletonRender }),
     [skeletonRender]
   );
+  const flatListKey = (0, import_react16.useMemo)(() => {
+    if (horizontal) return "app-list-horizontal";
+    return `app-list-columns-${numColumns ?? 1}`;
+  }, [horizontal, numColumns]);
   if (loading && data.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_react_native12.FlatList,
@@ -2155,7 +2598,8 @@ function AppList({
         style,
         showsVerticalScrollIndicator,
         showsHorizontalScrollIndicator
-      }
+      },
+      `${flatListKey}-skeleton`
     );
   }
   if (error && data.length === 0) {
@@ -2170,16 +2614,20 @@ function AppList({
       }
     ) });
   }
-  const ListEmptyComponent = (0, import_react15.useMemo)(() => {
-    if (EmptyComponent) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EmptyComponent, {});
+  const ListEmptyComponent = (0, import_react16.useMemo)(() => {
+    if (EmptyComponent) return renderListSlot(EmptyComponent);
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, icon: emptyIcon });
   }, [EmptyComponent, emptyTitle, emptyDescription, emptyIcon]);
-  const FooterComponent = (0, import_react15.useMemo)(() => {
+  const FooterComponent = (0, import_react16.useMemo)(() => {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LoadMoreFooter, { loading: isLoadingMore }),
-      ListFooterComponent
+      renderListSlot(ListFooterComponent)
     ] });
   }, [isLoadingMore, ListFooterComponent]);
+  const HeaderComponent = (0, import_react16.useMemo)(
+    () => renderListSlot(ListHeaderComponent),
+    [ListHeaderComponent]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_react_native12.FlatList,
     {
@@ -2198,7 +2646,7 @@ function AppList({
       onEndReached: onEndReached ? handleEndReached : void 0,
       onEndReachedThreshold,
       ListEmptyComponent,
-      ListHeaderComponent,
+      ListHeaderComponent: HeaderComponent,
       ListFooterComponent: FooterComponent,
       contentContainerStyle,
       style,
@@ -2211,7 +2659,8 @@ function AppList({
       maxToRenderPerBatch: 10,
       windowSize: 10,
       initialNumToRender: 10
-    }
+    },
+    flatListKey
   );
 }
 var styles3 = import_react_native12.StyleSheet.create({
@@ -2221,7 +2670,7 @@ var styles3 = import_react_native12.StyleSheet.create({
 });
 
 // src/ui/display/PageDrawer.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_react_native13 = require("react-native");
 var import_jsx_runtime19 = require("nativewind/jsx-runtime");
 function PageDrawer({
@@ -2242,13 +2691,12 @@ function PageDrawer({
   backdropTestID = "page-drawer-backdrop"
 }) {
   const colors = useThemeColors();
-  const [translateX, setTranslateX] = import_react16.default.useState(0);
-  if (!visible) return null;
-  const handleClose = import_react16.default.useCallback(() => {
+  const [translateX, setTranslateX] = import_react17.default.useState(0);
+  const handleClose = import_react17.default.useCallback(() => {
     setTranslateX(0);
     onClose?.();
   }, [onClose]);
-  import_react16.default.useEffect(() => {
+  import_react17.default.useEffect(() => {
     if (!visible) return;
     const subscription = import_react_native13.BackHandler.addEventListener("hardwareBackPress", () => {
       handleClose();
@@ -2256,7 +2704,7 @@ function PageDrawer({
     });
     return () => subscription.remove();
   }, [handleClose, visible]);
-  const panResponder = import_react16.default.useMemo(
+  const panResponder = import_react17.default.useMemo(
     () => import_react_native13.PanResponder.create({
       onMoveShouldSetPanResponder: (_event, gestureState) => {
         if (!swipeEnabled) return false;
@@ -2287,6 +2735,7 @@ function PageDrawer({
     }),
     [handleClose, placement, swipeEnabled, swipeThreshold, width]
   );
+  if (!visible) return null;
   const drawerContent = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     AppView,
     {
@@ -2383,23 +2832,66 @@ function GradientView({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_expo_linear_gradient.LinearGradient, { colors: [...colors], start, end, style, ...props, children });
 }
 
-// src/ui/form/AppInput.tsx
-var import_react17 = require("react");
-var import_react_native14 = require("react-native");
+// src/ui/feedback/Loading.tsx
 var import_jsx_runtime21 = require("nativewind/jsx-runtime");
-var AppInput = (0, import_react17.forwardRef)(
+var LOADING_CLOSE_DELAY = 3e4;
+function Loading({
+  text,
+  color,
+  overlay = false,
+  visible = true,
+  testID,
+  onClose
+}) {
+  const [showCloseButton, setShowCloseButton] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime21.jsxs)(AppView, { center: true, gap: 3, testID, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native14.ActivityIndicator, { size: "large", color }),
+    text && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppText, { style: color ? { color } : void 0, children: text }),
+    showCloseButton && onClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      AppPressable,
+      {
+        testID: testID ? `${testID}-close` : "loading-close",
+        className: "mt-1 p-1",
+        onPress: onClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "close", size: "md", color: color || "white" })
+      }
+    )
+  ] });
+  if (overlay) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppView, { center: true, flex: true, className: "absolute inset-0 bg-black/30", testID, children: content });
+  }
+  return content;
+}
+
+// src/ui/form/AppInput.tsx
+var import_react19 = require("react");
+var import_react_native15 = require("react-native");
+var import_jsx_runtime22 = require("nativewind/jsx-runtime");
+var AppInput = (0, import_react19.forwardRef)(
   ({ label, error, disabled = false, leftIcon, rightIcon, className, style, ...props }, ref) => {
     const colors = useThemeColors();
-    const [isFocused, setIsFocused] = (0, import_react17.useState)(false);
+    const [isFocused, setIsFocused] = (0, import_react19.useState)(false);
     const errorColor = "#ef4444";
     const getBorderColor = () => {
       if (error) return errorColor;
       if (isFocused) return colors.primary;
       return colors.border;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(AppView, { className: cn("flex-col gap-1", className), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(AppView, { className: cn("flex-col gap-1", className), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         AppView,
         {
           row: true,
@@ -2414,9 +2906,9 @@ var AppInput = (0, import_react17.forwardRef)(
             }
           ],
           children: [
-            leftIcon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native14.View, { style: styles5.icon, children: leftIcon }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_react_native14.TextInput,
+            leftIcon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native15.View, { style: styles5.icon, children: leftIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_react_native15.TextInput,
               {
                 ref,
                 className: "flex-1 py-3 text-base",
@@ -2434,18 +2926,18 @@ var AppInput = (0, import_react17.forwardRef)(
                 ...props
               }
             ),
-            rightIcon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native14.View, { style: styles5.icon, children: rightIcon })
+            rightIcon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native15.View, { style: styles5.icon, children: rightIcon })
           ]
         }
       ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppText, { size: "xs", style: { color: errorColor }, children: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppText, { size: "xs", style: { color: errorColor }, children: error })
     ] });
   }
 );
 AppInput.displayName = "AppInput";
 var AppTextInput = AppInput;
 AppTextInput.displayName = "AppTextInput";
-var styles5 = import_react_native14.StyleSheet.create({
+var styles5 = import_react_native15.StyleSheet.create({
   inputContainer: {
     borderWidth: 0.5,
     minHeight: 48
@@ -2460,9 +2952,9 @@ var styles5 = import_react_native14.StyleSheet.create({
 });
 
 // src/ui/form/Checkbox.tsx
-var import_react18 = require("react");
-var import_react_native15 = require("react-native");
-var import_jsx_runtime22 = require("nativewind/jsx-runtime");
+var import_react20 = require("react");
+var import_react_native16 = require("react-native");
+var import_jsx_runtime23 = require("nativewind/jsx-runtime");
 function Checkbox({
   checked,
   defaultChecked,
@@ -2473,7 +2965,7 @@ function Checkbox({
   testID
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = (0, import_react18.useState)(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = (0, import_react20.useState)(defaultChecked || false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const toggle = () => {
     if (disabled) return;
@@ -2484,8 +2976,8 @@ function Checkbox({
     onChange?.(newChecked);
   };
   const disabledOpacity = 0.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-    import_react_native15.TouchableOpacity,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    import_react_native16.TouchableOpacity,
     {
       onPress: toggle,
       disabled,
@@ -2494,7 +2986,7 @@ function Checkbox({
       testID,
       activeOpacity: 0.7,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           AppView,
           {
             className: cn(
@@ -2508,17 +3000,27 @@ function Checkbox({
                 borderColor: isChecked ? colors.primary : colors.border
               }
             ],
-            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppView, { testID: `${testID}-icon`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "check", size: "sm", color: "white" }) })
+            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppView, { pointerEvents: "none", style: styles6.iconContainer, testID: `${testID}-icon`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "check", size: 14, color: "white", style: styles6.icon }) })
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppText, { size: "sm", style: { color: colors.text }, children })
+        children && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppText, { size: "sm", style: { color: colors.text }, children })
       ]
     }
   );
 }
-var styles6 = import_react_native15.StyleSheet.create({
+var styles6 = import_react_native16.StyleSheet.create({
   checkbox: {
     borderWidth: 0.5
+  },
+  iconContainer: {
+    ...import_react_native16.StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  icon: {
+    lineHeight: 14,
+    includeFontPadding: false,
+    textAlignVertical: "center"
   }
 });
 
@@ -2534,7 +3036,7 @@ var isGroupOptionDisabled = (groupDisabled, optionDisabled) => {
 };
 
 // src/ui/form/CheckboxGroup.tsx
-var import_jsx_runtime23 = require("nativewind/jsx-runtime");
+var import_jsx_runtime24 = require("nativewind/jsx-runtime");
 function CheckboxGroup({
   value = [],
   onChange,
@@ -2547,7 +3049,7 @@ function CheckboxGroup({
     onChange(toggleGroupValue(value, optionValue, checked));
   };
   const isRow = direction === "row";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Checkbox,
     {
       checked: value.includes(option.value),
@@ -2560,9 +3062,9 @@ function CheckboxGroup({
 }
 
 // src/ui/form/Radio.tsx
-var import_react19 = require("react");
-var import_react_native16 = require("react-native");
-var import_jsx_runtime24 = require("nativewind/jsx-runtime");
+var import_react21 = require("react");
+var import_react_native17 = require("react-native");
+var import_jsx_runtime25 = require("nativewind/jsx-runtime");
 function Radio({
   checked,
   defaultChecked,
@@ -2573,7 +3075,7 @@ function Radio({
   testID
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = (0, import_react19.useState)(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = (0, import_react21.useState)(defaultChecked || false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const toggle = () => {
     if (disabled) return;
@@ -2584,8 +3086,8 @@ function Radio({
     onChange?.(newChecked);
   };
   const disabledOpacity = 0.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    import_react_native16.TouchableOpacity,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    import_react_native17.TouchableOpacity,
     {
       onPress: toggle,
       disabled,
@@ -2594,7 +3096,7 @@ function Radio({
       testID,
       activeOpacity: 0.7,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           AppView,
           {
             className: cn("w-5 h-5 rounded-full items-center justify-center", isChecked && "border-2"),
@@ -2606,7 +3108,7 @@ function Radio({
                 borderWidth: isChecked ? 0.5 : 0.5
               }
             ],
-            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               AppView,
               {
                 className: "rounded-full",
@@ -2615,12 +3117,12 @@ function Radio({
             )
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppText, { size: "sm", style: { color: colors.text }, children })
+        children && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AppText, { size: "sm", style: { color: colors.text }, children })
       ]
     }
   );
 }
-var styles7 = import_react_native16.StyleSheet.create({
+var styles7 = import_react_native17.StyleSheet.create({
   radio: {
     borderWidth: 0.5
   },
@@ -2631,7 +3133,7 @@ var styles7 = import_react_native16.StyleSheet.create({
 });
 
 // src/ui/form/RadioGroup.tsx
-var import_jsx_runtime25 = require("nativewind/jsx-runtime");
+var import_jsx_runtime26 = require("nativewind/jsx-runtime");
 function RadioGroup({
   value,
   onChange,
@@ -2640,7 +3142,7 @@ function RadioGroup({
   disabled = false
 }) {
   const isRow = direction === "row";
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppView, { row: isRow, flex: isRow, gap: 4, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Radio,
     {
       checked: value === option.value,
@@ -2653,9 +3155,17 @@ function RadioGroup({
 }
 
 // src/ui/form/Switch.tsx
-var import_react20 = require("react");
-var import_react_native17 = require("react-native");
-var import_jsx_runtime26 = require("nativewind/jsx-runtime");
+var import_react22 = require("react");
+var import_react_native18 = require("react-native");
+var import_jsx_runtime27 = require("nativewind/jsx-runtime");
+function createAnimatedValue2(value) {
+  const AnimatedValue = import_react_native18.Animated.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
 function Switch({
   checked,
   defaultChecked,
@@ -2667,35 +3177,79 @@ function Switch({
   style
 }) {
   const colors = useThemeColors();
-  const [internalChecked, setInternalChecked] = (0, import_react20.useState)(defaultChecked || false);
+  const [internalChecked, setInternalChecked] = (0, import_react22.useState)(defaultChecked || false);
+  const [isInteractionLocked, setIsInteractionLocked] = (0, import_react22.useState)(false);
+  const isFirstRender = (0, import_react22.useRef)(true);
+  const unlockTimerRef = (0, import_react22.useRef)(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 = (0, import_react22.useRef)(createAnimatedValue2(isChecked ? maxTranslateX : 0)).current;
+  const clearUnlockTimer = () => {
+    if (!unlockTimerRef.current) return;
+    clearTimeout(unlockTimerRef.current);
+    unlockTimerRef.current = null;
+  };
+  const animateThumb = (nextChecked, shouldUnlock = true) => {
+    import_react_native18.Animated.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);
+      }
+    });
+  };
+  (0, import_react22.useEffect)(() => {
+    if (isFirstRender.current) {
+      thumbTranslateX.setValue(isChecked ? maxTranslateX : 0);
+      isFirstRender.current = false;
+      return;
+    }
+    animateThumb(isChecked);
+  }, [isChecked, maxTranslateX, thumbTranslateX]);
+  (0, import_react22.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime26.jsx)(
-    import_react_native17.TouchableOpacity,
+  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__ */ (0, import_jsx_runtime27.jsx)(
+    import_react_native18.TouchableOpacity,
     {
       onPress: toggle,
-      disabled,
+      disabled: disabled || isInteractionLocked,
       className: cn(className),
       testID,
-      activeOpacity: disabled ? 1 : 0.8,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      activeOpacity: disabled || isInteractionLocked ? 1 : 0.8,
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         AppView,
         {
           className: "rounded-full",
@@ -2704,22 +3258,22 @@ function Switch({
             {
               width: config.width,
               height: config.height,
-              backgroundColor: isChecked ? checkedTrackColor : uncheckedTrackColor,
-              opacity: disabled ? disabledOpacity : 1
+              backgroundColor: trackBackgroundColor,
+              borderColor: trackBorderColor
             },
             style
           ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            AppView,
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_react_native18.Animated.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,
@@ -2733,10 +3287,11 @@ function Switch({
     }
   );
 }
-var styles8 = import_react_native17.StyleSheet.create({
+var styles8 = import_react_native18.StyleSheet.create({
   track: {
     justifyContent: "center",
-    padding: 2
+    padding: 2,
+    borderWidth: 0.5
   },
   thumb: {
     elevation: 2,
@@ -2748,15 +3303,15 @@ var styles8 = import_react_native17.StyleSheet.create({
 });
 
 // src/ui/form/Slider.tsx
-var import_react22 = require("react");
-var import_react_native18 = require("react-native");
+var import_react24 = require("react");
+var import_react_native19 = require("react-native");
 
 // src/ui/form/useFormTheme.ts
-var import_react21 = require("react");
+var import_react23 = require("react");
 function useFormThemeColors() {
   const { isDark } = useOptionalTheme();
   const colors = useThemeColors();
-  return (0, import_react21.useMemo)(
+  return (0, import_react23.useMemo)(
     () => ({
       primary: colors.primary,
       primarySurface: colors.primarySurface,
@@ -2777,7 +3332,7 @@ function useFormThemeColors() {
 }
 
 // src/ui/form/Slider.tsx
-var import_jsx_runtime27 = require("nativewind/jsx-runtime");
+var import_jsx_runtime28 = require("nativewind/jsx-runtime");
 function Slider({
   value,
   defaultValue = 0,
@@ -2791,53 +3346,82 @@ function Slider({
   className
 }) {
   const colors = useFormThemeColors();
-  const [internalValue, setInternalValue] = (0, import_react22.useState)(defaultValue);
-  const [trackWidth, setTrackWidth] = (0, import_react22.useState)(0);
-  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
+  const [internalValue, setInternalValue] = (0, import_react24.useState)(defaultValue);
+  const [isDragging, setIsDragging] = (0, import_react24.useState)(false);
+  const trackWidthRef = (0, import_react24.useRef)(0);
+  const currentValueRef = (0, import_react24.useRef)(value ?? defaultValue);
+  const dragStartValueRef = (0, import_react24.useRef)(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 = (0, import_react22.useCallback)(
+  const progress = range <= 0 ? 0 : (currentValue - min) / range * 100;
+  (0, import_react24.useEffect)(() => {
+    currentValueRef.current = currentValue;
+  }, [currentValue]);
+  const clampValue = (0, import_react24.useCallback)(
+    (nextValue) => {
+      if (!Number.isFinite(nextValue)) return currentValueRef.current;
+      return Math.min(max, Math.max(min, nextValue));
+    },
+    [max, min]
+  );
+  const valueToPosition = (0, import_react24.useCallback)(
+    (nextValue) => {
+      if (trackWidthRef.current <= 0 || range <= 0) return 0;
+      return (clampValue(nextValue) - min) / range * trackWidthRef.current;
+    },
+    [clampValue, min, range]
+  );
+  const getValueFromPosition = (0, import_react24.useCallback)(
     (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 = (0, import_react22.useCallback)(
+  const setValue = (0, import_react24.useCallback)(
     (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 = (0, import_react22.useRef)(
-    import_react_native18.PanResponder.create({
+  const panResponder = (0, import_react24.useMemo)(
+    () => import_react_native19.PanResponder.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 = (0, import_react22.useCallback)(
+    }),
+    [disabled, getValueFromPosition, onChangeEnd, setValue, valueToPosition]
+  );
+  const handleTrackPress = (0, import_react24.useCallback)(
     (event) => {
       if (disabled) return;
       const { locationX } = event.nativeEvent;
@@ -2847,11 +3431,12 @@ function Slider({
     },
     [disabled, getValueFromPosition, setValue, onChangeEnd]
   );
-  const onLayout = (0, import_react22.useCallback)((event) => {
-    setTrackWidth(event.nativeEvent.layout.width);
+  const onLayout = (0, import_react24.useCallback)((event) => {
+    const width = event.nativeEvent.layout.width;
+    trackWidthRef.current = width;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(AppView, { className: cn("py-2", className), children: [
-    showTooltip && isDragging && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(AppView, { className: cn("py-2", className), children: [
+    showTooltip && isDragging && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       AppView,
       {
         className: "absolute rounded px-2 py-1 -top-8",
@@ -2864,8 +3449,8 @@ function Slider({
           }
         ],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppText, { size: "xs", style: { color: colors.text }, children: Math.round(currentValue) }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { size: "xs", style: { color: colors.text }, children: Math.round(currentValue) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             AppView,
             {
               style: [
@@ -2879,8 +3464,8 @@ function Slider({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-      import_react_native18.View,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      import_react_native19.View,
       {
         onLayout,
         className: "rounded-full",
@@ -2890,7 +3475,7 @@ function Slider({
         ],
         onTouchEnd: handleTrackPress,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             AppView,
             {
               className: "rounded-full",
@@ -2903,7 +3488,7 @@ function Slider({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             AppView,
             {
               className: "absolute rounded-full items-center justify-center",
@@ -2920,7 +3505,7 @@ function Slider({
                 }
               ],
               ...panResponder.panHandlers,
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 AppView,
                 {
                   className: "rounded-full",
@@ -2939,7 +3524,7 @@ function Slider({
     )
   ] });
 }
-var styles9 = import_react_native18.StyleSheet.create({
+var styles9 = import_react_native19.StyleSheet.create({
   track: {
     height: 6,
     width: "100%"
@@ -2980,9 +3565,204 @@ var styles9 = import_react_native18.StyleSheet.create({
 });
 
 // src/ui/form/Select.tsx
-var import_react23 = require("react");
-var import_react_native19 = require("react-native");
-var import_jsx_runtime28 = require("nativewind/jsx-runtime");
+var import_react26 = require("react");
+var import_react_native21 = require("react-native");
+
+// src/ui/form/BottomSheetModal.tsx
+var import_react25 = require("react");
+var import_react_native20 = require("react-native");
+var import_jsx_runtime29 = require("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 = import_react_native20.Animated.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] = (0, import_react25.useState)(visible);
+  const overlayOpacity = (0, import_react25.useRef)(createAnimatedValue3(0)).current;
+  const sheetTranslateY = (0, import_react25.useRef)(createAnimatedValue3(SHEET_INITIAL_OFFSET)).current;
+  const isDraggingRef = (0, import_react25.useRef)(false);
+  const handlePanResponder = (0, import_react25.useMemo)(
+    () => import_react_native20.PanResponder.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;
+        }
+        import_react_native20.Animated.timing(sheetTranslateY, {
+          toValue: 0,
+          duration: SHEET_OPEN_DURATION,
+          useNativeDriver: true
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        isDraggingRef.current = false;
+        import_react_native20.Animated.timing(sheetTranslateY, {
+          toValue: 0,
+          duration: SHEET_OPEN_DURATION,
+          useNativeDriver: true
+        }).start();
+      }
+    }),
+    [onRequestClose, sheetTranslateY, swipeToClose, visible]
+  );
+  (0, import_react25.useEffect)(() => {
+    if (visible) {
+      setRenderVisible(true);
+      overlayOpacity.setValue(0);
+      sheetTranslateY.setValue(SHEET_INITIAL_OFFSET);
+      startAnimations([
+        import_react_native20.Animated.timing(overlayOpacity, {
+          toValue: 1,
+          duration: OVERLAY_OPEN_DURATION,
+          useNativeDriver: true
+        }),
+        import_react_native20.Animated.timing(sheetTranslateY, {
+          toValue: 0,
+          duration: SHEET_OPEN_DURATION,
+          useNativeDriver: true
+        })
+      ]);
+      return;
+    }
+    if (!renderVisible) return;
+    isDraggingRef.current = false;
+    startAnimations(
+      [
+        import_react_native20.Animated.timing(overlayOpacity, {
+          toValue: 0,
+          duration: OVERLAY_CLOSE_DURATION,
+          useNativeDriver: true
+        }),
+        import_react_native20.Animated.timing(sheetTranslateY, {
+          toValue: SHEET_CLOSED_OFFSET,
+          duration: SHEET_CLOSE_DURATION,
+          useNativeDriver: true
+        })
+      ],
+      () => {
+        setRenderVisible(false);
+      }
+    );
+  }, [overlayOpacity, renderVisible, sheetTranslateY, visible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native20.Modal, { visible: renderVisible, transparent: true, animationType: "none", onRequestClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(AppView, { flex: true, justify: "end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_react_native20.Animated.View,
+      {
+        pointerEvents: "none",
+        style: [import_react_native20.StyleSheet.absoluteFillObject, { backgroundColor: overlayColor, opacity: overlayOpacity }]
+      }
+    ),
+    closeOnBackdropPress && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppPressable, { testID: backdropTestID, className: "flex-1", onPress: onRequestClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      import_react_native20.Animated.View,
+      {
+        className: contentClassName,
+        style: [
+          styles10.sheet,
+          {
+            backgroundColor: surfaceColor,
+            maxHeight,
+            transform: [{ translateY: sheetTranslateY }]
+          },
+          contentStyle
+        ],
+        children: [
+          showHandle && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            AppView,
+            {
+              testID: handleTestID,
+              center: true,
+              className: "pt-2 pb-1",
+              ...swipeToClose ? handlePanResponder.panHandlers : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { style: styles10.handle })
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] }) });
+}
+var styles10 = import_react_native20.StyleSheet.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
+var import_jsx_runtime30 = require("nativewind/jsx-runtime");
 function formatSelectedCountText(template, count) {
   return template.replace("{{count}}", String(count));
 }
@@ -3005,24 +3785,24 @@ function Select({
   className
 }) {
   const colors = useFormThemeColors();
-  const [visible, setVisible] = (0, import_react23.useState)(false);
-  const [searchKeyword, setSearchKeyword] = (0, import_react23.useState)("");
-  const selectedValues = (0, import_react23.useMemo)(() => {
+  const [visible, setVisible] = (0, import_react26.useState)(false);
+  const [searchKeyword, setSearchKeyword] = (0, import_react26.useState)("");
+  const selectedValues = (0, import_react26.useMemo)(() => {
     if (multiple) {
       return Array.isArray(value) ? value : [];
     }
     return value ? [value] : [];
   }, [value, multiple]);
-  const displayText = (0, import_react23.useMemo)(() => {
+  const displayText = (0, import_react26.useMemo)(() => {
     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 = (0, import_react23.useMemo)(() => {
+  const filteredOptions = (0, import_react26.useMemo)(() => {
     if (!searchable || !searchKeyword) return options;
     return options.filter((opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase()));
   }, [options, searchable, searchKeyword]);
-  const handleSelect = (0, import_react23.useCallback)(
+  const handleSelect = (0, import_react26.useCallback)(
     (optionValue) => {
       if (multiple) {
         const currentValues = Array.isArray(value) ? value : [];
@@ -3033,26 +3813,26 @@ function Select({
         setVisible(false);
       }
     },
-    [multiple, value, onChange]
+    [multiple, onChange, value]
   );
-  const handleClear = (0, import_react23.useCallback)(
+  const handleClear = (0, import_react26.useCallback)(
     (e) => {
       e.stopPropagation();
       onChange?.(multiple ? [] : "");
     },
     [multiple, onChange]
   );
-  const handleSearch = (0, import_react23.useCallback)(
+  const handleSearch = (0, import_react26.useCallback)(
     (text) => {
       setSearchKeyword(text);
       onSearch?.(text);
     },
     [onSearch]
   );
-  const renderOption = (0, import_react23.useCallback)(
+  const renderOption = (0, import_react26.useCallback)(
     ({ item }) => {
       const isSelected = selectedValues.includes(item.value);
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         AppPressable,
         {
           className: cn(
@@ -3060,22 +3840,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__ */ (0, import_jsx_runtime28.jsx)(AppText, { style: { color: isSelected ? colors.primary : colors.text }, children: item.label }),
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "check", size: "sm", color: "primary-500" })
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { style: { color: isSelected ? colors.primary : colors.text }, children: item.label }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "check", size: "sm", color: "primary-500" })
           ]
         }
       );
     },
     [selectedValues, handleSelect, colors]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       AppPressable,
       {
         className: cn(
@@ -3083,11 +3863,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__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             AppText,
             {
               className: "flex-1",
@@ -3096,111 +3876,106 @@ function Select({
               children: displayText
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native19.View, { className: "flex-row items-center", children: [
-            clearable && selectedValues.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native19.TouchableOpacity, { onPress: handleClear, className: "mr-2 p-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "close", size: "sm", color: colors.icon }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "keyboard-arrow-down", size: "md", color: colors.icon })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native21.View, { className: "flex-row items-center", children: [
+            clearable && selectedValues.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native21.TouchableOpacity, { onPress: handleClear, className: "mr-2 p-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "close", size: "sm", color: colors.icon }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "keyboard-arrow-down", size: "md", color: colors.icon })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_react_native19.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      BottomSheetModal,
       {
         visible,
-        transparent: true,
-        animationType: "slide",
         onRequestClose: () => setVisible(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-          AppView,
-          {
-            className: "rounded-t-2xl max-h-[70%]",
-            style: { backgroundColor: colors.surface },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-                AppView,
-                {
-                  row: true,
-                  between: true,
-                  items: "center",
-                  className: "px-4 py-3",
-                  style: [styles10.header, { borderBottomColor: colors.divider }],
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: multiple ? multipleSelectTitle : singleSelectTitle }),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native19.TouchableOpacity, { onPress: () => setVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "close", size: "md", color: colors.icon }) })
-                  ]
-                }
-              ),
-              searchable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                AppView,
-                {
-                  className: "px-4 py-3",
-                  style: [styles10.searchBox, { borderBottomColor: colors.divider }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-                    AppView,
-                    {
-                      row: true,
-                      items: "center",
-                      className: "px-3 py-2 rounded-lg",
-                      style: { backgroundColor: colors.surfaceMuted },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native19.View, { style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "search", size: "sm", color: colors.icon }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                          import_react_native19.TextInput,
-                          {
-                            className: "flex-1 text-base",
-                            style: { color: colors.text },
-                            placeholder: searchPlaceholder,
-                            placeholderTextColor: colors.textMuted,
-                            value: searchKeyword,
-                            onChangeText: handleSearch,
-                            autoFocus: true
-                          }
-                        ),
-                        searchKeyword.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native19.TouchableOpacity, { onPress: () => setSearchKeyword(""), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "close", size: "sm", color: colors.icon }) })
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                import_react_native19.FlatList,
-                {
-                  data: filteredOptions,
-                  keyExtractor: (item) => item.value,
-                  renderItem: renderOption,
-                  ListEmptyComponent: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppView, { center: true, className: "py-8", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppText, { style: { color: colors.textMuted }, children: emptyText }) })
-                }
-              ),
-              multiple && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        overlayColor: colors.overlay,
+        surfaceColor: colors.surface,
+        closeOnBackdropPress: true,
+        contentClassName: "max-h-[70%]",
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            AppView,
+            {
+              row: true,
+              between: true,
+              items: "center",
+              className: "px-4 py-3",
+              style: [styles11.header, { borderBottomColor: colors.divider }],
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: multiple ? multipleSelectTitle : singleSelectTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native21.TouchableOpacity, { onPress: () => setVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "close", size: "md", color: colors.icon }) })
+              ]
+            }
+          ),
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            AppView,
+            {
+              className: "px-4 py-3",
+              style: [styles11.searchBox, { borderBottomColor: colors.divider }],
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                 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__ */ (0, import_jsx_runtime28.jsx)(AppText, { style: { color: colors.textMuted }, children: formatSelectedCountText(selectedCountText, selectedValues.length) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                      import_react_native19.TouchableOpacity,
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native21.View, { style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "search", size: "sm", color: colors.icon }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      import_react_native21.TextInput,
                       {
-                        className: "px-4 py-2 rounded-lg",
-                        style: { backgroundColor: colors.primary },
-                        onPress: () => setVisible(false),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(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__ */ (0, import_jsx_runtime30.jsx)(import_react_native21.TouchableOpacity, { onPress: () => setSearchKeyword(""), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "close", size: "sm", color: colors.icon }) })
                   ]
                 }
               )
-            ]
-          }
-        ) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_react_native21.FlatList,
+            {
+              data: filteredOptions,
+              keyExtractor: (item, index) => `${item.value}-${index}`,
+              renderItem: renderOption,
+              ListEmptyComponent: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppView, { center: true, className: "py-8", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { style: { color: colors.textMuted }, children: emptyText }) })
+            }
+          ),
+          multiple && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            AppView,
+            {
+              row: true,
+              between: true,
+              items: "center",
+              className: "px-4 py-3",
+              style: [styles11.footer, { borderTopColor: colors.divider }],
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { style: { color: colors.textMuted }, children: formatSelectedCountText(selectedCountText, selectedValues.length) }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  import_react_native21.TouchableOpacity,
+                  {
+                    className: "px-4 py-2 rounded-lg",
+                    style: { backgroundColor: colors.primary },
+                    onPress: () => setVisible(false),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { className: "font-medium", style: { color: colors.textInverse }, children: confirmText })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     )
   ] });
 }
-var styles10 = import_react_native19.StyleSheet.create({
+var styles11 = import_react_native21.StyleSheet.create({
   trigger: {
     borderWidth: 0.5
   },
@@ -3218,126 +3993,302 @@ var styles10 = import_react_native19.StyleSheet.create({
   }
 });
 
-// src/ui/form/DatePicker.tsx
-var import_react24 = require("react");
-var import_react_native20 = require("react-native");
-var import_jsx_runtime29 = require("nativewind/jsx-runtime");
-function PickerColumn({
-  title,
-  values,
+// src/ui/form/Picker.tsx
+var import_react27 = require("react");
+var import_react_native22 = require("react-native");
+var import_jsx_runtime31 = require("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__ */ (0, import_jsx_runtime29.jsxs)(
+  const scrollRef = (0, import_react27.useRef)(null);
+  const paddingRows = Math.floor(visibleRows / 2);
+  const selectedIndex = Math.max(
+    0,
+    column.options.findIndex((option) => option.value === selectedValue)
+  );
+  const scrollToIndex = (0, import_react27.useCallback)(
+    (index, animated) => {
+      scrollRef.current?.scrollTo?.({ y: index * rowHeight, animated });
+    },
+    [rowHeight]
+  );
+  const selectNearestEnabled = (0, import_react27.useCallback)(
+    (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 = (0, import_react27.useCallback)(
+    (event) => {
+      const offsetY = event.nativeEvent.contentOffset?.y ?? 0;
+      selectNearestEnabled(Math.round(offsetY / rowHeight));
+    },
+    [rowHeight, selectNearestEnabled]
+  );
+  (0, import_react27.useEffect)(() => {
+    scrollToIndex(selectedIndex, false);
+  }, [scrollToIndex, selectedIndex]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     AppView,
     {
       flex: true,
       style: [
-        showDivider && styles11.column,
+        showDivider ? styles12.columnDivider : void 0,
         showDivider ? { borderRightColor: colors.divider } : void 0
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { center: true, className: "py-2", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { className: "text-sm font-medium", style: { color: colors.textMuted }, children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { className: "flex-1", children: values.map((value) => {
-          const selected = selectedValue === value;
-          const disabled = isDisabled(value);
-          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            import_react_native20.TouchableOpacity,
-            {
-              className: cn("py-2 items-center", selected && "bg-primary-50"),
-              style: selected ? { backgroundColor: colors.primarySurface } : void 0,
-              disabled,
-              onPress: () => onSelect(value),
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                AppText,
+        column.title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppView, { center: true, className: "py-2", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppText, { className: "text-sm font-medium", style: { color: colors.textMuted }, children: column.title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          AppView,
+          {
+            style: [
+              styles12.wheelViewport,
+              {
+                height: rowHeight * visibleRows,
+                backgroundColor: colors.surface
+              }
+            ],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                import_react_native22.ScrollView,
                 {
-                  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__ */ (0, import_jsx_runtime31.jsx)(
+                      import_react_native22.TouchableOpacity,
+                      {
+                        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__ */ (0, import_jsx_runtime31.jsx)(
+                          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__ */ (0, import_jsx_runtime31.jsx)(
+                AppView,
+                {
+                  pointerEvents: "none",
+                  style: [
+                    styles12.fadeMask,
+                    {
+                      top: 0,
+                      height: rowHeight * paddingRows
+                    }
+                  ],
+                  children: [0.92, 0.72, 0.48, 0.24].map((opacity) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    AppView,
+                    {
+                      flex: true,
+                      style: { backgroundColor: colors.surface, opacity }
+                    },
+                    `top-${opacity}`
+                  ))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                AppView,
+                {
+                  pointerEvents: "none",
+                  style: [
+                    styles12.fadeMask,
+                    {
+                      bottom: 0,
+                      height: rowHeight * paddingRows
+                    }
+                  ],
+                  children: [0.24, 0.48, 0.72, 0.92].map((opacity) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    AppView,
+                    {
+                      flex: true,
+                      style: { backgroundColor: colors.surface, opacity }
+                    },
+                    `bottom-${opacity}`
+                  ))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                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] = (0, import_react24.useState)(false);
-  const [tempDate, setTempDate] = (0, import_react24.useState)(value || /* @__PURE__ */ new Date());
-  const displayText = (0, import_react24.useMemo)(() => {
-    return value ? formatDate(value, format) : placeholder;
-  }, [value, format, placeholder]);
-  const handleConfirm = (0, import_react24.useCallback)(() => {
-    onChange?.(tempDate);
-    setVisible(false);
-  }, [tempDate, onChange]);
-  const years = (0, import_react24.useMemo)(() => {
-    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-    const arr = [];
-    for (let i = currentYear - 50; i <= currentYear + 50; i++) {
-      arr.push(i);
+  const [visible, setVisible] = (0, import_react27.useState)(false);
+  const [internalTempValues, setInternalTempValues] = (0, import_react27.useState)(
+    normalizeValues(columns, defaultTempValue ?? value)
+  );
+  const isControlledTemp = tempValue !== void 0;
+  const tempValues = (0, import_react27.useMemo)(
+    () => isControlledTemp ? normalizeValues(columns, tempValue) : internalTempValues,
+    [columns, internalTempValues, isControlledTemp, tempValue]
+  );
+  (0, import_react27.useEffect)(() => {
+    if (!isControlledTemp) {
+      setInternalTempValues((previous) => normalizeValues(columns, previous));
     }
-    return arr;
-  }, []);
-  const months = (0, import_react24.useMemo)(() => {
-    return Array.from({ length: 12 }, (_, i) => i + 1);
-  }, []);
-  const days = (0, import_react24.useMemo)(() => {
-    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 = (0, import_react24.useCallback)(
-    (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 = (0, import_react27.useMemo)(
+    () => columns.map(
+      (column, index) => column.options.find((option) => option.value === value?.[index] && !option.disabled)
+    ),
+    [columns, value]
+  );
+  const displayText = (0, import_react27.useMemo)(() => {
+    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 = (0, import_react27.useCallback)(
+    (nextValues) => {
+      const normalized = normalizeValues(columns, nextValues);
+      if (isControlledTemp) {
+        onTempChange?.(normalized);
+        return;
+      }
+      setInternalTempValues(normalized);
+      onTempChange?.(normalized);
     },
-    [minDate, maxDate]
+    [columns, isControlledTemp, onTempChange]
   );
-  const updateTempDate = (0, import_react24.useCallback)(
-    (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 = (0, import_react27.useCallback)(
+    (columnIndex, nextValue) => {
+      const nextValues = [...tempValues];
+      nextValues[columnIndex] = nextValue;
+      setTempValues(nextValues);
     },
-    [tempDate]
+    [setTempValues, tempValues]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  const openModal = (0, import_react27.useCallback)(() => {
+    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 = (0, import_react27.useCallback)(() => {
+    onChange?.(tempValues);
+    setVisible(false);
+  }, [onChange, tempValues]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       AppPressable,
       {
         className: cn(
@@ -3345,147 +4296,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__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             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__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "calendar-today", size: "md", color: colors.icon })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: triggerIconName, size: "md", color: colors.icon })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_react_native20.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      BottomSheetModal,
       {
         visible,
-        transparent: true,
-        animationType: "slide",
         onRequestClose: () => setVisible(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { className: "flex-1", style: { backgroundColor: colors.overlay }, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(AppView, { className: "rounded-t-2xl", style: { backgroundColor: colors.surface }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        overlayColor: colors.overlay,
+        surfaceColor: colors.surface,
+        closeOnBackdropPress: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             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__ */ (0, import_jsx_runtime29.jsx)(import_react_native20.TouchableOpacity, { onPress: () => setVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.textMuted }, children: cancelText }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: pickerTitle }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native20.TouchableOpacity, { onPress: handleConfirm, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.primary }, className: "font-medium", children: confirmText }) })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native22.TouchableOpacity, { onPress: () => setVisible(false), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppText, { style: { color: colors.textMuted }, children: cancelText }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppText, { className: "text-lg font-semibold", style: { color: colors.text }, children: pickerTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native22.TouchableOpacity, { onPress: handleConfirm, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppText, { className: "font-medium", style: { color: colors.primary }, children: confirmText }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppView, { center: true, className: "py-4", style: { backgroundColor: colors.headerSurface }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { className: "text-2xl font-semibold", style: { color: colors.text }, children: formatDate(tempDate, pickerDateFormat) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(AppView, { row: true, className: "h-48", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              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__ */ (0, import_jsx_runtime29.jsx)(
-              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__ */ (0, import_jsx_runtime29.jsx)(
-              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__ */ (0, import_jsx_runtime29.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AppView, { row: true, children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            WheelPickerColumn,
+            {
+              colors,
+              column,
+              onChange: (nextValue) => updateColumnValue(index, nextValue),
+              rowHeight,
+              selectedValue: tempValues[index],
+              showDivider: index < columns.length - 1,
+              visibleRows
+            },
+            column.key
+          )) }),
+          renderFooter && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             AppView,
             {
-              row: true,
-              className: "px-4 py-3 gap-2",
-              style: [styles11.footer, { borderTopColor: colors.divider }],
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                  import_react_native20.TouchableOpacity,
-                  {
-                    className: "flex-1 py-2 items-center rounded-lg",
-                    style: { backgroundColor: colors.surfaceMuted },
-                    onPress: () => setTempDate(/* @__PURE__ */ new Date()),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.text }, children: todayText })
-                  }
-                ),
-                minDate && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                  import_react_native20.TouchableOpacity,
-                  {
-                    className: "flex-1 py-2 items-center rounded-lg",
-                    style: { backgroundColor: colors.surfaceMuted },
-                    onPress: () => setTempDate(minDate),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppText, { style: { color: colors.text }, children: minDateText })
-                  }
-                ),
-                maxDate && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                  import_react_native20.TouchableOpacity,
-                  {
-                    className: "flex-1 py-2 items-center rounded-lg",
-                    style: { backgroundColor: colors.surfaceMuted },
-                    onPress: () => setTempDate(maxDate),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(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 = import_react_native20.StyleSheet.create({
-  trigger: {
-    borderWidth: 0.5
-  },
-  header: {
-    borderBottomWidth: 0.5
-  },
-  column: {
-    borderRightWidth: 0.5
-  },
-  footer: {
-    borderTopWidth: 0.5
-  }
-});
+var styles12 = import_react_native22.StyleSheet.create({
+  trigger: {
+    borderWidth: 0.5
+  },
+  header: {
+    borderBottomWidth: 0.5
+  },
+  footer: {
+    borderTopWidth: 0.5
+  },
+  columnDivider: {
+    borderRightWidth: 0.5
+  },
+  wheelViewport: {
+    position: "relative",
+    overflow: "hidden"
+  },
+  fadeMask: {
+    position: "absolute",
+    left: 0,
+    right: 0
+  },
+  selectionOverlay: {
+    position: "absolute",
+    left: 8,
+    right: 8,
+    borderRadius: 12,
+    borderWidth: 0.5
+  },
+  optionButton: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/ui/form/DatePicker.tsx
+var import_react28 = require("react");
+var import_react_native23 = require("react-native");
+var import_jsx_runtime32 = require("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] = (0, import_react28.useState)(value || /* @__PURE__ */ new Date());
+  (0, import_react28.useEffect)(() => {
+    if (value) setTempDate(value);
+  }, [value]);
+  const years = (0, import_react28.useMemo)(() => {
+    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 = (0, import_react28.useMemo)(() => Array.from({ length: 12 }, (_, index) => index + 1), []);
+  const days = (0, import_react28.useMemo)(() => {
+    const daysInMonth = new Date(tempDate.getFullYear(), tempDate.getMonth() + 1, 0).getDate();
+    return Array.from({ length: daysInMonth }, (_, index) => index + 1);
+  }, [tempDate]);
+  const isDateDisabled = (0, import_react28.useCallback)(
+    (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 = (0, import_react28.useMemo)(
+    () => [
+      {
+        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 = (0, import_react28.useCallback)((nextValues) => {
+    const [nextYear, nextMonth, nextDay] = nextValues;
+    if (typeof nextYear !== "number" || typeof nextMonth !== "number" || typeof nextDay !== "number") {
+      return;
+    }
+    setTempDate(createSafeDate(nextYear, nextMonth, nextDay));
+  }, []);
+  const handleChange = (0, import_react28.useCallback)(
+    (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 = (0, import_react28.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime32.jsx)(
+    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__ */ (0, import_jsx_runtime32.jsx)(AppView, { row: true, className: "gap-2", children: quickActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        import_react_native23.TouchableOpacity,
+        {
+          className: "flex-1 py-2 items-center rounded-lg",
+          style: { backgroundColor: colors.surfaceMuted },
+          onPress: () => setTempDate(action.date),
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AppText, { style: { color: colors.text }, children: action.label })
+        },
+        action.label
+      )) })
+    }
+  );
+}
 
 // src/ui/form/FormItem.tsx
-var import_jsx_runtime30 = require("nativewind/jsx-runtime");
+var import_jsx_runtime33 = require("nativewind/jsx-runtime");
 function FormItem({
   name: _name,
   label,
@@ -3497,19 +4553,19 @@ function FormItem({
   labelClassName
 }) {
   const colors = useThemeColors();
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(AppView, { className: cn("mb-4", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(AppView, { row: true, items: "center", gap: 1, className: cn("mb-2", labelClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
-      required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { color: "error-500", children: "*" })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(AppView, { className: cn("mb-4", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(AppView, { row: true, items: "center", gap: 1, className: cn("mb-2", labelClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AppText, { size: "sm", weight: "medium", style: { color: colors.textSecondary }, children: label }),
+      required && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AppText, { color: "error-500", children: "*" })
     ] }),
     children,
-    error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { size: "sm", color: "error-500", className: "mt-1", children: error }),
-    help && !error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppText, { size: "sm", className: "mt-1", style: { color: colors.textMuted }, children: help })
+    error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AppText, { size: "sm", color: "error-500", className: "mt-1", children: error }),
+    help && !error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AppText, { size: "sm", className: "mt-1", style: { color: colors.textMuted }, children: help })
   ] });
 }
 
 // src/ui/form/useForm.ts
-var import_react25 = require("react");
+var import_react29 = require("react");
 var getIssuePath = (issue) => issue.path.map(String).join(".");
 var getFieldError = (issues, name) => {
   const exactIssue = issues.find((issue) => getIssuePath(issue) === name);
@@ -3525,16 +4581,16 @@ var buildFormErrors = (issues) => {
   }, {});
 };
 function useForm({ schema, defaultValues }) {
-  const [values, setValues] = (0, import_react25.useState)(defaultValues);
-  const [errors, setErrors] = (0, import_react25.useState)({});
-  const [isSubmitting, setIsSubmitting] = (0, import_react25.useState)(false);
-  const isDirty = (0, import_react25.useMemo)(() => {
+  const [values, setValues] = (0, import_react29.useState)(defaultValues);
+  const [errors, setErrors] = (0, import_react29.useState)({});
+  const [isSubmitting, setIsSubmitting] = (0, import_react29.useState)(false);
+  const isDirty = (0, import_react29.useMemo)(() => {
     return JSON.stringify(values) !== JSON.stringify(defaultValues);
   }, [values, defaultValues]);
-  const isValid = (0, import_react25.useMemo)(() => {
+  const isValid = (0, import_react29.useMemo)(() => {
     return Object.keys(errors).length === 0;
   }, [errors]);
-  const clearFieldError = (0, import_react25.useCallback)((name) => {
+  const clearFieldError = (0, import_react29.useCallback)((name) => {
     setErrors((prev) => {
       if (!(name in prev)) return prev;
       const next = { ...prev };
@@ -3542,20 +4598,20 @@ function useForm({ schema, defaultValues }) {
       return next;
     });
   }, []);
-  const setValue = (0, import_react25.useCallback)(
+  const setValue = (0, import_react29.useCallback)(
     (name, value) => {
       setValues((prev) => ({ ...prev, [name]: value }));
       clearFieldError(name);
     },
     [clearFieldError]
   );
-  const getValue = (0, import_react25.useCallback)(
+  const getValue = (0, import_react29.useCallback)(
     (name) => {
       return values[name];
     },
     [values]
   );
-  const validateField = (0, import_react25.useCallback)(
+  const validateField = (0, import_react29.useCallback)(
     async (name) => {
       const fieldName = name;
       const result = await schema.safeParseAsync(values);
@@ -3576,7 +4632,7 @@ function useForm({ schema, defaultValues }) {
     },
     [schema, values, clearFieldError]
   );
-  const validate = (0, import_react25.useCallback)(async () => {
+  const validate = (0, import_react29.useCallback)(async () => {
     const result = await schema.safeParseAsync(values);
     if (result.success) {
       setErrors({});
@@ -3585,12 +4641,12 @@ function useForm({ schema, defaultValues }) {
     setErrors(buildFormErrors(result.error.issues));
     return false;
   }, [schema, values]);
-  const reset = (0, import_react25.useCallback)(() => {
+  const reset = (0, import_react29.useCallback)(() => {
     setValues(defaultValues);
     setErrors({});
     setIsSubmitting(false);
   }, [defaultValues]);
-  const handleSubmit = (0, import_react25.useCallback)(
+  const handleSubmit = (0, import_react29.useCallback)(
     async (onSubmit) => {
       const valid = await validate();
       if (!valid) return;
@@ -3619,38 +4675,38 @@ function useForm({ schema, defaultValues }) {
 }
 
 // src/ui/hooks/useToggle.ts
-var import_react26 = require("react");
+var import_react30 = require("react");
 function useToggle(defaultValue = false) {
-  const [value, setValue] = (0, import_react26.useState)(defaultValue);
-  const toggle = (0, import_react26.useCallback)(() => {
+  const [value, setValue] = (0, import_react30.useState)(defaultValue);
+  const toggle = (0, import_react30.useCallback)(() => {
     setValue((v) => !v);
   }, []);
-  const set = (0, import_react26.useCallback)((newValue) => {
+  const set = (0, import_react30.useCallback)((newValue) => {
     setValue(newValue);
   }, []);
-  const setTrue = (0, import_react26.useCallback)(() => {
+  const setTrue = (0, import_react30.useCallback)(() => {
     setValue(true);
   }, []);
-  const setFalse = (0, import_react26.useCallback)(() => {
+  const setFalse = (0, import_react30.useCallback)(() => {
     setValue(false);
   }, []);
   return [value, { toggle, set, setTrue, setFalse }];
 }
 
 // src/ui/hooks/usePageDrawer.ts
-var import_react27 = require("react");
+var import_react31 = require("react");
 function usePageDrawer(defaultVisible = false) {
-  const [visible, setVisibleState] = (0, import_react27.useState)(defaultVisible);
-  const open = (0, import_react27.useCallback)(() => {
+  const [visible, setVisibleState] = (0, import_react31.useState)(defaultVisible);
+  const open = (0, import_react31.useCallback)(() => {
     setVisibleState(true);
   }, []);
-  const close = (0, import_react27.useCallback)(() => {
+  const close = (0, import_react31.useCallback)(() => {
     setVisibleState(false);
   }, []);
-  const toggle = (0, import_react27.useCallback)(() => {
+  const toggle = (0, import_react31.useCallback)(() => {
     setVisibleState((current) => !current);
   }, []);
-  const setVisible = (0, import_react27.useCallback)((nextVisible) => {
+  const setVisible = (0, import_react31.useCallback)((nextVisible) => {
     setVisibleState(nextVisible);
   }, []);
   return {
@@ -3663,10 +4719,10 @@ function usePageDrawer(defaultVisible = false) {
 }
 
 // src/ui/hooks/useDebounce.ts
-var import_react28 = require("react");
+var import_react32 = require("react");
 function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react28.useState)(value);
-  (0, import_react28.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react32.useState)(value);
+  (0, import_react32.useEffect)(() => {
     const timer = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -3678,11 +4734,11 @@ function useDebounce(value, delay = 500) {
 }
 
 // src/ui/hooks/useThrottle.ts
-var import_react29 = require("react");
+var import_react33 = require("react");
 function useThrottle(value, delay = 200) {
-  const [throttledValue, setThrottledValue] = (0, import_react29.useState)(value);
-  const lastUpdatedRef = (0, import_react29.useRef)(Date.now());
-  (0, import_react29.useEffect)(() => {
+  const [throttledValue, setThrottledValue] = (0, import_react33.useState)(value);
+  const lastUpdatedRef = (0, import_react33.useRef)(Date.now());
+  (0, import_react33.useEffect)(() => {
     const now = Date.now();
     const timeElapsed = now - lastUpdatedRef.current;
     if (timeElapsed >= delay) {
@@ -3703,12 +4759,12 @@ function useThrottle(value, delay = 200) {
 }
 
 // src/ui/hooks/useKeyboard.ts
-var import_react30 = require("react");
-var import_react_native21 = require("react-native");
+var import_react34 = require("react");
+var import_react_native24 = require("react-native");
 function useKeyboard() {
-  const [visible, setVisible] = (0, import_react30.useState)(false);
-  const [height, setHeight] = (0, import_react30.useState)(0);
-  (0, import_react30.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react34.useState)(false);
+  const [height, setHeight] = (0, import_react34.useState)(0);
+  (0, import_react34.useEffect)(() => {
     const handleKeyboardWillShow = (event) => {
       setVisible(true);
       setHeight(event.endCoordinates.height);
@@ -3725,31 +4781,31 @@ function useKeyboard() {
       setVisible(false);
       setHeight(0);
     };
-    const willShowSub = import_react_native21.Keyboard.addListener(
-      import_react_native21.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
-      import_react_native21.Platform.OS === "ios" ? handleKeyboardWillShow : handleKeyboardDidShow
+    const willShowSub = import_react_native24.Keyboard.addListener(
+      import_react_native24.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
+      import_react_native24.Platform.OS === "ios" ? handleKeyboardWillShow : handleKeyboardDidShow
     );
-    const willHideSub = import_react_native21.Keyboard.addListener(
-      import_react_native21.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
-      import_react_native21.Platform.OS === "ios" ? handleKeyboardWillHide : handleKeyboardDidHide
+    const willHideSub = import_react_native24.Keyboard.addListener(
+      import_react_native24.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
+      import_react_native24.Platform.OS === "ios" ? handleKeyboardWillHide : handleKeyboardDidHide
     );
     return () => {
       willShowSub.remove();
       willHideSub.remove();
     };
   }, []);
-  const dismiss = (0, import_react30.useCallback)(() => {
-    import_react_native21.Keyboard.dismiss();
+  const dismiss = (0, import_react34.useCallback)(() => {
+    import_react_native24.Keyboard.dismiss();
   }, []);
   return { visible, height, dismiss };
 }
 
 // src/ui/hooks/useDimensions.ts
-var import_react31 = require("react");
-var import_react_native22 = require("react-native");
+var import_react35 = require("react");
+var import_react_native25 = require("react-native");
 function useDimensions() {
-  const [dimensions, setDimensions] = (0, import_react31.useState)(() => {
-    const window = import_react_native22.Dimensions.get("window");
+  const [dimensions, setDimensions] = (0, import_react35.useState)(() => {
+    const window = import_react_native25.Dimensions.get("window");
     return {
       width: window.width,
       height: window.height,
@@ -3757,7 +4813,7 @@ function useDimensions() {
       fontScale: window.fontScale
     };
   });
-  (0, import_react31.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const handleChange = ({ window }) => {
       setDimensions({
         width: window.width,
@@ -3766,7 +4822,7 @@ function useDimensions() {
         fontScale: window.fontScale
       });
     };
-    const subscription = import_react_native22.Dimensions.addEventListener("change", handleChange);
+    const subscription = import_react_native25.Dimensions.addEventListener("change", handleChange);
     return () => {
       subscription.remove();
     };
@@ -3775,20 +4831,20 @@ function useDimensions() {
 }
 
 // src/ui/hooks/useOrientation.ts
-var import_react32 = require("react");
-var import_react_native23 = require("react-native");
+var import_react36 = require("react");
+var import_react_native26 = require("react-native");
 function useOrientation() {
   const getOrientation = () => {
-    const { width, height } = import_react_native23.Dimensions.get("window");
+    const { width, height } = import_react_native26.Dimensions.get("window");
     return width > height ? "landscape" : "portrait";
   };
-  const [orientation, setOrientation] = (0, import_react32.useState)(getOrientation);
-  (0, import_react32.useEffect)(() => {
+  const [orientation, setOrientation] = (0, import_react36.useState)(getOrientation);
+  (0, import_react36.useEffect)(() => {
     const handleChange = ({ window }) => {
       const newOrientation = window.width > window.height ? "landscape" : "portrait";
       setOrientation(newOrientation);
     };
-    const subscription = import_react_native23.Dimensions.addEventListener("change", handleChange);
+    const subscription = import_react_native26.Dimensions.addEventListener("change", handleChange);
     return () => {
       subscription.remove();
     };
@@ -3801,7 +4857,7 @@ function useOrientation() {
 }
 
 // src/navigation/provider.tsx
-var import_react33 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_native = require("@react-navigation/native");
 
 // src/navigation/utils/navigation-theme.ts
@@ -3827,7 +4883,7 @@ function createNavigationTheme(pantherTheme, isDark) {
 }
 
 // src/navigation/provider.tsx
-var import_jsx_runtime31 = require("nativewind/jsx-runtime");
+var import_jsx_runtime34 = require("nativewind/jsx-runtime");
 function NavigationProvider({
   children,
   linking,
@@ -3838,11 +4894,11 @@ function NavigationProvider({
   theme: customTheme
 }) {
   const { theme, isDark } = useTheme();
-  const navigationTheme = import_react33.default.useMemo(
+  const navigationTheme = import_react37.default.useMemo(
     () => customTheme || createNavigationTheme(theme, isDark),
     [customTheme, theme, isDark]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_native.NavigationContainer,
     {
       theme: navigationTheme,
@@ -3860,14 +4916,14 @@ function NavigationProvider({
 var import_stack = require("@react-navigation/stack");
 
 // src/navigation/navigators/StackNavigator.tsx
-var import_jsx_runtime32 = require("nativewind/jsx-runtime");
+var import_jsx_runtime35 = require("nativewind/jsx-runtime");
 var NativeStack = (0, import_stack.createStackNavigator)();
 var defaultScreenOptions = {
   headerShown: false,
   ...import_stack.TransitionPresets.SlideFromRightIOS
 };
 function StackNavigator({ initialRouteName, screenOptions, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     NativeStack.Navigator,
     {
       initialRouteName,
@@ -3879,7 +4935,7 @@ function StackNavigator({ initialRouteName, screenOptions, children }) {
 StackNavigator.Screen = NativeStack.Screen;
 StackNavigator.Group = NativeStack.Group;
 function createStackScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     StackNavigator.Screen,
     {
       name: route.name,
@@ -3892,13 +4948,13 @@ function createStackScreens(routes) {
 }
 
 // src/navigation/navigators/TabNavigator.tsx
-var import_react34 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_bottom_tabs = require("@react-navigation/bottom-tabs");
 
 // src/navigation/components/BottomTabBar.tsx
-var import_react_native24 = require("react-native");
+var import_react_native27 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
-var import_jsx_runtime33 = require("nativewind/jsx-runtime");
+var import_jsx_runtime36 = require("nativewind/jsx-runtime");
 var DEFAULT_TAB_BAR_HEIGHT = 65;
 function BottomTabBar({
   state,
@@ -3920,11 +4976,11 @@ function BottomTabBar({
   const inactiveColor = inactiveTintColor || colors.textMuted;
   const backgroundColor = style?.backgroundColor || colors.card;
   const borderTopColor = colors.divider;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_react_native24.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react_native27.View,
     {
       style: [
-        styles12.container,
+        styles13.container,
         { borderTopColor },
         { backgroundColor, height: height + insets.bottom, paddingBottom: insets.bottom },
         style
@@ -3955,8 +5011,8 @@ function BottomTabBar({
           size: 24
         }) : null;
         const badge = options.tabBarBadge;
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-          import_react_native24.TouchableOpacity,
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          import_react_native27.TouchableOpacity,
           {
             accessibilityRole: "button",
             accessibilityState: isFocused ? { selected: true } : {},
@@ -3965,21 +5021,21 @@ function BottomTabBar({
             onPress,
             onLongPress,
             style: [
-              styles12.tab,
+              styles13.tab,
               {
                 backgroundColor: isFocused ? activeBackgroundColor : inactiveBackgroundColor
               }
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native24.View, { style: [styles12.iconContainer, iconStyle], children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native27.View, { style: [styles13.iconContainer, iconStyle], children: [
                 iconName,
-                badge != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native24.View, { style: [styles12.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AppText, { style: styles12.badgeText, children: typeof badge === "number" && badge > 99 ? "99+" : badge }) })
+                badge != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native27.View, { style: [styles13.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppText, { style: styles13.badgeText, children: typeof badge === "number" && badge > 99 ? "99+" : badge }) })
               ] }),
-              showLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              showLabel && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 AppText,
                 {
                   style: [
-                    styles12.label,
+                    styles13.label,
                     { color: isFocused ? activeColor : inactiveColor },
                     labelStyle
                   ],
@@ -3995,7 +5051,7 @@ function BottomTabBar({
     }
   );
 }
-var styles12 = import_react_native24.StyleSheet.create({
+var styles13 = import_react_native27.StyleSheet.create({
   container: {
     flexDirection: "row",
     borderTopWidth: 0.5,
@@ -4038,7 +5094,7 @@ var styles12 = import_react_native24.StyleSheet.create({
 });
 
 // src/navigation/navigators/TabNavigator.tsx
-var import_jsx_runtime34 = require("nativewind/jsx-runtime");
+var import_jsx_runtime37 = require("nativewind/jsx-runtime");
 var NativeTab = (0, import_bottom_tabs.createBottomTabNavigator)();
 var defaultScreenOptions2 = {
   headerShown: false,
@@ -4051,7 +5107,7 @@ function TabNavigator({
   screenOptions,
   children
 }) {
-  const mergedScreenOptions = import_react34.default.useMemo(() => {
+  const mergedScreenOptions = import_react38.default.useMemo(() => {
     const options = { ...defaultScreenOptions2, ...screenOptions };
     if (tabBarOptions) {
       if (tabBarOptions.showLabel !== void 0) {
@@ -4084,9 +5140,9 @@ function TabNavigator({
     }
     return options;
   }, [tabBarOptions, screenOptions]);
-  const resolvedTabBar = import_react34.default.useMemo(() => {
+  const resolvedTabBar = import_react38.default.useMemo(() => {
     if (tabBar) return tabBar;
-    return (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return (props) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       BottomTabBar,
       {
         ...props,
@@ -4113,7 +5169,7 @@ function TabNavigator({
     tabBarOptions?.style,
     tabBarOptions?.height
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     NativeTab.Navigator,
     {
       initialRouteName,
@@ -4125,7 +5181,7 @@ function TabNavigator({
 }
 TabNavigator.Screen = NativeTab.Screen;
 function createTabScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     TabNavigator.Screen,
     {
       name: route.name,
@@ -4138,9 +5194,9 @@ function createTabScreens(routes) {
 }
 
 // src/navigation/navigators/DrawerNavigator.tsx
-var import_react35 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var import_drawer = require("@react-navigation/drawer");
-var import_jsx_runtime35 = require("nativewind/jsx-runtime");
+var import_jsx_runtime38 = require("nativewind/jsx-runtime");
 var NativeDrawer = (0, import_drawer.createDrawerNavigator)();
 function DrawerNavigator({
   initialRouteName,
@@ -4151,7 +5207,7 @@ function DrawerNavigator({
 }) {
   const { theme, isDark } = useTheme();
   const navigationTheme = createNavigationTheme(theme, isDark);
-  const mergedScreenOptions = import_react35.default.useMemo(() => {
+  const mergedScreenOptions = import_react39.default.useMemo(() => {
     return {
       headerShown: false,
       drawerStyle: {
@@ -4170,7 +5226,7 @@ function DrawerNavigator({
       ...screenOptions
     };
   }, [screenOptions, drawerOptions, navigationTheme, theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     NativeDrawer.Navigator,
     {
       initialRouteName,
@@ -4182,7 +5238,7 @@ function DrawerNavigator({
 }
 DrawerNavigator.Screen = NativeDrawer.Screen;
 function createDrawerScreens(routes) {
-  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return routes.map((route) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     DrawerNavigator.Screen,
     {
       name: route.name,
@@ -4195,16 +5251,16 @@ function createDrawerScreens(routes) {
 }
 
 // src/navigation/components/AppHeader.tsx
-var import_react_native30 = require("react-native");
+var import_react_native33 = require("react-native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 
 // src/overlay/AppProvider.tsx
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
 // src/overlay/AppStatusBar.tsx
-var import_react_native25 = require("react-native");
+var import_react_native28 = require("react-native");
 var import_native2 = require("@react-navigation/native");
-var import_jsx_runtime36 = require("nativewind/jsx-runtime");
+var import_jsx_runtime39 = require("nativewind/jsx-runtime");
 function AppStatusBar({
   barStyle = "auto",
   backgroundColor,
@@ -4214,8 +5270,8 @@ 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__ */ (0, import_jsx_runtime36.jsx)(
-    import_react_native25.StatusBar,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    import_react_native28.StatusBar,
     {
       barStyle: resolvedBarStyle,
       backgroundColor: resolvedBackgroundColor,
@@ -4227,31 +5283,58 @@ function AppStatusBar({
 function AppFocusedStatusBar(props) {
   const isFocused = (0, import_native2.useIsFocused)();
   if (!isFocused) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppStatusBar, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppStatusBar, { ...props });
 }
 
 // src/overlay/loading/provider.tsx
-var import_react37 = require("react");
+var import_react42 = require("react");
 
 // src/overlay/loading/context.ts
-var import_react36 = require("react");
-var LoadingContext = (0, import_react36.createContext)(null);
+var import_react40 = require("react");
+var LoadingContext = (0, import_react40.createContext)(null);
 function useLoadingContext() {
-  const ctx = (0, import_react36.useContext)(LoadingContext);
+  const ctx = (0, import_react40.useContext)(LoadingContext);
   if (!ctx) throw new Error("useLoading must be used within OverlayProvider");
   return ctx;
 }
 
 // src/overlay/loading/component.tsx
-var import_react_native26 = require("react-native");
-var import_jsx_runtime37 = require("nativewind/jsx-runtime");
-function LoadingModal({ visible, text }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native26.Modal, { transparent: true, visible, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native26.View, { style: styles13.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native26.View, { style: [styles13.loadingBox, { backgroundColor: "rgba(0,0,0,0.8)" }], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native26.ActivityIndicator, { size: "large", color: "#fff" }),
-    text && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AppText, { className: "text-white mt-3 text-sm", children: text })
+var import_react41 = require("react");
+var import_react_native29 = require("react-native");
+var import_jsx_runtime40 = require("nativewind/jsx-runtime");
+var LOADING_CLOSE_DELAY2 = 3e4;
+function LoadingModal({
+  visible,
+  text,
+  onRequestClose
+}) {
+  const [showCloseButton, setShowCloseButton] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
+    if (!visible) {
+      setShowCloseButton(false);
+      return;
+    }
+    setShowCloseButton(false);
+    const timer = setTimeout(() => {
+      setShowCloseButton(true);
+    }, LOADING_CLOSE_DELAY2);
+    return () => clearTimeout(timer);
+  }, [visible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native29.Modal, { transparent: true, visible, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native29.View, { style: styles14.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native29.View, { style: [styles14.loadingBox, { backgroundColor: "rgba(0,0,0,0.8)" }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native29.ActivityIndicator, { size: "large", color: "#fff" }),
+    text && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AppText, { className: "text-white mt-3 text-sm", children: text }),
+    showCloseButton && onRequestClose && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      AppPressable,
+      {
+        testID: "loading-close",
+        className: "mt-3 p-1",
+        onPress: onRequestClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "close", size: "md", color: "#ffffff" })
+      }
+    )
   ] }) }) });
 }
-var styles13 = import_react_native26.StyleSheet.create({
+var styles14 = import_react_native29.StyleSheet.create({
   overlay: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.5)",
@@ -4267,55 +5350,112 @@ var styles13 = import_react_native26.StyleSheet.create({
 });
 
 // src/overlay/loading/provider.tsx
-var import_jsx_runtime38 = require("nativewind/jsx-runtime");
+var import_jsx_runtime41 = require("nativewind/jsx-runtime");
+var MIN_VISIBLE_DURATION = 500;
 function LoadingProvider({ children }) {
-  const [state, setState] = (0, import_react37.useState)({ visible: false });
-  const show = (0, import_react37.useCallback)((text) => {
-    setState({ visible: true, text });
+  const [state, setState] = (0, import_react42.useState)({ visible: false });
+  const shownAtRef = (0, import_react42.useRef)(0);
+  const pendingCountRef = (0, import_react42.useRef)(0);
+  const hideTimerRef = (0, import_react42.useRef)(null);
+  const clearHideTimer = (0, import_react42.useCallback)(() => {
+    if (!hideTimerRef.current) return;
+    clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = null;
   }, []);
-  const hide = (0, import_react37.useCallback)(() => {
-    setState({ visible: false });
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(LoadingContext.Provider, { value: { show, hide }, children: [
+  const show = (0, import_react42.useCallback)((text) => {
+    pendingCountRef.current += 1;
+    clearHideTimer();
+    setState((previous) => {
+      if (!previous.visible) {
+        shownAtRef.current = Date.now();
+      }
+      return { visible: true, text };
+    });
+  }, [clearHideTimer]);
+  const hide = (0, import_react42.useCallback)(() => {
+    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]);
+  (0, import_react42.useEffect)(() => () => clearHideTimer(), [clearHideTimer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(LoadingContext.Provider, { value: { show, hide }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoadingModal, { ...state })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LoadingModal, { ...state, onRequestClose: hide })
   ] });
 }
 
 // src/overlay/toast/provider.tsx
-var import_react40 = require("react");
-var import_react_native28 = require("react-native");
+var import_react45 = require("react");
+var import_react_native31 = require("react-native");
 
 // src/overlay/toast/context.ts
-var import_react38 = require("react");
-var ToastContext = (0, import_react38.createContext)(null);
+var import_react43 = require("react");
+var ToastContext = (0, import_react43.createContext)(null);
 function useToastContext() {
-  const ctx = (0, import_react38.useContext)(ToastContext);
+  const ctx = (0, import_react43.useContext)(ToastContext);
   if (!ctx) throw new Error("useToast must be used within OverlayProvider");
   return ctx;
 }
 
 // src/overlay/toast/component.tsx
-var import_react39 = require("react");
-var import_react_native27 = require("react-native");
-var import_jsx_runtime39 = require("nativewind/jsx-runtime");
+var import_react44 = require("react");
+var import_react_native30 = require("react-native");
+var import_jsx_runtime42 = require("nativewind/jsx-runtime");
+function createAnimatedValue4(value) {
+  const AnimatedValue = import_react_native30.Animated.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
 function ToastItemView({ message, type, onHide }) {
-  const fadeAnim = (0, import_react39.useRef)(new import_react_native27.Animated.Value(0)).current;
-  (0, import_react39.useEffect)(() => {
-    import_react_native27.Animated.sequence([
-      import_react_native27.Animated.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
-      import_react_native27.Animated.delay(2500),
-      import_react_native27.Animated.timing(fadeAnim, { toValue: 0, duration: 200, useNativeDriver: true })
+  const fadeAnim = (0, import_react44.useRef)(createAnimatedValue4(0)).current;
+  const { theme } = useOptionalTheme();
+  (0, import_react44.useEffect)(() => {
+    import_react_native30.Animated.sequence([
+      import_react_native30.Animated.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
+      import_react_native30.Animated.delay(2500),
+      import_react_native30.Animated.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__ */ (0, import_jsx_runtime39.jsx)(
-    import_react_native27.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__ */ (0, import_jsx_runtime42.jsx)(
+    import_react_native30.Animated.View,
     {
       style: {
         opacity: fadeAnim,
@@ -4328,17 +5468,25 @@ function ToastItemView({ message, type, onHide }) {
           }
         ]
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppView, { className: `${bgColors[type]} px-4 py-3 rounded-lg mb-2 mx-4 shadow-lg`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppText, { className: "text-white text-center", children: message }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        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__ */ (0, import_jsx_runtime42.jsx)(AppText, { className: "text-center", style: { color: currentPalette.textColor }, children: message })
+        }
+      )
     }
   );
 }
 
 // src/overlay/toast/provider.tsx
-var import_jsx_runtime40 = require("nativewind/jsx-runtime");
+var import_jsx_runtime43 = require("nativewind/jsx-runtime");
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = (0, import_react40.useState)([]);
-  const timersRef = (0, import_react40.useRef)(/* @__PURE__ */ new Map());
-  const remove = (0, import_react40.useCallback)((id) => {
+  const [toasts, setToasts] = (0, import_react45.useState)([]);
+  const timersRef = (0, import_react45.useRef)(/* @__PURE__ */ new Map());
+  const remove = (0, import_react45.useCallback)((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
     const timer = timersRef.current.get(id);
     if (timer) {
@@ -4346,7 +5494,7 @@ function ToastProvider({ children }) {
       timersRef.current.delete(id);
     }
   }, []);
-  const show = (0, import_react40.useCallback)(
+  const show = (0, import_react45.useCallback)(
     (message, type = "info", duration = 3e3) => {
       const id = Math.random().toString(36).substring(7);
       const toast = { id, message, type, duration };
@@ -4356,28 +5504,28 @@ function ToastProvider({ children }) {
     },
     [remove]
   );
-  const success = (0, import_react40.useCallback)(
+  const success = (0, import_react45.useCallback)(
     (message, duration) => show(message, "success", duration),
     [show]
   );
-  const error = (0, import_react40.useCallback)(
+  const error = (0, import_react45.useCallback)(
     (message, duration) => show(message, "error", duration),
     [show]
   );
-  const info = (0, import_react40.useCallback)(
+  const info = (0, import_react45.useCallback)(
     (message, duration) => show(message, "info", duration),
     [show]
   );
-  const warning = (0, import_react40.useCallback)(
+  const warning = (0, import_react45.useCallback)(
     (message, duration) => show(message, "warning", duration),
     [show]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(ToastContext.Provider, { value: { show, success, error, info, warning }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ToastContext.Provider, { value: { show, success, error, info, warning }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native28.View, { style: styles14.toastContainer, pointerEvents: "none", children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ToastItemView, { ...toast, onHide: () => remove(toast.id) }, toast.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native31.View, { style: styles15.toastContainer, pointerEvents: "none", children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ToastItemView, { ...toast, onHide: () => remove(toast.id) }, toast.id)) })
   ] });
 }
-var styles14 = import_react_native28.StyleSheet.create({
+var styles15 = import_react_native31.StyleSheet.create({
   toastContainer: {
     position: "absolute",
     top: 60,
@@ -4388,20 +5536,29 @@ var styles14 = import_react_native28.StyleSheet.create({
 });
 
 // src/overlay/alert/provider.tsx
-var import_react42 = require("react");
+var import_react48 = require("react");
 
 // src/overlay/alert/context.ts
-var import_react41 = require("react");
-var AlertContext = (0, import_react41.createContext)(null);
+var import_react46 = require("react");
+var AlertContext = (0, import_react46.createContext)(null);
 function useAlertContext() {
-  const ctx = (0, import_react41.useContext)(AlertContext);
+  const ctx = (0, import_react46.useContext)(AlertContext);
   if (!ctx) throw new Error("useAlert must be used within OverlayProvider");
   return ctx;
 }
 
 // src/overlay/alert/component.tsx
-var import_react_native29 = require("react-native");
-var import_jsx_runtime41 = require("nativewind/jsx-runtime");
+var import_react47 = require("react");
+var import_react_native32 = require("react-native");
+var import_jsx_runtime44 = require("nativewind/jsx-runtime");
+function createAnimatedValue5(value) {
+  const AnimatedValue = import_react_native32.Animated.Value;
+  try {
+    return new AnimatedValue(value);
+  } catch {
+    return AnimatedValue(value);
+  }
+}
 function AlertModal({
   visible,
   title,
@@ -4412,23 +5569,67 @@ function AlertModal({
   onConfirm,
   onCancel
 }) {
+  const progress = (0, import_react47.useRef)(createAnimatedValue5(0)).current;
+  (0, import_react47.useEffect)(() => {
+    if (!visible) {
+      progress.setValue(0);
+      return;
+    }
+    progress.setValue(0);
+    import_react_native32.Animated.timing(progress, {
+      toValue: 1,
+      duration: 220,
+      useNativeDriver: true
+    }).start();
+  }, [progress, visible]);
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native29.Modal, { transparent: true, visible: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native29.View, { style: styles15.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native29.View, { style: styles15.alertBox, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-lg font-semibold text-center mb-2", children: title }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-gray-600 text-center mb-4", children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(AppView, { row: true, gap: 3, className: "mt-2", children: [
-      showCancel && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppPressable, { onPress: onCancel, className: "flex-1 py-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-center text-gray-700", children: cancelText || "\u53D6\u6D88" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppPressable, { onPress: onConfirm, className: "flex-1 py-3 bg-primary-500 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppText, { className: "text-center text-white", children: confirmText || "\u786E\u5B9A" }) })
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native32.Modal, { transparent: true, visible: true, animationType: "none", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native32.View, { style: styles16.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native32.Animated.View, { style: [styles16.overlay, { opacity: progress }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      import_react_native32.Animated.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__ */ (0, import_jsx_runtime44.jsx)(AppText, { className: "text-lg font-semibold text-center mb-2", children: title }),
+          message && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppText, { className: "text-gray-600 text-center mb-4", children: message }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(AppView, { row: true, gap: 3, className: "mt-2", children: [
+            showCancel && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppPressable, { onPress: onCancel, className: "flex-1 py-3 bg-gray-100 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppText, { className: "text-center text-gray-700", children: cancelText || "\u53D6\u6D88" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppPressable, { onPress: onConfirm, className: "flex-1 py-3 bg-primary-500 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppText, { className: "text-center text-white", children: confirmText || "\u786E\u5B9A" }) })
+          ] })
+        ]
+      }
+    )
+  ] }) });
 }
-var styles15 = import_react_native29.StyleSheet.create({
-  overlay: {
+var styles16 = import_react_native32.StyleSheet.create({
+  container: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.5)",
     justifyContent: "center",
     alignItems: "center"
   },
+  overlay: {
+    ...import_react_native32.StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0,0,0,0.5)"
+  },
   alertBox: {
     backgroundColor: "white",
     borderRadius: 12,
@@ -4444,32 +5645,32 @@ var styles15 = import_react_native29.StyleSheet.create({
 });
 
 // src/overlay/alert/provider.tsx
-var import_jsx_runtime42 = require("nativewind/jsx-runtime");
+var import_jsx_runtime45 = require("nativewind/jsx-runtime");
 function AlertProvider({ children }) {
-  const [alert, setAlert] = (0, import_react42.useState)(null);
-  const showAlert = (0, import_react42.useCallback)((options) => {
+  const [alert, setAlert] = (0, import_react48.useState)(null);
+  const showAlert = (0, import_react48.useCallback)((options) => {
     setAlert({ ...options, visible: true });
   }, []);
-  const confirm = (0, import_react42.useCallback)(
+  const confirm = (0, import_react48.useCallback)(
     (options) => {
       showAlert({ ...options, showCancel: true });
     },
     [showAlert]
   );
-  const hide = (0, import_react42.useCallback)(() => {
+  const hide = (0, import_react48.useCallback)(() => {
     setAlert(null);
   }, []);
-  const handleConfirm = (0, import_react42.useCallback)(() => {
+  const handleConfirm = (0, import_react48.useCallback)(() => {
     alert?.onConfirm?.();
     hide();
   }, [alert, hide]);
-  const handleCancel = (0, import_react42.useCallback)(() => {
+  const handleCancel = (0, import_react48.useCallback)(() => {
     alert?.onCancel?.();
     hide();
   }, [alert, hide]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(AlertContext.Provider, { value: { alert: showAlert, confirm }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AlertContext.Provider, { value: { alert: showAlert, confirm }, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       AlertModal,
       {
         visible: alert?.visible ?? false,
@@ -4485,14 +5686,378 @@ function AlertProvider({ children }) {
   ] });
 }
 
+// src/overlay/logger/provider.tsx
+var import_react51 = require("react");
+
+// src/overlay/logger/context.ts
+var import_react49 = require("react");
+var LoggerContext = (0, import_react49.createContext)(null);
+function useLoggerContext() {
+  const ctx = (0, import_react49.useContext)(LoggerContext);
+  if (!ctx) throw new Error("useLogger must be used within LoggerProvider");
+  return ctx;
+}
+
+// src/overlay/logger/component.tsx
+var import_react50 = require("react");
+var import_jsx_runtime46 = require("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] = (0, import_react50.useState)(defaultExpanded);
+  const [filter, setFilter] = (0, import_react50.useState)("all");
+  const [namespaceFilter, setNamespaceFilter] = (0, import_react50.useState)(ALL_NAMESPACE);
+  const [keyword, setKeyword] = (0, import_react50.useState)("");
+  const namespaces = (0, import_react50.useMemo)(
+    () => [
+      ALL_NAMESPACE,
+      ...Array.from(
+        new Set(
+          entries.map((entry) => entry.namespace).filter((value) => Boolean(value))
+        )
+      )
+    ],
+    [entries]
+  );
+  const filteredEntries = (0, import_react50.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime46.jsxs)(AppView, { pointerEvents: "box-none", style: { position: "absolute", right: 12, bottom: 24, left: 12, zIndex: 9998 }, children: [
+    expanded && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      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__ */ (0, import_jsx_runtime46.jsxs)(AppView, { row: true, items: "center", justify: "between", className: "px-4 py-3", style: { borderBottomWidth: 0.5, borderBottomColor: colors.divider }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { weight: "semibold", children: "\u5F00\u53D1\u65E5\u5FD7" }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AppView, { row: true, gap: 2, children: [
+              exportEnabled ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppPressable, { testID: "logger-overlay-export", onPress: handleExport, className: "px-3 py-1 rounded-full", style: { backgroundColor: colors.cardElevated }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { size: "xs", tone: "muted", children: "\u5BFC\u51FA" }) }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppPressable, { onPress: onClear, className: "px-3 py-1 rounded-full", style: { backgroundColor: colors.cardElevated }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { size: "xs", tone: "muted", children: "\u6E05\u7A7A" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppPressable, { onPress: () => setExpanded(false), className: "px-3 py-1 rounded-full", style: { backgroundColor: colors.cardElevated }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { size: "xs", tone: "muted", children: "\u6536\u8D77" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, className: "px-3 py-2", contentContainerStyle: { gap: 8 }, children: FILTERS.map((item) => {
+            const active = filter === item;
+            return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              AppPressable,
+              {
+                onPress: () => setFilter(item),
+                className: "px-3 py-1 rounded-full",
+                style: { backgroundColor: active ? colors.primary : colors.cardElevated },
+                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { size: "xs", style: { color: active ? colors.textInverse : colors.textSecondary }, children: item.toUpperCase() })
+              },
+              item
+            );
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(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__ */ (0, import_jsx_runtime46.jsx)(
+              AppPressable,
+              {
+                testID: `logger-namespace-${item}`,
+                onPress: () => setNamespaceFilter(item),
+                className: "px-3 py-1 rounded-full",
+                style: { backgroundColor: active ? colors.info : colors.cardElevated },
+                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { size: "xs", style: { color: active ? colors.textInverse : colors.textSecondary }, children: label })
+              },
+              item
+            );
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppView, { className: "px-3 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            AppInput,
+            {
+              placeholder: DEFAULT_SEARCH_PLACEHOLDER,
+              value: keyword,
+              onChangeText: setKeyword
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppScrollView, { className: "px-3 pb-3", showsVerticalScrollIndicator: false, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppView, { gap: 2, children: filteredEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppView, { className: "py-8 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { tone: "muted", children: "\u6682\u65E0\u65E5\u5FD7" }) }) : filteredEntries.map((entry) => {
+            const palette = levelStyles[entry.level];
+            const detail = stringifyLogData(entry.data);
+            return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+              AppView,
+              {
+                className: "px-3 py-3 rounded-xl",
+                style: { backgroundColor: colors.cardElevated, borderWidth: 0.5, borderColor: colors.divider },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AppView, { row: true, items: "center", justify: "between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AppView, { row: true, items: "center", gap: 2, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppView, { className: "px-2 py-1 rounded-full", style: { backgroundColor: palette.bg }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { size: "xs", style: { color: palette.text }, children: entry.level.toUpperCase() }) }),
+                      entry.namespace ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AppText, { size: "xs", tone: "muted", children: [
+                        "[",
+                        entry.namespace,
+                        "]"
+                      ] }) : null
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { size: "xs", tone: "muted", children: formatLogTime(entry.timestamp) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { className: "mt-2", size: "sm", children: entry.message }),
+                  detail ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppView, { className: "mt-2 px-2 py-2 rounded-lg", style: { backgroundColor: colors.background }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { size: "xs", tone: "muted", children: detail }) }) : null
+                ]
+              },
+              entry.id
+            );
+          }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppView, { pointerEvents: "box-none", row: true, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      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__ */ (0, import_jsx_runtime46.jsxs)(AppText, { weight: "semibold", style: { color: colors.textInverse }, children: [
+          "Logs ",
+          entries.length
+        ] })
+      }
+    ) })
+  ] });
+}
+
+// src/overlay/logger/provider.tsx
+var import_jsx_runtime47 = require("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] = (0, import_react51.useState)([]);
+  const clear = (0, import_react51.useCallback)(() => {
+    setEntries([]);
+  }, []);
+  const resolvedTransports = (0, import_react51.useMemo)(() => {
+    const list = [];
+    if (enabled && consoleEnabled) {
+      list.push(createConsoleTransport());
+    }
+    if (transports.length > 0) {
+      list.push(...transports);
+    }
+    return list;
+  }, [consoleEnabled, enabled, transports]);
+  const write = (0, import_react51.useCallback)(
+    (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 = (0, import_react51.useMemo)(
+    () => ({
+      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]
+  );
+  (0, import_react51.useEffect)(() => {
+    if (!enabled) {
+      setGlobalLogger(null);
+      return;
+    }
+    setGlobalLogger(contextValue);
+    return () => {
+      setGlobalLogger(null);
+    };
+  }, [contextValue, enabled]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(LoggerContext.Provider, { value: contextValue, children: [
+    children,
+    enabled && overlayEnabled ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      LogOverlay,
+      {
+        entries,
+        onClear: clear,
+        defaultExpanded,
+        exportEnabled,
+        onExport
+      }
+    ) : null
+  ] });
+}
+
+// src/overlay/error-boundary/component.tsx
+var import_react52 = __toESM(require("react"));
+var import_jsx_runtime48 = require("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__ */ (0, import_jsx_runtime48.jsxs)(AppView, { testID: "app-error-boundary", flex: true, center: true, className: "px-6 py-8", gap: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(AppView, { className: "items-center", gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppText, { size: "xl", weight: "semibold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppText, { tone: "muted", style: { textAlign: "center" }, children: description })
+    ] }),
+    showDetails ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      AppView,
+      {
+        className: "w-full px-4 py-3 rounded-xl",
+        style: { maxWidth: 560, borderWidth: 0.5 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppText, { testID: "app-error-boundary-detail", size: "sm", children: error.message || String(error) })
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      AppPressable,
+      {
+        testID: "app-error-boundary-reset",
+        onPress: onReset,
+        className: "px-4 py-3 rounded-lg",
+        style: { borderWidth: 0.5 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppText, { weight: "semibold", children: resetText })
+      }
+    )
+  ] });
+}
+var AppErrorBoundary = class extends import_react52.default.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__ */ (0, import_jsx_runtime48.jsx)(
+      DefaultFallback,
+      {
+        error: this.state.error,
+        onReset: this.handleReset,
+        title,
+        description,
+        showDetails,
+        resetText
+      }
+    );
+  }
+};
+AppErrorBoundary.contextType = LoggerContext;
+
 // src/overlay/provider.tsx
-var import_jsx_runtime43 = require("nativewind/jsx-runtime");
-function OverlayProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LoadingProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AlertProvider, { children }) }) });
+var import_jsx_runtime49 = require("nativewind/jsx-runtime");
+function OverlayProvider({ children, loggerProps, errorBoundaryProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoggerProvider, { ...loggerProps, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AppErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoadingProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ToastProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AlertProvider, { children }) }) }) }) });
 }
 
 // src/overlay/AppProvider.tsx
-var import_jsx_runtime44 = require("nativewind/jsx-runtime");
+var import_jsx_runtime50 = require("nativewind/jsx-runtime");
 var defaultLightTheme = {
   colors: {
     primary: "#f38b32",
@@ -4518,6 +6083,8 @@ function AppProvider({
   enableNavigation = true,
   enableOverlay = true,
   enableTheme = true,
+  enableLogger = isDevelopment(),
+  enableErrorBoundary = isDevelopment(),
   enableStatusBar = true,
   enableSafeArea = true,
   lightTheme = defaultLightTheme,
@@ -4525,25 +6092,41 @@ function AppProvider({
   defaultDark = false,
   isDark,
   statusBarProps,
+  loggerProps,
+  errorBoundaryProps,
   ...navigationProps
 }) {
   let content = children;
   if (enableOverlay) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(OverlayProvider, { children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      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__ */ (0, import_jsx_runtime50.jsx)(AppErrorBoundary, { enabled: true, ...errorBoundaryProps, children: content });
+    }
+    if (enableLogger) {
+      content = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoggerProvider, { enabled: true, overlayEnabled: true, ...loggerProps, children: content });
+    }
   }
   if (enableNavigation) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(NavigationProvider, { ...navigationProps, children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(NavigationProvider, { ...navigationProps, children: content });
   }
   if (enableTheme) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThemeProvider, { light: lightTheme, dark: darkTheme, defaultDark, isDark, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-      enableStatusBar && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppStatusBar, { testID: "status-bar", ...statusBarProps }),
+    content = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ThemeProvider, { light: lightTheme, dark: darkTheme, defaultDark, isDark, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      enableStatusBar && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AppStatusBar, { testID: "status-bar", ...statusBarProps }),
       content
     ] }) });
   }
   if (enableSafeArea) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: content });
 }
 
 // src/overlay/loading/hooks.ts
@@ -4561,8 +6144,29 @@ function useAlert() {
   return useAlertContext();
 }
 
+// src/overlay/logger/hooks.ts
+var import_react53 = require("react");
+function useLogger(namespace) {
+  const logger = useLoggerContext();
+  return (0, import_react53.useMemo)(
+    () => ({
+      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
-var import_jsx_runtime45 = require("nativewind/jsx-runtime");
+var import_jsx_runtime51 = require("nativewind/jsx-runtime");
 function AppHeader({
   title,
   subtitle,
@@ -4576,9 +6180,9 @@ function AppHeader({
   const colors = useThemeColors();
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const backgroundColor = transparent ? "transparent" : colors.card;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppFocusedStatusBar, { translucent: true, backgroundColor: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppFocusedStatusBar, { translucent: true, backgroundColor: "transparent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       AppView,
       {
         style: [
@@ -4588,39 +6192,39 @@ function AppHeader({
           },
           style
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AppView, { row: true, items: "center", px: 4, style: styles16.container, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppView, { style: [styles16.sideContainer, styles16.leftContainer], children: leftIcon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppPressable, { onPress: onLeftPress, style: styles16.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: leftIcon, size: 24, color: colors.text }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AppView, { style: styles16.centerContainer, children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(AppView, { row: true, items: "center", px: 4, style: styles17.container, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppView, { style: [styles17.sideContainer, styles17.leftContainer], children: leftIcon && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppPressable, { onPress: onLeftPress, style: styles17.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: leftIcon, size: 24, color: colors.text }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(AppView, { style: styles17.centerContainer, children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               AppText,
               {
                 size: "lg",
                 weight: "semibold",
-                style: [styles16.title, { color: colors.text }],
+                style: [styles17.title, { color: colors.text }],
                 numberOfLines: 1,
                 children: title
               }
             ),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               AppText,
               {
                 size: "xs",
-                style: [styles16.subtitle, { color: colors.textMuted }],
+                style: [styles17.subtitle, { color: colors.textMuted }],
                 numberOfLines: 1,
                 children: subtitle
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppView, { row: true, items: "center", style: [styles16.sideContainer, styles16.rightContainer], children: rightIcons.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppPressable, { onPress: icon.onPress, style: styles16.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AppView, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: icon.icon, size: 24, color: colors.text }),
-            icon.badge ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppView, { style: styles16.badge, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppText, { size: "xs", color: "white", style: styles16.badgeText, children: icon.badge > 99 ? "99+" : icon.badge }) }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppView, { row: true, items: "center", style: [styles17.sideContainer, styles17.rightContainer], children: rightIcons.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppPressable, { onPress: icon.onPress, style: styles17.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(AppView, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: icon.icon, size: 24, color: colors.text }),
+            icon.badge ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppView, { style: styles17.badge, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppText, { size: "xs", color: "white", style: styles17.badgeText, children: icon.badge > 99 ? "99+" : icon.badge }) }) : null
           ] }) }, index)) })
         ] })
       }
     )
   ] });
 }
-var styles16 = import_react_native30.StyleSheet.create({
+var styles17 = import_react_native33.StyleSheet.create({
   container: {
     height: 44
     // iOS 标准导航栏高度
@@ -4671,9 +6275,9 @@ var styles16 = import_react_native30.StyleSheet.create({
 });
 
 // src/navigation/components/DrawerContent.tsx
-var import_react_native31 = require("react-native");
+var import_react_native34 = require("react-native");
 var import_drawer2 = require("@react-navigation/drawer");
-var import_jsx_runtime46 = require("nativewind/jsx-runtime");
+var import_jsx_runtime52 = require("nativewind/jsx-runtime");
 function DrawerContent({
   state,
   descriptors,
@@ -4702,20 +6306,20 @@ function DrawerContent({
       badge: options.tabBarBadge
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_drawer2.DrawerContentScrollView, { style: [styles17.container, { backgroundColor }], children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native31.View, { style: [styles17.header, { borderBottomColor: dividerColor }], children: header }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppView, { className: "py-2", children: drawerItems.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_drawer2.DrawerContentScrollView, { style: [styles18.container, { backgroundColor }], children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native34.View, { style: [styles18.header, { borderBottomColor: dividerColor }], children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(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__ */ (0, import_jsx_runtime46.jsxs)(
-        import_react_native31.TouchableOpacity,
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        import_react_native34.TouchableOpacity,
         {
           onPress,
-          style: [styles17.item, isFocused && { backgroundColor: activeBgColor }],
+          style: [styles18.item, isFocused && { backgroundColor: activeBgColor }],
           children: [
-            item.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native31.View, { style: styles17.iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            item.icon && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native34.View, { style: styles18.iconContainer, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               Icon,
               {
                 name: item.icon,
@@ -4723,28 +6327,28 @@ function DrawerContent({
                 color: isFocused ? activeColor : inactiveColor
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               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__ */ (0, import_jsx_runtime46.jsx)(import_react_native31.View, { style: [styles17.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppText, { style: styles17.badgeText, children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge }) })
+            item.badge != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native34.View, { style: [styles18.badge, { backgroundColor: activeColor }], children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AppText, { style: styles18.badgeText, children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge }) })
           ]
         },
         item.name
       );
     }) }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native31.View, { style: [styles17.footer, { borderTopColor: dividerColor }], children: footer })
+    footer && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native34.View, { style: [styles18.footer, { borderTopColor: dividerColor }], children: footer })
   ] });
 }
-var styles17 = import_react_native31.StyleSheet.create({
+var styles18 = import_react_native34.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -4794,7 +6398,7 @@ var styles17 = import_react_native31.StyleSheet.create({
 });
 
 // src/navigation/hooks/useNavigation.ts
-var import_react43 = require("react");
+var import_react54 = require("react");
 var import_native3 = require("@react-navigation/native");
 function useNavigation() {
   return (0, import_native3.useNavigation)();
@@ -4810,7 +6414,7 @@ function useDrawerNavigation() {
 }
 function useBackHandler(handler) {
   const navigation = (0, import_native3.useNavigation)();
-  (0, import_react43.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const unsubscribe = navigation.addListener("beforeRemove", (e) => {
       if (!handler()) {
         e.preventDefault();
@@ -4842,6 +6446,7 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   ActionIcons,
   Alert,
   AppButton,
+  AppErrorBoundary,
   AppFocusedStatusBar,
   AppHeader,
   AppImage,
@@ -4869,13 +6474,18 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   FormItem,
   GradientView,
   Icon,
+  KeyboardDismissView,
+  LOG_LEVEL_WEIGHT,
   Loading,
+  LogOverlay,
+  LoggerProvider,
   MemoryStorage,
   NavigationContainer,
   NavigationIcons,
   NavigationProvider,
   OverlayProvider,
   PageDrawer,
+  Picker,
   Progress,
   Radio,
   RadioGroup,
@@ -4897,7 +6507,10 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   clsx,
   cn,
   createAPI,
+  createApiLoggerTransport,
+  createConsoleTransport,
   createDrawerScreens,
+  createLogEntry,
   createNavigationTheme,
   createStackScreens,
   createTabScreens,
@@ -4906,10 +6519,12 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   enhanceError,
   formatCurrency,
   formatDate,
+  formatLogTime,
   formatNumber,
   formatPercent,
   formatRelativeTime,
   generateColorPalette,
+  getGlobalLogger,
   getThemeColors,
   getValidationErrors,
   hexToRgb,
@@ -4917,11 +6532,16 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   isValidEmail,
   isValidPhone,
   mapHttpStatus,
+  normalizeConsoleArgs,
   omit,
   pick,
   rgbToHex,
+  serializeLogEntries,
+  setGlobalLogger,
+  shouldLog,
   slugify,
   storage,
+  stringifyLogData,
   truncate,
   twMerge,
   useAlert,
@@ -4936,6 +6556,7 @@ var import_react_native_safe_area_context5 = require("react-native-safe-area-con
   useIsFocused,
   useKeyboard,
   useLoading,
+  useLogger,
   useMemoizedFn,
   useMutation,
   useNavigation,