Extract @trails-cool/map-core package from Planner

New renderer-agnostic package with zero dependencies:
- Tile configs (base layers, overlay layers)
- Color palettes (surface, highway, smoothness, tracktype, cycleway,
  bikeroute, elevation, maxspeed) — 8 color maps + 3 color functions
- POI category definitions (9 categories with Overpass queries, icons,
  colors, profile mappings)
- Z-index layering constants
- Snap distance constant

Updated 15 consuming files to import from @trails-cool/map-core.
Deleted poi-categories.ts and z-index.ts from the Planner (fully moved).
packages/map re-exports tile configs from map-core for backwards compat.

All 117 tests pass, no user-facing changes.

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

apps/planner/app/components/ColoredRoute.tsx

@@ -1,6 +1,15 @@
 import { useMemo } from "react";
 import { Polyline } from "react-leaflet";
 import type L from "leaflet";
+import {
+  SURFACE_COLORS, DEFAULT_SURFACE_COLOR,
+  HIGHWAY_COLORS, DEFAULT_HIGHWAY_COLOR,
+  SMOOTHNESS_COLORS, DEFAULT_SMOOTHNESS_COLOR,
+  TRACKTYPE_COLORS, DEFAULT_TRACKTYPE_COLOR,
+  CYCLEWAY_COLORS, DEFAULT_CYCLEWAY_COLOR,
+  BIKEROUTE_COLORS, DEFAULT_BIKEROUTE_COLOR,
+  elevationColor, routeGradeColor, maxspeedColor,
+} from "@trails-cool/map-core";
 
 export type ColorMode = "plain" | "elevation" | "surface" | "grade" | "highway" | "maxspeed" | "smoothness" | "tracktype" | "cycleway" | "bikeroute";
 
@@ -16,135 +25,6 @@ interface ColoredRouteProps {
   bikeroutes?: string[];
 }
 
