@elabs-ai/components-maps 4.2.0 → 5.1.0

package/dist/map-scale-bar/index.js

@@ -0,0 +1,18 @@
+"use client";
+import "../chunk-3HXFONRP.js";
+import {
+  MapScaleBar,
+  computeMapScale,
+  metresPerPixel,
+  niceDistance
+} from "../chunk-T4TJTVVA.js";
+import "../chunk-GWULZOMW.js";
+import "../chunk-W76NLFER.js";
+import "../chunk-JYFERXZT.js";
+export {
+  MapScaleBar,
+  computeMapScale,
+  metresPerPixel,
+  niceDistance
+};
+//# sourceMappingURL=index.js.map

package/dist/map-scale-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/map-scale-bar/map-scale-bar.js

@@ -0,0 +1,18 @@
+"use client";
+"use client";
+import {
+  MapScaleBar,
+  computeMapScale,
+  metresPerPixel,
+  niceDistance
+} from "../chunk-T4TJTVVA.js";
+import "../chunk-GWULZOMW.js";
+import "../chunk-W76NLFER.js";
+import "../chunk-JYFERXZT.js";
+export {
+  MapScaleBar,
+  computeMapScale,
+  metresPerPixel,
+  niceDistance
+};
+//# sourceMappingURL=map-scale-bar.js.map

package/dist/map-scale-bar/map-scale-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-maps",
-  "version": "4.2.0",
+  "version": "5.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     "maplibre-gl": "^5.15.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@elabs-ai/components-tokens": "4.2.0",
-    "@elabs-ai/components-ui": "4.2.0"
+    "@elabs-ai/components-tokens": "^5.1.0",
+    "@elabs-ai/components-ui": "^5.1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -51,9 +51,9 @@
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
     "@elabs-ai/components-eslint-config": "0.1.0",
-    "@elabs-ai/components-tokens": "4.2.0",
+    "@elabs-ai/components-tokens": "5.1.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-ui": "4.2.0"
+    "@elabs-ai/components-ui": "5.1.0"
   },
   "scripts": {
     "build": "tsup && node ../../scripts/link-dist-css.mjs",

package/src/index.ts

@@ -23,10 +23,93 @@ export * from "./map-route";
 export * from "./map-arc";
 export * from "./map-geojson";
 export * from "./map-cluster-layer";
+export * from "./map-plan-image";
+export * from "./map-plan";
+
+// Custom (non-geographic) plans: a floor plan, a factory layout, a carriage as
+// the map itself. MapLibre is Web Mercator only, so `createPlanCrs` synthesizes
+// the plan's own coordinate system on top of it — declare it once with
+// `<MapCanvas plan>` and every layer then speaks plan units.
+export {
+  createPlanCrs,
+  PLAN_MERCATOR_SPAN,
+  type PlanCrs,
+  type PlanExtent,
+  type PlanImageCoordinates,
+  type PlanPoint,
+} from "./lib/plan-crs";
+export {
+  planBoundsOfGeometry,
+  planBoundsUnion,
+  planGroupId,
+  planGroupsFromRegions,
+  planRegionCentre,
+  planRegionsFromGeoJSON,
+  type MapPlanGroup,
+  type MapPlanRegion,
+  type PlanRegionBounds,
+  type PlanRegionField,
+  type PlanRegionFields,
+} from "./lib/plan-regions";
+export {
+  usePlanProjection,
+  type PlanScreenBox,
+  type UsePlanProjectionOptions,
+} from "./lib/use-plan-projection";
+export {
+  PLAN_FILL_OPACITY,
+  PLAN_STATUS_ENCODING,
+  PLAN_STATUSES,
+  planStatusMatch,
+  type PlanDash,
+  type PlanPatternKind,
+  type PlanStatus,
+  type PlanStatusEncoding,
+} from "./lib/plan-status";
+export { createPlanPatternTile, planPatternImageId, usePlanPatterns } from "./lib/plan-patterns";
+// A plan paints its own shapes, so a consumer needs the same token seam the package
+// uses internally: WebGL cannot read CSS variables, and a paint must re-resolve when
+// the brand theme changes. Call it inside `<MapCanvas>`.
+export { useTokenColor } from "./lib/use-token-color";
+export {
+  createRouteArrowImage,
+  routeArrowImageId,
+  ROUTE_ARROW_SIZE,
+  type RouteArrowImage,
+} from "./lib/route-arrow";
+export type { MapGeoPosition, MapPlanPosition, MapPosition } from "./lib/map-position";
+
+// Locator furniture — RM-125: responsive tiers (a documented copy of the
+// `charts` helper), legend, scale bar, north arrow, inset, annotations.
+export type { MapProjectionOption } from "./map-canvas/map-canvas";
+export type { MapMarkerLabelSpec } from "./map-marker/map-marker";
+export type { MapGeoJSONPattern, MapGeoJSONVignette } from "./map-geojson/map-geojson";
+export {
+  DEFAULT_MAP_HEIGHT,
+  MAP_BREAKPOINTS,
+  MAP_BREAKPOINT_THRESHOLDS,
+  isMapResponsiveByBreakpoint,
+  mapBreakpointForWidth,
+  resolveMapResponsive,
+  useMapBreakpoint,
+  useMapResponsive,
+  type MapBreakpoint,
+  type MapHeight,
+  type MapResponsive,
+  type MapResponsiveByBreakpoint,
+} from "./lib/use-map-breakpoint";
+export * from "./map-legend";
+export * from "./map-scale-bar";
+export * from "./map-north-arrow";
+export * from "./map-inset";
+export * from "./map-annotation";
 
 // Convenience re-exports so consumers can type map work without a direct
 // maplibre-gl dependency.
 export type {
+  Coordinates,
+  FitBoundsOptions,
+  ImageSourceSpecification,
   LngLatLike,
   LngLatBoundsLike,
   StyleSpecification,

package/src/lib/arc-math.test.ts

@@ -33,6 +33,25 @@ describe("buildArcCoordinates", () => {
     expect(points.at(-1)![0]).toBeCloseTo(237.6, 5);
   });
 
+  it("keeps a plan coordinate where it was put when wrapping is off", () => {
+    // A 1600-unit-wide hall: x = 900 is a place on the floor, not a longitude.
+    // Unwrapping it to 540 would move the arc's end 360 units to the left.
+    const wrapped = buildArcCoordinates([100, 50], [900, 50], 0, 8);
+    const plan = buildArcCoordinates([100, 50], [900, 50], 0, 8, false);
+
+    expect(wrapped.at(-1)![0]).toBe(540);
+    expect(plan.at(-1)![0]).toBe(900);
+  });
+
+  it("still curves in plan space, symmetrically about the straight line", () => {
+    const points = buildArcCoordinates([0, 0], [800, 0], 0.2, 16, false);
+
+    expect(points).toHaveLength(17);
+    expect(points[0]).toEqual([0, 0]);
+    expect(points.at(-1)).toEqual([800, 0]);
+    expect(Math.abs(points[8]![1])).toBeGreaterThan(0);
+  });
+
   it("bends to the opposite side with negative curvature", () => {
     const up = buildArcCoordinates([0, 0], [20, 0], 0.2, 8);
     const down = buildArcCoordinates([0, 0], [20, 0], -0.2, 8);

package/src/lib/arc-math.ts

@@ -7,17 +7,22 @@
  * relative to the origin so arcs cross the antimeridian via the shorter
  * great-circle direction — resulting longitudes may fall outside [-180, 180],
  * which MapLibre renders correctly on the globe projection.
+ *
+ * `wrapLongitude: false` turns that unwrap off, for coordinates that are not
+ * longitudes at all: on a plan map, an x of 900 in a 1600-unit-wide hall is a
+ * position, and shifting it by 360 would move the arc's end across the floor.
  */
 export function buildArcCoordinates(
   from: [number, number],
   to: [number, number],
   curvature: number,
   samples: number,
+  wrapLongitude = true,
 ): [number, number][] {
   const [x0, y0] = from;
   const [xTo, y2] = to;
   const rawDx = xTo - x0;
-  const x2 = rawDx > 180 ? xTo - 360 : rawDx < -180 ? xTo + 360 : xTo;
+  const x2 = !wrapLongitude ? xTo : rawDx > 180 ? xTo - 360 : rawDx < -180 ? xTo + 360 : xTo;
   const dx = x2 - x0;
   const dy = y2 - y0;
   const distance = Math.hypot(dx, dy);

package/src/lib/map-position.ts

@@ -0,0 +1,77 @@
+import type { PlanCrs, PlanPoint } from "./plan-crs";
+import { warnMapOnce } from "./warn-once";
+
+/** A geographic position — the only kind an ordinary basemap understands. */
+export type MapGeoPosition = {
+  /** Longitude coordinate. */
+  longitude: number;
+  /** Latitude coordinate. */
+  latitude: number;
+  x?: never;
+  y?: never;
+};
+
+/**
+ * A position in PLAN units, for a canvas that declares a `plan` extent: metres
+ * along the hall, millimetres across the carriage, pixels into the drawing.
+ */
+export type MapPlanPosition = {
+  /** Horizontal position in plan units. */
+  x: number;
+  /** Vertical position in plan units, from the plan's own origin. */
+  y: number;
+  longitude?: never;
+  latitude?: never;
+};
+
+/**
+ * Either a geographic position or a plan one — never a mix. The `never`-typed
+ * twins make `{ longitude, x }` a type error rather than a silent winner.
+ */
+export type MapPosition = MapGeoPosition | MapPlanPosition;
+
+/**
+ * Reduce a position prop to the two scalars MapLibre wants, so every downstream
+ * effect keeps primitive dependencies.
+ */
+export function resolveMapPosition(
+  position: {
+    longitude?: number;
+    latitude?: number;
+    x?: number;
+    y?: number;
+  },
+  plan: PlanCrs | null,
+  component: string,
+): [number, number] {
+  const { longitude, latitude, x, y } = position;
+
+  if (x !== undefined && y !== undefined) {
+    if (!plan) {
+      warnMapOnce(
+        `${component}-plan-position`,
+        `<${component} x y> needs a plan coordinate system. Set \`plan\` on <MapCanvas>, or pass \`longitude\`/\`latitude\`.`,
+      );
+      return [0, 0];
+    }
+    return plan.toLngLat({ x, y });
+  }
+
+  if (longitude === undefined || latitude === undefined) {
+    warnMapOnce(
+      `${component}-missing-position`,
+      `<${component}> needs a position: \`longitude\` and \`latitude\`, or \`x\` and \`y\` on a plan.`,
+    );
+    return [0, 0];
+  }
+
+  return [longitude, latitude];
+}
+
+/** The plan point for a lng/lat, or `null` on an ordinary geographic canvas. */
+export function toPlanPoint(
+  plan: PlanCrs | null,
+  lngLat: { lng: number; lat: number },
+): PlanPoint | null {
+  return plan ? plan.toPlan([lngLat.lng, lngLat.lat]) : null;
+}

package/src/lib/merge-hover-paint.ts

@@ -1,21 +1,52 @@
+/** Per-feature paint states a layer can express through MapLibre feature-state. */
+export interface FeatureStatePaint<T> {
+  /** Applied to the feature under the cursor or keyboard focus. */
+  hover?: T;
+  /** Applied to the selected feature(s); wins over `hover`. */
+  selected?: T;
+}
+
 /**
- * Merge hover paint into base paint as MapLibre `case` expressions keyed on
- * the per-feature `hover` feature-state, so only the hovered feature changes
- * appearance.
+ * Merge hover/selected paint into base paint as MapLibre `case` expressions
+ * keyed on per-feature feature-state, so only the affected features change
+ * appearance. `selected` is tested first, so a selected feature keeps looking
+ * selected while the cursor is over it.
+ *
+ * Only paint properties that accept feature-state belong here (`fill-color`,
+ * `fill-opacity`, `line-color`, `line-width`, …). `fill-pattern` and
+ * `line-dasharray` do NOT: they read feature PROPERTIES, which is why status
+ * texture and selection are separate channels.
  */
-export function mergeHoverPaint<T extends Record<string, unknown>>(
+export function mergeFeatureStatePaint<T extends Record<string, unknown>>(
   paint: T,
-  hoverPaint: T | undefined,
+  states: FeatureStatePaint<T>,
 ): T {
-  if (!hoverPaint) return paint;
+  // Identity preserved when there is nothing to merge: callers memoize on it.
+  if (!states.hover && !states.selected) return paint;
+
   const merged: Record<string, unknown> = { ...paint };
-  for (const [key, hoverValue] of Object.entries(hoverPaint)) {
-    if (hoverValue === undefined) continue;
-    const baseValue = merged[key];
-    merged[key] =
-      baseValue === undefined
-        ? hoverValue
-        : ["case", ["boolean", ["feature-state", "hover"], false], hoverValue, baseValue];
+
+  // Applied hover-first so that `selected` ends up as the OUTER case.
+  for (const state of ["hover", "selected"] as const) {
+    const statePaint = states[state];
+    if (!statePaint) continue;
+    for (const [key, stateValue] of Object.entries(statePaint)) {
+      if (stateValue === undefined) continue;
+      const baseValue = merged[key];
+      merged[key] =
+        baseValue === undefined
+          ? stateValue
+          : ["case", ["boolean", ["feature-state", state], false], stateValue, baseValue];
+    }
   }
+
   return merged as T;
 }
+
+/** Hover-only shorthand for {@link mergeFeatureStatePaint}. */
+export function mergeHoverPaint<T extends Record<string, unknown>>(
+  paint: T,
+  hoverPaint: T | undefined,
+): T {
+  return mergeFeatureStatePaint(paint, { hover: hoverPaint });
+}

package/src/lib/plan-crs.parity.test.ts

@@ -0,0 +1,39 @@
+// @vitest-environment node
+//
+// Pins the local Web Mercator formulas to MapLibre's own `MercatorCoordinate`.
+// The engine is imported for real — no mock — which is why this runs in the node
+// environment: `maplibre-gl`'s module body calls `window.URL.createObjectURL` to
+// set up its worker, which jsdom does not implement.
+import MapLibreGL from "maplibre-gl";
+import { describe, expect, it } from "vitest";
+
+import { createPlanCrs, lngLatFromMercator, mercatorFromLngLat } from "./plan-crs";
+
+describe("Mercator parity with MapLibre", () => {
+  it("agrees with MercatorCoordinate over a lng/lat grid", () => {
+    for (let lng = -180; lng <= 180; lng += 30) {
+      for (let lat = -80; lat <= 80; lat += 20) {
+        const engine = MapLibreGL.MercatorCoordinate.fromLngLat({ lng, lat });
+        const [x, y] = mercatorFromLngLat(lng, lat);
+
+        expect(x).toBeCloseTo(engine.x, 12);
+        expect(y).toBeCloseTo(engine.y, 12);
+
+        const back = lngLatFromMercator(engine.x, engine.y);
+        expect(back[0]).toBeCloseTo(lng, 12);
+        expect(back[1]).toBeCloseTo(lat, 12);
+      }
+    }
+  });
+
+  it("agrees on the plan corners a plan map actually uses", () => {
+    const crs = createPlanCrs({ width: 1600, height: 900 });
+
+    for (const corner of crs.imageCoordinates) {
+      const engine = MapLibreGL.MercatorCoordinate.fromLngLat({ lng: corner[0], lat: corner[1] });
+
+      expect(engine.toLngLat().lng).toBeCloseTo(corner[0], 10);
+      expect(engine.toLngLat().lat).toBeCloseTo(corner[1], 10);
+    }
+  });
+});

package/src/lib/plan-crs.test.ts

@@ -0,0 +1,248 @@
+import { describe, expect, it } from "vitest";
+
+import { createPlanCrs, mercatorFromLngLat, PLAN_MERCATOR_SPAN } from "./plan-crs";
+
+/** Deterministic pseudo-random points — never `Math.random` in a test fixture. */
+function seededPoints(count: number, width: number, height: number) {
+  let seed = 1337;
+  const next = () => {
+    seed = (seed * 1664525 + 1013904223) % 4294967296;
+    return seed / 4294967296;
+  };
+  return Array.from({ length: count }, () => ({ x: next() * width, y: next() * height }));
+}
+
+const EXTENTS = [
+  { width: 1000, height: 1000 },
+  { width: 1600, height: 900 },
+  { width: 26400, height: 2900 },
+  { width: 300, height: 4000 },
+  { width: 1, height: 1 },
+];
+
+describe("createPlanCrs", () => {
+  it("puts the plan centre on lng/lat [0, 0] and its corners where they belong", () => {
+    const crs = createPlanCrs({ width: 1600, height: 900 });
+
+    // Longitudes are exact; latitudes come through `atan`/`exp`, so they are
+    // pinned to 9 decimal places rather than to the last bit.
+    expect(crs.toLngLat({ x: 800, y: 450 })).toEqual([0, 0]);
+
+    const corners = [
+      { point: { x: 0, y: 0 }, lng: -90, lat: 45.089035564831 },
+      { point: { x: 1600, y: 0 }, lng: 90, lat: 45.089035564831 },
+      { point: { x: 1600, y: 900 }, lng: 90, lat: -45.089035564831 },
+      { point: { x: 0, y: 900 }, lng: -90, lat: -45.089035564831 },
+    ];
+    for (const { point, lng, lat } of corners) {
+      const [actualLng, actualLat] = crs.toLngLat(point);
+      expect(actualLng).toBe(lng);
+      expect(actualLat).toBeCloseTo(lat, 9);
+    }
+  });
+
+  it("reads plan y downward, like an image and like Leaflet's CRS.Simple", () => {
+    const crs = createPlanCrs({ width: 1000, height: 1000 });
+    const top = crs.toLngLat({ x: 500, y: 100 });
+    const bottom = crs.toLngLat({ x: 500, y: 900 });
+
+    expect(top[1]).toBeGreaterThan(bottom[1]);
+  });
+
+  it("round-trips every point back to the plan, at every aspect ratio", () => {
+    for (const extent of EXTENTS) {
+      const crs = createPlanCrs(extent);
+      for (const point of seededPoints(100, extent.width, extent.height)) {
+        const back = crs.toPlan(crs.toLngLat(point));
+        expect(back.x).toBeCloseTo(point.x, 9);
+        expect(back.y).toBeCloseTo(point.y, 9);
+      }
+    }
+  });
+
+  it("accepts a tuple as well as a point, and a LngLat object coming back", () => {
+    const crs = createPlanCrs({ width: 1600, height: 900 });
+
+    expect(crs.toLngLat([400, 300])).toEqual(crs.toLngLat({ x: 400, y: 300 }));
+
+    const [lng, lat] = crs.toLngLat({ x: 400, y: 300 });
+    expect(crs.toPlan({ lng, lat }).x).toBeCloseTo(400, 9);
+  });
+
+  it("preserves the plan's aspect ratio exactly, in Mercator space", () => {
+    for (const { width, height } of EXTENTS) {
+      const crs = createPlanCrs({ width, height });
+      const [x0, y0] = mercatorFromLngLat(...crs.toLngLat({ x: 0, y: 0 }));
+      const [x1, y1] = mercatorFromLngLat(...crs.toLngLat({ x: width, y: height }));
+
+      expect(Math.abs(x1 - x0) / Math.abs(y1 - y0)).toBeCloseTo(width / height, 9);
+    }
+  });
+
+  it("would NOT preserve it if the plan were mapped linearly into degrees", () => {
+    // The regression test for the design decision: this is what Qlik Sense's
+    // "undefined degrees" projection does, and why this module does not.
+    const crs = createPlanCrs({ width: 1600, height: 900 });
+    const [, north] = crs.toLngLat({ x: 0, y: 0 });
+    const [, south] = crs.toLngLat({ x: 0, y: 900 });
+    const [west] = crs.toLngLat({ x: 0, y: 0 });
+    const [east] = crs.toLngLat({ x: 1600, y: 0 });
+
+    const degreeAspect = (east - west) / (north - south);
+    expect(degreeAspect).not.toBeCloseTo(1600 / 900, 2);
+    expect(degreeAspect).toBeCloseTo(1.9960506777882618, 9);
+  });
+
+  it("spans exactly PLAN_MERCATOR_SPAN on the long side, whatever the aspect", () => {
+    for (const { width, height } of EXTENTS) {
+      const crs = createPlanCrs({ width, height });
+      const [x0, y0] = mercatorFromLngLat(...crs.toLngLat({ x: 0, y: 0 }));
+      const [x1, y1] = mercatorFromLngLat(...crs.toLngLat({ x: width, y: height }));
+
+      expect(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0))).toBeCloseTo(PLAN_MERCATOR_SPAN, 9);
+      // ...and stays centred on the Mercator origin.
+      expect((x0 + x1) / 2).toBeCloseTo(0.5, 9);
+      expect((y0 + y1) / 2).toBeCloseTo(0.5, 9);
+    }
+  });
+
+  it("stays well inside Mercator's usable latitude range, even for a square plan", () => {
+    const crs = createPlanCrs({ width: 1000, height: 1000 });
+    const [, north] = crs.toLngLat({ x: 0, y: 0 });
+
+    expect(north).toBeLessThan(85.051);
+    expect(north).toBeCloseTo(66.51326044311186, 6);
+  });
+
+  it("reports bounds as [[west, south], [east, north]]", () => {
+    const crs = createPlanCrs({ width: 1600, height: 900 });
+    const [[west, south], [east, north]] = crs.bounds;
+
+    expect(west).toBeLessThan(east);
+    expect(south).toBeLessThan(north);
+    expect([west, north]).toEqual(crs.toLngLat({ x: 0, y: 0 }));
+    expect([east, south]).toEqual(crs.toLngLat({ x: 1600, y: 900 }));
+  });
+
+  it("lists image corners clockwise from the top left", () => {
+    const crs = createPlanCrs({ width: 1600, height: 900 });
+
+    expect(crs.imageCoordinates).toEqual([
+      crs.toLngLat({ x: 0, y: 0 }),
+      crs.toLngLat({ x: 1600, y: 0 }),
+      crs.toLngLat({ x: 1600, y: 900 }),
+      crs.toLngLat({ x: 0, y: 900 }),
+    ]);
+  });
+
+  it("grows maxBounds strictly outside the plan on all four sides", () => {
+    const crs = createPlanCrs({ width: 1600, height: 900 });
+    const [[west, south], [east, north]] = crs.bounds;
+    const [[padWest, padSouth], [padEast, padNorth]] = crs.maxBounds();
+
+    expect(padWest).toBeLessThan(west);
+    expect(padSouth).toBeLessThan(south);
+    expect(padEast).toBeGreaterThan(east);
+    expect(padNorth).toBeGreaterThan(north);
+  });
+
+  it("derives zoom limits from the coordinate system, not from the plan's size", () => {
+    const small = createPlanCrs({ width: 16, height: 9 });
+    const large = createPlanCrs({ width: 26400, height: 2900 });
+
+    expect(small.zoomForLongSidePixels(256)).toBe(0);
+    expect(small.zoomForLongSidePixels(512)).toBe(1);
+    expect(small.minZoom).toBe(-1);
+    expect(small.maxZoom).toBe(7);
+    expect(large.minZoom).toBe(small.minZoom);
+    expect(large.maxZoom).toBe(small.maxZoom);
+  });
+
+  it("supports a y-up plan origin for CAD exports", () => {
+    const crs = createPlanCrs({ width: 1000, height: 500, origin: "bottom-left" });
+    const [, atOrigin] = crs.toLngLat({ x: 0, y: 0 });
+    const [, atTop] = crs.toLngLat({ x: 0, y: 500 });
+
+    expect(atOrigin).toBeLessThan(atTop);
+    expect(crs.toPlan(crs.toLngLat({ x: 250, y: 125 })).y).toBeCloseTo(125, 9);
+  });
+
+  it("measures distance in plan units", () => {
+    const crs = createPlanCrs({ width: 1000, height: 1000, unit: "mm" });
+
+    expect(crs.distance({ x: 0, y: 0 }, { x: 3, y: 4 })).toBe(5);
+    expect(crs.extent.unit).toBe("mm");
+  });
+
+  it("rejects an extent that cannot describe a plan", () => {
+    expect(() => createPlanCrs({ width: 0, height: 100 })).toThrow(/finite positive/);
+    expect(() => createPlanCrs({ width: -1, height: 100 })).toThrow(/finite positive/);
+    expect(() => createPlanCrs({ width: Number.NaN, height: 100 })).toThrow(/finite positive/);
+  });
+});
+
+describe("createPlanCrs().toGeoJSON", () => {
+  const crs = createPlanCrs({ width: 1000, height: 1000 });
+  const expected = crs.toLngLat({ x: 100, y: 200 });
+
+  it("converts every geometry type, nested to any depth", () => {
+    const converted = crs.toGeoJSON({
+      type: "GeometryCollection",
+      geometries: [
+        { type: "Point", coordinates: [100, 200] },
+        { type: "MultiPoint", coordinates: [[100, 200]] },
+        { type: "LineString", coordinates: [[100, 200]] },
+        { type: "MultiLineString", coordinates: [[[100, 200]]] },
+        { type: "Polygon", coordinates: [[[100, 200]]] },
+        { type: "MultiPolygon", coordinates: [[[[100, 200]]]] },
+      ],
+    } as never) as {
+      geometries: { coordinates: unknown }[];
+    };
+
+    expect(converted.geometries.map((geometry) => geometry.coordinates)).toEqual([
+      expected,
+      [expected],
+      [expected],
+      [[expected]],
+      [[expected]],
+      [[[expected]]],
+    ]);
+  });
+
+  it("keeps feature ids and properties, and drops a plan-unit bbox", () => {
+    const converted = crs.toGeoJSON({
+      type: "FeatureCollection",
+      bbox: [0, 0, 1000, 1000],
+      features: [
+        {
+          type: "Feature",
+          id: "room-1",
+          bbox: [0, 0, 100, 100],
+          properties: { name: "Studio", seats: 8 },
+          geometry: { type: "Point", coordinates: [100, 200] },
+        },
+      ],
+    } as never) as {
+      bbox?: unknown;
+      features: { id: string; bbox?: unknown; properties: unknown; geometry: unknown }[];
+    };
+
+    expect(converted.bbox).toBeUndefined();
+    expect(converted.features).toEqual([
+      {
+        type: "Feature",
+        id: "room-1",
+        properties: { name: "Studio", seats: 8 },
+        geometry: { type: "Point", coordinates: expected },
+      },
+    ]);
+  });
+
+  it("leaves the caller's data untouched", () => {
+    const input = { type: "Point", coordinates: [100, 200] };
+    crs.toGeoJSON(input as never);
+
+    expect(input.coordinates).toEqual([100, 200]);
+  });
+});