@almadar/mobile 1.1.0

package/README.md

@@ -0,0 +1,203 @@
+# @almadar/mobile
+
+React Native UI components for the Almadar platform. This package provides mobile-optimized components that mirror the functionality of @almadar/ui while following React Native patterns and best practices.
+
+## Features
+
+- **154 Components** - Comprehensive component library (100% of @almadar/ui)
+- **Event Bus Architecture** - Declarative event-driven interactions
+- **Closed Circuit Props** - Consistent loading, error, and entity states
+- **Theme System** - Full light/dark theme support with CSS variable parity
+- **TypeScript** - Full type safety
+
+## Installation
+
+```bash
+npm install @almadar/mobile
+# or
+yarn add @almadar/mobile
+# or
+pnpm add @almadar/mobile
+```
+
+## Quick Start
+
+```tsx
+import { ThemeProvider, Button, Card, VStack } from '@almadar/mobile';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <VStack spacing={16} style={{ padding: 16 }}>
+        <Card>
+          <Button 
+            variant="primary"
+            action="SUBMIT_FORM"
+            actionPayload={{ formId: 'contact' }}
+          >
+            Submit
+          </Button>
+        </Card>
+      </VStack>
+    </ThemeProvider>
+  );
+}
+```
+
+## Component Architecture
+
+### Closed Circuit Props
+
+All components implement the closed circuit pattern:
+
+```tsx
+interface ComponentProps {
+  // Visual state
+  isLoading?: boolean;  // Shows LoadingState when true
+  error?: Error | null; // Shows ErrorState when present
+  entity?: string;      // Entity name for auto-fetch
+  
+  // Styling
+  style?: ViewStyle;    // React Native styles
+}
+```
+
+### Event Bus Pattern
+
+Interactive components use the event bus for loose coupling:
+
+```tsx
+<Button 
+  action="SAVE_ITEM"           // Emits 'UI:SAVE_ITEM'
+  actionPayload={{ id: 1 }}    // Event payload
+  onPress={() => {}}           // Optional callback
+>
+  Save
+</Button>
+```
+
+Events follow the pattern: `UI:EVENT_NAME`
+
+## Component Categories
+
+### Atoms (16 components)
+Basic building blocks:
+- **Layout**: VStack, HStack, Box, Center
+- **Typography**: Typography
+- **Form**: Button, Input, Label, Checkbox, Radio, Switch, Textarea, Select, Spinner, ProgressBar
+- **Display**: Card, Badge, Avatar, Divider, Icon
+
+### Molecules (18 components)
+Composite components:
+- **Feedback**: Alert, Toast, Skeleton, LoadingState, ErrorState, EmptyState
+- **Form**: FormField, FormSectionHeader, InputGroup, SearchInput, ButtonGroup
+- **Navigation**: Tabs, Breadcrumb
+- **Overlay**: Modal, Drawer, Tooltip, Popover, Menu
+
+### Organisms (28 components)
+Complex components:
+- **Layout**: Header, PageHeader, DashboardLayout, AuthLayout
+- **Data**: DataTable, StatCard, Timeline, EntityList, EntityCard, CardGrid
+- **Form**: FormSection, WizardContainer, DetailPanel
+- **Game**: BattleBoard, CastleBoard, WorldMapBoard, IsometricCanvas, GameCanvas3D, CombatLog, DialogueBox, GameHud, InventoryPanel, GameMenu, GameOverScreen, GameAudioProvider, GameAudioToggle, TraitSlot, TraitStateViewer, UncontrolledBattleBoard, CanvasEffect
+
+### Templates (2 components)
+Page layouts:
+- **DashboardLayout** - Main app layout with header
+- **AuthLayout** - Login/register layouts with keyboard avoiding
+
+### Hooks (9 hooks)
+- **useEventBus** - Event bus integration
+- **useTheme** - Theme access
+- **useThemeStyles** - Theme-aware StyleSheet
+- **useNavigation** - Navigation helpers
+- **useScrollHeader** - Collapsible headers
+- **useSafeAreaInsets** - Safe area handling
+- **usePullToRefresh** - Pull-to-refresh
+- **useInfiniteScroll** - Infinite scroll
+
+## Theming
+
+Themes match @almadar/ui CSS variables:
+
+```tsx
+const theme = {
+  colors: {
+    primary: '#14b8a6',
+    'primary-hover': '#0d9488',
+    'primary-foreground': '#ffffff',
+    // ... all CSS variables mapped
+  },
+  borderRadius: {
+    sm: 6,
+    md: 10,
+    lg: 14,
+    xl: 20,
+    full: 9999,
+  },
+  shadows: {
+    sm: { shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation },
+    main: { ... },
+    lg: { ... },
+  },
+};
+```
+
+## Phase Implementation Summary
+
+| Phase | Components Added | Coverage |
+|-------|------------------|----------|
+| Phase 1: Foundation | +10 | Atoms: 19% → 52% |
+| Phase 2: Navigation | +6 | Organisms: 5% → 11% |
+| Phase 3: Data Display | +10 | Molecules: 15% → 44% |
+| Phase 4: Advanced UI | +9 | Molecules: 36% → 50% |
+| Phase 5: Game Systems | +17 | Organisms: 11% → 28% |
+| Phase 6: Layout & Containers | +7 | Atoms/Molecules: expansion |
+| Phase 7: UI Enhancement | +8 | Molecules: expansion |
+| Phase 8: Data Display | +10 | Organisms: expansion |
+| Phase 9: Form & Input | +6 | Molecules/Organisms: expansion |
+| Phase 10: Layout Structure | +8 | Organisms: expansion |
+| Phase 11: Slots & Layouts | +5 | Organisms: expansion |
+| Phase 12: Book Components | +5 | Organisms: book/ |
+| Phase 13: Game Templates | +9 | Templates: expansion |
+| Phase 14: Puzzle Games | +16 | Organisms: puzzles/ |
+| Phase 15: Physics Sim | +3 | Organisms: physics-sim/ |
+| Phase 16: Specialized Views | +8 | Organisms: various |
+| **Total** | **+132** | **13% → 100%** |
+
+## Migration from @almadar/ui
+
+### Web to Mobile Mapping
+
+| Web (@almadar/ui) | Mobile (@almadar/mobile) |
+|-------------------|--------------------------|
+| `onClick` | `onPress` |
+| `className` | `style` (ViewStyle) |
+| `action` | `action` (same) |
+| `eventBus.emit('EVENT')` | `eventBus.emit('UI:EVENT')` |
+
+### Example Migration
+
+**Web:**
+```tsx
+<Button 
+  onClick={() => {}}
+  className="my-button"
+>
+  Click
+</Button>
+```
+
+**Mobile:**
+```tsx
+<Button 
+  onPress={() => {}}
+  style={{ marginTop: 8 }}
+>
+  Click
+</Button>
+```
+
+## License
+
+MIT

