Add per-day map coloring and remaining unit tests

- RouteMapThumbnail: Color route segments per day with alternating colors
  when dayBreaks are present, pass through from route detail page
- overnight.test.ts: 6 tests for isOvernight/setOvernight with Y.Doc
- daybreaks-extraction.test.ts: 3 tests for GPX → dayBreaks index extraction

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

apps/journal/app/components/RouteMapThumbnail.client.tsx

@@ -19,13 +19,16 @@ function FitBounds({ data }: { data: GeoJsonObject }) {
   return null;
 }
 
+const DAY_COLORS = ["#2563eb", "#8B6D3A", "#059669", "#9333ea", "#dc2626", "#0891b2"];
+
 interface RouteMapProps {
   geojson: string;
   interactive?: boolean;
   className?: string;
+  dayBreaks?: number[];
 }
 
-export function RouteMapThumbnail({ geojson, interactive, className }: RouteMapProps) {
+export function RouteMapThumbnail({ geojson, interactive, className, dayBreaks }: RouteMapProps) {
   const data: GeoJsonObject = JSON.parse(geojson);
 
   return (
@@ -44,8 +47,59 @@ export function RouteMapThumbnail({ geojson, interactive, className }: RouteMapP
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         attribution={interactive ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' : undefined}
       />
-      <GeoJSON data={data} style={{ color: "#2563eb", weight: 3, opacity: 0.8 }} />
+      {dayBreaks && dayBreaks.length > 0 ? (
+        <DayColoredRoute data={data} dayBreaks={dayBreaks} />
+      ) : (
+        <GeoJSON data={data} style={{ color: "#2563eb", weight: 3, opacity: 0.8 }} />
+      )}
       <FitBounds data={data} />
     </MapContainer>
   );
 }
+
+function DayColoredRoute({ data, dayBreaks }: { data: GeoJsonObject; dayBreaks: number[] }) {
+  // Extract coordinates from the GeoJSON LineString
+  const geometry = (data as { type: string; coordinates?: number[][] }).coordinates
+    ?? ((data as { features?: Array<{ geometry: { coordinates: number[][] } }> }).features?.[0]?.geometry?.coordinates);
+
+  if (!geometry || geometry.length < 2) {
+    return <GeoJSON data={data} style={{ color: "#2563eb", weight: 3, opacity: 0.8 }} />;
+  }
+
+  // Split coordinates into segments at approximate day break points
+  // dayBreaks are waypoint indices — we split the line evenly since we don't
+  // have exact waypoint-to-coordinate mapping in the Journal context
+  const totalPoints = geometry.length;
+  const numDays = dayBreaks.length + 1;
+  const pointsPerDay = Math.ceil(totalPoints / numDays);
+
+  const segments: Array<{ coords: number[][]; color: string }> = [];
+  for (let d = 0; d < numDays; d++) {
+    const start = d * pointsPerDay;
+    const end = Math.min((d + 1) * pointsPerDay + 1, totalPoints);
+    if (start >= totalPoints) break;
+    segments.push({
+      coords: geometry.slice(start, end),
+      color: DAY_COLORS[d % DAY_COLORS.length]!,
+    });
+  }
+
+  return (
+    <>
+      {segments.map((seg, i) => {
+        const segData: GeoJsonObject = {
+          type: "Feature",
+          geometry: { type: "LineString", coordinates: seg.coords },
+          properties: {},
+        } as unknown as GeoJsonObject;
+        return (
+          <GeoJSON
+            key={i}
+            data={segData}
+            style={{ color: seg.color, weight: 3, opacity: 0.8 }}
+          />
+        );
+      })}
+    </>
+  );
+}

apps/journal/app/routes/routes.$id.tsx

@@ -202,7 +202,7 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
 
       {route.geojson && (
         <div className="mt-6 overflow-hidden rounded-lg border border-gray-200" style={{ height: 400 }}>
-          <ClientMap geojson={route.geojson} interactive className="h-full w-full" />
+          <ClientMap geojson={route.geojson} interactive className="h-full w-full" dayBreaks={route.dayBreaks.length > 0 ? route.dayBreaks : undefined} />
         </div>
       )}