@robono/location-react-native 0.0.0-stage → 0.1.0

package/app.plugin.cjs

@@ -0,0 +1,59 @@
+const { createRunOncePlugin, withPlugins } = require("expo/config-plugins");
+function withRobonoLocation(config, options = {}) {
+  const fs = require("node:fs"), path = require("node:path");
+  const read = (platform) => {
+    const file = options.accessFiles?.[platform];
+    if (!file) return undefined;
+    const value = JSON.parse(
+      fs.readFileSync(
+        path.resolve(config._internal?.projectRoot ?? process.cwd(), file),
+        "utf8",
+      ),
+    );
+    if (
+      value.platform !== platform || typeof value.mapAccess !== "string" ||
+      value.identifier !==
+        (platform === "ios"
+          ? config.ios?.bundleIdentifier
+          : config.android?.package)
+    ) {
+      throw new Error(
+        "Robono Maps configuration does not match this app identifier.",
+      );
+    }
+    return value.mapAccess;
+  };
+  options = {
+    ...options,
+    iosMapKey: read("ios") ?? options.iosMapKey,
+    androidMapKey: read("android") ?? options.androidMapKey,
+  };
+  const {
+    iosMapKey,
+    androidMapKey,
+    background = false,
+    permissionText =
+      "Allow this app to share your location with the people you choose.",
+  } = options;
+  if (!iosMapKey || !androidMapKey) {
+    throw new Error(
+      "Robono Maps access must be provisioned for both app identifiers.",
+    );
+  }
+  if(options.motion) config=withPlugins(config, [["expo-sensors", {motionPermission:options.motionPermission ?? "Allow this app to share device movement with the people you choose. This does not detect screen use."}]]);
+  return withPlugins(config, [["expo-location", {
+    locationWhenInUsePermission: permissionText,
+    locationAlwaysAndWhenInUsePermission: permissionText,
+    isIosBackgroundLocationEnabled: background,
+    isAndroidBackgroundLocationEnabled: background,
+    isAndroidForegroundServiceEnabled: background,
+  }], ["react-native-maps", {
+    iosGoogleMapsApiKey: iosMapKey,
+    androidGoogleMapsApiKey: androidMapKey,
+  }]]);
+}
+module.exports = createRunOncePlugin(
+  withRobonoLocation,
+  "@robono/location-react-native",
+  "0.1.0",
+);

package/dist/AvatarLocationMap.d.ts

@@ -0,0 +1,14 @@
+import type { Coordinate } from "@robono/location";
+/** The avatar stays on the marker when the anchored details are dismissed. */
+export declare function AvatarLocationMap({ position, name, avatar, updated, accuracyMeters, route, destination, onDirections, onMapReady, onLocateMe, }: {
+    position: Coordinate;
+    name: string;
+    avatar?: string | null;
+    updated: string;
+    accuracyMeters?: number;
+    route?: Coordinate[];
+    destination?: Coordinate | null;
+    onDirections: () => void;
+    onMapReady?: () => void;
+    onLocateMe?: (signal: AbortSignal) => Promise<Coordinate>;
+}): import("react").JSX.Element;

