@osm-editor-kit/street-imagery-react 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/index.js

@@ -1,67 +1,127 @@
-export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-72HJV6II.js';
-export { PanoramaxPanel } from './chunk-ZH3TPW4D.js';
+import { useStreetImageryI18n } from './chunk-HA4GJWHI.js';
+export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-HA4GJWHI.js';
+export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-53RA4OSJ.js';
+export { PanoramaxPanel } from './chunk-EQ2JKLGT.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, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, distanceMeters, fetchImageDetections, mapFeaturesToFeatureCollection, buildMapFeatureLayerFilter, featureSourceId, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, VIEWFIELD_MIN_ZOOM } from '@osm-editor-kit/street-imagery';
+import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, viewConeGeoJson, viewShapeRadiusMeters, setStreetImageryConfig, viewfieldLayerId, photoLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoMatchesFilters, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, formatLocalDateTime, formatMonth, formatRelativeDate, formatDateTooltip, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, fetchImageDetections, findLocationOpener, mapillaryIconUrl, openLocationInNewTab, alignLineToPoints, coneRadiusMeters, mapFeaturesToFeatureCollection, emptyPointCollection, buildMapFeatureLayerFilter, featureSourceId, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, 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, useRef, useEffectEvent } from 'react';
 import { 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
 }) => {
-  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,
+        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,
+      {
+        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,
+      {
+        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,
+      {
+        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) => {
@@ -116,7 +176,8 @@ var useProviderMapFeatures = (providerId, bbox, zoom) => {
 };
 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",
@@ -128,7 +189,9 @@ var INTERACTIVE_PANO_PROVIDERS = /* @__PURE__ */ new Set([
 var StreetLevelImageryViewCone = ({
   selectedPhoto,
   zoom,
-  viewerPov
+  viewerPov,
+  color = SELECTION_COLOR,
+  scale = 2.5
 }) => {
   const apex = viewerPov?.lngLat ?? selectedPhoto.lngLat;
   const isPano = selectedPhoto.isPano === true;
@@ -148,7 +211,11 @@ 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(
@@ -158,37 +225,14 @@ var StreetLevelImageryViewCone = ({
         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"],
@@ -206,6 +250,24 @@ var padBbox = ([west, south, east, north], 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_SORT_KEY = ["coalesce", ["get", "capturedAt"], 0];
 var FEATURE_SORT_KEY = ["coalesce", ["get", "lastSeenAt"], 0];
 var PhotoProviderLayer = ({
@@ -215,7 +277,10 @@ var PhotoProviderLayer = ({
   filter,
   showSequences,
   showViewfields,
-  photoCircleColor
+  photoCircleColor,
+  activeSequenceId,
+  hasActiveSequence,
+  shownPhotoId
 }) => {
   const adapter = adapterById[providerId];
   const { data: photos = [] } = useProviderPhotos(providerId, bbox, zoom);
@@ -227,6 +292,41 @@ var PhotoProviderLayer = ({
   ) : 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);
@@ -254,7 +354,34 @@ 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 sequenceCollection = alignedSequences.length > 0 ? sequencesToFeatureCollection(alignedSequences) : emptyLineCollection();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     adapter.fetchSequences && showSequences ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -272,10 +399,15 @@ var PhotoProviderLayer = ({
           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
           }
         }
       )
@@ -296,9 +428,11 @@ var PhotoProviderLayer = ({
           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)"
           }
         }
       ),
@@ -308,10 +442,11 @@ var PhotoProviderLayer = ({
           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)
           }
         }
       )
@@ -335,10 +470,8 @@ var PhotoProviderLayer = ({
         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
         }
       }
     )
@@ -380,9 +513,7 @@ 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
         }
       }
     )
@@ -408,6 +539,8 @@ var StreetLevelImagerySourcesAndLayers = ({
     selectedPhoto,
     selectedSequenceId,
     viewerPov,
+    viewConeColor,
+    viewConeScale,
     photoCircleColor,
     mapFeatureCircleColor
   } = options;
@@ -425,11 +558,13 @@ 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) => adapterById[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,
@@ -437,6 +572,9 @@ var StreetLevelImagerySourcesAndLayers = ({
         bbox,
         filter,
         mapFeatureCircleColor,
+        activeSequenceId: providerId === selectedProviderId ? activeSequenceId : null,
+        hasActiveSequence: activeSequenceId != null,
+        shownPhotoId: showViewCone && providerId === selectedProviderId ? selectedPhoto?.photoId : null,
         photoCircleColor,
         providerId,
         showSequences,
@@ -447,6 +585,8 @@ var StreetLevelImagerySourcesAndLayers = ({
     showViewCone && selectedPhoto ? /* @__PURE__ */ jsx(
       StreetLevelImageryViewCone,
       {
+        color: viewConeColor ?? SELECTION_COLOR,
+        scale: viewConeScale,
         selectedPhoto,
         viewerPov,
         zoom
@@ -455,23 +595,28 @@ var StreetLevelImagerySourcesAndLayers = ({
     showSelectionHighlight ? /* @__PURE__ */ jsx(
       StreetLevelImagerySelectionOverlay,
       {
+        cameraLngLat: viewerPov?.lngLat,
         selectedPhoto,
-        selectedSequence
+        selectedSequence: providerDrawsSequences ? null : selectedSequence,
+        sequenceBeforeId
       }
     ) : null
   ] });
 };
 var MapillaryPanel2 = lazy(
-  () => import('./MapillaryPanel-I5GKT6YT.js').then((module) => ({
+  () => import('./MapillaryPanel-N45NQY4C.js').then((module) => ({
     default: module.MapillaryPanel
   }))
 );
 var PanoramaxPanel2 = lazy(
-  () => import('./PanoramaxPanel-J6ANR6LB.js').then((module) => ({
+  () => import('./PanoramaxPanel-MFI4L67Z.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,
@@ -480,13 +625,15 @@ var StreetLevelImageryViewer = ({
   onViewerPhoto,
   lookAtBearing,
   lookAt,
-  outlines
+  outlines,
+  hideAttribution
 }) => {
   if (photo.providerId === "mapillary") {
     return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
       MapillaryPanel2,
       {
         groupPhotos,
+        hideAttribution,
         onEaseMapToPoint,
         onPhotoSelected,
         lookAt,
@@ -502,6 +649,8 @@ var StreetLevelImageryViewer = ({
       PanoramaxPanel2,
       {
         groupPhotos,
+        hideLegend: hideAttribution,
+        onViewerPhoto,
         onEaseMapToPoint,
         onPhotoSelected,
         photo
@@ -589,18 +738,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);
@@ -677,32 +814,26 @@ var usePhotoThumbnail = (photo) => useQuery({
   enabled: photo != null,
   staleTime: 24 * 60 * 60 * 1e3
 });
-
-// src/viewpoints/viewDirectionLabels.ts
-var ROLE_LABELS = {
-  here: "Here",
-  "line-start": "Start",
-  "line-end": "End",
-  "into-node": "Junction",
-  custom: "View"
-};
-var viewpointRoleLabel = (role) => ROLE_LABELS[role];
-var viewSuggestionLabel = ({ viewpoint, direction }) => {
-  const role = viewpoint.label ?? viewpointRoleLabel(viewpoint.role);
-  switch (direction.kind) {
-    case "forward":
-      return `${role}, looking along the street`;
-    case "back":
-      return `${role}, looking back along the street`;
-    case "into":
-      return `${role}, looking into the junction`;
-    case "N":
-    case "E":
-    case "S":
-    case "W":
-      return `${role}, looking ${direction.kind}`;
+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;
@@ -736,11 +867,14 @@ var Icon = ({ path, className = "size-4" }) => /* @__PURE__ */ jsx(
 );
 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"
+  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,
@@ -759,18 +893,18 @@ var ToolbarButton = ({
     children
   }
 );
-var formatShortDate = (capturedAt) => capturedAt == null ? "\u2014" : new Intl.DateTimeFormat("en", { year: "2-digit", month: "short" }).format(capturedAt);
 var SuggestionChip = ({
   suggestion,
   active,
   onSelect
 }) => {
+  const { messages } = useStreetImageryI18n();
   const best = suggestion.candidates[0];
-  const label = viewSuggestionLabel(suggestion);
+  const label = viewSuggestionLabel(suggestion, messages);
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      "aria-label": best ? label : `${label} (no photo)`,
+      "aria-label": best ? label : messages.viewer.noPhoto(label),
       "aria-pressed": active,
       className: [
         "inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-xs whitespace-nowrap",
@@ -778,10 +912,10 @@ var SuggestionChip = ({
       ].join(" "),
       disabled: !best,
       onClick: onSelect,
-      title: best ? label : `${label}: no matching photo`,
+      title: best ? label : messages.viewer.noMatchingPhoto(label),
       type: "button",
       children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: viewpointRoleLabel(suggestion.viewpoint.role) }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: suggestion.viewpoint.label ?? messages.viewpointRole[suggestion.viewpoint.role] }),
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -791,13 +925,24 @@ var SuggestionChip = ({
             children: /* @__PURE__ */ jsx(Icon, { className: "size-3", path: ICONS.arrow })
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: active ? "text-fuchsia-100" : "text-slate-400", children: formatShortDate(best?.photo.capturedAt) })
+        best ? /* @__PURE__ */ jsx(
+          PhotoDate,
+          {
+            className: active ? "text-fuchsia-100" : "text-slate-400",
+            timestamp: best.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,
@@ -806,17 +951,18 @@ var FloatingPhotoViewer = ({
   onBack,
   onForward,
   onClose,
+  step,
+  toolbar,
   status,
   children,
   footer,
   drawer,
   storageKey = "street-imagery:floating-viewer"
 }) => {
+  const { messages } = useStreetImageryI18n();
   const [layout, setLayout] = useState(() => readLayout(storageKey));
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const dragRef = useRef(
-    null
-  );
+  const dragRef = useRef(null);
   const updateLayout = (next) => {
     setLayout(next);
     writeLayout(storageKey, next);
@@ -832,6 +978,10 @@ var FloatingPhotoViewer = ({
       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() {
@@ -885,7 +1035,7 @@ var FloatingPhotoViewer = ({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      "aria-label": "Photo viewer",
+      "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: {
         right: layout.right,
@@ -909,43 +1059,70 @@ var FloatingPhotoViewer = ({
             onPointerDown: (event) => startDrag(event, "move"),
             ...dragHandlers,
             children: [
-              /* @__PURE__ */ jsx(ToolbarButton, { disabled: !canGoBack, label: "Previous photo in history ([)", onClick: onBack, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.back }) }),
+              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
+              ] }),
+              /* @__PURE__ */ jsx(ToolbarButton, { disabled: !canGoBack, label: messages.viewer.backInHistory, onClick: onBack, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.undo }) }),
               /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
                   disabled: !canGoForward,
-                  label: "Next photo in history (])",
+                  label: messages.viewer.forwardInHistory,
                   onClick: onForward,
-                  children: /* @__PURE__ */ jsx(Icon, { path: ICONS.forward })
+                  children: /* @__PURE__ */ jsx(Icon, { path: ICONS.redo })
                 }
               ),
-              /* @__PURE__ */ jsx("h2", { className: "min-w-0 flex-1 truncate px-1 text-sm font-semibold text-slate-800", children: title }),
               /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
-                  label: "Minimize",
+                  label: messages.viewer.minimize,
                   onClick: () => updateLayout({ ...layout, minimized: true }),
                   children: /* @__PURE__ */ jsx(Icon, { path: ICONS.minimize })
                 }
               ),
-              /* @__PURE__ */ jsx(ToolbarButton, { label: "Close (Esc)", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.close }) })
+              /* @__PURE__ */ jsx(ToolbarButton, { label: messages.viewer.close, onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.close }) })
             ]
           }
         ),
-        suggestions.length > 0 ? /* @__PURE__ */ jsx(
+        toolbar ? /* @__PURE__ */ jsx("div", { className: "border-b border-slate-100 px-2 py-1.5", children: toolbar }) : suggestions.length > 0 ? /* @__PURE__ */ jsxs(
           "nav",
           {
-            "aria-label": "Suggested views",
+            "aria-label": messages.viewer.suggestedViews,
             className: "flex gap-1 overflow-x-auto border-b border-slate-100 px-2 py-1.5",
-            children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
-              SuggestionChip,
-              {
-                active: suggestion.direction.key === activeDirectionKey,
-                onSelect: () => onSelectSuggestion(suggestion),
-                suggestion
-              },
-              suggestion.direction.key
-            ))
+            title: messages.viewer.suggestedViewsHint,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 self-center pr-0.5 text-xs text-slate-500", children: messages.viewer.views }),
+              suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+                SuggestionChip,
+                {
+                  active: suggestion.direction.key === activeDirectionKey,
+                  onSelect: () => onSelectSuggestion(suggestion),
+                  suggestion
+                },
+                suggestion.direction.key
+              ))
+            ]
           }
         ) : null,
         /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto", children: [
@@ -1121,17 +1298,22 @@ var useViewpointSessionStore = create()((set, get) => ({
       set({ historyIndex: historyIndex + 1, activeDirectionKey: entry.directionKey });
       return entry;
     },
-    close: () => set({ viewpoints: [], line: null, activeDirectionKey: null })
+    close: () => set({ viewpoints: [], line: null, activeDirectionKey: null }),
+    reset: () => set({
+      viewpoints: [],
+      line: null,
+      activeDirectionKey: null,
+      history: [],
+      historyIndex: -1
+    })
   }
 }));
-var useViewpointSessionId = () => useViewpointSessionStore((state) => state.sessionId);
 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 useViewpointSessionActions = () => useViewpointSessionStore((state) => state.actions);
 var getViewpointSession = () => {
   const { actions, history, historyIndex } = useViewpointSessionStore.getState();
   return { actions, current: history[historyIndex] ?? null };
@@ -1219,5 +1401,126 @@ var useMapillaryImageDetections = (imageId, { filter, filterKey } = {}) => useQu
   enabled: !!imageId,
   staleTime: STALE_TIME
 });
+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 MapillaryFeatureBar = ({ data, shownImage, onShow }) => {
+  const { locale, messages } = useStreetImageryI18n();
+  const labels = messages.feature;
+  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__ */ jsxs("span", { className: active ? "text-amber-800" : "text-slate-500", children: [
+                  active ? `${shownIndex + 1}/` : "",
+                  day.images.length
+                ] })
+              ]
+            },
+            day.day
+          );
+        })
+      }
+    )
+  ] });
+};
 
-export { FloatingPhotoViewer, StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, ViewpointLayer, getViewpointSession, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useActiveDirectionKey, useAllProviderMapFeatures, useAllProviderMapFeaturesLoading, useAllProviderPhotos, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useMapViewportBbox, useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useViewSuggestions, useViewpointLine, useViewpointSessionActions, useViewpointSessionId, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel, viewpointRoleLabel };
+export { BASE_COLOR, FloatingPhotoViewer, FloatingViewerInfoButton, LocationPickOnMap, MapillaryFeatureBar, PhotoDate, SELECTION_COLOR, StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, VIEW_SHAPE_FILL_OPACITY, ViewpointLayer, getViewpointSession, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useActiveDirectionKey, useAllProviderMapFeatures, useAllProviderPhotos, useArmedLocationOpenerId, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useLocationPickActions, useMapViewportBbox, useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useViewSuggestions, useViewpointLine, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel };