npm package: @flightdev/mobile
Description: Mobile app support for Flight Framework via Capacitor - iOS & Android
Author: Flight Contributors
Latest version: 0.2.1

# @flightdev/mobile

Mobile app support for Flight Framework via Capacitor. Build iOS and Android apps with the same codebase.

## Philosophy

**Flight doesn't impose** - install only the Capacitor plugins you need. All plugins are optional peer dependencies. Hooks gracefully degrade on web.

## Features

- **Cross-platform** - iOS, Android, and Web from one codebase
- **React hooks** - usePlatform, useCamera, useGeolocation, and more
- **Vue composables** - Reactive wrappers with automatic cleanup
- **Plugin freedom** - Install only what you need
- **Web fallback** - Graceful degradation, no errors

## Installation

```bash
# Core package
npm install @flightdev/mobile

# Install Capacitor (required for native)
npm install @capacitor/core @capacitor/cli

# Install only the plugins you need
npm install @capacitor/camera          # Optional
npm install @capacitor/geolocation     # Optional
npm install @capacitor/push-notifications # Optional
npm install @capacitor/haptics         # Optional
npm install @capacitor/preferences     # Optional
```

## Quick Start

### React

```tsx
import { usePlatform, useCamera, useGeolocation } from '@flightdev/mobile/react';

function App() {
    const { isNative, isIOS, isAndroid } = usePlatform();
    const { takePhoto, available: cameraAvailable } = useCamera();
    const { position, getCurrentPosition } = useGeolocation();
    
    return (
        <div>
            <p>Platform: {isIOS ? 'iOS' : isAndroid ? 'Android' : 'Web'}</p>
            
            {cameraAvailable && (
                <button onClick={() => takePhoto()}>Take Photo</button>
            )}
            
            <button onClick={getCurrentPosition}>Get Location</button>
            {position && <p>Lat: {position.coords.latitude}</p>}
        </div>
    );
}
```

### Vue

```vue
<script setup>
import { usePlatform, useCamera, useGeolocation } from '@flightdev/mobile/vue';

const { isNative, isIOS } = usePlatform();
const { takePhoto, available } = useCamera();
const { position, getCurrentPosition, loading } = useGeolocation();
</script>

<template>
    <p>Platform: {{ isIOS ? 'iOS' : 'Web' }}</p>
    <button v-if="available" @click="takePhoto">Take Photo</button>
    <button @click="getCurrentPosition">Get Location</button>
</template>
```

## Hooks

### usePlatform

Detect current platform.

```typescript
const { platform, isNative, isIOS, isAndroid, isWeb } = usePlatform();
```

### useCamera

Take photos and pick images.

```typescript
const { takePhoto, pickImage, available } = useCamera();

const photo = await takePhoto({ quality: 90 });
const image = await pickImage();
```

### useGeolocation

Get device location.

```typescript
const { position, error, loading, getCurrentPosition, watchPosition } = useGeolocation();

await getCurrentPosition();
console.log(position.coords.latitude, position.coords.longitude);
```

### usePushNotifications

Handle push notifications.

```typescript
const { token, requestPermission, onNotificationReceived } = usePushNotifications();

await requestPermission();
console.log('FCM Token:', token);
```

### useHaptics

Haptic feedback.

```typescript
const { impact, notification, vibrate } = useHaptics();

await impact('medium');
await notification('success');
await vibrate(300);
```

### useStorage

Secure key-value storage.

```typescript
const { get, set, remove } = useStorage();

await set('theme', 'dark');
const theme = await get('theme');
```

## Configuration

Create `capacitor.config.ts`:

```typescript
import { defineCapacitorConfig } from '@flightdev/mobile/config';

export default defineCapacitorConfig({
    appId: 'com.example.myapp',
    appName: 'My App',
    webDir: 'dist',
    plugins: {
        PushNotifications: {
            presentationOptions: ['badge', 'sound', 'alert'],
        },
    },
});
```

## Build Commands

```bash
# Add platforms
npx cap add ios
npx cap add android

# Build web assets
npm run build

# Sync to native projects
npx cap sync

# Open native IDE
npx cap open ios
npx cap open android
```

## License

MIT