@almadar/mobile 1.1.0

package/dist/chunk-YMJZLYLV.js

@@ -0,0 +1,4086 @@
+import {
+  ControlButton,
+  Label
+} from "./chunk-6RVITGGH.js";
+import {
+  EmptyState
+} from "./chunk-DY52O4T3.js";
+import {
+  Badge,
+  Button,
+  Card,
+  ErrorState,
+  HStack,
+  Input,
+  LoadingState,
+  ProgressBar,
+  Select,
+  Typography,
+  VStack
+} from "./chunk-7C5JCLLY.js";
+import {
+  useEventBus
+} from "./chunk-YTVYMEKU.js";
+import {
+  useTheme
+} from "./chunk-CUAWHLEK.js";
+
+// src/components/molecules/FormField.tsx
+import React from "react";
+import { View, StyleSheet } from "react-native";
+var FormField = ({
+  label,
+  required,
+  error,
+  helperText,
+  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);
+};
+var styles = StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  labelContainer: {
+    marginBottom: 4
+  }
+});
+FormField.displayName = "FormField";
+
+// src/components/molecules/FormSectionHeader.tsx
+import React2 from "react";
+import { View as View2, StyleSheet as StyleSheet2 } from "react-native";
+var FormSectionHeader = ({
+  title,
+  subtitle,
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  if (isLoading) {
+    return /* @__PURE__ */ React2.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React2.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React2.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React2.createElement(ErrorState, { message: error.message }));
+  }
+  return /* @__PURE__ */ React2.createElement(View2, { style: [styles2.container, style] }, /* @__PURE__ */ React2.createElement(
+    Typography,
+    {
+      variant: "h4",
+      style: { color: theme.colors.foreground }
+    },
+    title
+  ), subtitle && /* @__PURE__ */ React2.createElement(
+    Typography,
+    {
+      variant: "caption",
+      style: [styles2.subtitle, { color: theme.colors["muted-foreground"] }]
+    },
+    subtitle
+  ));
+};
+var styles2 = StyleSheet2.create({
+  container: {
+    marginBottom: 16
+  },
+  subtitle: {
+    marginTop: 4
+  }
+});
+FormSectionHeader.displayName = "FormSectionHeader";
+
+// src/components/molecules/InputGroup.tsx
+import React3 from "react";
+import { View as View3, StyleSheet as StyleSheet3 } from "react-native";
+var InputGroup = ({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  children,
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  if (isLoading) {
+    return /* @__PURE__ */ React3.createElement(View3, { style: [styles3.container, style] }, /* @__PURE__ */ React3.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React3.createElement(View3, { style: [styles3.container, style] }, /* @__PURE__ */ React3.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(
+    Typography,
+    {
+      variant: "caption",
+      style: { color: theme.colors.error }
+    },
+    errorText
+  ) : helperText ? /* @__PURE__ */ React3.createElement(
+    Typography,
+    {
+      variant: "caption",
+      style: { color: theme.colors["muted-foreground"] }
+    },
+    helperText
+  ) : null);
+};
+var styles3 = StyleSheet3.create({
+  container: {
+    width: "100%"
+  }
+});
+InputGroup.displayName = "InputGroup";
+
+// src/components/molecules/Alert.tsx
+import React4 from "react";
+import {
+  View as View4,
+  TouchableOpacity,
+  StyleSheet as StyleSheet4
+} from "react-native";
+var Alert = ({
+  title,
+  message,
+  variant = "info",
+  dismissible = false,
+  onDismiss,
+  dismissAction,
+  style,
+  isLoading,
+  error,
+  actionPayload
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handleDismiss = () => {
+    if (dismissAction) {
+      eventBus.emit(`UI:${dismissAction}`, actionPayload);
+    }
+    onDismiss?.();
+  };
+  const variantStyles = {
+    info: {
+      bg: theme.colors.info,
+      border: theme.colors.info,
+      icon: "\u2139\uFE0F"
+    },
+    success: {
+      bg: theme.colors.success,
+      border: theme.colors.success,
+      icon: "\u2713"
+    },
+    warning: {
+      bg: theme.colors.warning,
+      border: theme.colors.warning,
+      icon: "\u26A0\uFE0F"
+    },
+    error: {
+      bg: theme.colors.error,
+      border: theme.colors.error,
+      icon: "\u2715"
+    }
+  };
+  const { bg, border } = variantStyles[variant];
+  if (isLoading) {
+    return /* @__PURE__ */ React4.createElement(View4, { style: [styles4.container, style] }, /* @__PURE__ */ React4.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React4.createElement(View4, { style: [styles4.container, style] }, /* @__PURE__ */ React4.createElement(ErrorState, { message: error.message }));
+  }
+  return /* @__PURE__ */ React4.createElement(
+    View4,
+    {
+      style: [
+        styles4.container,
+        {
+          backgroundColor: bg + "20",
+          // 20% opacity
+          borderColor: border
+        },
+        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")))
+  );
+};
+var styles4 = StyleSheet4.create({
+  container: {
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 12
+  },
+  icon: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    flex: 1
+  },
+  dismiss: {
+    padding: 4
+  }
+});
+Alert.displayName = "Alert";
+
+// src/components/molecules/Skeleton.tsx
+import React5, { useEffect } from "react";
+import {
+  View as View5,
+  StyleSheet as StyleSheet5,
+  Animated,
+  Easing
+} from "react-native";
+var Skeleton = ({
+  width = "100%",
+  height = 16,
+  borderRadius = 4,
+  style
+}) => {
+  const theme = useTheme();
+  const shimmer = React5.useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(shimmer, {
+        toValue: 1,
+        duration: 1500,
+        easing: Easing.ease,
+        useNativeDriver: true
+      })
+    );
+    animation.start();
+    return () => animation.stop();
+  }, []);
+  const translateX = shimmer.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-200, 200]
+  });
+  return /* @__PURE__ */ React5.createElement(
+    View5,
+    {
+      style: [
+        styles5.container,
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: theme.colors.muted
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React5.createElement(
+      Animated.View,
+      {
+        style: [
+          styles5.shimmer,
+          {
+            transform: [{ translateX }]
+          }
+        ]
+      }
+    )
+  );
+};
+var styles5 = StyleSheet5.create({
+  container: {
+    overflow: "hidden"
+  },
+  shimmer: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(255, 255, 255, 0.2)"
+  }
+});
+Skeleton.displayName = "Skeleton";
+
+// src/components/molecules/SearchInput.tsx
+import React6 from "react";
+import {
+  View as View6,
+  TextInput,
+  TouchableOpacity as TouchableOpacity2,
+  StyleSheet as StyleSheet6
+} from "react-native";
+var SearchInput = ({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Search...",
+  autoFocus = false,
+  style,
+  isLoading,
+  error,
+  changeEvent,
+  submitEvent
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handleChangeText = (text) => {
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { value: text });
+    }
+    onChange?.(text);
+  };
+  const handleSubmit = () => {
+    if (submitEvent) {
+      eventBus.emit(`UI:${submitEvent}`, { value });
+    }
+    onSubmit?.();
+  };
+  const handleClear = () => {
+    handleChangeText("");
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React6.createElement(View6, { style: [styles6.container, style] }, /* @__PURE__ */ React6.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React6.createElement(View6, { style: [styles6.container, style] }, /* @__PURE__ */ React6.createElement(ErrorState, { message: error.message }));
+  }
+  return /* @__PURE__ */ React6.createElement(
+    HStack,
+    {
+      spacing: 8,
+      align: "center",
+      style: [
+        styles6.container,
+        {
+          backgroundColor: theme.colors.card,
+          borderColor: theme.colors.border
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React6.createElement(Typography, { variant: "body", style: { color: theme.colors["muted-foreground"] } }, "\u{1F50D}"),
+    /* @__PURE__ */ React6.createElement(
+      TextInput,
+      {
+        value,
+        onChangeText: handleChangeText,
+        onSubmitEditing: handleSubmit,
+        placeholder,
+        placeholderTextColor: theme.colors["muted-foreground"],
+        autoFocus,
+        returnKeyType: "search",
+        style: [
+          styles6.input,
+          { color: theme.colors.foreground }
+        ]
+      }
+    ),
+    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"))
+  );
+};
+var styles6 = StyleSheet6.create({
+  container: {
+    borderRadius: 8,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    height: 44
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    padding: 0
+  },
+  clear: {
+    padding: 4
+  }
+});
+SearchInput.displayName = "SearchInput";
+
+// src/components/molecules/Tooltip.tsx
+import React7, { useState, useRef } from "react";
+import {
+  View as View7,
+  Text,
+  StyleSheet as StyleSheet7,
+  Modal,
+  TouchableOpacity as TouchableOpacity3,
+  TouchableWithoutFeedback
+} from "react-native";
+var Tooltip = ({
+  content,
+  children,
+  style
+}) => {
+  const theme = useTheme();
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const triggerRef = useRef(null);
+  const showTooltip = () => {
+    triggerRef.current?.measure((x, y, width, height, pageX, pageY) => {
+      setPosition({ x: pageX, y: pageY, width, height });
+      setVisible(true);
+    });
+  };
+  const hideTooltip = () => {
+    setVisible(false);
+  };
+  const tooltipY = position.y - 40;
+  const centerX = position.x + position.width / 2;
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+    TouchableOpacity3,
+    {
+      ref: triggerRef,
+      onPressIn: showTooltip,
+      onPressOut: hideTooltip,
+      style,
+      activeOpacity: 1
+    },
+    children
+  ), /* @__PURE__ */ React7.createElement(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: hideTooltip
+    },
+    /* @__PURE__ */ React7.createElement(TouchableWithoutFeedback, { onPress: hideTooltip }, /* @__PURE__ */ React7.createElement(View7, { style: styles7.overlay }, /* @__PURE__ */ React7.createElement(
+      View7,
+      {
+        style: [
+          styles7.tooltip,
+          {
+            backgroundColor: theme.colors.foreground,
+            top: tooltipY,
+            left: centerX - 60
+          }
+        ]
+      },
+      /* @__PURE__ */ React7.createElement(Text, { style: [styles7.text, { color: theme.colors.background }] }, content),
+      /* @__PURE__ */ React7.createElement(
+        View7,
+        {
+          style: [
+            styles7.arrow,
+            { borderTopColor: theme.colors.foreground }
+          ]
+        }
+      )
+    )))
+  ));
+};
+var styles7 = StyleSheet7.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
+  tooltip: {
+    position: "absolute",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    minWidth: 120,
+    alignItems: "center"
+  },
+  text: {
+    fontSize: 12,
+    textAlign: "center"
+  },
+  arrow: {
+    position: "absolute",
+    bottom: -8,
+    borderLeftWidth: 8,
+    borderRightWidth: 8,
+    borderTopWidth: 8,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent"
+  }
+});
+Tooltip.displayName = "Tooltip";
+
+// src/components/molecules/Popover.tsx
+import React8, { useState as useState2, useRef as useRef2 } from "react";
+import {
+  View as View8,
+  StyleSheet as StyleSheet8,
+  Modal as Modal2,
+  TouchableOpacity as TouchableOpacity4,
+  TouchableWithoutFeedback as TouchableWithoutFeedback2,
+  Dimensions
+} from "react-native";
+var Popover = ({
+  trigger,
+  content,
+  style
+}) => {
+  const theme = useTheme();
+  const [visible, setVisible] = useState2(false);
+  const [position, setPosition] = useState2({ x: 0, y: 0, width: 0, height: 0 });
+  const triggerRef = useRef2(null);
+  const screenHeight = Dimensions.get("window").height;
+  const showPopover = () => {
+    triggerRef.current?.measure((x, y, width, height, pageX, pageY) => {
+      setPosition({ x: pageX, y: pageY, width, height });
+      setVisible(true);
+    });
+  };
+  const hidePopover = () => {
+    setVisible(false);
+  };
+  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(
+    TouchableOpacity4,
+    {
+      ref: triggerRef,
+      onPress: showPopover,
+      style
+    },
+    trigger
+  ), /* @__PURE__ */ React8.createElement(
+    Modal2,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: hidePopover
+    },
+    /* @__PURE__ */ React8.createElement(TouchableWithoutFeedback2, { onPress: hidePopover }, /* @__PURE__ */ React8.createElement(View8, { style: styles8.overlay }, /* @__PURE__ */ React8.createElement(
+      View8,
+      {
+        style: [
+          styles8.popover,
+          {
+            backgroundColor: theme.colors.card,
+            borderColor: theme.colors.border,
+            top: finalY,
+            left: position.x,
+            minWidth: position.width
+          }
+        ]
+      },
+      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 }] })
+    )))
+  ));
+};
+var styles8 = StyleSheet8.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.3)"
+  },
+  popover: {
+    position: "absolute",
+    borderRadius: 8,
+    borderWidth: 1,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4
+  },
+  content: {
+    padding: 12
+  },
+  arrowUp: {
+    position: "absolute",
+    top: -8,
+    left: 20,
+    borderLeftWidth: 8,
+    borderRightWidth: 8,
+    borderBottomWidth: 8,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent"
+  },
+  arrowDown: {
+    position: "absolute",
+    bottom: -8,
+    left: 20,
+    borderLeftWidth: 8,
+    borderRightWidth: 8,
+    borderTopWidth: 8,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent"
+  }
+});
+Popover.displayName = "Popover";
+
+// src/components/molecules/Menu.tsx
+import React9 from "react";
+import {
+  View as View9,
+  TouchableOpacity as TouchableOpacity5,
+  StyleSheet as StyleSheet9,
+  Modal as Modal3,
+  TouchableWithoutFeedback as TouchableWithoutFeedback3,
+  ScrollView
+} from "react-native";
+var Menu = ({
+  trigger,
+  items,
+  style,
+  onSelect
+}) => {
+  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 showMenu = () => {
+    triggerRef.current?.measure((x, y, width, height, pageX, pageY) => {
+      setPosition({ x: pageX, y: pageY + height + 4, width });
+      setVisible(true);
+    });
+  };
+  const hideMenu = () => {
+    setVisible(false);
+  };
+  const handleSelect = (item) => {
+    if (item.disabled) return;
+    if (item.action) {
+      eventBus.emit(`UI:${item.action}`, { itemId: item.id });
+    }
+    onSelect?.(item);
+    hideMenu();
+  };
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    TouchableOpacity5,
+    {
+      ref: triggerRef,
+      onPress: showMenu,
+      style
+    },
+    trigger
+  ), /* @__PURE__ */ React9.createElement(
+    Modal3,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: hideMenu
+    },
+    /* @__PURE__ */ React9.createElement(TouchableWithoutFeedback3, { onPress: hideMenu }, /* @__PURE__ */ React9.createElement(View9, { style: styles9.overlay }, /* @__PURE__ */ React9.createElement(
+      View9,
+      {
+        style: [
+          styles9.menu,
+          {
+            backgroundColor: theme.colors.card,
+            borderColor: theme.colors.border,
+            top: position.y,
+            left: position.x,
+            minWidth: Math.max(position.width, 200)
+          }
+        ]
+      },
+      /* @__PURE__ */ React9.createElement(ScrollView, null, items.map((item) => /* @__PURE__ */ React9.createElement(
+        TouchableOpacity5,
+        {
+          key: item.id,
+          onPress: () => handleSelect(item),
+          disabled: item.disabled,
+          style: [
+            styles9.item,
+            { opacity: item.disabled ? 0.5 : 1 }
+          ]
+        },
+        /* @__PURE__ */ React9.createElement(HStack, { spacing: 12, align: "center" }, item.icon, /* @__PURE__ */ React9.createElement(
+          Typography,
+          {
+            variant: "body",
+            style: { color: theme.colors.foreground }
+          },
+          item.label
+        ))
+      )))
+    )))
+  ));
+};
+var styles9 = StyleSheet9.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.3)"
+  },
+  menu: {
+    position: "absolute",
+    borderRadius: 8,
+    borderWidth: 1,
+    maxHeight: 300,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4
+  },
+  item: {
+    padding: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(0,0,0,0.1)"
+  }
+});
+Menu.displayName = "Menu";
+
+// src/components/molecules/Breadcrumb.tsx
+import React10 from "react";
+import {
+  TouchableOpacity as TouchableOpacity6,
+  ScrollView as ScrollView2,
+  StyleSheet as StyleSheet10
+} from "react-native";
+var Breadcrumb = ({
+  items,
+  style,
+  onNavigate
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handlePress = (item, index) => {
+    if (item.action) {
+      eventBus.emit(`UI:${item.action}`, { href: item.href, index });
+    }
+    onNavigate?.(item, index);
+  };
+  return /* @__PURE__ */ React10.createElement(
+    ScrollView2,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: [styles10.container, style]
+    },
+    /* @__PURE__ */ React10.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(
+        Typography,
+        {
+          variant: "caption",
+          style: { color: theme.colors["muted-foreground"] }
+        },
+        "/"
+      ), isLast ? /* @__PURE__ */ React10.createElement(
+        Typography,
+        {
+          variant: "caption",
+          style: { color: theme.colors.foreground, fontWeight: "500" }
+        },
+        item.label
+      ) : /* @__PURE__ */ React10.createElement(TouchableOpacity6, { onPress: () => handlePress(item, index) }, /* @__PURE__ */ React10.createElement(
+        Typography,
+        {
+          variant: "caption",
+          style: { color: theme.colors.primary }
+        },
+        item.label
+      )));
+    }))
+  );
+};
+var styles10 = StyleSheet10.create({
+  container: {
+    maxWidth: "100%"
+  }
+});
+Breadcrumb.displayName = "Breadcrumb";
+
+// src/components/molecules/ButtonGroup.tsx
+import React11 from "react";
+import {
+  TouchableOpacity as TouchableOpacity7,
+  StyleSheet as StyleSheet11
+} from "react-native";
+var ButtonGroup = ({
+  options,
+  value,
+  onChange,
+  style,
+  changeEvent
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handlePress = (optionValue) => {
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { value: optionValue });
+    }
+    onChange?.(optionValue);
+  };
+  return /* @__PURE__ */ React11.createElement(HStack, { spacing: 4, style: style ? [styles11.container, style] : styles11.container }, options.map((option) => {
+    const isSelected = value === option.value;
+    return /* @__PURE__ */ React11.createElement(
+      TouchableOpacity7,
+      {
+        key: option.value,
+        onPress: () => handlePress(option.value),
+        disabled: option.disabled,
+        style: [
+          styles11.button,
+          {
+            backgroundColor: isSelected ? theme.colors.primary : theme.colors.card,
+            borderColor: theme.colors.border,
+            opacity: option.disabled ? 0.5 : 1
+          }
+        ]
+      },
+      /* @__PURE__ */ React11.createElement(
+        Typography,
+        {
+          variant: "body",
+          style: {
+            color: isSelected ? theme.colors["primary-foreground"] : theme.colors.foreground
+          }
+        },
+        option.label
+      )
+    );
+  }));
+};
+var styles11 = StyleSheet11.create({
+  container: {
+    flexWrap: "wrap"
+  },
+  button: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1
+  }
+});
+ButtonGroup.displayName = "ButtonGroup";
+
+// src/components/molecules/ErrorBoundary.tsx
+import React12 from "react";
+import { View as View10 } from "react-native";
+var ErrorBoundary = class extends React12.Component {
+  constructor(props) {
+    super(props);
+    this.reset = () => {
+      this.setState({ error: null });
+    };
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    const { error } = this.state;
+    const { children, fallback, style } = this.props;
+    if (error) {
+      const fallbackContent = this.renderFallback(error, fallback);
+      if (style) {
+        return /* @__PURE__ */ React12.createElement(View10, { style }, fallbackContent);
+      }
+      return fallbackContent;
+    }
+    return children;
+  }
+  renderFallback(error, fallback) {
+    if (typeof fallback === "function") {
+      return fallback(error, this.reset);
+    }
+    if (fallback) {
+      return fallback;
+    }
+    return /* @__PURE__ */ React12.createElement(
+      ErrorState,
+      {
+        message: `Something went wrong: ${error.message}`,
+        onRetry: this.reset
+      }
+    );
+  }
+};
+ErrorBoundary.displayName = "ErrorBoundary";
+
+// src/components/molecules/FloatingActionButton.tsx
+import React13, { useState as useState3, useRef as useRef3 } from "react";
+import {
+  View as View11,
+  TouchableOpacity as TouchableOpacity8,
+  Animated as Animated2,
+  StyleSheet as StyleSheet12,
+  Text as Text2
+} from "react-native";
+var FloatingActionButton = ({
+  action,
+  actions,
+  icon,
+  onPress,
+  variant = "primary",
+  position = "bottom-right",
+  style
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [isExpanded, setIsExpanded] = useState3(false);
+  const animation = useRef3(new Animated2.Value(0)).current;
+  const resolvedAction = action ?? (icon ? {
+    icon,
+    onPress: onPress ?? (() => {
+    }),
+    variant
+  } : void 0);
+  const getPositionStyle = () => {
+    switch (position) {
+      case "bottom-right":
+        return { bottom: 24, right: 24 };
+      case "bottom-left":
+        return { bottom: 24, left: 24 };
+      case "bottom-center":
+        return { bottom: 24, alignSelf: "center" };
+      case "top-right":
+        return { top: 24, right: 24 };
+      case "top-left":
+        return { top: 24, left: 24 };
+      case "top-center":
+        return { top: 24, alignSelf: "center" };
+      default:
+        return { bottom: 24, right: 24 };
+    }
+  };
+  const getVariantColor = (v) => {
+    switch (v) {
+      case "primary":
+        return theme.colors.primary;
+      case "secondary":
+        return theme.colors.secondary;
+      case "success":
+        return "#22c55e";
+      case "danger":
+        return "#ef4444";
+      case "warning":
+        return "#f59e0b";
+      default:
+        return theme.colors.primary;
+    }
+  };
+  const toggleExpanded = () => {
+    const newValue = !isExpanded;
+    setIsExpanded(newValue);
+    Animated2.spring(animation, {
+      toValue: newValue ? 1 : 0,
+      useNativeDriver: true
+    }).start();
+  };
+  if (resolvedAction && (!actions || actions.length === 0)) {
+    return /* @__PURE__ */ React13.createElement(
+      TouchableOpacity8,
+      {
+        onPress: resolvedAction.onPress,
+        style: [
+          styles12.fab,
+          { backgroundColor: getVariantColor(resolvedAction.variant || "primary") },
+          getPositionStyle(),
+          style
+        ],
+        accessibilityLabel: resolvedAction.label || "Action"
+      },
+      /* @__PURE__ */ React13.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) => {
+      const translateY = animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [20 * (actions.length - index), 0]
+      });
+      const opacity = animation.interpolate({
+        inputRange: [0, 0.5, 1],
+        outputRange: [0, 0, 1]
+      });
+      return /* @__PURE__ */ React13.createElement(
+        Animated2.View,
+        {
+          key: actionItem.id,
+          style: [
+            styles12.actionRow,
+            { opacity, transform: [{ translateY }] }
+          ]
+        },
+        /* @__PURE__ */ React13.createElement(
+          TouchableOpacity8,
+          {
+            onPress: () => {
+              setIsExpanded(false);
+              if (actionItem.event)
+                eventBus.emit(`UI:${actionItem.event}`, {
+                  actionId: actionItem.id
+                });
+              actionItem.onPress?.();
+            },
+            style: [
+              styles12.actionButton,
+              { backgroundColor: getVariantColor(actionItem.variant || "primary") }
+            ]
+          },
+          /* @__PURE__ */ React13.createElement(Text2, { style: styles12.icon }, actionItem.icon)
+        ),
+        /* @__PURE__ */ React13.createElement(View11, { style: styles12.labelContainer }, /* @__PURE__ */ React13.createElement(Text2, { style: styles12.label }, actionItem.label))
+      );
+    })), /* @__PURE__ */ React13.createElement(
+      TouchableOpacity8,
+      {
+        onPress: () => {
+          if (actions.length === 1) {
+            if (actions[0].event)
+              eventBus.emit(`UI:${actions[0].event}`, {
+                actionId: actions[0].id
+              });
+            actions[0].onPress?.();
+          } else {
+            toggleExpanded();
+          }
+        },
+        style: [
+          styles12.fab,
+          {
+            backgroundColor: isExpanded ? theme.colors.secondary : theme.colors.primary
+          }
+        ]
+      },
+      /* @__PURE__ */ React13.createElement(
+        Animated2.Text,
+        {
+          style: [
+            styles12.icon,
+            {
+              transform: [
+                {
+                  rotate: animation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ["0deg", "45deg"]
+                  })
+                }
+              ]
+            }
+          ]
+        },
+        "+"
+      )
+    ));
+  }
+  return null;
+};
+var styles12 = StyleSheet12.create({
+  container: {
+    position: "absolute",
+    zIndex: 50,
+    alignItems: "flex-end"
+  },
+  fab: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5
+  },
+  icon: {
+    fontSize: 24,
+    color: "#fff",
+    fontWeight: "300"
+  },
+  actionsContainer: {
+    marginBottom: 12,
+    gap: 8
+  },
+  actionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  actionButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  labelContainer: {
+    backgroundColor: "rgba(0,0,0,0.8)",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4
+  },
+  label: {
+    color: "#fff",
+    fontSize: 12
+  }
+});
+FloatingActionButton.displayName = "FloatingActionButton";
+
+// src/components/molecules/Flex.tsx
+import React14 from "react";
+import { View as View12 } from "react-native";
+var gapValues = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  "2xl": 48
+};
+var Flex = ({
+  direction = "row",
+  wrap = "nowrap",
+  align = "stretch",
+  justify = "flex-start",
+  gap = "none",
+  grow,
+  shrink,
+  basis,
+  style,
+  children
+}) => {
+  const flexStyle = {
+    flexDirection: direction,
+    flexWrap: wrap,
+    alignItems: align,
+    justifyContent: justify,
+    gap: gapValues[gap]
+  };
+  if (grow !== void 0) {
+    flexStyle.flexGrow = grow === true ? 1 : grow === false ? 0 : grow;
+  }
+  if (shrink !== void 0) {
+    flexStyle.flexShrink = shrink === true ? 1 : shrink === false ? 0 : shrink;
+  }
+  if (basis !== void 0) {
+    flexStyle.flexBasis = typeof basis === "number" ? basis : void 0;
+  }
+  return /* @__PURE__ */ React14.createElement(View12, { style: [flexStyle, ...style ? [style] : []] }, children);
+};
+Flex.displayName = "Flex";
+
+// src/components/molecules/SimpleGrid.tsx
+import React15 from "react";
+import { View as View13 } from "react-native";
+var gapValues2 = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+var SimpleGrid = ({
+  minChildWidth = 150,
+  cols,
+  gap = "md",
+  style,
+  children
+}) => {
+  const childrenArray = React15.Children.toArray(children);
+  const gapValue = gapValues2[gap];
+  if (cols) {
+    const rowStyle = {
+      flexDirection: "row",
+      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)));
+  }
+  const containerStyle = {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: gapValue
+  };
+  const itemStyle = {
+    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)));
+};
+SimpleGrid.displayName = "SimpleGrid";
+
+// src/components/molecules/Container.tsx
+import React16 from "react";
+import { View as View14 } from "react-native";
+var sizeValues = {
+  xs: 320,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  full: 99999
+};
+var paddingValues = {
+  none: 0,
+  sm: 16,
+  md: 24,
+  lg: 32,
+  xl: 48
+};
+var Container = ({
+  size,
+  maxWidth,
+  padding = "md",
+  center = true,
+  style,
+  children
+}) => {
+  const resolvedSize = maxWidth ?? size ?? "lg";
+  const containerStyle = {
+    width: "100%",
+    maxWidth: sizeValues[resolvedSize],
+    paddingHorizontal: paddingValues[padding],
+    ...center && { alignSelf: "center" }
+  };
+  return /* @__PURE__ */ React16.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";
+var gapValues3 = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32
+};
+function Grid({
+  columns,
+  gap = "md",
+  style,
+  data,
+  renderItem,
+  keyExtractor,
+  children
+}) {
+  const gapValue = gapValues3[gap];
+  if (data && renderItem) {
+    return /* @__PURE__ */ React17.createElement(
+      FlatList,
+      {
+        data,
+        renderItem,
+        keyExtractor,
+        numColumns: columns,
+        columnWrapperStyle: { gap: gapValue },
+        contentContainerStyle: [
+          { gap: gapValue },
+          ...style ? [style] : []
+        ]
+      }
+    );
+  }
+  const containerStyle = {
+    flexDirection: "row",
+    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(
+    View15,
+    {
+      key: index,
+      style: {
+        flex: 1 / columns,
+        padding: gapValue / 2
+      }
+    },
+    child
+  )));
+}
+Grid.displayName = "Grid";
+
+// src/components/molecules/SidePanel.tsx
+import React18 from "react";
+import {
+  View as View16,
+  StyleSheet as StyleSheet13,
+  TouchableOpacity as TouchableOpacity9,
+  Animated as Animated3,
+  Dimensions as Dimensions2
+} from "react-native";
+var { width: SCREEN_WIDTH } = Dimensions2.get("window");
+var SidePanel = ({
+  title,
+  children,
+  isOpen,
+  onClose,
+  width = SCREEN_WIDTH * 0.8,
+  position = "right",
+  showOverlay = true,
+  style,
+  isLoading,
+  error,
+  closeEvent
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const translateX = React18.useRef(
+    new Animated3.Value(position === "right" ? SCREEN_WIDTH : -SCREEN_WIDTH)
+  ).current;
+  React18.useEffect(() => {
+    Animated3.timing(translateX, {
+      toValue: isOpen ? 0 : position === "right" ? width : -width,
+      duration: 300,
+      useNativeDriver: true
+    }).start();
+  }, [isOpen, position, translateX, width]);
+  const handleClose = () => {
+    if (closeEvent) {
+      eventBus.emit(`UI:${closeEvent}`, {});
+    }
+    onClose();
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React18.createElement(View16, { style: styles13.overlay }, showOverlay && /* @__PURE__ */ React18.createElement(
+    TouchableOpacity9,
+    {
+      style: styles13.backdrop,
+      activeOpacity: 1,
+      onPress: handleClose
+    }
+  ), /* @__PURE__ */ React18.createElement(
+    Animated3.View,
+    {
+      style: [
+        styles13.panel,
+        {
+          width,
+          backgroundColor: theme.colors.card,
+          [position]: 0,
+          transform: [{ translateX }],
+          borderLeftColor: theme.colors.border,
+          borderRightColor: theme.colors.border
+        },
+        position === "right" ? styles13.borderLeft : styles13.borderRight,
+        style
+      ]
+    },
+    /* @__PURE__ */ React18.createElement(
+      View16,
+      {
+        style: [
+          styles13.header,
+          {
+            borderBottomColor: theme.colors.border,
+            backgroundColor: theme.colors.card
+          }
+        ]
+      },
+      /* @__PURE__ */ React18.createElement(Typography, { variant: "h4" }, title),
+      /* @__PURE__ */ React18.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)
+  ));
+};
+var styles13 = StyleSheet13.create({
+  overlay: {
+    ...StyleSheet13.absoluteFillObject,
+    zIndex: 1e3,
+    flexDirection: "row"
+  },
+  backdrop: {
+    ...StyleSheet13.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  panel: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    shadowColor: "#000",
+    shadowOffset: { width: -2, height: 0 },
+    shadowOpacity: 0.25,
+    shadowRadius: 5,
+    elevation: 5,
+    zIndex: 1001
+  },
+  borderLeft: {
+    borderLeftWidth: 1
+  },
+  borderRight: {
+    borderRightWidth: 1
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 16,
+    borderBottomWidth: 1
+  },
+  content: {
+    flex: 1,
+    padding: 16
+  }
+});
+SidePanel.displayName = "SidePanel";
+
+// src/components/molecules/Navigation.tsx
+import React19 from "react";
+import {
+  View as View17,
+  StyleSheet as StyleSheet14,
+  TouchableOpacity as TouchableOpacity10,
+  ScrollView as ScrollView3
+} from "react-native";
+var Navigation = ({
+  items,
+  orientation = "horizontal",
+  style,
+  variant = "default",
+  isLoading,
+  error,
+  changeEvent
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handlePress = (item) => {
+    if (item.disabled) return;
+    if (item.event) {
+      eventBus.emit(`UI:${item.event}`, { itemId: item.id, navigatesTo: item.navigatesTo });
+    }
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { itemId: item.id, navigatesTo: item.navigatesTo });
+    }
+    item.onPress?.();
+  };
+  const getItemStyle = (isActive) => {
+    switch (variant) {
+      case "pills":
+        return {
+          backgroundColor: isActive ? theme.colors.primary : "transparent",
+          borderRadius: theme.borderRadius.full
+        };
+      case "underlined":
+        return {
+          borderBottomWidth: 2,
+          borderBottomColor: isActive ? theme.colors.primary : "transparent",
+          backgroundColor: "transparent",
+          borderRadius: 0
+        };
+      default:
+        return {
+          backgroundColor: isActive ? theme.colors.card : "transparent",
+          borderRadius: theme.borderRadius.md
+        };
+    }
+  };
+  const getTextColor = (isActive) => {
+    if (variant === "pills" && isActive) {
+      return theme.colors["primary-foreground"];
+    }
+    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..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React19.createElement(View17, { style: [styles14.container, style] }, /* @__PURE__ */ React19.createElement(ErrorState, { message: error.message }));
+  }
+  const renderItem = (item) => {
+    const isActive = item.isActive ?? false;
+    return /* @__PURE__ */ React19.createElement(
+      TouchableOpacity10,
+      {
+        key: item.id,
+        onPress: () => handlePress(item),
+        disabled: item.disabled,
+        style: [
+          styles14.item,
+          getItemStyle(isActive),
+          item.disabled && { opacity: 0.5 }
+        ],
+        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))
+    );
+  };
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ React19.createElement(
+      ScrollView3,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: [styles14.horizontalContainer, style]
+      },
+      items.map(renderItem)
+    );
+  }
+  return /* @__PURE__ */ React19.createElement(VStack, { spacing: 4, style: [styles14.verticalContainer, ...style ? [style] : []] }, items.map(renderItem));
+};
+var styles14 = StyleSheet14.create({
+  container: {
+    width: "100%"
+  },
+  horizontalContainer: {
+    flexDirection: "row",
+    paddingVertical: 8,
+    paddingHorizontal: 4
+  },
+  verticalContainer: {
+    width: "100%",
+    padding: 8
+  },
+  item: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginHorizontal: 4
+  }
+});
+Navigation.displayName = "Navigation";
+
+// src/components/molecules/RelationSelect.tsx
+import React20, { 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,
+  SafeAreaView
+} from "react-native";
+var RelationSelect = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select...",
+  disabled = false,
+  style,
+  textStyle,
+  isLoading,
+  error,
+  entity,
+  multiple = false,
+  searchable = true,
+  maxSelections,
+  changeEvent,
+  searchEvent,
+  actionPayload
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [isOpen, setIsOpen] = useState4(false);
+  const [searchQuery, setSearchQuery] = useState4("");
+  const selectedValues = useMemo(() => {
+    if (multiple) {
+      return Array.isArray(value) ? value : value ? [value] : [];
+    }
+    return value ? [value] : [];
+  }, [value, multiple]);
+  const selectedOptions = useMemo(() => {
+    return options.filter((opt) => selectedValues.includes(opt.id));
+  }, [options, selectedValues]);
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery.trim()) return options;
+    const query = searchQuery.toLowerCase();
+    return options.filter(
+      (opt) => opt.label.toLowerCase().includes(query) || opt.subtitle?.toLowerCase().includes(query)
+    );
+  }, [options, searchQuery]);
+  const handleSearchChange = (query) => {
+    setSearchQuery(query);
+    if (searchEvent) {
+      eventBus.emit(`UI:${searchEvent}`, { ...actionPayload, query, entity });
+    }
+  };
+  const handleSelect = (selectedId) => {
+    if (multiple) {
+      const currentValues = selectedValues;
+      let newValues;
+      if (currentValues.includes(selectedId)) {
+        newValues = currentValues.filter((id) => id !== selectedId);
+      } else {
+        if (maxSelections && currentValues.length >= maxSelections) {
+          return;
+        }
+        newValues = [...currentValues, selectedId];
+      }
+      if (changeEvent) {
+        eventBus.emit(`UI:${changeEvent}`, {
+          ...actionPayload,
+          value: newValues,
+          entity
+        });
+      }
+      onChange?.(newValues);
+    } else {
+      if (changeEvent) {
+        eventBus.emit(`UI:${changeEvent}`, {
+          ...actionPayload,
+          value: selectedId,
+          entity
+        });
+      }
+      onChange?.(selectedId);
+      setIsOpen(false);
+    }
+  };
+  const handleClear = () => {
+    if (multiple) {
+      if (changeEvent) {
+        eventBus.emit(`UI:${changeEvent}`, { ...actionPayload, value: [], entity });
+      }
+      onChange?.([]);
+    } else {
+      if (changeEvent) {
+        eventBus.emit(`UI:${changeEvent}`, { ...actionPayload, value: void 0, entity });
+      }
+      onChange?.("");
+    }
+  };
+  const handleOpen = () => {
+    if (!disabled && !isLoading) {
+      setSearchQuery("");
+      setIsOpen(true);
+    }
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    setSearchQuery("");
+  };
+  const renderOption = ({ item }) => {
+    const isSelected = selectedValues.includes(item.id);
+    return /* @__PURE__ */ React20.createElement(
+      TouchableOpacity11,
+      {
+        style: [
+          styles15.option,
+          {
+            backgroundColor: isSelected ? theme.colors.primary : theme.colors.card,
+            borderBottomColor: theme.colors.border
+          }
+        ],
+        onPress: () => handleSelect(item.id)
+      },
+      /* @__PURE__ */ React20.createElement(HStack, { spacing: 12, align: "center" }, item.avatarUri ? /* @__PURE__ */ React20.createElement(
+        View18,
+        {
+          style: [
+            styles15.avatar,
+            {
+              backgroundColor: isSelected ? theme.colors["primary-foreground"] : theme.colors.muted
+            }
+          ]
+        },
+        /* @__PURE__ */ React20.createElement(Text3, { style: { fontSize: 20 } }, "\u{1F464}")
+      ) : /* @__PURE__ */ React20.createElement(
+        View18,
+        {
+          style: [
+            styles15.avatarPlaceholder,
+            {
+              backgroundColor: isSelected ? theme.colors["primary-foreground"] : theme.colors.muted
+            }
+          ]
+        },
+        /* @__PURE__ */ React20.createElement(Text3, { style: { fontSize: 16 } }, item.label.charAt(0).toUpperCase())
+      ), /* @__PURE__ */ React20.createElement(VStack, { spacing: 2, style: styles15.optionContent }, /* @__PURE__ */ React20.createElement(
+        Text3,
+        {
+          style: [
+            styles15.optionLabel,
+            {
+              color: isSelected ? theme.colors["primary-foreground"] : theme.colors.foreground
+            },
+            textStyle
+          ],
+          numberOfLines: 1
+        },
+        item.label
+      ), item.subtitle && /* @__PURE__ */ React20.createElement(
+        Text3,
+        {
+          style: [
+            styles15.optionSubtitle,
+            {
+              color: isSelected ? `${theme.colors["primary-foreground"]}99` : theme.colors["muted-foreground"]
+            }
+          ],
+          numberOfLines: 1
+        },
+        item.subtitle
+      )), isSelected && /* @__PURE__ */ React20.createElement(
+        Typography,
+        {
+          variant: "body",
+          style: { color: theme.colors["primary-foreground"] }
+        },
+        "\u2713"
+      )),
+      item.metadata && /* @__PURE__ */ React20.createElement(HStack, { spacing: 8, style: styles15.metadata }, Object.entries(item.metadata).map(([key, val]) => /* @__PURE__ */ React20.createElement(
+        Badge,
+        {
+          key,
+          variant: isSelected ? "secondary" : "default",
+          size: "sm"
+        },
+        val
+      )))
+    );
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React20.createElement(View18, { style: [styles15.container, style] }, /* @__PURE__ */ React20.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__ */ React20.createElement(View18, { style: [styles15.container, style] }, /* @__PURE__ */ React20.createElement(
+    TouchableOpacity11,
+    {
+      onPress: handleOpen,
+      disabled,
+      activeOpacity: 0.8,
+      style: [
+        styles15.button,
+        {
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.card,
+          opacity: disabled ? 0.5 : 1
+        }
+      ]
+    },
+    /* @__PURE__ */ React20.createElement(View18, { style: styles15.buttonContent }, selectedOptions.length === 0 ? /* @__PURE__ */ React20.createElement(
+      Text3,
+      {
+        style: [
+          styles15.buttonText,
+          {
+            color: theme.colors["muted-foreground"]
+          },
+          textStyle
+        ],
+        numberOfLines: 1
+      },
+      placeholder
+    ) : /* @__PURE__ */ React20.createElement(HStack, { spacing: 8, style: styles15.selectedContainer }, selectedOptions.map((opt) => /* @__PURE__ */ React20.createElement(
+      View18,
+      {
+        key: opt.id,
+        style: [
+          styles15.selectedChip,
+          { backgroundColor: theme.colors.primary }
+        ]
+      },
+      /* @__PURE__ */ React20.createElement(
+        Text3,
+        {
+          style: [
+            styles15.selectedChipText,
+            { color: theme.colors["primary-foreground"] }
+          ],
+          numberOfLines: 1
+        },
+        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(
+      TouchableOpacity11,
+      {
+        onPress: handleClear,
+        style: styles15.clearButton,
+        hitSlop: { top: 10, bottom: 10, left: 10, right: 10 }
+      },
+      /* @__PURE__ */ React20.createElement(
+        Typography,
+        {
+          variant: "body",
+          style: { color: theme.colors["muted-foreground"] }
+        },
+        "\u2715"
+      )
+    ),
+    /* @__PURE__ */ React20.createElement(Text3, { style: [styles15.chevron, { color: theme.colors["muted-foreground"] }] }, "\u25BC")
+  ), /* @__PURE__ */ React20.createElement(
+    Modal4,
+    {
+      visible: isOpen,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: handleClose
+    },
+    /* @__PURE__ */ React20.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(
+        Input,
+        {
+          value: searchQuery,
+          onChangeText: handleSearchChange,
+          placeholder: "Search...",
+          changeEvent: searchEvent
+        }
+      )),
+      filteredOptions.length === 0 ? /* @__PURE__ */ React20.createElement(EmptyState, { message: "No matching options" }) : /* @__PURE__ */ React20.createElement(
+        FlatList2,
+        {
+          data: filteredOptions,
+          keyExtractor: (item) => item.id,
+          renderItem: renderOption,
+          contentContainerStyle: styles15.listContent
+        }
+      )
+    )
+  ));
+};
+var styles15 = StyleSheet15.create({
+  container: {
+    width: "100%"
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    minHeight: 48
+  },
+  buttonContent: {
+    flex: 1
+  },
+  buttonText: {
+    fontSize: 16
+  },
+  selectedContainer: {
+    flexWrap: "wrap",
+    flex: 1
+  },
+  selectedChip: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 16
+  },
+  selectedChipText: {
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  clearButton: {
+    padding: 4,
+    marginRight: 8
+  },
+  chevron: {
+    fontSize: 12
+  },
+  modalContainer: {
+    flex: 1
+  },
+  modalHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1
+  },
+  searchContainer: {
+    padding: 16
+  },
+  listContent: {
+    paddingBottom: 20
+  },
+  option: {
+    padding: 16,
+    borderBottomWidth: 1
+  },
+  optionContent: {
+    flex: 1
+  },
+  optionLabel: {
+    fontSize: 16,
+    fontWeight: "500"
+  },
+  optionSubtitle: {
+    fontSize: 14
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  avatarPlaceholder: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  metadata: {
+    marginTop: 8,
+    marginLeft: 52
+  }
+});
+RelationSelect.displayName = "RelationSelect";
+
+// src/components/molecules/FilterGroup.tsx
+import React21, { useState as useState5, useCallback } from "react";
+import { View as View19, StyleSheet as StyleSheet16, TouchableOpacity as TouchableOpacity12 } from "react-native";
+var FilterGroup = ({
+  entity,
+  filters,
+  onFilterChange,
+  onClearAll,
+  style,
+  variant = "default",
+  showIcon = true,
+  query,
+  isLoading: _isLoading
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [selectedValues, setSelectedValues] = useState5(
+    {}
+  );
+  const handleFilterSelect = useCallback(
+    (field, value) => {
+      setSelectedValues((prev) => {
+        if (value === null || value === "" || value === "all") {
+          const next = { ...prev };
+          delete next[field];
+          return next;
+        }
+        return { ...prev, [field]: value };
+      });
+      onFilterChange?.(field, value === "all" ? null : value);
+      eventBus.emit("UI:FILTER", {
+        entity,
+        field,
+        value: value === "all" ? null : value,
+        query
+      });
+    },
+    [onFilterChange, eventBus, entity, query]
+  );
+  const handleClearAll = useCallback(() => {
+    setSelectedValues({});
+    onClearAll?.();
+    eventBus.emit("UI:CLEAR_FILTERS", { entity, query });
+  }, [onClearAll, eventBus, entity, query]);
+  const activeFilterCount = Object.keys(selectedValues).length;
+  const buildSelectOptions = (filter) => {
+    return [
+      { value: "all", label: "All" },
+      ...filter.options?.map((opt) => ({
+        value: opt,
+        label: opt
+      })) || []
+    ];
+  };
+  if (variant === "pills") {
+    return /* @__PURE__ */ React21.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(
+        Typography,
+        {
+          variant: "caption",
+          color: theme.colors["muted-foreground"]
+        },
+        filter.label,
+        ":"
+      ), /* @__PURE__ */ React21.createElement(HStack, { spacing: 0, style: styles16.pillGroup }, /* @__PURE__ */ React21.createElement(
+        TouchableOpacity12,
+        {
+          onPress: () => handleFilterSelect(filter.field, null),
+          style: [
+            styles16.pill,
+            {
+              backgroundColor: !selectedValues[filter.field] ? theme.colors.primary : theme.colors.card,
+              borderColor: theme.colors.border
+            }
+          ]
+        },
+        /* @__PURE__ */ React21.createElement(
+          Typography,
+          {
+            variant: "caption",
+            style: {
+              color: !selectedValues[filter.field] ? theme.colors["primary-foreground"] : theme.colors["muted-foreground"]
+            }
+          },
+          "All"
+        )
+      ), filter.options?.map((option) => /* @__PURE__ */ React21.createElement(
+        TouchableOpacity12,
+        {
+          key: option,
+          onPress: () => handleFilterSelect(filter.field, option),
+          style: [
+            styles16.pill,
+            styles16.pillWithBorder,
+            {
+              backgroundColor: selectedValues[filter.field] === option ? theme.colors.primary : theme.colors.card,
+              borderColor: theme.colors.border
+            }
+          ]
+        },
+        /* @__PURE__ */ React21.createElement(
+          Typography,
+          {
+            variant: "caption",
+            style: {
+              color: selectedValues[filter.field] === option ? theme.colors["primary-foreground"] : theme.colors["muted-foreground"]
+            }
+          },
+          option
+        )
+      ))))),
+      activeFilterCount > 0 && /* @__PURE__ */ React21.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(
+      Typography,
+      {
+        variant: "label",
+        color: theme.colors["muted-foreground"]
+      },
+      "Filters"
+    )), filters.map((filter) => /* @__PURE__ */ React21.createElement(VStack, { key: filter.field, spacing: 4 }, /* @__PURE__ */ React21.createElement(
+      Typography,
+      {
+        variant: "label",
+        color: theme.colors["muted-foreground"]
+      },
+      filter.label
+    ), /* @__PURE__ */ React21.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"));
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ React21.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(
+        Select,
+        {
+          value: selectedValues[filter.field] || "all",
+          onChange: (newValue) => handleFilterSelect(filter.field, newValue),
+          options: [
+            { value: "all", label: `All ${filter.label}` },
+            ...filter.options?.map((opt) => ({
+              value: opt,
+              label: opt
+            })) || []
+          ]
+        }
+      ))),
+      activeFilterCount > 0 && /* @__PURE__ */ React21.createElement(React21.Fragment, null, Object.entries(selectedValues).map(([field, value]) => {
+        const filterDef = filters.find((f) => f.field === field);
+        return /* @__PURE__ */ React21.createElement(
+          TouchableOpacity12,
+          {
+            key: field,
+            onPress: () => handleFilterSelect(field, null)
+          },
+          /* @__PURE__ */ React21.createElement(Badge, { variant: "primary", size: "md" }, filterDef?.label, ": ", value, " \u2715")
+        );
+      }), /* @__PURE__ */ React21.createElement(Button, { variant: "ghost", size: "sm", onPress: handleClearAll }, "Clear all"))
+    );
+  }
+  return /* @__PURE__ */ React21.createElement(
+    View19,
+    {
+      style: [
+        styles16.defaultContainer,
+        {
+          backgroundColor: theme.colors.card,
+          borderColor: theme.colors.border
+        },
+        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(
+      Typography,
+      {
+        variant: "label",
+        color: theme.colors["muted-foreground"]
+      },
+      "Filters"
+    )), filters.map((filter) => /* @__PURE__ */ React21.createElement(VStack, { key: filter.field, spacing: 4 }, /* @__PURE__ */ React21.createElement(
+      Typography,
+      {
+        variant: "label",
+        color: theme.colors["muted-foreground"]
+      },
+      filter.label
+    ), /* @__PURE__ */ React21.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")))
+  );
+};
+var styles16 = StyleSheet16.create({
+  pillsContainer: {
+    flexWrap: "wrap"
+  },
+  pillGroup: {
+    borderRadius: 6,
+    overflow: "hidden",
+    borderWidth: 1
+  },
+  pill: {
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  pillWithBorder: {
+    borderLeftWidth: 1
+  },
+  verticalContainer: {
+    width: "100%"
+  },
+  compactContainer: {
+    flexWrap: "wrap"
+  },
+  compactSelect: {
+    minWidth: 120
+  },
+  defaultContainer: {
+    padding: 16,
+    borderRadius: 8,
+    borderWidth: 1
+  },
+  defaultContent: {
+    flexWrap: "wrap"
+  },
+  clearSection: {
+    marginLeft: "auto"
+  }
+});
+FilterGroup.displayName = "FilterGroup";
+
+// src/components/molecules/Meter.tsx
+import React22, { 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 },
+  { value: 70, color: theme.colors.warning },
+  { value: 100, color: theme.colors.success }
+];
+function getColorForValue(value, max, thresholds, theme) {
+  const percentage = value / max * 100;
+  for (const threshold of thresholds) {
+    if (percentage <= threshold.value) {
+      return threshold.color;
+    }
+  }
+  return thresholds[thresholds.length - 1]?.color ?? theme.colors.primary;
+}
+var Meter = ({
+  value,
+  min = 0,
+  max = 100,
+  label,
+  unit,
+  variant = "linear",
+  thresholds: thresholdsProp,
+  segments = 5,
+  showValue = true,
+  actions,
+  entity,
+  isLoading = false,
+  error,
+  style
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const thresholds = useMemo2(
+    () => thresholdsProp ?? getDefaultThresholds(theme),
+    [thresholdsProp, theme]
+  );
+  const handleAction = useCallback2(
+    (action) => {
+      if (action.event) {
+        eventBus.emit(`UI:${action.event}`, { value, entity });
+      }
+      if (action.navigatesTo) {
+        eventBus.emit("UI:NAVIGATE", { to: action.navigatesTo });
+      }
+    },
+    [eventBus, value, entity]
+  );
+  const onActionPress = (action) => () => {
+    handleAction(action);
+  };
+  const percentage = useMemo2(() => {
+    const range = max - min;
+    if (range <= 0) return 0;
+    return Math.min(Math.max((value - min) / range * 100, 0), 100);
+  }, [value, min, max]);
+  const activeColor = useMemo2(
+    () => getColorForValue(value, max, thresholds, theme),
+    [value, max, thresholds, theme]
+  );
+  const displayValue = useMemo2(() => {
+    const formatted = Number.isInteger(value) ? value.toString() : value.toFixed(1);
+    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..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React22.createElement(Card, { style: [styles17.container, style ?? {}] }, /* @__PURE__ */ React22.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(
+      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) => {
+      const isActive = idx < activeSegments;
+      const segColor = isActive ? getColorForValue(
+        (idx + 1) / segments * max,
+        max,
+        thresholds,
+        theme
+      ) : void 0;
+      return /* @__PURE__ */ React22.createElement(
+        View20,
+        {
+          key: idx,
+          style: [
+            styles17.segment,
+            {
+              backgroundColor: isActive ? segColor : theme.colors.muted
+            }
+          ]
+        }
+      );
+    })), thresholds.some((t) => t.label) && /* @__PURE__ */ React22.createElement(HStack, { justify: "space-between", style: styles17.thresholdLabels }, thresholds.map((t, idx) => /* @__PURE__ */ React22.createElement(
+      Typography,
+      {
+        key: idx,
+        variant: "caption",
+        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(
+      Badge,
+      {
+        variant: action.variant ?? "default",
+        size: "sm"
+      },
+      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(
+    Typography,
+    {
+      variant: "caption",
+      color: theme.colors["muted-foreground"]
+    },
+    label
+  ), showValue && /* @__PURE__ */ React22.createElement(Typography, { variant: "body", style: { fontWeight: "600" } }, displayValue)), /* @__PURE__ */ React22.createElement(
+    View20,
+    {
+      style: [
+        styles17.track,
+        {
+          backgroundColor: theme.colors.muted
+        }
+      ]
+    },
+    /* @__PURE__ */ React22.createElement(
+      View20,
+      {
+        style: [
+          styles17.fill,
+          {
+            width: `${percentage}%`,
+            backgroundColor: activeColor
+          }
+        ]
+      }
+    )
+  ), /* @__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(
+    Badge,
+    {
+      variant: action.variant ?? "default",
+      size: "sm"
+    },
+    action.label
+  ))))));
+};
+var styles17 = StyleSheet17.create({
+  container: {
+    padding: 16
+  },
+  track: {
+    width: "100%",
+    height: 12,
+    borderRadius: 6,
+    overflow: "hidden"
+  },
+  fill: {
+    height: "100%",
+    borderRadius: 6
+  },
+  segmentsContainer: {
+    width: "100%"
+  },
+  segment: {
+    flex: 1,
+    height: 8,
+    borderRadius: 4
+  },
+  rangeLabels: {
+    width: "100%",
+    marginTop: 4
+  },
+  thresholdLabels: {
+    width: "100%"
+  },
+  actionsContainer: {
+    marginTop: 8
+  }
+});
+Meter.displayName = "Meter";
+
+// src/components/molecules/Pagination.tsx
+import React23 from "react";
+import { View as View21, TouchableOpacity as TouchableOpacity14, StyleSheet as StyleSheet18 } from "react-native";
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  style,
+  isLoading,
+  error,
+  changeEvent,
+  maxVisiblePages = 5,
+  showFirstLast = true,
+  prevLabel = "Previous",
+  nextLabel = "Next"
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handlePageChange = (page) => {
+    if (page < 1 || page > totalPages || page === currentPage) {
+      return;
+    }
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { page, totalPages });
+    }
+    onPageChange?.(page);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React23.createElement(View21, { style: [styles18.container, style] }, /* @__PURE__ */ React23.createElement(LoadingState, { message: "Loading pages..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React23.createElement(View21, { style: [styles18.container, style] }, /* @__PURE__ */ React23.createElement(ErrorState, { message: error.message }));
+  }
+  if (totalPages <= 1) {
+    return null;
+  }
+  const getVisiblePages = () => {
+    const pages = [];
+    const halfVisible = Math.floor(maxVisiblePages / 2);
+    let startPage = Math.max(1, currentPage - halfVisible);
+    const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+  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(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      disabled: !canGoPrev,
+      onPress: () => handlePageChange(1)
+    },
+    "<<"
+  ), /* @__PURE__ */ React23.createElement(
+    Button,
+    {
+      variant: "secondary",
+      size: "sm",
+      disabled: !canGoPrev,
+      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) => {
+    const isActive = page === currentPage;
+    return /* @__PURE__ */ React23.createElement(
+      TouchableOpacity14,
+      {
+        key: page,
+        onPress: () => handlePageChange(page),
+        style: [
+          styles18.pageButton,
+          {
+            backgroundColor: isActive ? theme.colors.primary : theme.colors.card,
+            borderColor: theme.colors.border
+          }
+        ]
+      },
+      /* @__PURE__ */ React23.createElement(
+        Typography,
+        {
+          variant: "body",
+          style: {
+            color: isActive ? theme.colors["primary-foreground"] : theme.colors.foreground
+          }
+        },
+        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(
+    Button,
+    {
+      variant: "secondary",
+      size: "sm",
+      disabled: !canGoNext,
+      onPress: () => handlePageChange(currentPage + 1)
+    },
+    nextLabel
+  ), showFirstLast && /* @__PURE__ */ React23.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      disabled: !canGoNext,
+      onPress: () => handlePageChange(totalPages)
+    },
+    ">>"
+  ));
+};
+var styles18 = StyleSheet18.create({
+  container: {
+    flexWrap: "wrap",
+    paddingVertical: 8
+  },
+  pageButton: {
+    minWidth: 36,
+    height: 36,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 8
+  },
+  ellipsis: {
+    minWidth: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+Pagination.displayName = "Pagination";
+
+// src/components/molecules/MarkdownContent.tsx
+import React24 from "react";
+import { View as View22, StyleSheet as StyleSheet19 } from "react-native";
+var parseMarkdown = (content) => {
+  const elements = [];
+  const lines = content.split("\n");
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const trimmedLine = line.trim();
+    if (trimmedLine === "") {
+      i++;
+      continue;
+    }
+    if (/^(---|___|\*\*\*)$/.test(trimmedLine)) {
+      elements.push({ type: "horizontalRule" });
+      i++;
+      continue;
+    }
+    const headingMatch = trimmedLine.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      elements.push({
+        type: "heading",
+        level: headingMatch[1].length,
+        content: parseInlineElements(headingMatch[2])
+      });
+      i++;
+      continue;
+    }
+    const codeBlockStart = trimmedLine.match(/^```(\w*)/);
+    if (codeBlockStart) {
+      const language = codeBlockStart[1] || "";
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().match(/^```$/)) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      elements.push({
+        type: "code",
+        language,
+        content: codeLines.join("\n")
+      });
+      i++;
+      continue;
+    }
+    if (trimmedLine.startsWith(">")) {
+      const quoteLines = [];
+      while (i < lines.length && lines[i].trim().startsWith(">")) {
+        quoteLines.push(lines[i].trim().substring(1).trim());
+        i++;
+      }
+      elements.push({
+        type: "blockquote",
+        content: parseInlineElements(quoteLines.join(" "))
+      });
+      continue;
+    }
+    const orderedListMatch = trimmedLine.match(/^(\d+)\.\s+(.+)$/);
+    if (orderedListMatch) {
+      const items = [];
+      while (i < lines.length) {
+        const currentLine = lines[i].trim();
+        const itemMatch = currentLine.match(/^\d+\.\s+(.+)$/);
+        if (itemMatch) {
+          items.push(parseInlineElements(itemMatch[1]));
+          i++;
+        } else if (currentLine === "") {
+          i++;
+          break;
+        } else {
+          break;
+        }
+      }
+      elements.push({ type: "list", ordered: true, items });
+      continue;
+    }
+    const unorderedListMatch = trimmedLine.match(/^[\*\-\+]\s+(.+)$/);
+    if (unorderedListMatch) {
+      const items = [];
+      while (i < lines.length) {
+        const currentLine = lines[i].trim();
+        const itemMatch = currentLine.match(/^[\*\-\+]\s+(.+)$/);
+        if (itemMatch) {
+          items.push(parseInlineElements(itemMatch[1]));
+          i++;
+        } else if (currentLine === "") {
+          i++;
+          break;
+        } else {
+          break;
+        }
+      }
+      elements.push({ type: "list", ordered: false, items });
+      continue;
+    }
+    const paragraphLines = [];
+    while (i < lines.length && lines[i].trim() !== "") {
+      paragraphLines.push(lines[i]);
+      i++;
+    }
+    elements.push({
+      type: "paragraph",
+      content: parseInlineElements(paragraphLines.join(" "))
+    });
+  }
+  return elements;
+};
+var parseInlineElements = (text) => {
+  let result = text.replace(/`([^`]+)`/g, "\u300E$1\u300F");
+  result = result.replace(/\*\*([^*]+)\*\*|__([^_]+)__/g, "\u3010$1$2\u3011");
+  result = result.replace(/\*([^*]+)\*|_([^_]+)_/g, "\u3014$1$2\u3015");
+  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, "\u300E$1\u300F($2)");
+  result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, "[Image: $1]");
+  return result;
+};
+var renderInlineContent = (content, theme) => {
+  const parts = [];
+  let remaining = content;
+  let key = 0;
+  const patterns = [
+    { regex: /『([^』]+)』/g, type: "code" },
+    { regex: /【([^】]+)】/g, type: "bold" },
+    { regex: /〔([^〕]+)〕/g, type: "italic" }
+  ];
+  while (remaining.length > 0) {
+    let earliestMatch = null;
+    for (const pattern of patterns) {
+      pattern.regex.lastIndex = 0;
+      const match = pattern.regex.exec(remaining);
+      if (match && (earliestMatch === null || match.index < earliestMatch.index)) {
+        earliestMatch = { index: match.index, match, type: pattern.type };
+      }
+    }
+    if (earliestMatch) {
+      if (earliestMatch.index > 0) {
+        parts.push(
+          /* @__PURE__ */ React24.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(
+              Typography,
+              {
+                key: key++,
+                variant: "body",
+                style: {
+                  fontFamily: "monospace",
+                  backgroundColor: theme.colors.muted,
+                  paddingHorizontal: 4,
+                  paddingVertical: 2,
+                  borderRadius: 4
+                }
+              },
+              content2
+            )
+          );
+          break;
+        case "bold":
+          parts.push(
+            /* @__PURE__ */ React24.createElement(
+              Typography,
+              {
+                key: key++,
+                variant: "body",
+                style: { fontWeight: "700" }
+              },
+              content2
+            )
+          );
+          break;
+        case "italic":
+          parts.push(
+            /* @__PURE__ */ React24.createElement(
+              Typography,
+              {
+                key: key++,
+                variant: "body",
+                style: { fontStyle: "italic" }
+              },
+              content2
+            )
+          );
+          break;
+      }
+      remaining = remaining.slice(earliestMatch.index + earliestMatch.match[0].length);
+    } else {
+      parts.push(
+        /* @__PURE__ */ React24.createElement(Typography, { key: key++, variant: "body" }, remaining)
+      );
+      break;
+    }
+  }
+  return parts;
+};
+var MarkdownContent = ({
+  content,
+  style,
+  isLoading,
+  error,
+  padding = "md"
+}) => {
+  const theme = useTheme();
+  const elements = React24.useMemo(() => parseMarkdown(content), [content]);
+  if (isLoading) {
+    return /* @__PURE__ */ React24.createElement(Card, { style: [styles19.container, style || {}] }, /* @__PURE__ */ React24.createElement(LoadingState, { message: "Loading content..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React24.createElement(Card, { style: [styles19.container, style || {}] }, /* @__PURE__ */ React24.createElement(ErrorState, { message: error.message }));
+  }
+  const paddingStyles = {
+    none: { padding: 0 },
+    sm: { padding: 12 },
+    md: { padding: 16 },
+    lg: { padding: 24 }
+  };
+  const renderElement = (element, index) => {
+    switch (element.type) {
+      case "heading":
+        const variantMap = {
+          1: "h1",
+          2: "h2",
+          3: "h3",
+          4: "h4",
+          5: "body",
+          6: "body"
+        };
+        return /* @__PURE__ */ React24.createElement(
+          Typography,
+          {
+            key: index,
+            variant: variantMap[element.level] || "body",
+            style: [
+              styles19.heading,
+              element.level > 2 && { color: theme.colors["muted-foreground"] }
+            ]
+          },
+          element.content
+        );
+      case "paragraph":
+        return /* @__PURE__ */ React24.createElement(View22, { key: index, style: styles19.paragraph }, renderInlineContent(element.content, theme));
+      case "code":
+        return /* @__PURE__ */ React24.createElement(
+          View22,
+          {
+            key: index,
+            style: [
+              styles19.codeBlock,
+              { backgroundColor: theme.colors.muted }
+            ]
+          },
+          element.language && /* @__PURE__ */ React24.createElement(
+            Typography,
+            {
+              variant: "caption",
+              style: {
+                color: theme.colors["muted-foreground"],
+                marginBottom: 8,
+                textTransform: "uppercase"
+              }
+            },
+            element.language
+          ),
+          /* @__PURE__ */ React24.createElement(
+            Typography,
+            {
+              variant: "body",
+              style: {
+                fontFamily: "monospace",
+                color: theme.colors.foreground
+              }
+            },
+            element.content
+          )
+        );
+      case "blockquote":
+        return /* @__PURE__ */ React24.createElement(
+          View22,
+          {
+            key: index,
+            style: [
+              styles19.blockquote,
+              {
+                borderLeftColor: theme.colors.primary,
+                backgroundColor: theme.colors.muted
+              }
+            ]
+          },
+          /* @__PURE__ */ React24.createElement(
+            Typography,
+            {
+              variant: "body",
+              style: { color: theme.colors["muted-foreground"] }
+            },
+            element.content
+          )
+        );
+      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(
+          Typography,
+          {
+            variant: "body",
+            style: [
+              styles19.listMarker,
+              { color: theme.colors.primary }
+            ]
+          },
+          element.ordered ? `${itemIndex + 1}.` : "\u2022"
+        ), /* @__PURE__ */ React24.createElement(View22, { style: styles19.listItemContent }, renderInlineContent(item, theme)))));
+      case "horizontalRule":
+        return /* @__PURE__ */ React24.createElement(
+          View22,
+          {
+            key: index,
+            style: [
+              styles19.horizontalRule,
+              { backgroundColor: theme.colors.border }
+            ]
+          }
+        );
+      default:
+        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))));
+};
+var styles19 = StyleSheet19.create({
+  container: {
+    overflow: "hidden"
+  },
+  content: {
+    width: "100%"
+  },
+  heading: {
+    marginTop: 8,
+    marginBottom: 4
+  },
+  paragraph: {
+    marginVertical: 4
+  },
+  codeBlock: {
+    padding: 12,
+    borderRadius: 8,
+    marginVertical: 8
+  },
+  blockquote: {
+    padding: 12,
+    paddingLeft: 16,
+    borderLeftWidth: 4,
+    borderRadius: 4,
+    marginVertical: 8
+  },
+  list: {
+    marginVertical: 8
+  },
+  listItem: {
+    flexDirection: "row",
+    marginVertical: 2
+  },
+  listMarker: {
+    width: 24
+  },
+  listItemContent: {
+    flex: 1
+  },
+  horizontalRule: {
+    height: 1,
+    marginVertical: 16
+  }
+});
+MarkdownContent.displayName = "MarkdownContent";
+
+// src/components/molecules/WizardNavigation.tsx
+import React25 from "react";
+import {
+  View as View23,
+  StyleSheet as StyleSheet20
+} from "react-native";
+var WizardNavigation = ({
+  currentStep,
+  totalSteps,
+  onBack,
+  onNext,
+  onCancel,
+  onComplete,
+  canGoBack = true,
+  canGoNext = true,
+  isComplete = false,
+  backLabel = "Back",
+  nextLabel = "Next",
+  cancelLabel = "Cancel",
+  completeLabel = "Complete",
+  customActions,
+  style,
+  isLoading,
+  error,
+  entity,
+  showCancel = true
+}) => {
+  const eventBus = useEventBus();
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  const handleBack = () => {
+    if (isFirstStep) {
+      eventBus.emit("UI:WIZARD_CANCEL", { step: currentStep, entity });
+      onCancel?.();
+    } else {
+      eventBus.emit("UI:WIZARD_BACK", { step: currentStep - 1, entity });
+      onBack?.();
+    }
+  };
+  const handleNext = () => {
+    if (isLastStep || isComplete) {
+      eventBus.emit("UI:WIZARD_COMPLETE", { step: currentStep, entity });
+      onComplete?.();
+    } else {
+      eventBus.emit("UI:WIZARD_NEXT", { step: currentStep + 1, entity });
+      onNext?.();
+    }
+  };
+  const handleCustomAction = (action) => {
+    if (action.event) {
+      eventBus.emit(`UI:${action.event}`, { step: currentStep, entity });
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React25.createElement(View23, { style: [styles20.container, style] }, /* @__PURE__ */ React25.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React25.createElement(View23, { style: [styles20.container, style] }, /* @__PURE__ */ React25.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(
+    Button,
+    {
+      variant: "ghost",
+      onPress: handleBack,
+      disabled: isFirstStep && !showCancel ? true : !canGoBack,
+      action: isFirstStep ? "WIZARD_CANCEL" : "WIZARD_BACK"
+    },
+    isFirstStep ? cancelLabel : backLabel
+  ) : null, visibleCustomActions.map((action, index) => /* @__PURE__ */ React25.createElement(
+    Button,
+    {
+      key: `${action.label}-${index}`,
+      variant: action.variant || "default",
+      onPress: () => handleCustomAction(action),
+      disabled: action.disabled,
+      action: action.event
+    },
+    action.label
+  ))), /* @__PURE__ */ React25.createElement(
+    Button,
+    {
+      variant: "primary",
+      onPress: handleNext,
+      disabled: !canGoNext,
+      action: isLastStep || isComplete ? "WIZARD_COMPLETE" : "WIZARD_NEXT"
+    },
+    isLastStep || isComplete ? completeLabel : nextLabel
+  ));
+};
+var styles20 = StyleSheet20.create({
+  container: {
+    width: "100%",
+    paddingVertical: 8
+  }
+});
+WizardNavigation.displayName = "WizardNavigation";
+
+// src/components/molecules/WizardProgress.tsx
+import React26 from "react";
+import {
+  View as View24,
+  TouchableOpacity as TouchableOpacity15,
+  StyleSheet as StyleSheet21
+} from "react-native";
+var WizardProgress = ({
+  steps,
+  currentStep,
+  onStepPress,
+  allowNavigation = true,
+  variant = "dots",
+  showLabels = true,
+  showDescriptions = false,
+  style,
+  isLoading,
+  error,
+  entity
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const progress = (currentStep + 1) / steps.length * 100;
+  const handleStepPress = (index) => {
+    if (!allowNavigation) return;
+    if (index > currentStep) return;
+    eventBus.emit("UI:WIZARD_STEP_CHANGE", { step: index, entity });
+    onStepPress?.(index);
+  };
+  const getStepStatus = (index) => {
+    if (index === currentStep) return "active";
+    if (index < currentStep) return "completed";
+    return "pending";
+  };
+  const getStepColor = (status) => {
+    switch (status) {
+      case "completed":
+        return {
+          background: theme.colors.success,
+          text: theme.colors["success-foreground"],
+          border: theme.colors.success
+        };
+      case "active":
+        return {
+          background: theme.colors.primary,
+          text: theme.colors["primary-foreground"],
+          border: theme.colors.primary
+        };
+      case "pending":
+      default:
+        return {
+          background: theme.colors.muted,
+          text: theme.colors["muted-foreground"],
+          border: theme.colors.border
+        };
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React26.createElement(View24, { style: [styles21.container, style] }, /* @__PURE__ */ React26.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React26.createElement(View24, { style: [styles21.container, style] }, /* @__PURE__ */ React26.createElement(ErrorState, { message: error.message }));
+  }
+  const renderDots = () => /* @__PURE__ */ React26.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(
+      TouchableOpacity15,
+      {
+        key: step.id,
+        onPress: () => handleStepPress(index),
+        disabled: !canPress,
+        style: [
+          styles21.dot,
+          {
+            backgroundColor: colors.background,
+            borderColor: colors.border
+          },
+          canPress && styles21.clickableDot
+        ],
+        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 }] })
+    );
+  }));
+  const renderNumbers = () => /* @__PURE__ */ React26.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(
+      TouchableOpacity15,
+      {
+        key: step.id,
+        onPress: () => handleStepPress(index),
+        disabled: !canPress,
+        activeOpacity: 0.8,
+        style: styles21.numberStepContainer
+      },
+      /* @__PURE__ */ React26.createElement(VStack, { align: "center", spacing: 4 }, /* @__PURE__ */ React26.createElement(
+        View24,
+        {
+          style: [
+            styles21.numberCircle,
+            {
+              backgroundColor: colors.background,
+              borderColor: colors.border
+            },
+            canPress && styles21.clickableNumber
+          ]
+        },
+        /* @__PURE__ */ React26.createElement(Typography, { variant: "body", style: { color: colors.text, fontWeight: "600" } }, status === "completed" ? "\u2713" : index + 1)
+      ), showLabels && /* @__PURE__ */ React26.createElement(
+        Typography,
+        {
+          variant: "caption",
+          style: {
+            color: status === "active" ? theme.colors.foreground : theme.colors["muted-foreground"],
+            fontWeight: status === "active" ? "600" : "400",
+            textAlign: "center",
+            maxWidth: 80
+          },
+          numberOfLines: 1
+        },
+        step.title
+      ), showDescriptions && step.description && /* @__PURE__ */ React26.createElement(
+        Typography,
+        {
+          variant: "caption",
+          style: {
+            color: theme.colors["muted-foreground"],
+            fontSize: 10,
+            textAlign: "center",
+            maxWidth: 80
+          },
+          numberOfLines: 1
+        },
+        step.description
+      ), step.optional && /* @__PURE__ */ React26.createElement(
+        Typography,
+        {
+          variant: "caption",
+          style: {
+            color: theme.colors["muted-foreground"],
+            fontSize: 10,
+            fontStyle: "italic"
+          }
+        },
+        "(Optional)"
+      ))
+    );
+  }));
+  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(
+    Typography,
+    {
+      variant: "body",
+      style: { color: theme.colors.foreground, textAlign: "center", marginTop: 4 }
+    },
+    steps[currentStep]?.title
+  ), showDescriptions && steps[currentStep]?.description && /* @__PURE__ */ React26.createElement(
+    Typography,
+    {
+      variant: "caption",
+      style: { color: theme.colors["muted-foreground"], textAlign: "center" }
+    },
+    steps[currentStep].description
+  ));
+  return /* @__PURE__ */ React26.createElement(View24, { style: [styles21.container, style] }, variant === "dots" && renderDots(), variant === "numbers" && renderNumbers(), variant === "bar" && renderBar());
+};
+var styles21 = StyleSheet21.create({
+  container: {
+    width: "100%"
+  },
+  dotsContainer: {
+    paddingVertical: 8
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dotInner: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  clickableDot: {
+    transform: [{ scale: 1.1 }]
+  },
+  numbersContainer: {
+    paddingVertical: 8,
+    flexWrap: "wrap"
+  },
+  numberStepContainer: {
+    alignItems: "center"
+  },
+  numberCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  clickableNumber: {
+    transform: [{ scale: 1.05 }]
+  },
+  barContainer: {
+    paddingVertical: 8
+  }
+});
+WizardProgress.displayName = "WizardProgress";
+
+// src/components/molecules/QuizBlock.tsx
+import React27 from "react";
+import {
+  View as View25,
+  TouchableOpacity as TouchableOpacity16,
+  StyleSheet as StyleSheet22
+} from "react-native";
+var QuizBlock = ({
+  question,
+  options,
+  questionNumber,
+  totalQuestions,
+  category,
+  difficulty,
+  allowMultiple = false,
+  showCorrectAnswer = false,
+  selectedValues = [],
+  onSelect,
+  explanation,
+  style,
+  isLoading,
+  error,
+  entity,
+  shuffle = false,
+  showExplanation = false
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [selected, setSelected] = React27.useState(selectedValues);
+  const [isAnswered, setIsAnswered] = React27.useState(false);
+  React27.useEffect(() => {
+    setSelected(selectedValues);
+  }, [selectedValues]);
+  const shuffledOptions = React27.useMemo(() => {
+    if (!shuffle) return options;
+    return [...options].sort(() => Math.random() - 0.5);
+  }, [options, shuffle]);
+  const getDifficultyColor = () => {
+    switch (difficulty) {
+      case "easy":
+        return "success";
+      case "medium":
+        return "warning";
+      case "hard":
+        return "error";
+      default:
+        return "default";
+    }
+  };
+  const getOptionStyle = (option) => {
+    const isSelected = selected.includes(option.value);
+    if (showCorrectAnswer && isAnswered) {
+      if (option.correct) {
+        return {
+          backgroundColor: theme.colors.success,
+          borderColor: theme.colors.success,
+          textColor: theme.colors["success-foreground"]
+        };
+      }
+      if (isSelected && !option.correct) {
+        return {
+          backgroundColor: theme.colors.error,
+          borderColor: theme.colors.error,
+          textColor: theme.colors["error-foreground"]
+        };
+      }
+    }
+    if (isSelected) {
+      return {
+        backgroundColor: theme.colors.primary,
+        borderColor: theme.colors.primary,
+        textColor: theme.colors["primary-foreground"]
+      };
+    }
+    return {
+      backgroundColor: theme.colors.card,
+      borderColor: theme.colors.border,
+      textColor: theme.colors.foreground
+    };
+  };
+  const handleSelect = (option) => {
+    if (showCorrectAnswer && isAnswered) return;
+    let newSelected;
+    if (allowMultiple) {
+      newSelected = selected.includes(option.value) ? selected.filter((v) => v !== option.value) : [...selected, option.value];
+    } else {
+      newSelected = selected.includes(option.value) ? [] : [option.value];
+      setIsAnswered(true);
+    }
+    setSelected(newSelected);
+    eventBus.emit("UI:QUIZ_ANSWER", {
+      question,
+      selected: newSelected,
+      correct: option.correct,
+      entity
+    });
+    onSelect?.(newSelected);
+  };
+  const isCorrect = selected.length > 0 && selected.every((value) => {
+    const option = options.find((o) => o.value === value);
+    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..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React27.createElement(View25, { style: [styles22.container, style] }, /* @__PURE__ */ React27.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) => {
+    const style2 = getOptionStyle(option);
+    const isSelected = selected.includes(option.value);
+    return /* @__PURE__ */ React27.createElement(
+      TouchableOpacity16,
+      {
+        key: option.id,
+        onPress: () => handleSelect(option),
+        activeOpacity: 0.8,
+        style: [
+          styles22.option,
+          {
+            backgroundColor: style2.backgroundColor,
+            borderColor: style2.borderColor
+          }
+        ]
+      },
+      /* @__PURE__ */ React27.createElement(HStack, { spacing: 12, align: "center" }, /* @__PURE__ */ React27.createElement(
+        View25,
+        {
+          style: [
+            styles22.checkbox,
+            {
+              borderColor: isSelected ? style2.textColor : theme.colors.border,
+              backgroundColor: isSelected ? style2.textColor : "transparent"
+            },
+            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"))
+    );
+  })), 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))));
+};
+var styles22 = StyleSheet22.create({
+  container: {
+    width: "100%"
+  },
+  option: {
+    padding: 16,
+    borderRadius: 8,
+    borderWidth: 1
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkboxSquare: {
+    borderRadius: 4
+  },
+  checkboxCircle: {
+    borderRadius: 12
+  },
+  resultContainer: {
+    alignItems: "center",
+    paddingVertical: 8
+  },
+  explanationContainer: {
+    padding: 12,
+    borderRadius: 8,
+    marginTop: 8
+  }
+});
+QuizBlock.displayName = "QuizBlock";
+
+// src/components/molecules/game/ActionButtons.tsx
+import React28, { useState as useState6, useCallback as useCallback3 } from "react";
+import { View as View26, StyleSheet as StyleSheet23 } from "react-native";
+var sizeMap = {
+  sm: "sm",
+  md: "md",
+  lg: "lg"
+};
+var ActionButtons = ({
+  buttons,
+  onAction,
+  actionEvent,
+  layout = "horizontal",
+  size = "md",
+  style,
+  disabled
+}) => {
+  const eventBus = useEventBus();
+  const [activeButtons, setActiveButtons] = useState6(/* @__PURE__ */ new Set());
+  const handlePress = useCallback3(
+    (id) => {
+      setActiveButtons((prev) => new Set(prev).add(id));
+      if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
+      onAction?.(id, true);
+    },
+    [actionEvent, eventBus, onAction]
+  );
+  const handleRelease = useCallback3(
+    (id) => {
+      setActiveButtons((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+      if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: false });
+      onAction?.(id, false);
+    },
+    [actionEvent, eventBus, onAction]
+  );
+  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(
+      ControlButton,
+      {
+        icon: top.icon,
+        label: top.label,
+        size: buttonSize,
+        variant: top.variant,
+        pressed: activeButtons.has(top.id),
+        onPress: () => handlePress(top.id),
+        onRelease: () => handleRelease(top.id),
+        disabled
+      }
+    ), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondEmpty })), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondRow }, /* @__PURE__ */ React28.createElement(
+      ControlButton,
+      {
+        icon: left.icon,
+        label: left.label,
+        size: buttonSize,
+        variant: left.variant,
+        pressed: activeButtons.has(left.id),
+        onPress: () => handlePress(left.id),
+        onRelease: () => handleRelease(left.id),
+        disabled
+      }
+    ), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondCenter }), /* @__PURE__ */ React28.createElement(
+      ControlButton,
+      {
+        icon: right.icon,
+        label: right.label,
+        size: buttonSize,
+        variant: right.variant,
+        pressed: activeButtons.has(right.id),
+        onPress: () => handlePress(right.id),
+        onRelease: () => handleRelease(right.id),
+        disabled
+      }
+    )), /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondRow }, /* @__PURE__ */ React28.createElement(View26, { style: styles23.diamondEmpty }), /* @__PURE__ */ React28.createElement(
+      ControlButton,
+      {
+        icon: bottom.icon,
+        label: bottom.label,
+        size: buttonSize,
+        variant: bottom.variant,
+        pressed: activeButtons.has(bottom.id),
+        onPress: () => handlePress(bottom.id),
+        onRelease: () => handleRelease(bottom.id),
+        disabled
+      }
+    ), /* @__PURE__ */ React28.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(
+    ControlButton,
+    {
+      key: button.id,
+      icon: button.icon,
+      label: button.label,
+      size: buttonSize,
+      variant: button.variant,
+      pressed: activeButtons.has(button.id),
+      onPress: () => handlePress(button.id),
+      onRelease: () => handleRelease(button.id),
+      disabled
+    }
+  )));
+};
+var styles23 = StyleSheet23.create({
+  horizontalContainer: {
+    flexDirection: "row",
+    gap: 8
+  },
+  verticalContainer: {
+    flexDirection: "column",
+    gap: 8
+  },
+  diamondContainer: {
+    gap: 4
+  },
+  diamondRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 4
+  },
+  diamondEmpty: {
+    width: 56,
+    height: 56
+  },
+  diamondCenter: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "#374151",
+    borderWidth: 2,
+    borderColor: "#4b5563"
+  }
+});
+ActionButtons.displayName = "ActionButtons";
+
+// src/components/molecules/game/DPad.tsx
+import React29, { 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 },
+  md: { button: "md", containerWidth: 160 },
+  lg: { button: "lg", containerWidth: 208 }
+};
+var arrowIcons = {
+  up: "\u25B2",
+  down: "\u25BC",
+  left: "\u25C0",
+  right: "\u25B6"
+};
+var DPad = ({
+  onDirection,
+  directionEvent,
+  size = "md",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  includeDiagonals = false,
+  style,
+  disabled
+}) => {
+  const eventBus = useEventBus();
+  const sizes = sizeMap2[size];
+  const [activeDirections, setActiveDirections] = useState7(/* @__PURE__ */ new Set());
+  const handlePress = useCallback4(
+    (direction) => {
+      setActiveDirections((prev) => new Set(prev).add(direction));
+      if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: true });
+      onDirection?.(direction, true);
+    },
+    [directionEvent, eventBus, onDirection]
+  );
+  const handleRelease = useCallback4(
+    (direction) => {
+      setActiveDirections((prev) => {
+        const next = new Set(prev);
+        next.delete(direction);
+        return next;
+      });
+      if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: false });
+      onDirection?.(direction, false);
+    },
+    [directionEvent, eventBus, onDirection]
+  );
+  const createButton = (direction) => /* @__PURE__ */ React29.createElement(
+    ControlButton,
+    {
+      key: direction,
+      icon: arrowIcons[direction],
+      size: sizes.button,
+      variant: "secondary",
+      pressed: activeDirections.has(direction),
+      onPress: () => handlePress(direction),
+      onRelease: () => handleRelease(direction),
+      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 })));
+};
+var styles24 = StyleSheet24.create({
+  container: {
+    gap: 4
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 4
+  },
+  empty: {
+    width: 56,
+    height: 56
+  },
+  center: {
+    width: 56,
+    height: 56,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  centerDot: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "#374151",
+    borderWidth: 2,
+    borderColor: "#4b5563"
+  }
+});
+DPad.displayName = "DPad";
+
+// src/components/molecules/RepeatableFormSection.tsx
+import React30, { useState as useState8, useCallback as useCallback5 } from "react";
+import { View as View28, StyleSheet as StyleSheet25 } from "react-native";
+var RepeatableFormSection = ({
+  style,
+  isLoading,
+  error,
+  entity,
+  title,
+  description,
+  minItems = 0,
+  maxItems = 10,
+  initialItems = [],
+  renderItem,
+  addButtonLabel = "Add Item",
+  removeButtonLabel = "Remove",
+  removeIcon = "\u2715",
+  onChange,
+  addEvent = "REPEATABLE_ADD",
+  removeEvent = "REPEATABLE_REMOVE",
+  updateEvent = "REPEATABLE_UPDATE"
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const [items, setItems] = useState8(
+    initialItems.length > 0 ? initialItems : minItems > 0 ? Array.from({ length: minItems }, (_, i) => ({
+      id: `item-${Date.now()}-${i}`,
+      data: {}
+    })) : []
+  );
+  const generateId = useCallback5(() => {
+    return `item-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }, []);
+  const handleAddItem = useCallback5(() => {
+    if (items.length >= maxItems) {
+      return;
+    }
+    const newItem = {
+      id: generateId(),
+      data: {}
+    };
+    const newItems = [...items, newItem];
+    setItems(newItems);
+    eventBus.emit(`UI:${addEvent}`, {
+      entity,
+      item: newItem,
+      index: newItems.length - 1,
+      totalItems: newItems.length
+    });
+    onChange?.(newItems);
+  }, [items, maxItems, generateId, entity, addEvent, onChange, eventBus]);
+  const handleRemoveItem = useCallback5((index) => {
+    if (items.length <= minItems) {
+      return;
+    }
+    const removedItem = items[index];
+    const newItems = items.filter((_, i) => i !== index);
+    setItems(newItems);
+    eventBus.emit(`UI:${removeEvent}`, {
+      entity,
+      item: removedItem,
+      index,
+      totalItems: newItems.length
+    });
+    onChange?.(newItems);
+  }, [items, minItems, entity, removeEvent, onChange, eventBus]);
+  const handleUpdateItem = useCallback5((index, data) => {
+    const newItems = items.map(
+      (item, i) => i === index ? { ...item, data: { ...item.data, ...data } } : item
+    );
+    setItems(newItems);
+    eventBus.emit(`UI:${updateEvent}`, {
+      entity,
+      item: newItems[index],
+      index,
+      data
+    });
+    onChange?.(newItems);
+  }, [items, entity, updateEvent, onChange, eventBus]);
+  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..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React30.createElement(View28, { style: { ...styles25.container, ...style || {} } }, /* @__PURE__ */ React30.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(
+    View28,
+    {
+      key: item.id,
+      style: {
+        ...styles25.itemContainer,
+        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(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onPress: () => handleRemoveItem(index),
+        action: removeEvent,
+        actionPayload: {
+          entity,
+          itemId: item.id,
+          index
+        }
+      },
+      removeIcon,
+      " ",
+      removeButtonLabel
+    )), renderItem(item, index, {
+      remove: () => handleRemoveItem(index),
+      update: (data) => handleUpdateItem(index, data)
+    }))
+  ))), canAdd && /* @__PURE__ */ React30.createElement(
+    Button,
+    {
+      variant: "secondary",
+      onPress: handleAddItem,
+      action: addEvent,
+      actionPayload: {
+        entity,
+        currentCount: items.length
+      }
+    },
+    "+ ",
+    addButtonLabel
+  ), /* @__PURE__ */ React30.createElement(
+    Typography,
+    {
+      variant: "caption",
+      color: theme.colors["muted-foreground"],
+      style: { textAlign: "right" }
+    },
+    items.length,
+    " / ",
+    maxItems,
+    " items"
+  )));
+};
+var styles25 = StyleSheet25.create({
+  container: {
+    width: "100%"
+  },
+  itemContainer: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 16
+  }
+});
+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 = ({
+  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 = 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();
+    }
+  }, [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,
+    {
+      variant: "ghost",
+      size: "sm",
+      onPress: handleZoomOut,
+      disabled: !enableZoom || currentScale <= minScale
+    },
+    "\u2212"
+  ), /* @__PURE__ */ React31.createElement(Typography, { variant: "body", style: { minWidth: 50, textAlign: "center" } }, Math.round(currentScale * 100), "%"), /* @__PURE__ */ React31.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      onPress: handleZoomIn,
+      disabled: !enableZoom || currentScale >= maxScale
+    },
+    "+"
+  ), /* @__PURE__ */ React31.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      onPress: handleReset
+    },
+    "\u27F2"
+  ))), /* @__PURE__ */ React31.createElement(
+    View29,
+    {
+      style: [
+        styles26.diagramContainer,
+        {
+          width,
+          height,
+          backgroundColor: theme.colors.muted
+        }
+      ]
+    },
+    /* @__PURE__ */ React31.createElement(
+      TouchableOpacity17,
+      {
+        activeOpacity: 1,
+        onPress: handleDoubleTap,
+        style: styles26.touchable
+      },
+      /* @__PURE__ */ React31.createElement(
+        Animated4.View,
+        {
+          style: [
+            styles26.content,
+            {
+              width: contentWidth,
+              height: contentHeight
+            },
+            animatedStyle
+          ],
+          ...panResponder.panHandlers
+        },
+        children
+      )
+    )
+  ), /* @__PURE__ */ React31.createElement(
+    Typography,
+    {
+      variant: "caption",
+      color: theme.colors["muted-foreground"],
+      style: { textAlign: "center" }
+    },
+    "Scale: ",
+    currentScale.toFixed(2),
+    "x \u2022 Double-tap to ",
+    currentScale > initialScale ? "reset" : "zoom"
+  )));
+};
+var styles26 = StyleSheet26.create({
+  container: {
+    overflow: "hidden"
+  },
+  diagramContainer: {
+    overflow: "hidden",
+    borderRadius: 8
+  },
+  touchable: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  content: {
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+ScaledDiagram.displayName = "ScaledDiagram";
+
+export {
+  FormField,
+  FormSectionHeader,
+  InputGroup,
+  Alert,
+  Skeleton,
+  SearchInput,
+  Tooltip,
+  Popover,
+  Menu,
+  Breadcrumb,
+  ButtonGroup,
+  ErrorBoundary,
+  FloatingActionButton,
+  Flex,
+  SimpleGrid,
+  Container,
+  Grid,
+  SidePanel,
+  Navigation,
+  RelationSelect,
+  FilterGroup,
+  Meter,
+  Pagination,
+  MarkdownContent,
+  WizardNavigation,
+  WizardProgress,
+  QuizBlock,
+  ActionButtons,
+  DPad,
+  RepeatableFormSection,
+  ScaledDiagram
+};
+//# sourceMappingURL=chunk-YMJZLYLV.js.map