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

package/README.md

@@ -117,10 +117,49 @@ const { data: detections } = useMapillaryImageDetections(photo.photoId, {
 <StreetLevelImageryViewer photo={photo} outlines={detections?.map((d) => ({ id: d.id, outline: d.outline }))} … />
 ```
 
-- Map layers: `filter.mapFeatureValue` limits which signs/objects are drawn (`matchesAnyGroup(SIGN_GROUPS)`).
+- Map layers: `filter.mapFeatureValue` limits which signs/objects are drawn: `signGroupFilter(['parking', 'bike'])` for sign groups, or `matchesAnyGroup(…)`.
 - Suggested views: `useViewSuggestions(viewpoints, { sources: [mapillaryPhotoSource, streetViewPhotoSource] })`.
 - `turnMapillaryViewerTo` / `setMapillaryViewerOutlines` work on a mapillary-js `Viewer` you own.
 
+## A selected sign: viewer, bar and map highlight
+
+Keep the selected sign (`featureId`) and its shown photo in your own state or URL:
+
+```tsx
+const { data, shownImage, firstImage } = useSelectedMapillaryFeature({
+  featureId,
+  shownPhotoId, // the photo the viewer shows now
+  minCapturedAt: fromMs, // optional: open the best photo from this time on
+})
+// Open `firstImage` first: showPhoto(targetImageToPhoto(firstImage))
+<MapillaryFeatureBar data={data} shownImage={shownImage} onShow={(image) => showPhoto(targetImageToPhoto(image))} />
+<StreetLevelImageryViewer lookAt={{ lngLat: data.feature.lngLat, outline: shownImage?.outline, value: data.feature.value }} … />
+// On the map, after StreetLevelImagerySourcesAndLayers: the sign's halo and a line from the camera
+<SelectedMapFeatureLayer data={data} shownImage={shownImage} providers={providers} bbox={bbox} zoom={zoom} />
+```
+
+A click on a sign dot: `queryStreetImageryFeatures(event).find((hit) => hit.kind === 'mapFeature')?.featureId`.
+
+## Date filter with a slider
+
+`PhotoDateRangeFilter` is the date filter of iD's photo panel as a controlled component: one slider with two handles on a scale that gives recent years more room. It works on plain `{ from?, to? }` days (`YYYY-MM-DD`), the same `DateRange` the layers take as `filter.date`.
+
+```tsx
+const { photos } = useAllProviderPhotos(providers, bbox, zoom) // no date: all photos in view
+
+<PhotoDateRangeFilter
+  value={date}
+  onChange={setDate} // on release of a handle, not while dragging
+  capturedAt={photos.map((photo) => photo.capturedAt)} // marks: where photos are
+  yearLines={[1, 2, 3, 4]} // lines with a label; a click shows the last N years
+  recommendedMaxAgeYears={2} // this line is red
+  markers={[{ date: '2024-04-01', label: 'Survey start' }]} // dashed lines for fixed dates
+  dateInputs="collapsed" // exact days: 'collapsed' (default), 'open' or 'none'
+/>
+```
+
+A handle at its end means no limit, so the left end also shows photos older than the slider spans (`maxYears`, default 10). The scale itself is in the core package (`dateSliderPosition`, `dateSliderBins`, …) for a host that draws its own chart. The texts are in `messages.dateFilter`.
+
 ## Pick a place on the map to open elsewhere
 
 A button arms a location opener (see `@osm-editor-kit/street-imagery`), the next map click opens the clicked place in that service and disarms; Escape cancels.

package/dist/{chunk-HA4GJWHI.js → chunk-ZAIXGYAH.js}

@@ -1,4 +1,4 @@
-import { DEFAULT_STREET_IMAGERY_LOCALE, mapillaryValueName } from '@osm-editor-kit/street-imagery';
+import { DEFAULT_STREET_IMAGERY_LOCALE } from '@osm-editor-kit/street-imagery';
 import { createContext, use } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -11,13 +11,28 @@ var en = {
     forwardInHistory: "Forward in history (])",
     minimize: "Minimize",
     close: "Close (Esc)",
-    views: "Views",
     suggestedViews: "Suggested views",
     suggestedViewsHint: "Suggested views: where the photo is taken from, and which way it looks",
     noPhoto: (label) => `${label} (no photo)`,
-    noMatchingPhoto: (label) => `${label}: no matching photo`
+    noMatchingPhoto: (label) => `${label}: no matching photo`,
+    nextPhotoOfView: (label) => `${label} \u2014 click for the next photo`
   },
   unknownDate: "Unknown date",
+  dateFilter: {
+    allDates: "All dates",
+    since: (date) => `Since ${date}`,
+    until: (date) => `Until ${date}`,
+    between: (from, to) => `${from} \u2013 ${to}`,
+    yearsShort: (years) => `${years} y`,
+    lastYears: (years) => years === 1 ? "Show the last year" : `Show the last ${years} years`,
+    recommendedMaxAge: (years) => `Recommended: photos of the last ${years === 1 ? "year" : `${years} years`}`,
+    fromHandle: "Oldest photos to show",
+    toHandle: "Newest photos to show",
+    exactDates: "Exact dates",
+    from: "From",
+    to: "To",
+    photoCount: (count) => count === 1 ? "1 photo" : `${count} photos`
+  },
   viewpointRole: {
     here: "Here",
     "line-start": "Start",
@@ -25,24 +40,22 @@ var en = {
     "into-node": "Junction",
     custom: "View"
   },
+  compass: ["N", "NE", "E", "SE", "S", "SW", "W", "NW"],
   viewDirection: (role, kind) => {
     switch (kind) {
       case "forward":
         return `${role}, looking along the street`;
       case "back":
         return `${role}, looking back along the street`;
+      case "right":
+        return `${role}, looking right across the street`;
+      case "left":
+        return `${role}, looking left across the street`;
       case "into":
         return `${role}, looking into the junction`;
       default:
         return `${role}, looking ${kind}`;
     }
-  },
-  feature: {
-    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" : ""}`
   }
 };
 var COMPASS_DE = { N: "Norden", E: "Osten", S: "S\xFCden", W: "Westen" };
@@ -54,13 +67,28 @@ var de = {
     forwardInHistory: "Vor im Verlauf (])",
     minimize: "Minimieren",
     close: "Schlie\xDFen (Esc)",
-    views: "Blicke",
     suggestedViews: "Vorgeschlagene Blicke",
     suggestedViewsHint: "Vorgeschlagene Blicke: von wo das Foto aufgenommen ist und wohin es schaut",
     noPhoto: (label) => `${label} (kein Foto)`,
-    noMatchingPhoto: (label) => `${label}: kein passendes Foto`
+    noMatchingPhoto: (label) => `${label}: kein passendes Foto`,
+    nextPhotoOfView: (label) => `${label} \u2014 klicken f\xFCr das n\xE4chste Foto`
   },
   unknownDate: "Datum unbekannt",
+  dateFilter: {
+    allDates: "Alle Daten",
+    since: (date) => `Seit ${date}`,
+    until: (date) => `Bis ${date}`,
+    between: (from, to) => `${from} \u2013 ${to}`,
+    yearsShort: (years) => `${years} J.`,
+    lastYears: (years) => years === 1 ? "Das letzte Jahr zeigen" : `Die letzten ${years} Jahre zeigen`,
+    recommendedMaxAge: (years) => `Empfohlen: Fotos ${years === 1 ? "des letzten Jahres" : `der letzten ${years} Jahre`}`,
+    fromHandle: "\xC4lteste Fotos, die gezeigt werden",
+    toHandle: "Neueste Fotos, die gezeigt werden",
+    exactDates: "Genaue Daten",
+    from: "Von",
+    to: "Bis",
+    photoCount: (count) => count === 1 ? "1 Foto" : `${count} Fotos`
+  },
   viewpointRole: {
     here: "Hier",
     "line-start": "Anfang",
@@ -68,24 +96,22 @@ var de = {
     "into-node": "Knoten",
     custom: "Blick"
   },
+  compass: ["N", "NO", "O", "SO", "S", "SW", "W", "NW"],
   viewDirection: (role, kind) => {
     switch (kind) {
       case "forward":
         return `${role}, Blick entlang der Stra\xDFe`;
       case "back":
         return `${role}, Blick zur\xFCck entlang der Stra\xDFe`;
+      case "right":
+        return `${role}, Blick nach rechts quer zur Stra\xDFe`;
+      case "left":
+        return `${role}, Blick nach links quer zur Stra\xDFe`;
       case "into":
         return `${role}, Blick in den Knoten`;
       default:
         return `${role}, Blick nach ${COMPASS_DE[kind] ?? kind}`;
     }
-  },
-  feature: {
-    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 STREET_IMAGERY_MESSAGES = {
@@ -99,10 +125,11 @@ var DEFAULT_I18N = {
 var I18nContext = createContext(DEFAULT_I18N);
 var mergeMessages = (base, overrides) => overrides ? {
   unknownDate: overrides.unknownDate ?? base.unknownDate,
+  dateFilter: { ...base.dateFilter, ...overrides.dateFilter },
   viewer: { ...base.viewer, ...overrides.viewer },
   viewpointRole: { ...base.viewpointRole, ...overrides.viewpointRole },
-  viewDirection: overrides.viewDirection ?? base.viewDirection,
-  feature: { ...base.feature, ...overrides.feature }
+  compass: overrides.compass?.length === 8 ? overrides.compass : base.compass,
+  viewDirection: overrides.viewDirection ?? base.viewDirection
 } : base;
 var StreetImageryLocaleProvider = ({
   locale,

package/dist/filters/PhotoDateRangeFilter.d.ts

@@ -0,0 +1,41 @@
+import { type DateRange } from '@osm-editor-kit/street-imagery';
+/** A fixed date to show in the chart, e.g. the start of a project or of a survey. */
+export type PhotoDateMarker = {
+    /** A day as `YYYY-MM-DD`, or a time (ms). */
+    date: string | number;
+    label: string;
+    /** CSS color of line and label. Default red. */
+    color?: string;
+};
+export type PhotoDateRangeFilterProps = {
+    /** The chosen range, days as `YYYY-MM-DD`. No `from` and no `to`: all dates. */
+    value: DateRange;
+    /** Called when a handle is released, a year label is clicked or a date input changes. */
+    onChange: (range: DateRange) => void;
+    /**
+     * Capture times (ms) of the photos to show as marks above the slider, usually all photos in
+     * view before the date filter. Without it there are no marks.
+     */
+    capturedAt?: Iterable<number | null | undefined>;
+    /** Lines with a label at these ages in years; a click on a label shows that many years. */
+    yearLines?: readonly number[];
+    /** Its line is red; added to `yearLines` when it is not one of them. */
+    recommendedMaxAgeYears?: number;
+    markers?: readonly PhotoDateMarker[];
+    /** Years the slider spans. Default 10. */
+    maxYears?: number;
+    /** Reference time (ms). Default: the time of the first render. */
+    now?: number;
+    /**
+     * The two date inputs for exact days, in sync with the slider: folded away (default), open,
+     * or left out.
+     */
+    dateInputs?: 'collapsed' | 'open' | 'none';
+    className?: string;
+};
+/**
+ * Date filter for photos after iD's photo age slider: one slider with two handles on a scale that
+ * gives recent years more room, marks that show how many photos there are at each time, lines at
+ * whole years, and optional fixed markers. Controlled: `value` in, `onChange` out.
+ */
+export declare const PhotoDateRangeFilter: ({ value, onChange, capturedAt, yearLines, recommendedMaxAgeYears, markers, maxYears, now: nowProp, dateInputs, className, }: PhotoDateRangeFilterProps) => import("react").JSX.Element;

package/dist/i18n/PhotoCount.d.ts

@@ -0,0 +1,12 @@
+type PhotoCountProps = {
+    /** Position of the shown photo, starting at 1; leave out to show only the total. */
+    index?: number;
+    total: number;
+    className?: string;
+};
+/**
+ * "1/5" behind a small picture icon: this button has several photos and a click on it shows the
+ * next one.
+ */
+export declare const PhotoCount: ({ index, total, className }: PhotoCountProps) => import("react").JSX.Element;
+export {};

package/dist/i18n/StreetImageryLocaleProvider.d.ts

@@ -7,7 +7,7 @@ type StreetImageryI18n = {
 };
 /** Overrides per group, e.g. `{ feature: { name: germanSignName } }`. */
 export type StreetImageryMessageOverrides = {
-    [Group in keyof StreetImageryMessages]?: StreetImageryMessages[Group] extends object ? StreetImageryMessages[Group] extends (...args: never[]) => unknown ? StreetImageryMessages[Group] : Partial<StreetImageryMessages[Group]> : StreetImageryMessages[Group];
+    [Group in keyof StreetImageryMessages]?: StreetImageryMessages[Group] extends object ? StreetImageryMessages[Group] extends ((...args: never[]) => unknown) | readonly unknown[] ? StreetImageryMessages[Group] : Partial<StreetImageryMessages[Group]> : StreetImageryMessages[Group];
 };
 type StreetImageryLocaleProviderProps = {
     /** Language of the package's texts and date formats. Without a provider: English. */

package/dist/i18n/messages.d.ts

@@ -11,25 +11,35 @@ export type StreetImageryMessages = {
         forwardInHistory: string;
         minimize: string;
         close: string;
-        views: string;
         suggestedViews: string;
         suggestedViewsHint: string;
         noPhoto: (label: string) => string;
         noMatchingPhoto: (label: string) => string;
+        nextPhotoOfView: (label: string) => string;
     };
     viewpointRole: Record<ViewpointRole, string>;
+    /** Eight compass points, clockwise from north: N, NE, E, SE, S, SW, W, NW. */
+    compass: readonly string[];
     unknownDate: string;
+    dateFilter: {
+        allDates: string;
+        /** e.g. "Since 5 Oct 2024". */
+        since: (date: string) => string;
+        until: (date: string) => string;
+        between: (from: string, to: string) => string;
+        /** Short label below a year line, e.g. "2 y". */
+        yearsShort: (years: number) => string;
+        /** Tooltip of a year label; a click shows the photos of the last `years` years. */
+        lastYears: (years: number) => string;
+        recommendedMaxAge: (years: number) => string;
+        fromHandle: string;
+        toHandle: string;
+        exactDates: string;
+        from: string;
+        to: string;
+        photoCount: (count: number) => string;
+    };
     /** e.g. "Start, looking along the street"; `role` is the viewpoint's label. */
     viewDirection: (role: string, kind: ViewDirection['kind']) => string;
-    feature: {
-        /** Name of a Mapillary value like `regulatory--turn-right-ahead--g1`. */
-        name: (value: string) => string;
-        /** Line below the name; `first` and `last` are the rendered dates. */
-        seen: string;
-        noPhotos: string;
-        daysSummary: (photos: number, days: number) => string;
-        /** Third tooltip line of a day button, below date and age. */
-        dayPhotos: (photos: number, canStep: boolean) => string;
-    };
 };
 export declare const STREET_IMAGERY_MESSAGES: Record<StreetImageryLocale, StreetImageryMessages>;

package/dist/index.d.ts

@@ -21,7 +21,11 @@ export { mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo, ty
 export * from './mapillary/useMapillaryFeatures';
 export { LocationPickOnMap, type LocationPickOnMapProps } from './openers/LocationPickOnMap';
 export * from './openers/useLocationPickStore';
+export { SelectedMapFeatureLayer, type SelectedMapFeatureLayerProps, } from './mapillary/SelectedMapFeatureLayer';
 export { MapillaryFeatureBar, type MapillaryFeatureBarProps } from './mapillary/MapillaryFeatureBar';
+export { MAPILLARY_FEATURE_BAR_LABELS, type MapillaryFeatureBarLabels, } from './mapillary/featureBarLabels';
 export { STREET_IMAGERY_MESSAGES, type StreetImageryMessages } from './i18n/messages';
 export { StreetImageryLocaleProvider, useStreetImageryI18n, type StreetImageryMessageOverrides, } from './i18n/StreetImageryLocaleProvider';
+export { PhotoDateRangeFilter, type PhotoDateMarker, type PhotoDateRangeFilterProps, } from './filters/PhotoDateRangeFilter';
 export { PhotoDate } from './i18n/PhotoDate';
+export { PhotoCount } from './i18n/PhotoCount';

package/dist/index.js

@@ -1,9 +1,9 @@
-import { useStreetImageryI18n } from './chunk-HA4GJWHI.js';
-export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-HA4GJWHI.js';
+import { useStreetImageryI18n } from './chunk-ZAIXGYAH.js';
+export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-ZAIXGYAH.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 { 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 { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, 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, 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, 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';
@@ -139,7 +139,8 @@ var withinBbox = (bbox) => (item) => {
 };
 var useProviderPhotos = (providerId, bbox, zoom) => {
   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 >= meta.minZoom && adapter?.fetchPhotos != null;
   return useQuery({
     queryKey: ["provider-photos", providerId, bboxKey(bbox), zoom],
     queryFn: async ({ signal }) => {
@@ -152,18 +153,20 @@ var useProviderPhotos = (providerId, bbox, zoom) => {
 };
 var useProviderSequences = (providerId, bbox, zoom) => {
   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 = meta.sequencesMinZoom;
+  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= sequencesMinZoom && 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
   });
 };
 var useProviderMapFeatures = (providerId, bbox, zoom) => {
   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 >= meta.minZoom && adapter?.fetchMapFeatures != null;
   return useQuery({
     queryKey: ["provider-map-features", providerId, bboxKey(bbox), zoom],
     queryFn: async ({ signal }) => {
@@ -283,11 +286,12 @@ var PhotoProviderLayer = ({
   shownPhotoId
 }) => {
   const adapter = adapterById[providerId];
+  const meta = providerById[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 visiblePhotos = zoom >= meta.minZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
   const drawBbox = bbox ? padBbox(bbox, 0.25) : null;
-  const photoCollection = zoom >= adapter.minZoom ? photosToFeatureCollection(
+  const photoCollection = zoom >= meta.minZoom ? photosToFeatureCollection(
     drawBbox ? visiblePhotos.filter((photo) => lngLatInBbox(photo.lngLat, drawBbox)) : visiblePhotos
   ) : emptyPointCollection();
   const viewfieldsActive = showViewfields && zoom >= VIEWFIELD_MIN_ZOOM;
@@ -338,7 +342,7 @@ var PhotoProviderLayer = ({
       sequenceCapturedAtById.set(photo.sequenceId, photo.capturedAt);
     }
   }
-  const filteredSequences = showSequences && zoom >= (adapter.sequencesMinZoom ?? adapter.minZoom) ? sequences.map((sequence) => {
+  const filteredSequences = showSequences && zoom >= meta.sequencesMinZoom ? sequences.map((sequence) => {
     if (sequence.capturedAt != null) return sequence;
     const fromPhotos = sequenceCapturedAtById.get(sequence.sequenceId);
     return fromPhotos != null ? { ...sequence, capturedAt: fromPhotos } : sequence;
@@ -383,7 +387,29 @@ var PhotoProviderLayer = ({
   });
   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,
+        {
+          id: `coverage-tiles-${providerId}`,
+          minzoom: meta.coverageTiles.minZoom,
+          paint: { "raster-opacity": 0.7 },
+          source: `coverage-tiles-source-${providerId}`,
+          type: "raster"
+        }
+      )
+    ] }) : null,
+    adapter?.fetchSequences && showSequences ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Source,
         {
@@ -484,10 +510,10 @@ var MapFeatureProviderLayer = ({
   filter,
   mapFeatureCircleColor
 }) => {
-  const adapter = adapterById[providerId];
+  const meta = providerById[providerId];
   const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom);
   const valueFilter = filter?.mapFeatureValue;
-  const featureCollection = zoom >= adapter.minZoom ? mapFeaturesToFeatureCollection(
+  const featureCollection = zoom >= meta.minZoom ? mapFeaturesToFeatureCollection(
     valueFilter ? features.filter((feature) => valueFilter(feature.value)) : features
   ) : emptyPointCollection();
   const featureFilter = buildMapFeatureLayerFilter(filter?.date);
@@ -520,8 +546,7 @@ var MapFeatureProviderLayer = ({
   ] });
 };
 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,
@@ -562,7 +587,7 @@ var StreetLevelImagerySourcesAndLayers = ({
   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
+    (id) => providerById[id].kind === "photo" && adapterById[id]?.fetchPhotos
   );
   const sequenceBeforeId = firstPhotoProvider ? showViewfields ? viewfieldLayerId(firstPhotoProvider) : photoLayerId(firstPhotoProvider) : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -814,6 +839,24 @@ 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) {
@@ -896,40 +939,74 @@ var ToolbarButton = ({
 var SuggestionChip = ({
   suggestion,
   active,
+  shownPhotoId,
+  showPlace,
   onSelect
 }) => {
   const { messages } = useStreetImageryI18n();
-  const best = suggestion.candidates[0];
-  const label = viewSuggestionLabel(suggestion, messages);
+  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: [
-        "inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-xs whitespace-nowrap",
+        "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: onSelect,
+      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__ */ jsx("span", { className: "font-medium", children: suggestion.viewpoint.label ?? messages.viewpointRole[suggestion.viewpoint.role] }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "span",
           {
-            "aria-hidden": true,
-            className: "inline-flex",
-            style: { transform: `rotate(${suggestion.direction.bearing}deg)` },
-            children: /* @__PURE__ */ jsx(Icon, { className: "size-3", path: ICONS.arrow })
+            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
+            ]
           }
         ),
-        best ? /* @__PURE__ */ jsx(
+        shown ? /* @__PURE__ */ jsx(
           PhotoDate,
           {
-            className: active ? "text-fuchsia-100" : "text-slate-400",
-            timestamp: best.photo.capturedAt
+            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" })
       ]
@@ -946,6 +1023,7 @@ var FloatingPhotoViewer = ({
   suggestions,
   activeDirectionKey,
   onSelectSuggestion,
+  shownPhotoId,
   canGoBack,
   canGoForward,
   onBack,
@@ -960,6 +1038,7 @@ var FloatingPhotoViewer = ({
   storageKey = "street-imagery:floating-viewer"
 }) => {
   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 dragRef = useRef(null);
@@ -1105,24 +1184,23 @@ var FloatingPhotoViewer = ({
             ]
           }
         ),
-        toolbar ? /* @__PURE__ */ jsx("div", { className: "border-b border-slate-100 px-2 py-1.5", children: toolbar }) : suggestions.length > 0 ? /* @__PURE__ */ jsxs(
+        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: "flex gap-1 overflow-x-auto border-b border-slate-100 px-2 py-1.5",
+            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: [
-              /* @__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
-              ))
-            ]
+            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: [
@@ -1269,7 +1347,12 @@ var useViewpointSessionStore = create()((set, get) => ({
     showPhoto: (entry) => set((state) => {
       const current = state.history[state.historyIndex];
       if (samePhoto(current?.photo, entry.photo)) {
-        return entry.directionKey != null && entry.directionKey !== state.activeDirectionKey ? { activeDirectionKey: entry.directionKey } : state;
+        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
@@ -1401,6 +1484,20 @@ var useMapillaryImageDetections = (imageId, { filter, filterKey } = {}) => useQu
   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: {
@@ -1452,9 +1549,94 @@ var LocationPickOnMap = ({ onPick }) => {
   );
   return null;
 };
-var MapillaryFeatureBar = ({ data, shownImage, onShow }) => {
-  const { locale, messages } = useStreetImageryI18n();
-  const labels = messages.feature;
+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: [
@@ -1509,10 +1691,14 @@ ${labels.dayPhotos(day.images.length, active && day.images.length > 1)}`,
               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
-                ] })
+                /* @__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
@@ -1522,5 +1708,233 @@ ${labels.dayPhotos(day.images.length, active && day.images.length > 1)}`,
     )
   ] });
 };
+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
+}) => {
+  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.sqrt(count / 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 ? 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 { 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 };
+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, 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 };

package/dist/mapillary/MapillaryFeatureBar.d.ts

@@ -1,8 +1,11 @@
 import { type MapFeatureImages, type TargetImage } from '@osm-editor-kit/street-imagery';
+import { type MapillaryFeatureBarLabels } from './featureBarLabels';
 export type MapillaryFeatureBarProps = {
     data: MapFeatureImages;
     shownImage: TargetImage | null;
     onShow: (image: TargetImage) => void;
+    /** Replace single texts, e.g. `name` to map values to your own sign catalogue. */
+    labels?: Partial<MapillaryFeatureBarLabels>;
 };
 /**
  * A Mapillary sign or object above its photo: what it is, when Mapillary saw it, and one button
@@ -10,4 +13,4 @@ export type MapillaryFeatureBarProps = {
  * that day's photos. Dates show month and year; the tooltip has the full date and the age.
  * Texts and dates follow the `StreetImageryLocaleProvider`.
  */
-export declare const MapillaryFeatureBar: ({ data, shownImage, onShow }: MapillaryFeatureBarProps) => import("react").JSX.Element;
+export declare const MapillaryFeatureBar: ({ data, shownImage, onShow, labels: labelOverrides, }: MapillaryFeatureBarProps) => import("react").JSX.Element;

package/dist/mapillary/SelectedMapFeatureLayer.d.ts

@@ -0,0 +1,19 @@
+import { type Bbox, type MapFeatureImages, type ProviderId, type TargetImage } from '@osm-editor-kit/street-imagery';
+export type SelectedMapFeatureLayerProps = {
+    /** From `useSelectedMapillaryFeature`. Nothing is drawn without it. */
+    data: MapFeatureImages | null;
+    /** The shown photo of the feature: a dotted line runs from its camera to the feature. */
+    shownImage?: TargetImage | null;
+    /** The providers whose map features are drawn, to ring the dot that is on the map. */
+    providers: ProviderId[];
+    bbox: Bbox | null;
+    zoom: number;
+    /** Color of the dot and disk. Default: the map features' purple. */
+    color?: string;
+};
+/**
+ * The selected sign or object on the map: its dot on a light disk, and a dotted line to it from
+ * the camera position of the shown photo (Mapillary's computed position, which the feature was
+ * located from). Draw it after `StreetLevelImagerySourcesAndLayers`.
+ */
+export declare const SelectedMapFeatureLayer: ({ data, shownImage, providers, bbox, zoom, color, }: SelectedMapFeatureLayerProps) => import("react").JSX.Element;

package/dist/mapillary/featureBarLabels.d.ts

@@ -0,0 +1,16 @@
+import { type StreetImageryLocale } from '@osm-editor-kit/street-imagery';
+/**
+ * Texts of `MapillaryFeatureBar`. Kept out of the package-wide messages, so the German sign names
+ * are only bundled by apps that show the feature bar.
+ */
+export type MapillaryFeatureBarLabels = {
+    /** Name of a Mapillary value like `regulatory--turn-right-ahead--g1`. */
+    name: (value: string) => string;
+    /** Line below the name; `first` and `last` are the rendered dates. */
+    seen: string;
+    noPhotos: string;
+    daysSummary: (photos: number, days: number) => string;
+    /** Third tooltip line of a day button, below date and age. */
+    dayPhotos: (photos: number, canStep: boolean) => string;
+};
+export declare const MAPILLARY_FEATURE_BAR_LABELS: Record<StreetImageryLocale, MapillaryFeatureBarLabels>;

package/dist/mapillary/useMapillaryFeatures.d.ts

@@ -34,3 +34,21 @@ export declare const useMapillaryImageDetections: (imageId: string | null | unde
     filter?: (value: string) => boolean;
     filterKey?: string;
 }) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").MapillaryDetection[]>, Error>;
+/**
+ * A selected Mapillary map feature (sign, object) for a host's feature + photo selection: all its
+ * photos by day, the photo that is shown (`shownPhotoId`), and the one to open first — the best of
+ * the newest day, from within `minCapturedAt` (ms) when set. Feed `data` and `shownImage` to
+ * `MapillaryFeatureBar` and `SelectedMapFeatureLayer`, and `shownImage.outline` to `lookAt`.
+ */
+export declare const useSelectedMapillaryFeature: ({ featureId, shownPhotoId, minCapturedAt, shape, }: {
+    featureId: string | null | undefined;
+    shownPhotoId?: string | null;
+    minCapturedAt?: number | null;
+    shape?: TargetShape;
+}) => {
+    data: NonNullable<NoInfer<import("@osm-editor-kit/street-imagery").MapFeatureImages | null>> | null;
+    isLoading: boolean;
+    isError: boolean;
+    shownImage: import("@osm-editor-kit/street-imagery").TargetImage | null;
+    firstImage: import("@osm-editor-kit/street-imagery").TargetImage | null;
+};

package/dist/photo-details.js

@@ -1,4 +1,4 @@
-import { useStreetImageryI18n } from './chunk-HA4GJWHI.js';
+import { useStreetImageryI18n } from './chunk-ZAIXGYAH.js';
 import { providerById, formatLocalDateTime, formatDate, formatRelativeDate } from '@osm-editor-kit/street-imagery';
 import { useRef, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/viewpoints/FloatingPhotoViewer.d.ts

@@ -1,4 +1,4 @@
-import type { ViewSuggestion } from '@osm-editor-kit/street-imagery';
+import type { PhotoCandidate, ViewSuggestion } from '@osm-editor-kit/street-imagery';
 import { type ReactNode } from 'react';
 /** Info button for `titleActions`; `label` is its tooltip and accessible name. */
 export declare const FloatingViewerInfoButton: ({ label, onClick, }: {
@@ -12,7 +12,13 @@ export type FloatingPhotoViewerProps = {
     /** Suggested views (viewpoint × direction); shown as chips. Empty hides the strip. */
     suggestions: ViewSuggestion[];
     activeDirectionKey: string | null;
-    onSelectSuggestion: (suggestion: ViewSuggestion) => void;
+    /**
+     * A view button was clicked. `candidate` is the photo to show: the view's best one, or the next
+     * one when the active view is clicked again.
+     */
+    onSelectSuggestion: (suggestion: ViewSuggestion, candidate: PhotoCandidate) => void;
+    /** The photo in the viewer, so the active view can show which of its photos that is. */
+    shownPhotoId?: string | null;
     canGoBack: boolean;
     canGoForward: boolean;
     onBack: () => void;
@@ -51,4 +57,4 @@ export type FloatingPhotoViewerProps = {
  * Drag the header to move, drag the left edge to resize. Keys: Esc closes, [ and ] step history,
  * Alt + arrow left/right step along (`step`).
  */
-export declare const FloatingPhotoViewer: ({ title, titleActions, suggestions, activeDirectionKey, onSelectSuggestion, canGoBack, canGoForward, onBack, onForward, onClose, step, toolbar, status, children, footer, drawer, storageKey, }: FloatingPhotoViewerProps) => import("react").JSX.Element;
+export declare const FloatingPhotoViewer: ({ title, titleActions, suggestions, activeDirectionKey, onSelectSuggestion, shownPhotoId, canGoBack, canGoForward, onBack, onForward, onClose, step, toolbar, status, children, footer, drawer, storageKey, }: FloatingPhotoViewerProps) => import("react").JSX.Element;

package/dist/viewpoints/useViewpointSessionStore.d.ts

@@ -19,7 +19,10 @@ export declare const useCanGoForward: () => boolean;
 export declare const getViewpointSession: () => {
     actions: {
         open: (input: OpenInput) => void;
-        /** Show a photo; truncates forward history. No-op when it is already the current photo. */
+        /**
+         * Show a photo; truncates forward history. For the photo that is shown already, only its
+         * direction changes.
+         */
         showPhoto: (entry: ViewpointHistoryEntry) => void;
         back: () => ViewpointHistoryEntry | null;
         forward: () => ViewpointHistoryEntry | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osm-editor-kit/street-imagery-react",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.8",
   "description": "React MapLibre layers and photo viewers for street-level imagery providers.",
   "homepage": "https://github.com/osmberlin/street-space-editor/tree/main/packages/street-imagery-react",
   "license": "MIT",
@@ -14,6 +14,7 @@
     "dist"
   ],
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -55,7 +56,7 @@
     "zustand": "^5.0.7"
   },
   "peerDependencies": {
-    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.5",
+    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.7",
     "@panoramax/web-viewer": "^5",
     "@tanstack/react-query": "^5",
     "mapillary-js": "^4",