package/dist/chunk-6RVITGGH.js

@@ -0,0 +1,167 @@
+import {
+  useEventBus
+} from "./chunk-YTVYMEKU.js";
+import {
+  useTheme
+} from "./chunk-CUAWHLEK.js";
+
+// src/components/atoms/Label.tsx
+import React from "react";
+import { Text, StyleSheet } from "react-native";
+var Label = ({
+  children,
+  required = false,
+  disabled = false,
+  style
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        styles.label,
+        {
+          color: disabled ? theme.colors["muted-foreground"] : theme.colors.foreground
+        },
+        style
+      ]
+    },
+    children,
+    required && /* @__PURE__ */ React.createElement(Text, { style: [styles.required, { color: theme.colors.error }] }, " *")
+  );
+};
+var styles = StyleSheet.create({
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    marginBottom: 6
+  },
+  required: {
+    fontWeight: "400"
+  }
+});
+Label.displayName = "Label";
+
+// src/components/atoms/game/ControlButton.tsx
+import React2, { useState, useCallback } from "react";
+import {
+  TouchableOpacity,
+  Text as Text2,
+  StyleSheet as StyleSheet2
+} from "react-native";
+var sizeMap = {
+  sm: { width: 40, height: 40, fontSize: 14 },
+  md: { width: 56, height: 56, fontSize: 16 },
+  lg: { width: 72, height: 72, fontSize: 20 },
+  xl: { width: 96, height: 96, fontSize: 24 }
+};
+var shapeMap = {
+  circle: 9999,
+  rounded: 12,
+  square: 4
+};
+var variantMap = {
+  primary: {
+    backgroundColor: "#2563eb",
+    borderColor: "#60a5fa",
+    textColor: "#ffffff"
+  },
+  secondary: {
+    backgroundColor: "#374151",
+    borderColor: "#6b7280",
+    textColor: "#ffffff"
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    borderColor: "rgba(255,255,255,0.3)",
+    textColor: "#ffffff"
+  }
+};
+var ControlButton = ({
+  label,
+  icon,
+  size = "md",
+  shape = "circle",
+  variant = "secondary",
+  onPress,
+  onRelease,
+  pressEvent,
+  releaseEvent,
+  pressed,
+  disabled,
+  style
+}) => {
+  useTheme();
+  const eventBus = useEventBus();
+  const [isPressed, setIsPressed] = useState(false);
+  const actualPressed = pressed ?? isPressed;
+  const sizeConfig = sizeMap[size] ?? sizeMap.md;
+  const borderRadius = shapeMap[shape] ?? shapeMap.circle;
+  const variantConfig = variantMap[variant] ?? variantMap.secondary;
+  const handlePressIn = useCallback(
+    (_e) => {
+      if (disabled) return;
+      setIsPressed(true);
+      if (pressEvent) eventBus.emit(`UI:${pressEvent}`, {});
+      onPress?.();
+    },
+    [disabled, pressEvent, eventBus, onPress]
+  );
+  const handlePressOut = useCallback(
+    (_e) => {
+      if (disabled) return;
+      setIsPressed(false);
+      if (releaseEvent) eventBus.emit(`UI:${releaseEvent}`, {});
+      onRelease?.();
+    },
+    [disabled, releaseEvent, eventBus, onRelease]
+  );
+  return /* @__PURE__ */ React2.createElement(
+    TouchableOpacity,
+    {
+      activeOpacity: 0.8,
+      disabled,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      style: [
+        styles2.button,
+        {
+          width: sizeConfig.width,
+          height: sizeConfig.height,
+          borderRadius,
+          backgroundColor: variantConfig.backgroundColor,
+          borderColor: variantConfig.borderColor,
+          opacity: disabled ? 0.5 : 1,
+          transform: [{ scale: actualPressed ? 0.95 : 1 }]
+        },
+        style
+      ]
+    },
+    icon ? /* @__PURE__ */ React2.createElement(Text2, { style: { fontSize: sizeConfig.fontSize * 1.5 } }, icon) : label ? /* @__PURE__ */ React2.createElement(
+      Text2,
+      {
+        style: {
+          fontSize: sizeConfig.fontSize,
+          color: variantConfig.textColor,
+          fontWeight: "700"
+        }
+      },
+      label
+    ) : null
+  );
+};
+var styles2 = StyleSheet2.create({
+  button: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+    userSelect: "none"
+  }
+});
+ControlButton.displayName = "ControlButton";
+
+export {
+  Label,
+  ControlButton
+};
+//# sourceMappingURL=chunk-6RVITGGH.js.map

