@osm-editor-kit/street-imagery-react 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/index.js

@@ -1,66 +1,129 @@
-export { MapillaryPanel } from './chunk-BS6LPDMY.js';
-export { PanoramaxPanel } from './chunk-ZH3TPW4D.js';
+import { useStreetImageryI18n } from './chunk-6EMFFIL2.js';
+export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-6EMFFIL2.js';
 export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat } from './chunk-25UGGXIE.js';
-import { photosToFeatureCollection, emptyPointCollection, sequencesToFeatureCollection, emptyLineCollection, adapterById, viewConeGeoJson, coneRadiusMeters, setStreetImageryConfig, photoLayerId, viewfieldLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoMatchesFilters, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, mapFeaturesToFeatureCollection, buildMapFeatureLayerFilter, featureSourceId, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId } from '@osm-editor-kit/street-imagery';
+import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, fetchedSequencesMinZoom, viewConeGeoJson, viewShapeRadiusMeters, setStreetImageryConfig, viewfieldLayerId, photoLayerId, photoTargetLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoMatchesFilters, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, formatLocalDateTime, formatMonth, formatRelativeDate, formatDateTooltip, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, fetchImageDetections, bestTargetImage, findLocationOpener, MAP_FEATURE_COLOR, mapillaryValueName, mapillaryIconUrl, dateRangeToSliderPositions, sliderPositionsToDateRange, dateSliderBins, dateSliderPosition, yearsAgoMs, parseIsoDateStartMs, openLocationInNewTab, formatDate, isIsoDate, alignLineToPoints, coneRadiusMeters, mapFeaturesToFeatureCollection, emptyPointCollection, buildMapFeatureLayerFilter, featureSourceId, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceTilesSourceId, renameExpressionProperties, sequenceTilesLayerId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, VIEWFIELD_MIN_ZOOM } from '@osm-editor-kit/street-imagery';
 import { Source, Layer, useMap } from 'react-map-gl/maplibre';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { lazy, useEffect, Fragment as Fragment$1, Suspense, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { lazy, useEffect, Fragment as Fragment$1, Suspense, useState, useRef, useEffectEvent } from 'react';
+import { keepPreviousData, useQuery, useQueries } from '@tanstack/react-query';
+import { create } from 'zustand';
 
-var HIGHLIGHT_SOURCE_ID = "selection-highlight";
-var HIGHLIGHT_LAYER_ID = "selection-highlight-layer";
+var POINTS_SOURCE_ID = "selection-highlight";
+var CONNECTOR_SOURCE_ID = "selection-connector";
 var SEQUENCE_HIGHLIGHT_SOURCE_ID = "sequence-highlight";
-var SEQUENCE_HIGHLIGHT_LAYER_ID = "sequence-highlight-layer";
+var BASE_COLOR = "#171717";
+var SELECTION_COLOR = "#f97316";
+var SAME_POSITION_METERS = 0.75;
+var ACTIVE_LINE_WIDTH = 2.5;
 var StreetLevelImagerySelectionOverlay = ({
   selectedPhoto,
-  selectedSequence
+  selectedSequence,
+  cameraLngLat,
+  sequenceBeforeId,
+  beforeId
 }) => {
-  const highlightCollection = selectedPhoto ? photosToFeatureCollection([selectedPhoto]) : emptyPointCollection();
-  const sequenceHighlightCollection = selectedSequence ? sequencesToFeatureCollection([selectedSequence]) : emptyLineCollection();
-  if (!selectedPhoto && sequenceHighlightCollection.features.length === 0) {
+  const photoLngLat = selectedPhoto?.lngLat;
+  const cameraDiffers = photoLngLat != null && cameraLngLat != null && distanceMeters(photoLngLat, cameraLngLat) > SAME_POSITION_METERS;
+  const camera = cameraDiffers ? cameraLngLat : null;
+  const dot = photoLngLat && cameraLngLat && !cameraDiffers ? cameraLngLat : photoLngLat;
+  const sequenceLines = selectedSequence ? sequencesToFeatureCollection([selectedSequence]) : emptyLineCollection();
+  const throughDot = (line) => dot ? alignLineToPoints(line, [dot]) : line;
+  const sequenceCollection = {
+    ...sequenceLines,
+    features: sequenceLines.features.map((feature) => ({
+      ...feature,
+      geometry: feature.geometry.type === "LineString" ? { ...feature.geometry, coordinates: throughDot(feature.geometry.coordinates) } : { ...feature.geometry, coordinates: feature.geometry.coordinates.map(throughDot) }
+    }))
+  };
+  if (!selectedPhoto && sequenceCollection.features.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    selectedPhoto ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Source, { id: HIGHLIGHT_SOURCE_ID, type: "geojson", data: highlightCollection }),
-      /* @__PURE__ */ jsx(
-        Layer,
+  const points = {
+    type: "FeatureCollection",
+    features: [
+      ...dot ? [
         {
-          id: HIGHLIGHT_LAYER_ID,
-          type: "circle",
-          source: HIGHLIGHT_SOURCE_ID,
-          paint: {
-            "circle-radius": 10,
-            "circle-color": "#ffffff",
-            "circle-stroke-width": 3,
-            "circle-stroke-color": "#0f172a"
-          }
+          type: "Feature",
+          properties: { kind: "dot" },
+          geometry: { type: "Point", coordinates: dot }
         }
-      )
-    ] }) : null,
-    sequenceHighlightCollection.features.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Source,
+      ] : [],
+      ...camera ? [
         {
-          id: SEQUENCE_HIGHLIGHT_SOURCE_ID,
-          type: "geojson",
-          data: sequenceHighlightCollection
+          type: "Feature",
+          properties: { kind: "camera" },
+          geometry: { type: "Point", coordinates: camera }
         }
-      ),
-      /* @__PURE__ */ jsx(
-        Layer,
-        {
-          id: SEQUENCE_HIGHLIGHT_LAYER_ID,
-          type: "line",
-          source: SEQUENCE_HIGHLIGHT_SOURCE_ID,
-          paint: {
-            "line-color": "#0f172a",
-            "line-width": 4,
-            "line-opacity": 0.75
-          }
+      ] : []
+    ]
+  };
+  const connector = {
+    type: "FeatureCollection",
+    features: dot && camera ? [
+      {
+        type: "Feature",
+        properties: {},
+        geometry: { type: "LineString", coordinates: [dot, camera] }
+      }
+    ] : []
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Source, { id: SEQUENCE_HIGHLIGHT_SOURCE_ID, type: "geojson", data: sequenceCollection }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        beforeId: sequenceBeforeId ?? beforeId,
+        id: "sequence-highlight-layer",
+        type: "line",
+        source: SEQUENCE_HIGHLIGHT_SOURCE_ID,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: { "line-color": BASE_COLOR, "line-width": ACTIVE_LINE_WIDTH }
+      }
+    ),
+    /* @__PURE__ */ jsx(Source, { id: CONNECTOR_SOURCE_ID, type: "geojson", data: connector }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        beforeId,
+        id: "selection-connector-layer",
+        type: "line",
+        source: CONNECTOR_SOURCE_ID,
+        paint: { "line-color": SELECTION_COLOR, "line-width": 1.5, "line-dasharray": [2, 1.5] }
+      }
+    ),
+    /* @__PURE__ */ jsx(Source, { id: POINTS_SOURCE_ID, type: "geojson", data: points }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        beforeId,
+        id: "selection-highlight-layer",
+        type: "circle",
+        source: POINTS_SOURCE_ID,
+        filter: ["==", ["get", "kind"], "dot"],
+        paint: {
+          "circle-radius": 6,
+          "circle-color": SELECTION_COLOR,
+          "circle-stroke-width": 2,
+          "circle-stroke-color": BASE_COLOR
         }
-      )
-    ] }) : null
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        beforeId,
+        id: "selection-camera-layer",
+        type: "circle",
+        source: POINTS_SOURCE_ID,
+        filter: ["==", ["get", "kind"], "camera"],
+        paint: {
+          "circle-radius": 3.5,
+          "circle-color": SELECTION_COLOR,
+          "circle-stroke-width": 1.5,
+          "circle-stroke-color": BASE_COLOR
+        }
+      }
+    )
   ] });
 };
 var resolveSelectedSequence = (selectedPhoto, sequences, sequenceId) => {
@@ -76,9 +139,11 @@ var withinBbox = (bbox) => (item) => {
   const [lng, lat] = item.lngLat;
   return lng >= bbox[0] && lng <= bbox[2] && lat >= bbox[1] && lat <= bbox[3];
 };
-var useProviderPhotos = (providerId, bbox, zoom) => {
+var previousDataWhile = (enabled) => enabled ? keepPreviousData : void 0;
+var useProviderPhotos = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
-  const enabled = adapter.kind === "photo" && bbox != null && zoom >= adapter.minZoom && adapter.fetchPhotos != null;
+  const meta = providerById[providerId];
+  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(meta.minZoom, minZoom) && adapter?.fetchPhotos != null;
   return useQuery({
     queryKey: ["provider-photos", providerId, bboxKey(bbox), zoom],
     queryFn: async ({ signal }) => {
@@ -86,23 +151,25 @@ var useProviderPhotos = (providerId, bbox, zoom) => {
       return photos.filter(withinBbox(bbox));
     },
     enabled,
-    placeholderData: (previous) => previous
+    placeholderData: previousDataWhile(enabled)
   });
 };
-var useProviderSequences = (providerId, bbox, zoom) => {
+var useProviderSequences = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
-  const sequencesMinZoom = adapter.sequencesMinZoom ?? adapter.minZoom;
-  const enabled = adapter.kind === "photo" && bbox != null && zoom >= sequencesMinZoom && adapter.fetchSequences != null;
+  const meta = providerById[providerId];
+  const sequencesMinZoom = fetchedSequencesMinZoom(providerId);
+  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(sequencesMinZoom, minZoom) && adapter?.fetchSequences != null;
   return useQuery({
     queryKey: ["provider-sequences", providerId, bboxKey(bbox), zoom],
-    queryFn: ({ signal }) => adapter.fetchSequences?.(bbox, zoom, signal) ?? [],
+    queryFn: ({ signal }) => adapter?.fetchSequences?.(bbox, zoom, signal) ?? [],
     enabled,
-    placeholderData: (previous) => previous
+    placeholderData: previousDataWhile(enabled)
   });
 };
-var useProviderMapFeatures = (providerId, bbox, zoom) => {
+var useProviderMapFeatures = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
-  const enabled = adapter.kind === "mapFeature" && bbox != null && zoom >= adapter.minZoom && adapter.fetchMapFeatures != null;
+  const meta = providerById[providerId];
+  const enabled = meta.kind === "mapFeature" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(meta.minZoom, minZoom) && adapter?.fetchMapFeatures != null;
   return useQuery({
     queryKey: ["provider-map-features", providerId, bboxKey(bbox), zoom],
     queryFn: async ({ signal }) => {
@@ -110,12 +177,13 @@ var useProviderMapFeatures = (providerId, bbox, zoom) => {
       return features.filter(withinBbox(bbox));
     },
     enabled,
-    placeholderData: (previous) => previous
+    placeholderData: previousDataWhile(enabled)
   });
 };
 var CONE_SOURCE_ID = "view-direction-cone";
 var CONE_FILL_LAYER_ID = "view-direction-cone-fill";
-var CONE_LINE_LAYER_ID = "view-direction-cone-line";
+var MIN_CONE_FOV_DEG = 45;
+var VIEW_SHAPE_FILL_OPACITY = 0.25;
 var INTERACTIVE_PANO_PROVIDERS = /* @__PURE__ */ new Set([
   "mapillary",
   "panoramax",
@@ -127,7 +195,10 @@ var INTERACTIVE_PANO_PROVIDERS = /* @__PURE__ */ new Set([
 var StreetLevelImageryViewCone = ({
   selectedPhoto,
   zoom,
-  viewerPov
+  viewerPov,
+  color = SELECTION_COLOR,
+  scale = 2.5,
+  beforeId
 }) => {
   const apex = viewerPov?.lngLat ?? selectedPhoto.lngLat;
   const isPano = selectedPhoto.isPano === true;
@@ -140,6 +211,9 @@ var StreetLevelImageryViewCone = ({
   } else if (selectedPhoto.providerId === "panoramax") {
     bearing = viewerPov?.bearing ?? selectedPhoto.heading;
     fov = 30;
+  } else if (selectedPhoto.providerId === "mapillary") {
+    bearing = viewerPov?.bearing ?? selectedPhoto.heading;
+    fov = viewerPov?.hfov ?? 30;
   } else {
     bearing = selectedPhoto.heading;
     fov = 30;
@@ -147,47 +221,29 @@ var StreetLevelImageryViewCone = ({
   if (bearing == null) {
     return null;
   }
-  const coneFeature = viewConeGeoJson(apex, bearing, fov, coneRadiusMeters(zoom));
+  fov = Math.max(fov, MIN_CONE_FOV_DEG);
+  const coneFeature = {
+    ...viewConeGeoJson(apex, bearing, fov, viewShapeRadiusMeters(zoom) * scale),
+    properties: { isPano: selectedPhoto.isPano, capturedAt: selectedPhoto.capturedAt }
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Source, { id: CONE_SOURCE_ID, type: "geojson", data: coneFeature }),
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: CONE_FILL_LAYER_ID,
         type: "fill",
         source: CONE_SOURCE_ID,
         paint: {
-          "fill-color": "#0f172a",
-          "fill-opacity": 0.15
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Layer,
-      {
-        id: CONE_LINE_LAYER_ID,
-        type: "line",
-        source: CONE_SOURCE_ID,
-        paint: {
-          "line-color": "#0f172a",
-          "line-width": 1.5,
-          "line-opacity": 0.5
+          "fill-color": color,
+          "fill-opacity": VIEW_SHAPE_FILL_OPACITY,
+          "fill-outline-color": "rgba(0, 0, 0, 0)"
         }
       }
     )
   ] });
 };
-var CIRCLE_RADIUS = [
-  "interpolate",
-  ["linear"],
-  ["zoom"],
-  10,
-  2,
-  14,
-  4,
-  18,
-  6
-];
 var FEATURE_CIRCLE_RADIUS = [
   "interpolate",
   ["linear"],
@@ -199,6 +255,31 @@ var FEATURE_CIRCLE_RADIUS = [
   18,
   4
 ];
+var padBbox = ([west, south, east, north], factor) => {
+  const dx = (east - west) * factor;
+  const dy = (north - south) * factor;
+  return [west - dx, south - dy, east + dx, north + dy];
+};
+var lngLatInBbox = ([lng, lat], [west, south, east, north]) => lng >= west && lng <= east && lat >= south && lat <= north;
+var YEAR_MS = 365.25 * 24 * 60 * 60 * 1e3;
+var LOADED_AT = Date.now();
+var AGE_SHADE = [
+  "case",
+  ["==", ["get", "capturedAt"], null],
+  BASE_COLOR,
+  [
+    "step",
+    ["get", "capturedAt"],
+    "#909090",
+    LOADED_AT - 3 * YEAR_MS,
+    "#686868",
+    LOADED_AT - 2 * YEAR_MS,
+    "#404040",
+    LOADED_AT - YEAR_MS,
+    BASE_COLOR
+  ]
+];
+var PHOTO_TARGET_RADIUS_PX = 10;
 var PHOTO_SORT_KEY = ["coalesce", ["get", "capturedAt"], 0];
 var FEATURE_SORT_KEY = ["coalesce", ["get", "lastSeenAt"], 0];
 var PhotoProviderLayer = ({
@@ -208,14 +289,62 @@ var PhotoProviderLayer = ({
   filter,
   showSequences,
   showViewfields,
-  photoCircleColor
+  photoCircleColor,
+  activeSequenceId,
+  hasActiveSequence,
+  shownPhotoId,
+  beforeId,
+  minZoom
 }) => {
   const adapter = adapterById[providerId];
-  const { data: photos = [] } = useProviderPhotos(providerId, bbox, zoom);
-  const { data: sequences = [] } = useProviderSequences(providerId, bbox, zoom);
-  const visiblePhotos = zoom >= adapter.minZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
-  const photoCollection = zoom >= adapter.minZoom ? photosToFeatureCollection(photos) : emptyPointCollection();
-  const viewfieldCollection = showViewfields ? photosToViewfieldsFeatureCollection(visiblePhotos, zoom) : emptyPolygonCollection();
+  const meta = providerById[providerId];
+  const photosMinZoom = Math.max(meta.minZoom, minZoom);
+  const fetchedLinesMinZoom = fetchedSequencesMinZoom(providerId);
+  const sequencesMinZoom = Math.max(fetchedLinesMinZoom, minZoom);
+  const { data: photos = [] } = useProviderPhotos(providerId, bbox, zoom, { minZoom });
+  const { data: sequences = [] } = useProviderSequences(providerId, bbox, zoom, { minZoom });
+  const visiblePhotos = zoom >= photosMinZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
+  const drawBbox = bbox ? padBbox(bbox, 0.25) : null;
+  const photoCollection = zoom >= photosMinZoom ? photosToFeatureCollection(
+    drawBbox ? visiblePhotos.filter((photo) => lngLatInBbox(photo.lngLat, drawBbox)) : visiblePhotos
+  ) : emptyPointCollection();
+  const viewfieldsActive = showViewfields && zoom >= VIEWFIELD_MIN_ZOOM;
+  const viewfieldCollection = viewfieldsActive ? photosToViewfieldsFeatureCollection(visiblePhotos, zoom, { bbox }) : emptyPolygonCollection();
+  const inActiveSequence = [
+    "==",
+    ["get", "sequenceId"],
+    activeSequenceId ?? ""
+  ];
+  const lineOpacity = [
+    "case",
+    inActiveSequence,
+    1,
+    hasActiveSequence ? 0.45 : 1
+  ];
+  const dotRadius = [
+    "interpolate",
+    ["linear"],
+    ["zoom"],
+    10,
+    ["case", inActiveSequence, 2, 1.2],
+    14,
+    ["case", inActiveSequence, 4, 2],
+    // Up to here there are no view shapes and the dots are 20 % smaller.
+    VIEWFIELD_MIN_ZOOM - 0.01,
+    ["case", inActiveSequence, 5.5, 2.9],
+    VIEWFIELD_MIN_ZOOM,
+    ["case", inActiveSequence, 5.5, 3.6],
+    18,
+    ["case", inActiveSequence, 6, 4]
+  ];
+  const lineAndDotColor = viewfieldsActive ? ["case", inActiveSequence, BASE_COLOR, AGE_SHADE] : photoCircleColor;
+  const viewShapeOpacity = (full) => [
+    "case",
+    inActiveSequence,
+    full,
+    hasActiveSequence ? full * 0.4 : full
+  ];
+  const notShownPhoto = ["!=", ["get", "photoId"], shownPhotoId ?? ""];
   const photoFilter = buildPhotoLayerFilter(filter?.photoTypes, filter?.date);
   const photoSrcId = photoSourceId(providerId);
   const viewfieldSrcId = viewfieldSourceId(providerId);
@@ -227,7 +356,7 @@ var PhotoProviderLayer = ({
       sequenceCapturedAtById.set(photo.sequenceId, photo.capturedAt);
     }
   }
-  const filteredSequences = showSequences && zoom >= (adapter.sequencesMinZoom ?? adapter.minZoom) ? sequences.map((sequence) => {
+  const filteredSequences = showSequences && zoom >= sequencesMinZoom ? sequences.map((sequence) => {
     if (sequence.capturedAt != null) return sequence;
     const fromPhotos = sequenceCapturedAtById.get(sequence.sequenceId);
     return fromPhotos != null ? { ...sequence, capturedAt: fromPhotos } : sequence;
@@ -243,9 +372,103 @@ var PhotoProviderLayer = ({
     };
     return photoMatchesFilters(asPhoto, filter?.photoTypes, filter?.date);
   }) : [];
-  const sequenceCollection = filteredSequences.length > 0 ? sequencesToFeatureCollection(filteredSequences) : emptyLineCollection();
+  const photoLngLatsBySequence = /* @__PURE__ */ new Map();
+  for (const photo of photos) {
+    if (photo.sequenceId == null) continue;
+    const list = photoLngLatsBySequence.get(photo.sequenceId);
+    if (list) {
+      list.push(photo.lngLat);
+    } else {
+      photoLngLatsBySequence.set(photo.sequenceId, [photo.lngLat]);
+    }
+  }
+  const alignedSequences = filteredSequences.map((sequence) => {
+    const points = photoLngLatsBySequence.get(sequence.sequenceId);
+    if (!points) return sequence;
+    const { geometry } = sequence;
+    return {
+      ...sequence,
+      geometry: geometry.type === "LineString" ? {
+        ...geometry,
+        coordinates: alignLineToPoints(geometry.coordinates, points)
+      } : {
+        ...geometry,
+        coordinates: geometry.coordinates.map(
+          (line) => alignLineToPoints(line, points)
+        )
+      }
+    };
+  });
+  const sequenceTiles = showSequences ? adapter?.sequenceTiles?.() : null;
+  const sequenceTilesMinZoom = sequenceTiles ? Math.max(sequenceTiles.minZoom, minZoom) : 0;
+  const sequenceCollection = alignedSequences.length > 0 ? sequencesToFeatureCollection(alignedSequences) : emptyLineCollection();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    adapter.fetchSequences && showSequences ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    meta.coverageTiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Source,
+        {
+          id: `coverage-tiles-source-${providerId}`,
+          minzoom: meta.coverageTiles.minZoom,
+          tileSize: meta.coverageTiles.tileSize,
+          tiles: [meta.coverageTiles.url],
+          type: "raster"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          beforeId,
+          id: `coverage-tiles-${providerId}`,
+          minzoom: meta.coverageTiles.minZoom,
+          paint: { "raster-opacity": 0.7 },
+          source: `coverage-tiles-source-${providerId}`,
+          type: "raster"
+        }
+      )
+    ] }) : null,
+    sequenceTiles && sequenceTilesMinZoom < fetchedLinesMinZoom ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Source,
+        {
+          id: sequenceTilesSourceId(providerId),
+          type: "vector",
+          tiles: sequenceTiles.tiles,
+          minzoom: sequenceTiles.minZoom,
+          maxzoom: sequenceTiles.maxZoom
+        },
+        sequenceTilesSourceId(providerId)
+      ),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          beforeId,
+          id: sequenceTilesLayerId(providerId),
+          type: "line",
+          source: sequenceTilesSourceId(providerId),
+          "source-layer": sequenceTiles.sourceLayer,
+          minzoom: sequenceTilesMinZoom,
+          maxzoom: fetchedLinesMinZoom,
+          filter: renameExpressionProperties(photoFilter, sequenceTiles.properties),
+          layout: {
+            "line-cap": "round",
+            "line-join": "round",
+            "line-sort-key": renameExpressionProperties(
+              ["case", inActiveSequence, 1, 0],
+              sequenceTiles.properties
+            )
+          },
+          paint: {
+            "line-color": renameExpressionProperties(photoCircleColor, sequenceTiles.properties),
+            "line-width": renameExpressionProperties(
+              ["case", inActiveSequence, ACTIVE_LINE_WIDTH, 1.25],
+              sequenceTiles.properties
+            ),
+            "line-opacity": renameExpressionProperties(lineOpacity, sequenceTiles.properties)
+          }
+        }
+      )
+    ] }) : null,
+    adapter?.fetchSequences && showSequences ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Source,
         {
@@ -258,13 +481,19 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: sequenceLayerId(providerId),
           type: "line",
           source: sequenceSourceId(providerId),
+          layout: {
+            "line-cap": "round",
+            "line-join": "round",
+            "line-sort-key": ["case", inActiveSequence, 1, 0]
+          },
           paint: {
-            "line-color": adapter.color,
-            "line-width": 2,
-            "line-opacity": 0.35
+            "line-color": lineAndDotColor,
+            "line-width": ["case", inActiveSequence, ACTIVE_LINE_WIDTH, 1.25],
+            "line-opacity": lineOpacity
           }
         }
       )
@@ -282,25 +511,30 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: viewfieldLayerId(providerId),
           type: "fill",
           source: viewfieldSrcId,
+          filter: notShownPhoto,
           paint: {
             "fill-color": photoCircleColor,
-            "fill-opacity": 0.22
+            "fill-opacity": viewShapeOpacity(VIEW_SHAPE_FILL_OPACITY),
+            "fill-outline-color": "rgba(0, 0, 0, 0)"
           }
         }
       ),
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: viewfieldLineLayerId(providerId),
           type: "line",
           source: viewfieldSrcId,
+          filter: notShownPhoto,
           paint: {
             "line-color": photoCircleColor,
-            "line-width": 1,
-            "line-opacity": 0.45
+            "line-width": 0.5,
+            "line-opacity": viewShapeOpacity(0.3)
           }
         }
       )
