feat(mobile): Complete field MVP

.github/workflows/build.yml

@@ -100,13 +100,34 @@ jobs:
           node-version: "20"
           cache: npm
 
+      - name: Restore iOS compiler cache
+        if: ${{ inputs.platform == 'ios' }}
+        uses: actions/cache@v4
+        with:
+          path: ~/Library/Caches/ccache
+          key: ios-ccache-${{ inputs.app }}-${{ github.sha }}
+          restore-keys: |
+            ios-ccache-${{ inputs.app }}-
+
+      - name: Install ccache
+        if: ${{ inputs.platform == 'ios' }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          command -v ccache >/dev/null 2>&1 || brew install ccache
+          ccache --version
+
       - name: Setup Java
         if: ${{ inputs.platform == 'android' }}
         uses: actions/setup-java@v5
         with:
           distribution: temurin
           java-version: "17"
 
+      - name: Setup Gradle
+        if: ${{ inputs.platform == 'android' }}
+        uses: gradle/actions/setup-gradle@v6
+
       - name: Setup Android SDK
         if: ${{ inputs.platform == 'android' }}
         uses: android-actions/setup-android@v4
@@ -218,6 +239,7 @@ jobs:
         working-directory: ${{ steps.resolve.outputs.app_dir }}
         env:
           EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+          EXPO_APPLE_TEAM_TYPE: INDIVIDUAL
           EAS_LOCAL_BUILD_ARTIFACTS_DIR: ${{ steps.resolve.outputs.artifact_dir }}
         shell: bash
         run: |

.gitignore

@@ -63,6 +63,7 @@ coverage/clover.xml
 
 # other
 .com.facebook.react.devsupport.BundleDownloader.swp
+/app.json
 
 # local vendor reference docs (do not commit)
 docs/local-only

.opencode/agents/explore.md

@@ -73,7 +73,7 @@ permission:
   context7_query-docs: allow
   markitdown_convert_to_markdown: allow
 model: openai/gpt-5.6-luna
-variant: max
+variant: high
 ---
 
 You are a read-only exploration and research specialist supporting the primary engineer agent.

apps/drill-converter/.gitignore

@@ -0,0 +1,6 @@
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

apps/drill-converter/app.config.ts

@@ -0,0 +1,19 @@
+import type { ExpoConfig } from "expo/config";
+
+const config: ExpoConfig = {
+  name: "Eight2Five Drill Converter",
+  slug: "eight2five-drill-converter",
+  version: "0.1.0",
+  platforms: ["web"],
+  userInterfaceStyle: "automatic",
+  web: {
+    bundler: "metro",
+    output: "static",
+  },
+  plugins: ["expo-router"],
+  experiments: {
+    typedRoutes: true,
+  },
+};
+
+export default config;

apps/drill-converter/app/_layout.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerTitle: "Eight2Five Drill Converter",
+        headerShadowVisible: false,
+        headerStyle: { backgroundColor: "#ffffff" },
+        headerTintColor: "#172033",
+      }}
+    />
+  );
+}

apps/drill-converter/app/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Stack } from "expo-router";
+
+import { ConverterScreen } from "../src/converter-screen";
+
+export default function IndexRoute() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Drill Converter" }} />
+      <ConverterScreen />
+    </>
+  );
+}

apps/drill-converter/metro.config.js

@@ -0,0 +1,19 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+const projectRoot = __dirname;
+const workspaceRoot = path.resolve(__dirname, "../..");
+const config = getDefaultConfig(projectRoot);
+
+config.watchFolders = Array.from(
+  new Set([...(config.watchFolders ?? []), workspaceRoot])
+);
+config.resolver.nodeModulesPaths = Array.from(
+  new Set([
+    ...(config.resolver?.nodeModulesPaths ?? []),
+    path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "node_modules"),
+  ])
+);
+
+module.exports = config;

apps/drill-converter/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "eight2five-drill-converter",
+  "version": "0.1.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start --web",
+    "web": "expo start --web",
+    "build:web": "expo export --platform web",
+    "type-check": "tsc --noEmit",
+    "lint": "expo lint",
+    "lint:fix": "expo lint --fix",
+    "test": "jest --watchAll=false --passWithNoTests --runInBand"
+  },
+  "dependencies": {
+    "@eight2five/drill-importers": "0.1.0",
+    "@eight2five/drill-schema": "0.1.0",
+    "@eight2five/ui": "0.1.0",
+    "@expo/metro-runtime": "~57.0.8",
+    "expo": "~57.0.10",
+    "expo-document-picker": "~57.0.1",
+    "expo-router": "~57.0.10",
+    "lucide-react-native": "^1.22.0",
+    "react": "19.2.3",
+    "react-dom": "^19.2.3",
+    "react-native": "0.86.2",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-web": "^0.21.2"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@types/react": "~19.2.10",
+    "eslint": "^9.0.0",
+    "eslint-config-expo": "~57.0.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "jest-expo": "~57.0.3",
+    "prettier": "^3.6.2",
+    "typescript": "~6.0.3"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "testEnvironment": "node",
+    "moduleNameMapper": {
+      "^@eight2five/drill-schema$": "<rootDir>/../../packages/drill-schema/src/index.ts",
+      "^@eight2five/drill-schema/(.*)$": "<rootDir>/../../packages/drill-schema/src/$1",
+      "^@eight2five/drill-importers$": "<rootDir>/../../packages/drill-importers/src/index.ts",
+      "^@eight2five/drill-importers/(.*)$": "<rootDir>/../../packages/drill-importers/src/$1"
+    }
+  }
+}