package/dist/AvatarLocationMap.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { ActivityIndicator, Image, Pressable, StyleSheet, Text, View } from "react-native";
+import MapView, { Circle, Marker, Polyline, PROVIDER_GOOGLE } from "react-native-maps";
+import Ionicons from "./visual/RobonoIcon";
+/** The avatar stays on the marker when the anchored details are dismissed. */
+export function AvatarLocationMap({ position, name, avatar, updated, accuracyMeters, route = [], destination, onDirections, onMapReady, onLocateMe, }) {
+    const map = useRef(null), marker = useRef(null), generation = useRef(0), viewerRequest = useRef(null);
+    const [open, setOpen] = useState(true), [anchor, setAnchor] = useState(null), [size, setSize] = useState({ width: 0, height: 0 }), [ready, setReady] = useState(false), [popupHeight, setPopupHeight] = useState(84), [imageFailed, setImageFailed] = useState(false), [mapType, setMapType] = useState("standard"), [viewerPosition, setViewerPosition] = useState(null), [locating, setLocating] = useState(false), [locateError, setLocateError] = useState("");
+    const latest = useRef(position);
+    latest.current = position;
+    const project = useCallback(async () => {
+        const version = ++generation.current;
+        try {
+            const point = await map.current?.pointForCoordinate(latest.current);
+            if (version === generation.current && point)
+                setAnchor(point);
+        }
+        catch {
+            if (version === generation.current)
+                setAnchor(null);
+        }
+    }, []);
+    const redraw = useCallback(() => {
+        requestAnimationFrame(() => requestAnimationFrame(() => marker.current?.redraw()));
+    }, []);
+    useEffect(() => {
+        setImageFailed(false);
+        redraw();
+    }, [avatar, redraw]);
+    useEffect(() => {
+        if (ready) {
+            void project();
+            redraw();
+        }
+    }, [position.latitude, position.longitude, ready, project, redraw]);
+    useEffect(() => () => {
+        generation.current++;
+        viewerRequest.current?.abort();
+    }, []);
+    const locateFriend = () => {
+        // An explicit friend tap wins over an in-flight request to frame both people.
+        viewerRequest.current?.abort();
+        viewerRequest.current = null;
+        setLocating(false);
+        setLocateError("");
+        setOpen(true);
+        map.current?.animateCamera({ center: latest.current, zoom: 16 }, { duration: 350 });
+    };
+    const locateBoth = async () => {
+        if (!onLocateMe || viewerRequest.current)
+            return;
+        const request = new AbortController();
+        viewerRequest.current = request;
+        setLocating(true);
+        setLocateError("");
+        try {
+            const me = await onLocateMe(request.signal);
+            if (request.signal.aborted)
+                return;
+            if (!Number.isFinite(me.latitude) || !Number.isFinite(me.longitude) || Math.abs(me.latitude) > 90 || Math.abs(me.longitude) > 180) {
+                throw Error("Your location is unavailable. Try again.");
+            }
+            setViewerPosition(me);
+            map.current?.fitToCoordinates([latest.current, me], {
+                edgePadding: { top: popupHeight + 110, right: 76, bottom: 120, left: 36 },
+                animated: true,
+            });
+        }
+        catch (error) {
+            if (!request.signal.aborted)
+                setLocateError(error instanceof Error ? error.message : "Could not find your location. Try again.");
+        }
+        finally {
+            if (viewerRequest.current === request) {
+                viewerRequest.current = null;
+                setLocating(false);
+            }
+        }
+    };
+    const width = Math.min(200, size.width - 24), left = anchor
+        ? Math.max(12, Math.min(size.width - width - 12, anchor.x - width / 2))
+        : 12;
+    const above = !!anchor && anchor.y > popupHeight + 84;
+    const top = anchor
+        ? Math.max(8, Math.min(size.height - popupHeight - 12, above ? anchor.y - 65 - popupHeight - 9 : anchor.y + 10))
+        : 8;
+    const face = (large = false, compact = false) => avatar && !imageFailed
+        ? (_jsx(Image, { source: { uri: avatar }, style: compact ? s.controlFace : large ? s.face : s.pinFace, onLoad: redraw, onError: () => {
+                setImageFailed(true);
+                redraw();
+            } }))
+        : (_jsx(View, { style: [compact ? s.controlFace : large ? s.face : s.pinFace, s.initial], children: _jsx(Text, { style: [s.letter, large && s.popupLetter, compact && s.controlLetter], children: name.trim().charAt(0).toUpperCase() }) }));
+    return (_jsxs(View, { style: { flex: 1 }, onLayout: (e) => {
+            setSize(e.nativeEvent.layout);
+            void project();
+        }, children: [_jsxs(MapView, { ref: map, style: StyleSheet.absoluteFill, provider: PROVIDER_GOOGLE, mapType: mapType, maxZoomLevel: 18, toolbarEnabled: false, initialRegion: {
+                    ...position,
+                    latitudeDelta: .012,
+                    longitudeDelta: .012,
+                }, showsUserLocation: false, showsMyLocationButton: false, onMapReady: () => {
+                    setReady(true);
+                    if (route.length) {
+                        map.current?.fitToCoordinates(route, {
+                            edgePadding: { top: 220, right: 55, bottom: 70, left: 55 },
+                            animated: false,
+                        });
+                    }
+                    else if (destination) {
+                        map.current?.fitToCoordinates([position, destination], {
+                            edgePadding: { top: 130, right: 55, bottom: 70, left: 55 },
+                            animated: false,
+                        });
+                    }
+                    void project();
+                    onMapReady?.();
+                }, onRegionChange: () => void project(), onRegionChangeComplete: () => void project(), onPress: (e) => {
+                    if (e.nativeEvent.action !== "marker-press")
+                        setOpen(false);
+                }, onPoiClick: () => setOpen(false), children: [viewerPosition && (_jsx(Marker, { coordinate: viewerPosition, title: "You", anchor: { x: .5, y: .5 }, children: _jsx(View, { style: s.viewerDot }) })), !!route.length && (_jsx(Polyline, { coordinates: route, strokeColor: "#b75319", strokeWidth: 5 })), !!destination && (_jsx(Marker, { coordinate: destination, title: "Destination", pinColor: "#b75319" })), _jsx(Marker, { ref: marker, coordinate: position, anchor: { x: .5, y: 1 }, tracksViewChanges: false, onPress: () => {
+                            setOpen(true);
+                            void project();
+                        }, accessibilityLabel: `${name}, location`, children: _jsxs(View, { style: s.pin, onLayout: redraw, children: [_jsx(View, { style: s.head, children: face() }), _jsx(View, { style: s.tip })] }) }), Number.isFinite(accuracyMeters) && accuracyMeters > 0 && _jsx(Circle, { center: position, radius: accuracyMeters, strokeColor: "rgba(50,100,200,.4)", fillColor: "rgba(50,100,200,.1)", strokeWidth: 1 })] }), open && anchor && size.width > 0 && anchor.x >= 0 && anchor.x <= size.width && anchor.y >= 0 && anchor.y <= size.height && (_jsxs(View, { style: [s.popup, { width, left, top }], onLayout: event => setPopupHeight(event.nativeEvent.layout.height), accessibilityViewIsModal: false, children: [_jsxs(View, { style: s.person, children: [face(true), _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { numberOfLines: 2, style: s.name, children: name }), _jsx(Text, { style: s.updated, children: updated }), Number.isFinite(accuracyMeters) && _jsxs(Text, { style: s.updated, children: ["Accuracy \u00B1", Math.ceil(accuracyMeters), " m"] })] })] }), _jsx(Pressable, { style: s.directions, hitSlop: 4, accessibilityRole: "button", onPress: onDirections, children: _jsx(Text, { style: s.action, children: "Directions" }) }), _jsx(View, { pointerEvents: "none", style: [s.pointer, {
+                                left: Math.max(18, Math.min(width - 30, anchor.x - left - 9)),
+                                ...(above
+                                    ? { bottom: -9, borderTopWidth: 10, borderTopColor: "white" }
+                                    : {
+                                        top: -9,
+                                        borderBottomWidth: 10,
+                                        borderBottomColor: "white",
+                                    }),
+                            }] })] })), _jsx(View, { style: s.mapTypes, accessibilityRole: "radiogroup", children: [['standard', 'Regular'], ['satellite', 'Satellite']].map(([value, label]) => (_jsx(Pressable, { hitSlop: 6, accessibilityRole: "radio", accessibilityLabel: label + " map", accessibilityState: { checked: mapType === value }, onPress: () => setMapType(value), style: [s.mapType, mapType === value && s.mapTypeSelected], children: _jsx(Text, { style: [s.mapTypeText, mapType === value && s.mapTypeTextSelected], children: label }) }, value))) }), !!locateError && _jsx(Text, { accessibilityRole: "alert", style: s.locateError, children: locateError }), _jsxs(View, { style: s.locateControls, children: [_jsx(Pressable, { style: s.locateButton, hitSlop: 6, accessibilityRole: "button", accessibilityLabel: `Locate ${name}`, disabled: !ready, onPress: locateFriend, children: face(false, true) }), !!onLocateMe && _jsx(Pressable, { style: s.locateButton, hitSlop: 6, accessibilityRole: "button", accessibilityLabel: "Locate me and show both locations", accessibilityState: { busy: locating }, disabled: !ready || locating, onPress: () => void locateBoth(), children: locating ? _jsx(ActivityIndicator, { size: "small", color: "#a34817" }) : _jsx(Ionicons, { name: "locate-outline", size: 20, color: "#333" }) })] })] }));
+}
+const s = StyleSheet.create({
+    mapTypes: { position: "absolute", right: 10, top: 10, flexDirection: "row", backgroundColor: "white", borderRadius: 6, padding: 2, elevation: 2, shadowColor: "#000", shadowOpacity: .15, shadowRadius: 4 },
+    mapType: { minHeight: 24, paddingHorizontal: 7, justifyContent: "center", borderRadius: 4 },
+    mapTypeSelected: { backgroundColor: "#f4e8dd" },
+    mapTypeText: { fontSize: 12, color: "#333", fontWeight: "500" },
+    mapTypeTextSelected: { color: "#8e3f13", fontWeight: "600" },
+    locateControls: { position: "absolute", right: 12, bottom: 30, gap: 12 },
+    locateButton: { width: 32, height: 32, borderRadius: 6, backgroundColor: "white", alignItems: "center", justifyContent: "center", elevation: 4, shadowColor: "#000", shadowOpacity: .15, shadowRadius: 4 },
+    controlFace: { width: 22, height: 22, borderRadius: 11 },
+    controlLetter: { fontSize: 15 },
+    viewerDot: { width: 18, height: 18, borderRadius: 9, borderWidth: 3, borderColor: "white", backgroundColor: "#2878df" },
+    locateError: { position: "absolute", left: 12, right: 72, bottom: 30, backgroundColor: "white", color: "#333", padding: 10, borderRadius: 10, fontSize: 14 },
+    pin: { width: 52, height: 65, alignItems: "center" },
+    head: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        backgroundColor: "white",
+        padding: 3,
+        borderWidth: 2,
+        borderColor: "#b75319",
+    },
+    pinFace: { width: 40, height: 40, borderRadius: 20 },
+    tip: {
+        borderLeftWidth: 9,
+        borderRightWidth: 9,
+        borderTopWidth: 13,
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent",
+        borderTopColor: "#b75319",
+        marginTop: -2,
+    },
+    face: { width: 28, height: 28, borderRadius: 14 },
+    popupLetter: { fontSize: 18 },
+    initial: {
+        backgroundColor: "#272727",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    letter: { color: "#e8843a", fontWeight: "600", fontSize: 24 },
+    popup: {
+        position: "absolute",
+        backgroundColor: "white",
+        borderRadius: 10,
+        padding: 8,
+        shadowColor: "#000",
+        shadowOpacity: .2,
+        shadowRadius: 8,
+        elevation: 6,
+    },
+    person: { flexDirection: "row", gap: 6, alignItems: "center" },
+    name: { fontSize: 17, fontWeight: "600", color: "#222" },
+    updated: { fontSize: 12, color: "#666", marginTop: 1 },
+    directions: {
+        minHeight: 32,
+        justifyContent: "center",
+        marginTop: 2,
+        alignItems: "center",
+        borderTopWidth: 1,
+        borderTopColor: "#ddd",
+    },
+    action: { fontSize: 16, fontWeight: "600", color: "#a34817" },
+    pointer: {
+        position: "absolute",
+        borderLeftWidth: 9,
+        borderRightWidth: 9,
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent",
+    },
+});

