@almadar/mobile 1.1.0 → 1.2.3

package/dist/{chunk-YMJZLYLV.js → chunk-ETD72PHO.js}

@@ -1,23 +1,30 @@
+import {
+  getNestedValue
+} from "./chunk-K2JGK2QD.js";
 import {
   ControlButton,
+  DayCell,
+  InfiniteScrollSentinel,
   Label
-} from "./chunk-6RVITGGH.js";
+} from "./chunk-MLTSQPVN.js";
 import {
   EmptyState
-} from "./chunk-DY52O4T3.js";
+} from "./chunk-5U5Z65ZO.js";
 import {
   Badge,
   Button,
   Card,
+  Divider,
   ErrorState,
   HStack,
+  Icon,
   Input,
   LoadingState,
   ProgressBar,
   Select,
   Typography,
   VStack
-} from "./chunk-7C5JCLLY.js";
+} from "./chunk-QUFLYKWA.js";
 import {
   useEventBus
 } from "./chunk-YTVYMEKU.js";
@@ -25,8 +32,44 @@ import {
   useTheme
 } from "./chunk-CUAWHLEK.js";
 
-// src/components/molecules/FormField.tsx
+// src/components/molecules/List.tsx
 import React from "react";
+import {
+  FlatList
+} from "react-native";
+function List({
+  data,
+  renderItem,
+  keyExtractor,
+  isLoading,
+  isError,
+  onRetry,
+  emptyMessage = "No items found",
+  ...flatListProps
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ React.createElement(LoadingState, null);
+  }
+  if (isError) {
+    return /* @__PURE__ */ React.createElement(ErrorState, { onRetry });
+  }
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ React.createElement(EmptyState, { message: emptyMessage });
+  }
+  return /* @__PURE__ */ React.createElement(
+    FlatList,
+    {
+      data,
+      renderItem: ({ item }) => renderItem(item),
+      keyExtractor,
+      ...flatListProps
+    }
+  );
+}
+List.displayName = "List";
+
+// src/components/molecules/FormField.tsx
+import React2 from "react";
 import { View, StyleSheet } from "react-native";
 var FormField = ({
   label,
@@ -36,7 +79,7 @@ var FormField = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React.createElement(VStack, { spacing: 6, style: [styles.container, style] }, label && /* @__PURE__ */ React.createElement(View, { style: styles.labelContainer }, /* @__PURE__ */ React.createElement(Typography, { variant: "label" }, label, required && /* @__PURE__ */ React.createElement(Typography, { variant: "label", color: "#ef4444" }, " *"))), children, error ? /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "#ef4444" }, error) : helperText ? /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "#6b7280" }, helperText) : null);
+  return /* @__PURE__ */ React2.createElement(VStack, { spacing: 6, style: [styles.container, style] }, label && /* @__PURE__ */ React2.createElement(View, { style: styles.labelContainer }, /* @__PURE__ */ React2.createElement(Typography, { variant: "label" }, label, required && /* @__PURE__ */ React2.createElement(Typography, { variant: "label", color: "#ef4444" }, " *"))), children, error ? /* @__PURE__ */ React2.createElement(Typography, { variant: "caption", color: "#ef4444" }, error) : helperText ? /* @__PURE__ */ React2.createElement(Typography, { variant: "caption", color: "#6b7280" }, helperText) : null);
 };
 var styles = StyleSheet.create({
   container: {
@@ -49,7 +92,7 @@ var styles = StyleSheet.create({
 FormField.displayName = "FormField";
 
 // src/components/molecules/FormSectionHeader.tsx
-import React2 from "react";
+import React3 from "react";
 import { View as View2, StyleSheet as StyleSheet2 } from "react-native";
 var FormSectionHeader = ({
   title,
@@ -60,19 +103,19 @@ var FormSectionHeader = ({
 }) => {
   const theme = useTheme();
   if (isLoading) {
-    return /* @__PURE__ */ React2.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React2.createElement(LoadingState, { message: "Loading..." }));
+    return /* @__PURE__ */ React3.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React3.createElement(LoadingState, { message: "Loading..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React2.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React2.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React3.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React3.createElement(ErrorState, { message: error.message }));
   }
-  return /* @__PURE__ */ React2.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React3.createElement(
     Typography,
     {
       variant: "h4",
       style: { color: theme.colors.foreground }
     },
     title
-  ), subtitle && /* @__PURE__ */ React2.createElement(
+  ), subtitle && /* @__PURE__ */ React3.createElement(
     Typography,
     {
       variant: "caption",
@@ -92,7 +135,7 @@ var styles2 = StyleSheet2.create({
 FormSectionHeader.displayName = "FormSectionHeader";
 
 // src/components/molecules/InputGroup.tsx
-import React3 from "react";
+import React4 from "react";
 import { View as View3, StyleSheet as StyleSheet3 } from "react-native";
 var InputGroup = ({
   label,
@@ -106,20 +149,20 @@ var InputGroup = ({
 }) => {
   const theme = useTheme();
   if (isLoading) {
-    return /* @__PURE__ */ React3.createElement(View3, { style: [styles3.container, style] }, /* @__PURE__ */ React3.createElement(LoadingState, { message: "Loading..." }));
+    return /* @__PURE__ */ React4.createElement(View3, { style: [styles3.container, style] }, /* @__PURE__ */ React4.createElement(LoadingState, { message: "Loading..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React3.createElement(View3, { style: [styles3.container, style] }, /* @__PURE__ */ React3.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React4.createElement(View3, { style: [styles3.container, style] }, /* @__PURE__ */ React4.createElement(ErrorState, { message: error.message }));
   }
   const errorText = error?.message || errorMessage;
-  return /* @__PURE__ */ React3.createElement(VStack, { spacing: 4, style: [styles3.container, style] }, label && /* @__PURE__ */ React3.createElement(Label, { required }, label), children, errorText ? /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(VStack, { spacing: 4, style: [styles3.container, style] }, label && /* @__PURE__ */ React4.createElement(Label, { required }, label), children, errorText ? /* @__PURE__ */ React4.createElement(
     Typography,
     {
       variant: "caption",
       style: { color: theme.colors.error }
     },
     errorText
-  ) : helperText ? /* @__PURE__ */ React3.createElement(
+  ) : helperText ? /* @__PURE__ */ React4.createElement(
     Typography,
     {
       variant: "caption",
@@ -136,7 +179,7 @@ var styles3 = StyleSheet3.create({
 InputGroup.displayName = "InputGroup";
 
 // src/components/molecules/Alert.tsx
-import React4 from "react";
+import React5 from "react";
 import {
   View as View4,
   TouchableOpacity,
@@ -186,12 +229,12 @@ var Alert = ({
   };
   const { bg, border } = variantStyles[variant];
   if (isLoading) {
-    return /* @__PURE__ */ React4.createElement(View4, { style: [styles4.container, style] }, /* @__PURE__ */ React4.createElement(LoadingState, { message: "Loading..." }));
+    return /* @__PURE__ */ React5.createElement(View4, { style: [styles4.container, style] }, /* @__PURE__ */ React5.createElement(LoadingState, { message: "Loading..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React4.createElement(View4, { style: [styles4.container, style] }, /* @__PURE__ */ React4.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React5.createElement(View4, { style: [styles4.container, style] }, /* @__PURE__ */ React5.createElement(ErrorState, { message: error.message }));
   }
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     View4,
     {
       style: [
@@ -204,7 +247,7 @@ var Alert = ({
         style
       ]
     },
-    /* @__PURE__ */ React4.createElement(HStack, { spacing: 12, align: "flex-start" }, /* @__PURE__ */ React4.createElement(View4, { style: [styles4.icon, { backgroundColor: bg }] }, /* @__PURE__ */ React4.createElement(Typography, { variant: "body", style: { color: theme.colors["info-foreground"] } }, variantStyles[variant].icon)), /* @__PURE__ */ React4.createElement(View4, { style: styles4.content }, title && /* @__PURE__ */ React4.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, title), /* @__PURE__ */ React4.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground } }, message)), dismissible && /* @__PURE__ */ React4.createElement(TouchableOpacity, { onPress: handleDismiss, style: styles4.dismiss }, /* @__PURE__ */ React4.createElement(Typography, { variant: "body", style: { color: theme.colors["muted-foreground"] } }, "\u2715")))
+    /* @__PURE__ */ React5.createElement(HStack, { spacing: 12, align: "flex-start" }, /* @__PURE__ */ React5.createElement(View4, { style: [styles4.icon, { backgroundColor: bg }] }, /* @__PURE__ */ React5.createElement(Typography, { variant: "body", style: { color: theme.colors["info-foreground"] } }, variantStyles[variant].icon)), /* @__PURE__ */ React5.createElement(View4, { style: styles4.content }, title && /* @__PURE__ */ React5.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, title), /* @__PURE__ */ React5.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground } }, message)), dismissible && /* @__PURE__ */ React5.createElement(TouchableOpacity, { onPress: handleDismiss, style: styles4.dismiss }, /* @__PURE__ */ React5.createElement(Typography, { variant: "body", style: { color: theme.colors["muted-foreground"] } }, "\u2715")))
   );
 };
 var styles4 = StyleSheet4.create({
@@ -230,7 +273,7 @@ var styles4 = StyleSheet4.create({
 Alert.displayName = "Alert";
 
 // src/components/molecules/Skeleton.tsx
-import React5, { useEffect } from "react";
+import React6, { useEffect } from "react";
 import {
   View as View5,
   StyleSheet as StyleSheet5,
@@ -244,7 +287,7 @@ var Skeleton = ({
   style
 }) => {
   const theme = useTheme();
-  const shimmer = React5.useRef(new Animated.Value(0)).current;
+  const shimmer = React6.useRef(new Animated.Value(0)).current;
   useEffect(() => {
     const animation = Animated.loop(
       Animated.timing(shimmer, {
@@ -261,7 +304,7 @@ var Skeleton = ({
     inputRange: [0, 1],
     outputRange: [-200, 200]
   });
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     View5,
     {
       style: [
@@ -275,7 +318,7 @@ var Skeleton = ({
         style
       ]
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       Animated.View,
       {
         style: [
@@ -301,7 +344,7 @@ var styles5 = StyleSheet5.create({
 Skeleton.displayName = "Skeleton";
 
 // src/components/molecules/SearchInput.tsx
-import React6 from "react";
+import React7 from "react";
 import {
   View as View6,
   TextInput,
@@ -338,12 +381,12 @@ var SearchInput = ({
     handleChangeText("");
   };
   if (isLoading) {
-    return /* @__PURE__ */ React6.createElement(View6, { style: [styles6.container, style] }, /* @__PURE__ */ React6.createElement(LoadingState, { message: "Loading..." }));
+    return /* @__PURE__ */ React7.createElement(View6, { style: [styles6.container, style] }, /* @__PURE__ */ React7.createElement(LoadingState, { message: "Loading..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React6.createElement(View6, { style: [styles6.container, style] }, /* @__PURE__ */ React6.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React7.createElement(View6, { style: [styles6.container, style] }, /* @__PURE__ */ React7.createElement(ErrorState, { message: error.message }));
   }
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     HStack,
     {
       spacing: 8,
@@ -357,8 +400,8 @@ var SearchInput = ({
         style
       ]
     },
-    /* @__PURE__ */ React6.createElement(Typography, { variant: "body", style: { color: theme.colors["muted-foreground"] } }, "\u{1F50D}"),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(Typography, { variant: "body", style: { color: theme.colors["muted-foreground"] } }, "\u{1F50D}"),
+    /* @__PURE__ */ React7.createElement(
       TextInput,
       {
         value,
@@ -374,7 +417,7 @@ var SearchInput = ({
         ]
       }
     ),
-    value && value.length > 0 && /* @__PURE__ */ React6.createElement(TouchableOpacity2, { onPress: handleClear, style: styles6.clear }, /* @__PURE__ */ React6.createElement(Typography, { variant: "body", style: { color: theme.colors["muted-foreground"] } }, "\u2715"))
+    value && value.length > 0 && /* @__PURE__ */ React7.createElement(TouchableOpacity2, { onPress: handleClear, style: styles6.clear }, /* @__PURE__ */ React7.createElement(Typography, { variant: "body", style: { color: theme.colors["muted-foreground"] } }, "\u2715"))
   );
 };
 var styles6 = StyleSheet6.create({
@@ -396,7 +439,7 @@ var styles6 = StyleSheet6.create({
 SearchInput.displayName = "SearchInput";
 
 // src/components/molecules/Tooltip.tsx
-import React7, { useState, useRef } from "react";
+import React8, { useState, useRef } from "react";
 import {
   View as View7,
   Text,
@@ -425,7 +468,7 @@ var Tooltip = ({
   };
   const tooltipY = position.y - 40;
   const centerX = position.x + position.width / 2;
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
     TouchableOpacity3,
     {
       ref: triggerRef,
@@ -435,7 +478,7 @@ var Tooltip = ({
       activeOpacity: 1
     },
     children
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React8.createElement(
     Modal,
     {
       visible,
@@ -443,7 +486,7 @@ var Tooltip = ({
       animationType: "fade",
       onRequestClose: hideTooltip
     },
-    /* @__PURE__ */ React7.createElement(TouchableWithoutFeedback, { onPress: hideTooltip }, /* @__PURE__ */ React7.createElement(View7, { style: styles7.overlay }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React8.createElement(TouchableWithoutFeedback, { onPress: hideTooltip }, /* @__PURE__ */ React8.createElement(View7, { style: styles7.overlay }, /* @__PURE__ */ React8.createElement(
       View7,
       {
         style: [
@@ -455,8 +498,8 @@ var Tooltip = ({
           }
         ]
       },
-      /* @__PURE__ */ React7.createElement(Text, { style: [styles7.text, { color: theme.colors.background }] }, content),
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React8.createElement(Text, { style: [styles7.text, { color: theme.colors.background }] }, content),
+      /* @__PURE__ */ React8.createElement(
         View7,
         {
           style: [
@@ -498,7 +541,7 @@ var styles7 = StyleSheet7.create({
 Tooltip.displayName = "Tooltip";
 
 // src/components/molecules/Popover.tsx
-import React8, { useState as useState2, useRef as useRef2 } from "react";
+import React9, { useState as useState2, useRef as useRef2 } from "react";
 import {
   View as View8,
   StyleSheet as StyleSheet8,
@@ -529,7 +572,7 @@ var Popover = ({
   const popoverY = position.y + position.height + 8;
   const showAbove = popoverY > screenHeight * 0.7;
   const finalY = showAbove ? position.y - 200 : popoverY;
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
     TouchableOpacity4,
     {
       ref: triggerRef,
@@ -537,7 +580,7 @@ var Popover = ({
       style
     },
     trigger
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     Modal2,
     {
       visible,
@@ -545,7 +588,7 @@ var Popover = ({
       animationType: "fade",
       onRequestClose: hidePopover
     },
-    /* @__PURE__ */ React8.createElement(TouchableWithoutFeedback2, { onPress: hidePopover }, /* @__PURE__ */ React8.createElement(View8, { style: styles8.overlay }, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(TouchableWithoutFeedback2, { onPress: hidePopover }, /* @__PURE__ */ React9.createElement(View8, { style: styles8.overlay }, /* @__PURE__ */ React9.createElement(
       View8,
       {
         style: [
@@ -559,9 +602,9 @@ var Popover = ({
           }
         ]
       },
-      showAbove && /* @__PURE__ */ React8.createElement(View8, { style: [styles8.arrowUp, { borderBottomColor: theme.colors.card }] }),
-      /* @__PURE__ */ React8.createElement(View8, { style: styles8.content }, content),
-      !showAbove && /* @__PURE__ */ React8.createElement(View8, { style: [styles8.arrowDown, { borderTopColor: theme.colors.card }] })
+      showAbove && /* @__PURE__ */ React9.createElement(View8, { style: [styles8.arrowUp, { borderBottomColor: theme.colors.card }] }),
+      /* @__PURE__ */ React9.createElement(View8, { style: styles8.content }, content),
+      !showAbove && /* @__PURE__ */ React9.createElement(View8, { style: [styles8.arrowDown, { borderTopColor: theme.colors.card }] })
     )))
   ));
 };
@@ -607,7 +650,7 @@ var styles8 = StyleSheet8.create({
 Popover.displayName = "Popover";
 
 // src/components/molecules/Menu.tsx
-import React9 from "react";
+import React10 from "react";
 import {
   View as View9,
   TouchableOpacity as TouchableOpacity5,
@@ -624,9 +667,9 @@ var Menu = ({
 }) => {
   const theme = useTheme();
   const eventBus = useEventBus();
-  const [visible, setVisible] = React9.useState(false);
-  const triggerRef = React9.useRef(null);
-  const [position, setPosition] = React9.useState({ x: 0, y: 0, width: 0 });
+  const [visible, setVisible] = React10.useState(false);
+  const triggerRef = React10.useRef(null);
+  const [position, setPosition] = React10.useState({ x: 0, y: 0, width: 0 });
   const showMenu = () => {
     triggerRef.current?.measure((x, y, width, height, pageX, pageY) => {
       setPosition({ x: pageX, y: pageY + height + 4, width });
@@ -644,7 +687,7 @@ var Menu = ({
     onSelect?.(item);
     hideMenu();
   };
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
     TouchableOpacity5,
     {
       ref: triggerRef,
@@ -652,7 +695,7 @@ var Menu = ({
       style
     },
     trigger
-  ), /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     Modal3,
     {
       visible,
@@ -660,7 +703,7 @@ var Menu = ({
       animationType: "fade",
       onRequestClose: hideMenu
     },
-    /* @__PURE__ */ React9.createElement(TouchableWithoutFeedback3, { onPress: hideMenu }, /* @__PURE__ */ React9.createElement(View9, { style: styles9.overlay }, /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(TouchableWithoutFeedback3, { onPress: hideMenu }, /* @__PURE__ */ React10.createElement(View9, { style: styles9.overlay }, /* @__PURE__ */ React10.createElement(
       View9,
       {
         style: [
@@ -674,7 +717,7 @@ var Menu = ({
           }
         ]
       },
-      /* @__PURE__ */ React9.createElement(ScrollView, null, items.map((item) => /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React10.createElement(ScrollView, null, items.map((item) => /* @__PURE__ */ React10.createElement(
         TouchableOpacity5,
         {
           key: item.id,
@@ -685,7 +728,7 @@ var Menu = ({
             { opacity: item.disabled ? 0.5 : 1 }
           ]
         },
-        /* @__PURE__ */ React9.createElement(HStack, { spacing: 12, align: "center" }, item.icon, /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React10.createElement(HStack, { spacing: 12, align: "center" }, item.icon, /* @__PURE__ */ React10.createElement(
           Typography,
           {
             variant: "body",
@@ -722,7 +765,7 @@ var styles9 = StyleSheet9.create({
 Menu.displayName = "Menu";
 
 // src/components/molecules/Breadcrumb.tsx
-import React10 from "react";
+import React11 from "react";
 import {
   TouchableOpacity as TouchableOpacity6,
   ScrollView as ScrollView2,
@@ -741,30 +784,30 @@ var Breadcrumb = ({
     }
     onNavigate?.(item, index);
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     ScrollView2,
     {
       horizontal: true,
       showsHorizontalScrollIndicator: false,
       style: [styles10.container, style]
     },
-    /* @__PURE__ */ React10.createElement(HStack, { spacing: 4, align: "center" }, items.map((item, index) => {
+    /* @__PURE__ */ React11.createElement(HStack, { spacing: 4, align: "center" }, items.map((item, index) => {
       const isLast = index === items.length - 1;
-      return /* @__PURE__ */ React10.createElement(HStack, { key: index, spacing: 4, align: "center" }, index > 0 && /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React11.createElement(HStack, { key: index, spacing: 4, align: "center" }, index > 0 && /* @__PURE__ */ React11.createElement(
         Typography,
         {
           variant: "caption",
           style: { color: theme.colors["muted-foreground"] }
         },
         "/"
-      ), isLast ? /* @__PURE__ */ React10.createElement(
+      ), isLast ? /* @__PURE__ */ React11.createElement(
         Typography,
         {
           variant: "caption",
           style: { color: theme.colors.foreground, fontWeight: "500" }
         },
         item.label
-      ) : /* @__PURE__ */ React10.createElement(TouchableOpacity6, { onPress: () => handlePress(item, index) }, /* @__PURE__ */ React10.createElement(
+      ) : /* @__PURE__ */ React11.createElement(TouchableOpacity6, { onPress: () => handlePress(item, index) }, /* @__PURE__ */ React11.createElement(
         Typography,
         {
           variant: "caption",
@@ -783,7 +826,7 @@ var styles10 = StyleSheet10.create({
 Breadcrumb.displayName = "Breadcrumb";
 
 // src/components/molecules/ButtonGroup.tsx
-import React11 from "react";
+import React12 from "react";
 import {
   TouchableOpacity as TouchableOpacity7,
   StyleSheet as StyleSheet11
@@ -803,9 +846,9 @@ var ButtonGroup = ({
     }
     onChange?.(optionValue);
   };
-  return /* @__PURE__ */ React11.createElement(HStack, { spacing: 4, style: style ? [styles11.container, style] : styles11.container }, options.map((option) => {
+  return /* @__PURE__ */ React12.createElement(HStack, { spacing: 4, style: style ? [styles11.container, style] : styles11.container }, options.map((option) => {
     const isSelected = value === option.value;
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement(
       TouchableOpacity7,
       {
         key: option.value,
@@ -820,7 +863,7 @@ var ButtonGroup = ({
           }
         ]
       },
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React12.createElement(
         Typography,
         {
           variant: "body",
@@ -847,9 +890,9 @@ var styles11 = StyleSheet11.create({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/molecules/ErrorBoundary.tsx
-import React12 from "react";
+import React13 from "react";
 import { View as View10 } from "react-native";
-var ErrorBoundary = class extends React12.Component {
+var ErrorBoundary = class extends React13.Component {
   constructor(props) {
     super(props);
     this.reset = () => {
@@ -869,7 +912,7 @@ var ErrorBoundary = class extends React12.Component {
     if (error) {
       const fallbackContent = this.renderFallback(error, fallback);
       if (style) {
-        return /* @__PURE__ */ React12.createElement(View10, { style }, fallbackContent);
+        return /* @__PURE__ */ React13.createElement(View10, { style }, fallbackContent);
       }
       return fallbackContent;
     }
@@ -882,7 +925,7 @@ var ErrorBoundary = class extends React12.Component {
     if (fallback) {
       return fallback;
     }
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React13.createElement(
       ErrorState,
       {
         message: `Something went wrong: ${error.message}`,
@@ -894,7 +937,7 @@ var ErrorBoundary = class extends React12.Component {
 ErrorBoundary.displayName = "ErrorBoundary";
 
 // src/components/molecules/FloatingActionButton.tsx
-import React13, { useState as useState3, useRef as useRef3 } from "react";
+import React14, { useState as useState3, useRef as useRef3 } from "react";
 import {
   View as View11,
   TouchableOpacity as TouchableOpacity8,
@@ -964,7 +1007,7 @@ var FloatingActionButton = ({
     }).start();
   };
   if (resolvedAction && (!actions || actions.length === 0)) {
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       TouchableOpacity8,
       {
         onPress: resolvedAction.onPress,
@@ -976,11 +1019,11 @@ var FloatingActionButton = ({
         ],
         accessibilityLabel: resolvedAction.label || "Action"
       },
-      /* @__PURE__ */ React13.createElement(Text2, { style: styles12.icon }, resolvedAction.icon || "+")
+      /* @__PURE__ */ React14.createElement(Text2, { style: styles12.icon }, resolvedAction.icon || "+")
     );
   }
   if (actions && actions.length > 0) {
-    return /* @__PURE__ */ React13.createElement(View11, { style: [styles12.container, getPositionStyle(), style] }, isExpanded && actions.length > 1 && /* @__PURE__ */ React13.createElement(View11, { style: styles12.actionsContainer }, actions.map((actionItem, index) => {
+    return /* @__PURE__ */ React14.createElement(View11, { style: [styles12.container, getPositionStyle(), style] }, isExpanded && actions.length > 1 && /* @__PURE__ */ React14.createElement(View11, { style: styles12.actionsContainer }, actions.map((actionItem, index) => {
       const translateY = animation.interpolate({
         inputRange: [0, 1],
         outputRange: [20 * (actions.length - index), 0]
@@ -989,7 +1032,7 @@ var FloatingActionButton = ({
         inputRange: [0, 0.5, 1],
         outputRange: [0, 0, 1]
       });
-      return /* @__PURE__ */ React13.createElement(
+      return /* @__PURE__ */ React14.createElement(
         Animated2.View,
         {
           key: actionItem.id,
@@ -998,7 +1041,7 @@ var FloatingActionButton = ({
             { opacity, transform: [{ translateY }] }
           ]
         },
-        /* @__PURE__ */ React13.createElement(
+        /* @__PURE__ */ React14.createElement(
           TouchableOpacity8,
           {
             onPress: () => {
@@ -1014,11 +1057,11 @@ var FloatingActionButton = ({
               { backgroundColor: getVariantColor(actionItem.variant || "primary") }
             ]
           },
-          /* @__PURE__ */ React13.createElement(Text2, { style: styles12.icon }, actionItem.icon)
+          /* @__PURE__ */ React14.createElement(Text2, { style: styles12.icon }, actionItem.icon)
         ),
-        /* @__PURE__ */ React13.createElement(View11, { style: styles12.labelContainer }, /* @__PURE__ */ React13.createElement(Text2, { style: styles12.label }, actionItem.label))
+        /* @__PURE__ */ React14.createElement(View11, { style: styles12.labelContainer }, /* @__PURE__ */ React14.createElement(Text2, { style: styles12.label }, actionItem.label))
       );
-    })), /* @__PURE__ */ React13.createElement(
+    })), /* @__PURE__ */ React14.createElement(
       TouchableOpacity8,
       {
         onPress: () => {
@@ -1039,7 +1082,7 @@ var FloatingActionButton = ({
           }
         ]
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React14.createElement(
         Animated2.Text,
         {
           style: [
@@ -1115,7 +1158,7 @@ var styles12 = StyleSheet12.create({
 FloatingActionButton.displayName = "FloatingActionButton";
 
 // src/components/molecules/Flex.tsx
-import React14 from "react";
+import React15 from "react";
 import { View as View12 } from "react-native";
 var gapValues = {
   none: 0,
@@ -1154,12 +1197,12 @@ var Flex = ({
   if (basis !== void 0) {
     flexStyle.flexBasis = typeof basis === "number" ? basis : void 0;
   }
-  return /* @__PURE__ */ React14.createElement(View12, { style: [flexStyle, ...style ? [style] : []] }, children);
+  return /* @__PURE__ */ React15.createElement(View12, { style: [flexStyle, ...style ? [style] : []] }, children);
 };
 Flex.displayName = "Flex";
 
 // src/components/molecules/SimpleGrid.tsx
-import React15 from "react";
+import React16 from "react";
 import { View as View13 } from "react-native";
 var gapValues2 = {
   none: 0,
@@ -1176,7 +1219,7 @@ var SimpleGrid = ({
   style,
   children
 }) => {
-  const childrenArray = React15.Children.toArray(children);
+  const childrenArray = React16.Children.toArray(children);
   const gapValue = gapValues2[gap];
   if (cols) {
     const rowStyle = {
@@ -1184,7 +1227,7 @@ var SimpleGrid = ({
       flexWrap: "wrap",
       gap: gapValue
     };
-    return /* @__PURE__ */ React15.createElement(View13, { style: [rowStyle, ...style ? [style] : []] }, childrenArray.map((child, index) => /* @__PURE__ */ React15.createElement(View13, { key: index, style: { flex: 1 / cols, padding: gapValue / 2 } }, child)));
+    return /* @__PURE__ */ React16.createElement(View13, { style: [rowStyle, ...style ? [style] : []] }, childrenArray.map((child, index) => /* @__PURE__ */ React16.createElement(View13, { key: index, style: { flex: 1 / cols, padding: gapValue / 2 } }, child)));
   }
   const containerStyle = {
     flexDirection: "row",
@@ -1195,12 +1238,12 @@ var SimpleGrid = ({
     minWidth: minChildWidth,
     flex: 1
   };
-  return /* @__PURE__ */ React15.createElement(View13, { style: [containerStyle, ...style ? [style] : []] }, childrenArray.map((child, index) => /* @__PURE__ */ React15.createElement(View13, { key: index, style: itemStyle }, child)));
+  return /* @__PURE__ */ React16.createElement(View13, { style: [containerStyle, ...style ? [style] : []] }, childrenArray.map((child, index) => /* @__PURE__ */ React16.createElement(View13, { key: index, style: itemStyle }, child)));
 };
 SimpleGrid.displayName = "SimpleGrid";
 
 // src/components/molecules/Container.tsx
-import React16 from "react";
+import React17 from "react";
 import { View as View14 } from "react-native";
 var sizeValues = {
   xs: 320,
@@ -1233,13 +1276,13 @@ var Container = ({
     paddingHorizontal: paddingValues[padding],
     ...center && { alignSelf: "center" }
   };
-  return /* @__PURE__ */ React16.createElement(View14, { style: [containerStyle, ...style ? [style] : []] }, children);
+  return /* @__PURE__ */ React17.createElement(View14, { style: [containerStyle, ...style ? [style] : []] }, children);
 };
 Container.displayName = "Container";
 
 // src/components/molecules/Grid.tsx
-import React17 from "react";
-import { View as View15, FlatList } from "react-native";
+import React18 from "react";
+import { View as View15, FlatList as FlatList2 } from "react-native";
 var gapValues3 = {
   none: 0,
   xs: 4,
@@ -1259,8 +1302,8 @@ function Grid({
 }) {
   const gapValue = gapValues3[gap];
   if (data && renderItem) {
-    return /* @__PURE__ */ React17.createElement(
-      FlatList,
+    return /* @__PURE__ */ React18.createElement(
+      FlatList2,
       {
         data,
         renderItem,
@@ -1279,8 +1322,8 @@ function Grid({
     flexWrap: "wrap",
     gap: gapValue
   };
-  const childrenArray = React17.Children.toArray(children);
-  return /* @__PURE__ */ React17.createElement(View15, { style: [containerStyle, ...style ? [style] : []] }, childrenArray.map((child, index) => /* @__PURE__ */ React17.createElement(
+  const childrenArray = React18.Children.toArray(children);
+  return /* @__PURE__ */ React18.createElement(View15, { style: [containerStyle, ...style ? [style] : []] }, childrenArray.map((child, index) => /* @__PURE__ */ React18.createElement(
     View15,
     {
       key: index,
@@ -1295,7 +1338,7 @@ function Grid({
 Grid.displayName = "Grid";
 
 // src/components/molecules/SidePanel.tsx
-import React18 from "react";
+import React19 from "react";
 import {
   View as View16,
   StyleSheet as StyleSheet13,
@@ -1319,10 +1362,10 @@ var SidePanel = ({
 }) => {
   const theme = useTheme();
   const eventBus = useEventBus();
-  const translateX = React18.useRef(
+  const translateX = React19.useRef(
     new Animated3.Value(position === "right" ? SCREEN_WIDTH : -SCREEN_WIDTH)
   ).current;
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     Animated3.timing(translateX, {
       toValue: isOpen ? 0 : position === "right" ? width : -width,
       duration: 300,
@@ -1336,14 +1379,14 @@ var SidePanel = ({
     onClose();
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ React18.createElement(View16, { style: styles13.overlay }, showOverlay && /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(View16, { style: styles13.overlay }, showOverlay && /* @__PURE__ */ React19.createElement(
     TouchableOpacity9,
     {
       style: styles13.backdrop,
       activeOpacity: 1,
       onPress: handleClose
     }
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Animated3.View,
     {
       style: [
@@ -1360,7 +1403,7 @@ var SidePanel = ({
         style
       ]
     },
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement(
       View16,
       {
         style: [
@@ -1371,10 +1414,10 @@ var SidePanel = ({
           }
         ]
       },
-      /* @__PURE__ */ React18.createElement(Typography, { variant: "h4" }, title),
-      /* @__PURE__ */ React18.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClose }, "\u2715")
+      /* @__PURE__ */ React19.createElement(Typography, { variant: "h4" }, title),
+      /* @__PURE__ */ React19.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClose }, "\u2715")
     ),
-    /* @__PURE__ */ React18.createElement(VStack, { spacing: 0, style: styles13.content }, isLoading ? /* @__PURE__ */ React18.createElement(LoadingState, null) : error ? /* @__PURE__ */ React18.createElement(ErrorState, { message: error.message, onRetry: handleClose }) : children)
+    /* @__PURE__ */ React19.createElement(VStack, { spacing: 0, style: styles13.content }, isLoading ? /* @__PURE__ */ React19.createElement(LoadingState, null) : error ? /* @__PURE__ */ React19.createElement(ErrorState, { message: error.message, onRetry: handleClose }) : children)
   ));
 };
 var styles13 = StyleSheet13.create({
@@ -1419,7 +1462,7 @@ var styles13 = StyleSheet13.create({
 SidePanel.displayName = "SidePanel";
 
 // src/components/molecules/Navigation.tsx
-import React19 from "react";
+import React20 from "react";
 import {
   View as View17,
   StyleSheet as StyleSheet14,
@@ -1475,14 +1518,14 @@ var Navigation = ({
     return isActive ? theme.colors.primary : theme.colors.foreground;
   };
   if (isLoading) {
-    return /* @__PURE__ */ React19.createElement(View17, { style: [styles14.container, style] }, /* @__PURE__ */ React19.createElement(LoadingState, { message: "Loading navigation..." }));
+    return /* @__PURE__ */ React20.createElement(View17, { style: [styles14.container, style] }, /* @__PURE__ */ React20.createElement(LoadingState, { message: "Loading navigation..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React19.createElement(View17, { style: [styles14.container, style] }, /* @__PURE__ */ React19.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React20.createElement(View17, { style: [styles14.container, style] }, /* @__PURE__ */ React20.createElement(ErrorState, { message: error.message }));
   }
   const renderItem = (item) => {
     const isActive = item.isActive ?? false;
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       TouchableOpacity10,
       {
         key: item.id,
@@ -1495,11 +1538,11 @@ var Navigation = ({
         ],
         activeOpacity: 0.7
       },
-      /* @__PURE__ */ React19.createElement(HStack, { spacing: 8, align: "center" }, item.icon && /* @__PURE__ */ React19.createElement(Typography, { variant: "body", style: { color: getTextColor(isActive) } }, item.icon), /* @__PURE__ */ React19.createElement(Typography, { variant: "body", style: { color: getTextColor(isActive) } }, item.label), item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React19.createElement(Badge, { variant: "error", size: "sm" }, item.badge > 99 ? "99+" : item.badge))
+      /* @__PURE__ */ React20.createElement(HStack, { spacing: 8, align: "center" }, item.icon && /* @__PURE__ */ React20.createElement(Typography, { variant: "body", style: { color: getTextColor(isActive) } }, item.icon), /* @__PURE__ */ React20.createElement(Typography, { variant: "body", style: { color: getTextColor(isActive) } }, item.label), item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React20.createElement(Badge, { variant: "error", size: "sm" }, item.badge > 99 ? "99+" : item.badge))
     );
   };
   if (orientation === "horizontal") {
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React20.createElement(
       ScrollView3,
       {
         horizontal: true,
@@ -1509,7 +1552,7 @@ var Navigation = ({
       items.map(renderItem)
     );
   }
-  return /* @__PURE__ */ React19.createElement(VStack, { spacing: 4, style: [styles14.verticalContainer, ...style ? [style] : []] }, items.map(renderItem));
+  return /* @__PURE__ */ React20.createElement(VStack, { spacing: 4, style: [styles14.verticalContainer, ...style ? [style] : []] }, items.map(renderItem));
 };
 var styles14 = StyleSheet14.create({
   container: {
@@ -1533,14 +1576,14 @@ var styles14 = StyleSheet14.create({
 Navigation.displayName = "Navigation";
 
 // src/components/molecules/RelationSelect.tsx
-import React20, { useState as useState4, useMemo } from "react";
+import React21, { useState as useState4, useMemo } from "react";
 import {
   View as View18,
   TouchableOpacity as TouchableOpacity11,
   Text as Text3,
   StyleSheet as StyleSheet15,
   Modal as Modal4,
-  FlatList as FlatList2,
+  FlatList as FlatList3,
   SafeAreaView
 } from "react-native";
 var RelationSelect = ({
@@ -1644,7 +1687,7 @@ var RelationSelect = ({
   };
   const renderOption = ({ item }) => {
     const isSelected = selectedValues.includes(item.id);
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React21.createElement(
       TouchableOpacity11,
       {
         style: [
@@ -1656,7 +1699,7 @@ var RelationSelect = ({
         ],
         onPress: () => handleSelect(item.id)
       },
-      /* @__PURE__ */ React20.createElement(HStack, { spacing: 12, align: "center" }, item.avatarUri ? /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement(HStack, { spacing: 12, align: "center" }, item.avatarUri ? /* @__PURE__ */ React21.createElement(
         View18,
         {
           style: [
@@ -1666,8 +1709,8 @@ var RelationSelect = ({
             }
           ]
         },
-        /* @__PURE__ */ React20.createElement(Text3, { style: { fontSize: 20 } }, "\u{1F464}")
-      ) : /* @__PURE__ */ React20.createElement(
+        /* @__PURE__ */ React21.createElement(Text3, { style: { fontSize: 20 } }, "\u{1F464}")
+      ) : /* @__PURE__ */ React21.createElement(
         View18,
         {
           style: [
@@ -1677,8 +1720,8 @@ var RelationSelect = ({
             }
           ]
         },
-        /* @__PURE__ */ React20.createElement(Text3, { style: { fontSize: 16 } }, item.label.charAt(0).toUpperCase())
-      ), /* @__PURE__ */ React20.createElement(VStack, { spacing: 2, style: styles15.optionContent }, /* @__PURE__ */ React20.createElement(
+        /* @__PURE__ */ React21.createElement(Text3, { style: { fontSize: 16 } }, item.label.charAt(0).toUpperCase())
+      ), /* @__PURE__ */ React21.createElement(VStack, { spacing: 2, style: styles15.optionContent }, /* @__PURE__ */ React21.createElement(
         Text3,
         {
           style: [
@@ -1691,7 +1734,7 @@ var RelationSelect = ({
           numberOfLines: 1
         },
         item.label
-      ), item.subtitle && /* @__PURE__ */ React20.createElement(
+      ), item.subtitle && /* @__PURE__ */ React21.createElement(
         Text3,
         {
           style: [
@@ -1703,7 +1746,7 @@ var RelationSelect = ({
           numberOfLines: 1
         },
         item.subtitle
-      )), isSelected && /* @__PURE__ */ React20.createElement(
+      )), isSelected && /* @__PURE__ */ React21.createElement(
         Typography,
         {
           variant: "body",
@@ -1711,7 +1754,7 @@ var RelationSelect = ({
         },
         "\u2713"
       )),
-      item.metadata && /* @__PURE__ */ React20.createElement(HStack, { spacing: 8, style: styles15.metadata }, Object.entries(item.metadata).map(([key, val]) => /* @__PURE__ */ React20.createElement(
+      item.metadata && /* @__PURE__ */ React21.createElement(HStack, { spacing: 8, style: styles15.metadata }, Object.entries(item.metadata).map(([key, val]) => /* @__PURE__ */ React21.createElement(
         Badge,
         {
           key,
@@ -1723,12 +1766,12 @@ var RelationSelect = ({
     );
   };
   if (isLoading) {
-    return /* @__PURE__ */ React20.createElement(View18, { style: [styles15.container, style] }, /* @__PURE__ */ React20.createElement(LoadingState, { message: "Loading options..." }));
+    return /* @__PURE__ */ React21.createElement(View18, { style: [styles15.container, style] }, /* @__PURE__ */ React21.createElement(LoadingState, { message: "Loading options..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React20.createElement(View18, { style: [styles15.container, style] }, /* @__PURE__ */ React20.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React21.createElement(View18, { style: [styles15.container, style] }, /* @__PURE__ */ React21.createElement(ErrorState, { message: error.message }));
   }
-  return /* @__PURE__ */ React20.createElement(View18, { style: [styles15.container, style] }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(View18, { style: [styles15.container, style] }, /* @__PURE__ */ React21.createElement(
     TouchableOpacity11,
     {
       onPress: handleOpen,
@@ -1743,7 +1786,7 @@ var RelationSelect = ({
         }
       ]
     },
-    /* @__PURE__ */ React20.createElement(View18, { style: styles15.buttonContent }, selectedOptions.length === 0 ? /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(View18, { style: styles15.buttonContent }, selectedOptions.length === 0 ? /* @__PURE__ */ React21.createElement(
       Text3,
       {
         style: [
@@ -1756,7 +1799,7 @@ var RelationSelect = ({
         numberOfLines: 1
       },
       placeholder
-    ) : /* @__PURE__ */ React20.createElement(HStack, { spacing: 8, style: styles15.selectedContainer }, selectedOptions.map((opt) => /* @__PURE__ */ React20.createElement(
+    ) : /* @__PURE__ */ React21.createElement(HStack, { spacing: 8, style: styles15.selectedContainer }, selectedOptions.map((opt) => /* @__PURE__ */ React21.createElement(
       View18,
       {
         key: opt.id,
@@ -1765,7 +1808,7 @@ var RelationSelect = ({
           { backgroundColor: theme.colors.primary }
         ]
       },
-      /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement(
         Text3,
         {
           style: [
@@ -1776,15 +1819,15 @@ var RelationSelect = ({
         },
         opt.label
       )
-    )), multiple && maxSelections && /* @__PURE__ */ React20.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, selectedOptions.length, "/", maxSelections))),
-    selectedOptions.length > 0 && !disabled && /* @__PURE__ */ React20.createElement(
+    )), multiple && maxSelections && /* @__PURE__ */ React21.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, selectedOptions.length, "/", maxSelections))),
+    selectedOptions.length > 0 && !disabled && /* @__PURE__ */ React21.createElement(
       TouchableOpacity11,
       {
         onPress: handleClear,
         style: styles15.clearButton,
         hitSlop: { top: 10, bottom: 10, left: 10, right: 10 }
       },
-      /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement(
         Typography,
         {
           variant: "body",
@@ -1793,8 +1836,8 @@ var RelationSelect = ({
         "\u2715"
       )
     ),
-    /* @__PURE__ */ React20.createElement(Text3, { style: [styles15.chevron, { color: theme.colors["muted-foreground"] }] }, "\u25BC")
-  ), /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(Text3, { style: [styles15.chevron, { color: theme.colors["muted-foreground"] }] }, "\u25BC")
+  ), /* @__PURE__ */ React21.createElement(
     Modal4,
     {
       visible: isOpen,
@@ -1802,13 +1845,13 @@ var RelationSelect = ({
       animationType: "slide",
       onRequestClose: handleClose
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React21.createElement(
       SafeAreaView,
       {
         style: [styles15.modalContainer, { backgroundColor: theme.colors.background }]
       },
-      /* @__PURE__ */ React20.createElement(View18, { style: [styles15.modalHeader, { borderBottomColor: theme.colors.border }] }, /* @__PURE__ */ React20.createElement(Button, { variant: "ghost", onPress: handleClose }, "Cancel"), /* @__PURE__ */ React20.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, multiple ? "Select Items" : "Select Item"), /* @__PURE__ */ React20.createElement(Button, { variant: "primary", onPress: handleClose }, "Done")),
-      searchable && /* @__PURE__ */ React20.createElement(View18, { style: styles15.searchContainer }, /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement(View18, { style: [styles15.modalHeader, { borderBottomColor: theme.colors.border }] }, /* @__PURE__ */ React21.createElement(Button, { variant: "ghost", onPress: handleClose }, "Cancel"), /* @__PURE__ */ React21.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, multiple ? "Select Items" : "Select Item"), /* @__PURE__ */ React21.createElement(Button, { variant: "primary", onPress: handleClose }, "Done")),
+      searchable && /* @__PURE__ */ React21.createElement(View18, { style: styles15.searchContainer }, /* @__PURE__ */ React21.createElement(
         Input,
         {
           value: searchQuery,
@@ -1817,8 +1860,8 @@ var RelationSelect = ({
           changeEvent: searchEvent
         }
       )),
-      filteredOptions.length === 0 ? /* @__PURE__ */ React20.createElement(EmptyState, { message: "No matching options" }) : /* @__PURE__ */ React20.createElement(
-        FlatList2,
+      filteredOptions.length === 0 ? /* @__PURE__ */ React21.createElement(EmptyState, { message: "No matching options" }) : /* @__PURE__ */ React21.createElement(
+        FlatList3,
         {
           data: filteredOptions,
           keyExtractor: (item) => item.id,
@@ -1921,7 +1964,7 @@ var styles15 = StyleSheet15.create({
 RelationSelect.displayName = "RelationSelect";
 
 // src/components/molecules/FilterGroup.tsx
-import React21, { useState as useState5, useCallback } from "react";
+import React22, { useState as useState5, useCallback } from "react";
 import { View as View19, StyleSheet as StyleSheet16, TouchableOpacity as TouchableOpacity12 } from "react-native";
 var FilterGroup = ({
   entity,
@@ -1975,15 +2018,15 @@ var FilterGroup = ({
     ];
   };
   if (variant === "pills") {
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.createElement(
       HStack,
       {
         spacing: 16,
         align: "center",
         style: [styles16.pillsContainer, style ?? {}]
       },
-      showIcon && /* @__PURE__ */ React21.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, "\u{1F50D}"),
-      filters.map((filter) => /* @__PURE__ */ React21.createElement(HStack, { key: filter.field, spacing: 8, align: "center" }, /* @__PURE__ */ React21.createElement(
+      showIcon && /* @__PURE__ */ React22.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, "\u{1F50D}"),
+      filters.map((filter) => /* @__PURE__ */ React22.createElement(HStack, { key: filter.field, spacing: 8, align: "center" }, /* @__PURE__ */ React22.createElement(
         Typography,
         {
           variant: "caption",
@@ -1991,7 +2034,7 @@ var FilterGroup = ({
         },
         filter.label,
         ":"
-      ), /* @__PURE__ */ React21.createElement(HStack, { spacing: 0, style: styles16.pillGroup }, /* @__PURE__ */ React21.createElement(
+      ), /* @__PURE__ */ React22.createElement(HStack, { spacing: 0, style: styles16.pillGroup }, /* @__PURE__ */ React22.createElement(
         TouchableOpacity12,
         {
           onPress: () => handleFilterSelect(filter.field, null),
@@ -2003,7 +2046,7 @@ var FilterGroup = ({
             }
           ]
         },
-        /* @__PURE__ */ React21.createElement(
+        /* @__PURE__ */ React22.createElement(
           Typography,
           {
             variant: "caption",
@@ -2013,7 +2056,7 @@ var FilterGroup = ({
           },
           "All"
         )
-      ), filter.options?.map((option) => /* @__PURE__ */ React21.createElement(
+      ), filter.options?.map((option) => /* @__PURE__ */ React22.createElement(
         TouchableOpacity12,
         {
           key: option,
@@ -2027,7 +2070,7 @@ var FilterGroup = ({
             }
           ]
         },
-        /* @__PURE__ */ React21.createElement(
+        /* @__PURE__ */ React22.createElement(
           Typography,
           {
             variant: "caption",
@@ -2038,43 +2081,43 @@ var FilterGroup = ({
           option
         )
       ))))),
-      activeFilterCount > 0 && /* @__PURE__ */ React21.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear")
+      activeFilterCount > 0 && /* @__PURE__ */ React22.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear")
     );
   }
   if (variant === "vertical") {
-    return /* @__PURE__ */ React21.createElement(VStack, { spacing: 16, style: [styles16.verticalContainer, style ?? {}] }, showIcon && /* @__PURE__ */ React21.createElement(HStack, { spacing: 8, align: "center" }, /* @__PURE__ */ React21.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, "\u{1F50D}"), /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.createElement(VStack, { spacing: 16, style: [styles16.verticalContainer, style ?? {}] }, showIcon && /* @__PURE__ */ React22.createElement(HStack, { spacing: 8, align: "center" }, /* @__PURE__ */ React22.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, "\u{1F50D}"), /* @__PURE__ */ React22.createElement(
       Typography,
       {
         variant: "label",
         color: theme.colors["muted-foreground"]
       },
       "Filters"
-    )), filters.map((filter) => /* @__PURE__ */ React21.createElement(VStack, { key: filter.field, spacing: 4 }, /* @__PURE__ */ React21.createElement(
+    )), filters.map((filter) => /* @__PURE__ */ React22.createElement(VStack, { key: filter.field, spacing: 4 }, /* @__PURE__ */ React22.createElement(
       Typography,
       {
         variant: "label",
         color: theme.colors["muted-foreground"]
       },
       filter.label
-    ), /* @__PURE__ */ React21.createElement(
+    ), /* @__PURE__ */ React22.createElement(
       Select,
       {
         value: selectedValues[filter.field] || "all",
         onChange: (newValue) => handleFilterSelect(filter.field, newValue),
         options: buildSelectOptions(filter)
       }
-    ))), activeFilterCount > 0 && /* @__PURE__ */ React21.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear all"));
+    ))), activeFilterCount > 0 && /* @__PURE__ */ React22.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear all"));
   }
   if (variant === "compact") {
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.createElement(
       HStack,
       {
         spacing: 12,
         align: "center",
         style: [styles16.compactContainer, style ?? {}]
       },
-      showIcon && /* @__PURE__ */ React21.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, "\u{1F50D}"),
-      filters.map((filter) => /* @__PURE__ */ React21.createElement(View19, { key: filter.field, style: styles16.compactSelect }, /* @__PURE__ */ React21.createElement(
+      showIcon && /* @__PURE__ */ React22.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, "\u{1F50D}"),
+      filters.map((filter) => /* @__PURE__ */ React22.createElement(View19, { key: filter.field, style: styles16.compactSelect }, /* @__PURE__ */ React22.createElement(
         Select,
         {
           value: selectedValues[filter.field] || "all",
@@ -2088,20 +2131,20 @@ var FilterGroup = ({
           ]
         }
       ))),
-      activeFilterCount > 0 && /* @__PURE__ */ React21.createElement(React21.Fragment, null, Object.entries(selectedValues).map(([field, value]) => {
+      activeFilterCount > 0 && /* @__PURE__ */ React22.createElement(React22.Fragment, null, Object.entries(selectedValues).map(([field, value]) => {
         const filterDef = filters.find((f) => f.field === field);
-        return /* @__PURE__ */ React21.createElement(
+        return /* @__PURE__ */ React22.createElement(
           TouchableOpacity12,
           {
             key: field,
             onPress: () => handleFilterSelect(field, null)
           },
-          /* @__PURE__ */ React21.createElement(Badge, { variant: "primary", size: "md" }, filterDef?.label, ": ", value, " \u2715")
+          /* @__PURE__ */ React22.createElement(Badge, { variant: "primary", size: "md" }, filterDef?.label, ": ", value, " \u2715")
         );
-      }), /* @__PURE__ */ React21.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear all"))
+      }), /* @__PURE__ */ React22.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear all"))
     );
   }
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     View19,
     {
       style: [
@@ -2113,28 +2156,28 @@ var FilterGroup = ({
         style
       ]
     },
-    /* @__PURE__ */ React21.createElement(HStack, { spacing: 16, align: "center", style: styles16.defaultContent }, showIcon && /* @__PURE__ */ React21.createElement(HStack, { spacing: 8, align: "center" }, /* @__PURE__ */ React21.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, "\u{1F50D}"), /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React22.createElement(HStack, { spacing: 16, align: "center", style: styles16.defaultContent }, showIcon && /* @__PURE__ */ React22.createElement(HStack, { spacing: 8, align: "center" }, /* @__PURE__ */ React22.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, "\u{1F50D}"), /* @__PURE__ */ React22.createElement(
       Typography,
       {
         variant: "label",
         color: theme.colors["muted-foreground"]
       },
       "Filters"
-    )), filters.map((filter) => /* @__PURE__ */ React21.createElement(VStack, { key: filter.field, spacing: 4 }, /* @__PURE__ */ React21.createElement(
+    )), filters.map((filter) => /* @__PURE__ */ React22.createElement(VStack, { key: filter.field, spacing: 4 }, /* @__PURE__ */ React22.createElement(
       Typography,
       {
         variant: "label",
         color: theme.colors["muted-foreground"]
       },
       filter.label
-    ), /* @__PURE__ */ React21.createElement(
+    ), /* @__PURE__ */ React22.createElement(
       Select,
       {
         value: selectedValues[filter.field] || "all",
         onChange: (newValue) => handleFilterSelect(filter.field, newValue),
         options: buildSelectOptions(filter)
       }
-    ))), activeFilterCount > 0 && /* @__PURE__ */ React21.createElement(HStack, { spacing: 12, align: "center", style: styles16.clearSection }, /* @__PURE__ */ React21.createElement(Badge, { variant: "primary", size: "md" }, activeFilterCount, " active"), /* @__PURE__ */ React21.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear all")))
+    ))), activeFilterCount > 0 && /* @__PURE__ */ React22.createElement(HStack, { spacing: 12, align: "center", style: styles16.clearSection }, /* @__PURE__ */ React22.createElement(Badge, { variant: "primary", size: "md" }, activeFilterCount, " active"), /* @__PURE__ */ React22.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear all")))
   );
 };
 var styles16 = StyleSheet16.create({
@@ -2177,7 +2220,7 @@ var styles16 = StyleSheet16.create({
 FilterGroup.displayName = "FilterGroup";
 
 // src/components/molecules/Meter.tsx
-import React22, { useMemo as useMemo2, useCallback as useCallback2 } from "react";
+import React23, { useMemo as useMemo2, useCallback as useCallback2 } from "react";
 import { View as View20, StyleSheet as StyleSheet17, TouchableOpacity as TouchableOpacity13 } from "react-native";
 var getDefaultThresholds = (theme) => [
   { value: 30, color: theme.colors.error },
@@ -2243,21 +2286,21 @@ var Meter = ({
     return unit ? `${formatted}${unit}` : formatted;
   }, [value, unit]);
   if (isLoading) {
-    return /* @__PURE__ */ React22.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React22.createElement(LoadingState, { message: "Loading meter..." }));
+    return /* @__PURE__ */ React23.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React23.createElement(LoadingState, { message: "Loading meter..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React22.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React22.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React23.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React23.createElement(ErrorState, { message: error.message }));
   }
   if (variant === "segmented") {
     const activeSegments = Math.round(percentage / 100 * segments);
-    return /* @__PURE__ */ React22.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React22.createElement(VStack, { spacing: 8 }, (label || showValue) && /* @__PURE__ */ React22.createElement(HStack, { justify: "space-between", align: "center" }, label && /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React23.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React23.createElement(VStack, { spacing: 8 }, (label || showValue) && /* @__PURE__ */ React23.createElement(HStack, { justify: "space-between", align: "center" }, label && /* @__PURE__ */ React23.createElement(
       Typography,
       {
         variant: "caption",
         color: theme.colors["muted-foreground"]
       },
       label
-    ), showValue && /* @__PURE__ */ React22.createElement(Typography, { variant: "body", style: { fontWeight: "600" } }, displayValue)), /* @__PURE__ */ React22.createElement(HStack, { spacing: 4, style: styles17.segmentsContainer }, Array.from({ length: segments }).map((_, idx) => {
+    ), showValue && /* @__PURE__ */ React23.createElement(Typography, { variant: "body", style: { fontWeight: "600" } }, displayValue)), /* @__PURE__ */ React23.createElement(HStack, { spacing: 4, style: styles17.segmentsContainer }, Array.from({ length: segments }).map((_, idx) => {
       const isActive = idx < activeSegments;
       const segColor = isActive ? getColorForValue(
         (idx + 1) / segments * max,
@@ -2265,7 +2308,7 @@ var Meter = ({
         thresholds,
         theme
       ) : void 0;
-      return /* @__PURE__ */ React22.createElement(
+      return /* @__PURE__ */ React23.createElement(
         View20,
         {
           key: idx,
@@ -2277,7 +2320,7 @@ var Meter = ({
           ]
         }
       );
-    })), thresholds.some((t) => t.label) && /* @__PURE__ */ React22.createElement(HStack, { justify: "space-between", style: styles17.thresholdLabels }, thresholds.map((t, idx) => /* @__PURE__ */ React22.createElement(
+    })), thresholds.some((t) => t.label) && /* @__PURE__ */ React23.createElement(HStack, { justify: "space-between", style: styles17.thresholdLabels }, thresholds.map((t, idx) => /* @__PURE__ */ React23.createElement(
       Typography,
       {
         key: idx,
@@ -2285,7 +2328,7 @@ var Meter = ({
         color: theme.colors["muted-foreground"]
       },
       t.label || ""
-    ))), actions && actions.length > 0 && /* @__PURE__ */ React22.createElement(HStack, { spacing: 8, style: styles17.actionsContainer }, actions.map((action, idx) => /* @__PURE__ */ React22.createElement(TouchableOpacity13, { key: idx, onPress: onActionPress(action) }, /* @__PURE__ */ React22.createElement(
+    ))), actions && actions.length > 0 && /* @__PURE__ */ React23.createElement(HStack, { spacing: 8, style: styles17.actionsContainer }, actions.map((action, idx) => /* @__PURE__ */ React23.createElement(TouchableOpacity13, { key: idx, onPress: onActionPress(action) }, /* @__PURE__ */ React23.createElement(
       Badge,
       {
         variant: action.variant ?? "default",
@@ -2294,14 +2337,14 @@ var Meter = ({
       action.label
     ))))));
   }
-  return /* @__PURE__ */ React22.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React22.createElement(VStack, { spacing: 8 }, (label || showValue) && /* @__PURE__ */ React22.createElement(HStack, { justify: "space-between", align: "center" }, label && /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React23.createElement(VStack, { spacing: 8 }, (label || showValue) && /* @__PURE__ */ React23.createElement(HStack, { justify: "space-between", align: "center" }, label && /* @__PURE__ */ React23.createElement(
     Typography,
     {
       variant: "caption",
       color: theme.colors["muted-foreground"]
     },
     label
-  ), showValue && /* @__PURE__ */ React22.createElement(Typography, { variant: "body", style: { fontWeight: "600" } }, displayValue)), /* @__PURE__ */ React22.createElement(
+  ), showValue && /* @__PURE__ */ React23.createElement(Typography, { variant: "body", style: { fontWeight: "600" } }, displayValue)), /* @__PURE__ */ React23.createElement(
     View20,
     {
       style: [
@@ -2311,7 +2354,7 @@ var Meter = ({
         }
       ]
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement(
       View20,
       {
         style: [
@@ -2323,7 +2366,7 @@ var Meter = ({
         ]
       }
     )
-  ), /* @__PURE__ */ React22.createElement(HStack, { justify: "space-between", style: styles17.rangeLabels }, /* @__PURE__ */ React22.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, min, unit ? ` ${unit}` : ""), /* @__PURE__ */ React22.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, max, unit ? ` ${unit}` : "")), actions && actions.length > 0 && /* @__PURE__ */ React22.createElement(HStack, { spacing: 8, style: styles17.actionsContainer }, actions.map((action, idx) => /* @__PURE__ */ React22.createElement(TouchableOpacity13, { key: idx, onPress: onActionPress(action) }, /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(HStack, { justify: "space-between", style: styles17.rangeLabels }, /* @__PURE__ */ React23.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, min, unit ? ` ${unit}` : ""), /* @__PURE__ */ React23.createElement(Typography, { variant: "caption", color: theme.colors["muted-foreground"] }, max, unit ? ` ${unit}` : "")), actions && actions.length > 0 && /* @__PURE__ */ React23.createElement(HStack, { spacing: 8, style: styles17.actionsContainer }, actions.map((action, idx) => /* @__PURE__ */ React23.createElement(TouchableOpacity13, { key: idx, onPress: onActionPress(action) }, /* @__PURE__ */ React23.createElement(
     Badge,
     {
       variant: action.variant ?? "default",
@@ -2368,7 +2411,7 @@ var styles17 = StyleSheet17.create({
 Meter.displayName = "Meter";
 
 // src/components/molecules/Pagination.tsx
-import React23 from "react";
+import React24 from "react";
 import { View as View21, TouchableOpacity as TouchableOpacity14, StyleSheet as StyleSheet18 } from "react-native";
 var Pagination = ({
   currentPage,
@@ -2395,10 +2438,10 @@ var Pagination = ({
     onPageChange?.(page);
   };
   if (isLoading) {
-    return /* @__PURE__ */ React23.createElement(View21, { style: [styles18.container, style] }, /* @__PURE__ */ React23.createElement(LoadingState, { message: "Loading pages..." }));
+    return /* @__PURE__ */ React24.createElement(View21, { style: [styles18.container, style] }, /* @__PURE__ */ React24.createElement(LoadingState, { message: "Loading pages..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React23.createElement(View21, { style: [styles18.container, style] }, /* @__PURE__ */ React23.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React24.createElement(View21, { style: [styles18.container, style] }, /* @__PURE__ */ React24.createElement(ErrorState, { message: error.message }));
   }
   if (totalPages <= 1) {
     return null;
@@ -2419,7 +2462,7 @@ var Pagination = ({
   const visiblePages = getVisiblePages();
   const canGoPrev = currentPage > 1;
   const canGoNext = currentPage < totalPages;
-  return /* @__PURE__ */ React23.createElement(HStack, { spacing: 4, align: "center", justify: "center", style: [styles18.container, style || {}] }, showFirstLast && /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(HStack, { spacing: 4, align: "center", justify: "center", style: [styles18.container, style || {}] }, showFirstLast && /* @__PURE__ */ React24.createElement(
     Button,
     {
       variant: "ghost",
@@ -2428,7 +2471,7 @@ var Pagination = ({
       onPress: () => handlePageChange(1)
     },
     "<<"
-  ), /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React24.createElement(
     Button,
     {
       variant: "secondary",
@@ -2437,9 +2480,9 @@ var Pagination = ({
       onPress: () => handlePageChange(currentPage - 1)
     },
     prevLabel
-  ), visiblePages[0] > 1 && /* @__PURE__ */ React23.createElement(View21, { style: styles18.ellipsis }, /* @__PURE__ */ React23.createElement(Typography, { variant: "body", color: theme.colors["muted-foreground"] }, "...")), visiblePages.map((page) => {
+  ), visiblePages[0] > 1 && /* @__PURE__ */ React24.createElement(View21, { style: styles18.ellipsis }, /* @__PURE__ */ React24.createElement(Typography, { variant: "body", color: theme.colors["muted-foreground"] }, "...")), visiblePages.map((page) => {
     const isActive = page === currentPage;
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React24.createElement(
       TouchableOpacity14,
       {
         key: page,
@@ -2452,7 +2495,7 @@ var Pagination = ({
           }
         ]
       },
-      /* @__PURE__ */ React23.createElement(
+      /* @__PURE__ */ React24.createElement(
         Typography,
         {
           variant: "body",
@@ -2463,7 +2506,7 @@ var Pagination = ({
         page
       )
     );
-  }), visiblePages[visiblePages.length - 1] < totalPages && /* @__PURE__ */ React23.createElement(View21, { style: styles18.ellipsis }, /* @__PURE__ */ React23.createElement(Typography, { variant: "body", color: theme.colors["muted-foreground"] }, "...")), /* @__PURE__ */ React23.createElement(
+  }), visiblePages[visiblePages.length - 1] < totalPages && /* @__PURE__ */ React24.createElement(View21, { style: styles18.ellipsis }, /* @__PURE__ */ React24.createElement(Typography, { variant: "body", color: theme.colors["muted-foreground"] }, "...")), /* @__PURE__ */ React24.createElement(
     Button,
     {
       variant: "secondary",
@@ -2472,7 +2515,7 @@ var Pagination = ({
       onPress: () => handlePageChange(currentPage + 1)
     },
     nextLabel
-  ), showFirstLast && /* @__PURE__ */ React23.createElement(
+  ), showFirstLast && /* @__PURE__ */ React24.createElement(
     Button,
     {
       variant: "ghost",
@@ -2507,7 +2550,7 @@ var styles18 = StyleSheet18.create({
 Pagination.displayName = "Pagination";
 
 // src/components/molecules/MarkdownContent.tsx
-import React24 from "react";
+import React25 from "react";
 import { View as View22, StyleSheet as StyleSheet19 } from "react-native";
 var parseMarkdown = (content) => {
   const elements = [];
@@ -2643,14 +2686,14 @@ var renderInlineContent = (content, theme) => {
     if (earliestMatch) {
       if (earliestMatch.index > 0) {
         parts.push(
-          /* @__PURE__ */ React24.createElement(Typography, { key: key++, variant: "body" }, remaining.slice(0, earliestMatch.index))
+          /* @__PURE__ */ React25.createElement(Typography, { key: key++, variant: "body" }, remaining.slice(0, earliestMatch.index))
         );
       }
       const content2 = earliestMatch.match[1];
       switch (earliestMatch.type) {
         case "code":
           parts.push(
-            /* @__PURE__ */ React24.createElement(
+            /* @__PURE__ */ React25.createElement(
               Typography,
               {
                 key: key++,
@@ -2669,7 +2712,7 @@ var renderInlineContent = (content, theme) => {
           break;
         case "bold":
           parts.push(
-            /* @__PURE__ */ React24.createElement(
+            /* @__PURE__ */ React25.createElement(
               Typography,
               {
                 key: key++,
@@ -2682,7 +2725,7 @@ var renderInlineContent = (content, theme) => {
           break;
         case "italic":
           parts.push(
-            /* @__PURE__ */ React24.createElement(
+            /* @__PURE__ */ React25.createElement(
               Typography,
               {
                 key: key++,
@@ -2697,7 +2740,7 @@ var renderInlineContent = (content, theme) => {
       remaining = remaining.slice(earliestMatch.index + earliestMatch.match[0].length);
     } else {
       parts.push(
-        /* @__PURE__ */ React24.createElement(Typography, { key: key++, variant: "body" }, remaining)
+        /* @__PURE__ */ React25.createElement(Typography, { key: key++, variant: "body" }, remaining)
       );
       break;
     }
@@ -2712,12 +2755,12 @@ var MarkdownContent = ({
   padding = "md"
 }) => {
   const theme = useTheme();
-  const elements = React24.useMemo(() => parseMarkdown(content), [content]);
+  const elements = React25.useMemo(() => parseMarkdown(content), [content]);
   if (isLoading) {
-    return /* @__PURE__ */ React24.createElement(Card, { style: [styles19.container, style || {}] }, /* @__PURE__ */ React24.createElement(LoadingState, { message: "Loading content..." }));
+    return /* @__PURE__ */ React25.createElement(Card, { style: [styles19.container, style || {}] }, /* @__PURE__ */ React25.createElement(LoadingState, { message: "Loading content..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React24.createElement(Card, { style: [styles19.container, style || {}] }, /* @__PURE__ */ React24.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React25.createElement(Card, { style: [styles19.container, style || {}] }, /* @__PURE__ */ React25.createElement(ErrorState, { message: error.message }));
   }
   const paddingStyles = {
     none: { padding: 0 },
@@ -2736,7 +2779,7 @@ var MarkdownContent = ({
           5: "body",
           6: "body"
         };
-        return /* @__PURE__ */ React24.createElement(
+        return /* @__PURE__ */ React25.createElement(
           Typography,
           {
             key: index,
@@ -2749,9 +2792,9 @@ var MarkdownContent = ({
           element.content
         );
       case "paragraph":
-        return /* @__PURE__ */ React24.createElement(View22, { key: index, style: styles19.paragraph }, renderInlineContent(element.content, theme));
+        return /* @__PURE__ */ React25.createElement(View22, { key: index, style: styles19.paragraph }, renderInlineContent(element.content, theme));
       case "code":
-        return /* @__PURE__ */ React24.createElement(
+        return /* @__PURE__ */ React25.createElement(
           View22,
           {
             key: index,
@@ -2760,7 +2803,7 @@ var MarkdownContent = ({
               { backgroundColor: theme.colors.muted }
             ]
           },
-          element.language && /* @__PURE__ */ React24.createElement(
+          element.language && /* @__PURE__ */ React25.createElement(
             Typography,
             {
               variant: "caption",
@@ -2772,7 +2815,7 @@ var MarkdownContent = ({
             },
             element.language
           ),
-          /* @__PURE__ */ React24.createElement(
+          /* @__PURE__ */ React25.createElement(
             Typography,
             {
               variant: "body",
@@ -2785,7 +2828,7 @@ var MarkdownContent = ({
           )
         );
       case "blockquote":
-        return /* @__PURE__ */ React24.createElement(
+        return /* @__PURE__ */ React25.createElement(
           View22,
           {
             key: index,
@@ -2797,7 +2840,7 @@ var MarkdownContent = ({
               }
             ]
           },
-          /* @__PURE__ */ React24.createElement(
+          /* @__PURE__ */ React25.createElement(
             Typography,
             {
               variant: "body",
@@ -2807,7 +2850,7 @@ var MarkdownContent = ({
           )
         );
       case "list":
-        return /* @__PURE__ */ React24.createElement(View22, { key: index, style: styles19.list }, element.items.map((item, itemIndex) => /* @__PURE__ */ React24.createElement(View22, { key: itemIndex, style: styles19.listItem }, /* @__PURE__ */ React24.createElement(
+        return /* @__PURE__ */ React25.createElement(View22, { key: index, style: styles19.list }, element.items.map((item, itemIndex) => /* @__PURE__ */ React25.createElement(View22, { key: itemIndex, style: styles19.listItem }, /* @__PURE__ */ React25.createElement(
           Typography,
           {
             variant: "body",
@@ -2817,9 +2860,9 @@ var MarkdownContent = ({
             ]
           },
           element.ordered ? `${itemIndex + 1}.` : "\u2022"
-        ), /* @__PURE__ */ React24.createElement(View22, { style: styles19.listItemContent }, renderInlineContent(item, theme)))));
+        ), /* @__PURE__ */ React25.createElement(View22, { style: styles19.listItemContent }, renderInlineContent(item, theme)))));
       case "horizontalRule":
-        return /* @__PURE__ */ React24.createElement(
+        return /* @__PURE__ */ React25.createElement(
           View22,
           {
             key: index,
@@ -2833,7 +2876,7 @@ var MarkdownContent = ({
         return null;
     }
   };
-  return /* @__PURE__ */ React24.createElement(Card, { style: [styles19.container, style || {}], padding: "none" }, /* @__PURE__ */ React24.createElement(VStack, { spacing: 12, style: [styles19.content, paddingStyles[padding]] }, elements.map((element, index) => renderElement(element, index))));
+  return /* @__PURE__ */ React25.createElement(Card, { style: [styles19.container, style || {}], padding: "none" }, /* @__PURE__ */ React25.createElement(VStack, { spacing: 12, style: [styles19.content, paddingStyles[padding]] }, elements.map((element, index) => renderElement(element, index))));
 };
 var styles19 = StyleSheet19.create({
   container: {
@@ -2882,7 +2925,7 @@ var styles19 = StyleSheet19.create({
 MarkdownContent.displayName = "MarkdownContent";
 
 // src/components/molecules/WizardNavigation.tsx
-import React25 from "react";
+import React26 from "react";
 import {
   View as View23,
   StyleSheet as StyleSheet20
@@ -2935,13 +2978,13 @@ var WizardNavigation = ({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ React25.createElement(View23, { style: [styles20.container, style] }, /* @__PURE__ */ React25.createElement(LoadingState, { message: "Loading..." }));
+    return /* @__PURE__ */ React26.createElement(View23, { style: [styles20.container, style] }, /* @__PURE__ */ React26.createElement(LoadingState, { message: "Loading..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React25.createElement(View23, { style: [styles20.container, style] }, /* @__PURE__ */ React25.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React26.createElement(View23, { style: [styles20.container, style] }, /* @__PURE__ */ React26.createElement(ErrorState, { message: error.message }));
   }
   const visibleCustomActions = customActions?.filter((action) => !action.hidden) || [];
-  return /* @__PURE__ */ React25.createElement(HStack, { spacing: 12, justify: "space-between", style: [styles20.container, style] }, /* @__PURE__ */ React25.createElement(HStack, { spacing: 8 }, isFirstStep && showCancel || !isFirstStep ? /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(HStack, { spacing: 12, justify: "space-between", style: [styles20.container, style] }, /* @__PURE__ */ React26.createElement(HStack, { spacing: 8 }, isFirstStep && showCancel || !isFirstStep ? /* @__PURE__ */ React26.createElement(
     Button,
     {
       variant: "ghost",
@@ -2950,7 +2993,7 @@ var WizardNavigation = ({
       action: isFirstStep ? "WIZARD_CANCEL" : "WIZARD_BACK"
     },
     isFirstStep ? cancelLabel : backLabel
-  ) : null, visibleCustomActions.map((action, index) => /* @__PURE__ */ React25.createElement(
+  ) : null, visibleCustomActions.map((action, index) => /* @__PURE__ */ React26.createElement(
     Button,
     {
       key: `${action.label}-${index}`,
@@ -2960,7 +3003,7 @@ var WizardNavigation = ({
       action: action.event
     },
     action.label
-  ))), /* @__PURE__ */ React25.createElement(
+  ))), /* @__PURE__ */ React26.createElement(
     Button,
     {
       variant: "primary",
@@ -2980,7 +3023,7 @@ var styles20 = StyleSheet20.create({
 WizardNavigation.displayName = "WizardNavigation";
 
 // src/components/molecules/WizardProgress.tsx
-import React26 from "react";
+import React27 from "react";
 import {
   View as View24,
   TouchableOpacity as TouchableOpacity15,
@@ -3037,16 +3080,16 @@ var WizardProgress = ({
     }
   };
   if (isLoading) {
-    return /* @__PURE__ */ React26.createElement(View24, { style: [styles21.container, style] }, /* @__PURE__ */ React26.createElement(LoadingState, { message: "Loading..." }));
+    return /* @__PURE__ */ React27.createElement(View24, { style: [styles21.container, style] }, /* @__PURE__ */ React27.createElement(LoadingState, { message: "Loading..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React26.createElement(View24, { style: [styles21.container, style] }, /* @__PURE__ */ React26.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React27.createElement(View24, { style: [styles21.container, style] }, /* @__PURE__ */ React27.createElement(ErrorState, { message: error.message }));
   }
-  const renderDots = () => /* @__PURE__ */ React26.createElement(HStack, { spacing: 8, justify: "center", style: styles21.dotsContainer }, steps.map((step, index) => {
+  const renderDots = () => /* @__PURE__ */ React27.createElement(HStack, { spacing: 8, justify: "center", style: styles21.dotsContainer }, steps.map((step, index) => {
     const status = getStepStatus(index);
     const colors = getStepColor(status);
     const canPress = allowNavigation && index <= currentStep;
-    return /* @__PURE__ */ React26.createElement(
+    return /* @__PURE__ */ React27.createElement(
       TouchableOpacity15,
       {
         key: step.id,
@@ -3062,14 +3105,14 @@ var WizardProgress = ({
         ],
         activeOpacity: 0.8
       },
-      status === "completed" ? /* @__PURE__ */ React26.createElement(Typography, { variant: "caption", style: { color: colors.text, fontWeight: "700" } }, "\u2713") : /* @__PURE__ */ React26.createElement(View24, { style: [styles21.dotInner, { backgroundColor: colors.background }] })
+      status === "completed" ? /* @__PURE__ */ React27.createElement(Typography, { variant: "caption", style: { color: colors.text, fontWeight: "700" } }, "\u2713") : /* @__PURE__ */ React27.createElement(View24, { style: [styles21.dotInner, { backgroundColor: colors.background }] })
     );
   }));
-  const renderNumbers = () => /* @__PURE__ */ React26.createElement(HStack, { spacing: 12, justify: "center", style: styles21.numbersContainer }, steps.map((step, index) => {
+  const renderNumbers = () => /* @__PURE__ */ React27.createElement(HStack, { spacing: 12, justify: "center", style: styles21.numbersContainer }, steps.map((step, index) => {
     const status = getStepStatus(index);
     const colors = getStepColor(status);
     const canPress = allowNavigation && index <= currentStep;
-    return /* @__PURE__ */ React26.createElement(
+    return /* @__PURE__ */ React27.createElement(
       TouchableOpacity15,
       {
         key: step.id,
@@ -3078,7 +3121,7 @@ var WizardProgress = ({
         activeOpacity: 0.8,
         style: styles21.numberStepContainer
       },
-      /* @__PURE__ */ React26.createElement(VStack, { align: "center", spacing: 4 }, /* @__PURE__ */ React26.createElement(
+      /* @__PURE__ */ React27.createElement(VStack, { align: "center", spacing: 4 }, /* @__PURE__ */ React27.createElement(
         View24,
         {
           style: [
@@ -3090,8 +3133,8 @@ var WizardProgress = ({
             canPress && styles21.clickableNumber
           ]
         },
-        /* @__PURE__ */ React26.createElement(Typography, { variant: "body", style: { color: colors.text, fontWeight: "600" } }, status === "completed" ? "\u2713" : index + 1)
-      ), showLabels && /* @__PURE__ */ React26.createElement(
+        /* @__PURE__ */ React27.createElement(Typography, { variant: "body", style: { color: colors.text, fontWeight: "600" } }, status === "completed" ? "\u2713" : index + 1)
+      ), showLabels && /* @__PURE__ */ React27.createElement(
         Typography,
         {
           variant: "caption",
@@ -3104,7 +3147,7 @@ var WizardProgress = ({
           numberOfLines: 1
         },
         step.title
-      ), showDescriptions && step.description && /* @__PURE__ */ React26.createElement(
+      ), showDescriptions && step.description && /* @__PURE__ */ React27.createElement(
         Typography,
         {
           variant: "caption",
@@ -3117,7 +3160,7 @@ var WizardProgress = ({
           numberOfLines: 1
         },
         step.description
-      ), step.optional && /* @__PURE__ */ React26.createElement(
+      ), step.optional && /* @__PURE__ */ React27.createElement(
         Typography,
         {
           variant: "caption",
@@ -3131,14 +3174,14 @@ var WizardProgress = ({
       ))
     );
   }));
-  const renderBar = () => /* @__PURE__ */ React26.createElement(VStack, { spacing: 8, style: styles21.barContainer }, /* @__PURE__ */ React26.createElement(ProgressBar, { progress, showLabel: false, size: "md" }), showLabels && /* @__PURE__ */ React26.createElement(HStack, { justify: "space-between" }, /* @__PURE__ */ React26.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, "Step ", currentStep + 1, " of ", steps.length), /* @__PURE__ */ React26.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, Math.round(progress), "%")), showLabels && /* @__PURE__ */ React26.createElement(
+  const renderBar = () => /* @__PURE__ */ React27.createElement(VStack, { spacing: 8, style: styles21.barContainer }, /* @__PURE__ */ React27.createElement(ProgressBar, { progress, showLabel: false, size: "md" }), showLabels && /* @__PURE__ */ React27.createElement(HStack, { justify: "space-between" }, /* @__PURE__ */ React27.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, "Step ", currentStep + 1, " of ", steps.length), /* @__PURE__ */ React27.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, Math.round(progress), "%")), showLabels && /* @__PURE__ */ React27.createElement(
     Typography,
     {
       variant: "body",
       style: { color: theme.colors.foreground, textAlign: "center", marginTop: 4 }
     },
     steps[currentStep]?.title
-  ), showDescriptions && steps[currentStep]?.description && /* @__PURE__ */ React26.createElement(
+  ), showDescriptions && steps[currentStep]?.description && /* @__PURE__ */ React27.createElement(
     Typography,
     {
       variant: "caption",
@@ -3146,7 +3189,7 @@ var WizardProgress = ({
     },
     steps[currentStep].description
   ));
-  return /* @__PURE__ */ React26.createElement(View24, { style: [styles21.container, style] }, variant === "dots" && renderDots(), variant === "numbers" && renderNumbers(), variant === "bar" && renderBar());
+  return /* @__PURE__ */ React27.createElement(View24, { style: [styles21.container, style] }, variant === "dots" && renderDots(), variant === "numbers" && renderNumbers(), variant === "bar" && renderBar());
 };
 var styles21 = StyleSheet21.create({
   container: {
@@ -3196,7 +3239,7 @@ var styles21 = StyleSheet21.create({
 WizardProgress.displayName = "WizardProgress";
 
 // src/components/molecules/QuizBlock.tsx
-import React27 from "react";
+import React28 from "react";
 import {
   View as View25,
   TouchableOpacity as TouchableOpacity16,
@@ -3223,12 +3266,12 @@ var QuizBlock = ({
 }) => {
   const theme = useTheme();
   const eventBus = useEventBus();
-  const [selected, setSelected] = React27.useState(selectedValues);
-  const [isAnswered, setIsAnswered] = React27.useState(false);
-  React27.useEffect(() => {
+  const [selected, setSelected] = React28.useState(selectedValues);
+  const [isAnswered, setIsAnswered] = React28.useState(false);
+  React28.useEffect(() => {
     setSelected(selectedValues);
   }, [selectedValues]);
-  const shuffledOptions = React27.useMemo(() => {
+  const shuffledOptions = React28.useMemo(() => {
     if (!shuffle) return options;
     return [...options].sort(() => Math.random() - 0.5);
   }, [options, shuffle]);
@@ -3298,15 +3341,15 @@ var QuizBlock = ({
     return option?.correct;
   }) && selected.length === options.filter((o) => o.correct).length;
   if (isLoading) {
-    return /* @__PURE__ */ React27.createElement(View25, { style: [styles22.container, style] }, /* @__PURE__ */ React27.createElement(LoadingState, { message: "Loading question..." }));
+    return /* @__PURE__ */ React28.createElement(View25, { style: [styles22.container, style] }, /* @__PURE__ */ React28.createElement(LoadingState, { message: "Loading question..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React27.createElement(View25, { style: [styles22.container, style] }, /* @__PURE__ */ React27.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React28.createElement(View25, { style: [styles22.container, style] }, /* @__PURE__ */ React28.createElement(ErrorState, { message: error.message }));
   }
-  return /* @__PURE__ */ React27.createElement(Card, { style: [styles22.container, style], padding: "lg" }, /* @__PURE__ */ React27.createElement(VStack, { spacing: 16 }, /* @__PURE__ */ React27.createElement(HStack, { justify: "space-between", align: "center" }, (questionNumber !== void 0 || category) && /* @__PURE__ */ React27.createElement(HStack, { spacing: 8, align: "center" }, questionNumber !== void 0 && totalQuestions !== void 0 && /* @__PURE__ */ React27.createElement(Badge, { variant: "secondary", size: "sm" }, questionNumber, " / ", totalQuestions), category && /* @__PURE__ */ React27.createElement(Badge, { variant: "default", size: "sm" }, category)), difficulty && /* @__PURE__ */ React27.createElement(Badge, { variant: getDifficultyColor(), size: "sm" }, difficulty)), /* @__PURE__ */ React27.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, question), allowMultiple && /* @__PURE__ */ React27.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, "Select all that apply"), /* @__PURE__ */ React27.createElement(VStack, { spacing: 8 }, shuffledOptions.map((option) => {
+  return /* @__PURE__ */ React28.createElement(Card, { style: [styles22.container, style], padding: "lg" }, /* @__PURE__ */ React28.createElement(VStack, { spacing: 16 }, /* @__PURE__ */ React28.createElement(HStack, { justify: "space-between", align: "center" }, (questionNumber !== void 0 || category) && /* @__PURE__ */ React28.createElement(HStack, { spacing: 8, align: "center" }, questionNumber !== void 0 && totalQuestions !== void 0 && /* @__PURE__ */ React28.createElement(Badge, { variant: "secondary", size: "sm" }, questionNumber, " / ", totalQuestions), category && /* @__PURE__ */ React28.createElement(Badge, { variant: "default", size: "sm" }, category)), difficulty && /* @__PURE__ */ React28.createElement(Badge, { variant: getDifficultyColor(), size: "sm" }, difficulty)), /* @__PURE__ */ React28.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, question), allowMultiple && /* @__PURE__ */ React28.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, "Select all that apply"), /* @__PURE__ */ React28.createElement(VStack, { spacing: 8 }, shuffledOptions.map((option) => {
     const style2 = getOptionStyle(option);
     const isSelected = selected.includes(option.value);
-    return /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React28.createElement(
       TouchableOpacity16,
       {
         key: option.id,
@@ -3320,7 +3363,7 @@ var QuizBlock = ({
           }
         ]
       },
-      /* @__PURE__ */ React27.createElement(HStack, { spacing: 12, align: "center" }, /* @__PURE__ */ React27.createElement(
+      /* @__PURE__ */ React28.createElement(HStack, { spacing: 12, align: "center" }, /* @__PURE__ */ React28.createElement(
         View25,
         {
           style: [
@@ -3332,10 +3375,10 @@ var QuizBlock = ({
             allowMultiple ? styles22.checkboxSquare : styles22.checkboxCircle
           ]
         },
-        isSelected && /* @__PURE__ */ React27.createElement(Typography, { variant: "caption", style: { color: style2.backgroundColor, fontWeight: "700" } }, "\u2713")
-      ), /* @__PURE__ */ React27.createElement(Typography, { variant: "body", style: { color: style2.textColor, flex: 1 } }, option.label), showCorrectAnswer && isAnswered && option.correct && /* @__PURE__ */ React27.createElement(Badge, { variant: "success", size: "sm" }, "Correct"))
+        isSelected && /* @__PURE__ */ React28.createElement(Typography, { variant: "caption", style: { color: style2.backgroundColor, fontWeight: "700" } }, "\u2713")
+      ), /* @__PURE__ */ React28.createElement(Typography, { variant: "body", style: { color: style2.textColor, flex: 1 } }, option.label), showCorrectAnswer && isAnswered && option.correct && /* @__PURE__ */ React28.createElement(Badge, { variant: "success", size: "sm" }, "Correct"))
     );
-  })), showCorrectAnswer && isAnswered && /* @__PURE__ */ React27.createElement(View25, { style: styles22.resultContainer }, /* @__PURE__ */ React27.createElement(Badge, { variant: isCorrect ? "success" : "error", size: "md" }, isCorrect ? "Correct!" : "Incorrect")), (showExplanation || showCorrectAnswer && isAnswered) && (explanation || options.some((o) => o.explanation && selected.includes(o.value))) && /* @__PURE__ */ React27.createElement(View25, { style: [styles22.explanationContainer, { backgroundColor: theme.colors.muted }] }, /* @__PURE__ */ React27.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, explanation || options.find((o) => o.explanation && selected.includes(o.value))?.explanation))));
+  })), showCorrectAnswer && isAnswered && /* @__PURE__ */ React28.createElement(View25, { style: styles22.resultContainer }, /* @__PURE__ */ React28.createElement(Badge, { variant: isCorrect ? "success" : "error", size: "md" }, isCorrect ? "Correct!" : "Incorrect")), (showExplanation || showCorrectAnswer && isAnswered) && (explanation || options.some((o) => o.explanation && selected.includes(o.value))) && /* @__PURE__ */ React28.createElement(View25, { style: [styles22.explanationContainer, { backgroundColor: theme.colors.muted }] }, /* @__PURE__ */ React28.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, explanation || options.find((o) => o.explanation && selected.includes(o.value))?.explanation))));
 };
 var styles22 = StyleSheet22.create({
   container: {
@@ -3372,7 +3415,7 @@ var styles22 = StyleSheet22.create({
 QuizBlock.displayName = "QuizBlock";
 
 // src/components/molecules/game/ActionButtons.tsx
-import React28, { useState as useState6, useCallback as useCallback3 } from "react";
+import React29, { useState as useState6, useCallback as useCallback3 } from "react";
 import { View as View26, StyleSheet as StyleSheet23 } from "react-native";
 var sizeMap = {
   sm: "sm",
@@ -3413,7 +3456,7 @@ var ActionButtons = ({
   const buttonSize = sizeMap[size] ?? "md";
   if (layout === "diamond" && buttons.length === 4) {
     const [top, right, bottom, left] = buttons;
-    return /* @__PURE__ */ React28.createElement(View26, { style: [styles23.diamondContainer, style] }, /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondRow }, /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondEmpty }), /* @__PURE__ */ React28.createElement(
+    return /* @__PURE__ */ React29.createElement(View26, { style: [styles23.diamondContainer, style] }, /* @__PURE__ */ React29.createElement(View26, { style: styles23.diamondRow }, /* @__PURE__ */ React29.createElement(View26, { style: styles23.diamondEmpty }), /* @__PURE__ */ React29.createElement(
       ControlButton,
       {
         icon: top.icon,
@@ -3425,7 +3468,7 @@ var ActionButtons = ({
         onRelease: () => handleRelease(top.id),
         disabled
       }
-    ), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondEmpty })), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondRow }, /* @__PURE__ */ React28.createElement(
+    ), /* @__PURE__ */ React29.createElement(View26, { style: styles23.diamondEmpty })), /* @__PURE__ */ React29.createElement(View26, { style: styles23.diamondRow }, /* @__PURE__ */ React29.createElement(
       ControlButton,
       {
         icon: left.icon,
@@ -3437,7 +3480,7 @@ var ActionButtons = ({
         onRelease: () => handleRelease(left.id),
         disabled
       }
-    ), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondCenter }), /* @__PURE__ */ React28.createElement(
+    ), /* @__PURE__ */ React29.createElement(View26, { style: styles23.diamondCenter }), /* @__PURE__ */ React29.createElement(
       ControlButton,
       {
         icon: right.icon,
@@ -3449,7 +3492,7 @@ var ActionButtons = ({
         onRelease: () => handleRelease(right.id),
         disabled
       }
-    )), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondRow }, /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondEmpty }), /* @__PURE__ */ React28.createElement(
+    )), /* @__PURE__ */ React29.createElement(View26, { style: styles23.diamondRow }, /* @__PURE__ */ React29.createElement(View26, { style: styles23.diamondEmpty }), /* @__PURE__ */ React29.createElement(
       ControlButton,
       {
         icon: bottom.icon,
@@ -3461,10 +3504,10 @@ var ActionButtons = ({
         onRelease: () => handleRelease(bottom.id),
         disabled
       }
-    ), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondEmpty })));
+    ), /* @__PURE__ */ React29.createElement(View26, { style: styles23.diamondEmpty })));
   }
   const containerStyle = layout === "vertical" ? styles23.verticalContainer : styles23.horizontalContainer;
-  return /* @__PURE__ */ React28.createElement(View26, { style: [containerStyle, style] }, buttons.map((button) => /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(View26, { style: [containerStyle, style] }, buttons.map((button) => /* @__PURE__ */ React29.createElement(
     ControlButton,
     {
       key: button.id,
@@ -3513,7 +3556,7 @@ var styles23 = StyleSheet23.create({
 ActionButtons.displayName = "ActionButtons";
 
 // src/components/molecules/game/DPad.tsx
-import React29, { useState as useState7, useCallback as useCallback4 } from "react";
+import React30, { useState as useState7, useCallback as useCallback4 } from "react";
 import { View as View27, StyleSheet as StyleSheet24 } from "react-native";
 var sizeMap2 = {
   sm: { button: "sm", containerWidth: 112 },
@@ -3558,7 +3601,7 @@ var DPad = ({
     },
     [directionEvent, eventBus, onDirection]
   );
-  const createButton = (direction) => /* @__PURE__ */ React29.createElement(
+  const createButton = (direction) => /* @__PURE__ */ React30.createElement(
     ControlButton,
     {
       key: direction,
@@ -3571,7 +3614,7 @@ var DPad = ({
       disabled
     }
   );
-  return /* @__PURE__ */ React29.createElement(View27, { style: [styles24.container, { width: sizes.containerWidth }, style] }, /* @__PURE__ */ React29.createElement(View27, { style: styles24.row }, /* @__PURE__ */ React29.createElement(View27, { style: styles24.empty }), createButton("up"), /* @__PURE__ */ React29.createElement(View27, { style: styles24.empty })), /* @__PURE__ */ React29.createElement(View27, { style: styles24.row }, createButton("left"), /* @__PURE__ */ React29.createElement(View27, { style: styles24.center }, /* @__PURE__ */ React29.createElement(View27, { style: styles24.centerDot })), createButton("right")), /* @__PURE__ */ React29.createElement(View27, { style: styles24.row }, /* @__PURE__ */ React29.createElement(View27, { style: styles24.empty }), createButton("down"), /* @__PURE__ */ React29.createElement(View27, { style: styles24.empty })));
+  return /* @__PURE__ */ React30.createElement(View27, { style: [styles24.container, { width: sizes.containerWidth }, style] }, /* @__PURE__ */ React30.createElement(View27, { style: styles24.row }, /* @__PURE__ */ React30.createElement(View27, { style: styles24.empty }), createButton("up"), /* @__PURE__ */ React30.createElement(View27, { style: styles24.empty })), /* @__PURE__ */ React30.createElement(View27, { style: styles24.row }, createButton("left"), /* @__PURE__ */ React30.createElement(View27, { style: styles24.center }, /* @__PURE__ */ React30.createElement(View27, { style: styles24.centerDot })), createButton("right")), /* @__PURE__ */ React30.createElement(View27, { style: styles24.row }, /* @__PURE__ */ React30.createElement(View27, { style: styles24.empty }), createButton("down"), /* @__PURE__ */ React30.createElement(View27, { style: styles24.empty })));
 };
 var styles24 = StyleSheet24.create({
   container: {
@@ -3605,7 +3648,7 @@ var styles24 = StyleSheet24.create({
 DPad.displayName = "DPad";
 
 // src/components/molecules/RepeatableFormSection.tsx
-import React30, { useState as useState8, useCallback as useCallback5 } from "react";
+import React31, { useState as useState8, useCallback as useCallback5 } from "react";
 import { View as View28, StyleSheet as StyleSheet25 } from "react-native";
 var RepeatableFormSection = ({
   style,
@@ -3686,12 +3729,12 @@ var RepeatableFormSection = ({
   const canAdd = items.length < maxItems;
   const canRemove = items.length > minItems;
   if (isLoading) {
-    return /* @__PURE__ */ React30.createElement(View28, { style: { ...styles25.container, ...style || {} } }, /* @__PURE__ */ React30.createElement(LoadingState, { message: "Loading section..." }));
+    return /* @__PURE__ */ React31.createElement(View28, { style: { ...styles25.container, ...style || {} } }, /* @__PURE__ */ React31.createElement(LoadingState, { message: "Loading section..." }));
   }
   if (error) {
-    return /* @__PURE__ */ React30.createElement(View28, { style: { ...styles25.container, ...style || {} } }, /* @__PURE__ */ React30.createElement(ErrorState, { message: error.message }));
+    return /* @__PURE__ */ React31.createElement(View28, { style: { ...styles25.container, ...style || {} } }, /* @__PURE__ */ React31.createElement(ErrorState, { message: error.message }));
   }
-  return /* @__PURE__ */ React30.createElement(Card, { style: { ...styles25.container, ...style || {} }, padding: "lg" }, /* @__PURE__ */ React30.createElement(VStack, { spacing: 24 }, (title || description) && /* @__PURE__ */ React30.createElement(VStack, { spacing: 4 }, title && /* @__PURE__ */ React30.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, title), description && /* @__PURE__ */ React30.createElement(Typography, { variant: "body", color: theme.colors["muted-foreground"] }, description)), items.length === 0 ? /* @__PURE__ */ React30.createElement(EmptyState, { message: "No items yet. Click add to create one." }) : /* @__PURE__ */ React30.createElement(VStack, { spacing: 16 }, items.map((item, index) => /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(Card, { style: { ...styles25.container, ...style || {} }, padding: "lg" }, /* @__PURE__ */ React31.createElement(VStack, { spacing: 24 }, (title || description) && /* @__PURE__ */ React31.createElement(VStack, { spacing: 4 }, title && /* @__PURE__ */ React31.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, title), description && /* @__PURE__ */ React31.createElement(Typography, { variant: "body", color: theme.colors["muted-foreground"] }, description)), items.length === 0 ? /* @__PURE__ */ React31.createElement(EmptyState, { message: "No items yet. Click add to create one." }) : /* @__PURE__ */ React31.createElement(VStack, { spacing: 16 }, items.map((item, index) => /* @__PURE__ */ React31.createElement(
     View28,
     {
       key: item.id,
@@ -3700,7 +3743,7 @@ var RepeatableFormSection = ({
         borderColor: theme.colors.border
       }
     },
-    /* @__PURE__ */ React30.createElement(VStack, { spacing: 12 }, /* @__PURE__ */ React30.createElement(HStack, { justify: "space-between", align: "center" }, /* @__PURE__ */ React30.createElement(Typography, { variant: "label", color: theme.colors["muted-foreground"] }, "Item ", index + 1), canRemove && /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React31.createElement(VStack, { spacing: 12 }, /* @__PURE__ */ React31.createElement(HStack, { justify: "space-between", align: "center" }, /* @__PURE__ */ React31.createElement(Typography, { variant: "label", color: theme.colors["muted-foreground"] }, "Item ", index + 1), canRemove && /* @__PURE__ */ React31.createElement(
       Button,
       {
         variant: "ghost",
@@ -3720,7 +3763,7 @@ var RepeatableFormSection = ({
       remove: () => handleRemoveItem(index),
       update: (data) => handleUpdateItem(index, data)
     }))
-  ))), canAdd && /* @__PURE__ */ React30.createElement(
+  ))), canAdd && /* @__PURE__ */ React31.createElement(
     Button,
     {
       variant: "secondary",
@@ -3733,7 +3776,7 @@ var RepeatableFormSection = ({
     },
     "+ ",
     addButtonLabel
-  ), /* @__PURE__ */ React30.createElement(
+  ), /* @__PURE__ */ React31.createElement(
     Typography,
     {
       variant: "caption",
@@ -3758,223 +3801,1692 @@ var styles25 = StyleSheet25.create({
 });
 RepeatableFormSection.displayName = "RepeatableFormSection";
 
-// src/components/molecules/ScaledDiagram.tsx
-import React31, { useRef as useRef4, useState as useState9, useCallback as useCallback6 } from "react";
-import {
-  View as View29,
-  StyleSheet as StyleSheet26,
-  Animated as Animated4,
-  PanResponder,
-  Dimensions as Dimensions3,
-  TouchableOpacity as TouchableOpacity17
-} from "react-native";
-var { width: SCREEN_WIDTH2 } = Dimensions3.get("window");
-var ScaledDiagram = ({
+// src/components/molecules/NumberStepper.tsx
+import React32, { useState as useState9 } from "react";
+import { Pressable, StyleSheet as StyleSheet26 } from "react-native";
+var NumberStepper = ({
+  value: controlledValue,
+  min = 0,
+  max = 99,
+  step = 1,
+  action,
+  actionPayload,
+  onChange,
+  disabled = false,
+  label,
   style,
   isLoading,
-  error,
-  entity,
-  children,
-  contentWidth = 800,
-  contentHeight = 600,
-  width = SCREEN_WIDTH2 - 32,
-  height = 400,
-  initialScale = 1,
-  minScale = 0.5,
-  maxScale = 3,
-  enablePan = true,
-  enableZoom = true,
-  showControls = true,
-  title,
-  enableDoubleTap = true,
-  eventPrefix = "DIAGRAM"
+  error
 }) => {
   const theme = useTheme();
   const eventBus = useEventBus();
-  const scale = useRef4(new Animated4.Value(initialScale)).current;
-  const translateX = useRef4(new Animated4.Value(0)).current;
-  const translateY = useRef4(new Animated4.Value(0)).current;
-  const [currentScale, setCurrentScale] = useState9(initialScale);
-  const lastTranslate = useRef4({ x: 0, y: 0 });
-  const clamp = useCallback6((value, min, max) => {
-    return Math.min(Math.max(value, min), max);
-  }, []);
-  const getBounds = useCallback6((newScale) => {
-    const scaledWidth = contentWidth * newScale;
-    const scaledHeight = contentHeight * newScale;
-    const maxX = Math.max(0, (scaledWidth - width) / 2);
-    const maxY = Math.max(0, (scaledHeight - height) / 2);
-    return { maxX, maxY };
-  }, [contentWidth, contentHeight, width, height]);
-  const handleZoomIn = useCallback6(() => {
-    if (!enableZoom) return;
-    const newScale = clamp(currentScale * 1.25, minScale, maxScale);
-    setCurrentScale(newScale);
-    Animated4.spring(scale, {
-      toValue: newScale,
-      useNativeDriver: true,
-      friction: 8
-    }).start();
-    eventBus.emit(`UI:${eventPrefix}_ZOOM_IN`, {
-      entity,
-      scale: newScale
-    });
-  }, [currentScale, minScale, maxScale, enableZoom, entity, eventPrefix, scale, eventBus, clamp]);
-  const handleZoomOut = useCallback6(() => {
-    if (!enableZoom) return;
-    const newScale = clamp(currentScale / 1.25, minScale, maxScale);
-    setCurrentScale(newScale);
-    if (newScale <= initialScale) {
-      lastTranslate.current = { x: 0, y: 0 };
-      Animated4.parallel([
-        Animated4.spring(translateX, {
-          toValue: 0,
-          useNativeDriver: true,
-          friction: 8
-        }),
-        Animated4.spring(translateY, {
-          toValue: 0,
-          useNativeDriver: true,
-          friction: 8
-        })
-      ]).start();
-    }
-    Animated4.spring(scale, {
-      toValue: newScale,
-      useNativeDriver: true,
-      friction: 8
-    }).start();
-    eventBus.emit(`UI:${eventPrefix}_ZOOM_OUT`, {
-      entity,
-      scale: newScale
-    });
-  }, [currentScale, minScale, maxScale, initialScale, enableZoom, entity, eventPrefix, scale, translateX, translateY, eventBus, clamp]);
-  const handleReset = useCallback6(() => {
-    setCurrentScale(initialScale);
-    lastTranslate.current = { x: 0, y: 0 };
-    Animated4.parallel([
-      Animated4.spring(scale, {
-        toValue: initialScale,
-        useNativeDriver: true,
-        friction: 8
-      }),
-      Animated4.spring(translateX, {
-        toValue: 0,
-        useNativeDriver: true,
-        friction: 8
-      }),
-      Animated4.spring(translateY, {
-        toValue: 0,
-        useNativeDriver: true,
-        friction: 8
-      })
-    ]).start();
-    eventBus.emit(`UI:${eventPrefix}_RESET`, {
-      entity,
-      scale: initialScale
-    });
-  }, [initialScale, entity, eventPrefix, scale, translateX, translateY, eventBus]);
-  const handleDoubleTap = useCallback6(() => {
-    if (!enableDoubleTap) return;
-    if (currentScale > initialScale) {
-      handleReset();
-    } else {
-      const newScale = clamp(currentScale * 2, minScale, maxScale);
-      setCurrentScale(newScale);
-      Animated4.spring(scale, {
-        toValue: newScale,
-        useNativeDriver: true,
-        friction: 8
-      }).start();
+  const [internalValue, setInternalValue] = useState9(controlledValue ?? min);
+  const currentValue = controlledValue ?? internalValue;
+  if (isLoading) return /* @__PURE__ */ React32.createElement(LoadingState, { message: "Loading..." });
+  if (error) return /* @__PURE__ */ React32.createElement(ErrorState, { message: error.message });
+  const handleChange = (newValue) => {
+    const clamped = Math.max(min, Math.min(max, newValue));
+    setInternalValue(clamped);
+    onChange?.(clamped);
+    if (action) {
+      eventBus.emit(`UI:${action}`, { ...actionPayload, value: clamped });
     }
-  }, [currentScale, initialScale, enableDoubleTap, minScale, maxScale, handleReset, scale, clamp]);
-  const panResponder = useRef4(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => enablePan,
-      onMoveShouldSetPanResponder: () => enablePan && currentScale > 1,
-      onPanResponderGrant: () => {
-        lastTranslate.current = {
-          x: 0,
-          y: 0
-        };
-      },
-      onPanResponderMove: (_event, gestureState) => {
-        if (!enablePan || currentScale <= 1) return;
-        const { maxX, maxY } = getBounds(currentScale);
-        const newX = clamp(
-          gestureState.dx,
-          -maxX - lastTranslate.current.x,
-          maxX - lastTranslate.current.x
-        );
-        const newY = clamp(
-          gestureState.dy,
-          -maxY - lastTranslate.current.y,
-          maxY - lastTranslate.current.y
-        );
-        translateX.setValue(newX);
-        translateY.setValue(newY);
-      },
-      onPanResponderRelease: (_event, gestureState) => {
-        if (!enablePan || currentScale <= 1) return;
-        const { maxX, maxY } = getBounds(currentScale);
-        lastTranslate.current.x = clamp(
-          lastTranslate.current.x + gestureState.dx,
-          -maxX,
-          maxX
-        );
-        lastTranslate.current.y = clamp(
-          lastTranslate.current.y + gestureState.dy,
-          -maxY,
-          maxY
-        );
-        translateX.setOffset(lastTranslate.current.x);
-        translateX.setValue(0);
-        translateY.setOffset(lastTranslate.current.y);
-        translateY.setValue(0);
-        eventBus.emit(`UI:${eventPrefix}_PAN`, {
-          entity,
-          x: lastTranslate.current.x,
-          y: lastTranslate.current.y,
-          scale: currentScale
-        });
-      }
-    })
-  ).current;
-  if (isLoading) {
-    return /* @__PURE__ */ React31.createElement(Card, { style: { ...styles26.container, width, height, ...style || {} }, padding: "lg" }, /* @__PURE__ */ React31.createElement(LoadingState, { message: "Loading diagram..." }));
-  }
-  if (error) {
-    return /* @__PURE__ */ React31.createElement(Card, { style: { ...styles26.container, width, height, ...style || {} }, padding: "lg" }, /* @__PURE__ */ React31.createElement(ErrorState, { message: error.message }));
-  }
-  if (!children) {
-    return /* @__PURE__ */ React31.createElement(Card, { style: { ...styles26.container, width, height, ...style || {} }, padding: "lg" }, /* @__PURE__ */ React31.createElement(EmptyState, { message: "No diagram content" }));
-  }
-  const animatedStyle = {
-    transform: [
-      { scale },
-      { translateX },
-      { translateY }
-    ]
   };
-  return /* @__PURE__ */ React31.createElement(Card, { style: { ...styles26.container, width, ...style || {} }, padding: "md" }, /* @__PURE__ */ React31.createElement(VStack, { spacing: 12 }, (title || showControls) && /* @__PURE__ */ React31.createElement(HStack, { justify: "space-between", align: "center" }, title && /* @__PURE__ */ React31.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, title), showControls && /* @__PURE__ */ React31.createElement(HStack, { spacing: 8 }, /* @__PURE__ */ React31.createElement(
-    Button,
+  const canDecrement = currentValue > min;
+  const canIncrement = currentValue < max;
+  return /* @__PURE__ */ React32.createElement(HStack, { spacing: theme.spacing[3], align: "center", style }, label && /* @__PURE__ */ React32.createElement(Typography, { variant: "label", style: { color: theme.colors.foreground, flex: 1 } }, label), /* @__PURE__ */ React32.createElement(HStack, { spacing: 0, align: "center" }, /* @__PURE__ */ React32.createElement(
+    Pressable,
     {
-      variant: "ghost",
-      size: "sm",
-      onPress: handleZoomOut,
-      disabled: !enableZoom || currentScale <= minScale
+      onPress: () => handleChange(currentValue - step),
+      disabled: disabled || !canDecrement,
+      style: [
+        styles26.button,
+        {
+          backgroundColor: theme.colors.secondary,
+          borderTopLeftRadius: theme.borderRadius.md,
+          borderBottomLeftRadius: theme.borderRadius.md,
+          borderWidth: 1,
+          borderColor: theme.colors.border
+        },
+        (disabled || !canDecrement) && styles26.buttonDisabled
+      ]
     },
-    "\u2212"
-  ), /* @__PURE__ */ React31.createElement(Typography, { variant: "body", style: { minWidth: 50, textAlign: "center" } }, Math.round(currentScale * 100), "%"), /* @__PURE__ */ React31.createElement(
-    Button,
+    /* @__PURE__ */ React32.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground, fontWeight: "600" } }, "\u2212")
+  ), /* @__PURE__ */ React32.createElement(
+    Pressable,
     {
-      variant: "ghost",
+      style: [
+        styles26.valueContainer,
+        {
+          borderTopWidth: 1,
+          borderBottomWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.card
+        }
+      ]
+    },
+    /* @__PURE__ */ React32.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground, fontWeight: "500" } }, currentValue)
+  ), /* @__PURE__ */ React32.createElement(
+    Pressable,
+    {
+      onPress: () => handleChange(currentValue + step),
+      disabled: disabled || !canIncrement,
+      style: [
+        styles26.button,
+        {
+          backgroundColor: theme.colors.secondary,
+          borderTopRightRadius: theme.borderRadius.md,
+          borderBottomRightRadius: theme.borderRadius.md,
+          borderWidth: 1,
+          borderColor: theme.colors.border
+        },
+        (disabled || !canIncrement) && styles26.buttonDisabled
+      ]
+    },
+    /* @__PURE__ */ React32.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground, fontWeight: "600" } }, "+")
+  )));
+};
+var styles26 = StyleSheet26.create({
+  button: {
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  buttonDisabled: {
+    opacity: 0.4
+  },
+  valueContainer: {
+    minWidth: 48,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12
+  }
+});
+NumberStepper.displayName = "NumberStepper";
+
+// src/components/molecules/StarRating.tsx
+import React33, { useState as useState10 } from "react";
+import { Pressable as Pressable2, StyleSheet as StyleSheet27 } from "react-native";
+var StarRating = ({
+  value: controlledValue,
+  max = 5,
+  readOnly = false,
+  precision = "full",
+  size = 28,
+  action,
+  actionPayload,
+  onChange,
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [internalValue, setInternalValue] = useState10(controlledValue ?? 0);
+  const currentValue = controlledValue ?? internalValue;
+  if (isLoading) return /* @__PURE__ */ React33.createElement(LoadingState, { message: "Loading..." });
+  if (error) return /* @__PURE__ */ React33.createElement(ErrorState, { message: error.message });
+  const handlePress = (starIndex) => {
+    if (readOnly) return;
+    const newValue = starIndex + 1;
+    setInternalValue(newValue);
+    onChange?.(newValue);
+    if (action) {
+      eventBus.emit(`UI:${action}`, { ...actionPayload, value: newValue });
+    }
+  };
+  const handleHalfPress = (starIndex) => {
+    if (readOnly || precision !== "half") return;
+    const newValue = starIndex + 0.5;
+    setInternalValue(newValue);
+    onChange?.(newValue);
+    if (action) {
+      eventBus.emit(`UI:${action}`, { ...actionPayload, value: newValue });
+    }
+  };
+  const stars = [];
+  for (let i = 0; i < max; i++) {
+    const filled = currentValue >= i + 1;
+    const halfFilled = !filled && currentValue >= i + 0.5;
+    const starChar = filled ? "\u2605" : halfFilled ? "\u2BEA" : "\u2606";
+    const starColor = filled || halfFilled ? theme.colors.warning : theme.colors.border;
+    stars.push(
+      /* @__PURE__ */ React33.createElement(
+        Pressable2,
+        {
+          key: i,
+          onPress: () => handlePress(i),
+          onLongPress: () => handleHalfPress(i),
+          disabled: readOnly,
+          style: styles27.star
+        },
+        /* @__PURE__ */ React33.createElement(
+          Typography,
+          {
+            variant: "body",
+            style: {
+              color: starColor,
+              fontSize: size,
+              lineHeight: size * 1.2
+            }
+          },
+          starChar
+        )
+      )
+    );
+  }
+  return /* @__PURE__ */ React33.createElement(HStack, { spacing: 4, align: "center", style }, stars);
+};
+var styles27 = StyleSheet27.create({
+  star: {
+    padding: 2
+  }
+});
+StarRating.displayName = "StarRating";
+
+// src/components/molecules/Accordion.tsx
+import React34, { useState as useState11, useCallback as useCallback6 } from "react";
+import { Pressable as Pressable3, LayoutAnimation, StyleSheet as StyleSheet28, View as View29 } from "react-native";
+var Accordion = ({
+  items,
+  multiple = false,
+  defaultOpenItems = [],
+  toggleEvent,
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [openItems, setOpenItems] = useState11(new Set(defaultOpenItems));
+  if (isLoading) return /* @__PURE__ */ React34.createElement(LoadingState, { message: "Loading..." });
+  if (error) return /* @__PURE__ */ React34.createElement(ErrorState, { message: error.message });
+  const handleToggle = useCallback6((id) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setOpenItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        if (!multiple) next.clear();
+        next.add(id);
+      }
+      return next;
+    });
+    if (toggleEvent) {
+      eventBus.emit(`UI:${toggleEvent}`, { itemId: id });
+    }
+  }, [multiple, toggleEvent, eventBus]);
+  return /* @__PURE__ */ React34.createElement(VStack, { spacing: 0, style: [styles28.container, { borderColor: theme.colors.border, borderWidth: 1, borderRadius: theme.borderRadius.lg }, style] }, items.map((item, index) => {
+    const isOpen = openItems.has(item.id);
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ React34.createElement(View29, { key: item.id }, /* @__PURE__ */ React34.createElement(
+      Pressable3,
+      {
+        onPress: () => !item.disabled && handleToggle(item.id),
+        disabled: item.disabled,
+        style: [
+          styles28.header,
+          {
+            backgroundColor: theme.colors.card,
+            padding: theme.spacing[4]
+          },
+          item.disabled && { opacity: 0.5 },
+          index === 0 && { borderTopLeftRadius: theme.borderRadius.lg, borderTopRightRadius: theme.borderRadius.lg },
+          isLast && !isOpen && { borderBottomLeftRadius: theme.borderRadius.lg, borderBottomRightRadius: theme.borderRadius.lg }
+        ]
+      },
+      /* @__PURE__ */ React34.createElement(HStack, { spacing: theme.spacing[2], align: "center", style: styles28.headerRow }, /* @__PURE__ */ React34.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground, fontWeight: "500", flex: 1 } }, item.title), /* @__PURE__ */ React34.createElement(
+        Icon,
+        {
+          name: isOpen ? "chevron-up" : "chevron-down",
+          size: 18,
+          color: theme.colors["muted-foreground"]
+        }
+      ))
+    ), isOpen && /* @__PURE__ */ React34.createElement(
+      View29,
+      {
+        style: [
+          styles28.content,
+          {
+            backgroundColor: theme.colors.card,
+            padding: theme.spacing[4],
+            paddingTop: 0
+          },
+          isLast && { borderBottomLeftRadius: theme.borderRadius.lg, borderBottomRightRadius: theme.borderRadius.lg }
+        ]
+      },
+      item.content
+    ), !isLast && /* @__PURE__ */ React34.createElement(Divider, null));
+  }));
+};
+var styles28 = StyleSheet28.create({
+  container: {
+    overflow: "hidden"
+  },
+  header: {},
+  headerRow: {
+    justifyContent: "space-between"
+  },
+  content: {}
+});
+Accordion.displayName = "Accordion";
+
+// src/components/molecules/DataList.tsx
+import React35, { useState as useState12 } from "react";
+import { FlatList as FlatList4, View as View30, StyleSheet as StyleSheet29 } from "react-native";
+function fieldLabel(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function statusVariant(value) {
+  const v = value.toLowerCase();
+  if (["active", "completed", "done", "approved", "published", "resolved", "open", "online"].includes(v)) return "success";
+  if (["pending", "in_progress", "in-progress", "review", "draft", "processing", "warning"].includes(v)) return "warning";
+  if (["inactive", "deleted", "rejected", "failed", "error", "blocked", "closed", "offline"].includes(v)) return "error";
+  return "default";
+}
+function formatDate(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function formatValue(value, format) {
+  if (value === void 0 || value === null) return "";
+  switch (format) {
+    case "date":
+      return formatDate(value);
+    case "currency":
+      return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
+    case "number":
+      return typeof value === "number" ? value.toLocaleString() : String(value);
+    case "percent":
+      return typeof value === "number" ? `${Math.round(value)}%` : String(value);
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+function groupData(items, field) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = String(getNestedValue(item, field) ?? "");
+    const group = groups.get(key);
+    if (group) group.push(item);
+    else groups.set(key, [item]);
+  }
+  return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+}
+var gapValues4 = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 16
+};
+var DataList = ({
+  entity,
+  fields: fieldsProp,
+  columns: columnsProp,
+  itemActions,
+  gap = "none",
+  variant = "default",
+  groupBy,
+  senderField,
+  currentUser,
+  style,
+  isLoading = false,
+  error = null,
+  infiniteScroll,
+  loadMoreEvent,
+  hasMore,
+  children,
+  pageSize = 5
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [visibleCount, setVisibleCount] = useState12(pageSize || Infinity);
+  const fields = fieldsProp ?? columnsProp ?? [];
+  const allData = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
+  const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
+  const titleField = fields.find((f) => f.variant === "h3" || f.variant === "h4") ?? fields[0];
+  const badgeFields = fields.filter((f) => f.variant === "badge" && f !== titleField);
+  const progressFields = fields.filter((f) => f.variant === "progress");
+  const bodyFields = fields.filter(
+    (f) => f !== titleField && !badgeFields.includes(f) && !progressFields.includes(f)
+  );
+  if (isLoading) return /* @__PURE__ */ React35.createElement(LoadingState, { message: "Loading..." });
+  if (error) return /* @__PURE__ */ React35.createElement(ErrorState, { message: error.message });
+  if (data.length === 0) return /* @__PURE__ */ React35.createElement(EmptyState, { message: "No items found" });
+  const handleAction = (action, itemData) => {
+    eventBus.emit(`UI:${action.event}`, { id: itemData.id, row: itemData });
+  };
+  const isCard = variant === "card";
+  const isCompact = variant === "compact";
+  const isMessage = variant === "message";
+  if (isMessage) {
+    const groups2 = groupBy ? groupData(data, groupBy) : [{ label: "", items: data }];
+    const contentField = titleField?.name ?? fields[0]?.name ?? "";
+    return /* @__PURE__ */ React35.createElement(VStack, { spacing: theme.spacing[2], style }, groups2.map((group, gi) => /* @__PURE__ */ React35.createElement(React35.Fragment, { key: gi }, group.label !== "" && /* @__PURE__ */ React35.createElement(VStack, { spacing: 4 }, /* @__PURE__ */ React35.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"], fontWeight: "600" } }, group.label), /* @__PURE__ */ React35.createElement(Divider, null)), group.items.map((itemData, index) => {
+      const id = String(itemData.id ?? `${gi}-${index}`);
+      const sender = senderField ? String(getNestedValue(itemData, senderField) ?? "") : "";
+      const isSent = Boolean(currentUser && sender === currentUser);
+      const content = getNestedValue(itemData, contentField);
+      const timestampField = fields.find((f) => f.format === "date");
+      const timestamp = timestampField ? getNestedValue(itemData, timestampField.name) : null;
+      return /* @__PURE__ */ React35.createElement(
+        View30,
+        {
+          key: id,
+          style: [
+            styles29.messageRow,
+            { justifyContent: isSent ? "flex-end" : "flex-start" }
+          ]
+        },
+        /* @__PURE__ */ React35.createElement(
+          View30,
+          {
+            style: [
+              styles29.messageBubble,
+              {
+                backgroundColor: isSent ? theme.colors.primary : theme.colors.muted,
+                borderBottomRightRadius: isSent ? 4 : 16,
+                borderBottomLeftRadius: isSent ? 16 : 4
+              }
+            ]
+          },
+          !isSent && senderField && /* @__PURE__ */ React35.createElement(Typography, { variant: "caption", style: { color: isSent ? theme.colors["primary-foreground"] : theme.colors.foreground, fontWeight: "600" } }, sender),
+          /* @__PURE__ */ React35.createElement(Typography, { variant: "body", style: { color: isSent ? theme.colors["primary-foreground"] : theme.colors.foreground } }, content !== void 0 && content !== null ? String(content) : ""),
+          timestamp != null && /* @__PURE__ */ React35.createElement(Typography, { variant: "caption", style: { color: isSent ? theme.colors["primary-foreground"] : theme.colors["muted-foreground"], opacity: 0.7, marginTop: 2, fontSize: 10 } }, formatDate(timestamp))
+        )
+      );
+    }))));
+  }
+  const hasRenderProp = typeof children === "function";
+  const groups = groupBy ? groupData(data, groupBy) : [{ label: "", items: data }];
+  const renderItem = (itemData, index) => {
+    if (hasRenderProp) {
+      return /* @__PURE__ */ React35.createElement(
+        View30,
+        {
+          style: [
+            styles29.row,
+            { padding: isCompact ? theme.spacing[2] : theme.spacing[4] }
+          ]
+        },
+        children(itemData, index),
+        itemActions && itemActions.length > 0 && /* @__PURE__ */ React35.createElement(HStack, { spacing: theme.spacing[2], style: styles29.actions }, itemActions.map((action) => /* @__PURE__ */ React35.createElement(
+          Button,
+          {
+            key: action.event,
+            variant: action.variant === "danger" ? "destructive" : action.variant ?? "ghost",
+            size: "sm",
+            onPress: () => handleAction(action, itemData)
+          },
+          action.label
+        )))
+      );
+    }
+    const titleValue = getNestedValue(itemData, titleField?.name ?? "");
+    return /* @__PURE__ */ React35.createElement(
+      View30,
+      {
+        style: [
+          styles29.row,
+          { padding: isCompact ? theme.spacing[2] : theme.spacing[4] },
+          isCard && {
+            backgroundColor: theme.colors.card,
+            borderRadius: theme.borderRadius.lg,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            marginBottom: theme.spacing[2],
+            ...theme.shadows.sm
+          }
+        ]
+      },
+      /* @__PURE__ */ React35.createElement(HStack, { spacing: theme.spacing[2], align: "center" }, titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ React35.createElement(
+        Typography,
+        {
+          variant: titleField?.variant === "h3" ? "h3" : "h4",
+          style: { flex: 1, color: theme.colors.foreground, fontWeight: "600" }
+        },
+        String(titleValue)
+      ), badgeFields.map((field) => {
+        const val = getNestedValue(itemData, field.name);
+        if (val === void 0 || val === null) return null;
+        return /* @__PURE__ */ React35.createElement(Badge, { key: field.name, variant: statusVariant(String(val)) }, String(val));
+      })),
+      bodyFields.length > 0 && !isCompact && /* @__PURE__ */ React35.createElement(HStack, { spacing: theme.spacing[3], style: { marginTop: theme.spacing[2], flexWrap: "wrap" } }, bodyFields.map((field) => {
+        const value = getNestedValue(itemData, field.name);
+        if (value === void 0 || value === null || value === "") return null;
+        return /* @__PURE__ */ React35.createElement(HStack, { key: field.name, spacing: theme.spacing[1], align: "center" }, /* @__PURE__ */ React35.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, field.label ?? fieldLabel(field.name), ":"), /* @__PURE__ */ React35.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground, fontSize: theme.typography.sizes.sm } }, formatValue(value, field.format)));
+      })),
+      progressFields.map((field) => {
+        const value = getNestedValue(itemData, field.name);
+        if (typeof value !== "number") return null;
+        return /* @__PURE__ */ React35.createElement(View30, { key: field.name, style: { marginTop: theme.spacing[2], maxWidth: 200 } }, /* @__PURE__ */ React35.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"], marginBottom: 4 } }, field.label ?? fieldLabel(field.name)), /* @__PURE__ */ React35.createElement(ProgressBar, { progress: value }));
+      }),
+      itemActions && itemActions.length > 0 && /* @__PURE__ */ React35.createElement(HStack, { spacing: theme.spacing[2], style: [styles29.actions, { marginTop: theme.spacing[2] }] }, itemActions.map((action) => /* @__PURE__ */ React35.createElement(
+        Button,
+        {
+          key: action.event,
+          variant: action.variant === "danger" ? "destructive" : action.variant ?? "ghost",
+          size: "sm",
+          onPress: () => handleAction(action, itemData)
+        },
+        action.label
+      )))
+    );
+  };
+  const flatItems = [];
+  let globalIndex = 0;
+  for (const group of groups) {
+    if (group.label) flatItems.push({ type: "header", label: group.label });
+    for (const item of group.items) {
+      flatItems.push({ type: "item", data: item, index: globalIndex++ });
+    }
+  }
+  return /* @__PURE__ */ React35.createElement(VStack, { spacing: 0, style }, /* @__PURE__ */ React35.createElement(
+    FlatList4,
+    {
+      data: flatItems,
+      keyExtractor: (entry, i) => {
+        if (entry.type === "header") return `header-${i}`;
+        return String(entry.data.id ?? entry.index);
+      },
+      renderItem: ({ item: entry, index: flatIndex }) => {
+        if (entry.type === "header") {
+          return /* @__PURE__ */ React35.createElement(VStack, { spacing: 4 }, /* @__PURE__ */ React35.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"], fontWeight: "600" } }, entry.label), /* @__PURE__ */ React35.createElement(Divider, null));
+        }
+        return /* @__PURE__ */ React35.createElement(View30, null, renderItem(entry.data, entry.index), !isCard && flatIndex < flatItems.length - 1 && /* @__PURE__ */ React35.createElement(Divider, null));
+      },
+      ItemSeparatorComponent: null,
+      style: { gap: gapValues4[gap] }
+    }
+  ), hasMoreLocal && /* @__PURE__ */ React35.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      onPress: () => setVisibleCount((prev) => prev + (pageSize || 5)),
+      style: { alignSelf: "center", marginTop: theme.spacing[3] }
+    },
+    "Show More (",
+    allData.length - visibleCount,
+    " remaining)"
+  ), infiniteScroll && loadMoreEvent && /* @__PURE__ */ React35.createElement(
+    InfiniteScrollSentinel,
+    {
+      loadMoreEvent,
+      isLoading,
+      hasMore
+    }
+  ));
+};
+var styles29 = StyleSheet29.create({
+  row: {},
+  messageRow: {
+    flexDirection: "row",
+    paddingHorizontal: 16
+  },
+  messageBubble: {
+    maxWidth: "75%",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 16
+  },
+  actions: {
+    justifyContent: "flex-end"
+  }
+});
+DataList.displayName = "DataList";
+
+// src/components/molecules/DataGrid.tsx
+import React36, { useState as useState13, useCallback as useCallback7 } from "react";
+import { FlatList as FlatList5, View as View31, Image, Pressable as Pressable4, StyleSheet as StyleSheet30, Dimensions as Dimensions3 } from "react-native";
+function fieldLabel2(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function statusVariant2(value) {
+  const v = value.toLowerCase();
+  if (["active", "completed", "done", "approved", "published", "resolved", "open", "online"].includes(v)) return "success";
+  if (["pending", "in_progress", "in-progress", "review", "draft", "processing", "warning"].includes(v)) return "warning";
+  if (["inactive", "deleted", "rejected", "failed", "error", "blocked", "closed", "offline"].includes(v)) return "error";
+  return "default";
+}
+function formatValue2(value, format) {
+  if (value === void 0 || value === null) return "";
+  switch (format) {
+    case "date": {
+      if (!value) return "";
+      const d = new Date(String(value));
+      if (isNaN(d.getTime())) return String(value);
+      return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+    }
+    case "currency":
+      return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
+    case "number":
+      return typeof value === "number" ? value.toLocaleString() : String(value);
+    case "percent":
+      return typeof value === "number" ? `${Math.round(value)}%` : String(value);
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+var gapValues5 = {
+  none: 0,
+  sm: 8,
+  md: 12,
+  lg: 16
+};
+var DataGrid = ({
+  entity,
+  fields: fieldsProp,
+  columns: columnsProp,
+  itemActions,
+  cols = 2,
+  gap = "md",
+  style,
+  isLoading = false,
+  error = null,
+  imageField,
+  selectable = false,
+  selectionEvent,
+  infiniteScroll,
+  loadMoreEvent,
+  hasMore,
+  children,
+  pageSize = 0
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [selectedIds, setSelectedIds] = useState13(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = useState13(pageSize || Infinity);
+  const fields = fieldsProp ?? columnsProp ?? [];
+  const allData = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
+  const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
+  const titleField = fields.find((f) => f.variant === "h3" || f.variant === "h4") ?? fields[0];
+  const badgeFields = fields.filter((f) => f.variant === "badge" && f !== titleField);
+  const bodyFields = fields.filter((f) => f !== titleField && !badgeFields.includes(f));
+  const primaryActions = itemActions?.filter((a) => a.variant !== "danger") ?? [];
+  const dangerActions = itemActions?.filter((a) => a.variant === "danger") ?? [];
+  const toggleSelection = useCallback7((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      if (selectionEvent) {
+        eventBus.emit(`UI:${selectionEvent}`, { selectedIds: Array.from(next) });
+      }
+      return next;
+    });
+  }, [selectionEvent, eventBus]);
+  if (isLoading) return /* @__PURE__ */ React36.createElement(LoadingState, { message: "Loading..." });
+  if (error) return /* @__PURE__ */ React36.createElement(ErrorState, { message: error.message });
+  if (data.length === 0) return /* @__PURE__ */ React36.createElement(EmptyState, { message: "No items found" });
+  const hasRenderProp = typeof children === "function";
+  const screenWidth = Dimensions3.get("window").width;
+  const gapSize = gapValues5[gap];
+  const cardWidth = (screenWidth - gapSize * (cols + 1)) / cols;
+  const handleAction = (action, itemData) => {
+    eventBus.emit(`UI:${action.event}`, { id: itemData.id, row: itemData });
+  };
+  const renderCard = ({ item: itemData, index }) => {
+    const id = String(itemData.id ?? index);
+    const isSelected = selectedIds.has(id);
+    const selectedStyle = isSelected ? { borderColor: theme.colors.primary, borderWidth: 2 } : {};
+    const baseCardStyle = [
+      styles30.card,
+      { width: cardWidth, margin: gapSize / 2 },
+      selectedStyle
+    ];
+    if (hasRenderProp) {
+      return /* @__PURE__ */ React36.createElement(Card, { style: baseCardStyle }, children(itemData, index));
+    }
+    const titleValue = getNestedValue(itemData, titleField?.name ?? "");
+    return /* @__PURE__ */ React36.createElement(Card, { style: baseCardStyle }, imageField && (() => {
+      const imgUrl = getNestedValue(itemData, imageField);
+      if (!imgUrl || typeof imgUrl !== "string") return null;
+      return /* @__PURE__ */ React36.createElement(
+        Image,
+        {
+          source: { uri: imgUrl },
+          style: [styles30.cardImage, { width: cardWidth - 2 }],
+          resizeMode: "cover"
+        }
+      );
+    })(), /* @__PURE__ */ React36.createElement(View31, { style: [styles30.cardHeader, { padding: theme.spacing[3] }] }, /* @__PURE__ */ React36.createElement(HStack, { spacing: theme.spacing[2], align: "flex-start" }, selectable && /* @__PURE__ */ React36.createElement(Pressable4, { onPress: () => toggleSelection(id), style: styles30.checkbox }, /* @__PURE__ */ React36.createElement(
+      View31,
+      {
+        style: [
+          styles30.checkboxBox,
+          {
+            borderColor: isSelected ? theme.colors.primary : theme.colors.border,
+            backgroundColor: isSelected ? theme.colors.primary : "transparent"
+          }
+        ]
+      },
+      isSelected && /* @__PURE__ */ React36.createElement(Typography, { variant: "caption", style: { color: theme.colors["primary-foreground"], fontSize: 10 } }, "\u2713")
+    )), /* @__PURE__ */ React36.createElement(VStack, { spacing: theme.spacing[1], style: { flex: 1 } }, titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ React36.createElement(
+      Typography,
+      {
+        variant: titleField?.variant === "h3" ? "h3" : "h4",
+        style: { color: theme.colors.foreground, fontWeight: "600" }
+      },
+      String(titleValue)
+    ), badgeFields.length > 0 && /* @__PURE__ */ React36.createElement(HStack, { spacing: theme.spacing[1], style: { flexWrap: "wrap" } }, badgeFields.map((field) => {
+      const val = getNestedValue(itemData, field.name);
+      if (val === void 0 || val === null) return null;
+      return /* @__PURE__ */ React36.createElement(Badge, { key: field.name, variant: statusVariant2(String(val)), size: "sm" }, String(val));
+    }))), dangerActions.length > 0 && /* @__PURE__ */ React36.createElement(HStack, { spacing: 4 }, dangerActions.map((action) => /* @__PURE__ */ React36.createElement(
+      Button,
+      {
+        key: action.event,
+        variant: "ghost",
+        size: "sm",
+        onPress: () => handleAction(action, itemData),
+        textStyle: { color: theme.colors.error }
+      },
+      action.label
+    ))))), bodyFields.length > 0 && /* @__PURE__ */ React36.createElement(View31, { style: [styles30.cardBody, { paddingHorizontal: theme.spacing[3], paddingBottom: theme.spacing[2] }] }, /* @__PURE__ */ React36.createElement(VStack, { spacing: theme.spacing[1] }, bodyFields.map((field) => {
+      const value = getNestedValue(itemData, field.name);
+      if (value === void 0 || value === null || value === "") return null;
+      if (field.format === "boolean") {
+        return /* @__PURE__ */ React36.createElement(HStack, { key: field.name, spacing: theme.spacing[2], align: "center", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React36.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, field.label ?? fieldLabel2(field.name)), /* @__PURE__ */ React36.createElement(Badge, { variant: value ? "success" : "default", size: "sm" }, value ? "Yes" : "No"));
+      }
+      if (field.variant === "progress" && typeof value === "number") {
+        return /* @__PURE__ */ React36.createElement(View31, { key: field.name }, /* @__PURE__ */ React36.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"], marginBottom: 4 } }, field.label ?? fieldLabel2(field.name)), /* @__PURE__ */ React36.createElement(ProgressBar, { progress: value }));
+      }
+      return /* @__PURE__ */ React36.createElement(HStack, { key: field.name, spacing: theme.spacing[2], align: "center", style: { justifyContent: "space-between" } }, /* @__PURE__ */ React36.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"] } }, field.label ?? fieldLabel2(field.name)), /* @__PURE__ */ React36.createElement(Typography, { variant: "body", style: { color: theme.colors.foreground, fontSize: theme.typography.sizes.sm } }, formatValue2(value, field.format)));
+    }))), primaryActions.length > 0 && /* @__PURE__ */ React36.createElement(
+      View31,
+      {
+        style: [
+          styles30.cardFooter,
+          {
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.border,
+            padding: theme.spacing[3]
+          }
+        ]
+      },
+      /* @__PURE__ */ React36.createElement(HStack, { spacing: theme.spacing[2], style: { justifyContent: "flex-end" } }, primaryActions.map((action) => /* @__PURE__ */ React36.createElement(
+        Button,
+        {
+          key: action.event,
+          variant: action.variant === "primary" ? "primary" : "ghost",
+          size: "sm",
+          onPress: () => handleAction(action, itemData)
+        },
+        action.label
+      )))
+    ));
+  };
+  return /* @__PURE__ */ React36.createElement(VStack, { spacing: 0, style }, selectable && selectedIds.size > 0 && /* @__PURE__ */ React36.createElement(
+    HStack,
+    {
+      spacing: theme.spacing[2],
+      align: "center",
+      style: {
+        paddingVertical: theme.spacing[2],
+        paddingHorizontal: theme.spacing[3],
+        backgroundColor: theme.colors.muted,
+        borderRadius: theme.borderRadius.sm,
+        marginBottom: theme.spacing[2]
+      }
+    },
+    /* @__PURE__ */ React36.createElement(Typography, { variant: "caption", style: { color: theme.colors.foreground, fontWeight: "600" } }, selectedIds.size, " selected")
+  ), /* @__PURE__ */ React36.createElement(
+    FlatList5,
+    {
+      data,
+      numColumns: cols,
+      keyExtractor: (item, index) => String(item.id ?? index),
+      renderItem: renderCard,
+      contentContainerStyle: { paddingHorizontal: gapSize / 2 },
+      columnWrapperStyle: cols > 1 ? { justifyContent: "flex-start" } : void 0
+    }
+  ), hasMoreLocal && /* @__PURE__ */ React36.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      onPress: () => setVisibleCount((prev) => prev + (pageSize || 5)),
+      style: { alignSelf: "center", marginTop: theme.spacing[3] }
+    },
+    "Show More (",
+    allData.length - visibleCount,
+    " remaining)"
+  ), infiniteScroll && loadMoreEvent && /* @__PURE__ */ React36.createElement(
+    InfiniteScrollSentinel,
+    {
+      loadMoreEvent,
+      isLoading,
+      hasMore
+    }
+  ));
+};
+var styles30 = StyleSheet30.create({
+  card: {
+    overflow: "hidden",
+    padding: 0
+  },
+  cardImage: {
+    height: 140
+  },
+  cardHeader: {},
+  cardBody: {},
+  cardFooter: {},
+  checkbox: {
+    marginTop: 2
+  },
+  checkboxBox: {
+    width: 18,
+    height: 18,
+    borderWidth: 2,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+DataGrid.displayName = "DataGrid";
+
+// src/components/molecules/Carousel.tsx
+import React37, { useRef as useRef4, useState as useState14, useCallback as useCallback8 } from "react";
+import {
+  FlatList as FlatList6,
+  View as View32,
+  Dimensions as Dimensions4,
+  StyleSheet as StyleSheet31
+} from "react-native";
+var Carousel = ({
+  items,
+  renderItem,
+  autoPlay = false,
+  autoPlayInterval = 3e3,
+  showDots = true,
+  itemWidth,
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  const flatListRef = useRef4(null);
+  const [activeIndex, setActiveIndex] = useState14(0);
+  const screenWidth = Dimensions4.get("window").width;
+  const width = itemWidth ?? screenWidth;
+  if (isLoading) return /* @__PURE__ */ React37.createElement(LoadingState, { message: "Loading..." });
+  if (error) return /* @__PURE__ */ React37.createElement(ErrorState, { message: error.message });
+  const handleScroll = useCallback8(
+    (event) => {
+      const offset = event.nativeEvent.contentOffset.x;
+      const index = Math.round(offset / width);
+      setActiveIndex(index);
+    },
+    [width]
+  );
+  React37.useEffect(() => {
+    if (!autoPlay || items.length <= 1) return;
+    const interval = setInterval(() => {
+      const nextIndex = (activeIndex + 1) % items.length;
+      flatListRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+      setActiveIndex(nextIndex);
+    }, autoPlayInterval);
+    return () => clearInterval(interval);
+  }, [autoPlay, autoPlayInterval, activeIndex, items.length]);
+  return /* @__PURE__ */ React37.createElement(View32, { style: [styles31.container, style] }, /* @__PURE__ */ React37.createElement(
+    FlatList6,
+    {
+      ref: flatListRef,
+      data: items,
+      horizontal: true,
+      pagingEnabled: true,
+      showsHorizontalScrollIndicator: false,
+      onScroll: handleScroll,
+      scrollEventThrottle: 16,
+      keyExtractor: (_, index) => String(index),
+      getItemLayout: (_, index) => ({
+        length: width,
+        offset: width * index,
+        index
+      }),
+      renderItem: ({ item, index }) => /* @__PURE__ */ React37.createElement(View32, { style: { width } }, renderItem(item, index))
+    }
+  ), showDots && items.length > 1 && /* @__PURE__ */ React37.createElement(View32, { style: styles31.dotsContainer }, items.map((_, index) => /* @__PURE__ */ React37.createElement(
+    View32,
+    {
+      key: index,
+      style: [
+        styles31.dot,
+        {
+          backgroundColor: index === activeIndex ? theme.colors.primary : theme.colors.border
+        }
+      ]
+    }
+  ))));
+};
+var styles31 = StyleSheet31.create({
+  container: {},
+  dotsContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingVertical: 12,
+    gap: 8
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  }
+});
+Carousel.displayName = "Carousel";
+
+// src/components/molecules/FlipCard.tsx
+import React38, { useEffect as useEffect2, useRef as useRef5, useState as useState15 } from "react";
+import { Animated as Animated4, Pressable as Pressable5, StyleSheet as StyleSheet32 } from "react-native";
+var FlipCard = ({
+  front,
+  back,
+  flipped: controlledFlipped,
+  onFlip,
+  duration = 400,
+  disabled = false,
+  style
+}) => {
+  const theme = useTheme();
+  const [internalFlipped, setInternalFlipped] = useState15(false);
+  const isFlipped = controlledFlipped ?? internalFlipped;
+  const flipAnim = useRef5(new Animated4.Value(isFlipped ? 1 : 0)).current;
+  useEffect2(() => {
+    Animated4.timing(flipAnim, {
+      toValue: isFlipped ? 1 : 0,
+      duration,
+      useNativeDriver: true
+    }).start();
+  }, [isFlipped, duration, flipAnim]);
+  const handleFlip = () => {
+    if (disabled) return;
+    const nextFlipped = !isFlipped;
+    setInternalFlipped(nextFlipped);
+    onFlip?.(nextFlipped);
+  };
+  const frontRotateY = flipAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"]
+  });
+  const backRotateY = flipAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["180deg", "360deg"]
+  });
+  return /* @__PURE__ */ React38.createElement(Pressable5, { onPress: handleFlip, disabled, style: [styles32.container, style] }, /* @__PURE__ */ React38.createElement(
+    Animated4.View,
+    {
+      style: [
+        styles32.face,
+        {
+          backgroundColor: theme.colors.card,
+          borderRadius: theme.borderRadius.lg,
+          ...theme.shadows.sm,
+          transform: [{ rotateY: frontRotateY }]
+        }
+      ]
+    },
+    front
+  ), /* @__PURE__ */ React38.createElement(
+    Animated4.View,
+    {
+      style: [
+        styles32.face,
+        styles32.backFace,
+        {
+          backgroundColor: theme.colors.card,
+          borderRadius: theme.borderRadius.lg,
+          ...theme.shadows.sm,
+          transform: [{ rotateY: backRotateY }]
+        }
+      ]
+    },
+    back
+  ));
+};
+var styles32 = StyleSheet32.create({
+  container: {},
+  face: {
+    backfaceVisibility: "hidden",
+    padding: 16
+  },
+  backFace: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+FlipCard.displayName = "FlipCard";
+
+// src/components/molecules/PullToRefresh.tsx
+import React39, { useState as useState16, useCallback as useCallback9 } from "react";
+import { ScrollView as ScrollView4, RefreshControl, StyleSheet as StyleSheet33 } from "react-native";
+var PullToRefresh = ({
+  refreshEvent,
+  refreshPayload,
+  onRefresh,
+  children,
+  style
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [refreshing, setRefreshing] = useState16(false);
+  const handleRefresh = useCallback9(async () => {
+    setRefreshing(true);
+    if (refreshEvent) {
+      eventBus.emit(`UI:${refreshEvent}`, refreshPayload);
+    }
+    if (onRefresh) {
+      await onRefresh();
+    }
+    setRefreshing(false);
+  }, [refreshEvent, refreshPayload, onRefresh, eventBus]);
+  return /* @__PURE__ */ React39.createElement(
+    ScrollView4,
+    {
+      style: [styles33.container, style],
+      refreshControl: /* @__PURE__ */ React39.createElement(
+        RefreshControl,
+        {
+          refreshing,
+          onRefresh: handleRefresh,
+          tintColor: theme.colors.primary,
+          colors: [theme.colors.primary]
+        }
+      )
+    },
+    children
+  );
+};
+var styles33 = StyleSheet33.create({
+  container: {
+    flex: 1
+  }
+});
+PullToRefresh.displayName = "PullToRefresh";
+
+// src/components/molecules/SwipeableRow.tsx
+import React40, { useRef as useRef6 } from "react";
+import {
+  View as View33,
+  Animated as Animated5,
+  PanResponder,
+  Pressable as Pressable6,
+  StyleSheet as StyleSheet34,
+  Dimensions as Dimensions5
+} from "react-native";
+var ACTION_WIDTH = 80;
+var SwipeableRow = ({
+  leftActions = [],
+  rightActions = [],
+  threshold = 0.3,
+  children,
+  style
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const translateX = useRef6(new Animated5.Value(0)).current;
+  const screenWidth = Dimensions5.get("window").width;
+  const leftWidth = leftActions.length * ACTION_WIDTH;
+  const rightWidth = rightActions.length * ACTION_WIDTH;
+  const panResponder = useRef6(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dx) > 10 && Math.abs(gestureState.dy) < 10,
+      onPanResponderMove: (_, gestureState) => {
+        const maxLeft = leftWidth;
+        const maxRight = -rightWidth;
+        const dx = Math.max(maxRight, Math.min(maxLeft, gestureState.dx));
+        translateX.setValue(dx);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const swipeThreshold = screenWidth * threshold;
+        let toValue = 0;
+        if (gestureState.dx > swipeThreshold && leftActions.length > 0) {
+          toValue = leftWidth;
+        } else if (gestureState.dx < -swipeThreshold && rightActions.length > 0) {
+          toValue = -rightWidth;
+        }
+        Animated5.spring(translateX, {
+          toValue,
+          useNativeDriver: true,
+          friction: 8
+        }).start();
+      }
+    })
+  ).current;
+  const handleAction = (action) => {
+    eventBus.emit(`UI:${action.event}`, action.payload);
+    Animated5.spring(translateX, {
+      toValue: 0,
+      useNativeDriver: true,
+      friction: 8
+    }).start();
+  };
+  return /* @__PURE__ */ React40.createElement(View33, { style: [styles34.container, style] }, leftActions.length > 0 && /* @__PURE__ */ React40.createElement(View33, { style: [styles34.actionsLeft, { width: leftWidth }] }, leftActions.map((action) => /* @__PURE__ */ React40.createElement(
+    Pressable6,
+    {
+      key: action.event,
+      onPress: () => handleAction(action),
+      style: [styles34.actionButton, { backgroundColor: action.color }]
+    },
+    /* @__PURE__ */ React40.createElement(Typography, { variant: "caption", style: { color: theme.colors["primary-foreground"], fontWeight: "600" } }, action.label)
+  ))), rightActions.length > 0 && /* @__PURE__ */ React40.createElement(View33, { style: [styles34.actionsRight, { width: rightWidth }] }, rightActions.map((action) => /* @__PURE__ */ React40.createElement(
+    Pressable6,
+    {
+      key: action.event,
+      onPress: () => handleAction(action),
+      style: [styles34.actionButton, { backgroundColor: action.color }]
+    },
+    /* @__PURE__ */ React40.createElement(Typography, { variant: "caption", style: { color: theme.colors["primary-foreground"], fontWeight: "600" } }, action.label)
+  ))), /* @__PURE__ */ React40.createElement(
+    Animated5.View,
+    {
+      style: [
+        styles34.content,
+        {
+          backgroundColor: theme.colors.card,
+          transform: [{ translateX }]
+        }
+      ],
+      ...panResponder.panHandlers
+    },
+    children
+  ));
+};
+var styles34 = StyleSheet34.create({
+  container: {
+    overflow: "hidden"
+  },
+  actionsLeft: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    flexDirection: "row"
+  },
+  actionsRight: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    bottom: 0,
+    flexDirection: "row"
+  },
+  actionButton: {
+    width: ACTION_WIDTH,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {}
+});
+SwipeableRow.displayName = "SwipeableRow";
+
+// src/components/molecules/SortableList.tsx
+import React41, { useState as useState17, useCallback as useCallback10 } from "react";
+import {
+  View as View34,
+  FlatList as FlatList7,
+  Pressable as Pressable7,
+  LayoutAnimation as LayoutAnimation2,
+  StyleSheet as StyleSheet35
+} from "react-native";
+var SortableList = ({
+  items: initialItems,
+  renderItem,
+  keyExtractor,
+  reorderEvent,
+  dragHandlePosition = "left",
+  onReorder,
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [items, setItems] = useState17(initialItems);
+  const [dragIndex] = useState17(null);
+  React41.useEffect(() => {
+    setItems(initialItems);
+  }, [initialItems]);
+  if (isLoading) return /* @__PURE__ */ React41.createElement(LoadingState, { message: "Loading..." });
+  if (error) return /* @__PURE__ */ React41.createElement(ErrorState, { message: error.message });
+  const moveItem = useCallback10((fromIndex, toIndex) => {
+    if (fromIndex === toIndex) return;
+    LayoutAnimation2.configureNext(LayoutAnimation2.Presets.easeInEaseOut);
+    setItems((prev) => {
+      const next = [...prev];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
+      onReorder?.(next);
+      if (reorderEvent) {
+        eventBus.emit(`UI:${reorderEvent}`, { items: next, fromIndex, toIndex });
+      }
+      return next;
+    });
+  }, [onReorder, reorderEvent, eventBus]);
+  const handleMoveUp = (index) => {
+    if (index > 0) moveItem(index, index - 1);
+  };
+  const handleMoveDown = (index) => {
+    if (index < items.length - 1) moveItem(index, index + 1);
+  };
+  const dragHandle = (index) => /* @__PURE__ */ React41.createElement(View34, { style: styles35.handleContainer }, /* @__PURE__ */ React41.createElement(Pressable7, { onPress: () => handleMoveUp(index), disabled: index === 0 }, /* @__PURE__ */ React41.createElement(Icon, { name: "chevron-up", size: 18, color: index === 0 ? theme.colors.border : theme.colors["muted-foreground"] })), /* @__PURE__ */ React41.createElement(Icon, { name: "menu", size: 18, color: dragIndex === index ? theme.colors.primary : theme.colors["muted-foreground"] }), /* @__PURE__ */ React41.createElement(Pressable7, { onPress: () => handleMoveDown(index), disabled: index === items.length - 1 }, /* @__PURE__ */ React41.createElement(Icon, { name: "chevron-down", size: 18, color: index === items.length - 1 ? theme.colors.border : theme.colors["muted-foreground"] })));
+  return /* @__PURE__ */ React41.createElement(
+    FlatList7,
+    {
+      data: items,
+      keyExtractor,
+      style,
+      renderItem: ({ item, index }) => /* @__PURE__ */ React41.createElement(
+        View34,
+        {
+          style: [
+            styles35.row,
+            {
+              backgroundColor: dragIndex === index ? theme.colors.muted : theme.colors.card,
+              borderBottomWidth: 1,
+              borderBottomColor: theme.colors.border
+            }
+          ]
+        },
+        dragHandlePosition === "left" && dragHandle(index),
+        /* @__PURE__ */ React41.createElement(View34, { style: styles35.content }, renderItem(item, index)),
+        dragHandlePosition === "right" && dragHandle(index)
+      )
+    }
+  );
+};
+var styles35 = StyleSheet35.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  content: {
+    flex: 1
+  },
+  handleContainer: {
+    width: 36,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 4
+  }
+});
+SortableList.displayName = "SortableList";
+
+// src/components/molecules/CalendarGrid.tsx
+import React42, { useState as useState18, useMemo as useMemo3 } from "react";
+import { View as View35, ScrollView as ScrollView5, Pressable as Pressable8, StyleSheet as StyleSheet36 } from "react-native";
+var DAY_LABELS_SUN = ["S", "M", "T", "W", "T", "F", "S"];
+var DAY_LABELS_MON = ["M", "T", "W", "T", "F", "S", "S"];
+var CalendarGrid = ({
+  weekStart = 0,
+  events = [],
+  onSlotClick,
+  slotClickEvent,
+  initialMonth,
+  initialYear,
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const now = /* @__PURE__ */ new Date();
+  const [month, setMonth] = useState18(initialMonth ?? now.getMonth());
+  const [year, setYear] = useState18(initialYear ?? now.getFullYear());
+  const [selectedDate, setSelectedDate] = useState18(null);
+  if (isLoading) return /* @__PURE__ */ React42.createElement(LoadingState, { message: "Loading..." });
+  if (error) return /* @__PURE__ */ React42.createElement(ErrorState, { message: error.message });
+  const dayLabels = weekStart === 1 ? DAY_LABELS_MON : DAY_LABELS_SUN;
+  const calendarDays = useMemo3(() => {
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    let startOffset = firstDay.getDay() - weekStart;
+    if (startOffset < 0) startOffset += 7;
+    const days = [];
+    for (let i = 0; i < startOffset; i++) days.push(null);
+    for (let d = 1; d <= daysInMonth; d++) days.push(d);
+    while (days.length % 7 !== 0) days.push(null);
+    return days;
+  }, [year, month, weekStart]);
+  const eventDates = useMemo3(() => {
+    const set = /* @__PURE__ */ new Set();
+    events.forEach((e) => {
+      const d = new Date(e.date);
+      if (d.getMonth() === month && d.getFullYear() === year) {
+        set.add(d.getDate());
+      }
+    });
+    return set;
+  }, [events, month, year]);
+  const handleDayPress = (day) => {
+    const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    setSelectedDate(dateStr);
+    onSlotClick?.(dateStr);
+    if (slotClickEvent) {
+      eventBus.emit(`UI:${slotClickEvent}`, { date: dateStr });
+    }
+  };
+  const goToPrevMonth = () => {
+    if (month === 0) {
+      setMonth(11);
+      setYear((y) => y - 1);
+    } else {
+      setMonth((m) => m - 1);
+    }
+  };
+  const goToNextMonth = () => {
+    if (month === 11) {
+      setMonth(0);
+      setYear((y) => y + 1);
+    } else {
+      setMonth((m) => m + 1);
+    }
+  };
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const today = now.getDate();
+  const isCurrentMonth = now.getMonth() === month && now.getFullYear() === year;
+  const weeks = [];
+  for (let i = 0; i < calendarDays.length; i += 7) {
+    weeks.push(calendarDays.slice(i, i + 7));
+  }
+  return /* @__PURE__ */ React42.createElement(VStack, { spacing: theme.spacing[3], style }, /* @__PURE__ */ React42.createElement(HStack, { spacing: theme.spacing[2], align: "center", style: styles36.header }, /* @__PURE__ */ React42.createElement(Pressable8, { onPress: goToPrevMonth, style: styles36.navButton }, /* @__PURE__ */ React42.createElement(Icon, { name: "chevron-left", size: 20, color: theme.colors.foreground })), /* @__PURE__ */ React42.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground, flex: 1, textAlign: "center" } }, monthNames[month], " ", year), /* @__PURE__ */ React42.createElement(Pressable8, { onPress: goToNextMonth, style: styles36.navButton }, /* @__PURE__ */ React42.createElement(Icon, { name: "chevron-right", size: 20, color: theme.colors.foreground }))), /* @__PURE__ */ React42.createElement(HStack, { spacing: 0, align: "center", style: styles36.dayLabelsRow }, dayLabels.map((label, i) => /* @__PURE__ */ React42.createElement(View35, { key: i, style: styles36.dayLabelCell }, /* @__PURE__ */ React42.createElement(Typography, { variant: "caption", style: { color: theme.colors["muted-foreground"], textAlign: "center", fontWeight: "600" } }, label)))), /* @__PURE__ */ React42.createElement(ScrollView5, null, weeks.map((week, wi) => /* @__PURE__ */ React42.createElement(HStack, { key: wi, spacing: 0, align: "center" }, week.map((day, di) => /* @__PURE__ */ React42.createElement(View35, { key: di, style: styles36.cellWrapper }, day !== null ? /* @__PURE__ */ React42.createElement(
+    DayCell,
+    {
+      date: day,
+      isToday: isCurrentMonth && day === today,
+      isSelected: selectedDate === `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`,
+      hasEvents: eventDates.has(day),
+      onClick: () => handleDayPress(day)
+    }
+  ) : /* @__PURE__ */ React42.createElement(View35, { style: styles36.emptyCell })))))));
+};
+var styles36 = StyleSheet36.create({
+  header: {
+    justifyContent: "space-between",
+    paddingHorizontal: 4
+  },
+  navButton: {
+    padding: 8
+  },
+  dayLabelsRow: {
+    justifyContent: "space-around"
+  },
+  dayLabelCell: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 4
+  },
+  cellWrapper: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 2
+  },
+  emptyCell: {
+    width: 40,
+    height: 40
+  }
+});
+CalendarGrid.displayName = "CalendarGrid";
+
+// src/components/molecules/Lightbox.tsx
+import React43, { useRef as useRef7, useState as useState19, useCallback as useCallback11 } from "react";
+import {
+  Modal as Modal5,
+  View as View36,
+  FlatList as FlatList8,
+  Image as Image2,
+  Pressable as Pressable9,
+  Dimensions as Dimensions6,
+  StyleSheet as StyleSheet37
+} from "react-native";
+var Lightbox = ({
+  images,
+  currentIndex = 0,
+  isOpen,
+  closeAction,
+  onClose,
+  style
+}) => {
+  const eventBus = useEventBus();
+  const flatListRef = useRef7(null);
+  const [activeIndex, setActiveIndex] = useState19(currentIndex);
+  const { width: screenWidth, height: screenHeight } = Dimensions6.get("window");
+  const handleClose = () => {
+    if (closeAction) {
+      eventBus.emit(`UI:${closeAction}`, {});
+    }
+    onClose?.();
+  };
+  const handleScroll = useCallback11(
+    (event) => {
+      const offset = event.nativeEvent.contentOffset.x;
+      const index = Math.round(offset / screenWidth);
+      setActiveIndex(index);
+    },
+    [screenWidth]
+  );
+  React43.useEffect(() => {
+    if (isOpen && flatListRef.current && currentIndex >= 0) {
+      setTimeout(() => {
+        flatListRef.current?.scrollToIndex({ index: currentIndex, animated: false });
+        setActiveIndex(currentIndex);
+      }, 100);
+    }
+  }, [isOpen, currentIndex]);
+  return /* @__PURE__ */ React43.createElement(
+    Modal5,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: handleClose
+    },
+    /* @__PURE__ */ React43.createElement(View36, { style: [styles37.overlay, { backgroundColor: "rgba(0,0,0,0.95)" }, style] }, /* @__PURE__ */ React43.createElement(View36, { style: styles37.header }, /* @__PURE__ */ React43.createElement(Typography, { variant: "body", style: { color: "#fff" } }, activeIndex + 1, " / ", images.length), /* @__PURE__ */ React43.createElement(Pressable9, { onPress: handleClose, style: styles37.closeButton }, /* @__PURE__ */ React43.createElement(Icon, { name: "x", size: 28, color: "#fff" }))), /* @__PURE__ */ React43.createElement(
+      FlatList8,
+      {
+        ref: flatListRef,
+        data: images,
+        horizontal: true,
+        pagingEnabled: true,
+        showsHorizontalScrollIndicator: false,
+        onScroll: handleScroll,
+        scrollEventThrottle: 16,
+        keyExtractor: (_, index) => String(index),
+        getItemLayout: (_, index) => ({
+          length: screenWidth,
+          offset: screenWidth * index,
+          index
+        }),
+        renderItem: ({ item }) => /* @__PURE__ */ React43.createElement(View36, { style: [styles37.imageContainer, { width: screenWidth, height: screenHeight * 0.75 }] }, /* @__PURE__ */ React43.createElement(
+          Image2,
+          {
+            source: { uri: item.uri },
+            style: styles37.image,
+            resizeMode: "contain"
+          }
+        ), item.alt && /* @__PURE__ */ React43.createElement(Typography, { variant: "caption", style: styles37.caption }, item.alt))
+      }
+    ))
+  );
+};
+var styles37 = StyleSheet37.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingTop: 48,
+    paddingBottom: 12
+  },
+  closeButton: {
+    padding: 8
+  },
+  imageContainer: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  caption: {
+    color: "rgba(255,255,255,0.8)",
+    textAlign: "center",
+    marginTop: 12
+  }
+});
+Lightbox.displayName = "Lightbox";
+
+// src/components/molecules/ScaledDiagram.tsx
+import React44, { useRef as useRef8, useState as useState20, useCallback as useCallback12 } from "react";
+import {
+  View as View37,
+  StyleSheet as StyleSheet38,
+  Animated as Animated6,
+  PanResponder as PanResponder2,
+  Dimensions as Dimensions7,
+  TouchableOpacity as TouchableOpacity17
+} from "react-native";
+var { width: SCREEN_WIDTH2 } = Dimensions7.get("window");
+var ScaledDiagram = ({
+  style,
+  isLoading,
+  error,
+  entity,
+  children,
+  contentWidth = 800,
+  contentHeight = 600,
+  width = SCREEN_WIDTH2 - 32,
+  height = 400,
+  initialScale = 1,
+  minScale = 0.5,
+  maxScale = 3,
+  enablePan = true,
+  enableZoom = true,
+  showControls = true,
+  title,
+  enableDoubleTap = true,
+  eventPrefix = "DIAGRAM"
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const scale = useRef8(new Animated6.Value(initialScale)).current;
+  const translateX = useRef8(new Animated6.Value(0)).current;
+  const translateY = useRef8(new Animated6.Value(0)).current;
+  const [currentScale, setCurrentScale] = useState20(initialScale);
+  const lastTranslate = useRef8({ x: 0, y: 0 });
+  const clamp = useCallback12((value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+  }, []);
+  const getBounds = useCallback12((newScale) => {
+    const scaledWidth = contentWidth * newScale;
+    const scaledHeight = contentHeight * newScale;
+    const maxX = Math.max(0, (scaledWidth - width) / 2);
+    const maxY = Math.max(0, (scaledHeight - height) / 2);
+    return { maxX, maxY };
+  }, [contentWidth, contentHeight, width, height]);
+  const handleZoomIn = useCallback12(() => {
+    if (!enableZoom) return;
+    const newScale = clamp(currentScale * 1.25, minScale, maxScale);
+    setCurrentScale(newScale);
+    Animated6.spring(scale, {
+      toValue: newScale,
+      useNativeDriver: true,
+      friction: 8
+    }).start();
+    eventBus.emit(`UI:${eventPrefix}_ZOOM_IN`, {
+      entity,
+      scale: newScale
+    });
+  }, [currentScale, minScale, maxScale, enableZoom, entity, eventPrefix, scale, eventBus, clamp]);
+  const handleZoomOut = useCallback12(() => {
+    if (!enableZoom) return;
+    const newScale = clamp(currentScale / 1.25, minScale, maxScale);
+    setCurrentScale(newScale);
+    if (newScale <= initialScale) {
+      lastTranslate.current = { x: 0, y: 0 };
+      Animated6.parallel([
+        Animated6.spring(translateX, {
+          toValue: 0,
+          useNativeDriver: true,
+          friction: 8
+        }),
+        Animated6.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+          friction: 8
+        })
+      ]).start();
+    }
+    Animated6.spring(scale, {
+      toValue: newScale,
+      useNativeDriver: true,
+      friction: 8
+    }).start();
+    eventBus.emit(`UI:${eventPrefix}_ZOOM_OUT`, {
+      entity,
+      scale: newScale
+    });
+  }, [currentScale, minScale, maxScale, initialScale, enableZoom, entity, eventPrefix, scale, translateX, translateY, eventBus, clamp]);
+  const handleReset = useCallback12(() => {
+    setCurrentScale(initialScale);
+    lastTranslate.current = { x: 0, y: 0 };
+    Animated6.parallel([
+      Animated6.spring(scale, {
+        toValue: initialScale,
+        useNativeDriver: true,
+        friction: 8
+      }),
+      Animated6.spring(translateX, {
+        toValue: 0,
+        useNativeDriver: true,
+        friction: 8
+      }),
+      Animated6.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        friction: 8
+      })
+    ]).start();
+    eventBus.emit(`UI:${eventPrefix}_RESET`, {
+      entity,
+      scale: initialScale
+    });
+  }, [initialScale, entity, eventPrefix, scale, translateX, translateY, eventBus]);
+  const handleDoubleTap = useCallback12(() => {
+    if (!enableDoubleTap) return;
+    if (currentScale > initialScale) {
+      handleReset();
+    } else {
+      const newScale = clamp(currentScale * 2, minScale, maxScale);
+      setCurrentScale(newScale);
+      Animated6.spring(scale, {
+        toValue: newScale,
+        useNativeDriver: true,
+        friction: 8
+      }).start();
+    }
+  }, [currentScale, initialScale, enableDoubleTap, minScale, maxScale, handleReset, scale, clamp]);
+  const panResponder = useRef8(
+    PanResponder2.create({
+      onStartShouldSetPanResponder: () => enablePan,
+      onMoveShouldSetPanResponder: () => enablePan && currentScale > 1,
+      onPanResponderGrant: () => {
+        lastTranslate.current = {
+          x: 0,
+          y: 0
+        };
+      },
+      onPanResponderMove: (_event, gestureState) => {
+        if (!enablePan || currentScale <= 1) return;
+        const { maxX, maxY } = getBounds(currentScale);
+        const newX = clamp(
+          gestureState.dx,
+          -maxX - lastTranslate.current.x,
+          maxX - lastTranslate.current.x
+        );
+        const newY = clamp(
+          gestureState.dy,
+          -maxY - lastTranslate.current.y,
+          maxY - lastTranslate.current.y
+        );
+        translateX.setValue(newX);
+        translateY.setValue(newY);
+      },
+      onPanResponderRelease: (_event, gestureState) => {
+        if (!enablePan || currentScale <= 1) return;
+        const { maxX, maxY } = getBounds(currentScale);
+        lastTranslate.current.x = clamp(
+          lastTranslate.current.x + gestureState.dx,
+          -maxX,
+          maxX
+        );
+        lastTranslate.current.y = clamp(
+          lastTranslate.current.y + gestureState.dy,
+          -maxY,
+          maxY
+        );
+        translateX.setOffset(lastTranslate.current.x);
+        translateX.setValue(0);
+        translateY.setOffset(lastTranslate.current.y);
+        translateY.setValue(0);
+        eventBus.emit(`UI:${eventPrefix}_PAN`, {
+          entity,
+          x: lastTranslate.current.x,
+          y: lastTranslate.current.y,
+          scale: currentScale
+        });
+      }
+    })
+  ).current;
+  if (isLoading) {
+    return /* @__PURE__ */ React44.createElement(Card, { style: { ...styles38.container, width, height, ...style || {} }, padding: "lg" }, /* @__PURE__ */ React44.createElement(LoadingState, { message: "Loading diagram..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React44.createElement(Card, { style: { ...styles38.container, width, height, ...style || {} }, padding: "lg" }, /* @__PURE__ */ React44.createElement(ErrorState, { message: error.message }));
+  }
+  if (!children) {
+    return /* @__PURE__ */ React44.createElement(Card, { style: { ...styles38.container, width, height, ...style || {} }, padding: "lg" }, /* @__PURE__ */ React44.createElement(EmptyState, { message: "No diagram content" }));
+  }
+  const animatedStyle = {
+    transform: [
+      { scale },
+      { translateX },
+      { translateY }
+    ]
+  };
+  return /* @__PURE__ */ React44.createElement(Card, { style: { ...styles38.container, width, ...style || {} }, padding: "md" }, /* @__PURE__ */ React44.createElement(VStack, { spacing: 12 }, (title || showControls) && /* @__PURE__ */ React44.createElement(HStack, { justify: "space-between", align: "center" }, title && /* @__PURE__ */ React44.createElement(Typography, { variant: "h4", style: { color: theme.colors.foreground } }, title), showControls && /* @__PURE__ */ React44.createElement(HStack, { spacing: 8 }, /* @__PURE__ */ React44.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      onPress: handleZoomOut,
+      disabled: !enableZoom || currentScale <= minScale
+    },
+    "\u2212"
+  ), /* @__PURE__ */ React44.createElement(Typography, { variant: "body", style: { minWidth: 50, textAlign: "center" } }, Math.round(currentScale * 100), "%"), /* @__PURE__ */ React44.createElement(
+    Button,
+    {
+      variant: "ghost",
       size: "sm",
       onPress: handleZoomIn,
       disabled: !enableZoom || currentScale >= maxScale
     },
     "+"
-  ), /* @__PURE__ */ React31.createElement(
+  ), /* @__PURE__ */ React44.createElement(
     Button,
     {
       variant: "ghost",
@@ -3982,11 +5494,11 @@ var ScaledDiagram = ({
       onPress: handleReset
     },
     "\u27F2"
-  ))), /* @__PURE__ */ React31.createElement(
-    View29,
+  ))), /* @__PURE__ */ React44.createElement(
+    View37,
     {
       style: [
-        styles26.diagramContainer,
+        styles38.diagramContainer,
         {
           width,
           height,
@@ -3994,18 +5506,18 @@ var ScaledDiagram = ({
         }
       ]
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React44.createElement(
       TouchableOpacity17,
       {
         activeOpacity: 1,
         onPress: handleDoubleTap,
-        style: styles26.touchable
+        style: styles38.touchable
       },
-      /* @__PURE__ */ React31.createElement(
-        Animated4.View,
+      /* @__PURE__ */ React44.createElement(
+        Animated6.View,
         {
           style: [
-            styles26.content,
+            styles38.content,
             {
               width: contentWidth,
               height: contentHeight
@@ -4017,7 +5529,7 @@ var ScaledDiagram = ({
         children
       )
     )
-  ), /* @__PURE__ */ React31.createElement(
+  ), /* @__PURE__ */ React44.createElement(
     Typography,
     {
       variant: "caption",
@@ -4030,7 +5542,7 @@ var ScaledDiagram = ({
     currentScale > initialScale ? "reset" : "zoom"
   )));
 };
-var styles26 = StyleSheet26.create({
+var styles38 = StyleSheet38.create({
   container: {
     overflow: "hidden"
   },
@@ -4051,6 +5563,7 @@ var styles26 = StyleSheet26.create({
 ScaledDiagram.displayName = "ScaledDiagram";
 
 export {
+  List,
   FormField,
   FormSectionHeader,
   InputGroup,
@@ -4081,6 +5594,18 @@ export {
   ActionButtons,
   DPad,
   RepeatableFormSection,
+  NumberStepper,
+  StarRating,
+  Accordion,
+  DataList,
+  DataGrid,
+  Carousel,
+  FlipCard,
+  PullToRefresh,
+  SwipeableRow,
+  SortableList,
+  CalendarGrid,
+  Lightbox,
   ScaledDiagram
 };
-//# sourceMappingURL=chunk-YMJZLYLV.js.map
+//# sourceMappingURL=chunk-ETD72PHO.js.map