@almadar/mobile 1.1.0

package/dist/chunk-DMLYJFYQ.js

@@ -0,0 +1,816 @@
+import {
+  ErrorState,
+  LoadingState
+} from "./chunk-7C5JCLLY.js";
+import {
+  useEventBus
+} from "./chunk-YTVYMEKU.js";
+import {
+  useTheme
+} from "./chunk-CUAWHLEK.js";
+
+// src/components/atoms/Center.tsx
+import React from "react";
+import { View, StyleSheet } from "react-native";
+var Center = ({
+  children,
+  style,
+  isLoading,
+  error
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(LoadingState, { message: "Loading..." }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(ErrorState, { message: error.message }));
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, children);
+};
+var styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+Center.displayName = "Center";
+
+// src/components/atoms/Radio.tsx
+import React2 from "react";
+import {
+  TouchableOpacity,
+  View as View2,
+  StyleSheet as StyleSheet2
+} from "react-native";
+var Radio = ({
+  checked = false,
+  onChange,
+  disabled = false,
+  size = "md",
+  style,
+  isLoading,
+  error,
+  changeEvent,
+  actionPayload
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handlePress = () => {
+    if (disabled || isLoading) return;
+    const newValue = !checked;
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { ...actionPayload, checked: newValue });
+    }
+    onChange?.(newValue);
+  };
+  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 }));
+  }
+  const sizeStyles = {
+    sm: { outer: 18, inner: 8 },
+    md: { outer: 24, inner: 10 },
+    lg: { outer: 32, inner: 14 }
+  };
+  const { outer, inner } = sizeStyles[size];
+  return /* @__PURE__ */ React2.createElement(
+    TouchableOpacity,
+    {
+      onPress: handlePress,
+      disabled,
+      activeOpacity: 0.8,
+      style: [
+        styles2.container,
+        {
+          width: outer,
+          height: outer,
+          borderRadius: outer / 2,
+          borderWidth: 2,
+          borderColor: checked ? theme.colors.primary : theme.colors.border,
+          backgroundColor: theme.colors.card,
+          opacity: disabled ? 0.5 : 1
+        },
+        style
+      ]
+    },
+    checked && /* @__PURE__ */ React2.createElement(
+      View2,
+      {
+        style: {
+          width: inner,
+          height: inner,
+          borderRadius: inner / 2,
+          backgroundColor: theme.colors.primary
+        }
+      }
+    )
+  );
+};
+var styles2 = StyleSheet2.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+Radio.displayName = "Radio";
+
+// src/components/atoms/Switch.tsx
+import React3 from "react";
+import {
+  TouchableOpacity as TouchableOpacity2,
+  View as View3,
+  StyleSheet as StyleSheet3,
+  Animated
+} from "react-native";
+var Switch = ({
+  checked = false,
+  onChange,
+  disabled = false,
+  size = "md",
+  style,
+  isLoading,
+  error,
+  changeEvent,
+  actionPayload
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const translateX = React3.useRef(new Animated.Value(checked ? 1 : 0)).current;
+  React3.useEffect(() => {
+    const { width: width2 } = sizeStyles[size];
+    const thumbWidth = width2 * 0.4;
+    const travelDistance = width2 - thumbWidth - 4;
+    Animated.timing(translateX, {
+      toValue: checked ? travelDistance : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [checked, size]);
+  const handlePress = () => {
+    if (disabled || isLoading) return;
+    const newValue = !checked;
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { ...actionPayload, checked: newValue });
+    }
+    onChange?.(newValue);
+  };
+  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 sizeStyles = {
+    sm: { width: 36, height: 20 },
+    md: { width: 48, height: 28 },
+    lg: { width: 60, height: 36 }
+  };
+  const { width, height } = sizeStyles[size];
+  const thumbSize = height - 4;
+  return /* @__PURE__ */ React3.createElement(
+    TouchableOpacity2,
+    {
+      onPress: handlePress,
+      disabled,
+      activeOpacity: 0.8,
+      style: [
+        styles3.track,
+        {
+          width,
+          height,
+          borderRadius: height / 2,
+          backgroundColor: checked ? theme.colors.primary : theme.colors["muted-foreground"],
+          opacity: disabled ? 0.5 : 1
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React3.createElement(
+      Animated.View,
+      {
+        style: [
+          styles3.thumb,
+          {
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: thumbSize / 2,
+            backgroundColor: theme.colors["primary-foreground"],
+            transform: [{ translateX }]
+          }
+        ]
+      }
+    )
+  );
+};
+var styles3 = StyleSheet3.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  track: {
+    justifyContent: "center",
+    padding: 2
+  },
+  thumb: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  }
+});
+Switch.displayName = "Switch";
+
+// src/components/atoms/Textarea.tsx
+import React4 from "react";
+import {
+  TextInput,
+  StyleSheet as StyleSheet4,
+  View as View4,
+  Text
+} from "react-native";
+var Textarea = ({
+  label,
+  errorMessage,
+  helperText,
+  containerStyle,
+  style,
+  numberOfLines = 4,
+  isLoading,
+  error,
+  changeEvent,
+  focusEvent,
+  onChangeText,
+  onFocus,
+  ...textInputProps
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  const handleChangeText = (text) => {
+    if (changeEvent) {
+      eventBus.emit(`UI:${changeEvent}`, { value: text });
+    }
+    onChangeText?.(text);
+  };
+  const handleFocus = () => {
+    if (focusEvent) {
+      eventBus.emit(`UI:${focusEvent}`);
+    }
+    onFocus?.({});
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React4.createElement(View4, { style: [styles4.container, containerStyle] }, label && /* @__PURE__ */ React4.createElement(Text, { style: [styles4.label, { color: theme.colors.foreground }] }, label), /* @__PURE__ */ React4.createElement(LoadingState, { message: "Loading..." }));
+  }
+  const errorText = error?.message || errorMessage;
+  return /* @__PURE__ */ React4.createElement(View4, { style: [styles4.container, containerStyle] }, label && /* @__PURE__ */ React4.createElement(Text, { style: [styles4.label, { color: theme.colors.foreground }] }, label), /* @__PURE__ */ React4.createElement(
+    TextInput,
+    {
+      multiline: true,
+      numberOfLines,
+      textAlignVertical: "top",
+      style: [
+        styles4.textarea,
+        {
+          borderColor: errorText ? theme.colors.error : theme.colors.border,
+          backgroundColor: theme.colors.card,
+          color: theme.colors.foreground
+        },
+        style
+      ],
+      placeholderTextColor: theme.colors["muted-foreground"],
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      ...textInputProps
+    }
+  ), errorText ? /* @__PURE__ */ React4.createElement(Text, { style: [styles4.errorText, { color: theme.colors.error }] }, errorText) : helperText ? /* @__PURE__ */ React4.createElement(Text, { style: [styles4.helperText, { color: theme.colors["muted-foreground"] }] }, helperText) : null);
+};
+var styles4 = StyleSheet4.create({
+  container: {
+    width: "100%"
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    marginBottom: 6
+  },
+  textarea: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    minHeight: 100
+  },
+  errorText: {
+    fontSize: 12,
+    marginTop: 4
+  },
+  helperText: {
+    fontSize: 12,
+    marginTop: 4
+  }
+});
+Textarea.displayName = "Textarea";
+
+// src/components/atoms/Spinner.tsx
+import React5 from "react";
+import { ActivityIndicator, StyleSheet as StyleSheet5, View as View5 } from "react-native";
+var Spinner = ({
+  size = "md",
+  color,
+  style
+}) => {
+  const theme = useTheme();
+  const sizeMap = {
+    sm: 16,
+    md: 24,
+    lg: 32
+  };
+  return /* @__PURE__ */ React5.createElement(View5, { style: [styles5.container, style] }, /* @__PURE__ */ React5.createElement(
+    ActivityIndicator,
+    {
+      size: sizeMap[size],
+      color: color || theme.colors.primary
+    }
+  ));
+};
+var styles5 = StyleSheet5.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+Spinner.displayName = "Spinner";
+
+// src/components/atoms/Avatar.tsx
+import React6 from "react";
+import {
+  View as View6,
+  Text as Text2,
+  StyleSheet as StyleSheet6,
+  Image
+} from "react-native";
+var Avatar = ({
+  src,
+  alt,
+  initials,
+  size = "md",
+  style,
+  isLoading,
+  error
+}) => {
+  const theme = useTheme();
+  const sizeMap = {
+    sm: { container: 32, fontSize: 12 },
+    md: { container: 40, fontSize: 14 },
+    lg: { container: 48, fontSize: 16 },
+    xl: { container: 64, fontSize: 20 }
+  };
+  const { container, fontSize } = sizeMap[size];
+  if (isLoading) {
+    return /* @__PURE__ */ React6.createElement(View6, { style: [styles6.container, { width: container, height: container }, style] }, /* @__PURE__ */ React6.createElement(LoadingState, { message: "" }));
+  }
+  if (error) {
+    return /* @__PURE__ */ React6.createElement(View6, { style: [styles6.container, { width: container, height: container }, style] }, /* @__PURE__ */ React6.createElement(ErrorState, { message: error.message }));
+  }
+  const getInitials = () => {
+    if (initials) return initials;
+    if (alt) {
+      return alt.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+    }
+    return "?";
+  };
+  if (src) {
+    return /* @__PURE__ */ React6.createElement(
+      Image,
+      {
+        source: src,
+        style: [
+          styles6.image,
+          {
+            width: container,
+            height: container,
+            borderRadius: container / 2
+          },
+          style
+        ],
+        accessibilityLabel: alt
+      }
+    );
+  }
+  return /* @__PURE__ */ React6.createElement(
+    View6,
+    {
+      style: [
+        styles6.container,
+        {
+          width: container,
+          height: container,
+          borderRadius: container / 2,
+          backgroundColor: theme.colors.primary
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React6.createElement(
+      Text2,
+      {
+        style: [
+          styles6.initials,
+          {
+            fontSize,
+            color: theme.colors["primary-foreground"]
+          }
+        ]
+      },
+      getInitials()
+    )
+  );
+};
+var styles6 = StyleSheet6.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    resizeMode: "cover"
+  },
+  initials: {
+    fontWeight: "600"
+  }
+});
+Avatar.displayName = "Avatar";
+
+// src/components/atoms/Overlay.tsx
+import React7 from "react";
+import {
+  TouchableWithoutFeedback,
+  View as View7,
+  StyleSheet as StyleSheet7
+} from "react-native";
+var Overlay = ({
+  isVisible = true,
+  onPress,
+  blur = true,
+  action,
+  style
+}) => {
+  const theme = useTheme();
+  const eventBus = useEventBus();
+  if (!isVisible) return null;
+  const handlePress = () => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, {});
+    }
+    onPress?.();
+  };
+  return /* @__PURE__ */ React7.createElement(TouchableWithoutFeedback, { onPress: handlePress }, /* @__PURE__ */ React7.createElement(
+    View7,
+    {
+      style: [
+        styles7.overlay,
+        {
+          backgroundColor: theme.colors.background,
+          opacity: 0.8
+        },
+        blur && styles7.blur,
+        ...style ? [style] : []
+      ],
+      pointerEvents: "auto"
+    }
+  ));
+};
+var styles7 = StyleSheet7.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 40
+  },
+  blur: {
+    // Note: For actual blur effect on iOS, use @react-native-community/blur
+    // This is a fallback opacity-based overlay
+  }
+});
+Overlay.displayName = "Overlay";
+
+// src/components/atoms/Spacer.tsx
+import React8 from "react";
+import { View as View8 } from "react-native";
+var sizeValues = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  "2xl": 48
+};
+var Spacer = ({
+  size = "auto",
+  axis = "horizontal",
+  style
+}) => {
+  if (size === "auto") {
+    return /* @__PURE__ */ React8.createElement(
+      View8,
+      {
+        style: [{ flex: 1 }, ...style ? [style] : []],
+        accessibilityElementsHidden: true
+      }
+    );
+  }
+  const sizeValue = sizeValues[size];
+  const spacerStyle = axis === "horizontal" ? { width: sizeValue } : { height: sizeValue };
+  return /* @__PURE__ */ React8.createElement(
+    View8,
+    {
+      style: [
+        spacerStyle,
+        ...style ? [style] : []
+      ],
+      accessibilityElementsHidden: true
+    }
+  );
+};
+Spacer.displayName = "Spacer";
+
+// src/components/atoms/ConditionalWrapper.tsx
+import React9 from "react";
+import { Animated as Animated2 } from "react-native";
+function evaluateCondition(condition, context = { formValues: {}, globalVariables: {} }) {
+  if (typeof condition === "boolean") {
+    return condition;
+  }
+  if (typeof condition === "function") {
+    return condition(context);
+  }
+  if (Array.isArray(condition) && condition.length === 3) {
+    const [operator, fieldPath, expectedValue] = condition;
+    const parts = String(fieldPath).split(".");
+    let actualValue;
+    if (parts[0] === "formValues" && parts[1]) {
+      actualValue = context.formValues?.[parts[1]];
+    } else if (parts[0] === "globalVariables" && parts[1]) {
+      actualValue = context.globalVariables?.[parts[1]];
+    } else if (parts[0] === "localVariables" && parts[1]) {
+      actualValue = context.localVariables?.[parts[1]];
+    } else if (parts[0] && context.entity?.[parts[0]]) {
+      actualValue = context.entity[parts[0]];
+    }
+    switch (operator) {
+      case "=":
+      case "==":
+        return actualValue === expectedValue;
+      case "!=":
+        return actualValue !== expectedValue;
+      case ">":
+        return Number(actualValue) > Number(expectedValue);
+      case ">=":
+        return Number(actualValue) >= Number(expectedValue);
+      case "<":
+        return Number(actualValue) < Number(expectedValue);
+      case "<=":
+        return Number(actualValue) <= Number(expectedValue);
+      case "includes":
+        return Array.isArray(actualValue) && actualValue.includes(expectedValue);
+      default:
+        return false;
+    }
+  }
+  return Boolean(condition);
+}
+var ConditionalWrapper = ({
+  condition,
+  context = { formValues: {}, globalVariables: {} },
+  children,
+  fallback = null,
+  animate = false,
+  style
+}) => {
+  const [isVisible, setIsVisible] = React9.useState(!condition ? true : false);
+  const fadeAnim = React9.useRef(new Animated2.Value(!condition ? 1 : 0)).current;
+  React9.useEffect(() => {
+    if (!condition) {
+      setIsVisible(true);
+      return;
+    }
+    const visible = evaluateCondition(condition, context);
+    setIsVisible(visible);
+    if (animate) {
+      Animated2.timing(fadeAnim, {
+        toValue: visible ? 1 : 0,
+        duration: 200,
+        useNativeDriver: true
+      }).start();
+    } else {
+      fadeAnim.setValue(visible ? 1 : 0);
+    }
+  }, [condition, context, animate, fadeAnim]);
+  if (!condition) {
+    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, children);
+  }
+  if (animate) {
+    return /* @__PURE__ */ React9.createElement(
+      Animated2.View,
+      {
+        style: [
+          { opacity: fadeAnim, overflow: "hidden" },
+          ...style ? [style] : []
+        ]
+      },
+      isVisible ? children : fallback
+    );
+  }
+  return isVisible ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, children) : /* @__PURE__ */ React9.createElement(React9.Fragment, null, fallback);
+};
+ConditionalWrapper.displayName = "ConditionalWrapper";
+
+// src/components/atoms/game/Sprite.tsx
+import React10, { useMemo } from "react";
+import {
+  View as View9,
+  Image as Image2,
+  TouchableOpacity as TouchableOpacity3,
+  StyleSheet as StyleSheet8
+} from "react-native";
+var Sprite = ({
+  spritesheet,
+  frameWidth,
+  frameHeight,
+  frame,
+  x,
+  y,
+  scale = 1,
+  flipX = false,
+  flipY = false,
+  rotation = 0,
+  opacity = 1,
+  zIndex = 0,
+  columns = 16,
+  style,
+  onPress,
+  action
+}) => {
+  const eventBus = useEventBus();
+  const sourcePosition = useMemo(() => {
+    const frameX = frame % columns;
+    const frameY = Math.floor(frame / columns);
+    return {
+      x: frameX * frameWidth,
+      y: frameY * frameHeight
+    };
+  }, [frame, columns, frameWidth, frameHeight]);
+  const handlePress = () => {
+    if (action) eventBus.emit(`UI:${action}`, {});
+    onPress?.();
+  };
+  const transform = [
+    { translateX: x },
+    { translateY: y },
+    { scale },
+    { rotate: `${rotation}deg` },
+    { scaleX: flipX ? -1 : 1 },
+    { scaleY: flipY ? -1 : 1 }
+  ];
+  const Container = action || onPress ? TouchableOpacity3 : View9;
+  return /* @__PURE__ */ React10.createElement(
+    Container,
+    {
+      onPress: action || onPress ? handlePress : void 0,
+      style: [
+        styles8.container,
+        {
+          width: frameWidth,
+          height: frameHeight,
+          transform,
+          opacity,
+          zIndex
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React10.createElement(
+      View9,
+      {
+        style: {
+          width: frameWidth * columns,
+          height: frameHeight * Math.ceil((frame + 1) / columns),
+          position: "absolute",
+          left: -sourcePosition.x,
+          top: -sourcePosition.y,
+          overflow: "hidden"
+        }
+      },
+      /* @__PURE__ */ React10.createElement(
+        Image2,
+        {
+          source: spritesheet,
+          style: {
+            width: frameWidth * columns,
+            height: frameHeight * Math.ceil((frame + 1) / columns),
+            resizeMode: "stretch"
+          }
+        }
+      )
+    )
+  );
+};
+var styles8 = StyleSheet8.create({
+  container: {
+    position: "absolute",
+    overflow: "hidden"
+  }
+});
+Sprite.displayName = "Sprite";
+
+// src/components/atoms/game/StateIndicator.tsx
+import React11 from "react";
+import { View as View10, Text as Text3, StyleSheet as StyleSheet9 } from "react-native";
+var DEFAULT_STATE_STYLES = {
+  idle: { icon: "\u23F8", backgroundColor: "#6b7280" },
+  active: { icon: "\u25B6", backgroundColor: "#22c55e" },
+  sleeping: { icon: "\u{1F4A4}", backgroundColor: "#6b7280" },
+  moving: { icon: "\u{1F6B6}", backgroundColor: "#3b82f6" },
+  eating: { icon: "\u{1F37D}", backgroundColor: "#22c55e" },
+  waiting: { icon: "\u23F3", backgroundColor: "#eab308" },
+  happy: { icon: "\u{1F60A}", backgroundColor: "#22c55e" },
+  scared: { icon: "\u{1F628}", backgroundColor: "#ef4444" },
+  done: { icon: "\u2713", backgroundColor: "#22c55e" },
+  error: { icon: "\u2717", backgroundColor: "#ef4444" },
+  ready: { icon: "\u2713", backgroundColor: "#22c55e" },
+  cooldown: { icon: "\u{1F504}", backgroundColor: "#eab308" }
+};
+var DEFAULT_STYLE = { icon: "?", backgroundColor: "#6b7280" };
+var SIZE_STYLES = {
+  sm: { padding: 4, fontSize: 10 },
+  md: { padding: 8, fontSize: 12 },
+  lg: { padding: 12, fontSize: 14 }
+};
+var StateIndicator = ({
+  state,
+  label,
+  size = "md",
+  animated = true,
+  stateStyles,
+  style
+}) => {
+  const theme = useTheme();
+  const mergedStyles = stateStyles ? { ...DEFAULT_STATE_STYLES, ...stateStyles } : DEFAULT_STATE_STYLES;
+  const config = mergedStyles[state.toLowerCase()] || DEFAULT_STYLE;
+  const displayLabel = label || state.charAt(0).toUpperCase() + state.slice(1);
+  const sizeStyles = SIZE_STYLES[size];
+  const shouldAnimate = animated && state.toLowerCase() !== "idle" && state.toLowerCase() !== "done";
+  return /* @__PURE__ */ React11.createElement(
+    View10,
+    {
+      style: [
+        styles9.container,
+        {
+          backgroundColor: config.backgroundColor,
+          paddingHorizontal: sizeStyles.padding,
+          paddingVertical: sizeStyles.padding * 0.5,
+          opacity: shouldAnimate ? 0.8 : 1
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React11.createElement(Text3, { style: { fontSize: sizeStyles.fontSize, marginRight: 4 } }, config.icon),
+    /* @__PURE__ */ React11.createElement(
+      Text3,
+      {
+        style: {
+          fontSize: sizeStyles.fontSize,
+          color: theme.colors["primary-foreground"],
+          fontWeight: "500"
+        }
+      },
+      displayLabel
+    )
+  );
+};
+var styles9 = StyleSheet9.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 9999
+  }
+});
+StateIndicator.displayName = "StateIndicator";
+
+export {
+  Center,
+  Radio,
+  Switch,
+  Textarea,
+  Spinner,
+  Avatar,
+  Overlay,
+  Spacer,
+  ConditionalWrapper,
+  Sprite,
+  StateIndicator
+};
+//# sourceMappingURL=chunk-DMLYJFYQ.js.map