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

package/README.md

@@ -10,8 +10,9 @@ React + MapLibre UI on top of `@osm-editor-kit/street-imagery`:
 - Map sources and layers for photos, sequences, and viewfields
 - Click handling and interactive layer ids
 - TanStack Query hooks to load provider data for the viewport
-- Lazy Mapillary and Panoramax viewer panels
+- Lazy viewer panels: Mapillary and Panoramax photos in one viewer (`mapillary-js`)
 - Helpers for selection, thumbnails, and easing the map to a photo
+- Viewpoints + floating photo viewer: suggested views per direction, history, map layer
 
 ## Usage
 
@@ -39,6 +40,8 @@ const bbox = useMapViewportBbox('main', map)
     selectedPhoto,
     photoCircleColor: '#3b82f6',
     mapFeatureCircleColor: '#94a3b8',
+    beforeId: 'road-label', // optional: draw everything below this layer of your style
+    minZoom: 10, // optional: below this zoom nothing is requested or drawn
   }}
 />
 
@@ -49,6 +52,178 @@ const hits = queryStreetImageryFeatures(event)
   onPhotoSelected={setSelection} onEaseMapToPoint={(lng, lat) => map.easeTo({ center: [lng, lat] })} />
 ```
 
-**Mapillary:** `createStreetImageryConfig({ mapillaryToken })` or `setStreetImageryConfig` at boot (`@osm-editor-kit/street-imagery`). **Panoramax + Vite:** see `app/vite.config.ts` for the consuming-app setup.
+**Before photos are loaded:** where a provider has own vector tiles with its track lines (Mapillary: zoom 6 to 15), MapLibre reads those itself. Same colours and filters; the lines are not clickable. Zoomed far out these tiles are several MB each in dense areas; set `options.minZoom` to skip them.
 
-Also: `useAllProviderPhotos`, `useProviderPhotos` / `useProviderSequences` / `useProviderMapFeatures`, `usePhotoThumbnails`, `resolveSelectedSequence`, `StreetLevelImageryViewCone`, `useViewerBearing` / `useViewerActions`, `MapillaryPanel`, `PanoramaxPanel`.
+**Mapillary:** `createStreetImageryConfig({ mapillaryToken })` or `setStreetImageryConfig` at boot (`@osm-editor-kit/street-imagery`). **Panoramax:** nothing to set up, the Mapillary viewer shows its pictures too (see below).
+
+Also: `useAllProviderPhotos`, `useProviderPhotos` / `useProviderSequences` / `useProviderMapFeatures`, `usePhotoThumbnails`, `resolveSelectedSequence`, `StreetLevelImageryViewCone`, `useViewerBearing` / `useViewerActions`. The panels themselves (`MapillaryPanel`, `PanoramaxPanel`) are in `@osm-editor-kit/street-imagery-react/viewer-panels`; `StreetLevelImageryViewer` loads them on demand, so `mapillary-js` is only loaded when a photo is shown.
+
+### Panoramax in the Mapillary viewer
+
+`PanoramaxPanel` is a `mapillary-js` viewer with a `PanoramaxDataProvider`, which reads the Panoramax API. One viewer engine for both providers: the same arrows, the same view cone on the map, no second engine to load and no build setup.
+
+- A picture opens with its `sd` file (2048 px wide). When you zoom in, the original file is loaded once and the sharp parts are cut from it in the browser.
+- Steps along the sequence work (previous, next, play). The arrows to pictures nearby do not: they need Mapillary's 3D reconstruction.
+- The panel shows creator and licence in a line at the bottom; `hideAttribution` removes it.
+- `PanoramaxDataProvider` is exported from `viewer-panels` for a `mapillary-js` `Viewer` you own: `new Viewer({ container, dataProvider: new PanoramaxDataProvider({ endpoint }), imageId })`.
+
+**Panoramax's own viewer** (`@panoramax/web-viewer`) is still there as an option:
+
+```tsx
+import { PanoramaxWebViewerPanel } from '@osm-editor-kit/street-imagery-react/panoramax-web-viewer'
+
+<StreetLevelImageryViewer panoramaxPanel={PanoramaxWebViewerPanel} … />
+```
+
+Only then you need `@panoramax/web-viewer` (an optional peer dependency) and its Vite setup: see `vite.config.ts` of [street-level-imagery-provider-overview](https://github.com/osmberlin/street-level-imagery-provider-overview).
+
+## Viewpoints and floating viewer
+
+Click → viewpoints → ranked Mapillary photos per view direction → floating viewer with chips and history.
+
+```tsx
+import { viewpointFromPoint, viewpointsFromLine } from '@osm-editor-kit/street-imagery'
+import {
+  FloatingPhotoViewer,
+  getViewpointSession,
+  useViewpoints,
+  useViewSuggestions,
+  ViewpointLayer,
+  VIEWPOINT_DIRECTION_LAYER_ID,
+  viewDirectionKeyFromFeatures,
+} from '@osm-editor-kit/street-imagery-react'
+
+// On map click (add VIEWPOINT_DIRECTION_LAYER_ID to interactiveLayerIds):
+getViewpointSession().actions.open({ viewpoints: [viewpointFromPoint([lng, lat])] })
+// or for a clicked line: open({ viewpoints: viewpointsFromLine(line, [lng, lat]), line })
+
+const viewpoints = useViewpoints()
+const { suggestions } = useViewSuggestions(viewpoints, { maxAgeYears: 2 })
+// <ViewpointLayer viewpoints={viewpoints} suggestions={suggestions} activeDirectionKey={…} zoom={zoom} />
+// <FloatingPhotoViewer suggestions={suggestions} … >{viewer}</FloatingPhotoViewer>
+```
+
+Render `FloatingPhotoViewer` inside a positioned map container. Photos from suggestions open in
+`StreetLevelImageryViewer` with `lookAtBearing={suggestion.direction.bearing}`.
+
+**Tailwind:** components use Tailwind classes. Tailwind does not scan `node_modules`, so add to your CSS:
+
+```css
+@source '../node_modules/@osm-editor-kit/street-imagery-react';
+```
+
+## Look at a place, outline detections
+
+```tsx
+import { JUNCTION_DETECTION_GROUPS, matchesAnyGroup, PLACE_TARGET } from '@osm-editor-kit/street-imagery'
+import {
+  StreetLevelImageryViewer,
+  useMapillaryImageDetections,
+  useMapillaryMapFeatureImages,
+  useMapillaryMapFeaturesNear,
+} from '@osm-editor-kit/street-imagery-react'
+
+// Turn any Mapillary photo (360° or flat) towards a junction:
+<StreetLevelImageryViewer photo={photo} lookAt={{ lngLat: node, shape: PLACE_TARGET }} … />
+
+// Turn to a detected sign or object and outline it. `value` lets the viewer find the image's own
+// detection when Mapillary linked no outline for this image:
+const { data } = useMapillaryMapFeatureImages(featureId)
+<StreetLevelImageryViewer photo={…} lookAt={{ lngLat: data.feature.lngLat, value: data.feature.value }} … />
+
+// Features around a point, and only the outlines you care about in the shown image:
+const { data: features } = useMapillaryMapFeaturesNear(node, { radiusMeters: 40 })
+const { data: detections } = useMapillaryImageDetections(photo.photoId, {
+  filter: matchesAnyGroup(JUNCTION_DETECTION_GROUPS),
+  filterKey: 'junction',
+})
+<StreetLevelImageryViewer photo={photo} outlines={detections?.map((d) => ({ id: d.id, outline: d.outline }))} … />
+```
+
+- 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` (from `@osm-editor-kit/street-imagery-react/viewer-panels`) 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.
+
+```tsx
+import {
+  LocationPickOnMap,
+  useArmedLocationOpenerId,
+  useLocationPickActions,
+} from '@osm-editor-kit/street-imagery-react'
+
+const armed = useArmedLocationOpenerId() // show it: pressed button, crosshair cursor, a hint on the map
+const { toggle, disarm } = useLocationPickActions()
+
+{
+  getLocationOpeners().map((opener) => (
+    <button key={opener.id} aria-pressed={armed === opener.id} onClick={() => toggle(opener.id)}>
+      Open in {opener.label}
+    </button>
+  ))
+}
+;<Map cursor={armed ? 'crosshair' : undefined}>
+  <LocationPickOnMap />
+</Map>
+```
+
+The map's own click handlers still run; skip them while `armed` is set if the click should only open the place. When the place is known already (a selected feature), call `openLocationInNewTab` directly instead.
+
+## Photo details dialog (optional)
+
+A modal with everything known about the shown photo: capture, camera, position, source and raw EXIF. It lives in its own entry, so apps that do not import it do not bundle it.
+
+```tsx
+import { FloatingViewerInfoButton } from '@osm-editor-kit/street-imagery-react'
+import { PHOTO_DETAILS_LABELS, PhotoDetailsDialog } from '@osm-editor-kit/street-imagery-react/photo-details'
+
+<FloatingPhotoViewer
+  titleActions={<FloatingViewerInfoButton label={PHOTO_DETAILS_LABELS.en.open} onClick={() => setOpen(true)} />}
+  …
+/>
+<PhotoDetailsDialog open={open} photo={viewerPhoto} onClose={() => setOpen(false)} />
+```
+
+`viewerPhoto` is what `onViewerPhoto` of the viewer gives (Mapillary, Panoramax).

