Use more refactored helpers

web/src/About.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Modal } from "svelte-utils";
-  import { notNull } from "./common";
+  import { notNull, Modal } from "svelte-utils";
   import { showAbout } from "./stores";
 </script>
 

web/src/App.svelte

@@ -9,13 +9,12 @@
   import initRouteSnapper from "route-snapper";
   import { onMount } from "svelte";
   import { FillLayer, GeoJSON, MapLibre } from "svelte-maplibre";
-  import { Geocoder } from "svelte-utils";
+  import { notNull, Geocoder } from "svelte-utils";
   import {
     DisableInteractiveLayers,
     Layout,
     layerId,
     StreetView,
-    notNull,
   } from "./common";
   import DebugMode from "./DebugMode.svelte";
   import NeighbourhoodMode from "./edit/NeighbourhoodMode.svelte";

web/src/DebugMode.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import BackButton from "./BackButton.svelte";
   import { CircleLayer, GeoJSON, LineLayer } from "svelte-maplibre";
-  import { Link, layerId, notNull, Popup } from "./common";
-  import { PropertiesTable } from "svelte-utils";
+  import { Link, layerId, Popup } from "./common";
+  import { PropertiesTable, notNull } from "svelte-utils";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
   import { app, mode } from "./stores";

web/src/NetworkMode.svelte

@@ -3,10 +3,10 @@
   import deleteDark from "../assets/delete_dark.svg?url";
   import editLight from "../assets/edit_light.svg?url";
   import editDark from "../assets/edit_dark.svg?url";
-  import { downloadGeneratedFile } from "./common";
+  import { downloadGeneratedFile, notNull } from "svelte-utils";
   import type { Feature } from "geojson";
   import { FillLayer, GeoJSON, hoverStateFilter } from "svelte-maplibre";
-  import { layerId, notNull, Popup, Link } from "./common";
+  import { layerId, Popup, Link } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import SplitComponent from "./SplitComponent.svelte";
   import { lightMode, app, autosave, mode, projectName } from "./stores";

web/src/RouteMode.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import BackButton from "./BackButton.svelte";
   import { GeoJSON, LineLayer, Marker } from "svelte-maplibre";
-  import { layerId, constructMatchExpression, notNull, Link } from "./common";
+  import { constructMatchExpression, notNull } from "svelte-utils";
+  import { layerId, Link } from "./common";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";

web/src/SetBoundaryMode.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Feature, Polygon } from "geojson";
-  import { Link, notNull } from "./common";
+  import { Link } from "./common";
+  import { notNull } from "svelte-utils";
   import RouteSnapperLayer from "./common/snapper/RouteSnapperLayer.svelte";
   import SnapPolygonControls from "./common/snapper/SnapPolygonControls.svelte";
   import SplitComponent from "./SplitComponent.svelte";

web/src/ViewShortcutsMode.svelte

@@ -5,7 +5,8 @@
   import { onDestroy, onMount } from "svelte";
   import { FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
   import type { LngLat } from "maplibre-gl";
-  import { layerId, notNull, Popup, Link } from "./common";
+  import { layerId, Popup, Link } from "./common";
+  import { notNull } from "svelte-utils";
   import ModalFilterLayer from "./ModalFilterLayer.svelte";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";

web/src/common/index.ts

@@ -1,100 +1,7 @@
-import type { Feature, Point, Position } from "geojson";
-import type {
-  DataDrivenPropertyValueSpecification,
-  ExpressionSpecification,
-} from "maplibre-gl";
-
 export { default as BasemapPicker } from "./BasemapPicker.svelte";
 export { default as DisableInteractiveLayers } from "./DisableInteractiveLayers.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Link } from "./Link.svelte";
 export { default as Popup } from "./Popup.svelte";
 export { default as StreetView } from "./StreetView.svelte";
 export { layerId } from "./zorder";
-
-export const isPolygon: ExpressionSpecification = [
-  "==",
-  ["geometry-type"],
-  "Polygon",
-];
-export const isLine: ExpressionSpecification = [
-  "==",
-  ["geometry-type"],
-  "LineString",
-];
-export const isPoint: ExpressionSpecification = [
-  "==",
-  ["geometry-type"],
-  "Point",
-];
-
-export function constructMatchExpression<OutputType>(
-  getter: any[],
-  map: { [name: string]: OutputType },
-  fallback: OutputType,
-): DataDrivenPropertyValueSpecification<OutputType> {
-  let x: any[] = ["match", getter];
-  for (let [key, value] of Object.entries(map)) {
-    x.push(key);
-    x.push(value);
-  }
-  x.push(fallback);
-  return x as DataDrivenPropertyValueSpecification<OutputType>;
-}
-
-// Helper for https://maplibre.org/maplibre-style-spec/expressions/#step.
-export function makeColorRamp(
-  input: DataDrivenPropertyValueSpecification<number>,
-  limits: number[],
-  colorScale: string[],
-): DataDrivenPropertyValueSpecification<string> {
-  let step: any[] = ["step", input];
-  for (let i = 1; i < limits.length; i++) {
-    step.push(colorScale[i - 1]);
-    step.push(limits[i]);
-  }
-  // Repeat the last color. The upper limit is exclusive, meaning a value
-  // exactly equal to it will use this fallback. For things like percentages,
-  // we want to set 100 as the cap.
-  step.push(colorScale[colorScale.length - 1]);
-  return step as DataDrivenPropertyValueSpecification<string>;
-}
-
-export function downloadGeneratedFile(filename: string, textInput: string) {
-  let element = document.createElement("a");
-  element.setAttribute(
-    "href",
-    "data:text/plain;charset=utf-8," + encodeURIComponent(textInput),
-  );
-  element.setAttribute("download", filename);
-  document.body.appendChild(element);
-  element.click();
-  document.body.removeChild(element);
-}
-
-// Hack around
-// https://stackoverflow.com/questions/67336062/typescript-not-parsed-in-svelte-html-section
-// until we're using Svelte 5
-export function notNull<T>(x: T | null | undefined): T {
-  if (x == null || x == undefined) {
-    throw new Error("Oops, notNull given something null");
-  }
-  return x;
-}
-
-export function pointFeature(pt: Position): Feature<Point> {
-  return {
-    type: "Feature",
-    properties: {},
-    geometry: {
-      type: "Point",
-      coordinates: setPrecision(pt),
-    },
-  };
-}
-
-// Per https://datatracker.ietf.org/doc/html/rfc7946#section-11.2, 6 decimal
-// places (10cm) is plenty of precision
-export function setPrecision(pt: Position): Position {
-  return [Math.round(pt[0] * 10e6) / 10e6, Math.round(pt[1] * 10e6) / 10e6];
-}

web/src/common/snapper/RouteSnapperLayer.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { CircleLayer, FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
+  import { layerId } from "../";
   import {
-    layerId,
     constructMatchExpression,
     isLine,
     isPoint,
     isPolygon,
-  } from "../";
+  } from "svelte-utils";
   import { routeToolGj } from "./stores";
 
   const circleRadiusPixels = 10;

web/src/edit/ChangeModalFilter.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { Modal } from "svelte-utils";
+  import { notNull, Modal } from "svelte-utils";
   import { filterType } from "../stores";
-  import { notNull } from "../common";
 
   // TODO Use of import.meta.env.BASE_URL below is to workaround https://github.com/vitejs/vite/issues/10601
 

web/src/edit/NeighbourhoodMode.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { RenderNeighbourhoodOutput } from "../wasm";
+  import { notNull } from "svelte-utils";
   import type { Feature, LineString, Polygon } from "geojson";
   import type { LngLat } from "maplibre-gl";
   import { onDestroy } from "svelte";
   import { type LayerClickInfo } from "svelte-maplibre";
-  import { notNull, Popup, Link } from "../common";
+  import { Popup, Link } from "../common";
   import RenderNeighbourhood from "../RenderNeighbourhood.svelte";
   import SplitComponent from "../SplitComponent.svelte";
   import {

web/src/title/NewProjectMode.svelte

@@ -3,7 +3,7 @@
   import { onMount } from "svelte";
   import { Loading } from "svelte-utils";
   import { Link } from "../common";
-        import { OverpassSelector } from "svelte-utils";
+  import { OverpassSelector } from "svelte-utils";
   import { PolygonToolLayer } from "maplibre-draw-polygon";
   import SplitComponent from "../SplitComponent.svelte";
   import {