@@ -318,16 +552,27 @@ var PhotoProviderLayer = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
+        id: photoTargetLayerId(providerId),
+        type: "circle",
+        source: photoSrcId,
+        filter: photoFilter,
+        layout: { "circle-sort-key": PHOTO_SORT_KEY },
+        paint: { "circle-radius": PHOTO_TARGET_RADIUS_PX, "circle-opacity": 0 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        beforeId,
         id: photoLayerId(providerId),
         type: "circle",
         source: photoSrcId,
         filter: photoFilter,
         layout: { "circle-sort-key": PHOTO_SORT_KEY },
         paint: {
-          "circle-radius": CIRCLE_RADIUS,
-          "circle-color": photoCircleColor,
-          "circle-stroke-width": 1,
-          "circle-stroke-color": "#ffffff"
+          "circle-radius": dotRadius,
+          "circle-color": lineAndDotColor
         }
       }
     )
@@ -338,11 +583,16 @@ var MapFeatureProviderLayer = ({
   bbox,
   zoom,
   filter,
-  mapFeatureCircleColor
+  mapFeatureCircleColor,
+  beforeId,
+  minZoom
 }) => {
-  const adapter = adapterById[providerId];
-  const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom);
-  const featureCollection = zoom >= adapter.minZoom ? mapFeaturesToFeatureCollection(features) : emptyPointCollection();
+  const meta = providerById[providerId];
+  const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom, { minZoom });
+  const valueFilter = filter?.mapFeatureValue;
+  const featureCollection = zoom >= Math.max(meta.minZoom, minZoom) ? mapFeaturesToFeatureCollection(
+    valueFilter ? features.filter((feature) => valueFilter(feature.value)) : features
+  ) : emptyPointCollection();
   const featureFilter = buildMapFeatureLayerFilter(filter?.date);
   const featureSrcId = featureSourceId(providerId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -359,6 +609,7 @@ var MapFeatureProviderLayer = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: featureLayerId(providerId),
         type: "circle",
         source: featureSrcId,
@@ -366,17 +617,14 @@ var MapFeatureProviderLayer = ({
         layout: { "circle-sort-key": FEATURE_SORT_KEY },
         paint: {
           "circle-radius": FEATURE_CIRCLE_RADIUS,
-          "circle-color": mapFeatureCircleColor,
-          "circle-stroke-width": 1,
-          "circle-stroke-color": "#ffffff"
+          "circle-color": mapFeatureCircleColor
         }
       }
     )
   ] });
 };
 var ProviderLayer = (props) => {
-  const adapter = adapterById[props.providerId];
-  return adapter.kind === "mapFeature" ? /* @__PURE__ */ jsx(MapFeatureProviderLayer, { ...props }) : /* @__PURE__ */ jsx(PhotoProviderLayer, { ...props });
+  return providerById[props.providerId].kind === "mapFeature" ? /* @__PURE__ */ jsx(MapFeatureProviderLayer, { ...props }) : /* @__PURE__ */ jsx(PhotoProviderLayer, { ...props });
 };
 var StreetLevelImagerySourcesAndLayers = ({
   providers,
@@ -394,8 +642,12 @@ var StreetLevelImagerySourcesAndLayers = ({
     selectedPhoto,
     selectedSequenceId,
     viewerPov,
+    viewConeColor,
+    viewConeScale,
     photoCircleColor,
-    mapFeatureCircleColor
+    mapFeatureCircleColor,
+    beforeId,
+    minZoom = 0
   } = options;
   useEffect(
     function applyStreetImageryConfig() {
@@ -411,18 +663,25 @@ var StreetLevelImagerySourcesAndLayers = ({
     showSelectionHighlight && selectedProviderId ? bbox : null,
     zoom
   );
-  const selectedSequence = resolveSelectedSequence(
-    selectedPhoto,
-    sequences,
-    selectedSequenceId ?? selectedPhoto?.sequenceId
+  const activeSequenceId = selectedSequenceId ?? selectedPhoto?.sequenceId;
+  const selectedSequence = resolveSelectedSequence(selectedPhoto, sequences, activeSequenceId);
+  const providerDrawsSequences = selectedProviderId != null && showSequences && providers.includes(selectedProviderId);
+  const firstPhotoProvider = providers.find(
+    (id) => providerById[id].kind === "photo" && adapterById[id]?.fetchPhotos
   );
+  const sequenceBeforeId = firstPhotoProvider ? showViewfields ? viewfieldLayerId(firstPhotoProvider) : photoLayerId(firstPhotoProvider) : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     providers.map((providerId) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
       ProviderLayer,
       {
+        beforeId,
+        minZoom,
         bbox,
         filter,
         mapFeatureCircleColor,
+        activeSequenceId: providerId === selectedProviderId ? activeSequenceId : null,
+        hasActiveSequence: activeSequenceId != null,
+        shownPhotoId: showViewCone && providerId === selectedProviderId ? selectedPhoto?.photoId : null,
         photoCircleColor,
         providerId,
         showSequences,
@@ -433,6 +692,9 @@ var StreetLevelImagerySourcesAndLayers = ({
     showViewCone && selectedPhoto ? /* @__PURE__ */ jsx(
       StreetLevelImageryViewCone,
       {
+        beforeId,
+        color: viewConeColor ?? SELECTION_COLOR,
+        scale: viewConeScale,
         selectedPhoto,
         viewerPov,
         zoom
@@ -441,45 +703,65 @@ var StreetLevelImagerySourcesAndLayers = ({
     showSelectionHighlight ? /* @__PURE__ */ jsx(
       StreetLevelImagerySelectionOverlay,
       {
+        beforeId,
+        cameraLngLat: viewerPov?.lngLat,
         selectedPhoto,
-        selectedSequence
+        selectedSequence: providerDrawsSequences ? null : selectedSequence,
+        sequenceBeforeId
       }
     ) : null
   ] });
 };
-var MapillaryPanel2 = lazy(
-  () => import('./MapillaryPanel-QX6NESX7.js').then((module) => ({
+var MapillaryPanel = lazy(
+  () => import('./MapillaryPanel-FAXVZH37.js').then((module) => ({
     default: module.MapillaryPanel
   }))
 );
-var PanoramaxPanel2 = lazy(
-  () => import('./PanoramaxPanel-J6ANR6LB.js').then((module) => ({
+var PanoramaxPanel = lazy(
+  () => import('./PanoramaxPanel-TWKTSOXM.js').then((module) => ({
     default: module.PanoramaxPanel
   }))
 );
-var ViewerPanelPlaceholder = () => /* @__PURE__ */ jsx("div", { className: "flex min-h-48 animate-pulse items-center justify-center rounded-lg border border-slate-200 bg-slate-100", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: "Loading viewer\u2026" }) });
+var ViewerPanelPlaceholder = () => {
+  const { messages } = useStreetImageryI18n();
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-48 animate-pulse items-center justify-center rounded-lg border border-slate-200 bg-slate-100", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: messages.viewer.loading }) });
+};
 var StreetLevelImageryViewer = ({
   photo,
   groupPhotos,
   onPhotoSelected,
-  onEaseMapToPoint
+  onEaseMapToPoint,
+  onViewerPhoto,
+  lookAtBearing,
+  lookAt,
+  outlines,
+  hideAttribution,
+  panoramaxPanel: PanoramaxPanelOverride
 }) => {
   if (photo.providerId === "mapillary") {
     return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
-      MapillaryPanel2,
+      MapillaryPanel,
       {
         groupPhotos,
+        hideAttribution,
         onEaseMapToPoint,
         onPhotoSelected,
+        lookAt,
+        lookAtBearing,
+        outlines,
+        onViewerPhoto,
         photo
       }
     ) });
   }
   if (photo.providerId === "panoramax") {
+    const Panel = PanoramaxPanelOverride ?? PanoramaxPanel;
     return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
-      PanoramaxPanel2,
+      Panel,
       {
         groupPhotos,
+        hideAttribution,
+        onViewerPhoto,
         onEaseMapToPoint,
         onPhotoSelected,
         photo
@@ -490,6 +772,7 @@ var StreetLevelImageryViewer = ({
 };
 var streetImageryInteractiveLayerIds = (providers) => [
   ...providers.map((providerId) => photoLayerId(providerId)),
+  ...providers.map((providerId) => photoTargetLayerId(providerId)),
   ...providers.map((providerId) => viewfieldLayerId(providerId)),
   ...providers.map((providerId) => featureLayerId(providerId))
 ];
@@ -498,6 +781,10 @@ var parseProviderIdFromLayerId = (layerId) => {
   if (photoMatch) {
     return photoMatch[1];
   }
+  const targetMatch = layerId.match(/^photo-targets-(.+)$/);
+  if (targetMatch) {
+    return targetMatch[1];
+  }
   const viewfieldMatch = layerId.match(/^viewfields-(.+)$/);
   if (viewfieldMatch) {
     return viewfieldMatch[1];
@@ -522,7 +809,7 @@ var queryStreetImageryFeatures = (event) => {
       continue;
     }
     const props = feature.properties ?? {};
-    if (layerId.startsWith("photos-") || layerId.startsWith("viewfields-")) {
+    if (layerId.startsWith("photos-") || layerId.startsWith("photo-targets-") || layerId.startsWith("viewfields-")) {
       const photoId = props.photoId;
       if (photoId == null) {
         continue;
@@ -567,18 +854,6 @@ var useAllProviderMapFeatures = (providerIds, bbox, zoom, date) => {
     return data.filter((feature) => mapFeatureMatchesDateRange(feature, date));
   });
 };
-var useAllProviderMapFeaturesLoading = (providerIds, bbox, zoom) => {
-  const enabled = new Set(providerIds);
-  const queries = PROVIDER_IDS.map((providerId) => ({
-    providerId,
-    query: useProviderMapFeaturesMaybe(providerId, enabled.has(providerId), bbox, zoom)
-  }));
-  const activeQueries = queries.filter(({ providerId }) => enabled.has(providerId));
-  return {
-    isLoading: activeQueries.some(({ query }) => query.isLoading),
-    isFetching: activeQueries.some(({ query }) => query.isFetching)
-  };
-};
 var useProviderPhotosMaybe = (providerId, enabled, bbox, zoom) => useProviderPhotos(providerId, enabled ? bbox : null, zoom);
 var useAllProviderPhotos = (providerIds, bbox, zoom, photoTypes, date) => {
   const enabled = new Set(providerIds);
@@ -655,5 +930,1132 @@ var usePhotoThumbnail = (photo) => useQuery({
   enabled: photo != null,
   staleTime: 24 * 60 * 60 * 1e3
 });
+var PhotoCount = ({ index, total, className }) => /* @__PURE__ */ jsxs("span", { className: `inline-flex shrink-0 items-center gap-0.5 tabular-nums ${className ?? ""}`, children: [
+  /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      className: "size-3 shrink-0",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.75,
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ jsx("path", { d: "M4 6h16v12H4ZM4 15l4.5-4.5 4 4L15 12l5 5M9 9.5h.01" })
+    }
+  ),
+  index != null ? `${index}/` : "",
+  total
+] });
+var PhotoDate = ({ timestamp, className, localDateTime }) => {
+  const { locale, messages } = useStreetImageryI18n();
+  if (timestamp == null) {
+    return /* @__PURE__ */ jsx("span", { className, children: messages.unknownDate });
+  }
+  const precise = localDateTime ? formatLocalDateTime(localDateTime, locale) : null;
+  return /* @__PURE__ */ jsx(
+    "time",
+    {
+      className,
+      dateTime: new Date(timestamp).toISOString(),
+      title: precise ? `${precise}
+${formatRelativeDate(timestamp, locale)}` : formatDateTooltip(timestamp, locale),
+      children: formatMonth(timestamp, locale)
+    }
+  );
+};
+
+// src/viewpoints/viewDirectionLabels.ts
+var viewSuggestionLabel = ({ viewpoint, direction }, messages) => messages.viewDirection(viewpoint.label ?? messages.viewpointRole[viewpoint.role], direction.kind);
+var DEFAULT_LAYOUT = { right: 16, bottom: 32, width: 420, minimized: false };
+var MIN_WIDTH = 280;
+var EDGE = 8;
+var hasStoredLayout = (storageKey) => {
+  try {
+    return localStorage.getItem(storageKey) != null;
+  } catch {
+    return false;
+  }
+};
+var readLayout = (storageKey) => {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    return raw ? { ...DEFAULT_LAYOUT, ...JSON.parse(raw) } : DEFAULT_LAYOUT;
+  } catch {
+    return DEFAULT_LAYOUT;
+  }
+};
+var writeLayout = (storageKey, layout) => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(layout));
+  } catch {
+  }
+};
+var Icon = ({ path, className = "size-4" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": true,
+    className,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.75,
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", { d: path })
+  }
+);
+var ICONS = {
+  back: "M15 18l-6-6 6-6",
+  undo: "M9 14 4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11",
+  redo: "m15 14 5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13",
+  forward: "M9 18l6-6-6-6",
+  close: "M18 6 6 18M6 6l12 12",
+  minimize: "M5 12h14",
+  expand: "M4 14v6h6M20 10V4h-6M14 10l6-6M10 14l-6 6",
+  arrow: "M12 20V5M6 11l6-6 6 6",
+  info: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM12 11v5M12 8h.01"
+};
+var ToolbarButton = ({
+  label,
+  onClick,
+  disabled,
+  children
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    "aria-label": label,
+    className: "inline-flex size-7 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent",
+    disabled,
+    onClick,
+    title: label,
+    type: "button",
+    children
+  }
+);
+var SuggestionChip = ({
+  suggestion,
+  active,
+  shownPhotoId,
+  showPlace,
+  onSelect
+}) => {
+  const { messages } = useStreetImageryI18n();
+  const { candidates } = suggestion;
+  const best = candidates[0];
+  const shownIndex = active ? candidates.findIndex((candidate) => candidate.photo.photoId === shownPhotoId) : -1;
+  const shown = shownIndex >= 0 ? candidates[shownIndex] : best;
+  const canStep = active && candidates.length > 1;
+  const hasCount = candidates.length > 0;
+  const name = viewSuggestionLabel(suggestion, messages);
+  const label = canStep ? messages.viewer.nextPhotoOfView(name) : name;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-label": best ? label : messages.viewer.noPhoto(label),
+      "aria-pressed": active,
+      className: [
+        "flex min-w-0 flex-col items-center rounded-md border px-1 py-0.5 text-xs leading-tight",
+        active ? "border-fuchsia-600 bg-fuchsia-600 text-white" : best ? "border-slate-300 bg-white text-slate-700 hover:border-fuchsia-500" : "border-dashed border-slate-200 bg-white text-slate-400"
+      ].join(" "),
+      disabled: !best,
+      onClick: () => {
+        const next = canStep ? candidates[(shownIndex + 1) % candidates.length] : best;
+        if (next) {
+          onSelect(next);
+        }
+      },
+      title: best ? label : messages.viewer.noMatchingPhoto(label),
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: `flex items-center gap-1 font-medium ${hasCount ? "w-full justify-between px-1" : "max-w-full"}`,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "inline-flex shrink-0",
+                    style: { transform: `rotate(${suggestion.direction.bearing}deg)` },
+                    children: /* @__PURE__ */ jsx(Icon, { className: "size-3", path: ICONS.arrow })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                  showPlace ? `${suggestion.viewpoint.label ?? messages.viewpointRole[suggestion.viewpoint.role]} ` : "",
+                  messages.compass[Math.round(suggestion.direction.bearing / 45) % 8]
+                ] })
+              ] }),
+              hasCount ? /* @__PURE__ */ jsx(
+                PhotoCount,
+                {
+                  className: `font-normal ${active ? "text-fuchsia-100" : "text-slate-500"}`,
+                  index: shownIndex >= 0 ? shownIndex + 1 : void 0,
+                  total: candidates.length
+                }
+              ) : null
+            ]
+          }
+        ),
+        shown ? /* @__PURE__ */ jsx(
+          PhotoDate,
+          {
+            className: `max-w-full truncate ${active ? "text-fuchsia-100" : "text-slate-400"}`,
+            timestamp: shown.photo.capturedAt
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "\u2014" })
+      ]
+    }
+  );
+};
+var FloatingViewerInfoButton = ({
+  label,
+  onClick
+}) => /* @__PURE__ */ jsx(ToolbarButton, { label, onClick, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.info }) });
+var FloatingPhotoViewer = ({
+  title,
+  titleActions,
+  suggestions,
+  activeDirectionKey,
+  onSelectSuggestion,
+  shownPhotoId,
+  canGoBack = false,
+  canGoForward = false,
+  onBack,
+  onForward,
+  onClose,
+  step,
+  toolbar,
+  status,
+  children,
+  footer,
+  drawer,
+  storageKey = "street-imagery:floating-viewer",
+  defaultPosition
+}) => {
+  const { messages } = useStreetImageryI18n();
+  const severalViewpoints = new Set(suggestions.map((suggestion) => suggestion.viewpoint.id)).size > 1;
+  const [layout, setLayout] = useState(() => readLayout(storageKey));
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [moved, setMoved] = useState(() => hasStoredLayout(storageKey));
+  const atTopLeft = defaultPosition?.corner === "top-left" && !moved;
+  const position = atTopLeft ? { left: defaultPosition.left ?? EDGE, top: defaultPosition.top ?? EDGE } : { right: layout.right, bottom: layout.bottom };
+  const dragRef = useRef(null);
+  const updateLayout = (next) => {
+    setLayout(next);
+    writeLayout(storageKey, next);
+  };
+  const onShortcut = useEffectEvent((event) => {
+    const target = event.target;
+    if (target instanceof Element && target.closest('input, textarea, select, [contenteditable="true"]')) {
+      return;
+    }
+    if (event.key === "Escape") {
+      onClose();
+    } else if (event.key === "[" && canGoBack) {
+      onBack?.();
+    } else if (event.key === "]" && canGoForward) {
+      onForward?.();
+    } else if (event.key === "ArrowLeft" && event.altKey) {
+      step?.onPrevious?.();
+    } else if (event.key === "ArrowRight" && event.altKey) {
+      step?.onNext?.();
+    }
+  });
+  useEffect(function subscribeKeyboardShortcuts() {
+    window.addEventListener("keydown", onShortcut);
+    return () => window.removeEventListener("keydown", onShortcut);
+  }, []);
+  const startDrag = (event, mode) => {
+    if (event.button !== 0 || event.target.closest("button")) {
+      return;
+    }
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const box = event.currentTarget.closest("section");
+    const container = box?.offsetParent;
+    const start = atTopLeft && box && container ? {
+      ...layout,
+      right: container.clientWidth - box.offsetLeft - box.offsetWidth,
+      bottom: container.clientHeight - box.offsetTop - box.offsetHeight
+    } : layout;
+    setLayout(start);
+    setMoved(true);
+    dragRef.current = { x: event.clientX, y: event.clientY, layout: start, mode };
+  };
+  const onDrag = (event) => {
+    const drag = dragRef.current;
+    if (!drag) {
+      return;
+    }
+    const dx = event.clientX - drag.x;
+    const dy = event.clientY - drag.y;
+    setLayout(
+      drag.mode === "move" ? {
+        ...drag.layout,
+        right: Math.max(EDGE, drag.layout.right - dx),
+        bottom: Math.max(EDGE, drag.layout.bottom - dy)
+      } : { ...drag.layout, width: Math.max(MIN_WIDTH, drag.layout.width - dx) }
+    );
+  };
+  const endDrag = () => {
+    if (dragRef.current) {
+      dragRef.current = null;
+      writeLayout(storageKey, layout);
+    }
+  };
+  const dragHandlers = { onPointerMove: onDrag, onPointerUp: endDrag, onPointerCancel: endDrag };
+  if (layout.minimized) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "absolute z-10 inline-flex items-center gap-2 rounded-full bg-white px-3 py-1.5 text-sm font-medium text-slate-800 shadow-lg ring-1 ring-slate-200 hover:bg-slate-50",
+        onClick: () => updateLayout({ ...layout, minimized: false }),
+        style: position,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { path: ICONS.expand }),
+          title
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": messages.viewer.regionLabel,
+      className: "absolute z-10 flex max-h-[calc(100%-1rem)] flex-col overflow-hidden rounded-xl bg-white shadow-xl ring-1 ring-slate-200",
+      style: {
+        ...position,
+        width: `min(${layout.width}px, calc(100% - 1rem))`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-y-0 left-0 z-10 w-1.5 cursor-ew-resize hover:bg-fuchsia-500/20",
+            onPointerDown: (event) => startDrag(event, "resize"),
+            ...dragHandlers
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            className: "flex cursor-move touch-none items-center gap-1 border-b border-slate-100 px-2 py-1.5 select-none",
+            onPointerDown: (event) => startDrag(event, "move"),
+            ...dragHandlers,
+            children: [
+              step ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    disabled: !step.onPrevious,
+                    label: step.previousLabel,
+                    onClick: () => step.onPrevious?.(),
+                    children: /* @__PURE__ */ jsx(Icon, { path: ICONS.back })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    disabled: !step.onNext,
+                    label: step.nextLabel,
+                    onClick: () => step.onNext?.(),
+                    children: /* @__PURE__ */ jsx(Icon, { path: ICONS.forward })
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-0.5", children: [
+                /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate px-1 text-sm font-semibold text-slate-800", children: title }),
+                titleActions
+              ] }),
+              onBack && onForward ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    disabled: !canGoBack,
+                    label: messages.viewer.backInHistory,
+                    onClick: onBack,
+                    children: /* @__PURE__ */ jsx(Icon, { path: ICONS.undo })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    disabled: !canGoForward,
+                    label: messages.viewer.forwardInHistory,
+                    onClick: onForward,
+                    children: /* @__PURE__ */ jsx(Icon, { path: ICONS.redo })
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  label: messages.viewer.minimize,
+                  onClick: () => updateLayout({ ...layout, minimized: true }),
+                  children: /* @__PURE__ */ jsx(Icon, { path: ICONS.minimize })
+                }
+              ),
+              /* @__PURE__ */ jsx(ToolbarButton, { label: messages.viewer.close, onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.close }) })
+            ]
+          }
+        ),
+        toolbar ? /* @__PURE__ */ jsx("div", { className: "border-b border-slate-100 px-2 py-1.5", children: toolbar }) : suggestions.length > 0 ? /* @__PURE__ */ jsx(
+          "nav",
+          {
+            "aria-label": messages.viewer.suggestedViews,
+            className: "grid grid-cols-[repeat(auto-fit,minmax(5.25rem,1fr))] gap-1 border-b border-slate-100 px-2 py-1.5",
+            title: messages.viewer.suggestedViewsHint,
+            children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+              SuggestionChip,
+              {
+                active: suggestion.direction.key === activeDirectionKey,
+                onSelect: (candidate) => onSelectSuggestion(suggestion, candidate),
+                shownPhotoId,
+                showPlace: severalViewpoints,
+                suggestion
+              },
+              suggestion.direction.key
+            ))
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto", children: [
+          status ? /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-slate-500", role: "status", children: status }) : null,
+          children,
+          footer ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-slate-600", children: footer }) : null,
+          drawer ? /* @__PURE__ */ jsxs("div", { className: "border-t border-slate-100", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                "aria-expanded": drawerOpen,
+                className: "flex w-full items-center justify-between px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50",
+                onClick: () => setDrawerOpen((open) => !open),
+                type: "button",
+                children: [
+                  drawer.label,
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: drawerOpen ? "inline-flex rotate-90" : "inline-flex", children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5", path: ICONS.forward }) })
+                ]
+              }
+            ),
+            drawerOpen ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: drawer.content }) : null
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+};
+var SOURCE_DIRECTIONS = "viewpoint-directions";
+var SOURCE_POINTS = "viewpoint-points";
+var SOURCE_LINE = "viewpoint-line";
+var VIEWPOINT_DIRECTION_LAYER_ID = "viewpoint-direction-fill";
+var VIEWPOINT_DEFAULT_COLOR = "#c026d3";
+var directionLengthMeters = (zoom) => Math.max(8, coneRadiusMeters(zoom) * 3);
+var ViewpointLayer = ({
+  viewpoints,
+  suggestions,
+  activeDirectionKey,
+  zoom,
+  line,
+  color = VIEWPOINT_DEFAULT_COLOR
+}) => {
+  const length = directionLengthMeters(zoom);
+  const directions = {
+    type: "FeatureCollection",
+    features: suggestions.map(({ viewpoint, direction, candidates }) => ({
+      ...viewConeGeoJson(viewpoint.lngLat, direction.bearing, 40, length),
+      properties: {
+        key: direction.key,
+        active: direction.key === activeDirectionKey,
+        hasPhoto: candidates.length > 0
+      }
+    }))
+  };
+  const points = {
+    type: "FeatureCollection",
+    features: viewpoints.map(
+      (viewpoint) => ({
+        type: "Feature",
+        properties: { id: viewpoint.id },
+        geometry: { type: "Point", coordinates: viewpoint.lngLat }
+      })
+    )
+  };
+  const lineFeature = {
+    type: "FeatureCollection",
+    features: line && line.length > 1 ? [{ type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: line } }] : []
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Source, { id: SOURCE_LINE, type: "geojson", data: lineFeature }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "viewpoint-line",
+        type: "line",
+        source: SOURCE_LINE,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: { "line-color": color, "line-width": 5, "line-opacity": 0.5 }
+      }
+    ),
+    /* @__PURE__ */ jsx(Source, { id: SOURCE_DIRECTIONS, type: "geojson", data: directions }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: VIEWPOINT_DIRECTION_LAYER_ID,
+        type: "fill",
+        source: SOURCE_DIRECTIONS,
+        paint: {
+          "fill-color": color,
+          "fill-opacity": ["case", ["get", "active"], 0.55, ["get", "hasPhoto"], 0.18, 0.04]
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "viewpoint-direction-line",
+        type: "line",
+        source: SOURCE_DIRECTIONS,
+        paint: {
+          "line-color": color,
+          "line-width": ["case", ["get", "active"], 2, 1],
+          "line-dasharray": [2, 1.5],
+          "line-opacity": ["case", ["get", "hasPhoto"], 0.9, 0.35]
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Source, { id: SOURCE_POINTS, type: "geojson", data: points }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "viewpoint-point",
+        type: "circle",
+        source: SOURCE_POINTS,
+        paint: {
+          "circle-radius": 5,
+          "circle-color": "#ffffff",
+          "circle-stroke-color": color,
+          "circle-stroke-width": 2.5
+        }
+      }
+    )
+  ] });
+};
+var viewDirectionKeyFromFeatures = (features) => {
+  const hit = features?.find((feature) => feature.layer?.id === VIEWPOINT_DIRECTION_LAYER_ID);
+  const key = hit?.properties?.key;
+  return typeof key === "string" ? key : null;
+};
+var samePhoto = (a, b) => a != null && a.providerId === b.providerId && a.photoId === b.photoId;
+var useViewpointSessionStore = create()((set, get) => ({
+  sessionId: 0,
+  viewpoints: [],
+  line: null,
+  activeDirectionKey: null,
+  history: [],
+  historyIndex: -1,
+  actions: {
+    open: ({ viewpoints, line = null }) => set((state) => ({
+      sessionId: state.sessionId + 1,
+      viewpoints,
+      line,
+      activeDirectionKey: null
+    })),
+    showPhoto: (entry) => set((state) => {
+      const current = state.history[state.historyIndex];
+      if (samePhoto(current?.photo, entry.photo)) {
+        if (entry.directionKey == null || entry.directionKey === current?.directionKey) {
+          return entry.directionKey != null && entry.directionKey !== state.activeDirectionKey ? { activeDirectionKey: entry.directionKey } : state;
+        }
+        const history2 = [...state.history];
+        history2[state.historyIndex] = { ...entry };
+        return { history: history2, activeDirectionKey: entry.directionKey };
+      }
+      const history = [...state.history.slice(0, state.historyIndex + 1), entry].slice(
+        -100
+      );
+      return {
+        history,
+        historyIndex: history.length - 1,
+        activeDirectionKey: entry.directionKey ?? state.activeDirectionKey
+      };
+    }),
+    back: () => {
+      const { history, historyIndex } = get();
+      const entry = history[historyIndex - 1];
+      if (!entry) {
+        return null;
+      }
+      set({ historyIndex: historyIndex - 1, activeDirectionKey: entry.directionKey });
+      return entry;
+    },
+    forward: () => {
+      const { history, historyIndex } = get();
+      const entry = history[historyIndex + 1];
+      if (!entry) {
+        return null;
+      }
+      set({ historyIndex: historyIndex + 1, activeDirectionKey: entry.directionKey });
+      return entry;
+    },
+    close: () => set({ viewpoints: [], line: null, activeDirectionKey: null }),
+    reset: () => set({
+      viewpoints: [],
+      line: null,
+      activeDirectionKey: null,
+      history: [],
+      historyIndex: -1
+    })
+  }
+}));
+var useViewpoints = () => useViewpointSessionStore((state) => state.viewpoints);
+var useViewpointLine = () => useViewpointSessionStore((state) => state.line);
+var useActiveDirectionKey = () => useViewpointSessionStore((state) => state.activeDirectionKey);
+var useCurrentHistoryEntry = () => useViewpointSessionStore((state) => state.history[state.historyIndex] ?? null);
+var useCanGoBack = () => useViewpointSessionStore((state) => state.historyIndex > 0);
+var useCanGoForward = () => useViewpointSessionStore((state) => state.historyIndex < state.history.length - 1);
+var getViewpointSession = () => {
+  const { actions, history, historyIndex } = useViewpointSessionStore.getState();
+  return { actions, current: history[historyIndex] ?? null };
+};
+var DEFAULT_SOURCES = [mapillaryPhotoSource];
+var useViewSuggestions = (viewpoints, {
+  maxAgeYears,
+  photoTypes,
+  limit,
+  filterPhoto,
+  sources = DEFAULT_SOURCES,
+  enabled = true
+} = {}) => {
+  const [now] = useState(() => Date.now());
+  const requests = viewpoints.flatMap(
+    (viewpoint) => sources.map((source) => ({ viewpoint, source }))
+  );
+  const queries = useQueries({
+    queries: requests.map(({ viewpoint, source }) => ({
+      queryKey: [
+        "street-imagery",
+        "photos-near",
+        source.id,
+        viewpoint.lngLat[0],
+        viewpoint.lngLat[1]
+      ],
+      queryFn: ({ signal }) => source.fetchNear(viewpoint.lngLat, signal),
+      enabled,
+      staleTime: 10 * 60 * 1e3
+    }))
+  });
+  const photosByViewpointId = /* @__PURE__ */ new Map();
+  requests.forEach(({ viewpoint }, index) => {
+    const photos = queries[index]?.data ?? [];
+    const kept = filterPhoto ? photos.filter(filterPhoto) : photos;
+    photosByViewpointId.set(viewpoint.id, [
+      ...photosByViewpointId.get(viewpoint.id) ?? [],
+      ...kept
+    ]);
+  });
+  const suggestions = buildViewSuggestions(
+    viewpoints,
+    (viewpoint) => photosByViewpointId.get(viewpoint.id) ?? [],
+    {
+      now,
+      maxAgeMs: maxAgeYears == null ? void 0 : yearsToMs(maxAgeYears),
+      photoTypes,
+      limit
+    }
+  );
+  return {
+    suggestions,
+    isLoading: enabled && queries.some((query) => query.isPending),
+    // An error only when every source failed; one failing provider still leaves suggestions.
+    isError: queries.length > 0 && queries.every((query) => query.isError)
+  };
+};
+var STALE_TIME = 10 * 60 * 1e3;
+var useMapillaryMapFeatureImages = (featureId, { shape = SIGN_TARGET } = {}) => useQuery({
+  queryKey: ["street-imagery", "mapillary-map-feature", featureId, shape],
+  queryFn: ({ signal }) => fetchMapFeatureImages(featureId, { shape, signal }),
+  enabled: !!featureId,
+  staleTime: STALE_TIME
+});
+var useMapillaryMapFeaturesNear = (lngLat, {
+  radiusMeters = 40,
+  objectValues,
+  enabled = true
+} = {}) => useQuery({
+  queryKey: ["street-imagery", "mapillary-map-features-near", lngLat, radiusMeters, objectValues],
+  queryFn: async ({ signal }) => {
+    const center = lngLat;
+    const features = await fetchMapillaryMapFeaturesInBbox(bboxAround(center, radiusMeters), {
+      objectValues,
+      signal
+    });
+    return features.map((feature) => ({ ...feature, distanceMeters: distanceMeters(center, feature.lngLat) })).filter((feature) => feature.distanceMeters <= radiusMeters).sort((a, b) => a.distanceMeters - b.distanceMeters);
+  },
+  enabled: enabled && !!lngLat,
+  staleTime: STALE_TIME
+});
+var useMapillaryImageDetections = (imageId, { filter, filterKey } = {}) => useQuery({
+  queryKey: ["street-imagery", "mapillary-detections", imageId, filterKey ?? null],
+  queryFn: ({ signal }) => fetchImageDetections(imageId, { filter, signal }),
+  enabled: !!imageId,
+  staleTime: STALE_TIME
+});
+var useSelectedMapillaryFeature = ({
+  featureId,
+  shownPhotoId,
+  minCapturedAt,
+  shape
+}) => {
+  const { data, isLoading, isError } = useMapillaryMapFeatureImages(featureId, { shape });
+  const shownImage = data?.images.find((image) => image.id === shownPhotoId) ?? null;
+  const firstImage = data ? bestTargetImage(data.images, data.feature.lngLat, {
+    minCapturedAt: minCapturedAt ?? void 0,
+    shape
+  }) ?? null : null;
+  return { data: data ?? null, isLoading, isError, shownImage, firstImage };
+};
+var useLocationPickStore = create()((set) => ({
+  armedOpenerId: null,
+  actions: {
+    arm: (openerId) => set({ armedOpenerId: openerId }),
+    disarm: () => set((state) => state.armedOpenerId == null ? state : { armedOpenerId: null }),
+    toggle: (openerId) => set((state) => ({ armedOpenerId: state.armedOpenerId === openerId ? null : openerId }))
+  }
+}));
+var useArmedLocationOpenerId = () => useLocationPickStore((state) => state.armedOpenerId);
+var useLocationPickActions = () => useLocationPickStore((state) => state.actions);
+
+// src/openers/LocationPickOnMap.tsx
+var roundCoordinate = (value) => Number(value.toFixed(7));
+var LocationPickOnMap = ({ onPick }) => {
+  const { current: map } = useMap();
+  const armedOpenerId = useArmedLocationOpenerId();
+  const { disarm } = useLocationPickActions();
+  useEffect(
+    function openArmedOpenerOnNextMapClick() {
+      if (!map || !armedOpenerId) {
+        return;
+      }
+      const opener = findLocationOpener(armedOpenerId);
+      if (!opener) {
+        return;
+      }
+      const onClick = (event) => {
+        const target = {
+          lngLat: [roundCoordinate(event.lngLat.lng), roundCoordinate(event.lngLat.lat)],
+          zoom: map.getZoom()
+        };
+        openLocationInNewTab(opener, target);
+        disarm();
+        onPick?.(target, opener);
+      };
+      const onKeyDown = (event) => {
+        if (event.key === "Escape") {
+          disarm();
+        }
+      };
+      map.on("click", onClick);
+      window.addEventListener("keydown", onKeyDown);
+      return function stopListeningForPick() {
+        map.off("click", onClick);
+        window.removeEventListener("keydown", onKeyDown);
+      };
+    },
+    [armedOpenerId, disarm, map, onPick]
+  );
+  return null;
+};
+var SelectedMapFeatureLayer = ({
+  data,
+  shownImage,
+  providers,
+  bbox,
+  zoom,
+  color = MAP_FEATURE_COLOR
+}) => {
+  const drawnFeatures = useAllProviderMapFeatures(providers, bbox, zoom);
+  const target = data ? drawnFeatures.find((feature) => feature.featureId === data.feature.id)?.lngLat ?? data.feature.lngLat : null;
+  const camera = shownImage?.lngLat;
+  const points = {
+    type: "FeatureCollection",
+    features: target ? [{ type: "Feature", properties: {}, geometry: { type: "Point", coordinates: target } }] : []
+  };
+  const line = {
+    type: "FeatureCollection",
+    features: target && camera ? [
+      {
+        type: "Feature",
+        properties: {},
+        geometry: { type: "LineString", coordinates: [camera, target] }
+      }
+    ] : []
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Source, { data: line, id: "selected-map-feature-line", type: "geojson" }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "selected-map-feature-line",
+        paint: { "line-color": SELECTION_COLOR, "line-width": 1.5, "line-dasharray": [2, 1.5] },
+        source: "selected-map-feature-line",
+        type: "line"
+      }
+    ),
+    /* @__PURE__ */ jsx(Source, { data: points, id: "selected-map-feature-point", type: "geojson" }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "selected-map-feature-disk",
+        paint: {
+          "circle-radius": 17,
+          "circle-color": color,
+          "circle-opacity": VIEW_SHAPE_FILL_OPACITY
+        },
+        source: "selected-map-feature-point",
+        type: "circle"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "selected-map-feature-dot",
+        paint: {
+          "circle-radius": ["interpolate", ["linear"], ["zoom"], 10, 1.8, 14, 3.6, 18, 4.8],
+          "circle-color": color
+        },
+        source: "selected-map-feature-point",
+        type: "circle"
+      }
+    )
+  ] });
+};
+var MAPILLARY_FEATURE_BAR_LABELS = {
+  en: {
+    name: (value) => mapillaryValueName(value, "en"),
+    seen: "Seen",
+    noPhotos: "Mapillary lists no photos for this feature.",
+    daysSummary: (photos, days) => `${photos} photos on ${days} days`,
+    dayPhotos: (photos, canStep) => `${photos} photo${photos === 1 ? "" : "s"}${canStep ? " \u2014 click for the next one" : ""}`
+  },
+  de: {
+    name: (value) => mapillaryValueName(value, "de"),
+    seen: "Gesehen",
+    noPhotos: "Mapillary f\xFChrt keine Fotos zu diesem Objekt.",
+    daysSummary: (photos, days) => `${photos} Fotos an ${days} Tagen`,
+    dayPhotos: (photos, canStep) => `${photos} Foto${photos === 1 ? "" : "s"}${canStep ? " \u2014 klicken f\xFCr das n\xE4chste" : ""}`
+  }
+};
+var MapillaryFeatureBar = ({
+  data,
+  shownImage,
+  onShow,
+  labels: labelOverrides
+}) => {
+  const { locale } = useStreetImageryI18n();
+  const labels = { ...MAPILLARY_FEATURE_BAR_LABELS[locale], ...labelOverrides };
+  const { feature, days, images } = data;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", title: feature.value, children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: "",
+          className: "size-7 shrink-0",
+          onError: (event) => {
+            event.currentTarget.style.display = "none";
+          },
+          src: mapillaryIconUrl(feature.value)
+        },
+        feature.value
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "truncate text-sm leading-tight font-medium text-slate-900", children: labels.name(feature.value) }),
+        /* @__PURE__ */ jsxs("p", { className: "truncate text-xs leading-tight text-slate-500", children: [
+          labels.seen,
+          " ",
+          /* @__PURE__ */ jsx(PhotoDate, { timestamp: feature.firstSeenAt }),
+          " \u2013",
+          " ",
+          /* @__PURE__ */ jsx(PhotoDate, { timestamp: feature.lastSeenAt })
+        ] })
+      ] })
+    ] }),
+    days.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: labels.noPhotos }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": labels.daysSummary(images.length, days.length),
+        className: "flex gap-1 overflow-x-auto",
+        role: "group",
+        children: days.map((day) => {
+          const noon = /* @__PURE__ */ new Date(`${day.day}T12:00:00Z`);
+          const shownIndex = shownImage ? day.images.findIndex((image) => image.id === shownImage.id) : -1;
+          const active = shownIndex >= 0;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              "aria-pressed": active,
+              className: `shrink-0 rounded-md border px-2 py-1 text-xs whitespace-nowrap ${active ? "border-amber-500 bg-amber-100 text-amber-950" : "border-slate-300 bg-white text-slate-700 hover:border-slate-400"}`,
+              onClick: () => {
+                const next = active ? day.images[(shownIndex + 1) % day.images.length] : day.best;
+                if (next) {
+                  onShow(next);
+                }
+              },
+              title: `${formatDateTooltip(noon, locale)}
+${labels.dayPhotos(day.images.length, active && day.images.length > 1)}`,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatMonth(noon, locale) }),
+                " ",
+                /* @__PURE__ */ jsx(
+                  PhotoCount,
+                  {
+                    className: `align-[-1px] ${active ? "text-amber-800" : "text-slate-500"}`,
+                    index: active ? shownIndex + 1 : void 0,
+                    total: day.images.length
+                  }
+                )
+              ]
+            },
+            day.day
+          );
+        })
+      }
+    )
+  ] });
+};
+var DEFAULT_YEAR_LINES = [1, 2, 3, 4];
+var BINS = 60;
+var STEP = 1e-3;
+var CHART_HEIGHT_PX = 36;
+var RED = "#dc2626";
+var HANDLE_CLASS = "pointer-events-none absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none bg-transparent focus:outline-none [&::-webkit-slider-runnable-track]:appearance-none [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-slate-800 [&::-webkit-slider-thumb]:shadow [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-slate-800 [&::-moz-range-thumb]:shadow focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-sky-500 focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-sky-500";
+var percent = (position) => `${position * 100}%`;
+var PhotoDateRangeFilter = ({
+  value,
+  onChange,
+  capturedAt,
+  yearLines = DEFAULT_YEAR_LINES,
+  recommendedMaxAgeYears,
+  markers = [],
+  maxYears,
+  now: nowProp,
+  dateInputs = "collapsed",
+  className,
+  allDatesAction = true
+}) => {
+  const { locale, messages } = useStreetImageryI18n();
+  const text = messages.dateFilter;
+  const [startNow] = useState(() => Date.now());
+  const now = nowProp ?? startNow;
+  const scale = { now, maxYears };
+  const [dragged, setDragged] = useState(null);
+  const fromInput = useRef(null);
+  const toInput = useRef(null);
+  const positions = dragged ?? dateRangeToSliderPositions(value, scale);
+  const shownRange = dragged ? sliderPositionsToDateRange(dragged, scale) : value;
+  const readPositions = (moved) => {
+    const from = Number(fromInput.current?.value ?? positions.from);
+    const to = Number(toInput.current?.value ?? positions.to);
+    return moved === "from" ? { from: Math.min(from, to), to } : { from, to: Math.max(from, to) };
+  };
+  const commitOnRelease = (moved) => (input) => {
+    if (!input) {
+      return void 0;
+    }
+    const commit = () => {
+      setDragged(null);
+      const next = sliderPositionsToDateRange(readPositions(moved), scale);
+      const other = moved === "from" ? "to" : "from";
+      onChange({ ...next, [other]: value[other] });
+    };
+    input.addEventListener("change", commit);
+    return () => {
+      input.removeEventListener("change", commit);
+    };
+  };
+  const trackDrag = (moved, event) => {
+    if (event.type === "input") {
+      setDragged(readPositions(moved));
+    }
+  };
+  const bins = capturedAt ? dateSliderBins(capturedAt, scale, BINS) : [];
+  const maxCount = Math.max(1, ...bins);
+  const years = [
+    ...new Set(recommendedMaxAgeYears ? [...yearLines, recommendedMaxAgeYears] : yearLines)
+  ].map((count) => ({ count, position: dateSliderPosition(yearsAgoMs(count, now), scale) })).filter(({ position }) => position > 0 && position < 1);
+  const shownMarkers = markers.map((marker) => {
+    const time = typeof marker.date === "number" ? marker.date : parseIsoDateStartMs(marker.date);
+    return { ...marker, position: dateSliderPosition(time, scale) };
+  }).filter(({ position }) => position > 0 && position < 1);
+  const day = (isoDate) => formatDate(parseIsoDateStartMs(isoDate), locale);
+  const rangeLabel = shownRange.from && shownRange.to ? text.between(day(shownRange.from), day(shownRange.to)) : shownRange.from ? text.since(day(shownRange.from)) : shownRange.to ? text.until(day(shownRange.to)) : text.allDates;
+  const setYears = (count) => {
+    onChange({ from: new Date(yearsAgoMs(count, now)).toISOString().slice(0, 10) });
+  };
+  const setDay = (key, input) => {
+    if (input === "") {
+      onChange({ ...value, [key]: void 0 });
+    } else if (isIsoDate(input)) {
+      onChange({ ...value, [key]: input });
+    }
+  };
+  const isAllDates = !shownRange.from && !shownRange.to;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative",
+        style: { height: CHART_HEIGHT_PX, marginTop: shownMarkers.length > 0 ? 14 : 0 },
+        children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 flex items-end", children: bins.map((count, index) => {
+            const start = index / BINS;
+            const inRange = start + 1 / BINS > positions.from && start < positions.to;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `flex-1 rounded-t-[1px] ${inRange ? "bg-slate-500" : "bg-slate-300"}`,
+                style: {
+                  height: count === 0 ? 0 : Math.max(2, Math.log1p(count) / Math.log1p(maxCount) * CHART_HEIGHT_PX)
+                },
+                title: count > 0 ? text.photoCount(count) : void 0
+              },
+              index
+            );
+          }) }),
+          years.map(({ count, position }) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-y-0 w-px -translate-x-1/2",
+              style: {
+                left: percent(position),
+                backgroundColor: count === recommendedMaxAgeYears ? RED : "rgb(148 163 184 / 0.7)"
+              }
+            },
+            count
+          )),
+          shownMarkers.map((marker) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-y-0 w-0 border-l-2 border-dashed",
+              style: { left: percent(marker.position), borderColor: marker.color ?? RED },
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute -top-3.5 -translate-x-1/2 text-[10px] leading-none whitespace-nowrap",
+                  style: { color: marker.color ?? RED },
+                  children: marker.label
+                }
+              )
+            },
+            `${marker.date}-${marker.label}`
+          ))
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative h-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 top-1/2 h-1 -translate-y-1/2 rounded-full bg-slate-200", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-y-0 rounded-full bg-slate-700",
+          style: {
+            left: percent(positions.from),
+            right: percent(1 - positions.to)
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-label": text.fromHandle,
+          "aria-valuetext": shownRange.from ? day(shownRange.from) : text.allDates,
+          className: HANDLE_CLASS,
+          max: 1,
+          min: 0,
+          onChange: (event) => {
+            trackDrag("from", event.nativeEvent);
+          },
+          ref: (input) => {
+            fromInput.current = input;
+            return commitOnRelease("from")(input);
+          },
+          step: STEP,
+          type: "range",
+          value: positions.from
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-label": text.toHandle,
+          "aria-valuetext": shownRange.to ? day(shownRange.to) : text.allDates,
+          className: HANDLE_CLASS,
+          max: 1,
+          min: 0,
+          onChange: (event) => {
+            trackDrag("to", event.nativeEvent);
+          },
+          ref: (input) => {
+            toInput.current = input;
+            return commitOnRelease("to")(input);
+          },
+          step: STEP,
+          type: "range",
+          value: positions.to
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative mx-2 h-4", children: years.map(({ count, position }) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `absolute top-0 -translate-x-1/2 rounded px-0.5 text-[10px] leading-4 whitespace-nowrap hover:underline ${count === recommendedMaxAgeYears ? "font-semibold text-red-600" : "text-slate-500 hover:text-slate-900"}`,
+        onClick: () => {
+          setYears(count);
+        },
+        style: { left: percent(position) },
+        title: count === recommendedMaxAgeYears ? text.recommendedMaxAge(count) : text.lastYears(count),
+        type: "button",
+        children: text.yearsShort(count)
+      },
+      count
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline justify-between gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-700", children: rangeLabel }),
+      isAllDates || !allDatesAction ? null : /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "shrink-0 font-medium text-slate-600 underline decoration-slate-300 underline-offset-2 hover:text-slate-900",
+          onClick: () => {
+            onChange({});
+          },
+          type: "button",
+          children: text.allDates
+        }
+      )
+    ] }),
+    dateInputs === "none" ? null : /* @__PURE__ */ jsxs("details", { className: "mt-1 text-xs text-slate-600", open: dateInputs === "open" || void 0, children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none hover:text-slate-900", children: text.exactDates }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1.5 grid grid-cols-2 gap-2", children: ["from", "to"].map((key) => /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
+        text[key],
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "rounded-md border border-slate-200 px-2 py-1.5 text-sm text-slate-800",
+            onChange: (event) => {
+              setDay(key, event.target.value);
+            },
+            type: "date",
+            value: value[key] ?? ""
+          }
+        )
+      ] }, key)) })
+    ] })
+  ] });
+};
 
-export { StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useAllProviderMapFeatures, useAllProviderMapFeaturesLoading, useAllProviderPhotos, useMapViewportBbox, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences };
+export { BASE_COLOR, FloatingPhotoViewer, FloatingViewerInfoButton, LocationPickOnMap, MAPILLARY_FEATURE_BAR_LABELS, MapillaryFeatureBar, PhotoCount, PhotoDate, PhotoDateRangeFilter, SELECTION_COLOR, SelectedMapFeatureLayer, StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, VIEW_SHAPE_FILL_OPACITY, ViewpointLayer, getViewpointSession, previousDataWhile, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useActiveDirectionKey, useAllProviderMapFeatures, useAllProviderPhotos, useArmedLocationOpenerId, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useLocationPickActions, useMapViewportBbox, useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useSelectedMapillaryFeature, useViewSuggestions, useViewpointLine, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel };