@osm-editor-kit/street-imagery-react 1.0.0 → 1.1.0

package/README.md

@@ -11,7 +11,7 @@ React and MapLibre layers, hooks and photo viewers for street-level imagery (Map
 npm install @osm-editor-kit/street-imagery-react
 ```
 
-Peer dependencies to install as well: `@osm-editor-kit/street-imagery`, `react`, `react-dom`, `maplibre-gl`, `react-map-gl`, `@tanstack/react-query`, `zustand`, `mapillary-js`. `@panoramax/web-viewer` is optional (see below). Wrap your app in a TanStack `QueryClientProvider`; the hooks use it.
+Peer dependencies to install as well: `@osm-editor-kit/street-imagery`, `react`, `react-dom`, `maplibre-gl`, `react-map-gl`, `@tanstack/react-query`, `zustand`. `mapillary-js` is optional: you only need it for the photo viewer (the `viewer` and `viewer-panels` entries). `@panoramax/web-viewer` is optional too (see below). Wrap your app in a TanStack `QueryClientProvider`; the hooks use it.
 
 ## What it does
 
@@ -28,11 +28,11 @@ Peer dependencies to install as well: `@osm-editor-kit/street-imagery`, `react`,
 ```tsx
 import {
   StreetLevelImagerySourcesAndLayers,
-  StreetLevelImageryViewer,
   useMapViewportBbox,
   queryStreetImageryFeatures,
   streetImageryInteractiveLayerIds,
 } from '@osm-editor-kit/street-imagery-react'
+import { StreetLevelImageryViewer } from '@osm-editor-kit/street-imagery-react/viewer'
 import { createStreetImageryConfig } from '@osm-editor-kit/street-imagery'
 
 // Inside <Map id="main">: the bbox follows the map
@@ -66,7 +66,7 @@ const hits = queryStreetImageryFeatures(event)
 
 **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`, `usePhotoThumbnail` / `usePhotoFullUrl`, `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.
+Also: `useAllProviderPhotos`, `useProviderPhotos` / `useProviderSequences` / `useProviderMapFeatures`, `usePhotoThumbnail` / `usePhotoFullUrl`, `resolveSelectedSequence`, `StreetLevelImageryViewCone`, `useViewerBearing` / `useViewerActions`. The panels themselves (`MapillaryPanel`, `PanoramaxPanel`) are in `@osm-editor-kit/street-imagery-react/viewer-panels`. `StreetLevelImageryViewer` is in `@osm-editor-kit/street-imagery-react/viewer` and loads them on demand, so `mapillary-js` is only loaded when a photo is shown.
 
 ### Panoramax in the Mapillary viewer
 
@@ -181,11 +181,11 @@ const [view, setView] = useState<PhotoView | null>(null)
 ```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'
+import { StreetLevelImageryViewer } from '@osm-editor-kit/street-imagery-react/viewer'
 
 // Turn any Mapillary photo (360° or flat) towards a junction:
 <StreetLevelImageryViewer photo={photo} lookAt={{ lngLat: node, shape: PLACE_TARGET }} … />

package/dist/StreetLevelImageryViewer.d.ts

@@ -1,6 +1,6 @@
 import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
 import { type ComponentType } from 'react';
-import type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
+import type { MapillaryLookAt, MapillaryViewerOutline } from './mapillary/lookAt';
 import type { PanoramaxPanelProps } from './panels/PanoramaxPanel';
 import type { StreetImageryPhotoSelection } from './types';
 type StreetLevelImageryViewerProps = {

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export { BASE_COLOR, SELECTION_COLOR, StreetLevelImagerySelectionOverlay, resolveSelectedSequence, } from './StreetLevelImagerySelectionOverlay';
 export { StreetLevelImagerySourcesAndLayers, type PhotoFilter, } from './StreetLevelImagerySourcesAndLayers';
 export { StreetLevelImageryViewCone, VIEW_SHAPE_FILL_OPACITY } from './StreetLevelImageryViewCone';
-export { StreetLevelImageryViewer } from './StreetLevelImageryViewer';
 export type { StreetImageryPhotoSelection } from './types';
 export { queryStreetImageryFeatures, streetImageryInteractiveLayerIds, type StreetImageryClickFeature, } from './streetImageryClick';
 export { useAllProviderMapFeatures } from './hooks/useAllProviderMapFeatures';
@@ -16,7 +15,7 @@ export { viewSuggestionLabel } from './viewpoints/viewDirectionLabels';
 export { getViewpointSession, useActiveDirectionKey, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useViewpointLine, useViewpoints, type ViewpointHistoryEntry, } from './viewpoints/useViewpointSessionStore';
 export { useViewSuggestions, type ViewSuggestionsOptions, type ViewSuggestionsResult, } from './viewpoints/useViewSuggestions';
 export { usePhotosLookingAt, type PhotosLookingAtOptions, type PhotosLookingAtResult, } from './viewpoints/usePhotosLookingAt';
-export type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
+export type { MapillaryLookAt, MapillaryViewerOutline } from './mapillary/lookAt';
 export { useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, useSelectedMapillaryFeature, } from './mapillary/useMapillaryFeatures';
 export { LocationPickOnMap, type LocationPickOnMapProps } from './openers/LocationPickOnMap';
 export { useArmedLocationOpenerId, useLocationPickActions } from './openers/useLocationPickStore';

package/dist/index.js

@@ -5,7 +5,7 @@ import { c } from 'react/compiler-runtime';
 import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, getProviderAdapter, providerById, providerCoversBbox, fetchedSequencesMinZoom, viewShapeRadiusMeters, viewConeGeoJson, viewfieldLayerId, photoLayerId, photoTargetLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoFilter, photoFullUrlQueryKey, photoThumbnailQueryKey, formatLocalDateTime, formatRelativeDate, formatDateTooltip, formatMonth, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, rankPhotosLookingAt, SIGN_TARGET, bestTargetImage, MAP_FEATURE_COLOR, mapillaryValueName, mapillaryIconUrl, dateRangeToSliderPositions, sliderPositionsToDateRange, dateSliderBins, dateSliderPosition, yearsAgoMs, parseIsoDateStartMs, findLocationOpener, formatDate, isIsoDate, alignLineToPoints, setStreetImageryConfig, fetchImageDetections, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, resolvePhotoPanoramaUrl, resolvePhotoThumbnailUrl, coneRadiusMeters, openLocationInNewTab, buildMapFeatureLayerFilter, featureSourceId, viewfieldZoomStep, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceTilesSourceId, renameExpressionProperties, sequenceTilesLayerId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, VIEWFIELD_MIN_ZOOM, emptyPointCollection, mapFeaturesToFeatureCollection, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection, bboxIntersects } from '@osm-editor-kit/street-imagery';
 import { useMap, Source, Layer } from 'react-map-gl/maplibre';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { lazy, useEffect, useSyncExternalStore, useState, useRef, useEffectEvent, Fragment as Fragment$1, Suspense } from 'react';
+import { useEffect, useSyncExternalStore, useState, useRef, useEffectEvent, Fragment as Fragment$1 } from 'react';
 import { useQuery, useQueries, keepPreviousData } from '@tanstack/react-query';
 import { create } from 'zustand';
 
@@ -1433,97 +1433,6 @@ var StreetLevelImagerySourcesAndLayers = (t0) => {
 function _temp(id) {
   return providerById[id].kind === "photo" && getProviderAdapter(id)?.fetchPhotos;
 }
-var MapillaryPanel = lazy(() => import('./MapillaryPanel-SOHGB7JA.js').then((module) => ({
-  default: module.MapillaryPanel
-})));
-var PanoramaxPanel = lazy(() => import('./PanoramaxPanel-5P5LWMRY.js').then((module) => ({
-  default: module.PanoramaxPanel
-})));
-var ViewerPanelPlaceholder = () => {
-  const $ = c(2);
-  const {
-    messages
-  } = useStreetImageryI18n();
-  let t0;
-  if ($[0] !== messages.viewer.loading) {
-    t0 = /* @__PURE__ */ jsx("div", { className: "flex min-h-48 animate-pulse items-center justify-center rounded-lg border border-slate-200 bg-slate-100", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: messages.viewer.loading }) });
-    $[0] = messages.viewer.loading;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
-};
-var StreetLevelImageryViewer = (t0) => {
-  const $ = c(22);
-  const {
-    photo,
-    groupPhotos,
-    onPhotoSelected,
-    onEaseMapToPoint,
-    onViewerPhoto,
-    onViewerView,
-    lookAtBearing,
-    lookAt,
-    outlines,
-    hideAttribution,
-    panoramaxPanel: PanoramaxPanelOverride
-  } = t0;
-  if (photo.providerId === "mapillary") {
-    let t1;
-    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t1 = /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {});
-      $[0] = t1;
-    } else {
-      t1 = $[0];
-    }
-    let t2;
-    if ($[1] !== groupPhotos || $[2] !== hideAttribution || $[3] !== lookAt || $[4] !== lookAtBearing || $[5] !== onEaseMapToPoint || $[6] !== onPhotoSelected || $[7] !== onViewerPhoto || $[8] !== onViewerView || $[9] !== outlines || $[10] !== photo) {
-      t2 = /* @__PURE__ */ jsx(Suspense, { fallback: t1, children: /* @__PURE__ */ jsx(MapillaryPanel, { groupPhotos, hideAttribution, onEaseMapToPoint, onPhotoSelected, lookAt, lookAtBearing, outlines, onViewerPhoto, onViewerView, photo }) });
-      $[1] = groupPhotos;
-      $[2] = hideAttribution;
-      $[3] = lookAt;
-      $[4] = lookAtBearing;
-      $[5] = onEaseMapToPoint;
-      $[6] = onPhotoSelected;
-      $[7] = onViewerPhoto;
-      $[8] = onViewerView;
-      $[9] = outlines;
-      $[10] = photo;
-      $[11] = t2;
-    } else {
-      t2 = $[11];
-    }
-    return t2;
-  }
-  if (photo.providerId === "panoramax") {
-    const Panel = PanoramaxPanelOverride ?? PanoramaxPanel;
-    let t1;
-    if ($[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t1 = /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {});
-      $[12] = t1;
-    } else {
-      t1 = $[12];
-    }
-    let t2;
-    if ($[13] !== Panel || $[14] !== groupPhotos || $[15] !== hideAttribution || $[16] !== onEaseMapToPoint || $[17] !== onPhotoSelected || $[18] !== onViewerPhoto || $[19] !== onViewerView || $[20] !== photo) {
-      t2 = /* @__PURE__ */ jsx(Suspense, { fallback: t1, children: /* @__PURE__ */ jsx(Panel, { groupPhotos, hideAttribution, onViewerPhoto, onViewerView, onEaseMapToPoint, onPhotoSelected, photo }) });
-      $[13] = Panel;
-      $[14] = groupPhotos;
-      $[15] = hideAttribution;
-      $[16] = onEaseMapToPoint;
-      $[17] = onPhotoSelected;
-      $[18] = onViewerPhoto;
-      $[19] = onViewerView;
-      $[20] = photo;
-      $[21] = t2;
-    } else {
-      t2 = $[21];
-    }
-    return t2;
-  }
-  return null;
-};
 var streetImageryInteractiveLayerIds = (providers) => [...providers.map((providerId) => photoLayerId(providerId)), ...providers.map((providerId) => photoTargetLayerId(providerId)), ...providers.map((providerId) => viewfieldLayerId(providerId)), ...providers.map((providerId) => featureLayerId(providerId))];
 var parseProviderIdFromLayerId = (layerId) => {
   const photoMatch = layerId.match(/^photos-(.+)$/);
@@ -4418,4 +4327,4 @@ var PhotoDateRangeFilter = ({
   ] });
 };
 
-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, usePhotosLookingAt, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useSelectedMapillaryFeature, 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, 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, usePhotosLookingAt, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useSelectedMapillaryFeature, useViewSuggestions, useViewpointLine, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel };

package/dist/mapillary/lookAt.d.ts

@@ -0,0 +1,26 @@
+import type { LngLat, TargetShape } from '@osm-editor-kit/street-imagery';
+/** A place the Mapillary viewer should turn to: a sign, a traffic light, a junction … */
+export type MapillaryLookAt = {
+    lngLat: LngLat;
+    /** Size and height of the target; decides zoom and vertical position. Default: a traffic sign. */
+    shape?: TargetShape;
+    /** The target's outline in the shown image, if known; it is more exact than the location. */
+    outline?: [number, number][];
+    /**
+     * Mapillary value of the target (`regulatory--bicycles-only--g1`). Without an `outline`, the
+     * image's own detection of this value is used: Mapillary links a map feature to few of its
+     * images, but almost every image has a detection of it. With several, the one nearest to the
+     * computed position wins (the computed position alone can be far off in 360° images).
+     */
+    value?: string;
+    /** Label for the outline drawn around the target. */
+    label?: string;
+};
+export type MapillaryViewerOutline = {
+    id: string;
+    /** Image ("basic") coordinates, `[0, 0]` top left to `[1, 1]` bottom right. */
+    outline: [number, number][];
+    label?: string;
+    /** CSS color number, e.g. `0xffff00`. Default yellow. */
+    color?: number;
+};

package/dist/panels/MapillaryPanel.d.ts

@@ -1,7 +1,7 @@
 import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
 import 'mapillary-js/dist/mapillary.css';
+import type { MapillaryLookAt, MapillaryViewerOutline } from '../mapillary/lookAt';
 import type { StreetImageryPhotoSelection } from '../types';
-import { type MapillaryLookAt, type MapillaryViewerOutline } from './mapillaryLookAt';
 type MapillaryPanelProps = {
     photo: NormalizedPhoto;
     groupPhotos: NormalizedPhoto[];

package/dist/panels/mapillaryLookAt.d.ts

@@ -1,30 +1,6 @@
-import { type LngLat, type TargetShape, type ViewTarget } from '@osm-editor-kit/street-imagery';
+import { type ViewTarget } from '@osm-editor-kit/street-imagery';
 import { type Image, type Viewer } from 'mapillary-js';
-/** A place the Mapillary viewer should turn to: a sign, a traffic light, a junction … */
-export type MapillaryLookAt = {
-    lngLat: LngLat;
-    /** Size and height of the target; decides zoom and vertical position. Default: a traffic sign. */
-    shape?: TargetShape;
-    /** The target's outline in the shown image, if known; it is more exact than the location. */
-    outline?: [number, number][];
-    /**
-     * Mapillary value of the target (`regulatory--bicycles-only--g1`). Without an `outline`, the
-     * image's own detection of this value is used: Mapillary links a map feature to few of its
-     * images, but almost every image has a detection of it. With several, the one nearest to the
-     * computed position wins (the computed position alone can be far off in 360° images).
-     */
-    value?: string;
-    /** Label for the outline drawn around the target. */
-    label?: string;
-};
-export type MapillaryViewerOutline = {
-    id: string;
-    /** Image ("basic") coordinates, `[0, 0]` top left to `[1, 1]` bottom right. */
-    outline: [number, number][];
-    label?: string;
-    /** CSS color number, e.g. `0xffff00`. Default yellow. */
-    color?: number;
-};
+import type { MapillaryLookAt, MapillaryViewerOutline } from '../mapillary/lookAt';
 /**
  * Where the target is in the image: from its outline, else computed from the locations
  * (360°: the viewer's own projection; flat: a pinhole model). `undefined` when a flat image does

package/dist/viewer/index.d.ts

@@ -0,0 +1 @@
+export { StreetLevelImageryViewer } from '../StreetLevelImageryViewer';

package/dist/viewer.js

@@ -0,0 +1,98 @@
+import { useStreetImageryI18n } from './chunk-3DFVM6VK.js';
+import { c } from 'react/compiler-runtime';
+import { lazy, Suspense } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var MapillaryPanel = lazy(() => import('./MapillaryPanel-SOHGB7JA.js').then((module) => ({
+  default: module.MapillaryPanel
+})));
+var PanoramaxPanel = lazy(() => import('./PanoramaxPanel-5P5LWMRY.js').then((module) => ({
+  default: module.PanoramaxPanel
+})));
+var ViewerPanelPlaceholder = () => {
+  const $ = c(2);
+  const {
+    messages
+  } = useStreetImageryI18n();
+  let t0;
+  if ($[0] !== messages.viewer.loading) {
+    t0 = /* @__PURE__ */ jsx("div", { className: "flex min-h-48 animate-pulse items-center justify-center rounded-lg border border-slate-200 bg-slate-100", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: messages.viewer.loading }) });
+    $[0] = messages.viewer.loading;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+var StreetLevelImageryViewer = (t0) => {
+  const $ = c(22);
+  const {
+    photo,
+    groupPhotos,
+    onPhotoSelected,
+    onEaseMapToPoint,
+    onViewerPhoto,
+    onViewerView,
+    lookAtBearing,
+    lookAt,
+    outlines,
+    hideAttribution,
+    panoramaxPanel: PanoramaxPanelOverride
+  } = t0;
+  if (photo.providerId === "mapillary") {
+    let t1;
+    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {});
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== groupPhotos || $[2] !== hideAttribution || $[3] !== lookAt || $[4] !== lookAtBearing || $[5] !== onEaseMapToPoint || $[6] !== onPhotoSelected || $[7] !== onViewerPhoto || $[8] !== onViewerView || $[9] !== outlines || $[10] !== photo) {
+      t2 = /* @__PURE__ */ jsx(Suspense, { fallback: t1, children: /* @__PURE__ */ jsx(MapillaryPanel, { groupPhotos, hideAttribution, onEaseMapToPoint, onPhotoSelected, lookAt, lookAtBearing, outlines, onViewerPhoto, onViewerView, photo }) });
+      $[1] = groupPhotos;
+      $[2] = hideAttribution;
+      $[3] = lookAt;
+      $[4] = lookAtBearing;
+      $[5] = onEaseMapToPoint;
+      $[6] = onPhotoSelected;
+      $[7] = onViewerPhoto;
+      $[8] = onViewerView;
+      $[9] = outlines;
+      $[10] = photo;
+      $[11] = t2;
+    } else {
+      t2 = $[11];
+    }
+    return t2;
+  }
+  if (photo.providerId === "panoramax") {
+    const Panel = PanoramaxPanelOverride ?? PanoramaxPanel;
+    let t1;
+    if ($[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {});
+      $[12] = t1;
+    } else {
+      t1 = $[12];
+    }
+    let t2;
+    if ($[13] !== Panel || $[14] !== groupPhotos || $[15] !== hideAttribution || $[16] !== onEaseMapToPoint || $[17] !== onPhotoSelected || $[18] !== onViewerPhoto || $[19] !== onViewerView || $[20] !== photo) {
+      t2 = /* @__PURE__ */ jsx(Suspense, { fallback: t1, children: /* @__PURE__ */ jsx(Panel, { groupPhotos, hideAttribution, onViewerPhoto, onViewerView, onEaseMapToPoint, onPhotoSelected, photo }) });
+      $[13] = Panel;
+      $[14] = groupPhotos;
+      $[15] = hideAttribution;
+      $[16] = onEaseMapToPoint;
+      $[17] = onPhotoSelected;
+      $[18] = onViewerPhoto;
+      $[19] = onViewerView;
+      $[20] = photo;
+      $[21] = t2;
+    } else {
+      t2 = $[21];
+    }
+    return t2;
+  }
+  return null;
+};
+
+export { StreetLevelImageryViewer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osm-editor-kit/street-imagery-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React MapLibre layers and photo viewers for street-level imagery providers.",
   "homepage": "https://osm-editor-kit.github.io/street-imagery/",
   "bugs": {
@@ -27,6 +27,10 @@
       "types": "./dist/photo-details/index.d.ts",
       "import": "./dist/photo-details.js"
     },
+    "./viewer": {
+      "types": "./dist/viewer/index.d.ts",
+      "import": "./dist/viewer.js"
+    },
     "./viewer-panels": {
       "types": "./dist/viewer-panels/index.d.ts",
       "import": "./dist/viewer-panels.js"
@@ -49,12 +53,14 @@
     "prepack": "bun ../../scripts/package-exports-for-publish.ts",
     "postpack": "bun ../../scripts/package-exports-restore.ts"
   },
+  "dependencies": {
+    "@types/geojson": "^7946.0.16"
+  },
   "devDependencies": {
     "@babel/core": "^7.29.7",
     "@panoramax/web-viewer": "^5",
     "@tanstack/react-query": "^5.85.5",
     "@types/babel__core": "^7.20.5",
-    "@types/geojson": "^7946.0.16",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
@@ -82,6 +88,9 @@
   "peerDependenciesMeta": {
     "@panoramax/web-viewer": {
       "optional": true
+    },
+    "mapillary-js": {
+      "optional": true
     }
   },
   "publishExports": {
@@ -93,6 +102,10 @@
       "types": "./dist/photo-details/index.d.ts",
       "import": "./dist/photo-details.js"
     },
+    "./viewer": {
+      "types": "./dist/viewer/index.d.ts",
+      "import": "./dist/viewer.js"
+    },
     "./viewer-panels": {
       "types": "./dist/viewer-panels/index.d.ts",
       "import": "./dist/viewer-panels.js"