-const SURFACE_COLORS: Record<string, string> = {
-  asphalt: "#6b7280",
-  concrete: "#9ca3af",
-  paved: "#6b7280",
-  paving_stones: "#78716c",
-  cobblestone: "#a8a29e",
-  gravel: "#92400e",
-  compacted: "#b45309",
-  "fine_gravel": "#d97706",
-  ground: "#65a30d",
-  dirt: "#84cc16",
-  grass: "#22c55e",
-  sand: "#fbbf24",
-  mud: "#713f12",
-  wood: "#a16207",
-  unpaved: "#ca8a04",
-  path: "#16a34a",
-  track: "#ea580c",
-};
-
-const DEFAULT_SURFACE_COLOR = "#9ca3af";
-
-const HIGHWAY_COLORS: Record<string, string> = {
-  // Major roads — warm tones (caution for cyclists)
-  motorway: "#dc2626",
-  motorway_link: "#dc2626",
-  trunk: "#ea580c",
-  trunk_link: "#ea580c",
-  primary: "#f97316",
-  primary_link: "#f97316",
-  // Urban roads — neutral tones
-  secondary: "#6366f1",
-  secondary_link: "#6366f1",
-  tertiary: "#818cf8",
-  tertiary_link: "#818cf8",
-  residential: "#6b7280",
-  unclassified: "#9ca3af",
-  living_street: "#a78bfa",
-  // Paths & cycling infrastructure — green tones
-  cycleway: "#16a34a",
-  path: "#22c55e",
-  footway: "#4ade80",
-  track: "#65a30d",
-  bridleway: "#84cc16",
-  // Service & other — muted tones
-  service: "#d4d4d8",
-  pedestrian: "#c084fc",
-  steps: "#f472b6",
-};
-
-const DEFAULT_HIGHWAY_COLOR = "#9ca3af";
-
-const SMOOTHNESS_COLORS: Record<string, string> = {
-  excellent: "#22c55e",
-  good: "#16a34a",
-  intermediate: "#eab308",
-  bad: "#f97316",
-  very_bad: "#ef4444",
-  horrible: "#991b1b",
-  very_horrible: "#7f1d1d",
-  impassable: "#450a0a",
-};
-
-const DEFAULT_SMOOTHNESS_COLOR = "#9ca3af";
-
-const TRACKTYPE_COLORS: Record<string, string> = {
-  grade1: "#22c55e",
-  grade2: "#84cc16",
-  grade3: "#eab308",
-  grade4: "#f97316",
-  grade5: "#ef4444",
-};
-
-const DEFAULT_TRACKTYPE_COLOR = "#9ca3af";
-
-const CYCLEWAY_COLORS: Record<string, string> = {
-  track: "#22c55e",
-  lane: "#84cc16",
-  shared_lane: "#eab308",
-  share_busway: "#f97316",
-  opposite_lane: "#818cf8",
-  separate: "#16a34a",
-  no: "#ef4444",
-};
-
-const DEFAULT_CYCLEWAY_COLOR = "#9ca3af";
-
-const BIKEROUTE_COLORS: Record<string, string> = {
-  icn: "#7c3aed",    // purple — international
-  ncn: "#2563eb",    // blue — national
-  rcn: "#0891b2",    // teal — regional
-  lcn: "#059669",    // emerald — local
-  none: "#d4d4d8",   // gray — no route
-};
-
-const DEFAULT_BIKEROUTE_COLOR = "#d4d4d8";
-
-export function routeGradeColor(grade: number): string {
-  const absGrade = Math.abs(grade);
-  if (absGrade < 3) return "#22c55e";
-  if (absGrade < 6) return "#eab308";
-  if (absGrade < 10) return "#f97316";
-  if (absGrade < 15) return "#ef4444";
-  return "#991b1b";
-}
-
-export function elevationColor(t: number): string {
-  // green (0) → yellow (0.5) → red (1)
-  if (t <= 0.5) {
-    const r = Math.round(255 * (t * 2));
-    return `rgb(${r}, 200, 50)`;
-  }
-  const g = Math.round(200 * (1 - (t - 0.5) * 2));
-  return `rgb(255, ${g}, 50)`;
-}
-
-export function maxspeedColor(speed: string): string {
-  if (speed === "walk") return "#22c55e";
-  if (speed === "none") return "#991b1b";
-  const num = parseInt(speed, 10);
-  if (isNaN(num)) return "#9ca3af"; // unknown/gray
-  if (num <= 20) return "#22c55e";
-  if (num <= 30) return "#22c55e";
-  if (num <= 50) return "#eab308";
-  if (num <= 70) return "#f97316";
-  if (num <= 100) return "#ef4444";
-  return "#991b1b"; // >100 dark red
-}
-
 export function ColoredRoute({ coordinates, colorMode, surfaces, highways, maxspeeds, smoothnesses, tracktypes, cycleways, bikeroutes }: ColoredRouteProps) {
   const segments = useMemo(() => {
     if (colorMode === "plain" || coordinates.length < 2) {
@@ -356,11 +236,3 @@ export function findSegmentForPoint(
   return 0;
 }
 
-export {
-  SURFACE_COLORS, DEFAULT_SURFACE_COLOR,
-  HIGHWAY_COLORS, DEFAULT_HIGHWAY_COLOR,
-  SMOOTHNESS_COLORS, DEFAULT_SMOOTHNESS_COLOR,
-  TRACKTYPE_COLORS, DEFAULT_TRACKTYPE_COLOR,
-  CYCLEWAY_COLORS, DEFAULT_CYCLEWAY_COLOR,
-  BIKEROUTE_COLORS, DEFAULT_BIKEROUTE_COLOR,
-};

apps/planner/app/components/ElevationChart.tsx

@@ -10,8 +10,8 @@ import {
   TRACKTYPE_COLORS, DEFAULT_TRACKTYPE_COLOR,
   CYCLEWAY_COLORS, DEFAULT_CYCLEWAY_COLOR,
   BIKEROUTE_COLORS, DEFAULT_BIKEROUTE_COLOR,
-  type ColorMode,
-} from "~/components/ColoredRoute";
+} from "@trails-cool/map-core";
+import type { ColorMode } from "~/components/ColoredRoute";
 
 function gradeColor(grade: number): string {
   const absGrade = Math.abs(grade);

apps/planner/app/components/PlannerMap.tsx

@@ -13,7 +13,7 @@ import { usePois } from "~/lib/use-pois";
 import { useProfileDefaults } from "~/lib/use-profile-defaults";
 import { useYjsPoiSync } from "~/lib/use-yjs-poi-sync";
 import { snapToPoi } from "~/lib/poi-snap";
-import { Z_CURSOR, Z_WAYPOINT, Z_WAYPOINT_HIGHLIGHTED, Z_HIGHLIGHT } from "~/lib/z-index";
+import { Z_CURSOR, Z_WAYPOINT, Z_WAYPOINT_HIGHLIGHTED, Z_HIGHLIGHT } from "@trails-cool/map-core";
 import { NoGoAreaLayer } from "./NoGoAreaLayer";
 import { ColoredRoute, findSegmentForPoint, type ColorMode } from "./ColoredRoute";
 import { RouteInteraction } from "./RouteInteraction";

apps/planner/app/components/PoiPanel.tsx

@@ -2,9 +2,8 @@ import { useState, useEffect, useRef } from "react";
 import L from "leaflet";
 import { useTranslation } from "react-i18next";
 import { useMap } from "react-leaflet";
-import { poiCategories } from "~/lib/poi-categories";
+import { poiCategories, Z_POI_MARKER } from "@trails-cool/map-core";
 import type { PoiState } from "~/lib/use-pois";
-import { Z_POI_MARKER } from "~/lib/z-index";
 import "leaflet.markercluster/dist/MarkerCluster.css";
 import "leaflet.markercluster/dist/MarkerCluster.Default.css";
 

apps/planner/app/components/RouteInteraction.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useCallback } from "react";
 import { useMap } from "react-leaflet";
 import L from "leaflet";
-import { Z_GHOST_WAYPOINT } from "~/lib/z-index";
+import { Z_GHOST_WAYPOINT } from "@trails-cool/map-core";
 
 interface RouteInteractionProps {
   coordinates: [number, number, number][]; // [lon, lat, ele]

apps/planner/app/lib/overpass.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { buildQuery, parseResponse, deduplicateById, type Poi } from "./overpass.ts";
-import { poiCategories } from "./poi-categories.ts";
+import { poiCategories } from "@trails-cool/map-core";
 
 describe("buildQuery", () => {
   it("builds Overpass QL with bbox and category union", () => {

apps/planner/app/lib/overpass.ts

@@ -1,4 +1,4 @@
-import type { PoiCategory } from "./poi-categories.ts";
+import type { PoiCategory } from "@trails-cool/map-core";
 
 const OVERPASS_ENDPOINTS = [
   "https://overpass.kumi.systems/api/interpreter",

apps/planner/app/lib/poi-categories.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { getCategoriesForProfile, profileOverlayDefaults, poiCategories } from "./poi-categories.ts";
+import { getCategoriesForProfile, profileOverlayDefaults, poiCategories } from "@trails-cool/map-core";
 
 describe("getCategoriesForProfile", () => {
   it("returns bike infra for cycling profiles", () => {

apps/planner/app/lib/poi-categories.ts

@@ -1,90 +0,0 @@
-export interface PoiCategory {
-  id: string;
-  name: string;
-  icon: string;
-  color: string;
-  query: string;
-  profiles?: string[];
-}
-
-export const poiCategories: PoiCategory[] = [
-  {
-    id: "drinking_water",
-    name: "poi.drinkingWater",
-    icon: "💧",
-    color: "#2563eb",
-    query: 'nwr["amenity"="drinking_water"];nwr["amenity"="water_point"];',
-  },
-  {
-    id: "shelter",
-    name: "poi.shelter",
-    icon: "🛖",
-    color: "#8B6D3A",
-    query: 'nwr["amenity"="shelter"];nwr["tourism"="wilderness_hut"];',
-    profiles: ["trekking"],
-  },
-  {
-    id: "camping",
-    name: "poi.camping",
-    icon: "⛺",
-    color: "#059669",
-    query: 'nwr["tourism"="camp_site"];nwr["tourism"="caravan_site"];',
-  },
-  {
-    id: "food",
-    name: "poi.food",
-    icon: "🍽️",
-    color: "#dc2626",
-    query: 'nwr["amenity"="restaurant"];nwr["amenity"="cafe"];nwr["amenity"="fast_food"];nwr["amenity"="pub"];nwr["amenity"="biergarten"];',
-  },
-  {
-    id: "groceries",
-    name: "poi.groceries",
-    icon: "🛒",
-    color: "#f97316",
-    query: 'nwr["shop"="supermarket"];nwr["shop"="convenience"];nwr["shop"="bakery"];',
-  },
-  {
-    id: "bike_infra",
-    name: "poi.bikeInfra",
-    icon: "🔧",
-    color: "#8b5cf6",
-    query: 'nwr["amenity"="bicycle_parking"];nwr["amenity"="bicycle_repair_station"];nwr["amenity"="bicycle_rental"];',
-    profiles: ["fastbike", "safety"],
-  },
-  {
-    id: "accommodation",
-    name: "poi.accommodation",
-    icon: "🏨",
-    color: "#0891b2",
-    query: 'nwr["tourism"="hotel"];nwr["tourism"="hostel"];nwr["tourism"="guest_house"];',
-  },
-  {
-    id: "viewpoints",
-    name: "poi.viewpoints",
-    icon: "👁️",
-    color: "#9333ea",
-    query: 'nwr["tourism"="viewpoint"];',
-    profiles: ["trekking"],
-  },
-  {
-    id: "toilets",
-    name: "poi.toilets",
-    icon: "🚻",
-    color: "#6b7280",
-    query: 'nwr["amenity"="toilets"];',
-  },
-];
-
-export function getCategoriesForProfile(profile: string): string[] {
-  return poiCategories
-    .filter((c) => c.profiles?.includes(profile))
-    .map((c) => c.id);
-}
-
-/** Profile → tile overlay mapping */
-export const profileOverlayDefaults: Record<string, string[]> = {
-  fastbike: ["waymarked-cycling"],
-  safety: ["waymarked-cycling"],
-  trekking: ["waymarked-hiking"],
-};

apps/planner/app/lib/poi-snap.ts

@@ -1,6 +1,5 @@
 import type { Poi } from "./overpass.ts";
-
-const SNAP_DISTANCE_METERS = 50;
+import { SNAP_DISTANCE_METERS } from "@trails-cool/map-core";
 
 export interface SnapResult {
   lat: number;

apps/planner/app/lib/use-pois.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { queryPois, OverpassRateLimitError, type Poi, type BBox } from "./overpass.ts";
 import { getCached, setCached } from "./poi-cache.ts";
-import { poiCategories } from "./poi-categories.ts";
+import { poiCategories } from "@trails-cool/map-core";
 
 const MIN_ZOOM = 10;
 const DEBOUNCE_MS = 800;

apps/planner/app/lib/use-profile-defaults.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import type { YjsState } from "./use-yjs.ts";
 import type { PoiState } from "./use-pois.ts";
-import { getCategoriesForProfile } from "./poi-categories.ts";
+import { getCategoriesForProfile } from "@trails-cool/map-core";
 
 /**
  * Auto-enable relevant POI categories when the routing profile changes.

apps/planner/app/lib/z-index.ts

@@ -1,13 +0,0 @@
-/**
- * Leaflet marker z-index offsets for consistent layering.
- * Higher values render on top of lower values.
- *
- * Rendering order (bottom to top):
- *   POI markers → cursor markers → ghost waypoint → waypoint markers → highlight dot
- */
-export const Z_CURSOR = -1000;
-export const Z_GHOST_WAYPOINT = -100;
-export const Z_WAYPOINT = 1000;
-export const Z_POI_MARKER = 900;
-export const Z_WAYPOINT_HIGHLIGHTED = 1600;
-export const Z_HIGHLIGHT = 2000;

apps/planner/package.json

@@ -24,6 +24,7 @@
     "@trails-cool/gpx": "workspace:*",
     "@trails-cool/i18n": "workspace:*",
     "@trails-cool/map": "workspace:*",
+    "@trails-cool/map-core": "workspace:*",
     "@trails-cool/types": "workspace:*",
     "@trails-cool/ui": "workspace:*",
     "codemirror": "^6.0.2",