Add split export: Export Route vs Export Plan

Split button with default "Export GPX" (track only) and dropdown:
- Export Route: clean track for use in any app
- Export Plan: track + waypoints + no-go areas in GPX extensions
  (trails:planning namespace) for reimporting into the planner

Also:
- Add no-go area serialization to generateGpx (GPX extensions)
- Parse no-go areas from GPX extensions on import
- Initialize no-go areas in Yjs session from imported GPX
- Save to Journal now exports track only (consistent with Export Route)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/planner/app/components/ExportButton.tsx

@@ -1,60 +1,110 @@
-import { useCallback } from "react";
+import { useCallback, useState, useRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import * as Y from "yjs";
 import type { YjsState } from "~/lib/use-yjs";
 import { generateGpx } from "@trails-cool/gpx";
-import type { TrackPoint } from "@trails-cool/gpx";
+import type { TrackPoint, NoGoArea } from "@trails-cool/gpx";
+
+function getTracks(yjs: YjsState): TrackPoint[][] {
+  const geojsonStr = yjs.routeData.get("geojson") as string | undefined;
+  if (!geojsonStr) return [];
+  try {
+    const geojson = JSON.parse(geojsonStr);
+    const coords: number[][] = geojson.features?.[0]?.geometry?.coordinates ?? [];
+    if (coords.length > 0) {
+      return [coords.map((c) => ({ lat: c[1]!, lon: c[0]!, ele: c[2] }))];
+    }
+  } catch { /* invalid geojson */ }
+  return [];
+}
+
+function getWaypoints(yjs: YjsState) {
+  return yjs.waypoints.toArray().map((yMap: Y.Map<unknown>) => ({
+    lat: yMap.get("lat") as number,
+    lon: yMap.get("lon") as number,
+    name: yMap.get("name") as string | undefined,
+  }));
+}
+
+function getNoGoAreas(yjs: YjsState): NoGoArea[] {
+  return yjs.noGoAreas.toArray().map((yMap: Y.Map<unknown>) => ({
+    points: (yMap.get("points") as Array<{ lat: number; lon: number }>) ?? [],
+  })).filter((a) => a.points.length >= 3);
+}
+
+function download(gpx: string, filename: string) {
+  const blob = new Blob([gpx], { type: "application/gpx+xml" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
 
 export function ExportButton({ yjs }: { yjs: YjsState }) {
   const { t } = useTranslation("planner");
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
 
-  const handleExport = useCallback(() => {
-    // Get waypoints from Yjs
-    const waypoints = yjs.waypoints.toArray().map((yMap: Y.Map<unknown>) => ({
-      lat: yMap.get("lat") as number,
-      lon: yMap.get("lon") as number,
-      name: yMap.get("name") as string | undefined,
-    }));
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("click", handler);
+    return () => document.removeEventListener("click", handler);
+  }, [open]);
 
-    // Get route track from GeoJSON
-    let tracks: TrackPoint[][] = [];
-    const geojsonStr = yjs.routeData.get("geojson") as string | undefined;
-    if (geojsonStr) {
-      try {
-        const geojson = JSON.parse(geojsonStr);
-        const coords: number[][] = geojson.features?.[0]?.geometry?.coordinates ?? [];
-        if (coords.length > 0) {
-          tracks = [
-            coords.map((c) => ({
-              lat: c[1]!,
-              lon: c[0]!,
-              ele: c[2],
-            })),
-          ];
-        }
-      } catch {
-        // Invalid GeoJSON
-      }
-    }
+  const handleExportRoute = useCallback(() => {
+    const tracks = getTracks(yjs);
+    const gpx = generateGpx({ name: "trails.cool route", waypoints: [], tracks });
+    download(gpx, "route.gpx");
+    setOpen(false);
+  }, [yjs]);
 
-    const gpx = generateGpx({ name: "trails.cool route", waypoints, tracks });
-
-    // Download
-    const blob = new Blob([gpx], { type: "application/gpx+xml" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "route.gpx";
-    a.click();
-    URL.revokeObjectURL(url);
-  }, [yjs.waypoints, yjs.routeData]);
+  const handleExportPlan = useCallback(() => {
+    const tracks = getTracks(yjs);
+    const waypoints = getWaypoints(yjs);
+    const noGoAreas = getNoGoAreas(yjs);
+    const gpx = generateGpx({ name: "trails.cool route", waypoints, tracks, noGoAreas });
+    download(gpx, "route-plan.gpx");
+    setOpen(false);
+  }, [yjs]);
 
   return (
-    <button
-      onClick={handleExport}
-      className="rounded bg-gray-100 px-3 py-1 text-sm text-gray-700 hover:bg-gray-200"
-    >
-      {t("exportGpx")}
-    </button>
+    <div ref={ref} className="relative">
+      <div className="flex">
+        <button
+          onClick={handleExportRoute}
+          className="rounded-l bg-gray-100 px-3 py-1 text-sm text-gray-700 hover:bg-gray-200"
+        >
+          {t("exportGpx")}
+        </button>
+        <button
+          onClick={() => setOpen((v) => !v)}
+          className="rounded-r border-l border-gray-300 bg-gray-100 px-1.5 py-1 text-sm text-gray-700 hover:bg-gray-200"
+        >
+          ▾
+        </button>
+      </div>
+      {open && (
+        <div className="absolute right-0 top-full z-50 mt-1 w-44 rounded border border-gray-200 bg-white py-1 shadow-lg">
+          <button
+            onClick={handleExportRoute}
+            className="block w-full px-3 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100"
+          >
+            {t("exportRoute")}
+          </button>
+          <button
+            onClick={handleExportPlan}
+            className="block w-full px-3 py-1.5 text-left text-sm text-gray-700 hover:bg-gray-100"
+          >
+            {t("exportPlan")}
+          </button>
+        </div>
+      )}
+    </div>
   );
 }

apps/planner/app/components/SaveToJournalButton.tsx

@@ -23,13 +23,7 @@ export function SaveToJournalButton({ yjs, callbackUrl, callbackToken, returnUrl
     setError(null);
 
     try {
-      // Build GPX from current Yjs state
-      const waypoints = yjs.waypoints.toArray().map((yMap: Y.Map<unknown>) => ({
-        lat: yMap.get("lat") as number,
-        lon: yMap.get("lon") as number,
-        name: yMap.get("name") as string | undefined,
-      }));
-
+      // Build GPX from computed track (not editing waypoints).
       let tracks: TrackPoint[][] = [];
       const geojsonStr = yjs.routeData.get("geojson") as string | undefined;
       if (geojsonStr) {
@@ -42,7 +36,7 @@ export function SaveToJournalButton({ yjs, callbackUrl, callbackToken, returnUrl
         } catch { /* invalid geojson */ }
       }
 
-      const gpx = generateGpx({ name: "trails.cool route", waypoints, tracks });
+      const gpx = generateGpx({ name: "trails.cool route", waypoints: [], tracks });
 
       // POST to Journal callback
       const response = await fetch(callbackUrl, {

apps/planner/app/lib/sessions.ts

@@ -90,6 +90,22 @@ export function initializeSessionWithWaypoints(
   });
 }
 
+export function initializeSessionWithNoGoAreas(
+  sessionId: string,
+  noGoAreas: Array<{ points: Array<{ lat: number; lon: number }> }>,
+): void {
+  const doc = getOrCreateDoc(sessionId);
+  const yNoGoAreas = doc.getArray("noGoAreas");
+
+  doc.transact(() => {
+    for (const area of noGoAreas) {
+      const yMap = new Y.Map();
+      yMap.set("points", area.points);
+      yNoGoAreas.push([yMap]);
+    }
+  });
+}
+
 export async function listSessions(): Promise<SessionMetadata[]> {
   return getDb()
     .select()

apps/planner/app/routes/api.sessions.ts

@@ -1,6 +1,6 @@
 import { data } from "react-router";
 import type { Route } from "./+types/api.sessions";
-import { createSession, listSessions } from "~/lib/sessions";
+import { createSession, listSessions, initializeSessionWithNoGoAreas } from "~/lib/sessions";
 import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx";
 import { withDb } from "@trails-cool/db";
 
@@ -25,6 +25,9 @@ export async function action({ request }: Route.ActionArgs) {
         const gpxData = await parseGpxAsync(gpx);
         const wps = extractWaypoints(gpxData);
         if (wps.length > 0) initialWaypoints = wps;
+        if (gpxData.noGoAreas.length > 0) {
+          initializeSessionWithNoGoAreas(session.id, gpxData.noGoAreas);
+        }
       } catch {
         // Continue with empty session if GPX is invalid
       }

apps/planner/app/routes/new.tsx

@@ -1,6 +1,6 @@
 import { redirect, data } from "react-router";
 import type { Route } from "./+types/new";
-import { createSession, initializeSessionWithWaypoints } from "~/lib/sessions";
+import { createSession, initializeSessionWithWaypoints, initializeSessionWithNoGoAreas } from "~/lib/sessions";
 import { parseGpxAsync, extractWaypoints } from "@trails-cool/gpx";
 import { checkRateLimit } from "~/lib/rate-limit";
 
@@ -37,6 +37,9 @@ export async function loader({ request }: Route.LoaderArgs) {
       const gpx = decodeURIComponent(gpxEncoded);
       const gpxData = await parseGpxAsync(gpx);
       initializeSessionWithWaypoints(session.id, extractWaypoints(gpxData));
+      if (gpxData.noGoAreas.length > 0) {
+        initializeSessionWithNoGoAreas(session.id, gpxData.noGoAreas);
+      }
     } catch {
       // Continue with empty session if GPX is invalid
     }