package/dist/chunk-6RVITGGH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/atoms/Label.tsx","../src/components/atoms/game/ControlButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, StyleSheet, TextStyle } from 'react-native';\nimport { useTheme } from '../../providers/ThemeContext';\n\nexport interface LabelProps {\n  children: React.ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n  style?: TextStyle;\n  /** Entity name for schema-driven auto-fetch */\n  entity?: string;\n}\n\nexport const Label: React.FC<LabelProps> = ({\n  children,\n  required = false,\n  disabled = false,\n  style,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Text\n      style={[\n        styles.label,\n        {\n          color: disabled \n            ? theme.colors['muted-foreground'] \n            : theme.colors.foreground,\n        },\n        style,\n      ]}\n    >\n      {children}\n      {required && (\n        <Text style={[styles.required, { color: theme.colors.error }]}>\n          {' *'}\n        </Text>\n      )}\n    </Text>\n  );\n};\n\nconst styles = StyleSheet.create({\n  label: {\n    fontSize: 14,\n    fontWeight: '500',\n    marginBottom: 6,\n  },\n  required: {\n    fontWeight: '400',\n  },\n});\n\nLabel.displayName = 'Label';\n","import React, { useState, useCallback } from 'react';\nimport { \n  TouchableOpacity, \n  Text, \n  StyleSheet, \n  GestureResponderEvent,\n  ViewStyle \n} from 'react-native';\nimport { useTheme } from '../../../providers/ThemeContext';\nimport { useEventBus } from '../../../hooks/useEventBus';\n\nexport interface ControlButtonProps {\n  /** Button label text */\n  label?: string;\n  /** Icon component or emoji */\n  icon?: React.ReactNode;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | string;\n  /** Shape variant */\n  shape?: 'circle' | 'rounded' | 'square' | string;\n  /** Visual variant */\n  variant?: 'primary' | 'secondary' | 'ghost' | string;\n  /** Called when button is pressed */\n  onPress?: () => void;\n  /** Called when button is released */\n  onRelease?: () => void;\n  /** Declarative event name emitted on press via useEventBus */\n  pressEvent?: string;\n  /** Declarative event name emitted on release via useEventBus */\n  releaseEvent?: string;\n  /** Whether the button is currently pressed */\n  pressed?: boolean;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Additional styles */\n  style?: ViewStyle;\n}\n\nconst sizeMap: Record<string, { width: number; height: number; fontSize: number }> = {\n  sm: { width: 40, height: 40, fontSize: 14 },\n  md: { width: 56, height: 56, fontSize: 16 },\n  lg: { width: 72, height: 72, fontSize: 20 },\n  xl: { width: 96, height: 96, fontSize: 24 },\n};\n\nconst shapeMap: Record<string, number> = {\n  circle: 9999,\n  rounded: 12,\n  square: 4,\n};\n\nconst variantMap: Record<string, { backgroundColor: string; borderColor: string; textColor: string }> = {\n  primary: { \n    backgroundColor: '#2563eb', \n    borderColor: '#60a5fa',\n    textColor: '#ffffff',\n  },\n  secondary: { \n    backgroundColor: '#374151', \n    borderColor: '#6b7280',\n    textColor: '#ffffff',\n  },\n  ghost: { \n    backgroundColor: 'transparent', \n    borderColor: 'rgba(255,255,255,0.3)',\n    textColor: '#ffffff',\n  },\n};\n\nexport const ControlButton: React.FC<ControlButtonProps> = ({\n  label,\n  icon,\n  size = 'md',\n  shape = 'circle',\n  variant = 'secondary',\n  onPress,\n  onRelease,\n  pressEvent,\n  releaseEvent,\n  pressed,\n  disabled,\n  style,\n}) => {\n  useTheme(); // Theme hook required by pattern\n  const eventBus = useEventBus();\n  const [isPressed, setIsPressed] = useState(false);\n  const actualPressed = pressed ?? isPressed;\n\n  const sizeConfig = sizeMap[size] ?? sizeMap.md;\n  const borderRadius = shapeMap[shape] ?? shapeMap.circle;\n  const variantConfig = variantMap[variant] ?? variantMap.secondary;\n\n  const handlePressIn = useCallback(\n    (_e: GestureResponderEvent) => {\n      if (disabled) return;\n      setIsPressed(true);\n      if (pressEvent) eventBus.emit(`UI:${pressEvent}`, {});\n      onPress?.();\n    },\n    [disabled, pressEvent, eventBus, onPress]\n  );\n\n  const handlePressOut = useCallback(\n    (_e: GestureResponderEvent) => {\n      if (disabled) return;\n      setIsPressed(false);\n      if (releaseEvent) eventBus.emit(`UI:${releaseEvent}`, {});\n      onRelease?.();\n    },\n    [disabled, releaseEvent, eventBus, onRelease]\n  );\n\n  return (\n    <TouchableOpacity\n      activeOpacity={0.8}\n      disabled={disabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      style={[\n        styles.button,\n        {\n          width: sizeConfig.width,\n          height: sizeConfig.height,\n          borderRadius,\n          backgroundColor: variantConfig.backgroundColor,\n          borderColor: variantConfig.borderColor,\n          opacity: disabled ? 0.5 : 1,\n          transform: [{ scale: actualPressed ? 0.95 : 1 }],\n        },\n        style as never,\n      ]}\n    >\n      {icon ? (\n        <Text style={{ fontSize: sizeConfig.fontSize * 1.5 }}>\n          {icon as string}\n        </Text>\n      ) : label ? (\n        <Text\n          style={{\n            fontSize: sizeConfig.fontSize,\n            color: variantConfig.textColor,\n            fontWeight: '700',\n          }}\n        >\n          {label}\n        </Text>\n      ) : null}\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  button: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderWidth: 2,\n    userSelect: 'none',\n  },\n});\n\nControlButton.displayName = 'ControlButton';\n"],"mappings":"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","names":["React","Text","StyleSheet","React","styles","Text","StyleSheet"]}