@aria-framework/theme 0.3.0

package/dist/ui.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MONO = exports.TAB_BAR_HEIGHT = void 0;
+exports.useBottomPad = useBottomPad;
+exports.useStyles = useStyles;
+exports.Card = Card;
+exports.Btn = Btn;
+exports.Field = Field;
+exports.Badge = Badge;
+exports.Row = Row;
+exports.Segmented = Segmented;
+exports.Muted = Muted;
+exports.Mono = Mono;
+exports.Checkbox = Checkbox;
+exports.Skeleton = Skeleton;
+exports.Switch = Switch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/** Small shared UI primitives (kept in one file to limit screen boilerplate).
+ *  All are theme-aware via useTheme()/useStyles(). */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const tokens_1 = require("./tokens");
+const fonts_1 = require("./fonts");
+const ThemeContext_1 = require("./ThemeContext");
+/** Approx height of the floating bottom tab bar (excludes the device inset, which
+ *  the bar adds on top via useSafeAreaInsets). */
+exports.TAB_BAR_HEIGHT = 60;
+/** Bottom padding for a scroll container so its last content clears the gesture
+ *  bar — and, on the four tab screens, the floating tab bar too. Pass onTab=true
+ *  for Home/Tickets/Visits/Customers. */
+function useBottomPad(onTab = false) {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return (onTab ? exports.TAB_BAR_HEIGHT : tokens_1.space.lg) + insets.bottom;
+}
+/** IBM Plex Mono for data (IDs, time, distances, GPS) — loaded in App.tsx. */
+exports.MONO = fonts_1.FONT.mono;
+function makeStyles(c) {
+    return react_native_1.StyleSheet.create({
+        card: { backgroundColor: c.surface, borderRadius: 12, borderWidth: 1, borderColor: c.lineStrong, padding: tokens_1.space.lg, marginBottom: tokens_1.space.md },
+        btn: { paddingVertical: 12, paddingHorizontal: 16, borderRadius: 10, borderWidth: 1, alignItems: "center", justifyContent: "center", minHeight: 46 },
+        btnText: { fontSize: 15, fontWeight: "600", fontFamily: (0, fonts_1.hanken)("600") },
+        label: { fontSize: 13, color: c.muted, marginBottom: 4, fontWeight: "600", fontFamily: (0, fonts_1.hanken)("600") },
+        input: { backgroundColor: c.surface2, borderWidth: 1, borderColor: c.lineStrong, borderRadius: 10, paddingHorizontal: 12, paddingVertical: 10, fontSize: 15, color: c.text, fontFamily: (0, fonts_1.hanken)("400") },
+        badge: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, borderWidth: 1, alignSelf: "flex-start" },
+        h1: { fontSize: 22, fontWeight: "700", color: c.text, fontFamily: (0, fonts_1.hanken)("700") },
+        title: { fontSize: 16, fontWeight: "700", color: c.text, fontFamily: (0, fonts_1.hanken)("700") },
+        cbox: { width: 24, height: 24, borderRadius: 7, borderWidth: 2, borderColor: c.lineStrong, alignItems: "center", justifyContent: "center", marginRight: tokens_1.space.sm },
+        swTrack: { width: 46, height: 28, borderRadius: 999, justifyContent: "center" },
+        swKnob: { position: "absolute", width: 22, height: 22, borderRadius: 11, backgroundColor: "#ffffff", shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 2, shadowOffset: { width: 0, height: 1 }, elevation: 2 },
+    });
+}
+/** Theme-aware shared stylesheet — `const styles = useStyles()`. */
+function useStyles() {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    return (0, react_1.useMemo)(() => makeStyles(colors), [colors]);
+}
+function Card({ children, style, onLayout }) {
+    const styles = useStyles();
+    const { scheme } = (0, ThemeContext_1.useTheme)();
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.card, tokens_1.shadow[scheme], style], onLayout: onLayout, children: children });
+}
+function Btn({ title, onPress, loading, disabled, variant = "primary", }) {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    const styles = useStyles();
+    const isDisabled = disabled || loading;
+    const bg = variant === "primary" ? colors.primary : variant === "danger" ? colors.danger : variant === "signal" ? colors.signal : "transparent";
+    const fg = variant === "outline" ? colors.primary : "#ffffff";
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, disabled: isDisabled, style: ({ pressed }) => [
+            styles.btn,
+            { backgroundColor: bg, borderColor: variant === "outline" ? colors.primary : bg, opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1 },
+        ], children: loading ? (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: fg }) : (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.btnText, { color: fg }], children: title }) }));
+}
+function Field({ label, value, onChangeText, placeholder, secureTextEntry, keyboardType, multiline, autoCapitalize, }) {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { marginBottom: tokens_1.space.md }, children: [label ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: label }) : null, (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.input, multiline && { height: 96, textAlignVertical: "top" }], value: value, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: colors.textFaint, secureTextEntry: secureTextEntry, keyboardType: keyboardType, multiline: multiline, autoCapitalize: autoCapitalize })] }));
+}
+function Badge({ label, color, filled }) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.badge, filled ? { backgroundColor: color, borderColor: color } : { backgroundColor: color + "22", borderColor: color }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: filled ? "#ffffff" : color, fontSize: 12, fontWeight: "600" }, children: label }) }));
+}
+function Row({ children, style }) {
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ flexDirection: "row", alignItems: "center", gap: tokens_1.space.sm }, style], children: children });
+}
+/** Compact in-screen segmented tab control (not a navigator) — pass the active
+ *  key and the options; renders an evenly-split pill row. */
+function Segmented({ options, value, onChange }) {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: "row", backgroundColor: colors.surface2, borderWidth: 1, borderColor: colors.border, borderRadius: 10, padding: 3 }, children: options.map((o) => {
+            const on = o.key === value;
+            return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onChange(o.key), style: { flex: 1, paddingVertical: 8, paddingHorizontal: 2, borderRadius: 8, alignItems: "center", justifyContent: "center", backgroundColor: on ? colors.surface : "transparent", borderWidth: 1, borderColor: on ? colors.border : "transparent" }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, adjustsFontSizeToFit: true, minimumFontScale: 0.85, style: { color: on ? colors.primary : colors.textFaint, fontWeight: on ? "700" : "600", fontSize: 13, fontFamily: (0, fonts_1.hanken)(on ? "700" : "600") }, children: o.label }) }, o.key));
+        }) }));
+}
+function Muted({ children, style }) {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    return (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: colors.muted, fontSize: 13, fontFamily: fonts_1.FONT.r }, style], children: children });
+}
+/** Monospace data span (tracking IDs, time, distances, coordinates). */
+function Mono({ children, style }) {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    return (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ fontFamily: exports.MONO, color: colors.text }, style], children: children });
+}
+/** Shared checkbox — replaces the hand-rolled 26px boxes duplicated across screens. */
+function Checkbox({ checked, label, sublabel, onToggle }) {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: onToggle, hitSlop: 8, style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.cbox, checked && { backgroundColor: colors.primary, borderColor: colors.primary }], children: checked ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "#ffffff", fontSize: 15, fontWeight: "800" }, children: "\u2713" }) : null }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: colors.text, fontSize: 15 }, children: label }), sublabel ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: colors.muted, fontSize: 12 }, children: sublabel }) : null] })] }));
+}
+/** Pulsing placeholder block for loading states (replaces blank spinners). */
+function Skeleton({ height = 14, width = "100%", style }) {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    const op = (0, react_1.useRef)(new react_native_1.Animated.Value(0.4)).current;
+    (0, react_1.useEffect)(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(op, { toValue: 0.85, duration: 700, useNativeDriver: true }),
+            react_native_1.Animated.timing(op, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [op]);
+    return (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [{ height, width, borderRadius: 7, backgroundColor: colors.surface2, opacity: op }, style] });
+}
+/** iOS-style switch — for settings toggles (on/off state, not a form choice). */
+function Switch({ value, onToggle }) {
+    const { colors } = (0, ThemeContext_1.useTheme)();
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onToggle, hitSlop: 8, style: [styles.swTrack, { backgroundColor: value ? colors.primary : colors.lineStrong }], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.swKnob, { left: value ? 21 : 3 }] }) }));
+}