package/dist/GeofenceEditor.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import { type FenceShape, type AreaRules } from "@robono/location";
+export interface GeofenceDraft {
+    id: string;
+    name: string;
+    shape: FenceShape;
+    onEnter: boolean;
+    onExit: boolean;
+    enabled: boolean;
+    revision: number;
+    rules?: AreaRules;
+}
+/** The map uses onPress to update the controlled shape. Save runs through the authenticated client. */
+export declare function GeofenceEditor({ value, onChange, onSave, onCancel, map, accent, units, scheduled, }: {
+    value: GeofenceDraft;
+    onChange: (value: GeofenceDraft) => void;
+    onSave: (value: GeofenceDraft) => Promise<void>;
+    onCancel: () => void;
+    map: ReactNode;
+    accent?: string;
+    units?: "metric" | "imperial";
+    scheduled?: boolean;
+}): import("react").JSX.Element;

package/dist/GeofenceEditor.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pressable, ScrollView, StyleSheet, Switch, Text, TextInput, View, } from "react-native";
+import { validateFence, defaultAreaRules, validateAreaRules } from "@robono/location";
+/** The map uses onPress to update the controlled shape. Save runs through the authenticated client. */
+export function GeofenceEditor({ value, onChange, onSave, onCancel, map, accent = "#b75319", units = "metric", scheduled = true, }) {
+    const rules = value.rules ?? defaultAreaRules(), schedule = rules.schedule;
+    const changeRules = (patch) => onChange({ ...value, rules: { ...rules, ...patch } });
+    const changeSchedule = (patch) => { if (schedule)
+        changeRules({ schedule: { ...schedule, ...patch } }); };
+    const [busy, setBusy] = useState(false), [error, setError] = useState("");
+    const button = (label, onPress) => (_jsx(Pressable, { accessibilityRole: "button", disabled: busy, onPress: onPress, style: styles.button, children: _jsx(Text, { style: { color: accent, fontSize: 15 }, children: label }) }));
+    async function save() {
+        if (busy)
+            return;
+        setError("");
+        try {
+            if (!value.name.trim() || value.name.length > 80) {
+                throw Error("Give this area a name.");
+            }
+            validateFence(value.shape);
+            validateAreaRules(rules);
+            if (value.enabled && !value.onEnter && !value.onExit && !schedule?.arriveBy && !schedule?.leaveBy) {
+                throw Error("Choose an arrival or departure alert.");
+            }
+            setBusy(true);
+            await onSave({ ...value, rules, name: value.name.trim() });
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : "The area could not be saved.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs(View, { style: styles.screen, children: [_jsxs(View, { style: styles.header, children: [button("Cancel", onCancel), _jsx(Text, { style: styles.heading, children: "Area alerts" }), button(busy ? "Saving…" : "Save", () => void save())] }), _jsx(View, { style: styles.map, children: map }), _jsxs(ScrollView, { style: styles.form, contentContainerStyle: { padding: 20 }, keyboardShouldPersistTaps: "handled", children: [_jsx(Text, { style: styles.label, children: "Area name" }), _jsx(TextInput, { accessibilityLabel: "Area name", value: value.name, maxLength: 80, onChangeText: (name) => onChange({ ...value, name }), style: styles.input }), _jsxs(View, { style: styles.row, children: [button("Circle", () => onChange({
+                                ...value,
+                                shape: {
+                                    kind: "circle",
+                                    center: value.shape.kind === "circle"
+                                        ? value.shape.center
+                                        : value.shape.vertices[0] ?? { latitude: 0, longitude: 0 },
+                                    radiusMeters: 200,
+                                },
+                            })), button("Draw boundary", () => onChange({ ...value, shape: { kind: "polygon", vertices: [] } }))] }), value.shape.kind === "circle"
+                        ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.label, children: units === "imperial" ? "Radius in feet" : "Radius in metres" }), _jsx(TextInput, { accessibilityLabel: units === "imperial"
+                                        ? "Radius in feet"
+                                        : "Radius in metres", keyboardType: "numeric", value: String(Math.round(value.shape.radiusMeters /
+                                        (units === "imperial" ? 0.3048 : 1))), onChangeText: (text) => {
+                                        if (value.shape.kind === "circle") {
+                                            onChange({
+                                                ...value,
+                                                shape: {
+                                                    ...value.shape,
+                                                    radiusMeters: Number(text) *
+                                                        (units === "imperial" ? 0.3048 : 1),
+                                                },
+                                            });
+                                        }
+                                    }, style: styles.input }), _jsx(Text, { style: styles.help, children: "Tap the map to move the centre." })] }))
+                        : (_jsxs(_Fragment, { children: [_jsxs(Text, { style: styles.help, children: ["Tap the map to add boundary points.", " ", value.shape.vertices.length, " points."] }), button("Undo last point", () => {
+                                    if (value.shape.kind === "polygon") {
+                                        onChange({
+                                            ...value,
+                                            shape: {
+                                                ...value.shape,
+                                                vertices: value.shape.vertices.slice(0, -1),
+                                            },
+                                        });
+                                    }
+                                })] })), ["onEnter", "onExit", "enabled"].map((key) => (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.label, children: key === "onEnter"
+                                    ? "Notify on arrival"
+                                    : key === "onExit"
+                                        ? "Notify on departure"
+                                        : "Area alerts enabled" }), _jsx(Switch, { accessibilityLabel: key === "onEnter"
+                                    ? "Notify on arrival"
+                                    : key === "onExit"
+                                        ? "Notify on departure"
+                                        : "Area alerts enabled", value: value[key], onValueChange: (v) => onChange({ ...value, [key]: v }), trackColor: { true: accent } })] }, key))), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.label, children: "Start departure alerts after the first arrival" }), _jsx(Switch, { accessibilityLabel: "Start departure alerts after the first arrival", value: rules.armOnEntry, onValueChange: armOnEntry => changeRules({ armOnEntry }) })] }), scheduled && _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.label, children: "Use a schedule" }), _jsx(Switch, { accessibilityLabel: "Use a schedule", value: !!schedule, onValueChange: enabled => changeRules({ schedule: enabled ? { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, weekdays: [1, 2, 3, 4, 5], start: '08:00', end: '18:00', arriveBy: null, leaveBy: null } : null }) })] }), scheduled && schedule && _jsxs(_Fragment, { children: [_jsx(Text, { style: styles.label, children: "Time zone" }), _jsx(TextInput, { accessibilityLabel: "Time zone", style: styles.input, value: schedule.timeZone, autoCapitalize: "none", onChangeText: timeZone => changeSchedule({ timeZone }) }), _jsx(View, { style: { flexDirection: 'row', flexWrap: 'wrap', gap: 4 }, children: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((d, i) => _jsx(Pressable, { accessibilityRole: "checkbox", accessibilityState: { checked: schedule.weekdays.includes(i) }, onPress: () => changeSchedule({ weekdays: schedule.weekdays.includes(i) ? schedule.weekdays.filter(n => n !== i) : [...schedule.weekdays, i] }), style: [styles.button, { backgroundColor: schedule.weekdays.includes(i) ? '#e7eddf' : '#fff' }], children: _jsx(Text, { children: d }) }, d)) }), ['start', 'end', 'arriveBy', 'leaveBy'].map((key) => _jsxs(View, { children: [_jsx(Text, { style: styles.label, children: { start: 'Alerts from', end: 'Until', arriveBy: 'Expected arrival (optional)', leaveBy: 'Expected departure (optional)' }[key] }), _jsx(TextInput, { accessibilityLabel: { start: 'Alerts from', end: 'Until', arriveBy: 'Expected arrival', leaveBy: 'Expected departure' }[key], style: styles.input, value: schedule[key] ?? '', placeholder: "HH:MM", maxLength: 5, onChangeText: v => changeSchedule({ [key]: v || (['arriveBy', 'leaveBy'].includes(key) ? null : '') }) })] }, key)), _jsx(Text, { style: styles.help, children: "Use 24-hour times in the selected time zone. Stale location is reported as unavailable, never as a missed arrival or departure." })] }), error && (_jsx(Text, { accessibilityRole: "alert", style: { color: "#a32e25" }, children: error }))] })] }));
+}
+const styles = StyleSheet.create({
+    screen: { flex: 1, backgroundColor: "#fff" },
+    header: { flexDirection: "row", alignItems: "center", paddingHorizontal: 12 },
+    heading: {
+        fontSize: 20,
+        fontWeight: "600",
+        flex: 1,
+        textAlign: "center",
+        color: "#22291f",
+    },
+    button: { minHeight: 44, justifyContent: "center", padding: 12 },
+    map: { flex: 1, minHeight: 160 },
+    form: { maxHeight: "52%" },
+    label: { fontSize: 15, color: "#30392a", flex: 1 },
+    input: {
+        borderWidth: 1,
+        borderColor: "#dce0d8",
+        borderRadius: 10,
+        padding: 12,
+        color: "#22291f",
+        fontSize: 16,
+        marginVertical: 8,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        marginVertical: 8,
+    },
+    help: { fontSize: 14, color: "#697061", marginVertical: 6 },
+});

