Rename

2025-07-17 22:22:07 +02:00
parent 2bdb7e78c4
commit e0ee6d11dd
112 changed files with 71 additions and 2820 deletions
@@ -0,0 +1,5 @@
+node_modules
+.git
+.gitignore
+*.md
+dist
@@ -0,0 +1 @@
+v22
@@ -0,0 +1,3 @@
+public
+pnpm-lock.yaml
+node_modules
@@ -0,0 +1,9 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+}
@@ -0,0 +1,19 @@
+FROM node:lts-alpine AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
+
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run build
+
+FROM base
+COPY --from=prod-deps /app/node_modules /app/node_modules
+COPY --from=build /app/dist /app/dist
+EXPOSE 3003
+ENTRYPOINT [ "pnpm", "serve" ]
@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      ...tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      ...tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      ...tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
@@ -0,0 +1,26 @@
+networks:
+  traefik:
+    name: traefik
+
+services:
+  md11-nav-data:
+    build: .
+    image: md11-nav-data
+    container_name: md11-nav-data-server
+    volumes:
+      - /Volumes/Data/DockerMD11NavData/NavData:/app/NavData
+    environment:
+      PORT: 3003
+    restart: always
+    networks:
+      - traefik
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.md11-nav-data-router.rule=Host(`md11-nav-data.hofmannnet.myhome-server.de`)"
+      - "traefik.http.routers.md11-nav-data-router.service=md11-nav-data-service"
+      - "traefik.http.services.md11-nav-data-service.loadbalancer.server.port=3001"
+      - "traefik.http.routers.md11-nav-data-router.entrypoints=websecure"
+      - "traefik.http.routers.md11-nav-data-router.tls=true"
+      - "traefik.http.routers.md11-nav-data-router.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.md11-nav-data-router.middlewares=md11-nav-data-auth"
+      - "traefik.http.middlewares.md11-nav-data-auth.basicauth.users=user:$2y$05$V2unQ5n4OnGBz8uV3fJuweKslSUk05zeh/T1cR2bSg3jXgA8cbPFi"
@@ -0,0 +1,32 @@
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import { globalIgnores } from 'eslint/config';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      '@typescript-eslint/no-shadow': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          destructuredArrayIgnorePattern: '^_+$',
+        },
+      ],
+    },
+  },
+]);
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link href="/src/style.css" rel="stylesheet">
+
+    <title>MD-11 NavData Browser</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,47 @@
+{
+  "name": "browser",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000 --host",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "preview": "vite preview",
+    "serve": "pnpm npx http-server dist"
+  },
+  "dependencies": {
+    "browser-image-manipulation": "^0.4.0",
+    "geojson": "^0.5.0",
+    "geolib": "^3.3.4",
+    "leaflet": "^1.9.4",
+    "leaflet-svg-shape-markers": "^1.4.0",
+    "magvar": "^2.0.0",
+    "navigraph": "^1.4.1",
+    "qrcode.react": "^4.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-leaflet": "^5.0.0",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.31.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/leaflet": "^1.9.20",
+    "@types/object-hash": "^3.0.6",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react-swc": "^3.10.2",
+    "eslint": "^9.31.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "object-hash": "^3.0.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.37.0",
+    "vite": "^7.0.4"
+  }
+}
@@ -0,0 +1,113 @@
+import type { DeviceFlowParams } from 'navigraph/auth';
+import { QRCodeSVG } from 'qrcode.react';
+import { useState } from 'react';
+import { ProcedureSelect } from './components//ProcedureSelect';
+import { Map } from './components/Map';
+import { Sidebar } from './components/Sidebar';
+import { useNavigraphAuth } from './contexts/NavigraphAuth/NavigraphAuthContext';
+import Parser from './parser/parser';
+
+const parser = await Parser.instance();
+
+function App() {
+  const [selectedAirport, setSelectedAirport] = useState<Airport>();
+  const [selectedRunway, setSelectedRunway] = useState<Runway>();
+  const [selectedTerminal, setSelectedTerminal] = useState<Terminal>();
+  const [transitions, setTransitions] = useState<Procedure[]>([]);
+  const [params, setParams] = useState<DeviceFlowParams | null>(null);
+  const [selectedTransition, setSelectedTransition] = useState<Procedure>();
+  const [selectedChart, setSelectedChart] = useState<Chart>();
+
+  const { user, signIn, initialized } = useNavigraphAuth();
+
+  const handleSignIn = () => signIn((p) => setParams(p));
+
+  return (
+    <>
+      {!user ? (
+        <div className="flex min-h-dvh w-full">
+          {!initialized && <div>Loading...</div>}
+
+          {initialized && !params && !user && (
+            <div className="flex h-dvh w-dvw items-center justify-center">
+              <button
+                className="cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2 disabled:bg-gray-100"
+                onClick={handleSignIn}
+              >
+                Sign in to NG
+              </button>
+            </div>
+          )}
+
+          {params?.verification_uri_complete && !user && (
+            <div className="flex h-dvh w-dvw flex-col items-center justify-center">
+              <QRCodeSVG value={params.verification_uri_complete} size={250} />
+
+              <div className="flex w-100 items-center text-center before:mr-1 before:flex-1 before:border-b-1 before:content-[''] after:ml-1 after:flex-1 after:border-b-1 after:content-['']">
+                or
+              </div>
+
+              <a className="text-3xl" href={params.verification_uri_complete} target="_blank" rel="noreferrer">
+                Open sign in page
+              </a>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="flex h-dvh w-dvw">
+          {selectedAirport && selectedRunway && selectedTerminal ? (
+            <Sidebar
+              airport={selectedAirport}
+              runway={selectedRunway}
+              terminal={selectedTerminal}
+              transitions={transitions}
+              transition={selectedTransition}
+              chart={selectedChart}
+              setTransition={setSelectedTransition}
+              setChart={setSelectedChart}
+              backAction={() => {
+                setSelectedTerminal(undefined);
+                setSelectedChart(undefined);
+                setTransitions([]);
+                setSelectedTransition(undefined);
+              }}
+            />
+          ) : (
+            <ProcedureSelect
+              selectedAirport={selectedAirport}
+              selectedRunway={selectedRunway}
+              selectedTerminal={selectedTerminal}
+              setSelectedAirport={setSelectedAirport}
+              setSelectedRunway={setSelectedRunway}
+              setSelectedTerminal={setSelectedTerminal}
+              handleSelection={(selectedTransitions) => {
+                let _transitions = selectedTransitions
+                  .map((transition) => ({
+                    name: transition,
+                    data: parser.parse(selectedRunway!, transition),
+                  }))
+                  .filter(
+                    (transition) =>
+                      !transition.name.startsWith('RW') || transition.name === `RW${selectedRunway?.Ident}`
+                  );
+
+                if (_transitions.length > 1)
+                  _transitions = _transitions.filter((transition) => transition.name !== 'ALL');
+                setTransitions(_transitions);
+                setSelectedTransition(_transitions[0]);
+                setSelectedChart(undefined);
+              }}
+            />
+          )}
+          <Map
+            airport={selectedAirport}
+            chart={selectedChart}
+            procedures={selectedTransition ? [selectedTransition] : []}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+export default App;
@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+
+interface LoaderProps {
+  size?: 0.5 | 1 | 2 | 3;
+}
+
+export const Loader: FC<LoaderProps> = ({ size = 2 }) => {
+  const variants = {
+    0.5: 'size-6 border-1 after:top-1 after:left-0.5 after:size-1.5 after:border-1',
+    1: 'size-12 border-2 after:top-2 after:left-1 after:size-3 after:border-2',
+    2: 'size-24 border-4 after:top-3 after:left-2 after:size-6 after:border-4',
+    3: 'size-36 border-6 after:top-4 after:left-3 after:size-9 after:border-6',
+  };
+
+  return (
+    <div className="flex justify-center">
+      <span
+        className={`relative inline-block ${variants[size]} animate-spin rounded-[50%] border-red-500 after:absolute after:rounded-[50%] after:border-black after:content-['']`}
+      ></span>
+    </div>
+  );
+};
@@ -0,0 +1,119 @@
+import { default as L } from 'leaflet';
+import 'leaflet-svg-shape-markers';
+import { createRef, Fragment, useEffect, type FC } from 'react';
+import { GeoJSON, ImageOverlay, MapContainer, TileLayer } from 'react-leaflet';
+
+interface MapProps {
+  airport: Airport | undefined;
+  chart: Chart | undefined;
+  procedures: Procedure[];
+}
+
+export const Map: FC<MapProps> = ({ airport, chart, procedures }) => {
+  const mapRef = createRef<L.Map>();
+  const imageRef = createRef<L.ImageOverlay>();
+
+  useEffect(() => {
+    if (airport) mapRef.current?.flyTo([airport?.Latitude, airport?.Longitude], 10, { animate: false });
+  }, [airport]);
+
+  return (
+    <MapContainer
+      center={[0, 0]}
+      zoom={5}
+      zoomSnap={0}
+      className="h-full w-full"
+      ref={(_mapRef) => {
+        _mapRef?.attributionControl.setPosition('topright');
+        _mapRef?.zoomControl.setPosition('topright');
+        mapRef.current = _mapRef;
+      }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+
+      {chart && chart.bounds && (
+        <ImageOverlay
+          url={chart.data}
+          bounds={chart.bounds}
+          opacity={0.75}
+          ref={(_imageRef) => {
+            if (_imageRef) {
+              mapRef.current?.fitBounds(_imageRef.getBounds(), {
+                padding: [-50, -50],
+              });
+            }
+            imageRef.current = _imageRef;
+          }}
+        />
+      )}
+
+      {procedures.map((procedure) => (
+        <Fragment key={procedure.name}>
+          <GeoJSON
+            key={`${procedure.name}-lines`}
+            data={procedure.data}
+            style={({ properties }) => ({
+              color: properties.isMAP ? '#00ffff' : '#ff00ff',
+              stroke: true,
+              weight: properties.isMAP ? 2.5 : 5,
+              opacity: 1,
+              dashArray: properties.isManual ? '20, 20' : undefined,
+            })}
+            filter={(feature) => feature.geometry.type !== 'Point'}
+          />
+          <GeoJSON
+            key={`${procedure.name}-points`}
+            data={procedure.data}
+            style={{
+              color: 'black',
+              fill: true,
+              fillColor: 'transparent',
+              stroke: true,
+              weight: 3,
+            }}
+            pointToLayer={({ properties }, latlng) => {
+              if (properties.isIntersection) return L.circleMarker(latlng, { radius: 6 });
+              else if (properties.IsMAP)
+                return L.shapeMarker(latlng, {
+                  shape: 'square',
+                  radius: 6,
+                });
+              else if (properties.IsFAF)
+                return L.shapeMarker(latlng, {
+                  shape: 'diamond',
+                  radius: 6,
+                });
+              else if (properties.isFlyOver)
+                return L.shapeMarker(latlng, {
+                  shape: 'triangle',
+                  radius: 6,
+                });
+
+              return L.shapeMarker(latlng, {
+                shape: 'star-4',
+                radius: 10,
+                rotation: 45,
+              });
+            }}
+            onEachFeature={({ geometry, properties }, layer) => {
+              if (geometry.type === 'Point') {
+                layer.bindPopup(
+                  `${properties.name}<br>
+                ${properties.altitude} ft<br>
+                ${properties.speed} kts<br>
+                CNSTR: 
+                ${properties.altitudeConstraint ?? ''}
+                ${properties.speedConstraint ?? ''}<br>`
+                );
+              }
+            }}
+            filter={(feature) => feature.geometry.type === 'Point'}
+          />
+        </Fragment>
+      ))}
+    </MapContainer>
+  );
+};
@@ -0,0 +1,190 @@
+import { createRef, useMemo, useState, type Dispatch, type FC, type SetStateAction } from 'react';
+import Parser from '../parser/parser';
+import { Loader } from './Loader';
+
+const parser = await Parser.instance();
+
+interface ProcedureSelectProps {
+  selectedAirport: Airport | undefined;
+  selectedRunway: Runway | undefined;
+  selectedTerminal: Terminal | undefined;
+  setSelectedAirport: Dispatch<SetStateAction<Airport | undefined>>;
+  setSelectedRunway: Dispatch<SetStateAction<Runway | undefined>>;
+  setSelectedTerminal: Dispatch<SetStateAction<Terminal | undefined>>;
+  handleSelection: (transitions: string[]) => void;
+}
+
+export const ProcedureSelect: FC<ProcedureSelectProps> = ({
+  selectedAirport,
+  selectedRunway,
+  selectedTerminal,
+  setSelectedAirport,
+  setSelectedRunway,
+  setSelectedTerminal,
+  handleSelection,
+}) => {
+  const inputRef = createRef<HTMLInputElement>();
+  const [error, setError] = useState<string>();
+  const [inFlight, setInFlight] = useState<number>();
+
+  const runways = useMemo(
+    () => parser.runways.filter(({ AirportID }) => AirportID === selectedAirport?.ID),
+    [selectedAirport]
+  );
+  const terminals = useMemo(() => {
+    const _terminals = parser.terminals.filter(
+      ({ AirportID, RwyID }) => AirportID === selectedAirport?.ID && (!RwyID || RwyID === selectedRunway?.ID)
+    );
+
+    return {
+      star: _terminals.filter((terminal) => terminal.Proc === 1),
+      sid: _terminals.filter((terminal) => terminal.Proc === 2),
+      iap: _terminals.filter((terminal) => terminal.Proc === 3),
+    };
+  }, [selectedAirport, selectedRunway]);
+
+  return (
+    <div className="flex h-full w-[300px] shrink-0 flex-col overflow-hidden">
+      {selectedAirport && (
+        <button
+          className="sticky top-0 m-2 cursor-pointer rounded border border-red-500 bg-red-500 px-2 py-1 font-semibold text-stone-50 focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black"
+          onClick={() => {
+            setError(undefined);
+            setInFlight(undefined);
+
+            if (selectedTerminal) {
+              setSelectedTerminal(undefined);
+            } else if (selectedRunway) {
+              setSelectedRunway(undefined);
+            } else if (selectedAirport) {
+              setSelectedAirport(undefined);
+            }
+          }}
+        >
+          Go back
+        </button>
+      )}
+
+      <div className="flex h-[calc(100%-50px)] flex-col gap-2 overflow-y-auto px-2 pb-2">
+        {!selectedAirport && (
+          <div className="flex w-full flex-col gap-2">
+            <h1 className="text-center text-3xl">Enter Airport ICAO</h1>
+            <input
+              ref={inputRef}
+              className="rounded border border-black px-2 py-1 focus:outline-2 focus-visible:outline-2"
+              onChange={(e) => {
+                if (e.target.value.length <= 4) e.target.value = e.target.value.toUpperCase();
+                else e.target.value = e.target.value.slice(0, 4);
+              }}
+            ></input>
+            <button
+              className="w-full cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2"
+              onClick={() => {
+                const airport = parser.airports.find(({ ICAO }) => ICAO === inputRef.current?.value.toUpperCase());
+                if (!airport) {
+                  setError('Airport not found');
+                  return;
+                }
+                setSelectedAirport(airport);
+                setError(undefined);
+              }}
+            >
+              Select Airport
+            </button>
+            {error && <span className="text-center text-red-700">{error}</span>}
+          </div>
+        )}
+
+        {selectedAirport && !selectedRunway && (
+          <div className="flex w-full flex-col gap-2">
+            <h1 className="text-center text-3xl">Select Runway</h1>
+            {runways.map((runway) => (
+              <button
+                key={runway.ID}
+                className="w-full cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2"
+                onClick={() => setSelectedRunway(runway)}
+              >
+                Runway {runway.Ident}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {selectedAirport && selectedRunway && !selectedTerminal && (
+          <div className="flex w-full flex-col gap-2">
+            <h1 className="text-center text-3xl">Select Procedure</h1>
+
+            <div className="flex flex-col gap-2">
+              <div className="sticky top-0 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Arrivals</div>
+              {terminals.star.map((terminal) => (
+                <button
+                  key={terminal.ID}
+                  className="cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2 disabled:bg-gray-100"
+                  onClick={() => {
+                    setInFlight(terminal.ID);
+                    parser.loadTerminal(terminal.ID).then(() => {
+                      setSelectedTerminal(terminal);
+                      const transitions = new Set(parser.procedures.map((proc) => proc.Transition));
+                      handleSelection(Array.from(transitions));
+                      setInFlight(undefined);
+                    });
+                  }}
+                  disabled={!!inFlight}
+                >
+                  <div className="flex justify-between">
+                    {terminal.FullName}
+                    {inFlight === terminal.ID && <Loader size={0.5} />}
+                  </div>
+                </button>
+              ))}
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="sticky top-0 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Departures</div>
+              {terminals.sid.map((terminal) => (
+                <button
+                  key={terminal.ID}
+                  className="cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2 disabled:bg-gray-100"
+                  onClick={() => {
+                    parser.loadTerminal(terminal.ID).then(() => {
+                      setSelectedTerminal(terminal);
+                      const transitions = new Set(parser.procedures.map((proc) => proc.Transition));
+                      handleSelection(Array.from(transitions));
+                    });
+                  }}
+                  disabled={!!inFlight}
+                >
+                  <div className="flex justify-between">
+                    {terminal.FullName}
+                    {inFlight === terminal.ID && <Loader size={0.5} />}
+                  </div>
+                </button>
+              ))}
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="sticky top-0 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Approaches</div>
+              {terminals.iap.map((terminal) => (
+                <button
+                  key={terminal.ID}
+                  className="cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2 disabled:bg-gray-100"
+                  onClick={() => {
+                    parser.loadTerminal(terminal.ID).then(() => {
+                      setSelectedTerminal(terminal);
+                      const transitions = new Set(parser.procedures.map((proc) => proc.Transition));
+                      handleSelection(Array.from(transitions));
+                    });
+                  }}
+                  disabled={!!inFlight}
+                >
+                  <div className="flex justify-between">
+                    {terminal.FullName}
+                    {inFlight === terminal.ID && <Loader size={0.5} />}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,195 @@
+import BrowserImageManipulation from 'browser-image-manipulation';
+import L from 'leaflet';
+import type { Chart as NGChart } from 'navigraph/charts';
+import { useCallback, useEffect, useState, type Dispatch, type FC, type SetStateAction } from 'react';
+import { charts } from '../lib/navigraph';
+import { Loader } from './Loader';
+
+interface SidebarProps {
+  airport: Airport;
+  runway: Runway;
+  terminal: Terminal;
+  transitions: Procedure[];
+  transition: Procedure | undefined;
+  chart: Chart | undefined;
+  setTransition: Dispatch<SetStateAction<SidebarProps['transition']>>;
+  setChart: Dispatch<SetStateAction<SidebarProps['chart']>>;
+  backAction: () => void;
+}
+
+export const Sidebar: FC<SidebarProps> = ({
+  airport,
+  runway,
+  terminal,
+  transitions,
+  transition,
+  chart,
+  setTransition,
+  setChart,
+  backAction,
+}) => {
+  const [inFlight, setInFlight] = useState(false);
+  const [chartIndex, setChartIndex] = useState<{
+    sid: NGChart[];
+    star: NGChart[];
+    iap: NGChart[];
+  }>({ star: [], sid: [], iap: [] });
+
+  useEffect(() => {
+    setInFlight(true);
+    (async () => {
+      const _chartIndex = await charts.getChartsIndex({ icao: airport.ICAO, version: 'STD' });
+
+      const newChartIndex = {
+        star:
+          _chartIndex?.filter(
+            (_chart) =>
+              _chart.category === 'ARR' && (_chart.runways.length === 0 || _chart.runways.includes(runway.Ident))
+          ) ?? [],
+        sid:
+          _chartIndex?.filter(
+            (_chart) =>
+              _chart.category === 'DEP' && (_chart.runways.length === 0 || _chart.runways.includes(runway.Ident))
+          ) ?? [],
+        iap:
+          _chartIndex?.filter(
+            (_chart) =>
+              _chart.category === 'APP' && (_chart.runways.length === 0 || _chart.runways.includes(runway.Ident))
+          ) ?? [],
+      };
+
+      _chartIndex?.filter((_chart) => ['ARR', 'DEP', 'APP'].includes(_chart.category));
+      setChartIndex(newChartIndex);
+      setInFlight(false);
+    })();
+  }, [airport.ICAO]);
+
+  useEffect(() => {
+    if (terminal) {
+      const star = chartIndex.star.find((_chart) => _chart.procedures.includes(terminal.FullName));
+      const sid = chartIndex.sid.find((_chart) => _chart.procedures.includes(terminal.FullName));
+      const iap = chartIndex.iap.find((_chart) => _chart.procedures.includes(terminal.FullName));
+      if (star) findChart(star);
+      if (sid) findChart(sid);
+      if (iap) findChart(iap);
+    }
+  }, [terminal, chartIndex]);
+
+  const findChart = useCallback(
+    async (_chart: NGChart) => {
+      if (chart?.index_number === _chart.index_number) return;
+      if (!_chart.bounding_boxes) return;
+
+      const planView = _chart.bounding_boxes.planview;
+
+      const chartImage = await charts.getChartImage({ chart: _chart, theme: 'light' });
+      if (!chartImage) return;
+      // Crop
+      const dataURL = await new BrowserImageManipulation()
+        .loadBlob(chartImage)
+        .crop(
+          planView.pixels.x2 - planView.pixels.x1,
+          planView.pixels.y1 - planView.pixels.y2,
+          planView.pixels.x1,
+          planView.pixels.y2
+        )
+        .saveAsImage();
+
+      const bounds = new L.LatLngBounds(
+        [planView.latlng.lat1, planView.latlng.lng1],
+        [planView.latlng.lat2, planView.latlng.lng2]
+      );
+
+      setChart({ data: dataURL, index_number: _chart.index_number, bounds });
+    },
+    [chart]
+  );
+
+  return (
+    <div className="flex h-full w-[300px] shrink-0 flex-col overflow-hidden">
+      <button
+        className="sticky top-0 m-2 cursor-pointer rounded border border-red-500 bg-red-500 px-2 py-1 font-semibold text-stone-50 focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black"
+        onClick={backAction}
+      >
+        Go back
+      </button>
+
+      <div className="flex h-[calc(100%-50px)] flex-col gap-2 overflow-y-auto px-2 pb-2">
+        <div className="flex flex-col gap-2">
+          <div className="sticky top-0 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">
+            Transitions for <span className="font-bold">{terminal.FullName}</span>
+          </div>
+          {transitions.map((_procedure) => (
+            <button
+              key={_procedure.name}
+              className={`cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black ${_procedure.name === transition?.name ? 'outline-2' : ''}`}
+              onClick={() => {
+                if (_procedure.name === transition?.name) return;
+
+                setTransition(_procedure);
+              }}
+            >
+              {_procedure.name ? _procedure.name : 'NONE'}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <div className="sticky top-0 z-10 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Charts</div>
+          {inFlight && <Loader size={3} />}
+
+          <div className="flex flex-col gap-2">
+            <div className="sticky top-7 -mx-2 -mt-2 bg-gray-500 px-2 text-lg font-semibold text-white">Arrivals</div>
+            {chartIndex.star
+              .filter((_chart) => _chart.is_georeferenced)
+              .map((_chart) => (
+                <button
+                  key={_chart.index_number}
+                  className={`cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 text-left font-semibold focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black ${chart?.index_number === _chart.index_number ? 'outline-2' : ''}`}
+                  onClick={() => findChart(_chart)}
+                >
+                  <span className="font-bold">{_chart.index_number}</span>
+                  <br />
+                  {_chart.name}
+                </button>
+              ))}
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="sticky top-7 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Departures</div>
+            {chartIndex.sid
+              .filter((_chart) => _chart.is_georeferenced)
+              .map((_chart) => (
+                <button
+                  key={_chart.index_number}
+                  className={`cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 text-left font-semibold focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black ${chart?.index_number === _chart.index_number ? 'outline-2' : ''}`}
+                  onClick={() => findChart(_chart)}
+                >
+                  <span className="font-bold">{_chart.index_number}</span>
+                  <br />
+                  {_chart.name}
+                </button>
+              ))}
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="sticky top-7 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Approaches</div>
+            {chartIndex.iap
+              .filter((_chart) => _chart.is_georeferenced)
+              .map((_chart) => (
+                <button
+                  key={_chart.index_number}
+                  className={`cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 text-left font-semibold focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black ${chart?.index_number === _chart.index_number ? 'outline-2' : ''}`}
+                  onClick={() => findChart(_chart)}
+                >
+                  <span className="font-bold">{_chart.index_number}</span>
+                  <br />
+                  {_chart.name}
+                </button>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,19 @@
+import { type User } from 'navigraph/auth';
+import { createContext, useContext } from 'react';
+import { auth } from '../../lib/navigraph';
+
+interface NavigraphAuthContext {
+  initialized: boolean;
+  user: User | null;
+  signIn: typeof auth.signInWithDeviceFlow;
+}
+
+export const authContext = createContext<NavigraphAuthContext>({
+  initialized: false,
+  user: null,
+  signIn: () => Promise.reject('Not initialized'),
+});
+
+export const useNavigraphAuth = () => {
+  return useContext(authContext);
+};
@@ -0,0 +1,37 @@
+import type { User } from 'navigraph/auth';
+import { useEffect, useState } from 'react';
+import { auth } from '../../lib/navigraph';
+import { authContext } from './NavigraphAuthContext';
+
+// Provider hook that creates auth object and handles state
+function useProvideAuth() {
+  const [user, setUser] = useState<User | null>(null);
+  const [initialized, setinitialized] = useState(false);
+
+  // Subscribe to user on mount
+  // Because this sets state in the callback it will cause any
+  // component that utilizes this hook to re-render with the latest auth object.
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged((u) => {
+      if (!initialized) setinitialized(true);
+      setUser(u);
+    });
+    // Cleanup subscription on unmount
+    return () => unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    user,
+    initialized,
+    signIn: auth.signInWithDeviceFlow,
+  };
+}
+
+// Provider component that wraps your app and makes auth object
+// available to any child component that calls useAuth().
+export function NavigraphAuthProvider({ children }: { children: React.ReactNode }) {
+  const _auth = useProvideAuth();
+  return <authContext.Provider value={_auth}>{children}</authContext.Provider>;
+}
+
@@ -0,0 +1,21 @@
+import { initializeApp, Scope, type NavigraphApp } from 'navigraph/app';
+import { getAuth } from 'navigraph/auth';
+import { getChartsAPI } from 'navigraph/charts';
+
+const config: NavigraphApp = {
+  clientId: import.meta.env.VITE_NG_CLIENT_ID,
+  clientSecret: import.meta.env.VITE_NG_CLIENT_SECRET,
+  scopes: [Scope.CHARTS],
+};
+
+initializeApp(config);
+
+export const auth = getAuth({
+  storage: {
+    // Optional
+    getItem: (key) => localStorage.getItem('NG' + key),
+    setItem: (key, value) => localStorage.setItem('NG' + key, value),
+  },
+});
+
+export const charts = getChartsAPI();
@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+
+import 'leaflet/dist/leaflet.css';
+import { NavigraphAuthProvider } from './contexts/NavigraphAuth/NavigraphAuthProvider.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <NavigraphAuthProvider>
+      <App />
+    </NavigraphAuthProvider>
+  </StrictMode>
+);
@@ -0,0 +1,318 @@
+import geojson from 'geojson';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import { TerminatorsAF } from './terminators/AF';
+import { TerminatorsCA } from './terminators/CA';
+import { TerminatorsCD } from './terminators/CD';
+import { TerminatorsCF } from './terminators/CF';
+import { TerminatorsCI } from './terminators/CI';
+import { TerminatorsCR } from './terminators/CR';
+import { TerminatorsDF } from './terminators/DF';
+import { TerminatorsFA } from './terminators/FA';
+import { TerminatorsFC } from './terminators/FC';
+import { TerminatorsFD } from './terminators/FD';
+import { TerminatorsFM } from './terminators/FM';
+import { TerminatorsHA } from './terminators/HA';
+import { TerminatorsHF } from './terminators/HF';
+import { TerminatorsHM } from './terminators/HM';
+import { TerminatorsIF } from './terminators/IF';
+import { TerminatorsPI } from './terminators/PI';
+import { TerminatorsRF } from './terminators/RF';
+import { TerminatorsTF } from './terminators/TF';
+import { TerminatorsVA } from './terminators/VA';
+import { TerminatorsVD } from './terminators/VD';
+import { TerminatorsVI } from './terminators/VI';
+import { TerminatorsVM } from './terminators/VM';
+import { TerminatorsVR } from './terminators/VR';
+import './utils/extensions';
+
+/*
+Runway IDs for LIED
+26156 - 34L
+26157 - 34R
+*/
+
+class Parser {
+  private static _instance: Parser;
+
+  private _airports: Airport[];
+  private _waypoints: Waypoint[];
+  private _runways: Runway[];
+  private _terminals: Terminal[];
+
+  private _procedures: TerminalEntry[] = [];
+
+  public static AC_SPEED = 250;
+  public static AC_BANK = 30;
+  public static AC_VS = 1400;
+
+  private constructor(airports: Airport[], waypoints: Waypoint[], runways: Runway[], terminals: Terminal[]) {
+    this._airports = airports;
+    this._waypoints = waypoints;
+    this._runways = runways;
+    this._terminals = terminals;
+  }
+
+  public static instance = async () => {
+    if (!Parser._instance) {
+      const airports = await (await fetch('NavData/Airports.json')).json();
+      const waypoints = await (await fetch('NavData/Waypoints.json')).json();
+      const runways = await (await fetch('NavData/Runways.json')).json();
+      const terminals = await (await fetch('NavData/Terminals.json')).json();
+
+      Parser._instance = new Parser(airports, waypoints, runways, terminals);
+    }
+
+    return Parser._instance;
+  };
+
+  public get airports() {
+    return this._airports;
+  }
+  public get terminals() {
+    return this._terminals;
+  }
+  public get waypoints() {
+    return this._waypoints;
+  }
+  public get runways() {
+    return this._runways;
+  }
+
+  public get procedures() {
+    return this._procedures;
+  }
+
+  public loadTerminal = async (terminalID: number) => {
+    this._procedures = (await (
+      await fetch(`NavData/ProcedureLegs/TermID_${terminalID}.json`)
+    ).json()) as TerminalEntry[];
+  };
+
+  public parse = (runway: Runway, transition: string) => {
+    // Private functions
+    /**
+     * @param line Line segments
+     */
+    const updateLastCourse = (line: LineSegment[]) => {
+      lastCourse = getGreatCircleBearing(
+        {
+          latitude: line.at(-2)![1],
+          longitude: line.at(-2)![0],
+        },
+        {
+          latitude: line.at(-1)![1],
+          longitude: line.at(-1)![0],
+        }
+      );
+    };
+
+    /**
+     * @param fix New fix
+     * @param line New line
+     * @param options Options for line rendering
+     */
+    const update = (fix?: NavFix, line?: LineSegment[], options?: Record<string, unknown>) => {
+      if (fix) navFixes.push(fix);
+      if (line) {
+        lineSegments.push({ line, ...options });
+        updateLastCourse(line);
+      }
+    };
+
+    // Output variables
+    const navFixes: NavFix[] = [];
+    const lineSegments: { line: LineSegment[]; [x: string]: unknown }[] = [];
+
+    // Initials
+    navFixes.push({
+      latitude: runway.Latitude,
+      longitude: runway.Longitude,
+      altitude: runway.Elevation,
+      speed: 0,
+      name: runway.Ident,
+    });
+    let lastCourse = runway.TrueHeading;
+    const legOptions = { isMAP: false };
+    const procedure = this._procedures.filter(
+      ({ Transition }) => !Transition || Transition === transition || Transition === 'ALL'
+    );
+
+    // Main
+    for (let index = 0; index < procedure.length; index++) {
+      console.log('Processing leg with ID', procedure[index].ID);
+
+      const leg = procedure[index];
+      leg.Alt = leg.IsMAP ? String(runway.Elevation + 200).padStart(5, '0') : leg.Alt;
+      const previousFix = navFixes.at(-1)!;
+      legOptions.isMAP ||= previousFix.IsMAP ?? false;
+      const waypoint = this.waypoints.find(({ ID }) => ID === leg.WptID);
+
+      switch (leg.TrackCode) {
+        case 'AF': {
+          const [fixToAdd, lineToAdd] = TerminatorsAF(leg as AFTerminalEntry, previousFix, waypoint);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'CA': {
+          const [fixToAdd, lineToAdd] = TerminatorsCA(leg as CATerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'CD': {
+          const [fixToAdd, lineToAdd] = TerminatorsCD(leg as CDTerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'CF': {
+          const [fixToAdd, lineToAdd] = TerminatorsCF(
+            leg as CFTerminalEntry,
+            { ...previousFix }, // COPY
+            lastCourse,
+            waypoint
+          );
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'CI': {
+          const [fixToAdd, lineToAdd] = TerminatorsCI(
+            leg as CITerminalEntry,
+            procedure[index + 1],
+            { ...previousFix }, // COPY
+            lastCourse
+          );
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'CR': {
+          const [fixToAdd, lineToAdd] = TerminatorsCR(leg as CRTerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'DF': {
+          const [fixToAdd, lineToAdd] = TerminatorsDF(leg as DFTerminalEntry, previousFix, lastCourse, waypoint);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'FA': {
+          const [fixToAdd, lineToAdd] = TerminatorsFA(leg as FATerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'FC': {
+          const [fixToAdd, lineToAdd] = TerminatorsFC(leg as FCTerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'FD': {
+          const [fixToAdd, lineToAdd] = TerminatorsFD(leg as FDTerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'FM': {
+          const [fixToAdd, lineToAdd] = TerminatorsFM(leg as FMTerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, { isManual: true, ...legOptions });
+          // Make overfly
+          navFixes.at(-1)!.isFlyOver = true;
+          break;
+        }
+        case 'HA': {
+          const [fixToAdd, lineToAdd] = TerminatorsHA(leg as HATerminalEntry, previousFix);
+          update(fixToAdd, lineToAdd, { ...legOptions });
+          break;
+        }
+        case 'HF': {
+          const [fixToAdd, lineToAdd] = TerminatorsHF(leg as HFTerminalEntry, previousFix);
+          update(fixToAdd, lineToAdd, { ...legOptions });
+          break;
+        }
+        case 'HM': {
+          const [fixToAdd, lineToAdd] = TerminatorsHM(leg as HMTerminalEntry, previousFix);
+          update(fixToAdd, lineToAdd, { ...legOptions });
+          break;
+        }
+        case 'IF': {
+          const fixToAdd = TerminatorsIF(leg as RFTerminalEntry, waypoint);
+          // Only Runway, replace
+          if (navFixes.length <= 1) {
+            navFixes.push(fixToAdd);
+            lastCourse = -1;
+          }
+          break;
+        }
+        case 'PI': {
+          const nextLeg = procedure[index + 1] as CFTerminalEntry;
+          const _waypoint = this.waypoints.find(({ ID }) => ID === nextLeg.WptID);
+          const [fixToAdd, lineToAdd] = TerminatorsPI(leg as PITerminalEntry, nextLeg, previousFix, [
+            waypoint,
+            _waypoint,
+          ]);
+          update(fixToAdd, lineToAdd, { ...legOptions });
+          break;
+        }
+        case 'RF': {
+          const [fixToAdd, lineToAdd] = TerminatorsRF(leg as RFTerminalEntry, previousFix, lastCourse, waypoint);
+          if (fixToAdd) {
+            navFixes.push(fixToAdd);
+            lastCourse = (leg as RFTerminalEntry).Course?.toTrue(fixToAdd);
+          }
+          if (lineToAdd) {
+            lineSegments.push({ line: lineToAdd, ...legOptions });
+          }
+          break;
+        }
+        case 'TF': {
+          const [fixToAdd, lineToAdd] = TerminatorsTF(
+            leg as TFTerminalEntry,
+            { ...previousFix }, // COPY
+            lastCourse,
+            waypoint
+          );
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'VA': {
+          const [fixToAdd, lineToAdd] = TerminatorsVA(leg as VATerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'VD': {
+          const [fixToAdd, lineToAdd] = TerminatorsVD(leg as VDTerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'VI': {
+          const [fixToAdd, lineToAdd] = TerminatorsVI(
+            leg as VITerminalEntry,
+            procedure[index + 1],
+            { ...previousFix }, // COPY
+            lastCourse
+          );
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        case 'VM': {
+          const [fixToAdd, lineToAdd] = TerminatorsVM(leg as VMTerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, { isManual: true, ...legOptions });
+          // Make overfly
+          navFixes.at(-1)!.isFlyOver = true;
+          break;
+        }
+        case 'VR': {
+          const [fixToAdd, lineToAdd] = TerminatorsVR(leg as VRTerminalEntry, previousFix, lastCourse);
+          update(fixToAdd, lineToAdd, legOptions);
+          break;
+        }
+        default:
+          console.error('Unknown TrackCode', leg.TrackCode);
+          break;
+      }
+    }
+
+    return geojson.parse([...navFixes, ...lineSegments], {
+      LineString: 'line',
+      Point: ['latitude', 'longitude'],
+    });
+  };
+}
+
+export default Parser;
@@ -0,0 +1,49 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+
+/**
+ * @param crsIntoEndpoint Course into arc endpoint
+ * @param crsFromOrigin Course into arc origin point
+ * @param start Arc origin point
+ * @param center Arc center point
+ * @param radius Arc radius in nmi
+ * @param turnDir Turn direction
+ * @returns Line segments
+ */
+export const generateAFArc = (
+  crsIntoEndpoint: number,
+  crsFromOrigin: number,
+  start: NavFix,
+  center: NavFix,
+  radius: number,
+  turnDir: TurnDirection
+) => {
+  const line: LineSegment[] = [[start.longitude, start.latitude]];
+
+  if (crsIntoEndpoint !== crsFromOrigin) {
+    // Turn Dir
+    if (!turnDir || turnDir === 'E') {
+      let prov = crsFromOrigin - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      turnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    while (crsFromOrigin !== crsIntoEndpoint) {
+      if (turnDir === 'R') {
+        const delta = (crsIntoEndpoint - crsFromOrigin).normaliseDegrees();
+        crsFromOrigin += delta < 0.1 ? delta : 0.1;
+        crsFromOrigin = crsFromOrigin.normaliseDegrees();
+      } else {
+        const delta = (crsFromOrigin - crsIntoEndpoint).normaliseDegrees();
+        crsFromOrigin -= delta < 0.1 ? delta : 0.1;
+        crsFromOrigin = crsFromOrigin.normaliseDegrees();
+      }
+      if (crsFromOrigin === crsIntoEndpoint) break;
+
+      const arcFix = computeDestinationPoint(center, radius.toMetre(), crsFromOrigin);
+
+      line.push([arcFix.longitude, arcFix.latitude]);
+    }
+  }
+
+  return line;
+};
@@ -0,0 +1,44 @@
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import { generatePerformanceArc } from './generatePerformanceArc';
+
+/**
+ * @param crsIntoEndpoint Course into arc endpoint
+ * @param crsFromOrigin Course from arc origin point
+ * @param start Arc origin point
+ * @param speed Speed within arc
+ * @param turnDir Turn direction
+ * @returns Line segments, arc endpoint, course into arc endpoint
+ */
+export const generateOverflyArc = (
+  crsIntoEndpoint: number,
+  crsFromOrigin: number,
+  start: NavFix,
+  speed: number,
+  turnDir?: TurnDirection,
+  force360?: boolean
+): [LineSegment[], NavFix, number] => {
+  let line: LineSegment[] = [];
+
+  // Compute overfly arc
+  if (start.isFlyOver) {
+    line = generatePerformanceArc(crsIntoEndpoint, crsFromOrigin, start, speed, turnDir, force360);
+  }
+  // Compute procedural arc
+  else {
+    line.push([start.longitude, start.latitude]);
+  }
+
+  // Get arc endpoint and crs into arc endpoint
+  const arcEnd = { latitude: line.at(-1)![1], longitude: line.at(-1)![0] };
+  if (line.length > 1) {
+    crsFromOrigin = getGreatCircleBearing(
+      {
+        latitude: line.at(-2)![1],
+        longitude: line.at(-2)![0],
+      },
+      arcEnd
+    );
+  }
+
+  return [line, arcEnd, crsFromOrigin];
+};
@@ -0,0 +1,98 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import Parser from '../parser';
+import { computeTurnRate } from '../utils/computeTurnRate';
+
+/**
+ * @param crsIntoEndpoint Course into arc endpoint
+ * @param crsFromOrigin Course from arc origin point
+ * @param start Arc origin point
+ * @param speed Speed within arc
+ * @param turnDir Turn direction
+ * @param force360 If true, force a 360° turn
+ * @returns Line segments
+ */
+export const generatePerformanceArc = (
+  crsIntoEndpoint: number,
+  crsFromOrigin: number,
+  start: NavFix,
+  speed: number,
+  turnDir?: TurnDirection,
+  force360?: boolean
+) => {
+  const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+  const originalCrsFromOrigin = crsFromOrigin;
+
+  const line: LineSegment[] = [[start.longitude, start.latitude]];
+
+  // Check if there even is an arc
+  if (force360 || !crsFromOrigin.equal(crsIntoEndpoint)) {
+    // Turn Dir
+    if (!turnDir || turnDir === 'E') {
+      let prov = crsFromOrigin - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      turnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    // Generate arc
+    while (!crsFromOrigin.equal(crsIntoEndpoint)) {
+      let time = 0;
+      if (turnDir === 'R') {
+        const delta = (crsIntoEndpoint - crsFromOrigin).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        crsFromOrigin = (crsFromOrigin + increment).normaliseDegrees();
+        time = increment / turnRate;
+      } else {
+        const delta = (crsFromOrigin - crsIntoEndpoint).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        crsFromOrigin = (crsFromOrigin - increment).normaliseDegrees();
+        time = increment / turnRate;
+      }
+
+      const arcFix = computeDestinationPoint(
+        {
+          latitude: line.at(-1)![1],
+          longitude: line.at(-1)![0],
+        },
+        ((speed / 3600) * time).toMetre(),
+        crsFromOrigin
+      );
+
+      line.push([arcFix.longitude, arcFix.latitude]);
+    }
+
+    // Second half
+    if (force360) {
+      const temp = crsIntoEndpoint;
+      crsIntoEndpoint = originalCrsFromOrigin;
+      crsFromOrigin = temp;
+
+      while (!crsFromOrigin.equal(crsIntoEndpoint)) {
+        let time = 0;
+        if (turnDir === 'R') {
+          const delta = (crsIntoEndpoint - crsFromOrigin).normaliseDegrees();
+          const increment = delta < 0.1 ? delta : 0.1;
+          crsFromOrigin = (crsFromOrigin + increment).normaliseDegrees();
+          time = increment / turnRate;
+        } else {
+          const delta = (crsFromOrigin - crsIntoEndpoint).normaliseDegrees();
+          const increment = delta < 0.1 ? delta : 0.1;
+          crsFromOrigin = (crsFromOrigin - increment).normaliseDegrees();
+          time = increment / turnRate;
+        }
+
+        const arcFix = computeDestinationPoint(
+          {
+            latitude: line.at(-1)![1],
+            longitude: line.at(-1)![0],
+          },
+          ((speed / 3600) * time).toMetre(),
+          crsFromOrigin
+        );
+
+        line.push([arcFix.longitude, arcFix.latitude]);
+      }
+    }
+  }
+
+  return line;
+};
@@ -0,0 +1,68 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+
+/**
+ * @param crsIntoEndpoint Course into arc endpoint
+ * @param crsIntoOrigin Course into arc origin point
+ * @param start Arc origin point
+ * @param center Arc center point
+ * @param turnDir
+ * @returns Line segments
+ */
+export const generateRFArc = (
+  crsIntoEndpoint: number,
+  crsIntoOrigin: number,
+  start: NavFix,
+  center: NavFix,
+  turnDir: TurnDirection
+) => {
+  const line: LineSegment[] = [[start.longitude, start.latitude]];
+
+  if (!crsIntoEndpoint.equal(crsIntoOrigin)) {
+    // Turn Dir
+    if (!turnDir || turnDir === 'E') {
+      let prov = crsIntoOrigin - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      turnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    let crsOrthogonalOnOrigin;
+    let crsOrthogonalOnEndpoint;
+    if (turnDir === 'R') {
+      crsOrthogonalOnOrigin = (crsIntoOrigin + 90).normaliseDegrees();
+      crsOrthogonalOnEndpoint = (crsIntoEndpoint + 90).normaliseDegrees();
+    } else {
+      crsOrthogonalOnOrigin = (crsIntoOrigin - 90).normaliseDegrees();
+      crsOrthogonalOnEndpoint = (crsIntoEndpoint - 90).normaliseDegrees();
+    }
+
+    const arcRad = getPreciseDistance(center, start);
+
+    crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.reciprocalCourse();
+    crsOrthogonalOnEndpoint = crsOrthogonalOnEndpoint.reciprocalCourse();
+    // Start turn immediately
+    if (turnDir === 'R') {
+      crsOrthogonalOnOrigin += crsOrthogonalOnOrigin < 1 ? crsOrthogonalOnOrigin : 1;
+    } else {
+      crsOrthogonalOnOrigin -= crsOrthogonalOnOrigin < 1 ? crsOrthogonalOnOrigin : 1;
+    }
+
+    while (!crsOrthogonalOnOrigin.equal(crsOrthogonalOnEndpoint)) {
+      if (turnDir === 'R') {
+        const delta = (crsOrthogonalOnEndpoint - crsOrthogonalOnOrigin).normaliseDegrees();
+        crsOrthogonalOnOrigin += delta < 0.1 ? delta : 0.1;
+        crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.normaliseDegrees();
+      } else {
+        const delta = (crsOrthogonalOnOrigin - crsOrthogonalOnEndpoint).normaliseDegrees();
+        crsOrthogonalOnOrigin -= delta < 0.1 ? delta : 0.1;
+        crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.normaliseDegrees();
+      }
+
+      const arcFix = computeDestinationPoint(center, arcRad, crsOrthogonalOnOrigin);
+
+      line.push([arcFix.longitude, arcFix.latitude]);
+    }
+  }
+
+  return line;
+};
@@ -0,0 +1,105 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import { computeIntersection } from '../utils/computeIntersection';
+
+/**
+ * @param crsIntoEndpoint Course into arc endpoint
+ * @param crsFromOrigin Course from arc origin point
+ * @param start Arc origin point
+ * @param end Leg endpoint
+ * @param turnDir Turn direction
+ * @returns Line segments forming arc from `start`to `end`
+ */
+export const generateTangentArc = (
+  crsIntoEndpoint: number,
+  crsFromOrigin: number,
+  start: NavFix,
+  end: NavFix,
+  turnDir?: TurnDirection
+) => {
+  const line: LineSegment[] = [[start.longitude, start.latitude]];
+
+  // Check if there even is an arc
+  if (!crsFromOrigin.equal(crsIntoEndpoint)) {
+    // Course to the end of the arc
+    let crsFromStartToEnd;
+    if (!turnDir || turnDir === 'E') {
+      let prov = crsFromOrigin - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      turnDir = prov > 0 ? 'L' : 'R';
+    }
+    if (turnDir === 'R') {
+      const delta = (360 - crsFromOrigin + crsIntoEndpoint).normaliseDegrees();
+      crsFromStartToEnd = (crsFromOrigin + delta / 2).normaliseDegrees();
+    } else {
+      const delta = (crsFromOrigin + 360 - crsIntoEndpoint).normaliseDegrees();
+      crsFromStartToEnd = (crsFromOrigin - delta / 2).normaliseDegrees();
+    }
+
+    // Arc end
+    const intcArcOnCrsIntoEndpoint = computeIntersection(
+      start,
+      crsFromStartToEnd,
+      end,
+      crsIntoEndpoint.reciprocalCourse()
+    );
+    if (!intcArcOnCrsIntoEndpoint) return null;
+
+    let crsOrthogonalOnOrigin;
+    let crsOrthogonalOnEndpoint;
+    if (turnDir === 'R') {
+      crsOrthogonalOnOrigin = (crsFromOrigin + 90).normaliseDegrees();
+      crsOrthogonalOnEndpoint = (crsIntoEndpoint + 90).normaliseDegrees();
+    } else {
+      crsOrthogonalOnOrigin = (crsFromOrigin - 90).normaliseDegrees();
+      crsOrthogonalOnEndpoint = (crsIntoEndpoint - 90).normaliseDegrees();
+    }
+
+    // Generate arc
+    let arcRad = 0;
+    let arcCenter = computeIntersection(
+      start,
+      crsOrthogonalOnOrigin,
+      intcArcOnCrsIntoEndpoint,
+      crsOrthogonalOnEndpoint
+    );
+    if (Math.abs(crsOrthogonalOnEndpoint - crsOrthogonalOnOrigin) <= 0.1 && arcCenter)
+      arcRad = getPreciseDistance(arcCenter, start);
+    else {
+      arcRad = getPreciseDistance(start, end) / 2;
+      arcCenter = computeDestinationPoint(start, arcRad, crsOrthogonalOnOrigin);
+    }
+
+    crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.reciprocalCourse();
+    crsOrthogonalOnEndpoint = crsOrthogonalOnEndpoint.reciprocalCourse();
+    // Start turn immediately
+    if (turnDir === 'R') {
+      crsOrthogonalOnOrigin += crsOrthogonalOnOrigin < 1 ? crsOrthogonalOnOrigin : 1;
+    } else {
+      crsOrthogonalOnOrigin -= crsOrthogonalOnOrigin < 1 ? crsOrthogonalOnOrigin : 1;
+    }
+
+    let lastDistance = getPreciseDistance(start, end);
+    while (!crsOrthogonalOnOrigin.equal(crsOrthogonalOnEndpoint)) {
+      if (turnDir === 'R') {
+        const delta = (crsOrthogonalOnEndpoint - crsOrthogonalOnOrigin).normaliseDegrees();
+        crsOrthogonalOnOrigin += delta < 0.1 ? delta : 0.1;
+        crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.normaliseDegrees();
+      } else {
+        const delta = (crsOrthogonalOnOrigin - crsOrthogonalOnEndpoint).normaliseDegrees();
+        crsOrthogonalOnOrigin -= delta < 0.1 ? delta : 0.1;
+        crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.normaliseDegrees();
+      }
+
+      const arcFix = computeDestinationPoint(arcCenter, arcRad, crsOrthogonalOnOrigin);
+
+      const newDistance = getPreciseDistance(arcFix, end);
+      if (lastDistance <= newDistance && lastDistance < 25) break;
+      lastDistance = newDistance;
+
+      line.push([arcFix.longitude, arcFix.latitude]);
+    }
+  }
+
+  return line;
+};
@@ -0,0 +1,57 @@
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import { generatePerformanceArc } from './generatePerformanceArc';
+import { generateTangentArc } from './generateTangentArc';
+
+/**
+ * @param crsIntoEndpoint Course into endpoint
+ * @param crsIntoIntercept Course into intercept point (only fo intercept type legs)
+ * @param crsFromOrigin Course from arc origin point
+ * @param start Waypoint where leg starts
+ * @param end Waypoint where leg ends
+ * @param speed Speed for performance arc
+ * @param turnDir Turn direction
+ * @returns Line segments from `start` to `end`
+ */
+export const handleTurnAtFix = (
+  crsIntoEndpoint: number,
+  crsIntoIntercept: number,
+  crsFromOrigin: number,
+  start: NavFix,
+  end: NavFix,
+  speed: number,
+  turnDir?: TurnDirection
+) => {
+  const line: LineSegment[] = [];
+
+  // Overfly turn
+  if (start.isFlyOver) {
+    const arc1 = generateTangentArc(crsIntoEndpoint, crsFromOrigin, start, end, turnDir);
+
+    const arc2 = generatePerformanceArc(crsIntoIntercept, crsFromOrigin, start, speed, turnDir);
+
+    // Decide on arc
+    let arc;
+    if (arc1) {
+      const endCrs = getGreatCircleBearing(
+        {
+          latitude: arc1.at(-1)![1],
+          longitude: arc1.at(-1)![0],
+        },
+        end
+      );
+
+      if (endCrs <= crsIntoEndpoint + 1 && endCrs >= crsIntoEndpoint - 1) arc = arc1;
+      else arc = arc2;
+    } else {
+      arc = arc2;
+    }
+    line.push(...arc);
+    line.push([end.longitude, end.latitude]);
+  }
+  // Procedural turn
+  else {
+    line.push([start.longitude, start.latitude], [end.longitude, end.latitude]);
+  }
+
+  return line;
+};
@@ -0,0 +1,33 @@
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import { generateAFArc } from '../pathGenerators/generateAFArc';
+import { computeSpeed } from '../utils/computeSpeed';
+
+export const TerminatorsAF = (
+  leg: AFTerminalEntry,
+  previousFix: NavFix,
+  waypoint?: Waypoint
+): [NavFix?, LineSegment[]?] => {
+  const navaid = {
+    latitude: leg.NavLat,
+    longitude: leg.NavLon,
+  };
+
+  const targetFix: NavFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+    name: waypoint?.Ident ?? undefined,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: computeSpeed(leg, previousFix),
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  const arcEndCrs = getGreatCircleBearing(navaid, targetFix);
+
+  const line = generateAFArc(arcEndCrs, leg.Course.toTrue(navaid), previousFix, navaid, leg.NavDist, leg.TurnDir);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,40 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import Parser from '../parser';
+import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import { computeSpeed } from '../utils/computeSpeed';
+
+export const TerminatorsCA = (
+  leg: CATerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+  const crsIntoEndpoint = leg.Course.toTrue(previousFix);
+
+  // Compute overfly
+  const [line, arcEnd, _lastCourse] = generateOverflyArc(crsIntoEndpoint, lastCourse, previousFix, speed, leg.TurnDir);
+  lastCourse = _lastCourse;
+
+  // Compute intercept of crs from arc end and expected altitude
+  const targetFix: NavFix = {
+    ...computeDestinationPoint(
+      arcEnd,
+      (
+        ((leg.Alt.parseAltitude() - (previousFix.altitude ?? 0)) / Parser.AC_VS) *
+        ((previousFix.speed ? previousFix.speed : Parser.AC_SPEED) / 60)
+      ).toMetre(),
+      crsIntoEndpoint
+    ),
+    name: leg.Alt,
+    isFlyOver: true,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,53 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import { computeSpeed } from '../utils/computeSpeed';
+
+// NOTE: Distance not adjusted for altitude in this demo
+export const TerminatorsCD = (
+  leg: CDTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const navaid = {
+    latitude: leg.NavLat,
+    longitude: leg.NavLon,
+  };
+  const crsIntoEndpoint = leg.Course.toTrue(previousFix);
+  const speed = computeSpeed(leg, previousFix);
+
+  // Compute overfly
+  const [line, arcEnd, _lastCourse] = generateOverflyArc(crsIntoEndpoint, lastCourse, previousFix, speed, leg.TurnDir);
+  lastCourse = _lastCourse;
+
+  // Compute distance to fly from arc end
+  const crsToNavaid = getGreatCircleBearing(arcEnd, navaid);
+  const distToNavaid = getPreciseDistance(arcEnd, navaid);
+  let remainingDistance = leg.Distance.toMetre();
+  // Navaid behind us
+  if (Math.abs(crsToNavaid - lastCourse) > 90) {
+    remainingDistance -= distToNavaid;
+  }
+  // Navaid in front of us
+  else {
+    // Navaid will not be passed before distance is hit
+    if (distToNavaid > remainingDistance) remainingDistance = distToNavaid - remainingDistance;
+  }
+
+  // Compute intercept of crs from arc end and distance
+  const targetFix: NavFix = {
+    ...computeDestinationPoint(arcEnd, remainingDistance, lastCourse),
+    name: leg.Distance.toString(),
+    isFlyOver: true,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,120 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import Parser from '../parser';
+import { generateTangentArc } from '../pathGenerators/generateTangentArc';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+
+export const TerminatorsCF = (
+  leg: CFTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number,
+  waypoint?: Waypoint
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+  const crsIntoEndpoint = leg.Course.toTrue(previousFix);
+  const line: LineSegment[] = [];
+
+  const targetFix: NavFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+    name: waypoint?.Ident ?? undefined,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  const crsToIntercept = leg.Course.toTrue(targetFix);
+
+  // Compute overfly arc
+  let arc1: LineSegment[] | null = null;
+  let arc2: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+  if (previousFix.isFlyOver) {
+    arc1 = generateTangentArc(crsIntoEndpoint, lastCourse, previousFix, targetFix, leg.TurnDir);
+  } else {
+    arc1 = [[previousFix.longitude, previousFix.latitude]];
+  }
+
+  let arc;
+  if (arc1 && arc1.length > 1) {
+    const endCrs = getGreatCircleBearing(
+      {
+        latitude: arc1.at(-1)![1],
+        longitude: arc1.at(-1)![0],
+      },
+      targetFix
+    );
+    const endDist = getPreciseDistance(
+      {
+        latitude: arc1.at(-1)![1],
+        longitude: arc1.at(-1)![0],
+      },
+      targetFix
+    );
+
+    if (endDist <= 25 || (endCrs <= crsIntoEndpoint + 1 && endCrs >= crsIntoEndpoint - 1)) arc = arc1;
+  }
+
+  if (previousFix.isFlyOver && (!lastCourse.equal(crsIntoEndpoint) || !lastCourse.equal(crsToIntercept))) {
+    const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+    let updatedCrsToIntercept = getGreatCircleBearing(previousFix, targetFix);
+
+    // Turn Dir
+    if (!leg.TurnDir || leg.TurnDir === 'E') {
+      let prov = lastCourse - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      leg.TurnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    // Generate arc
+    let lastDistance = getPreciseDistance(previousFix, targetFix);
+    while (!updatedCrsToIntercept.equal(crsToIntercept)) {
+      let interceptAngle = 0;
+      if (leg.TurnDir === 'R') interceptAngle = Math.abs(lastCourse - crsToIntercept);
+      else interceptAngle = Math.abs(crsToIntercept - lastCourse);
+
+      let time = 0;
+      const increment = 0.1;
+      if (interceptAngle < 44.9 || interceptAngle >= 45.1) {
+        if (leg.TurnDir === 'R') {
+          lastCourse = (lastCourse + increment).normaliseDegrees();
+          time = increment / turnRate;
+        } else {
+          lastCourse = (lastCourse - increment).normaliseDegrees();
+          time = increment / turnRate;
+        }
+      } else time = increment / turnRate;
+
+      const arcFix = computeDestinationPoint(
+        {
+          latitude: arc2.at(-1)![1],
+          longitude: arc2.at(-1)![0],
+        },
+        ((speed / 3600) * time).toMetre(),
+        lastCourse
+      );
+
+      arc2.push([arcFix.longitude, arcFix.latitude]);
+
+      // Update previousFix
+      previousFix.latitude = arcFix.latitude;
+      previousFix.longitude = arcFix.longitude;
+      updatedCrsToIntercept = getGreatCircleBearing(previousFix, targetFix);
+
+      const newDistance = getPreciseDistance(previousFix, targetFix);
+      if (lastDistance <= newDistance && lastDistance < 25) break;
+      lastDistance = newDistance;
+    }
+  }
+
+  if (!arc) arc = arc2;
+  line.push(...arc);
+
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,78 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import Parser from '../parser';
+import { computeIntersection } from '../utils/computeIntersection';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+import { getCourseAndFixForIntercepts } from '../utils/getCourseAndFixForIntercepts';
+
+export const TerminatorsCI = (
+  leg: CITerminalEntry,
+  nextLeg: TerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+  const crsIntoEndpoint = leg.Course.toTrue(previousFix);
+  const [crsToIntercept, nextFix] = getCourseAndFixForIntercepts(nextLeg, previousFix);
+  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+
+  // Compute overfly arc
+  if (previousFix.isFlyOver && !lastCourse.equal(crsIntoEndpoint)) {
+    const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+    const updatedCrsToIntercept = getGreatCircleBearing(previousFix, nextFix);
+
+    // Turn Dir
+    if (!leg.TurnDir || leg.TurnDir === 'E') {
+      let prov = lastCourse - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      leg.TurnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    // Generate arc
+    while (!lastCourse.equal(crsIntoEndpoint) && !updatedCrsToIntercept.equal(crsToIntercept)) {
+      let time = 0;
+      if (leg.TurnDir === 'R') {
+        const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        lastCourse = (lastCourse + increment).normaliseDegrees();
+        time = increment / turnRate;
+      } else {
+        const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        lastCourse = (lastCourse - increment).normaliseDegrees();
+        time = increment / turnRate;
+      }
+
+      const arcFix = computeDestinationPoint(
+        {
+          latitude: line.at(-1)![1],
+          longitude: line.at(-1)![0],
+        },
+        ((speed / 3600) * time).toMetre(),
+        lastCourse
+      );
+
+      line.push([arcFix.longitude, arcFix.latitude]);
+
+      // Update previousFix
+      previousFix.latitude = arcFix.latitude;
+      previousFix.longitude = arcFix.longitude;
+    }
+  }
+
+  const interceptFix: NavFix = {
+    ...computeIntersection(previousFix, leg.Course.toTrue(nextFix), nextFix, crsToIntercept)!,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  line.push([interceptFix.longitude, interceptFix.latitude]);
+
+  return [interceptFix, line];
+};
@@ -0,0 +1,37 @@
+import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import { computeIntersection } from '../utils/computeIntersection';
+import { computeSpeed } from '../utils/computeSpeed';
+
+export const TerminatorsCR = (
+  leg: CRTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const navaid = {
+    latitude: leg.NavLat,
+    longitude: leg.NavLon,
+  };
+  const crsFromEndpoint = leg.Course.toTrue(previousFix);
+  const crsIntoEndpoint = leg.NavBear.toTrue(navaid);
+  const speed = computeSpeed(leg, previousFix);
+
+  // Compute overfly
+  const [line, arcEnd, _lastCourse] = generateOverflyArc(crsFromEndpoint, lastCourse, previousFix, speed, leg.TurnDir);
+  lastCourse = _lastCourse;
+
+  // Compute intercept of crs from arc end and radial
+  const interceptFix: NavFix = {
+    ...computeIntersection(arcEnd, crsFromEndpoint, navaid, crsIntoEndpoint)!,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  line.push([interceptFix.longitude, interceptFix.latitude]);
+
+  return [interceptFix, line];
+};
@@ -0,0 +1,121 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import Parser from '../parser';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+
+export const TerminatorsDF = (
+  leg: DFTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number,
+  waypoint?: Waypoint
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+  const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+  const originalCrsFromOrigin = lastCourse;
+  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+
+  const targetFix: NavFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+    name: waypoint?.Ident ?? undefined,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  let crsIntoEndpoint = getGreatCircleBearing(previousFix, targetFix);
+  let force360 = getPreciseDistance(previousFix, targetFix) < 25;
+
+  // Check if there even is an arc
+  if (force360 || !lastCourse.equal(crsIntoEndpoint)) {
+    // Turn Dir
+    if (!leg.TurnDir || leg.TurnDir === 'E') {
+      let prov = lastCourse - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      leg.TurnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    // Generate arc
+    while (!lastCourse.equal(crsIntoEndpoint)) {
+      let time = 0;
+      if (leg.TurnDir === 'R') {
+        const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        lastCourse = (lastCourse + increment).normaliseDegrees();
+        time = increment / turnRate;
+      } else {
+        const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        lastCourse = (lastCourse - increment).normaliseDegrees();
+        time = increment / turnRate;
+      }
+
+      const arcFix = computeDestinationPoint(
+        {
+          latitude: line.at(-1)![1],
+          longitude: line.at(-1)![0],
+        },
+        ((speed / 3600) * time).toMetre(),
+        lastCourse
+      );
+
+      crsIntoEndpoint = getGreatCircleBearing(arcFix, targetFix);
+
+      line.push([arcFix.longitude, arcFix.latitude]);
+
+      // made a loop
+      if (line.length >= 3600) {
+        if (!force360) {
+          line.splice(1);
+        }
+        force360 = false;
+        break;
+      }
+    }
+
+    // Second half
+    if (force360) {
+      const temp = crsIntoEndpoint;
+      crsIntoEndpoint = originalCrsFromOrigin;
+      lastCourse = temp;
+
+      while (!lastCourse.equal(crsIntoEndpoint)) {
+        let time = 0;
+        if (leg.TurnDir === 'R') {
+          const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
+          const increment = delta < 0.1 ? delta : 0.1;
+          lastCourse = (lastCourse + increment).normaliseDegrees();
+          time = increment / turnRate;
+        } else {
+          const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
+          const increment = delta < 0.1 ? delta : 0.1;
+          lastCourse = (lastCourse - increment).normaliseDegrees();
+          time = increment / turnRate;
+        }
+
+        const arcFix = computeDestinationPoint(
+          {
+            latitude: line.at(-1)![1],
+            longitude: line.at(-1)![0],
+          },
+          ((speed / 3600) * time).toMetre(),
+          lastCourse
+        );
+
+        crsIntoEndpoint = getGreatCircleBearing(arcFix, targetFix);
+
+        line.push([arcFix.longitude, arcFix.latitude]);
+      }
+    }
+  }
+
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,44 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import Parser from '../parser';
+import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import { computeSpeed } from '../utils/computeSpeed';
+
+export const TerminatorsFA = (
+  leg: FATerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const refFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+  };
+  const speed = computeSpeed(leg, previousFix);
+  const crsIntoEndpoint = leg.Course.toTrue(refFix);
+
+  // Compute overfly
+  const [line, arcEnd, _lastCourse] = generateOverflyArc(crsIntoEndpoint, lastCourse, previousFix, speed, leg.TurnDir);
+  lastCourse = _lastCourse;
+
+  // Compute intercept of crs from arc end and expected altitude
+  const targetFix: NavFix = {
+    ...computeDestinationPoint(
+      arcEnd,
+      (
+        ((leg.Alt.parseAltitude() - (previousFix.altitude ?? 0)) / Parser.AC_VS) *
+        ((previousFix.speed ? previousFix.speed : Parser.AC_SPEED) / 60)
+      ).toMetre(),
+      crsIntoEndpoint
+    ),
+    name: leg.Alt,
+    isFlyOver: true,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,97 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import Parser from '../parser';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+
+// NOTE: Distance not adjusted for altitude in this demo
+export const TerminatorsFC = (
+  leg: FCTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const refFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+  };
+  const speed = computeSpeed(leg, previousFix);
+  const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+  const trackIntoEndpoint = leg.Course.toTrue(refFix);
+
+  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+
+  if (previousFix.isFlyOver) {
+    const crsIntoEndpoint = trackIntoEndpoint;
+
+    // Check if there even is an arc
+    if (!crsIntoEndpoint.equal(lastCourse)) {
+      // Turn Dir
+      if (!leg.TurnDir || leg.TurnDir === 'E') {
+        let prov = lastCourse - crsIntoEndpoint;
+        prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+        leg.TurnDir = prov > 0 ? 'L' : 'R';
+      }
+
+      // Generate arc
+      let condition = false;
+      do {
+        let time = 0;
+        if (leg.TurnDir === 'R') {
+          const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
+          const increment = delta < 0.1 ? delta : 0.1;
+          lastCourse = (lastCourse + increment).normaliseDegrees();
+          time = increment / turnRate;
+        } else {
+          const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
+          const increment = delta < 0.1 ? delta : 0.1;
+          lastCourse = (lastCourse - increment).normaliseDegrees();
+          time = increment / turnRate;
+        }
+
+        const arcFix = computeDestinationPoint(
+          {
+            latitude: line.at(-1)![1],
+            longitude: line.at(-1)![0],
+          },
+          ((speed * time) / 3600).toMetre(),
+          lastCourse
+        );
+
+        line.push([arcFix.longitude, arcFix.latitude]);
+
+        if (leg.TurnDir === 'R') {
+          condition = lastCourse > trackIntoEndpoint;
+        } else {
+          condition = lastCourse < trackIntoEndpoint;
+        }
+      } while (condition);
+    }
+  }
+
+  const arcEnd = { latitude: line.at(-1)![1], longitude: line.at(-1)![0] };
+  if (line.length > 1) {
+    lastCourse = getGreatCircleBearing(
+      {
+        latitude: line.at(-2)![1],
+        longitude: line.at(-2)![0],
+      },
+      arcEnd
+    );
+  }
+
+  const targetFix: NavFix = {
+    ...computeDestinationPoint(arcEnd, leg.Distance.toMetre(), leg.Course.toTrue(refFix)),
+    name: leg.Distance.toString(),
+    isFlyOver: true,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,57 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import { computeSpeed } from '../utils/computeSpeed';
+
+// NOTE: Distance not adjusted for altitude in this demo
+export const TerminatorsFD = (
+  leg: FDTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const refFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+  };
+  const navaid = {
+    latitude: leg.NavLat,
+    longitude: leg.NavLon,
+  };
+  const crsIntoEndpoint = leg.Course.toTrue(refFix);
+  const speed = computeSpeed(leg, previousFix);
+
+  // Compute overfly
+  const [line, arcEnd, _lastCourse] = generateOverflyArc(crsIntoEndpoint, lastCourse, previousFix, speed, leg.TurnDir);
+  lastCourse = _lastCourse;
+
+  // Compute distance to fly from arc end
+  const crsToNavaid = getGreatCircleBearing(arcEnd, navaid);
+  const distToNavaid = getPreciseDistance(arcEnd, navaid);
+  let remainingDistance = leg.Distance.toMetre();
+  // Navaid behind us
+  if (Math.abs(crsToNavaid - lastCourse) > 90) {
+    remainingDistance -= distToNavaid;
+  }
+  // Navaid in front of us
+  else {
+    // Navaid will not be passed before distance is hit
+    if (distToNavaid > remainingDistance) remainingDistance = distToNavaid - remainingDistance;
+  }
+
+  // Compute intercept of crs from arc end and distance
+  const targetFix: NavFix = {
+    ...computeDestinationPoint(arcEnd, remainingDistance, lastCourse),
+    name: leg.Distance.toString(),
+    isFlyOver: true,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,25 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import { handleTurnAtFix } from '../pathGenerators/handleTurnAtFix';
+import { computeSpeed } from '../utils/computeSpeed';
+
+export const TerminatorsFM = (
+  leg: FMTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+
+  const endpoint = computeDestinationPoint(previousFix, (10).toMetre(), leg.Course.toTrue(previousFix));
+
+  const line = handleTurnAtFix(
+    leg.Course.toTrue(previousFix),
+    leg.Course.toTrue(previousFix),
+    lastCourse,
+    previousFix,
+    endpoint,
+    speed,
+    leg.TurnDir
+  );
+
+  return [undefined, line];
+};
@@ -0,0 +1,88 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import Parser from '../parser';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+
+// NOTE: Distance is interpreted as distance and not time
+export const TerminatorsHA = (leg: HATerminalEntry, previousFix: NavFix): [NavFix?, LineSegment[]?] => {
+  const refFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+  };
+  const speed = computeSpeed(leg, previousFix);
+  const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+  const inboundCrs = leg.Course.toTrue(refFix);
+  const outboundCrs = inboundCrs.reciprocalCourse();
+
+  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+
+  // Generate top arc
+  let currentCrs = inboundCrs;
+  while (!currentCrs.equal(outboundCrs)) {
+    let time = 0;
+    if (leg.TurnDir === 'R') {
+      const delta = (outboundCrs - currentCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs + increment).normaliseDegrees();
+      time = increment / turnRate;
+    } else {
+      const delta = (currentCrs - outboundCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs - increment).normaliseDegrees();
+      time = increment / turnRate;
+    }
+
+    const arcFix = computeDestinationPoint(
+      {
+        latitude: line.at(-1)![1],
+        longitude: line.at(-1)![0],
+      },
+      ((speed / 3600) * time).toMetre(),
+      currentCrs
+    );
+
+    line.push([arcFix.longitude, arcFix.latitude]);
+  }
+
+  const outboundStart = computeDestinationPoint(
+    {
+      latitude: line.at(-1)![1],
+      longitude: line.at(-1)![0],
+    },
+    leg.Distance.toMetre(),
+    outboundCrs
+  );
+  line.push([outboundStart.longitude, outboundStart.latitude]);
+
+  // Generate bottom arc
+  currentCrs = outboundCrs;
+  while (!currentCrs.equal(inboundCrs)) {
+    let time = 0;
+    if (leg.TurnDir === 'R') {
+      const delta = (inboundCrs - currentCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs + increment).normaliseDegrees();
+      time = increment / turnRate;
+    } else {
+      const delta = (currentCrs - inboundCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs - increment).normaliseDegrees();
+      time = increment / turnRate;
+    }
+
+    const arcFix = computeDestinationPoint(
+      {
+        latitude: line.at(-1)![1],
+        longitude: line.at(-1)![0],
+      },
+      ((speed / 3600) * time).toMetre(),
+      currentCrs
+    );
+
+    line.push([arcFix.longitude, arcFix.latitude]);
+  }
+
+  line.push([refFix.longitude, refFix.latitude]);
+
+  return [refFix, line];
+};
@@ -0,0 +1,88 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import Parser from '../parser';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+
+// NOTE: Distance is interpreted as distance and not time
+export const TerminatorsHF = (leg: HFTerminalEntry, previousFix: NavFix): [NavFix?, LineSegment[]?] => {
+  const refFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+  };
+  const speed = computeSpeed(leg, previousFix);
+  const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+  const inboundCrs = leg.Course.toTrue(refFix);
+  const outboundCrs = inboundCrs.reciprocalCourse();
+
+  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+
+  // Generate top arc
+  let currentCrs = inboundCrs;
+  while (!currentCrs.equal(outboundCrs)) {
+    let time = 0;
+    if (leg.TurnDir === 'R') {
+      const delta = (outboundCrs - currentCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs + increment).normaliseDegrees();
+      time = increment / turnRate;
+    } else {
+      const delta = (currentCrs - outboundCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs - increment).normaliseDegrees();
+      time = increment / turnRate;
+    }
+
+    const arcFix = computeDestinationPoint(
+      {
+        latitude: line.at(-1)![1],
+        longitude: line.at(-1)![0],
+      },
+      ((speed / 3600) * time).toMetre(),
+      currentCrs
+    );
+
+    line.push([arcFix.longitude, arcFix.latitude]);
+  }
+
+  const outboundStart = computeDestinationPoint(
+    {
+      latitude: line.at(-1)![1],
+      longitude: line.at(-1)![0],
+    },
+    leg.Distance.toMetre(),
+    outboundCrs
+  );
+  line.push([outboundStart.longitude, outboundStart.latitude]);
+
+  // Generate bottom arc
+  currentCrs = outboundCrs;
+  while (!currentCrs.equal(inboundCrs)) {
+    let time = 0;
+    if (leg.TurnDir === 'R') {
+      const delta = (inboundCrs - currentCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs + increment).normaliseDegrees();
+      time = increment / turnRate;
+    } else {
+      const delta = (currentCrs - inboundCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs - increment).normaliseDegrees();
+      time = increment / turnRate;
+    }
+
+    const arcFix = computeDestinationPoint(
+      {
+        latitude: line.at(-1)![1],
+        longitude: line.at(-1)![0],
+      },
+      ((speed / 3600) * time).toMetre(),
+      currentCrs
+    );
+
+    line.push([arcFix.longitude, arcFix.latitude]);
+  }
+
+  line.push([refFix.longitude, refFix.latitude]);
+
+  return [refFix, line];
+};
@@ -0,0 +1,88 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import Parser from '../parser';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+
+// NOTE: Distance is interpreted as distance and not time
+export const TerminatorsHM = (leg: HMTerminalEntry, previousFix: NavFix): [NavFix?, LineSegment[]?] => {
+  const refFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+  };
+  const speed = computeSpeed(leg, previousFix);
+  const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+  const inboundCrs = leg.Course.toTrue(refFix);
+  const outboundCrs = inboundCrs.reciprocalCourse();
+
+  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+
+  // Generate top arc
+  let currentCrs = inboundCrs;
+  while (!currentCrs.equal(outboundCrs)) {
+    let time = 0;
+    if (leg.TurnDir === 'R') {
+      const delta = (outboundCrs - currentCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs + increment).normaliseDegrees();
+      time = increment / turnRate;
+    } else {
+      const delta = (currentCrs - outboundCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs - increment).normaliseDegrees();
+      time = increment / turnRate;
+    }
+
+    const arcFix = computeDestinationPoint(
+      {
+        latitude: line.at(-1)![1],
+        longitude: line.at(-1)![0],
+      },
+      ((speed / 3600) * time).toMetre(),
+      currentCrs
+    );
+
+    line.push([arcFix.longitude, arcFix.latitude]);
+  }
+
+  const outboundStart = computeDestinationPoint(
+    {
+      latitude: line.at(-1)![1],
+      longitude: line.at(-1)![0],
+    },
+    leg.Distance.toMetre(),
+    outboundCrs
+  );
+  line.push([outboundStart.longitude, outboundStart.latitude]);
+
+  // Generate bottom arc
+  currentCrs = outboundCrs;
+  while (!currentCrs.equal(inboundCrs)) {
+    let time = 0;
+    if (leg.TurnDir === 'R') {
+      const delta = (inboundCrs - currentCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs + increment).normaliseDegrees();
+      time = increment / turnRate;
+    } else {
+      const delta = (currentCrs - inboundCrs).normaliseDegrees();
+      const increment = delta < 0.1 ? delta : 0.1;
+      currentCrs = (currentCrs - increment).normaliseDegrees();
+      time = increment / turnRate;
+    }
+
+    const arcFix = computeDestinationPoint(
+      {
+        latitude: line.at(-1)![1],
+        longitude: line.at(-1)![0],
+      },
+      ((speed / 3600) * time).toMetre(),
+      currentCrs
+    );
+
+    line.push([arcFix.longitude, arcFix.latitude]);
+  }
+
+  line.push([refFix.longitude, refFix.latitude]);
+
+  return [refFix, line];
+};
@@ -0,0 +1,18 @@
+import Parser from '../parser';
+
+export const TerminatorsIF = (leg: IFTerminalEntry, waypoint?: Waypoint): NavFix => {
+  const targetFix: NavFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+    name: waypoint?.Ident ?? undefined,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : 0,
+    speed: leg.SpeedLimit ? leg.SpeedLimit : Parser.AC_SPEED,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  return targetFix;
+};
@@ -0,0 +1,72 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import { generatePerformanceArc } from '../pathGenerators/generatePerformanceArc';
+import { computeIntersection } from '../utils/computeIntersection';
+import { computeSpeed } from '../utils/computeSpeed';
+
+export const TerminatorsPI = (
+  leg: PITerminalEntry,
+  nextLeg: CFTerminalEntry, // As per NG docs in the TrmLegTypes.json
+  previousFix: NavFix,
+  waypoints: [Waypoint?, Waypoint?]
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+
+  const originFix: NavFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+    name: waypoints[0]?.Ident ?? undefined,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  const endFix: NavFix = {
+    latitude: nextLeg.WptLat,
+    longitude: nextLeg.WptLon,
+    name: waypoints[1]?.Ident ?? undefined,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  const outboundCrs = leg.Course.toTrue(endFix);
+  const interceptCrs = nextLeg.Course.toTrue(endFix);
+
+  const line: LineSegment[] = [
+    [originFix.longitude, originFix.latitude],
+    [endFix.longitude, endFix.latitude],
+  ];
+
+  // Outbound end
+  const outEnd = computeDestinationPoint(
+    endFix,
+    ((speed / 3600) * 60).toMetre(), // 1min leg
+    outboundCrs
+  );
+  line.push([outEnd.longitude, outEnd.latitude]);
+
+  // Arc
+  line.push(...generatePerformanceArc(outboundCrs.reciprocalCourse(), outboundCrs, outEnd, speed, leg.TurnDir));
+
+  // Intercept
+  const interceptFix = computeIntersection(
+    {
+      latitude: line.at(-1)![1],
+      longitude: line.at(-1)![0],
+    },
+    outboundCrs.reciprocalCourse(),
+    endFix,
+    interceptCrs.reciprocalCourse()
+  );
+
+  line.push([interceptFix!.longitude, interceptFix!.latitude]);
+  line.push([endFix!.longitude, endFix!.latitude]);
+
+  return [undefined, line];
+};
@@ -0,0 +1,35 @@
+import { generateRFArc } from '../pathGenerators/generateRFArc';
+import { computeSpeed } from '../utils/computeSpeed';
+
+// NOTE: Direct entry into an RF does not calculate a usable line, given inbound course is unknown.
+export const TerminatorsRF = (
+  leg: RFTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number,
+  waypoint?: Waypoint
+): [NavFix?, LineSegment[]?] => {
+  const targetFix: NavFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+    name: waypoint?.Ident ?? undefined,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: computeSpeed(leg, previousFix),
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  const line = generateRFArc(
+    leg.Course.toTrue(targetFix),
+    lastCourse,
+    previousFix,
+    { latitude: leg.CenterLat, longitude: leg.CenterLon },
+    leg.TurnDir
+  );
+
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,119 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import Parser from '../parser';
+import { generateTangentArc } from '../pathGenerators/generateTangentArc';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+
+export const TerminatorsTF = (
+  leg: TFTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number,
+  waypoint?: Waypoint
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+  const line: LineSegment[] = [];
+
+  const targetFix: NavFix = {
+    latitude: leg.WptLat,
+    longitude: leg.WptLon,
+    name: waypoint?.Ident ?? undefined,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  const crsIntoEndpoint = getGreatCircleBearing(previousFix, targetFix);
+
+  // Compute overfly arc
+  let arc1: LineSegment[] | null = null;
+  let arc2: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+  if (previousFix.isFlyOver) {
+    arc1 = generateTangentArc(crsIntoEndpoint, lastCourse, previousFix, targetFix, leg.TurnDir);
+  } else {
+    arc1 = [[previousFix.longitude, previousFix.latitude]];
+  }
+
+  let arc;
+  if (arc1 && arc1.length > 1) {
+    const endCrs = getGreatCircleBearing(
+      {
+        latitude: arc1.at(-1)![1],
+        longitude: arc1.at(-1)![0],
+      },
+      targetFix
+    );
+    const endDist = getPreciseDistance(
+      {
+        latitude: arc1.at(-1)![1],
+        longitude: arc1.at(-1)![0],
+      },
+      targetFix
+    );
+
+    if (endDist <= 25 || (endCrs <= crsIntoEndpoint + 1 && endCrs >= crsIntoEndpoint - 1)) arc = arc1;
+  }
+
+  if (previousFix.isFlyOver && (!lastCourse.equal(crsIntoEndpoint) || !lastCourse.equal(crsIntoEndpoint))) {
+    const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+    let updatedCrsToIntercept = getGreatCircleBearing(previousFix, targetFix);
+
+    // Turn Dir
+    if (!leg.TurnDir || leg.TurnDir === 'E') {
+      let prov = lastCourse - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      leg.TurnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    // Generate arc
+    let lastDistance = getPreciseDistance(previousFix, targetFix);
+    while (!updatedCrsToIntercept.equal(crsIntoEndpoint)) {
+      let interceptAngle = 0;
+      if (leg.TurnDir === 'R') interceptAngle = Math.abs(lastCourse - crsIntoEndpoint);
+      else interceptAngle = Math.abs(crsIntoEndpoint - lastCourse);
+
+      let time = 0;
+      const increment = 0.1;
+      if (interceptAngle < 44.9 || interceptAngle >= 45.1) {
+        if (leg.TurnDir === 'R') {
+          lastCourse = (lastCourse + increment).normaliseDegrees();
+          time = increment / turnRate;
+        } else {
+          lastCourse = (lastCourse - increment).normaliseDegrees();
+          time = increment / turnRate;
+        }
+      } else time = increment / turnRate;
+
+      const arcFix = computeDestinationPoint(
+        {
+          latitude: arc2.at(-1)![1],
+          longitude: arc2.at(-1)![0],
+        },
+        ((speed / 3600) * time).toMetre(),
+        lastCourse
+      );
+
+      arc2.push([arcFix.longitude, arcFix.latitude]);
+
+      // Update previousFix
+      previousFix.latitude = arcFix.latitude;
+      previousFix.longitude = arcFix.longitude;
+      updatedCrsToIntercept = getGreatCircleBearing(previousFix, targetFix);
+
+      const newDistance = getPreciseDistance(previousFix, targetFix);
+      if (lastDistance <= newDistance && lastDistance < 25) break;
+      lastDistance = newDistance;
+    }
+  }
+
+  if (!arc) arc = arc2;
+  line.push(...arc);
+
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,41 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import Parser from '../parser';
+import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import { computeSpeed } from '../utils/computeSpeed';
+
+// NOTE: No wind adjustments to be made, no clue how *that* would draw
+export const TerminatorsVA = (
+  leg: VATerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+  const crsIntoEndpoint = leg.Course.toTrue(previousFix);
+
+  // Compute overfly
+  const [line, arcEnd, _lastCourse] = generateOverflyArc(crsIntoEndpoint, lastCourse, previousFix, speed, leg.TurnDir);
+  lastCourse = _lastCourse;
+
+  // Compute intercept of crs from arc end and expected altitude
+  const targetFix: NavFix = {
+    ...computeDestinationPoint(
+      arcEnd,
+      (
+        ((leg.Alt.parseAltitude() - (previousFix.altitude ?? 0)) / Parser.AC_VS) *
+        ((previousFix.speed ? previousFix.speed : Parser.AC_SPEED) / 60)
+      ).toMetre(),
+      crsIntoEndpoint
+    ),
+    name: leg.Alt,
+    isFlyOver: true,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,54 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import { computeSpeed } from '../utils/computeSpeed';
+
+// NOTE: No wind adjustments to be made, no clue how *that* would draw
+// NOTE: Distance not adjusted for altitude in this demo
+export const TerminatorsVD = (
+  leg: VDTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const navaid = {
+    latitude: leg.NavLat,
+    longitude: leg.NavLon,
+  };
+  const crsIntoEndpoint = leg.Course.toTrue(previousFix);
+  const speed = computeSpeed(leg, previousFix);
+
+  // Compute overfly
+  const [line, arcEnd, _lastCourse] = generateOverflyArc(crsIntoEndpoint, lastCourse, previousFix, speed, leg.TurnDir);
+  lastCourse = _lastCourse;
+
+  // Compute distance to fly from arc end
+  const crsToNavaid = getGreatCircleBearing(arcEnd, navaid);
+  const distToNavaid = getPreciseDistance(arcEnd, navaid);
+  let remainingDistance = leg.Distance.toMetre();
+  // Navaid behind us
+  if (Math.abs(crsToNavaid - lastCourse) > 90) {
+    remainingDistance -= distToNavaid;
+  }
+  // Navaid in front of us
+  else {
+    // Navaid will not be passed before distance is hit
+    if (distToNavaid > remainingDistance) remainingDistance = distToNavaid - remainingDistance;
+  }
+
+  // Compute intercept of crs from arc end and distance
+  const targetFix: NavFix = {
+    ...computeDestinationPoint(arcEnd, remainingDistance, lastCourse),
+    name: leg.Distance.toString(),
+    isFlyOver: true,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+  line.push([targetFix.longitude, targetFix.latitude]);
+
+  return [targetFix, line];
+};
@@ -0,0 +1,79 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import Parser from '../parser';
+import { computeIntersection } from '../utils/computeIntersection';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
+import { getCourseAndFixForIntercepts } from '../utils/getCourseAndFixForIntercepts';
+
+// NOTE: No wind adjustments to be made, no clue how *that* would draw
+export const TerminatorsVI = (
+  leg: VITerminalEntry,
+  nextLeg: TerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+  const crsIntoEndpoint = leg.Course.toTrue(previousFix);
+  const [crsToIntercept, nextFix] = getCourseAndFixForIntercepts(nextLeg, previousFix);
+  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+
+  // Compute overfly arc
+  if (previousFix.isFlyOver && !lastCourse.equal(crsIntoEndpoint)) {
+    const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+    const updatedCrsToIntercept = getGreatCircleBearing(previousFix, nextFix);
+
+    // Turn Dir
+    if (!leg.TurnDir || leg.TurnDir === 'E') {
+      let prov = lastCourse - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      leg.TurnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    // Generate arc
+    while (!lastCourse.equal(crsIntoEndpoint) && !updatedCrsToIntercept.equal(crsToIntercept)) {
+      let time = 0;
+      if (leg.TurnDir === 'R') {
+        const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        lastCourse = (lastCourse + increment).normaliseDegrees();
+        time = increment / turnRate;
+      } else {
+        const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        lastCourse = (lastCourse - increment).normaliseDegrees();
+        time = increment / turnRate;
+      }
+
+      const arcFix = computeDestinationPoint(
+        {
+          latitude: line.at(-1)![1],
+          longitude: line.at(-1)![0],
+        },
+        ((speed / 3600) * time).toMetre(),
+        lastCourse
+      );
+
+      line.push([arcFix.longitude, arcFix.latitude]);
+
+      // Update previousFix
+      previousFix.latitude = arcFix.latitude;
+      previousFix.longitude = arcFix.longitude;
+    }
+  }
+
+  const interceptFix: NavFix = {
+    ...computeIntersection(previousFix, leg.Course.toTrue(nextFix), nextFix, crsToIntercept)!,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  line.push([interceptFix.longitude, interceptFix.latitude]);
+
+  return [interceptFix, line];
+};
@@ -0,0 +1,26 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import { handleTurnAtFix } from '../pathGenerators/handleTurnAtFix';
+import { computeSpeed } from '../utils/computeSpeed';
+
+// NOTE: No wind adjustments to be made, no clue how *that* would draw
+export const TerminatorsVM = (
+  leg: VMTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+
+  const endpoint = computeDestinationPoint(previousFix, (10).toMetre(), leg.Course.toTrue(previousFix));
+
+  const line = handleTurnAtFix(
+    leg.Course.toTrue(previousFix),
+    leg.Course.toTrue(previousFix),
+    lastCourse,
+    previousFix,
+    endpoint,
+    speed,
+    leg.TurnDir
+  );
+
+  return [undefined, line];
+};
@@ -0,0 +1,38 @@
+import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import { computeIntersection } from '../utils/computeIntersection';
+import { computeSpeed } from '../utils/computeSpeed';
+
+// NOTE: No wind adjustments to be made, no clue how *that* would draw
+export const TerminatorsVR = (
+  leg: VRTerminalEntry,
+  previousFix: NavFix,
+  lastCourse: number
+): [NavFix?, LineSegment[]?] => {
+  const navaid = {
+    latitude: leg.NavLat,
+    longitude: leg.NavLon,
+  };
+  const crsFromEndpoint = leg.Course.toTrue(previousFix);
+  const crsIntoEndpoint = leg.NavBear.toTrue(navaid);
+  const speed = computeSpeed(leg, previousFix);
+
+  // Compute overfly
+  const [line, arcEnd, _lastCourse] = generateOverflyArc(crsFromEndpoint, lastCourse, previousFix, speed, leg.TurnDir);
+  lastCourse = _lastCourse;
+
+  // Compute intercept of crs from arc end and radial
+  const interceptFix: NavFix = {
+    ...computeIntersection(arcEnd, crsFromEndpoint, navaid, crsIntoEndpoint)!,
+    isFlyOver: leg.IsFlyOver,
+    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
+    speed: speed,
+    speedConstraint: leg.SpeedLimit,
+    altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
+  };
+
+  line.push([interceptFix.longitude, interceptFix.latitude]);
+
+  return [interceptFix, line];
+};
@@ -0,0 +1,74 @@
+/**
+ * @param  p1 Point 1
+ * @param brng1 Bearing from Point 1
+ * @param  p2 Point 2
+ * @param brng2 bearing from Point 2
+ * @returns Intersection point
+ */
+export const computeIntersection = (
+  p1: NavFix,
+  brng1: number,
+  p2: NavFix,
+  brng2: number
+): NavFix | undefined | null => {
+  if (isNaN(brng1)) throw new TypeError(`invalid brng1 ${brng1}`);
+  if (isNaN(brng2)) throw new TypeError(`invalid brng2 ${brng2}`);
+
+  const π = Math.PI;
+
+  // see www.edwilliams.org/avform.htm#Intersection
+
+  const φ1 = p1.latitude.toRadians(),
+    λ1 = p1.longitude.toRadians();
+  const φ2 = p2.latitude.toRadians(),
+    λ2 = p2.longitude.toRadians();
+  const θ13 = Number(brng1).toRadians(),
+    θ23 = Number(brng2).toRadians();
+  const Δφ = φ2 - φ1,
+    Δλ = λ2 - λ1;
+
+  // angular distance p1-p2
+  const δ12 =
+    2 *
+    Math.asin(
+      Math.sqrt(Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2))
+    );
+  if (Math.abs(δ12) < Number.EPSILON) return p1; // coincident points
+
+  // initial/final bearings between points
+  const cosθa = (Math.sin(φ2) - Math.sin(φ1) * Math.cos(δ12)) / (Math.sin(δ12) * Math.cos(φ1));
+  const cosθb = (Math.sin(φ1) - Math.sin(φ2) * Math.cos(δ12)) / (Math.sin(δ12) * Math.cos(φ2));
+  const θa = Math.acos(Math.min(Math.max(cosθa, -1), 1)); // protect against rounding errors
+  const θb = Math.acos(Math.min(Math.max(cosθb, -1), 1)); // protect against rounding errors
+
+  const θ12 = Math.sin(λ2 - λ1) > 0 ? θa : 2 * π - θa;
+  const θ21 = Math.sin(λ2 - λ1) > 0 ? 2 * π - θb : θb;
+
+  const α1 = θ13 - θ12; // angle 2-1-3
+  const α2 = θ21 - θ23; // angle 1-2-3
+
+  if (Math.sin(α1) == 0 && Math.sin(α2) == 0) return undefined; // infinite intersections
+  if (Math.sin(α1) * Math.sin(α2) < 0) return p2; // ambiguous intersection (antipodal/360°)
+
+  const cosα3 = -Math.cos(α1) * Math.cos(α2) + Math.sin(α1) * Math.sin(α2) * Math.cos(δ12);
+
+  const δ13 = Math.atan2(Math.sin(δ12) * Math.sin(α1) * Math.sin(α2), Math.cos(α2) + Math.cos(α1) * cosα3);
+
+  const φ3 = Math.asin(
+    Math.min(Math.max(Math.sin(φ1) * Math.cos(δ13) + Math.cos(φ1) * Math.sin(δ13) * Math.cos(θ13), -1), 1)
+  );
+
+  const Δλ13 = Math.atan2(Math.sin(θ13) * Math.sin(δ13) * Math.cos(φ1), Math.cos(δ13) - Math.sin(φ1) * Math.sin(φ3));
+  const λ3 = λ1 + Δλ13;
+
+  const lat = φ3.toDegrees();
+  const lon = λ3.toDegrees();
+
+  return {
+    ...p1,
+    latitude: lat,
+    longitude: lon,
+    name: 'INTC',
+    isIntersection: true,
+  };
+};
@@ -0,0 +1,12 @@
+import Parser from '../parser';
+
+export const computeSpeed = (leg: TerminalEntry, previousFix: NavFix) => {
+  if (leg.SpeedLimit) return leg.SpeedLimit;
+  if (previousFix.speed) {
+    if (previousFix.speed < Parser.AC_SPEED) return Parser.AC_SPEED;
+
+    return previousFix.speed;
+  }
+
+  return Parser.AC_SPEED;
+};
@@ -0,0 +1,3 @@
+export const computeTurnRate = (speed: number, bank: number) => {
+  return (1091 * Math.tan(bank.toRadians())) / speed;
+};
@@ -0,0 +1,46 @@
+import { magvar } from 'magvar';
+
+Number.prototype.toRadians = function () {
+  return ((this as number) * Math.PI) / 180;
+};
+Number.prototype.toDegrees = function () {
+  return ((this as number) * 180) / Math.PI;
+};
+Number.prototype.reciprocalCourse = function () {
+  let inv = (this as number) + 180;
+  inv = inv >= 360 ? inv - 360 : inv;
+  return inv;
+};
+Number.prototype.normaliseDegrees = function () {
+  return (this as number) >= 360
+    ? (this as number) - 360
+    : (this as number) < 0
+      ? (this as number) + 360
+      : (this as number);
+};
+Number.prototype.toTrue = function (fix) {
+  const _magvar = magvar(fix.latitude, fix.longitude); //Magvar is returned + for East
+  return ((this as number) + _magvar).normaliseDegrees();
+};
+Number.prototype.toMetre = function () {
+  return (this as number) * 1852.0;
+};
+Number.prototype.equal = function (other: number) {
+  return Math.abs((this as number) - other) < 0.1;
+};
+
+String.prototype.parseAltitude = function () {
+  switch (this.length) {
+    case 5:
+      return Number.parseInt(this as string);
+    case 6:
+      return Number.parseInt(this.substring(0, 5));
+    case 12: {
+      const upper = Number.parseInt(this.substring(0, 5));
+      const lower = Number.parseInt(this.substring(6, 12));
+      return lower + (upper - lower) / 2;
+    }
+    default:
+      return -1;
+  }
+};
@@ -0,0 +1,49 @@
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+
+/**
+ * @param leg Leg to examine
+ * @param origin Origin of current leg
+ * @returns Adjusted course and fix
+ */
+export const getCourseAndFixForIntercepts = (leg: TerminalEntry, origin: NavFix): [number, NavFix] => {
+  switch (leg.TrackCode) {
+    case 'CF': {
+      const _leg = leg as CFTerminalEntry;
+      const fix = { latitude: _leg.WptLat, longitude: _leg.WptLon };
+      return [_leg.Course.reciprocalCourse().toTrue(fix), fix];
+    }
+    case 'FM': {
+      const _leg = leg as FMTerminalEntry;
+      const fix = { latitude: _leg.WptLat, longitude: _leg.WptLon };
+      return [_leg.Course.toTrue(fix), fix];
+    }
+    case 'TF': {
+      const _leg = leg as TFTerminalEntry;
+      return [
+        getGreatCircleBearing(origin, {
+          latitude: _leg.WptLat,
+          longitude: _leg.WptLon,
+        }),
+        { latitude: _leg.WptLat, longitude: _leg.WptLon },
+      ];
+    }
+    case 'AF': {
+      const _leg = leg as AFTerminalEntry;
+      const fix = { latitude: _leg.WptLat, longitude: _leg.WptLon };
+      return [_leg.Course.reciprocalCourse().toTrue(fix), fix];
+    }
+    case 'DF': {
+      const _leg = leg as DFTerminalEntry;
+      const fix = { latitude: _leg.WptLat, longitude: _leg.WptLon };
+      return [-1, fix];
+    }
+    case 'RF': {
+      const _leg = leg as RFTerminalEntry;
+      const fix = { latitude: _leg.WptLat, longitude: _leg.WptLon };
+      return [_leg.Course.toTrue(fix), fix];
+    }
+    default: {
+      return [-1, origin];
+    }
+  }
+};
@@ -0,0 +1,15 @@
+@import 'tailwindcss';
+
+@theme {
+  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
+  @keyframes fade-in-scale {
+    0% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
@@ -0,0 +1,40 @@
+export declare global {
+  interface Number {
+    /**
+     * @returns Value converted from degrees to radians
+     */
+    toRadians: () => number;
+    /**
+     * @returns Value converted from radians to degrees
+     */
+    toDegrees: () => number;
+    /**
+     * @returns Reciprocal course of value
+     */
+    reciprocalCourse: () => number;
+    /**
+     * @returns Normalises to [0,360)
+     */
+    normaliseDegrees: () => number;
+    /**
+     * @param fix Fix for magnetic declination
+     * @returns Value referencing true north
+     */
+    toTrue: (fix: { latitude: number; longitude: number }) => number;
+    /**
+     * @returns Value converted from nmi to metres
+     */
+    toMetre: () => number;
+    /**
+     * @returns True if delta is less than 0.1
+     */
+    equal: (other: number) => boolean;
+  }
+
+  interface String {
+    /**
+     * @returns Value parsed from altitude constraint
+     */
+    parseAltitude: () => number;
+  }
+}
@@ -0,0 +1,3 @@
+declare module 'geojson' {
+  export const parse: (data: object, format: object) => object;
+}
@@ -0,0 +1,9 @@
+export declare global {
+  type Chart = {
+    data: string;
+    index_number: string;
+    bounds: LatLngBoundsExpression;
+  };
+
+  type Procedure = { name: string; data: object };
+}
@@ -0,0 +1,23 @@
+import 'leaflet';
+
+declare module 'leaflet' {
+  export function shapeMarker(
+    latlng: LatLngExpression,
+    options?: PathOptions & {
+      shape?:
+        | 'diamond'
+        | 'square'
+        | 'triangle'
+        | 'triangle-up'
+        | 'triangle-down'
+        | 'arrowhead'
+        | 'arrowhead-up'
+        | 'arrowhead-down'
+        | 'circle'
+        | 'x'
+        | string;
+      radius?: number;
+      rotation?: number;
+    }
+  ): Path;
+}
@@ -0,0 +1,3 @@
+declare module 'magvar' {
+  export const magvar: (latitude: number, longitude: number) => number;
+}
@@ -0,0 +1,104 @@
+export declare global {
+  type Waypoint = {
+    ID: number;
+    Ident: string;
+  };
+
+  type Runway = {
+    ID: number;
+    AirportID: number;
+    Latitude: number;
+    Longitude: number;
+    Elevation: number;
+    Ident: string;
+    TrueHeading: number;
+  };
+
+  type TrackCode =
+    | 'AF'
+    | 'CA'
+    | 'CD'
+    | 'CF'
+    | 'CI'
+    | 'CR'
+    | 'DF'
+    | 'FA'
+    | 'FC'
+    | 'FD'
+    | 'FM'
+    | 'HA'
+    | 'HF'
+    | 'HM'
+    | 'IF'
+    | 'PI'
+    | 'RF'
+    | 'TF'
+    | 'VA'
+    | 'VD'
+    | 'VI'
+    | 'VM'
+    | 'VR';
+
+  type TurnDirection = 'E' | 'L' | 'R';
+
+  type TerminalEntry = {
+    ID: number;
+    TerminalID: number;
+    Type: string;
+    Transition: string;
+    TrackCode: TrackCode;
+    WptID?: number;
+    WptLat?: number;
+    WptLon?: number;
+    TurnDir?: TurnDirection;
+    NavID?: number;
+    NavLat?: number;
+    NavLon?: number;
+    NavBear?: number;
+    NavDist?: number;
+    Course?: number;
+    Distance?: number;
+    Alt?: string;
+    Vnav: unknown;
+    CenterID?: number;
+    CenterLat?: number;
+    CenterLon?: number;
+    IsFlyOver: boolean;
+    SpeedLimit?: number;
+    IsFAF: boolean;
+    IsMAP: boolean;
+  };
+
+  type Terminal = {
+    ID: number;
+    AirportID: number;
+    ICAO: string;
+    FullName: string;
+    RwyID?: number;
+    Proc: 1 | 2 | 3;
+  };
+
+  type NavFix = {
+    latitude: number;
+    longitude: number;
+    altitude?: number;
+    speed?: number;
+    name?: string;
+    isFlyOver?: boolean;
+    altitudeConstraint?: string;
+    speedConstraint?: number;
+    IsFAF?: boolean;
+    IsMAP?: boolean;
+    // For map
+    isIntersection?: boolean;
+  };
+
+  type LineSegment = [number, number];
+
+  type Airport = {
+    ID: number;
+    ICAO: string;
+    Latitude: number;
+    Longitude: number;
+  };
+}
@@ -0,0 +1,9 @@
+export declare global {
+  type AFTerminalEntry = Required<
+    Pick<
+      TerminalEntry,
+      'WptID' | 'WptLat' | 'WptLon' | 'TurnDir' | 'NavID' | 'NavLat' | 'NavLon' | 'NavBear' | 'NavDist' | 'Course'
+    >
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,3 @@
+export declare global {
+  type CATerminalEntry = Required<Pick<TerminalEntry, 'Course' | 'Alt'>> & TerminalEntry;
+}
@@ -0,0 +1,4 @@
+export declare global {
+  type CDTerminalEntry = Required<Pick<TerminalEntry, 'NavID' | 'NavLat' | 'NavLon' | 'Course' | 'Distance'>> &
+    TerminalEntry;
+}
@@ -0,0 +1,9 @@
+export declare global {
+  type CFTerminalEntry = Required<
+    Pick<
+      TerminalEntry,
+      'WptID' | 'WptLat' | 'WptLon' | 'NavID' | 'NavLat' | 'NavLon' | 'NavBear' | 'NavDist' | 'Course' | 'Distance'
+    >
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,3 @@
+export declare global {
+  type CITerminalEntry = Required<Pick<TerminalEntry, 'Course'>> & TerminalEntry;
+}
@@ -0,0 +1,4 @@
+export declare global {
+  type CRTerminalEntry = Required<Pick<TerminalEntry, 'NavID' | 'NavLat' | 'NavLon' | 'NavBear' | 'Course'>> &
+    TerminalEntry;
+}
@@ -0,0 +1,3 @@
+export declare global {
+  type DFTerminalEntry = Required<Pick<TerminalEntry, 'WptID' | 'WptLat' | 'WptLon' | 'IsFlyOver'>> & TerminalEntry;
+}
@@ -0,0 +1,9 @@
+export declare global {
+  type FATerminalEntry = Required<
+    Pick<
+      TerminalEntry,
+      'WptID' | 'WptLat' | 'WptLon' | 'NavID' | 'NavLat' | 'NavLon' | 'NavBear' | 'NavDist' | 'Course' | 'Alt'
+    >
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,19 @@
+export declare global {
+  type FCTerminalEntry = Required<
+    Pick<
+      TerminalEntry,
+      | 'WptID'
+      | 'WptLat'
+      | 'WptLon'
+      | 'IsFlyOver'
+      | 'NavID'
+      | 'NavLat'
+      | 'NavLon'
+      | 'NavBear'
+      | 'NavDist'
+      | 'Course'
+      | 'Distance'
+    >
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,9 @@
+export declare global {
+  type FDTerminalEntry = Required<
+    Pick<
+      TerminalEntry,
+      'WptID' | 'WptLat' | 'WptLon' | 'NavID' | 'NavLat' | 'NavLon' | 'NavBear' | 'NavDist' | 'Course' | 'Distance'
+    >
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,9 @@
+export declare global {
+  type FMTerminalEntry = Required<
+    Pick<
+      TerminalEntry,
+      'WptID' | 'WptLat' | 'WptLon' | 'NavID' | 'NavLat' | 'NavLon' | 'NavBear' | 'NavDist' | 'Course'
+    >
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,6 @@
+export declare global {
+  type HATerminalEntry = Required<
+    Pick<TerminalEntry, 'WptID' | 'WptLat' | 'WptLon' | 'TurnDir' | 'Course' | 'Distance' | 'Alt'>
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,6 @@
+export declare global {
+  type HFTerminalEntry = Required<
+    Pick<TerminalEntry, 'WptID' | 'WptLat' | 'WptLon' | 'TurnDir' | 'Course' | 'Distance'>
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,6 @@
+export declare global {
+  type HMTerminalEntry = Required<
+    Pick<TerminalEntry, 'WptID' | 'WptLat' | 'WptLon' | 'TurnDir' | 'Course' | 'Distance'>
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,3 @@
+export declare global {
+  type IFTerminalEntry = Required<Pick<TerminalEntry, 'WptID' | 'WptLat' | 'WptLon'>> & TerminalEntry;
+}
@@ -0,0 +1,19 @@
+export declare global {
+  type PITerminalEntry = Required<
+    Pick<
+      TerminalEntry,
+      | 'WptID'
+      | 'WptLat'
+      | 'WptLon'
+      | 'NavID'
+      | 'NavLat'
+      | 'NavLon'
+      | 'NavBear'
+      | 'NavDist'
+      | 'Course'
+      | 'Distance'
+      | 'Alt'
+    >
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,18 @@
+export declare global {
+  type RFTerminalEntry = Required<
+    Pick<
+      TerminalEntry,
+      | 'WptID'
+      | 'WptLat'
+      | 'WptLon'
+      | 'TurnDir'
+      | 'NavBear'
+      | 'Course'
+      | 'Distance'
+      | 'CenterID'
+      | 'CenterLat'
+      | 'CenterLon'
+    >
+  > &
+    TerminalEntry;
+}
@@ -0,0 +1,3 @@
+export declare global {
+  type TFTerminalEntry = Required<Pick<TerminalEntry, 'WptID' | 'WptLat' | 'WptLon' | 'IsFlyOver'>> & TerminalEntry;
+}
@@ -0,0 +1,3 @@
+export declare global {
+  type VATerminalEntry = Required<Pick<TerminalEntry, 'Course' | 'Alt'>> & TerminalEntry;
+}
@@ -0,0 +1,4 @@
+export declare global {
+  type VDTerminalEntry = Required<Pick<TerminalEntry, 'NavID' | 'NavLat' | 'NavLon' | 'Course' | 'Distance'>> &
+    TerminalEntry;
+}
@@ -0,0 +1,3 @@
+export declare global {
+  type VITerminalEntry = Required<Pick<TerminalEntry, 'Course'>> & TerminalEntry;
+}
@@ -0,0 +1,3 @@
+export declare global {
+  type VMTerminalEntry = Required<Pick<TerminalEntry, 'Course'>> & TerminalEntry;
+}
@@ -0,0 +1,4 @@
+export declare global {
+  type VRTerminalEntry = Required<Pick<TerminalEntry, 'NavID' | 'NavLat' | 'NavLon' | 'NavBear' | 'Course'>> &
+    TerminalEntry;
+}
@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+interface ViteTypeOptions {
+  strictImportMetaEnv: unknown;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_NG_CLIENT_ID: string;
+  readonly VITE_NG_CLIENT_SECRET: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "typeRoots": ["node_modules/@types", "src/types/**"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "typeRoots": ["node_modules/@types", "src/types/**"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "sourceMap": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,11 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  build: {
+    sourcemap: true,
+  },
+});