package/mobile/ThemeContext.tsx

@@ -0,0 +1,59 @@
+/**
+ * Theme provider — resolves the active palette (Ops Light / Ops Dark) from the
+ * user's preference (light | dark | system) and the OS appearance, and persists
+ * the choice in AsyncStorage. Screens read `const { colors } = useTheme()`.
+ */
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Appearance } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { palettes, type Palette } from "./tokens";
+
+export type ThemePref = "light" | "dark" | "system";
+type Scheme = "light" | "dark";
+
+/** Default AsyncStorage key. Override per-app via <ThemeProvider storageKey="myapp.theme">
+ *  so multiple field-ops-theme apps on a device don't share one preference. */
+const DEFAULT_KEY = "field-ops.theme";
+
+interface ThemeState {
+  colors: Palette;
+  scheme: Scheme;     // resolved (system → actual OS scheme)
+  pref: ThemePref;    // user's stored choice
+  setPref: (p: ThemePref) => void;
+}
+
+const Ctx = createContext<ThemeState | undefined>(undefined);
+
+export function ThemeProvider({ children, storageKey = DEFAULT_KEY }: { children: React.ReactNode; storageKey?: string }) {
+  const [pref, setPrefState] = useState<ThemePref>("system");
+  const [sysScheme, setSysScheme] = useState<Scheme>(Appearance.getColorScheme() === "dark" ? "dark" : "light");
+
+  // OS appearance listener — independent of storageKey, so subscribe exactly once.
+  useEffect(() => {
+    const sub = Appearance.addChangeListener(({ colorScheme }) => setSysScheme(colorScheme === "dark" ? "dark" : "light"));
+    return () => sub.remove();
+  }, []);
+
+  // Load the persisted preference (re-reads only if the storage key changes).
+  useEffect(() => {
+    AsyncStorage.getItem(storageKey).then((v) => {
+      if (v === "light" || v === "dark" || v === "system") setPrefState(v);
+    }).catch(() => {});
+  }, [storageKey]);
+
+  const setPref = useCallback((p: ThemePref) => {
+    setPrefState(p);
+    AsyncStorage.setItem(storageKey, p).catch(() => {});
+  }, [storageKey]);
+
+  const scheme: Scheme = pref === "system" ? sysScheme : pref;
+  const value = useMemo<ThemeState>(() => ({ colors: palettes[scheme], scheme, pref, setPref }), [scheme, pref, setPref]);
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}
+
+export function useTheme(): ThemeState {
+  const v = useContext(Ctx);
+  if (!v) throw new Error("useTheme must be used within ThemeProvider");
+  return v;
+}