package/dist/MapillaryPanel-FAXVZH37.js

@@ -0,0 +1,2 @@
+export { MapillaryPanel } from './chunk-SGIB7AVC.js';
+import './chunk-25UGGXIE.js';

package/dist/PanoramaxPanel-TWKTSOXM.js

@@ -0,0 +1,2 @@
+export { PanoramaxPanel } from './chunk-XQXYV6SR.js';
+import './chunk-25UGGXIE.js';

package/dist/StreetLevelImagerySelectionOverlay.d.ts

@@ -1,9 +1,28 @@
-import type { Bbox, NormalizedPhoto, NormalizedSequence } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, NormalizedSequence } from '@osm-editor-kit/street-imagery';
+/** Lines and photo dots: near black. The shown photo's line is thicker, its marker larger. */
+export declare const BASE_COLOR = "#171717";
+/** The shown photo: fill of its marker and camera pin (black outline), and the line between. */
+export declare const SELECTION_COLOR = "#f97316";
+/** Width of the shown photo's sequence line; other lines are 1.25. */
+export declare const ACTIVE_LINE_WIDTH = 2.5;
 export type StreetLevelImagerySelectionOverlayProps = {
     selectedPhoto?: NormalizedPhoto | null;
     selectedSequence?: NormalizedSequence | null;
+    /**
+     * Where the viewer says the camera was (Mapillary: the computed position, which the view cone
+     * starts at). When it differs from the photo dot, a pin marks it and a line connects both.
+     */
+    cameraLngLat?: [number, number] | null;
+    /** Layer to draw the sequence line below, so photo dots stay on top of it. */
+    sequenceBeforeId?: string;
+    /** Id of a layer of the host's style to draw the whole overlay below. */
+    beforeId?: string;
 };