package/dist/LocationScreen.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import { type MotionReading, type LocationSettings, type Position } from "@robono/location";
+export interface LocationScreenProps {
+    settings: LocationSettings;
+    map: ReactNode;
+    name: string;
+    mode?: "pin" | "live" | "ongoing";
+    position?: Position | null;
+    status: "waiting" | "current" | "stale" | "ended";
+    sharing?: boolean;
+    expiresAt?: string;
+    address?: string;
+    onShare?: (mode: "pin" | "live" | "ongoing", minutes: number) => Promise<void>;
+    onStop?: () => Promise<void>;
+    onDirections?: () => void;
+    onAreas?: () => void;
+    onHistory?: () => void;
+    onBack?: () => void;
+    onRefine?: () => Promise<void>;
+    motion?: MotionReading | null;
+    motionSharing?: boolean;
+    onMotionSharing?: (enabled: boolean) => Promise<void>;
+}
+export declare function LocationScreen({ settings: s, map, name, mode, position, status, sharing, expiresAt, address, onShare, onStop, onDirections, onAreas, onHistory, onBack, onRefine, motion, motionSharing, onMotionSharing, }: LocationScreenProps): import("react").JSX.Element;
+export declare function LocationMessage({ title, detail, onOpen, accent }: {
+    title?: string;
+    detail: string;
+    onOpen: () => void;
+    accent?: string;
+}): import("react").JSX.Element;

package/dist/LocationScreen.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View, } from "react-native";
+import Ionicons from "./visual/RobonoIcon";
+import { formatSpeed, motionLabel, locationAccuracyLabel, } from "@robono/location";
+export function LocationScreen({ settings: s, map, name, mode = "live", position, status, sharing, expiresAt, address, onShare, onStop, onDirections, onAreas, onHistory, onBack, onRefine, motion, motionSharing, onMotionSharing, }) {
+    const [open, setOpen] = useState(false), [busy, setBusy] = useState(false), [error, setError] = useState(""), [minutes, setMinutes] = useState(Math.min(60, s.maxShareMinutes)), [now, setNow] = useState(Date.now());
+    useEffect(() => {
+        const t = setInterval(() => setNow(Date.now()), 15000);
+        return () => clearInterval(t);
+    }, []);
+    useEffect(() => setMinutes((v) => Math.min(v, s.maxShareMinutes)), [
+        s.maxShareMinutes,
+    ]);
+    const ended = status === "ended" ||
+        !!expiresAt && Date.parse(expiresAt) <= now, stale = mode !== "pin" &&
+        (status === "stale" ||
+            !!position &&
+                now - Date.parse(position.capturedAt) > s.staleAfterSeconds * 1000);
+    async function act(fn) {
+        if (busy)
+            return;
+        setBusy(true);
+        setError("");
+        try {
+            await fn();
+            setOpen(false);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : "Please try again.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    const button = (label, press, primary = false) => (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, disabled: busy, onPress: press, style: [
+            styles.button,
+            primary && { backgroundColor: s.appearance.accent },
+            busy && { opacity: .5 },
+        ], children: _jsx(Text, { style: [styles.buttonText, primary && { color: "#fff" }], children: label }) }));
+    return (_jsxs(View, { style: styles.screen, children: [_jsxs(View, { style: styles.header, children: [onBack && (_jsx(Pressable, { accessibilityLabel: "Back", accessibilityRole: "button", onPress: onBack, hitSlop: 12, children: _jsx(Ionicons, { name: "arrow-back", size: 26, color: "#263022" }) })), _jsx(Text, { style: styles.title, children: s.appearance.title })] }), _jsxs(View, { style: styles.map, children: [ended
+                        ? (_jsx(View, { style: {
+                                flex: 1,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                backgroundColor: "#f1f3ee",
+                            }, children: _jsx(Text, { style: styles.secondary, children: "Location sharing has ended." }) }))
+                        : map, _jsxs(View, { style: styles.mapActions, children: [s.features.geofences && onAreas && button("Areas", onAreas), s.features.history && onHistory && button("History", onHistory)] })] }), _jsxs(View, { style: styles.details, children: [_jsx(Text, { style: styles.name, children: name }), _jsx(Text, { style: styles.secondary, children: ended
+                            ? "Sharing ended"
+                            : !position
+                                ? "Waiting for location"
+                                : mode === "pin"
+                                    ? "Shared location"
+                                    : stale
+                                        ? "Location may be out of date"
+                                        : "Location updated just now" }), address && _jsx(Text, { style: styles.address, children: address }), position && !ended && (_jsxs(Text, { style: styles.meta, children: [s.appearance.showSpeed
+                                ? formatSpeed(position.speedMps, s.units) + " · "
+                                : "", locationAccuracyLabel(position, s.units), s.appearance.showHeading && position.headingDegrees != null
+                                ? ` · Heading ${Math.round(position.headingDegrees)}°`
+                                : ""] })), s.features.motion && !ended && _jsx(Text, { style: styles.meta, children: motionLabel(motion, now) }), s.features.motion && onMotionSharing && !ended && button(motionSharing ? 'Stop sharing movement' : 'Share device movement', () => void act(() => onMotionSharing(!motionSharing))), s.features.precise && onRefine && !ended && button(busy ? 'Refining location…' : 'Improve location accuracy', () => void act(onRefine)), sharing && !ended && expiresAt && (_jsxs(Text, { style: styles.meta, children: ["Sharing until ", new Date(expiresAt).toLocaleTimeString([], {
+                                hour: "numeric",
+                                minute: "2-digit",
+                            })] })), _jsxs(View, { style: styles.actions, children: [sharing && !ended && onStop
+                                ? button("Stop sharing", () => void act(onStop))
+                                : onShare &&
+                                    (s.features.pin || s.features.live || s.features.ongoing)
+                                    ? button("Share location", () => setOpen(true), true)
+                                    : null, s.features.directions && !ended && position && onDirections &&
+                                button("Directions", onDirections)] }), error && !open && (_jsx(Text, { accessibilityRole: "alert", style: styles.error, children: error }))] }), _jsx(Modal, { transparent: true, visible: open, animationType: "slide", onRequestClose: () => {
+                    if (!busy)
+                        setOpen(false);
+                }, children: _jsx(View, { style: styles.scrim, children: _jsxs(ScrollView, { style: styles.sheet, contentContainerStyle: { padding: 24 }, children: [_jsx(Text, { style: styles.title, children: "Share location" }), _jsx(Text, { style: styles.secondary, children: "Only the people you choose can see your location." }), s.features.pin && button("Send this location", () => void act(() => onShare("pin", minutes))), s.features.live && (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.address, children: "Share live for" }), _jsx(View, { style: styles.actions, children: [
+                                            ...new Set([15, 60, 480, s.maxShareMinutes].filter((n) => n <= s.maxShareMinutes)),
+                                        ].sort((a, b) => a - b).map((n) => (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { checked: n === minutes }, onPress: () => setMinutes(n), style: [
+                                                styles.button,
+                                                n === minutes && { borderColor: s.appearance.accent },
+                                            ], children: _jsx(Text, { children: n < 60 ? `${n} min` : `${n / 60} hours` }) }, n))) }), button("Share live location", () => void act(() => onShare("live", minutes)), true)] })), s.features.ongoing && button("Keep sharing until I stop", () => void act(() => onShare("ongoing", minutes))), error && (_jsx(Text, { accessibilityRole: "alert", style: styles.error, children: error })), button("Cancel", () => setOpen(false))] }) }) })] }));
+}
+export function LocationMessage({ title = "Shared location", detail, onOpen, accent = "#b75319" }) {
+    return (_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${title}. ${detail}. Open map`, onPress: onOpen, style: styles.message, children: [_jsx(Ionicons, { name: "location-outline", size: 28, color: accent }), _jsx(Text, { style: styles.messageTitle, children: title }), _jsx(Text, { style: styles.meta, children: detail }), _jsx(Text, { style: [styles.meta, { color: accent, marginTop: 12 }], children: "Open map \u2192" })] }));
+}
+const styles = StyleSheet.create({
+    screen: { flex: 1, backgroundColor: "#fff" },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+    },
+    title: { fontSize: 20, fontWeight: "600", color: "#22291f" },
+    map: { flex: 1, minHeight: 100 },
+    mapActions: {
+        position: "absolute",
+        top: 10,
+        left: 10,
+        flexDirection: "row",
+        gap: 8,
+    },
+    details: { padding: 20, borderTopWidth: 1, borderColor: "#e4e7e0" },
+    name: { fontSize: 19, fontWeight: "600", color: "#22291f" },
+    secondary: { fontSize: 14, color: "#627259", marginVertical: 8 },
+    address: { fontSize: 14, color: "#333d2e", marginVertical: 8 },
+    meta: { fontSize: 13, color: "#697061", marginTop: 6 },
+    actions: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 12 },
+    button: {
+        minHeight: 44,
+        paddingHorizontal: 18,
+        paddingVertical: 12,
+        borderWidth: 1,
+        borderColor: "#dce0d8",
+        borderRadius: 24,
+        backgroundColor: "#fff",
+        alignItems: "center",
+        justifyContent: "center",
+        marginVertical: 3,
+    },
+    buttonText: { fontSize: 15, color: "#252c22" },
+    error: { color: "#a32e25", marginTop: 12 },
+    scrim: { flex: 1, backgroundColor: "#0006", justifyContent: "flex-end" },
+    sheet: {
+        maxHeight: "85%",
+        backgroundColor: "#fff",
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    message: {
+        width: 250,
+        maxWidth: "100%",
+        borderRadius: 18,
+        padding: 16,
+        backgroundColor: "#f0f3eb",
+        borderColor: "#dce0d8",
+        borderWidth: 1,
+    },
+    messageTitle: {
+        fontSize: 16,
+        fontWeight: "600",
+        color: "#242a20",
+        marginTop: 8,
+    },
+});

package/dist/MapView.d.ts

@@ -0,0 +1,15 @@
+import type { Coordinate, FenceShape } from "@robono/location";
+export declare function RobonoMapView({ center, markers, fences, route, accent, mapType, onSelect, onLoad, }: {
+    center: Coordinate;
+    markers?: {
+        id: string;
+        label: string;
+        position: Coordinate;
+    }[];
+    fences?: FenceShape[];
+    route?: Coordinate[];
+    accent?: string;
+    mapType?: "roadmap" | "satellite";
+    onSelect?: (p: Coordinate) => void;
+    onLoad?: () => void;
+}): import("react").JSX.Element;

package/dist/MapView.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import MapView, { Circle, Marker, Polygon, Polyline, PROVIDER_GOOGLE, } from "react-native-maps";
+export function RobonoMapView({ center, markers = [], fences = [], route = [], accent = "#b75319", mapType = "roadmap", onSelect, onLoad, }) {
+    const map = useRef(null);
+    useEffect(() => {
+        map.current?.animateToRegion({
+            ...center,
+            latitudeDelta: .012,
+            longitudeDelta: .012,
+        }, 350);
+    }, [center.latitude, center.longitude]);
+    return (_jsxs(MapView, { onMapReady: onLoad, ref: map, provider: PROVIDER_GOOGLE, style: { flex: 1 }, initialRegion: { ...center, latitudeDelta: .012, longitudeDelta: .012 }, mapType: mapType === "roadmap" ? "standard" : "satellite", showsUserLocation: false, showsMyLocationButton: false, showsCompass: true, onPress: (e) => onSelect?.(e.nativeEvent.coordinate), children: [markers.map((m) => (_jsx(Marker, { coordinate: m.position, title: m.label, pinColor: accent }, m.id))), fences.map((f, i) => f.kind === "circle"
+                ? (_jsx(Circle, { center: f.center, radius: f.radiusMeters, strokeColor: accent, fillColor: accent + "22", strokeWidth: 2 }, i))
+                : (_jsx(Polygon, { coordinates: f.vertices, strokeColor: accent, fillColor: accent + "22", strokeWidth: 2 }, i))), !!route.length && (_jsx(Polyline, { coordinates: route, strokeColor: accent, strokeWidth: 5 }))] }));
+}