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

package/README.md

@@ -120,3 +120,48 @@ const { data: detections } = useMapillaryImageDetections(photo.photoId, {
 - Map layers: `filter.mapFeatureValue` limits which signs/objects are drawn (`matchesAnyGroup(SIGN_GROUPS)`).
 - Suggested views: `useViewSuggestions(viewpoints, { sources: [mapillaryPhotoSource, streetViewPhotoSource] })`.
 - `turnMapillaryViewerTo` / `setMapillaryViewerOutlines` work on a mapillary-js `Viewer` you own.
+
+## 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-N45NQY4C.js

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

package/dist/PanoramaxPanel-MFI4L67Z.js

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

package/dist/StreetLevelImagerySelectionOverlay.d.ts

@@ -1,9 +1,26 @@
-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;
 };
-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, }: 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

@@ -20,7 +20,7 @@ export type StreetLevelImagerySourcesAndLayersProps = {
     options: {
         config?: StreetImageryConfig;
         showSequences?: boolean;
-        /** Heading wedges / 360° disks per photo, from zoom 16, capped for dense areas. Default true. */
+        /** Heading wedges / 360° disks per photo, from zoom 17, capped for dense areas. Default true. */
         showViewfields?: boolean;
         showViewCone?: boolean;
         showSelectionHighlight?: boolean;
@@ -31,7 +31,15 @@ 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>;
     };
 };

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,12 @@ 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;
 };
-export declare const StreetLevelImageryViewCone: ({ selectedPhoto, zoom, viewerPov, }: StreetLevelImageryViewConeProps) => import("react").JSX.Element | null;
+export declare const StreetLevelImageryViewCone: ({ selectedPhoto, zoom, viewerPov, color, scale, }: StreetLevelImageryViewConeProps) => import("react").JSX.Element | null;

package/dist/StreetLevelImageryViewer.d.ts

@@ -6,7 +6,7 @@ type StreetLevelImageryViewerProps = {
     groupPhotos: NormalizedPhoto[];
     onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
     onEaseMapToPoint: (lng: number, lat: number) => void;
-    /** Mapillary only: full photo data for each image the viewer shows. */
+    /** 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;
@@ -14,6 +14,11 @@ type StreetLevelImageryViewerProps = {
     lookAt?: MapillaryLookAt | null;
     /** Mapillary: outlines to draw in the shown image. */
     outlines?: MapillaryViewerOutline[];
+    /**
+     * Hide the viewer's own attribution (Mapillary) or legend (Panoramax); the host must then show
+     * creator and licence itself, from `onViewerPhoto`.
+     */
+    hideAttribution?: boolean;
 };
-export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
+export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
 export {};

package/dist/{chunk-72HJV6II.js → chunk-53RA4OSJ.js}

@@ -105,7 +105,8 @@ var MapillaryPanel = ({
   onViewerPhoto,
   lookAtBearing,
   lookAt,
-  outlines
+  outlines,
+  hideAttribution = false
 }) => {
   const containerRef = useRef(null);
   const viewerRef = useRef(null);
@@ -116,6 +117,7 @@ var MapillaryPanel = ({
   const pendingBearingRef = useRef(null);
   const actions = useViewerActions();
   const initialPhotoIdRef = useRef(photo.photoId);
+  const initialHideAttributionRef = useRef(hideAttribution);
   const emitPhotoSelected = useEffectEvent(onPhotoSelected);
   const emitEaseMapToPoint = useEffectEvent(onEaseMapToPoint);
   const turnToWantedBearing = useEffectEvent((viewer, image) => {
@@ -162,6 +164,7 @@ var MapillaryPanel = ({
         container,
         imageId: initialPhotoIdRef.current,
         component: {
+          attribution: !initialHideAttributionRef.current,
           cover: false,
           sequence: { visible: true },
           tag: true
@@ -205,7 +208,8 @@ var MapillaryPanel = ({
           capturedAt: image.capturedAt,
           isPano: image.cameraType === "spherical" || image.cameraType === "equirectangular",
           heading: image.computedCompassAngle ?? image.compassAngle,
-          lngLat: [position.lng, position.lat]
+          lngLat: [position.lng, position.lat],
+          ...image.creatorUsername ? { creatorName: image.creatorUsername } : {}
         });
         actions.setPov({ lngLat: [position.lng, position.lat] });
         emitEaseMapToPoint(position.lng, position.lat);

package/dist/chunk-EE7V3OIZ.js

@@ -0,0 +1,116 @@
+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",
+  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",
+  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,
+  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 };

package/dist/chunk-EQ2JKLGT.js

@@ -0,0 +1,311 @@
+import { useViewerActions } from './chunk-25UGGXIE.js';
+import '@panoramax/web-viewer';
+import { getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
+import { useRef, useEffectEvent, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/panels/panoramaxLimitPanning.ts
+var toRad = (degrees) => degrees * Math.PI / 180;
+var MIN_VISIBLE_SHARE = 0.3;
+var MIN_IMAGE_SHARE_OF_VIEW = 0.8;
+var keepInView = (centre, imageMin, imageMax, halfView) => {
+  const keep = MIN_VISIBLE_SHARE * Math.min(imageMax - imageMin, 2 * halfView);
+  return Math.max(imageMin - halfView + keep, Math.min(imageMax + halfView - keep, centre));
+};
+var limitToImage = (psv, position) => {
+  const crop = psv.state.textureData?.panoData?.baseData;
+  if (!crop || !crop.fullWidth || !crop.fullHeight) {
+    return position;
+  }
+  const halfH = toRad(psv.state.hFov) / 2;
+  const halfV = toRad(psv.state.vFov) / 2;
+  let { yaw, pitch } = position;
+  if (crop.croppedWidth < crop.fullWidth) {
+    const left = crop.croppedX / crop.fullWidth * 2 * Math.PI - Math.PI;
+    const right = (crop.croppedX + crop.croppedWidth) / crop.fullWidth * 2 * Math.PI - Math.PI;
+    const centred = yaw > Math.PI ? yaw - 2 * Math.PI : yaw;
+    yaw = keepInView(centred, left, right, halfH);
+  }
+  if (crop.croppedHeight < crop.fullHeight) {
+    const top = Math.PI / 2 - crop.croppedY / crop.fullHeight * Math.PI;
+    const bottom = Math.PI / 2 - (crop.croppedY + crop.croppedHeight) / crop.fullHeight * Math.PI;
+    pitch = keepInView(pitch, bottom, top, halfV);
+  }
+  return { yaw, pitch };
+};
+var toDeg = (radians) => radians * 180 / Math.PI;
+var widestZoomLevel = (psv) => {
+  const crop = psv.state.textureData?.panoData?.baseData;
+  if (!crop || !crop.fullWidth || !crop.fullHeight) {
+    return null;
+  }
+  const flatWide = crop.croppedWidth < crop.fullWidth;
+  const flatHigh = crop.croppedHeight < crop.fullHeight;
+  if (!flatWide && !flatHigh) {
+    return null;
+  }
+  const imageV = crop.croppedHeight / crop.fullHeight * 180;
+  const imageH = crop.croppedWidth / crop.fullWidth * 360;
+  const aspect = Math.tan(toRad(psv.state.hFov) / 2) / Math.tan(toRad(psv.state.vFov) / 2);
+  const vForImageWidth = toDeg(2 * Math.atan(Math.tan(toRad(Math.min(imageH, 179)) / 2) / aspect));
+  const widestV = Math.min(flatHigh ? imageV : 180, flatWide ? vForImageWidth : 180);
+  return psv.dataHelper.fovToZoomLevel(Math.min(widestV / MIN_IMAGE_SHARE_OF_VIEW, 179));
+};
+var limitPanningToImage = (psv) => {
+  const onMove = (event) => {
+    const move = event;
+    if (move.position) {
+      move.position = limitToImage(psv, move.position);
+    }
+  };
+  const onZoomOrLoad = () => {
+    const widest = widestZoomLevel(psv);
+    if (widest != null && psv.getZoomLevel() < widest - 0.01) {
+      psv.zoom(widest);
+      return;
+    }
+    const current = psv.getPosition();
+    const limited = limitToImage(psv, current);
+    if (Math.abs(limited.yaw - current.yaw) > 1e-4 || Math.abs(limited.pitch - current.pitch) > 1e-4) {
+      psv.rotate(limited);
+    }
+  };
+  psv.addEventListener("before-rotate", onMove);
+  psv.addEventListener("before-animate", onMove);
+  psv.addEventListener("zoom-updated", onZoomOrLoad);
+  psv.addEventListener("panorama-loaded", onZoomOrLoad);
+  return () => {
+    psv.removeEventListener("before-rotate", onMove);
+    psv.removeEventListener("before-animate", onMove);
+    psv.removeEventListener("zoom-updated", onZoomOrLoad);
+    psv.removeEventListener("panorama-loaded", onZoomOrLoad);
+  };
+};
+
+// src/panels/panoramaxPhotoFromMetadata.ts
+var toMs = (iso) => {
+  const ms = iso ? Date.parse(iso) : Number.NaN;
+  return Number.isNaN(ms) ? null : ms;
+};
+var panoramaxPhotoFromMetadata = (metadata) => {
+  const properties = metadata.properties ?? {};
+  const producers = metadata.caption?.producer ?? [];
+  const creatorName = producers.find((entry) => !entry.includes("@")) ?? producers.at(-1);
+  const creatorContact = producers.find((entry) => entry.includes("@"));
+  const camera = properties["pers:interior_orientation"];
+  const cameraName = [camera?.camera_manufacturer, camera?.camera_model].filter(Boolean).join(" ");
+  const crop = metadata.panorama?.cropData;
+  const isFlat = crop?.croppedWidth != null && crop.fullWidth != null && crop.croppedWidth < crop.fullWidth;
+  const uploadedAt = toMs(properties.created);
+  const exifEntries = Object.entries(properties.exif ?? {}).filter(([, value]) => typeof value === "string" || typeof value === "number").map(([key, value]) => [key, String(value)]);
+  const exif = exifEntries.length > 0 ? Object.fromEntries(exifEntries) : null;
+  const details = {
+    ...creatorContact && creatorContact !== creatorName ? { creatorContact } : {},
+    ...properties.license ? { license: properties.license } : {},
+    ...metadata.origLinks?.find((link) => link.rel === "license")?.href ? { licenseUrl: metadata.origLinks.find((link) => link.rel === "license")?.href } : {},
+    ...properties.datetimetz ? { capturedAtLocal: properties.datetimetz } : {},
+    ...uploadedAt != null ? { uploadedAt } : {},
+    ...cameraName ? { camera: cameraName } : {},
+    ...isFlat && metadata.horizontalFov ? { fieldOfViewDeg: metadata.horizontalFov } : {},
+    ...properties["quality:horizontal_accuracy"] != null ? { positionAccuracyMeters: properties["quality:horizontal_accuracy"] } : {},
+    ...metadata.origInstance?.instance_name ? { instance: metadata.origInstance.instance_name } : {},
+    ...camera?.focal_length != null ? { focalLengthMm: camera.focal_length } : {},
+    ...properties["original_file:name"] ? { originalFileName: properties["original_file:name"] } : {},
+    ...properties["original_file:size"] != null ? { originalFileSizeBytes: properties["original_file:size"] } : {},
+    ...properties["geovisio:rank_in_collection"] != null ? { rankInSequence: properties["geovisio:rank_in_collection"] } : {},
+    ...exif ? { exif } : {}
+  };
+  return {
+    providerId: "panoramax",
+    photoId: metadata.id,
+    sequenceId: metadata.sequence?.id ?? null,
+    capturedAt: toMs(properties.datetime),
+    isPano: !isFlat,
+    heading: properties["view:azimuth"] ?? null,
+    lngLat: metadata.gps,
+    ...creatorName ? { creatorName } : {},
+    details
+  };
+};
+var panoramaxApiEndpoint = () => `${getStreetImageryConfig().panoramaxApiBase}/api`;
+var HIDE_LEGEND_CSS = "pnx-photo-viewer pnx-bottom-drawer, pnx-photo-viewer pnx-picture-legend { display: none !important; }";
+var normalizeBearing = (degrees) => (degrees % 360 + 360) % 360;
+var PanoramaxPanel = ({
+  photo,
+  onPhotoSelected,
+  onEaseMapToPoint,
+  onViewerPhoto,
+  hideLegend = false
+}) => {
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const lastViewerPhotoIdRef = useRef(null);
+  const readyRef = useRef(false);
+  const pendingSelectRef = useRef(null);
+  const photoRef = useRef(photo);
+  const bearingRafRef = useRef(null);
+  const pendingBearingRef = useRef(null);
+  const pendingHfovRef = useRef(null);
+  const actions = useViewerActions();
+  const emitViewerPhoto = useEffectEvent(
+    (viewerPhoto) => onViewerPhoto?.(viewerPhoto)
+  );
+  useEffect(
+    function syncPhotoRef() {
+      photoRef.current = photo;
+    },
+    [photo]
+  );
+  useEffect(
+    function resetViewerStoreOnProviderChange() {
+      return () => {
+        actions.reset();
+      };
+    },
+    [actions, photo.providerId]
+  );
+  useEffect(
+    function mountPanoramaxViewer() {
+      const viewer = viewerRef.current;
+      const container = containerRef.current;
+      if (!viewer || !container) {
+        return;
+      }
+      lastViewerPhotoIdRef.current = photoRef.current.photoId;
+      const flushBearing = () => {
+        bearingRafRef.current = null;
+        if (pendingBearingRef.current != null) {
+          actions.setPov({ bearing: pendingBearingRef.current });
+          pendingBearingRef.current = null;
+        }
+        if (pendingHfovRef.current != null) {
+          actions.setPov({ hfov: pendingHfovRef.current });
+          pendingHfovRef.current = null;
+        }
+      };
+      const onSelect = (event) => {
+        const { seqId, picId } = event.detail;
+        if (!picId) {
+          return;
+        }
+        lastViewerPhotoIdRef.current = picId;
+        const currentPhoto = photoRef.current;
+        const sequenceId = seqId ?? (picId === currentPhoto.photoId && currentPhoto.sequenceId ? currentPhoto.sequenceId : `photo:${picId}`);
+        onPhotoSelected({
+          provider: "panoramax",
+          sequenceId,
+          photoId: picId
+        });
+      };
+      const onPictureLoaded = (event) => {
+        const detail = event.detail;
+        const metadata = viewer.psv?.getPictureMetadata();
+        if (metadata) {
+          emitViewerPhoto(panoramaxPhotoFromMetadata(metadata));
+        }
+        if (detail.lon == null || detail.lat == null) {
+          return;
+        }
+        actions.setPov({ lngLat: [detail.lon, detail.lat] });
+        if (detail.x != null) {
+          actions.setPov({ bearing: normalizeBearing(detail.x) });
+        }
+        const psv = viewer.psv;
+        if (psv && detail.z != null) {
+          actions.setPov({ hfov: psv.dataHelper.zoomLevelToFov(detail.z) });
+        }
+        onEaseMapToPoint(detail.lon, detail.lat);
+      };
+      const onViewRotated = (event) => {
+        const detail = event.detail;
+        pendingBearingRef.current = normalizeBearing(detail.x);
+        const psv = viewer.psv;
+        if (psv && detail.z != null) {
+          pendingHfovRef.current = psv.dataHelper.zoomLevelToFov(detail.z);
+        }
+        if (bearingRafRef.current == null) {
+          bearingRafRef.current = requestAnimationFrame(flushBearing);
+        }
+      };
+      viewer.addEventListener("select", onSelect);
+      viewer.addEventListener("psv:picture-loaded", onPictureLoaded);
+      viewer.addEventListener("psv:view-rotated", onViewRotated);
+      const resizeObserver = new ResizeObserver(() => {
+        viewer.psv?.resize();
+      });
+      resizeObserver.observe(container);
+      let stopLimit = null;
+      const startLimit = () => {
+        if (!stopLimit && viewer.psv) {
+          stopLimit = limitPanningToImage(viewer.psv);
+        }
+      };
+      startLimit();
+      viewer.addEventListener("psv:picture-loaded", startLimit);
+      readyRef.current = true;
+      const pending = pendingSelectRef.current;
+      if (pending) {
+        pendingSelectRef.current = null;
+        if (typeof viewer.select === "function") {
+          viewer.select(pending.sequenceId ?? null, pending.photoId);
+        }
+      }
+      return () => {
+        readyRef.current = false;
+        if (bearingRafRef.current != null) {
+          cancelAnimationFrame(bearingRafRef.current);
+          bearingRafRef.current = null;
+        }
+        resizeObserver.disconnect();
+        viewer.removeEventListener("select", onSelect);
+        viewer.removeEventListener("psv:picture-loaded", onPictureLoaded);
+        viewer.removeEventListener("psv:view-rotated", onViewRotated);
+        viewer.removeEventListener("psv:picture-loaded", startLimit);
+        stopLimit?.();
+      };
+    },
+    [actions, onEaseMapToPoint, onPhotoSelected]
+  );
+  useEffect(
+    function syncExternalPhotoSelection() {
+      const viewer = viewerRef.current;
+      if (!viewer || photo.photoId === lastViewerPhotoIdRef.current) {
+        return;
+      }
+      actions.reset();
+      lastViewerPhotoIdRef.current = photo.photoId;
+      if (!readyRef.current) {
+        pendingSelectRef.current = { sequenceId: photo.sequenceId, photoId: photo.photoId };
+        return;
+      }
+      if (typeof viewer.select === "function") {
+        viewer.select(photo.sequenceId ?? null, photo.photoId);
+      }
+    },
+    [actions, photo.photoId, photo.sequenceId]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
+      style: { aspectRatio: "4 / 3" },
+      children: [
+        hideLegend ? /* @__PURE__ */ jsx("style", { children: HIDE_LEGEND_CSS }) : null,
+        /* @__PURE__ */ jsx(
+          "pnx-photo-viewer",
+          {
+            ref: viewerRef,
+            className: "block h-full w-full",
+            endpoint: panoramaxApiEndpoint(),
+            "url-parameters": "false",
+            picture: photo.photoId,
+            sequence: photo.sequenceId ?? void 0
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { PanoramaxPanel };

package/dist/hooks/useAllProviderMapFeatures.d.ts

@@ -2,7 +2,3 @@ import type { DateRange } from '@osm-editor-kit/street-imagery';
 import type { Bbox, NormalizedMapFeature } from '@osm-editor-kit/street-imagery';
 import { type ProviderId } from '@osm-editor-kit/street-imagery';
 export declare const useAllProviderMapFeatures: (providerIds: ProviderId[], bbox: Bbox | null, zoom: number, date?: DateRange) => NormalizedMapFeature[];
-export declare const useAllProviderMapFeaturesLoading: (providerIds: ProviderId[], bbox: Bbox | null, zoom: number) => {
-    isLoading: boolean;
-    isFetching: boolean;
-};

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/PhotoDate.d.ts

@@ -0,0 +1,16 @@
+type PhotoDateProps = {
+    /** Capture time (ms); `null` shows "Unknown date". */
+    timestamp: number | null | undefined;
+    className?: string;
+    /**
+     * Capture time with the camera's UTC offset (`2025-03-08T15:40:35+01:00`). The tooltip then
+     * shows date and time as the camera's clock had it, instead of the date alone.
+     */
+    localDateTime?: string;
+};
+/**
+ * A date as month and year ("Aug 2026"). The tooltip has the full date and, on a second line,
+ * how long ago that is.
+ */
+export declare const PhotoDate: ({ timestamp, className, localDateTime }: PhotoDateProps) => import("react").JSX.Element;
+export {};