apps/drill-converter/src/components/details-section.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import { Text, View } from "react-native";
+import {
+  getFieldPreset,
+  getGridReference,
+  type FieldPresetId,
+} from "@eight2five/drill-schema";
+
+import {
+  ChoiceChips,
+  Disclosure,
+  FormField,
+  SectionCard,
+} from "../ui/form-controls";
+import { colors, radius, spacing } from "../ui/theme";
+import {
+  FIELD_PRESET_OPTIONS,
+  type ConverterSettings,
+} from "../converter/settings";
+
+const FIELD_OPTIONS = Object.freeze([
+  ...FIELD_PRESET_OPTIONS,
+  { value: "custom", label: "Custom" },
+] as const);
+
+export function DetailsSection({
+  settings,
+  errors,
+  onUpdate,
+}: {
+  readonly settings: ConverterSettings;
+  readonly errors: readonly string[];
+  readonly onUpdate: (patch: Partial<ConverterSettings>) => void;
+}) {
+  const titleError = errors.find((error) => error.includes("title"));
+  const customFieldError = errors.find((error) =>
+    error.startsWith("Custom field"),
+  );
+  return (
+    <SectionCard
+      title="2. Drill details"
+      description="The converter only asks for the information needed to produce a valid, useful drill file. Less common schema fields stay under optional sections."
+    >
+      <FormField
+        label="Title"
+        value={settings.title}
+        onChangeText={(title) => onUpdate({ title })}
+        placeholder="Part 4"
+        error={titleError}
+      />
+
+      <ChoiceChips
+        label="Field convention"
+        value={settings.fieldMode}
+        options={FIELD_OPTIONS}
+        onChange={(fieldMode) => onUpdate({ fieldMode })}
+      />
+
+      {settings.fieldMode === "custom" ? (
+        <FormField
+          label="Custom field definition"
+          value={settings.customFieldJson}
+          onChangeText={(customFieldJson) => onUpdate({ customFieldJson })}
+          multiline
+          autoCapitalize="none"
+          autoCorrect={false}
+          spellCheck={false}
+          error={customFieldError}
+          helper="Advanced: paste a custom field object with matched physical and marching reference lines. The editor starts from NFHS geometry so you can change only what differs."
+        />
+      ) : (
+        <FieldPresetSummary preset={settings.fieldMode} />
+      )}
+
+      <Disclosure
+        title="Optional metadata"
+        description="Writer, ensemble, description, and an optional Lucide icon name."
+      >
+        <FormField
+          label="Drill writer"
+          value={settings.drillWriter}
+          onChangeText={(drillWriter) => onUpdate({ drillWriter })}
+          placeholder="Optional"
+        />
+        <FormField
+          label="Ensemble"
+          value={settings.ensemble}
+          onChangeText={(ensemble) => onUpdate({ ensemble })}
+          placeholder="Optional"
+        />
+        <FormField
+          label="Description"
+          value={settings.description}
+          onChangeText={(description) => onUpdate({ description })}
+          multiline
+          placeholder="Optional notes about this movement"
+        />
+        <FormField
+          label="Lucide icon"
+          value={settings.lucideIcon}
+          onChangeText={(lucideIcon) => onUpdate({ lucideIcon })}
+          autoCapitalize="none"
+          autoCorrect={false}
+          placeholder="music-2"
+          helper="Optional kebab-case Lucide icon name stored as metadata. The converter does not download icon assets."
+        />
+      </Disclosure>
+    </SectionCard>
+  );
+}
+
+function FieldPresetSummary({ preset }: { readonly preset: FieldPresetId }) {
+  const field = getFieldPreset(preset);
+  const frontHash = getGridReference({ type: "preset", preset }, "front-hash");
+  const backHash = getGridReference({ type: "preset", preset }, "back-hash");
+  const backSideline = getGridReference(
+    { type: "preset", preset },
+    "back-sideline",
+  );
+  return (
+    <View
+      style={{
+        gap: spacing.xs,
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.sm,
+        padding: spacing.md,
+        backgroundColor: colors.surfaceMuted,
+      }}
+    >
+      <Text
+        selectable
+        style={{ color: colors.text, fontSize: 13, fontWeight: "700" }}
+      >
+        {field.name}
+      </Text>
+      <Text
+        selectable
+        style={{ color: colors.textMuted, fontSize: 12, lineHeight: 17 }}
+      >
+        Origin: center of the 50 on the front sideline · Side 1 is negative X ·
+        Side 2 is positive X · backfield is positive Y.
+      </Text>
+      <Text
+        selectable
+        style={{ color: colors.textMuted, fontSize: 12, lineHeight: 17 }}
+      >
+        Marching grid: Front sideline 0 · Front hash{" "}
+        {formatNumber(frontHash?.coordinateSteps)} · Back hash{" "}
+        {formatNumber(backHash?.coordinateSteps)} · Back sideline{" "}
+        {formatNumber(backSideline?.coordinateSteps)}.
+      </Text>
+    </View>
+  );
+}
+
+function formatNumber(value: number | undefined): string {
+  if (value === undefined) return "—";
+  return Number.isInteger(value)
+    ? String(value)
+    : value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "");
+}