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

package/README.md

@@ -40,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
   }}
 />
 
@@ -50,9 +52,11 @@ const hits = queryStreetImageryFeatures(event)
   onPhotoSelected={setSelection} onEaseMapToPoint={(lng, lat) => map.easeTo({ center: [lng, lat] })} />
 ```
 
+**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.
+
 **Mapillary:** `createStreetImageryConfig({ mapillaryToken })` or `setStreetImageryConfig` at boot (`@osm-editor-kit/street-imagery`). **Panoramax + Vite:** see `app/vite.config.ts` for the consuming-app setup.
 
-Also: `useAllProviderPhotos`, `useProviderPhotos` / `useProviderSequences` / `useProviderMapFeatures`, `usePhotoThumbnails`, `resolveSelectedSequence`, `StreetLevelImageryViewCone`, `useViewerBearing` / `useViewerActions`, `MapillaryPanel`, `PanoramaxPanel`.
+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` and `@panoramax/web-viewer` are only loaded when a photo is shown.
 
 ## Viewpoints and floating viewer
 
@@ -119,7 +123,7 @@ const { data: detections } = useMapillaryImageDetections(photo.photoId, {
 
 - 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.
+- `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
 

package/dist/MapillaryPanel-FAXVZH37.js

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

package/dist/PanoramaxPanel-BTHEMKYY.js

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

package/dist/StreetLevelImagerySelectionOverlay.d.ts

@@ -15,12 +15,14 @@ export type StreetLevelImagerySelectionOverlayProps = {
     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;
 };
 /**
  * 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;
+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;

package/dist/StreetLevelImagerySourcesAndLayers.d.ts

@@ -41,6 +41,16 @@ export type StreetLevelImagerySourcesAndLayersProps = {
         /** 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

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

package/dist/{chunk-ZAIXGYAH.js → chunk-6EMFFIL2.js}

@@ -31,7 +31,7 @@ var en = {
     exactDates: "Exact dates",
     from: "From",
     to: "To",
-    photoCount: (count) => count === 1 ? "1 photo" : `${count} photos`
+    photoCount: (count) => count === 1 ? "1 photo" : `${count.toLocaleString("en")} photos`
   },
   viewpointRole: {
     here: "Here",
@@ -87,7 +87,7 @@ var de = {
     exactDates: "Genaue Daten",
     from: "Von",
     to: "Bis",
-    photoCount: (count) => count === 1 ? "1 Foto" : `${count} Fotos`
+    photoCount: (count) => count === 1 ? "1 Foto" : `${count.toLocaleString("de")} Fotos`
   },
   viewpointRole: {
     here: "Hier",

package/dist/{chunk-EQ2JKLGT.js → chunk-KZTMKQT5.js}

@@ -299,6 +299,7 @@ var PanoramaxPanel = ({
             className: "block h-full w-full",
             endpoint: panoramaxApiEndpoint(),
             "url-parameters": "false",
+            widgets: hideLegend ? "false" : void 0,
             picture: photo.photoId,
             sequence: photo.sequenceId ?? void 0
           }

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

@@ -211,7 +211,12 @@ var MapillaryPanel = ({
           lngLat: [position.lng, position.lat],
           ...image.creatorUsername ? { creatorName: image.creatorUsername } : {}
         });
-        actions.setPov({ lngLat: [position.lng, position.lat] });
+        const isFlat = image.cameraType !== "spherical" && image.cameraType !== "equirectangular";
+        const compass = image.computedCompassAngle ?? image.compassAngle;
+        actions.setPov({
+          lngLat: [position.lng, position.lat],
+          ...isFlat && compass != null ? { bearing: compass } : {}
+        });
         emitEaseMapToPoint(position.lng, position.lat);
       };
       const flushBearing = () => {

package/dist/filters/PhotoDateRangeFilter.d.ts

@@ -31,6 +31,11 @@ export type PhotoDateRangeFilterProps = {
      * or left out.
      */
     dateInputs?: 'collapsed' | 'open' | 'none';
+    /**
+     * The "All dates" action next to the chosen range, which removes both limits. Default true;
+     * without it the user moves both handles to the ends.
+     */
+    allDatesAction?: boolean;
     className?: string;
 };
 /**
@@ -38,4 +43,4 @@ export type PhotoDateRangeFilterProps = {
  * 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;
+export declare const PhotoDateRangeFilter: ({ value, onChange, capturedAt, yearLines, recommendedMaxAgeYears, markers, maxYears, now: nowProp, dateInputs, className, allDatesAction, }: PhotoDateRangeFilterProps) => import("react").JSX.Element;

package/dist/hooks/useProviderData.d.ts

@@ -1,5 +1,10 @@
 import type { Bbox } from '@osm-editor-kit/street-imagery';
 import { type ProviderId } from '@osm-editor-kit/street-imagery';
-export declare const useProviderPhotos: (providerId: ProviderId, bbox: Bbox | null, zoom: number) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedPhoto[]>, Error>;
-export declare const useProviderSequences: (providerId: ProviderId, bbox: Bbox | null, zoom: number) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedSequence[]>, Error>;
-export declare const useProviderMapFeatures: (providerId: ProviderId, bbox: Bbox | null, zoom: number) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedMapFeature[]>, Error>;
+/** Host limit on top of the provider's own minimum zooms: below it nothing is requested. */
+type ProviderDataOptions = {
+    minZoom?: number;
+};
+export declare const useProviderPhotos: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedPhoto[]>, Error>;
+export declare const useProviderSequences: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedSequence[]>, Error>;
+export declare const useProviderMapFeatures: (providerId: ProviderId, bbox: Bbox | null, zoom: number, { minZoom }?: ProviderDataOptions) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").NormalizedMapFeature[]>, Error>;
+export {};

package/dist/index.d.ts

@@ -9,15 +9,13 @@ export * from './hooks/useAllProviderPhotos';
 export * from './hooks/useMapViewportBbox';
 export * from './hooks/useProviderData';
 export * from './hooks/usePhotoThumbnails';
-export { MapillaryPanel } from './panels/MapillaryPanel';
-export { PanoramaxPanel } from './panels/PanoramaxPanel';
 export * from './useViewerStore';
 export { FloatingPhotoViewer, FloatingViewerInfoButton, type FloatingPhotoViewerProps, } from './viewpoints/FloatingPhotoViewer';
 export { VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, ViewpointLayer, viewDirectionKeyFromFeatures, type ViewpointLayerProps, } from './viewpoints/ViewpointLayer';
 export { viewSuggestionLabel } from './viewpoints/viewDirectionLabels';
 export * from './viewpoints/useViewpointSessionStore';
 export * from './viewpoints/useViewSuggestions';
-export { mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo, type MapillaryLookAt, type MapillaryViewerOutline, } from './panels/mapillaryLookAt';
+export type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
 export * from './mapillary/useMapillaryFeatures';
 export { LocationPickOnMap, type LocationPickOnMapProps } from './openers/LocationPickOnMap';
 export * from './openers/useLocationPickStore';

package/dist/index.js

@@ -1,9 +1,7 @@
-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';
+import { useStreetImageryI18n } from './chunk-6EMFFIL2.js';
+export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-6EMFFIL2.js';
 export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat } from './chunk-25UGGXIE.js';
-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 { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, fetchedSequencesMinZoom, viewConeGeoJson, viewShapeRadiusMeters, setStreetImageryConfig, viewfieldLayerId, photoLayerId, photoTargetLayerId, 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, sequenceTilesSourceId, renameExpressionProperties, sequenceTilesLayerId, 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';
@@ -21,7 +19,8 @@ var StreetLevelImagerySelectionOverlay = ({
   selectedPhoto,
   selectedSequence,
   cameraLngLat,
-  sequenceBeforeId
+  sequenceBeforeId,
+  beforeId
 }) => {
   const photoLngLat = selectedPhoto?.lngLat;
   const cameraDiffers = photoLngLat != null && cameraLngLat != null && distanceMeters(photoLngLat, cameraLngLat) > SAME_POSITION_METERS;
@@ -73,7 +72,7 @@ var StreetLevelImagerySelectionOverlay = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
-        beforeId: sequenceBeforeId,
+        beforeId: sequenceBeforeId ?? beforeId,
         id: "sequence-highlight-layer",
         type: "line",
         source: SEQUENCE_HIGHLIGHT_SOURCE_ID,
@@ -85,6 +84,7 @@ var StreetLevelImagerySelectionOverlay = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: "selection-connector-layer",
         type: "line",
         source: CONNECTOR_SOURCE_ID,
@@ -95,6 +95,7 @@ var StreetLevelImagerySelectionOverlay = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: "selection-highlight-layer",
         type: "circle",
         source: POINTS_SOURCE_ID,
@@ -110,6 +111,7 @@ var StreetLevelImagerySelectionOverlay = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: "selection-camera-layer",
         type: "circle",
         source: POINTS_SOURCE_ID,
@@ -137,10 +139,10 @@ var withinBbox = (bbox) => (item) => {
   const [lng, lat] = item.lngLat;
   return lng >= bbox[0] && lng <= bbox[2] && lat >= bbox[1] && lat <= bbox[3];
 };
-var useProviderPhotos = (providerId, bbox, zoom) => {
+var useProviderPhotos = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
   const meta = providerById[providerId];
-  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= meta.minZoom && adapter?.fetchPhotos != null;
+  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(meta.minZoom, minZoom) && adapter?.fetchPhotos != null;
   return useQuery({
     queryKey: ["provider-photos", providerId, bboxKey(bbox), zoom],
     queryFn: async ({ signal }) => {
@@ -151,11 +153,11 @@ var useProviderPhotos = (providerId, bbox, zoom) => {
     placeholderData: (previous) => previous
   });
 };
-var useProviderSequences = (providerId, bbox, zoom) => {
+var useProviderSequences = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
   const meta = providerById[providerId];
-  const sequencesMinZoom = meta.sequencesMinZoom;
-  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= sequencesMinZoom && adapter?.fetchSequences != null;
+  const sequencesMinZoom = fetchedSequencesMinZoom(providerId);
+  const enabled = meta.kind === "photo" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(sequencesMinZoom, minZoom) && adapter?.fetchSequences != null;
   return useQuery({
     queryKey: ["provider-sequences", providerId, bboxKey(bbox), zoom],
     queryFn: ({ signal }) => adapter?.fetchSequences?.(bbox, zoom, signal) ?? [],
@@ -163,10 +165,10 @@ var useProviderSequences = (providerId, bbox, zoom) => {
     placeholderData: (previous) => previous
   });
 };
-var useProviderMapFeatures = (providerId, bbox, zoom) => {
+var useProviderMapFeatures = (providerId, bbox, zoom, { minZoom = 0 } = {}) => {
   const adapter = adapterById[providerId];
   const meta = providerById[providerId];
-  const enabled = meta.kind === "mapFeature" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= meta.minZoom && adapter?.fetchMapFeatures != null;
+  const enabled = meta.kind === "mapFeature" && bbox != null && providerCoversBbox(providerId, bbox) && zoom >= Math.max(meta.minZoom, minZoom) && adapter?.fetchMapFeatures != null;
   return useQuery({
     queryKey: ["provider-map-features", providerId, bboxKey(bbox), zoom],
     queryFn: async ({ signal }) => {
@@ -194,7 +196,8 @@ var StreetLevelImageryViewCone = ({
   zoom,
   viewerPov,
   color = SELECTION_COLOR,
-  scale = 2.5
+  scale = 2.5,
+  beforeId
 }) => {
   const apex = viewerPov?.lngLat ?? selectedPhoto.lngLat;
   const isPano = selectedPhoto.isPano === true;
@@ -207,6 +210,9 @@ var StreetLevelImageryViewCone = ({
   } else if (selectedPhoto.providerId === "panoramax") {
     bearing = viewerPov?.bearing ?? selectedPhoto.heading;
     fov = 30;
+  } else if (selectedPhoto.providerId === "mapillary") {
+    bearing = viewerPov?.bearing ?? selectedPhoto.heading;
+    fov = viewerPov?.hfov ?? 30;
   } else {
     bearing = selectedPhoto.heading;
     fov = 30;
@@ -224,6 +230,7 @@ var StreetLevelImageryViewCone = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: CONE_FILL_LAYER_ID,
         type: "fill",
         source: CONE_SOURCE_ID,
@@ -271,6 +278,7 @@ var AGE_SHADE = [
     BASE_COLOR
   ]
 ];
+var PHOTO_TARGET_RADIUS_PX = 10;
 var PHOTO_SORT_KEY = ["coalesce", ["get", "capturedAt"], 0];
 var FEATURE_SORT_KEY = ["coalesce", ["get", "lastSeenAt"], 0];
 var PhotoProviderLayer = ({
@@ -283,15 +291,20 @@ var PhotoProviderLayer = ({
   photoCircleColor,
   activeSequenceId,
   hasActiveSequence,
-  shownPhotoId
+  shownPhotoId,
+  beforeId,
+  minZoom
 }) => {
   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 >= meta.minZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
+  const photosMinZoom = Math.max(meta.minZoom, minZoom);
+  const fetchedLinesMinZoom = fetchedSequencesMinZoom(providerId);
+  const sequencesMinZoom = Math.max(fetchedLinesMinZoom, minZoom);
+  const { data: photos = [] } = useProviderPhotos(providerId, bbox, zoom, { minZoom });
+  const { data: sequences = [] } = useProviderSequences(providerId, bbox, zoom, { minZoom });
+  const visiblePhotos = zoom >= photosMinZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
   const drawBbox = bbox ? padBbox(bbox, 0.25) : null;
-  const photoCollection = zoom >= meta.minZoom ? photosToFeatureCollection(
+  const photoCollection = zoom >= photosMinZoom ? photosToFeatureCollection(
     drawBbox ? visiblePhotos.filter((photo) => lngLatInBbox(photo.lngLat, drawBbox)) : visiblePhotos
   ) : emptyPointCollection();
   const viewfieldsActive = showViewfields && zoom >= VIEWFIELD_MIN_ZOOM;
@@ -342,7 +355,7 @@ var PhotoProviderLayer = ({
       sequenceCapturedAtById.set(photo.sequenceId, photo.capturedAt);
     }
   }
-  const filteredSequences = showSequences && zoom >= meta.sequencesMinZoom ? sequences.map((sequence) => {
+  const filteredSequences = showSequences && zoom >= sequencesMinZoom ? sequences.map((sequence) => {
     if (sequence.capturedAt != null) return sequence;
     const fromPhotos = sequenceCapturedAtById.get(sequence.sequenceId);
     return fromPhotos != null ? { ...sequence, capturedAt: fromPhotos } : sequence;
@@ -385,6 +398,8 @@ var PhotoProviderLayer = ({
       }
     };
   });
+  const sequenceTiles = showSequences ? adapter?.sequenceTiles?.() : null;
+  const sequenceTilesMinZoom = sequenceTiles ? Math.max(sequenceTiles.minZoom, minZoom) : 0;
   const sequenceCollection = alignedSequences.length > 0 ? sequencesToFeatureCollection(alignedSequences) : emptyLineCollection();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     meta.coverageTiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -401,6 +416,7 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: `coverage-tiles-${providerId}`,
           minzoom: meta.coverageTiles.minZoom,
           paint: { "raster-opacity": 0.7 },
@@ -409,6 +425,48 @@ var PhotoProviderLayer = ({
         }
       )
     ] }) : null,
+    sequenceTiles && sequenceTilesMinZoom < fetchedLinesMinZoom ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Source,
+        {
+          id: sequenceTilesSourceId(providerId),
+          type: "vector",
+          tiles: sequenceTiles.tiles,
+          minzoom: sequenceTiles.minZoom,
+          maxzoom: sequenceTiles.maxZoom
+        },
+        sequenceTilesSourceId(providerId)
+      ),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          beforeId,
+          id: sequenceTilesLayerId(providerId),
+          type: "line",
+          source: sequenceTilesSourceId(providerId),
+          "source-layer": sequenceTiles.sourceLayer,
+          minzoom: sequenceTilesMinZoom,
+          maxzoom: fetchedLinesMinZoom,
+          filter: renameExpressionProperties(photoFilter, sequenceTiles.properties),
+          layout: {
+            "line-cap": "round",
+            "line-join": "round",
+            "line-sort-key": renameExpressionProperties(
+              ["case", inActiveSequence, 1, 0],
+              sequenceTiles.properties
+            )
+          },
+          paint: {
+            "line-color": renameExpressionProperties(photoCircleColor, sequenceTiles.properties),
+            "line-width": renameExpressionProperties(
+              ["case", inActiveSequence, ACTIVE_LINE_WIDTH, 1.25],
+              sequenceTiles.properties
+            ),
+            "line-opacity": renameExpressionProperties(lineOpacity, sequenceTiles.properties)
+          }
+        }
+      )
+    ] }) : null,
     adapter?.fetchSequences && showSequences ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Source,
@@ -422,6 +480,7 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: sequenceLayerId(providerId),
           type: "line",
           source: sequenceSourceId(providerId),
@@ -451,6 +510,7 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: viewfieldLayerId(providerId),
           type: "fill",
           source: viewfieldSrcId,
@@ -465,6 +525,7 @@ var PhotoProviderLayer = ({
       /* @__PURE__ */ jsx(
         Layer,
         {
+          beforeId,
           id: viewfieldLineLayerId(providerId),
           type: "line",
           source: viewfieldSrcId,
@@ -490,6 +551,19 @@ var PhotoProviderLayer = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
+        id: photoTargetLayerId(providerId),
+        type: "circle",
+        source: photoSrcId,
+        filter: photoFilter,
+        layout: { "circle-sort-key": PHOTO_SORT_KEY },
+        paint: { "circle-radius": PHOTO_TARGET_RADIUS_PX, "circle-opacity": 0 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        beforeId,
         id: photoLayerId(providerId),
         type: "circle",
         source: photoSrcId,
@@ -508,12 +582,14 @@ var MapFeatureProviderLayer = ({
   bbox,
   zoom,
   filter,
-  mapFeatureCircleColor
+  mapFeatureCircleColor,
+  beforeId,
+  minZoom
 }) => {
   const meta = providerById[providerId];
-  const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom);
+  const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom, { minZoom });
   const valueFilter = filter?.mapFeatureValue;
-  const featureCollection = zoom >= meta.minZoom ? mapFeaturesToFeatureCollection(
+  const featureCollection = zoom >= Math.max(meta.minZoom, minZoom) ? mapFeaturesToFeatureCollection(
     valueFilter ? features.filter((feature) => valueFilter(feature.value)) : features
   ) : emptyPointCollection();
   const featureFilter = buildMapFeatureLayerFilter(filter?.date);
@@ -532,6 +608,7 @@ var MapFeatureProviderLayer = ({
     /* @__PURE__ */ jsx(
       Layer,
       {
+        beforeId,
         id: featureLayerId(providerId),
         type: "circle",
         source: featureSrcId,
@@ -567,7 +644,9 @@ var StreetLevelImagerySourcesAndLayers = ({
     viewConeColor,
     viewConeScale,
     photoCircleColor,
-    mapFeatureCircleColor
+    mapFeatureCircleColor,
+    beforeId,
+    minZoom = 0
   } = options;
   useEffect(
     function applyStreetImageryConfig() {
@@ -594,6 +673,8 @@ var StreetLevelImagerySourcesAndLayers = ({
     providers.map((providerId) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
       ProviderLayer,
       {
+        beforeId,
+        minZoom,
         bbox,
         filter,
         mapFeatureCircleColor,
@@ -610,6 +691,7 @@ var StreetLevelImagerySourcesAndLayers = ({
     showViewCone && selectedPhoto ? /* @__PURE__ */ jsx(
       StreetLevelImageryViewCone,
       {
+        beforeId,
         color: viewConeColor ?? SELECTION_COLOR,
         scale: viewConeScale,
         selectedPhoto,
@@ -620,6 +702,7 @@ var StreetLevelImagerySourcesAndLayers = ({
     showSelectionHighlight ? /* @__PURE__ */ jsx(
       StreetLevelImagerySelectionOverlay,
       {
+        beforeId,
         cameraLngLat: viewerPov?.lngLat,
         selectedPhoto,
         selectedSequence: providerDrawsSequences ? null : selectedSequence,
@@ -628,13 +711,13 @@ var StreetLevelImagerySourcesAndLayers = ({
     ) : null
   ] });
 };
-var MapillaryPanel2 = lazy(
-  () => import('./MapillaryPanel-N45NQY4C.js').then((module) => ({
+var MapillaryPanel = lazy(
+  () => import('./MapillaryPanel-FAXVZH37.js').then((module) => ({
     default: module.MapillaryPanel
   }))
 );
-var PanoramaxPanel2 = lazy(
-  () => import('./PanoramaxPanel-MFI4L67Z.js').then((module) => ({
+var PanoramaxPanel = lazy(
+  () => import('./PanoramaxPanel-BTHEMKYY.js').then((module) => ({
     default: module.PanoramaxPanel
   }))
 );
@@ -655,7 +738,7 @@ var StreetLevelImageryViewer = ({
 }) => {
   if (photo.providerId === "mapillary") {
     return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
-      MapillaryPanel2,
+      MapillaryPanel,
       {
         groupPhotos,
         hideAttribution,
@@ -671,7 +754,7 @@ var StreetLevelImageryViewer = ({
   }
   if (photo.providerId === "panoramax") {
     return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
-      PanoramaxPanel2,
+      PanoramaxPanel,
       {
         groupPhotos,
         hideLegend: hideAttribution,
@@ -686,6 +769,7 @@ var StreetLevelImageryViewer = ({
 };
 var streetImageryInteractiveLayerIds = (providers) => [
   ...providers.map((providerId) => photoLayerId(providerId)),
+  ...providers.map((providerId) => photoTargetLayerId(providerId)),
   ...providers.map((providerId) => viewfieldLayerId(providerId)),
   ...providers.map((providerId) => featureLayerId(providerId))
 ];
@@ -694,6 +778,10 @@ var parseProviderIdFromLayerId = (layerId) => {
   if (photoMatch) {
     return photoMatch[1];
   }
+  const targetMatch = layerId.match(/^photo-targets-(.+)$/);
+  if (targetMatch) {
+    return targetMatch[1];
+  }
   const viewfieldMatch = layerId.match(/^viewfields-(.+)$/);
   if (viewfieldMatch) {
     return viewfieldMatch[1];
@@ -718,7 +806,7 @@ var queryStreetImageryFeatures = (event) => {
       continue;
     }
     const props = feature.properties ?? {};
-    if (layerId.startsWith("photos-") || layerId.startsWith("viewfields-")) {
+    if (layerId.startsWith("photos-") || layerId.startsWith("photo-targets-") || layerId.startsWith("viewfields-")) {
       const photoId = props.photoId;
       if (photoId == null) {
         continue;
@@ -880,6 +968,13 @@ var viewSuggestionLabel = ({ viewpoint, direction }, messages) => messages.viewD
 var DEFAULT_LAYOUT = { right: 16, bottom: 32, width: 420, minimized: false };
 var MIN_WIDTH = 280;
 var EDGE = 8;
+var hasStoredLayout = (storageKey) => {
+  try {
+    return localStorage.getItem(storageKey) != null;
+  } catch {
+    return false;
+  }
+};
 var readLayout = (storageKey) => {
   try {
     const raw = localStorage.getItem(storageKey);
@@ -1024,8 +1119,8 @@ var FloatingPhotoViewer = ({
   activeDirectionKey,
   onSelectSuggestion,
   shownPhotoId,
-  canGoBack,
-  canGoForward,
+  canGoBack = false,
+  canGoForward = false,
   onBack,
   onForward,
   onClose,
@@ -1035,12 +1130,16 @@ var FloatingPhotoViewer = ({
   children,
   footer,
   drawer,
-  storageKey = "street-imagery:floating-viewer"
+  storageKey = "street-imagery:floating-viewer",
+  defaultPosition
 }) => {
   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 [moved, setMoved] = useState(() => hasStoredLayout(storageKey));
+  const atTopLeft = defaultPosition?.corner === "top-left" && !moved;
+  const position = atTopLeft ? { left: defaultPosition.left ?? EDGE, top: defaultPosition.top ?? EDGE } : { right: layout.right, bottom: layout.bottom };
   const dragRef = useRef(null);
   const updateLayout = (next) => {
     setLayout(next);
@@ -1054,9 +1153,9 @@ var FloatingPhotoViewer = ({
     if (event.key === "Escape") {
       onClose();
     } else if (event.key === "[" && canGoBack) {
-      onBack();
+      onBack?.();
     } else if (event.key === "]" && canGoForward) {
-      onForward();
+      onForward?.();
     } else if (event.key === "ArrowLeft" && event.altKey) {
       step?.onPrevious?.();
     } else if (event.key === "ArrowRight" && event.altKey) {
@@ -1072,7 +1171,16 @@ var FloatingPhotoViewer = ({
       return;
     }
     event.currentTarget.setPointerCapture(event.pointerId);
-    dragRef.current = { x: event.clientX, y: event.clientY, layout, mode };
+    const box = event.currentTarget.closest("section");
+    const container = box?.offsetParent;
+    const start = atTopLeft && box && container ? {
+      ...layout,
+      right: container.clientWidth - box.offsetLeft - box.offsetWidth,
+      bottom: container.clientHeight - box.offsetTop - box.offsetHeight
+    } : layout;
+    setLayout(start);
+    setMoved(true);
+    dragRef.current = { x: event.clientX, y: event.clientY, layout: start, mode };
   };
   const onDrag = (event) => {
     const drag = dragRef.current;
@@ -1102,7 +1210,7 @@ var FloatingPhotoViewer = ({
       {
         className: "absolute z-10 inline-flex items-center gap-2 rounded-full bg-white px-3 py-1.5 text-sm font-medium text-slate-800 shadow-lg ring-1 ring-slate-200 hover:bg-slate-50",
         onClick: () => updateLayout({ ...layout, minimized: false }),
-        style: { right: layout.right, bottom: layout.bottom },
+        style: position,
         type: "button",
         children: [
           /* @__PURE__ */ jsx(Icon, { path: ICONS.expand }),
@@ -1117,8 +1225,7 @@ var FloatingPhotoViewer = ({
       "aria-label": messages.viewer.regionLabel,
       className: "absolute z-10 flex max-h-[calc(100%-1rem)] flex-col overflow-hidden rounded-xl bg-white shadow-xl ring-1 ring-slate-200",
       style: {
-        right: layout.right,
-        bottom: layout.bottom,
+        ...position,
         width: `min(${layout.width}px, calc(100% - 1rem))`
       },
       children: [
@@ -1162,16 +1269,26 @@ var FloatingPhotoViewer = ({
                 /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate px-1 text-sm font-semibold text-slate-800", children: title }),
                 titleActions
               ] }),
-              /* @__PURE__ */ jsx(ToolbarButton, { disabled: !canGoBack, label: messages.viewer.backInHistory, onClick: onBack, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.undo }) }),
-              /* @__PURE__ */ jsx(
-                ToolbarButton,
-                {
-                  disabled: !canGoForward,
-                  label: messages.viewer.forwardInHistory,
-                  onClick: onForward,
-                  children: /* @__PURE__ */ jsx(Icon, { path: ICONS.redo })
-                }
-              ),
+              onBack && onForward ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    disabled: !canGoBack,
+                    label: messages.viewer.backInHistory,
+                    onClick: onBack,
+                    children: /* @__PURE__ */ jsx(Icon, { path: ICONS.undo })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ToolbarButton,
+                  {
+                    disabled: !canGoForward,
+                    label: messages.viewer.forwardInHistory,
+                    onClick: onForward,
+                    children: /* @__PURE__ */ jsx(Icon, { path: ICONS.redo })
+                  }
+                )
+              ] }) : null,
               /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
@@ -1725,7 +1842,8 @@ var PhotoDateRangeFilter = ({
   maxYears,
   now: nowProp,
   dateInputs = "collapsed",
-  className
+  className,
+  allDatesAction = true
 }) => {
   const { locale, messages } = useStreetImageryI18n();
   const text = messages.dateFilter;
@@ -1799,7 +1917,7 @@ var PhotoDateRangeFilter = ({
               {
                 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)
+                  height: count === 0 ? 0 : Math.max(2, Math.log1p(count) / Math.log1p(maxCount) * CHART_HEIGHT_PX)
                 },
                 title: count > 0 ? text.photoCount(count) : void 0
               },
@@ -1905,7 +2023,7 @@ var PhotoDateRangeFilter = ({
     )) }),
     /* @__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(
+      isAllDates || !allDatesAction ? null : /* @__PURE__ */ jsx(
         "button",
         {
           className: "shrink-0 font-medium text-slate-600 underline decoration-slate-300 underline-offset-2 hover:text-slate-900",

package/dist/panels/PanoramaxPanel.d.ts

@@ -9,8 +9,9 @@ type PanoramaxPanelProps = {
     /** The shown picture with creator, licence, local capture time and camera. */
     onViewerPhoto?: (photo: NormalizedPhoto) => void;
     /**
-     * Hide the viewer's own legend (a bottom drawer in narrow containers). The host must then show
-     * creator and licence itself, from `onViewerPhoto`.
+     * Leave out the viewer's own widgets: the legend (a bottom drawer in narrow containers), the
+     * player and the zoom buttons. The host must then show creator and licence itself, from
+     * `onViewerPhoto`. Stepping through a sequence still works with the arrows in the photo.
      */
     hideLegend?: boolean;
 };

package/dist/photo-details.js

@@ -1,4 +1,4 @@
-import { useStreetImageryI18n } from './chunk-ZAIXGYAH.js';
+import { useStreetImageryI18n } from './chunk-6EMFFIL2.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/streetImageryClick.d.ts

@@ -7,6 +7,10 @@ export type StreetImageryClickFeature = {
     featureId?: string;
     sequenceId?: string;
 };
+/**
+ * Layers to pass as `interactiveLayerIds`. A click returns the features of all layers it hits, the
+ * top one first: the photo dot itself, then view shapes, then the larger invisible targets.
+ */
 export declare const streetImageryInteractiveLayerIds: (providers: ProviderId[]) => string[];
 export declare const queryStreetImageryFeatures: (event: {
     features?: MapGeoJSONFeature[] | null;

package/dist/viewer-panels/index.d.ts

@@ -0,0 +1,3 @@
+export { MapillaryPanel } from '../panels/MapillaryPanel';
+export { PanoramaxPanel } from '../panels/PanoramaxPanel';
+export { mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo, } from '../panels/mapillaryLookAt';

package/dist/viewer-panels.js

@@ -0,0 +1,3 @@
+export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-SGIB7AVC.js';
+export { PanoramaxPanel } from './chunk-KZTMKQT5.js';
+import './chunk-25UGGXIE.js';

package/dist/viewpoints/FloatingPhotoViewer.d.ts

@@ -19,10 +19,14 @@ export type FloatingPhotoViewerProps = {
     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;
-    onForward: () => void;
+    /**
+     * History of shown photos: the back and forward buttons and the keys [ and ]. Leave out
+     * `onBack` and `onForward` for a host without a history; the buttons are then not shown.
+     */
+    canGoBack?: boolean;
+    canGoForward?: boolean;
+    onBack?: () => void;
+    onForward?: () => void;
     onClose: () => void;
     /**
      * Step to the neighbouring photo, e.g. along the clicked street: the `<` `>` buttons at the
@@ -51,10 +55,19 @@ export type FloatingPhotoViewerProps = {
     };
     /** localStorage key for position, width and minimized state. */
     storageKey?: string;
+    /**
+     * Where the box is until the user moves it: the bottom right corner (default), or the top left
+     * one with `left` and `top` in px from the container's edges, e.g. next to a side panel.
+     */
+    defaultPosition?: {
+        corner: 'top-left';
+        left?: number;
+        top?: number;
+    };
 };
 /**
  * Photo viewer box floating over the map. Render inside a positioned (relative) map container.
  * 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, shownPhotoId, 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, defaultPosition, }: FloatingPhotoViewerProps) => import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osm-editor-kit/street-imagery-react",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "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",
@@ -24,6 +24,10 @@
       "types": "./dist/photo-details/index.d.ts",
       "import": "./dist/photo-details.js"
     },
+    "./viewer-panels": {
+      "types": "./dist/viewer-panels/index.d.ts",
+      "import": "./dist/viewer-panels.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -56,7 +60,7 @@
     "zustand": "^5.0.7"
   },
   "peerDependencies": {
-    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.7",
+    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.8",
     "@panoramax/web-viewer": "^5",
     "@tanstack/react-query": "^5",
     "mapillary-js": "^4",
@@ -75,6 +79,10 @@
       "types": "./dist/photo-details/index.d.ts",
       "import": "./dist/photo-details.js"
     },
+    "./viewer-panels": {
+      "types": "./dist/viewer-panels/index.d.ts",
+      "import": "./dist/viewer-panels.js"
+    },
     "./package.json": "./package.json"
   }
 }

package/dist/MapillaryPanel-N45NQY4C.js

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

package/dist/PanoramaxPanel-MFI4L67Z.js

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