-export declare const StreetLevelImagerySelectionOverlay: ({ selectedPhoto, selectedSequence, }: StreetLevelImagerySelectionOverlayProps) => import("react").JSX.Element | null;
+/**
+ * The shown photo on the map, bottom to top: its sequence line (only passed when the provider's
+ * own layers are off; else that layer marks it), a filled marker on its photo dot, and — when the camera position differs from the
+ * dot — a dashed connector and a pin at the camera position.
+ */
+export declare const StreetLevelImagerySelectionOverlay: ({ selectedPhoto, selectedSequence, cameraLngLat, sequenceBeforeId, beforeId, }: StreetLevelImagerySelectionOverlayProps) => import("react").JSX.Element | null;
 /** Resolve sequence geometry for highlight when only photo + fetched sequences are available. */
 export declare const resolveSelectedSequence: (selectedPhoto: NormalizedPhoto | null | undefined, sequences: NormalizedSequence[], sequenceId: string | null | undefined) => NormalizedSequence | null;
-export type SequenceHighlightBbox = Bbox | null;

package/dist/StreetLevelImagerySourcesAndLayers.d.ts

@@ -6,6 +6,11 @@ import type { DataDrivenPropertyValueSpecification } from 'maplibre-gl';
 export type PhotoFilter = {
     photoTypes?: PhotoTypeFilter[];
     date?: DateRange;
+    /**
+     * Which map features (signs, objects) to draw, by Mapillary value. Use `matchesAnyGroup(...)`
+     * for groups like traffic lights or bike signs. Keep the function identity stable.
+     */
+    mapFeatureValue?: (value: string) => boolean;
 };
 export type StreetLevelImagerySourcesAndLayersProps = {
     providers: ProviderId[];
@@ -15,7 +20,7 @@ export type StreetLevelImagerySourcesAndLayersProps = {
     options: {
         config?: StreetImageryConfig;
         showSequences?: boolean;
-        /** Always-on heading wedges / 360° disks for every photo. Default true. */
+        /** Heading wedges / 360° disks per photo, from zoom 17, capped for dense areas. Default true. */
         showViewfields?: boolean;
         showViewCone?: boolean;
         showSelectionHighlight?: boolean;
@@ -26,8 +31,26 @@ export type StreetLevelImagerySourcesAndLayersProps = {
             hfov?: number | null;
             lngLat?: [number, number] | null;
         } | null;
+        /**
+         * Style colour of a photo (by type, age …). It colours the view-direction shapes; photo dots
+         * and sequence lines are black.
+         */
         photoCircleColor: DataDrivenPropertyValueSpecification<string>;
+        /** Colour of the shown photo's view cone. Default: the selection colour (orange). */
+        viewConeColor?: DataDrivenPropertyValueSpecification<string>;
+        /** Length of the shown photo's view cone, as a multiple of the per-photo shapes. Default 2.5. */
+        viewConeScale?: number;
         mapFeatureCircleColor: DataDrivenPropertyValueSpecification<string>;
+        /**
+         * Id of a layer of the host's style: all layers are drawn below it (e.g. below road names).
+         * The layer must exist when this component mounts. Default: on top of the style.
+         */
+        beforeId?: string;
+        /**
+         * Below this map zoom nothing is requested or drawn. Each provider also has its own minimum
+         * zooms (photos, lines); the higher one counts. Default: only the providers' own.
+         */
+        minZoom?: number;
     };
 };
 export declare const StreetLevelImagerySourcesAndLayers: ({ providers, filter, bbox, zoom, options, }: StreetLevelImagerySourcesAndLayersProps) => import("react").JSX.Element;

package/dist/StreetLevelImageryViewCone.d.ts

@@ -1,4 +1,7 @@
 import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { DataDrivenPropertyValueSpecification } from 'maplibre-gl';
+/** Fill of view-direction shapes: the 360° disks, the flat wedges and the shown photo's cone. */
+export declare const VIEW_SHAPE_FILL_OPACITY = 0.25;
 export type StreetLevelImageryViewConeProps = {
     selectedPhoto: NormalizedPhoto;
     zoom: number;
@@ -7,5 +10,14 @@ export type StreetLevelImageryViewConeProps = {
         hfov?: number | null;
         lngLat?: [number, number] | null;
     } | null;
+    /**
+     * Fill colour; an expression may read the photo's `isPano` and `capturedAt`, so the cone gets
+     * the same colour as the photo's own view-direction shape.
+     */
+    color?: DataDrivenPropertyValueSpecification<string>;
+    /** Cone length as a multiple of the per-photo view-direction shapes. Default 2.5. */
+    scale?: number;
+    /** Id of a layer of the host's style to draw the cone below. */
+    beforeId?: string;
 };
-export declare const StreetLevelImageryViewCone: ({ selectedPhoto, zoom, viewerPov, }: StreetLevelImageryViewConeProps) => import("react").JSX.Element | null;
+export declare const StreetLevelImageryViewCone: ({ selectedPhoto, zoom, viewerPov, color, scale, beforeId, }: StreetLevelImageryViewConeProps) => import("react").JSX.Element | null;

package/dist/StreetLevelImageryViewer.d.ts

@@ -1,10 +1,32 @@
 import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import { type ComponentType } from 'react';
+import type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
+import type { PanoramaxPanelProps } from './panels/PanoramaxPanel';
 import type { StreetImageryPhotoSelection } from './types';
 type StreetLevelImageryViewerProps = {
     photo: NormalizedPhoto;
     groupPhotos: NormalizedPhoto[];
     onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
     onEaseMapToPoint: (lng: number, lat: number) => void;
+    /** Mapillary, Panoramax: full photo data (creator, licence …) for each image the viewer shows. */
+    onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /** Mapillary 360° photos: initial view bearing (e.g. a suggested view direction). */
+    lookAtBearing?: number | null;
+    /** Mapillary: turn and zoom to a place (sign, traffic light, junction); wins over `lookAtBearing`. */
+    lookAt?: MapillaryLookAt | null;
+    /** Mapillary: outlines to draw in the shown image. */
+    outlines?: MapillaryViewerOutline[];
+    /**
+     * Hide the viewer's own attribution; the host must then show creator and licence itself, from
+     * `onViewerPhoto`.
+     */
+    hideAttribution?: boolean;
+    /**
+     * Another panel for Panoramax pictures, e.g. `PanoramaxWebViewerPanel` of the
+     * `panoramax-web-viewer` entry (Panoramax's own viewer). Default: the Mapillary viewer shows
+     * them too.
+     */
+    panoramaxPanel?: ComponentType<PanoramaxPanelProps>;
 };
-export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
+export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, panoramaxPanel: PanoramaxPanelOverride, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
 export {};

package/dist/chunk-6EMFFIL2.js

@@ -0,0 +1,147 @@
+import { DEFAULT_STREET_IMAGERY_LOCALE } from '@osm-editor-kit/street-imagery';
+import { createContext, use } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/i18n/messages.ts
+var en = {
+  viewer: {
+    regionLabel: "Photo viewer",
+    loading: "Loading viewer\u2026",
+    backInHistory: "Back in history ([)",
+    forwardInHistory: "Forward in history (])",
+    minimize: "Minimize",
+    close: "Close (Esc)",
+    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`,
+    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.toLocaleString("en")} photos`
+  },
+  viewpointRole: {
+    here: "Here",
+    "line-start": "Start",
+    "line-end": "End",
+    "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}`;
+    }
+  }
+};
+var COMPASS_DE = { N: "Norden", E: "Osten", S: "S\xFCden", W: "Westen" };
+var de = {
+  viewer: {
+    regionLabel: "Fotoansicht",
+    loading: "Ansicht wird geladen\u2026",
+    backInHistory: "Zur\xFCck im Verlauf ([)",
+    forwardInHistory: "Vor im Verlauf (])",
+    minimize: "Minimieren",
+    close: "Schlie\xDFen (Esc)",
+    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`,
+    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.toLocaleString("de")} Fotos`
+  },
+  viewpointRole: {
+    here: "Hier",
+    "line-start": "Anfang",
+    "line-end": "Ende",
+    "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}`;
+    }
+  }
+};
+var STREET_IMAGERY_MESSAGES = {
+  en,
+  de
+};
+var DEFAULT_I18N = {
+  locale: DEFAULT_STREET_IMAGERY_LOCALE,
+  messages: STREET_IMAGERY_MESSAGES[DEFAULT_STREET_IMAGERY_LOCALE]
+};
+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 },
+  compass: overrides.compass?.length === 8 ? overrides.compass : base.compass,
+  viewDirection: overrides.viewDirection ?? base.viewDirection
+} : base;
+var StreetImageryLocaleProvider = ({
+  locale,
+  messages,
+  children
+}) => /* @__PURE__ */ jsx(
+  I18nContext,
+  {
+    value: { locale, messages: mergeMessages(STREET_IMAGERY_MESSAGES[locale], messages) },
+    children
+  }
+);
+var useStreetImageryI18n = () => use(I18nContext);
+
+export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n };