package/mobile/fonts.ts

@@ -0,0 +1,23 @@
+/**
+ * Font families — "Field Ops Console" uses Hanken Grotesk (UI) + IBM Plex Mono
+ * (data). @expo-google-fonts ships each weight as its own family name, so weighted
+ * text must pick the matching family via hanken() rather than relying on fontWeight.
+ */
+export const FONT = {
+  r: "HankenGrotesk_400Regular",
+  m: "HankenGrotesk_500Medium",
+  sb: "HankenGrotesk_600SemiBold",
+  b: "HankenGrotesk_700Bold",
+  xb: "HankenGrotesk_800ExtraBold",
+  monoR: "IBMPlexMono_400Regular",
+  mono: "IBMPlexMono_500Medium",
+};
+
+export function hanken(weight?: string | number): string {
+  const w = String(weight ?? "400");
+  if (w === "800") return FONT.xb;
+  if (w === "700") return FONT.b;
+  if (w === "600") return FONT.sb;
+  if (w === "500") return FONT.m;
+  return FONT.r;
+}

package/mobile/index.ts

@@ -0,0 +1,5 @@
+/** field-ops-theme (mobile) — barrel re-export for React Native consumers. */
+export * from "./tokens";
+export * from "./fonts";
+export * from "./ThemeContext";
+export * from "./ui";

package/mobile/tokens.ts

@@ -0,0 +1,87 @@
+// AUTO-GENERATED from tokens.json by build.js — DO NOT EDIT. Change tokens.json, run `node build.js`.
+/**
+ * Field Ops Console — shared visual tokens (React Native side).
+ * `palettes.light|dark` are consumed by ThemeContext; `colors` is the light
+ * default kept for back-compat with screens that import it directly.
+ */
+export type Palette = {
+  bg: string; surface: string; surface2: string; border: string; lineStrong: string;
+  text: string; muted: string; textFaint: string;
+  primary: string; primaryText: string; brandDeep: string; brandBright: string;
+  danger: string; success: string; signal: string;
+  warnBg: string; warnText: string;
+  brandTint: string; signalTint: string;
+};
+
+const light: Palette = {
+  bg: "#f4f5f2",
+  surface: "#ffffff",
+  surface2: "#fafbf9",
+  border: "#dcdad2",
+  lineStrong: "#cbc8bc",
+  text: "#18222a",
+  muted: "#5c6770",
+  textFaint: "#929ba1",
+  primary: "#0e7a6e",
+  primaryText: "#ffffff",
+  brandDeep: "#0a5c53",
+  brandBright: "#15b8a6",
+  danger: "#dc2626",
+  success: "#0e9e6e",
+  signal: "#e2710b",
+  warnBg: "#fcefd9",
+  warnText: "#8a4b08",
+  brandTint: "rgba(14,122,110,0.10)",
+  signalTint: "rgba(226,113,11,0.12)",
+};
+
+const dark: Palette = {
+  bg: "#0c1215",
+  surface: "#141c21",
+  surface2: "#192329",
+  border: "#243038",
+  lineStrong: "#3a4854",
+  text: "#e7edef",
+  muted: "#9ba7ae",
+  textFaint: "#69767d",
+  primary: "#16b5a3",
+  primaryText: "#08110f",
+  brandDeep: "#0e7a6e",
+  brandBright: "#2fe0cc",
+  danger: "#f05252",
+  success: "#22b583",
+  signal: "#f2871f",
+  warnBg: "#2a2114",
+  warnText: "#f2c879",
+  brandTint: "rgba(22,181,163,0.14)",
+  signalTint: "rgba(242,135,31,0.16)",
+};
+
+export const palettes = { light, dark };
+
+/** Back-compat default (light). */
+export const colors = light;
+
+export const status: Record<string, string> = {
+  new: "#2563eb",
+  open: "#0e8fa8",
+  pending: "#d9870b",
+  resolved: "#0e9e6e",
+  closed: "#7a848b",
+};
+
+export const priority: Record<string, string> = {
+  low: "#9aa6ae",
+  medium: "#2563eb",
+  high: "#ea580c",
+  critical: "#dc2626",
+};
+
+export const space = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 };
+
+/** Subtle card elevation per scheme — RN has no box-shadow string, so this mirrors
+ *  the web `--shadow` token as style props (iOS shadow*; Android elevation). */
+export const shadow = {
+  light: { shadowColor: "#101820", shadowOpacity: 0.08, shadowRadius: 8, shadowOffset: { width: 0, height: 2 }, elevation: 2 },
+  dark: { shadowColor: "#000000", shadowOpacity: 0.45, shadowRadius: 10, shadowOffset: { width: 0, height: 3 }, elevation: 3 },
+} as const;

package/mobile/ui.tsx

@@ -0,0 +1,190 @@
+/** Small shared UI primitives (kept in one file to limit screen boilerplate).
+ *  All are theme-aware via useTheme()/useStyles(). */
+import React, { useEffect, useMemo, useRef } from "react";
+import {
+  Text, View, TextInput, Pressable, ActivityIndicator, StyleSheet, ViewStyle, TextStyle, LayoutChangeEvent, Animated,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { space, shadow, type Palette } from "./tokens";
+import { FONT, hanken } from "./fonts";
+import { useTheme } from "./ThemeContext";
+
+/** Approx height of the floating bottom tab bar (excludes the device inset, which
+ *  the bar adds on top via useSafeAreaInsets). */
+export const TAB_BAR_HEIGHT = 60;
+
+/** Bottom padding for a scroll container so its last content clears the gesture
+ *  bar — and, on the four tab screens, the floating tab bar too. Pass onTab=true
+ *  for Home/Tickets/Visits/Customers. */
+export function useBottomPad(onTab = false): number {
+  const insets = useSafeAreaInsets();
+  return (onTab ? TAB_BAR_HEIGHT : space.lg) + insets.bottom;
+}
+
+/** IBM Plex Mono for data (IDs, time, distances, GPS) — loaded in App.tsx. */
+export const MONO = FONT.mono;
+
+function makeStyles(c: Palette) {
+  return StyleSheet.create({
+    card: { backgroundColor: c.surface, borderRadius: 12, borderWidth: 1, borderColor: c.lineStrong, padding: space.lg, marginBottom: space.md },
+    btn: { paddingVertical: 12, paddingHorizontal: 16, borderRadius: 10, borderWidth: 1, alignItems: "center", justifyContent: "center", minHeight: 46 },
+    btnText: { fontSize: 15, fontWeight: "600", fontFamily: hanken("600") },
+    label: { fontSize: 13, color: c.muted, marginBottom: 4, fontWeight: "600", fontFamily: hanken("600") },
+    input: { backgroundColor: c.surface2, borderWidth: 1, borderColor: c.lineStrong, borderRadius: 10, paddingHorizontal: 12, paddingVertical: 10, fontSize: 15, color: c.text, fontFamily: hanken("400") },
+    badge: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, borderWidth: 1, alignSelf: "flex-start" },
+    h1: { fontSize: 22, fontWeight: "700", color: c.text, fontFamily: hanken("700") },
+    title: { fontSize: 16, fontWeight: "700", color: c.text, fontFamily: hanken("700") },
+    cbox: { width: 24, height: 24, borderRadius: 7, borderWidth: 2, borderColor: c.lineStrong, alignItems: "center", justifyContent: "center", marginRight: space.sm },
+    swTrack: { width: 46, height: 28, borderRadius: 999, justifyContent: "center" },
+    swKnob: { position: "absolute", width: 22, height: 22, borderRadius: 11, backgroundColor: "#ffffff", shadowColor: "#000", shadowOpacity: 0.3, shadowRadius: 2, shadowOffset: { width: 0, height: 1 }, elevation: 2 },
+  });
+}
+
+export type Styles = ReturnType<typeof makeStyles>;
+
+/** Theme-aware shared stylesheet — `const styles = useStyles()`. */
+export function useStyles(): Styles {
+  const { colors } = useTheme();
+  return useMemo(() => makeStyles(colors), [colors]);
+}
+
+export function Card({ children, style, onLayout }: { children: React.ReactNode; style?: ViewStyle; onLayout?: (e: LayoutChangeEvent) => void }) {
+  const styles = useStyles();
+  const { scheme } = useTheme();
+  return <View style={[styles.card, shadow[scheme], style]} onLayout={onLayout}>{children}</View>;
+}
+
+export function Btn({
+  title, onPress, loading, disabled, variant = "primary",
+}: { title: string; onPress: () => void; loading?: boolean; disabled?: boolean; variant?: "primary" | "outline" | "danger" | "signal" }) {
+  const { colors } = useTheme();
+  const styles = useStyles();
+  const isDisabled = disabled || loading;
+  const bg = variant === "primary" ? colors.primary : variant === "danger" ? colors.danger : variant === "signal" ? colors.signal : "transparent";
+  const fg = variant === "outline" ? colors.primary : "#ffffff";
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isDisabled}
+      style={({ pressed }) => [
+        styles.btn,
+        { backgroundColor: bg, borderColor: variant === "outline" ? colors.primary : bg, opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1 },
+      ]}
+    >
+      {loading ? <ActivityIndicator color={fg} /> : <Text style={[styles.btnText, { color: fg }]}>{title}</Text>}
+    </Pressable>
+  );
+}
+
+export function Field({
+  label, value, onChangeText, placeholder, secureTextEntry, keyboardType, multiline, autoCapitalize,
+}: {
+  label?: string; value: string; onChangeText: (t: string) => void; placeholder?: string;
+  secureTextEntry?: boolean; keyboardType?: "default" | "numeric" | "email-address"; multiline?: boolean;
+  autoCapitalize?: "none" | "sentences";
+}) {
+  const { colors } = useTheme();
+  const styles = useStyles();
+  return (
+    <View style={{ marginBottom: space.md }}>
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+      <TextInput
+        style={[styles.input, multiline && { height: 96, textAlignVertical: "top" }]}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textFaint}
+        secureTextEntry={secureTextEntry}
+        keyboardType={keyboardType}
+        multiline={multiline}
+        autoCapitalize={autoCapitalize}
+      />
+    </View>
+  );
+}
+
+export function Badge({ label, color, filled }: { label: string; color: string; filled?: boolean }) {
+  const styles = useStyles();
+  return (
+    <View style={[styles.badge, filled ? { backgroundColor: color, borderColor: color } : { backgroundColor: color + "22", borderColor: color }]}>
+      <Text style={{ color: filled ? "#ffffff" : color, fontSize: 12, fontWeight: "600" }}>{label}</Text>
+    </View>
+  );
+}
+
+export function Row({ children, style }: { children: React.ReactNode; style?: ViewStyle }) {
+  return <View style={[{ flexDirection: "row", alignItems: "center", gap: space.sm }, style]}>{children}</View>;
+}
+
+/** Compact in-screen segmented tab control (not a navigator) — pass the active
+ *  key and the options; renders an evenly-split pill row. */
+export function Segmented<T extends string>({ options, value, onChange }: { options: { key: T; label: string }[]; value: T; onChange: (k: T) => void }) {
+  const { colors } = useTheme();
+  return (
+    <View style={{ flexDirection: "row", backgroundColor: colors.surface2, borderWidth: 1, borderColor: colors.border, borderRadius: 10, padding: 3 }}>
+      {options.map((o) => {
+        const on = o.key === value;
+        return (
+          <Pressable key={o.key} onPress={() => onChange(o.key)}
+            style={{ flex: 1, paddingVertical: 8, paddingHorizontal: 2, borderRadius: 8, alignItems: "center", justifyContent: "center", backgroundColor: on ? colors.surface : "transparent", borderWidth: 1, borderColor: on ? colors.border : "transparent" }}>
+            <Text numberOfLines={1} adjustsFontSizeToFit minimumFontScale={0.85} style={{ color: on ? colors.primary : colors.textFaint, fontWeight: on ? "700" : "600", fontSize: 13, fontFamily: hanken(on ? "700" : "600") }}>{o.label}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+export function Muted({ children, style }: { children: React.ReactNode; style?: TextStyle }) {
+  const { colors } = useTheme();
+  return <Text style={[{ color: colors.muted, fontSize: 13, fontFamily: FONT.r }, style]}>{children}</Text>;
+}
+
+/** Monospace data span (tracking IDs, time, distances, coordinates). */
+export function Mono({ children, style }: { children: React.ReactNode; style?: TextStyle }) {
+  const { colors } = useTheme();
+  return <Text style={[{ fontFamily: MONO, color: colors.text }, style]}>{children}</Text>;
+}
+
+/** Shared checkbox — replaces the hand-rolled 26px boxes duplicated across screens. */
+export function Checkbox({ checked, label, sublabel, onToggle }: { checked: boolean; label: string; sublabel?: string; onToggle: () => void }) {
+  const { colors } = useTheme();
+  const styles = useStyles();
+  return (
+    <Pressable onPress={onToggle} hitSlop={8} style={{ flexDirection: "row", alignItems: "center", paddingVertical: 8 }}>
+      <View style={[styles.cbox, checked && { backgroundColor: colors.primary, borderColor: colors.primary }]}>
+        {checked ? <Text style={{ color: "#ffffff", fontSize: 15, fontWeight: "800" }}>✓</Text> : null}
+      </View>
+      <View style={{ flexShrink: 1 }}>
+        <Text style={{ color: colors.text, fontSize: 15 }}>{label}</Text>
+        {sublabel ? <Text style={{ color: colors.muted, fontSize: 12 }}>{sublabel}</Text> : null}
+      </View>
+    </Pressable>
+  );
+}
+
+/** Pulsing placeholder block for loading states (replaces blank spinners). */
+export function Skeleton({ height = 14, width = "100%", style }: { height?: number; width?: ViewStyle["width"]; style?: ViewStyle }) {
+  const { colors } = useTheme();
+  const op = useRef(new Animated.Value(0.4)).current;
+  useEffect(() => {
+    const loop = Animated.loop(Animated.sequence([
+      Animated.timing(op, { toValue: 0.85, duration: 700, useNativeDriver: true }),
+      Animated.timing(op, { toValue: 0.4, duration: 700, useNativeDriver: true }),
+    ]));
+    loop.start();
+    return () => loop.stop();
+  }, [op]);
+  return <Animated.View style={[{ height, width, borderRadius: 7, backgroundColor: colors.surface2, opacity: op }, style]} />;
+}
+
+/** iOS-style switch — for settings toggles (on/off state, not a form choice). */
+export function Switch({ value, onToggle }: { value: boolean; onToggle: () => void }) {
+  const { colors } = useTheme();
+  const styles = useStyles();
+  return (
+    <Pressable onPress={onToggle} hitSlop={8} style={[styles.swTrack, { backgroundColor: value ? colors.primary : colors.lineStrong }]}>
+      <View style={[styles.swKnob, { left: value ? 21 : 3 }]} />
+    </Pressable>
+  );
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@aria-framework/theme",
+  "version": "0.3.0",
+  "description": "Aria App Framework — theme module. Field Ops Console design system: tokens.json single source of record + a generator that emits a Bootstrap 5.3 web theme (theme.css + self-hosted fonts) and a React Native palette/provider/primitives. Light + dark.",
+  "license": "UNLICENSED",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "node build.js && tsc",
+    "prepare": "npm run build"
+  },
+  "files": [
+    "web",
+    "dist",
+    "mobile",
+    "tokens.json",
+    "build.js",
+    "tsconfig.json",
+    "types"
+  ],
+  "exports": {
+    "./theme.css": "./web/theme.css",
+    "./mobile": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
+    "./tokens": { "types": "./dist/tokens.d.ts", "default": "./dist/tokens.js" },
+    "./fonts": { "types": "./dist/fonts.d.ts", "default": "./dist/fonts.js" },
+    "./ThemeContext": { "types": "./dist/ThemeContext.d.ts", "default": "./dist/ThemeContext.js" },
+    "./ui": { "types": "./dist/ui.d.ts", "default": "./dist/ui.js" }
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/react": "^18.3.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@react-native-async-storage/async-storage": "*"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-native": { "optional": true },
+    "@react-native-async-storage/async-storage": { "optional": true }
+  }
+}

package/tokens.json

@@ -0,0 +1,36 @@
+{
+  "$comment": "SINGLE SOURCE OF RECORD for Field Ops Console theme tokens. Edit values HERE, then run `node build.js` to regenerate web/theme.css and mobile/tokens.ts. Do not hand-edit the generated files. Hex stored uppercase; build.js lowercases for the RN palette. --brand-rgb is derived from brand. Web '--line/--line-strong' map to RN 'border/lineStrong'; '--text-soft' maps to RN 'muted'; '--paper' to RN 'bg'; '--brand' to RN 'primary'.",
+  "palettes": {
+    "light": {
+      "brand": "#0E7A6E", "brandDeep": "#0A5C53", "brandBright": "#15B8A6",
+      "signal": "#E2710B",
+      "paper": "#F4F5F2", "surface": "#FFFFFF", "surface2": "#FAFBF9",
+      "line": "#DCDAD2", "lineStrong": "#CBC8BC",
+      "text": "#18222A", "textSoft": "#5C6770", "textFaint": "#929BA1",
+      "primaryText": "#FFFFFF",
+      "danger": "#DC2626", "success": "#0E9E6E",
+      "warnBg": "#FCEFD9", "warnText": "#8A4B08",
+      "brandTint": "rgba(14,122,110,0.10)", "signalTint": "rgba(226,113,11,0.12)",
+      "shadowWeb": "0 1px 2px rgba(16,24,28,.05), 0 4px 14px -6px rgba(16,24,28,.12)",
+      "shadowLgWeb": "0 18px 50px -18px rgba(16,24,28,.30)",
+      "shadowRn": { "shadowColor": "#101820", "shadowOpacity": 0.08, "shadowRadius": 8, "shadowOffset": { "width": 0, "height": 2 }, "elevation": 2 }
+    },
+    "dark": {
+      "brand": "#16B5A3", "brandDeep": "#0E7A6E", "brandBright": "#2FE0CC",
+      "signal": "#F2871F",
+      "paper": "#0C1215", "surface": "#141C21", "surface2": "#192329",
+      "line": "#243038", "lineStrong": "#3A4854",
+      "text": "#E7EDEF", "textSoft": "#9BA7AE", "textFaint": "#69767D",
+      "primaryText": "#08110F",
+      "danger": "#F05252", "success": "#22B583",
+      "warnBg": "#2A2114", "warnText": "#F2C879",
+      "brandTint": "rgba(22,181,163,0.14)", "signalTint": "rgba(242,135,31,0.16)",
+      "shadowWeb": "0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px rgba(0,0,0,.6)",
+      "shadowLgWeb": "0 24px 60px -18px rgba(0,0,0,.8)",
+      "shadowRn": { "shadowColor": "#000000", "shadowOpacity": 0.45, "shadowRadius": 10, "shadowOffset": { "width": 0, "height": 3 }, "elevation": 3 }
+    }
+  },
+  "status": { "new": "#2563eb", "open": "#0e8fa8", "pending": "#d9870b", "resolved": "#0e9e6e", "closed": "#7a848b" },
+  "priority": { "low": "#9aa6ae", "medium": "#2563eb", "high": "#ea580c", "critical": "#dc2626" },
+  "space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24 }
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "mobile",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noImplicitAny": false,
+    "types": ["react"]
+  },
+  "include": ["mobile/**/*", "types/**/*"]
+}

package/types/rn-shims.d.ts

@@ -0,0 +1,28 @@
+// Ambient module shims so the mobile sources compile to dist (.js + .d.ts) without
+// installing all of React Native here. The consuming app provides the real
+// react-native / async-storage / safe-area-context (peer deps); their types govern
+// at the call site. Only @types/react is a real devDependency (for JSX / ReactNode).
+//
+// Exports are typed `any` — enough to emit; the public API (Palette, tokens, props)
+// stays correctly typed from the package's own source. Add to the lists below if a
+// mobile source imports a new symbol from these modules.
+declare module "react-native" {
+  export type ViewStyle = any;
+  export type TextStyle = any;
+  export type LayoutChangeEvent = any;
+  export const Text: any;
+  export const View: any;
+  export const TextInput: any;
+  export const Pressable: any;
+  export const ActivityIndicator: any;
+  export const StyleSheet: any;
+  export const Animated: any;
+  export const Appearance: any;
+}
+declare module "@react-native-async-storage/async-storage" {
+  const AsyncStorage: any;
+  export default AsyncStorage;
+}
+declare module "react-native-safe-area-context" {
+  export const useSafeAreaInsets: any;
+}