@osm-editor-kit/street-imagery-react 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,47 @@
+# `@osm-editor-kit/street-imagery-react`
+
+**Status:** First npm **alpha** (`0.1.0-alpha.0`). Publish with `bun run packages:release -- --publish-only` after `npm login`.
+
+## What it does
+
+React MapLibre bindings for street-level imagery: map sources/layers, photo click handling, TanStack Query provider hooks, and lazy Mapillary/Panoramax viewer panels. Data adapters and GeoJSON helpers live in `@osm-editor-kit/street-imagery`.
+
+## Usage
+
+```tsx
+import {
+  StreetLevelImagerySourcesAndLayers,
+  StreetLevelImageryViewer,
+  useMapViewportBbox,
+  queryStreetImageryFeatures,
+  streetImageryInteractiveLayerIds,
+} from '@osm-editor-kit/street-imagery-react'
+import { createStreetImageryConfig } from '@osm-editor-kit/street-imagery'
+
+const bbox = useMapViewportBbox('main', map)
+
+<StreetLevelImagerySourcesAndLayers
+  providers={['mapillary', 'panoramax']}
+  bbox={bbox}
+  zoom={map.zoom}
+  filter={{ photoTypes: ['flat', 'pano'] }}
+  options={{
+    config: createStreetImageryConfig({ mapillaryToken: '…' }),
+    showSequences: true,
+    showViewfields: true,
+    selectedPhoto,
+    photoCircleColor: '#3b82f6',
+    mapFeatureCircleColor: '#94a3b8',
+  }}
+/>
+
+// interactiveLayerIds={streetImageryInteractiveLayerIds(providers)}
+const hits = queryStreetImageryFeatures(event)
+
+<StreetLevelImageryViewer photo={selectedPhoto} groupPhotos={sequencePhotos}
+  onPhotoSelected={setSelection} onEaseMapToPoint={(lng, lat) => map.easeTo({ center: [lng, lat] })} />
+```
+
+**Mapillary:** `createStreetImageryConfig({ mapillaryToken })` or `setStreetImageryConfig` at boot (`@osm-editor-kit/street-imagery`). **Panoramax + Vite:** see `app/vite.config.ts` for the consuming-app setup.
+
+Also: `useAllProviderPhotos`, `useProviderPhotos` / `useProviderSequences` / `useProviderMapFeatures`, `usePhotoThumbnails`, `resolveSelectedSequence`, `StreetLevelImageryViewCone`, `useViewerBearing` / `useViewerActions`, `MapillaryPanel`, `PanoramaxPanel`.

package/dist/MapillaryPanel-QX6NESX7.js

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

package/dist/PanoramaxPanel-J6ANR6LB.js

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

package/dist/StreetLevelImagerySelectionOverlay.d.ts

@@ -0,0 +1,9 @@
+import type { Bbox, NormalizedPhoto, NormalizedSequence } from '@osm-editor-kit/street-imagery';
+export type StreetLevelImagerySelectionOverlayProps = {
+    selectedPhoto?: NormalizedPhoto | null;
+    selectedSequence?: NormalizedSequence | null;
+};
+export declare const StreetLevelImagerySelectionOverlay: ({ selectedPhoto, selectedSequence, }: 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

@@ -0,0 +1,33 @@
+import { type StreetImageryConfig } from '@osm-editor-kit/street-imagery';
+import { type DateRange, type PhotoTypeFilter } from '@osm-editor-kit/street-imagery';
+import type { Bbox, NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import { type ProviderId } from '@osm-editor-kit/street-imagery';
+import type { DataDrivenPropertyValueSpecification } from 'maplibre-gl';
+export type PhotoFilter = {
+    photoTypes?: PhotoTypeFilter[];
+    date?: DateRange;
+};
+export type StreetLevelImagerySourcesAndLayersProps = {
+    providers: ProviderId[];
+    filter?: PhotoFilter;
+    bbox: Bbox | null;
+    zoom: number;
+    options: {
+        config?: StreetImageryConfig;
+        showSequences?: boolean;
+        /** Always-on heading wedges / 360° disks for every photo. Default true. */
+        showViewfields?: boolean;
+        showViewCone?: boolean;
+        showSelectionHighlight?: boolean;
+        selectedPhoto?: NormalizedPhoto | null;
+        selectedSequenceId?: string | null;
+        viewerPov?: {
+            bearing?: number | null;
+            hfov?: number | null;
+            lngLat?: [number, number] | null;
+        } | null;
+        photoCircleColor: DataDrivenPropertyValueSpecification<string>;
+        mapFeatureCircleColor: DataDrivenPropertyValueSpecification<string>;
+    };
+};
+export declare const StreetLevelImagerySourcesAndLayers: ({ providers, filter, bbox, zoom, options, }: StreetLevelImagerySourcesAndLayersProps) => import("react").JSX.Element;

package/dist/StreetLevelImageryViewCone.d.ts

@@ -0,0 +1,11 @@
+import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+export type StreetLevelImageryViewConeProps = {
+    selectedPhoto: NormalizedPhoto;
+    zoom: number;
+    viewerPov?: {
+        bearing?: number | null;
+        hfov?: number | null;
+        lngLat?: [number, number] | null;
+    } | null;
+};
+export declare const StreetLevelImageryViewCone: ({ selectedPhoto, zoom, viewerPov, }: StreetLevelImageryViewConeProps) => import("react").JSX.Element | null;

package/dist/StreetLevelImageryViewer.d.ts

@@ -0,0 +1,10 @@
+import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { StreetImageryPhotoSelection } from './types';
+type StreetLevelImageryViewerProps = {
+    photo: NormalizedPhoto;
+    groupPhotos: NormalizedPhoto[];
+    onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
+    onEaseMapToPoint: (lng: number, lat: number) => void;
+};
+export declare const StreetLevelImageryViewer: ({ photo, groupPhotos, onPhotoSelected, onEaseMapToPoint, }: StreetLevelImageryViewerProps) => import("react").JSX.Element | null;
+export {};

package/dist/chunk-25UGGXIE.js

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+// src/useViewerStore.ts
+var initialState = {
+  bearing: null,
+  hfov: null,
+  lngLat: null
+};
+var useViewerStore = create()((set) => ({
+  ...initialState,
+  actions: {
+    setPov: (partial) => set((state) => ({
+      bearing: partial.bearing !== void 0 ? partial.bearing : state.bearing,
+      hfov: partial.hfov !== void 0 ? partial.hfov : state.hfov,
+      lngLat: partial.lngLat !== void 0 ? partial.lngLat : state.lngLat
+    })),
+    reset: () => set(initialState)
+  }
+}));
+var useViewerBearing = () => useViewerStore((state) => state.bearing);
+var useViewerHfov = () => useViewerStore((state) => state.hfov);
+var useViewerLngLat = () => useViewerStore((state) => state.lngLat);
+var useViewerActions = () => useViewerStore((state) => state.actions);
+
+export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat };

package/dist/chunk-BS6LPDMY.js

@@ -0,0 +1,143 @@
+import { useViewerActions } from './chunk-25UGGXIE.js';
+import { getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
+import 'mapillary-js/dist/mapillary.css';
+import { Viewer } from 'mapillary-js';
+import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var MapillaryPanel = ({
+  photo,
+  onPhotoSelected,
+  onEaseMapToPoint
+}) => {
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const navigableRef = useRef(false);
+  const pendingImageIdRef = useRef(null);
+  const lastViewerPhotoIdRef = useRef(null);
+  const bearingRafRef = useRef(null);
+  const pendingBearingRef = useRef(null);
+  const actions = useViewerActions();
+  const initialPhotoIdRef = useRef(photo.photoId);
+  useEffect(
+    function resetViewerStoreOnProviderChange() {
+      return () => {
+        actions.reset();
+      };
+    },
+    [actions, photo.providerId]
+  );
+  useEffect(
+    function mountMapillaryViewer() {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const viewer = new Viewer({
+        accessToken: getStreetImageryConfig().mapillaryToken,
+        container,
+        imageId: initialPhotoIdRef.current,
+        component: {
+          cover: false,
+          sequence: { visible: true }
+        }
+      });
+      viewerRef.current = viewer;
+      lastViewerPhotoIdRef.current = initialPhotoIdRef.current;
+      const flushPendingMove = () => {
+        const pendingId = pendingImageIdRef.current;
+        if (!pendingId) {
+          return;
+        }
+        pendingImageIdRef.current = null;
+        void viewer.moveTo(pendingId).catch(() => {
+        });
+      };
+      const onNavigable = (event) => {
+        navigableRef.current = event.navigable;
+        if (event.navigable) {
+          flushPendingMove();
+        }
+      };
+      const onImage = (event) => {
+        const { image } = event;
+        lastViewerPhotoIdRef.current = image.id;
+        onPhotoSelected({
+          provider: "mapillary",
+          sequenceId: image.sequenceId,
+          photoId: image.id
+        });
+        const position = image.lngLat ?? image.originalLngLat;
+        if (!position) {
+          return;
+        }
+        actions.setPov({ lngLat: [position.lng, position.lat] });
+        onEaseMapToPoint(position.lng, position.lat);
+      };
+      const flushBearing = () => {
+        bearingRafRef.current = null;
+        if (pendingBearingRef.current != null) {
+          actions.setPov({ bearing: pendingBearingRef.current });
+          pendingBearingRef.current = null;
+        }
+        void viewer.getFieldOfView().then((fov) => {
+          actions.setPov({ hfov: fov });
+        }).catch(() => {
+        });
+      };
+      const onBearing = (event) => {
+        pendingBearingRef.current = event.bearing;
+        if (bearingRafRef.current == null) {
+          bearingRafRef.current = requestAnimationFrame(flushBearing);
+        }
+      };
+      viewer.on("navigable", onNavigable);
+      viewer.on("image", onImage);
+      viewer.on("bearing", onBearing);
+      const resizeObserver = new ResizeObserver(() => {
+        viewer.resize();
+      });
+      resizeObserver.observe(container);
+      return () => {
+        if (bearingRafRef.current != null) {
+          cancelAnimationFrame(bearingRafRef.current);
+          bearingRafRef.current = null;
+        }
+        resizeObserver.disconnect();
+        viewer.off("navigable", onNavigable);
+        viewer.off("image", onImage);
+        viewer.off("bearing", onBearing);
+        viewer.remove();
+        viewerRef.current = null;
+      };
+    },
+    [actions, onEaseMapToPoint, onPhotoSelected]
+  );
+  useEffect(
+    function syncExternalPhotoSelection() {
+      const viewer = viewerRef.current;
+      if (!viewer || photo.photoId === lastViewerPhotoIdRef.current) {
+        return;
+      }
+      actions.reset();
+      lastViewerPhotoIdRef.current = photo.photoId;
+      if (navigableRef.current) {
+        void viewer.moveTo(photo.photoId).catch(() => {
+        });
+      } else {
+        pendingImageIdRef.current = photo.photoId;
+      }
+    },
+    [actions, photo.photoId]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
+      style: { aspectRatio: "4 / 3" }
+    }
+  );
+};
+
+export { MapillaryPanel };

package/dist/chunk-ZH3TPW4D.js

@@ -0,0 +1,165 @@
+import { useViewerActions } from './chunk-25UGGXIE.js';
+import '@panoramax/web-viewer';
+import { getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
+import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var panoramaxApiEndpoint = () => `${getStreetImageryConfig().panoramaxApiBase}/api`;
+var normalizeBearing = (degrees) => (degrees % 360 + 360) % 360;
+var PanoramaxPanel = ({
+  photo,
+  onPhotoSelected,
+  onEaseMapToPoint
+}) => {
+  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();
+  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;
+        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);
+      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);
+      };
+    },
+    [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__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
+      style: { aspectRatio: "4 / 3" },
+      children: /* @__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

@@ -0,0 +1,8 @@
+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/hooks/useAllProviderPhotos.d.ts

@@ -0,0 +1,9 @@
+import type { DateRange, PhotoTypeFilter } from '@osm-editor-kit/street-imagery';
+import type { Bbox, NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import { type ProviderId } from '@osm-editor-kit/street-imagery';
+export type AllProviderPhotosResult = {
+    photos: NormalizedPhoto[];
+    isLoading: boolean;
+    isFetching: boolean;
+};
+export declare const useAllProviderPhotos: (providerIds: ProviderId[], bbox: Bbox | null, zoom: number, photoTypes?: PhotoTypeFilter[], date?: DateRange) => AllProviderPhotosResult;

package/dist/hooks/useMapViewportBbox.d.ts

@@ -0,0 +1,9 @@
+import type { Bbox } from '@osm-editor-kit/street-imagery';
+/**
+ * Live WGS84 bbox from a react-map-gl map instance.
+ * @param mapId - react-map-gl `<Map id=…>`
+ * @param viewportTrigger - optional value that changes when the camera moves
+ *   (e.g. URL map param) so the bbox recomputes after pan/zoom without relying
+ *   on MapLibre events.
+ */
+export declare const useMapViewportBbox: (mapId: string, viewportTrigger?: unknown) => Bbox | null;

package/dist/hooks/usePhotoThumbnails.d.ts

@@ -0,0 +1,3 @@
+import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+export declare const usePhotoFullUrl: (photo: NormalizedPhoto | null) => import("@tanstack/react-query").UseQueryResult<string | null, Error>;
+export declare const usePhotoThumbnail: (photo: NormalizedPhoto | null) => import("@tanstack/react-query").UseQueryResult<string | null, Error>;

package/dist/hooks/useProviderData.d.ts

@@ -0,0 +1,5 @@
+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>;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { StreetLevelImagerySelectionOverlay, resolveSelectedSequence, } from './StreetLevelImagerySelectionOverlay';
+export { StreetLevelImagerySourcesAndLayers, type PhotoFilter, } from './StreetLevelImagerySourcesAndLayers';
+export { StreetLevelImageryViewCone } from './StreetLevelImageryViewCone';
+export { StreetLevelImageryViewer } from './StreetLevelImageryViewer';
+export type { StreetImageryPhotoSelection } from './types';
+export { queryStreetImageryFeatures, streetImageryInteractiveLayerIds, type StreetImageryClickFeature, } from './streetImageryClick';
+export * from './hooks/useAllProviderMapFeatures';
+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';

package/dist/index.js

@@ -0,0 +1,659 @@
+export { MapillaryPanel } from './chunk-BS6LPDMY.js';
+export { PanoramaxPanel } from './chunk-ZH3TPW4D.js';
+export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat } from './chunk-25UGGXIE.js';
+import { photosToFeatureCollection, emptyPointCollection, sequencesToFeatureCollection, emptyLineCollection, adapterById, viewConeGeoJson, coneRadiusMeters, setStreetImageryConfig, photoLayerId, viewfieldLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoMatchesFilters, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, mapFeaturesToFeatureCollection, buildMapFeatureLayerFilter, featureSourceId, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId } 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 } from 'react';
+import { useQuery } from '@tanstack/react-query';
+
+var HIGHLIGHT_SOURCE_ID = "selection-highlight";
+var HIGHLIGHT_LAYER_ID = "selection-highlight-layer";
+var SEQUENCE_HIGHLIGHT_SOURCE_ID = "sequence-highlight";
+var SEQUENCE_HIGHLIGHT_LAYER_ID = "sequence-highlight-layer";
+var StreetLevelImagerySelectionOverlay = ({
+  selectedPhoto,
+  selectedSequence
+}) => {
+  const highlightCollection = selectedPhoto ? photosToFeatureCollection([selectedPhoto]) : emptyPointCollection();
+  const sequenceHighlightCollection = selectedSequence ? sequencesToFeatureCollection([selectedSequence]) : emptyLineCollection();
+  if (!selectedPhoto && sequenceHighlightCollection.features.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectedPhoto ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Source, { id: HIGHLIGHT_SOURCE_ID, type: "geojson", data: highlightCollection }),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          id: HIGHLIGHT_LAYER_ID,
+          type: "circle",
+          source: HIGHLIGHT_SOURCE_ID,
+          paint: {
+            "circle-radius": 10,
+            "circle-color": "#ffffff",
+            "circle-stroke-width": 3,
+            "circle-stroke-color": "#0f172a"
+          }
+        }
+      )
+    ] }) : null,
+    sequenceHighlightCollection.features.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Source,
+        {
+          id: SEQUENCE_HIGHLIGHT_SOURCE_ID,
+          type: "geojson",
+          data: sequenceHighlightCollection
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          id: SEQUENCE_HIGHLIGHT_LAYER_ID,
+          type: "line",
+          source: SEQUENCE_HIGHLIGHT_SOURCE_ID,
+          paint: {
+            "line-color": "#0f172a",
+            "line-width": 4,
+            "line-opacity": 0.75
+          }
+        }
+      )
+    ] }) : null
+  ] });
+};
+var resolveSelectedSequence = (selectedPhoto, sequences, sequenceId) => {
+  if (!selectedPhoto || !sequenceId) {
+    return null;
+  }
+  return sequences.find(
+    (sequence) => sequence.providerId === selectedPhoto.providerId && sequence.sequenceId === sequenceId
+  ) ?? null;
+};
+var bboxKey = (bbox) => bbox ? `${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}` : "none";
+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) => {
+  const adapter = adapterById[providerId];
+  const enabled = adapter.kind === "photo" && bbox != null && zoom >= adapter.minZoom && adapter.fetchPhotos != null;
+  return useQuery({
+    queryKey: ["provider-photos", providerId, bboxKey(bbox), zoom],
+    queryFn: async ({ signal }) => {
+      const photos = await adapter.fetchPhotos(bbox, zoom, signal);
+      return photos.filter(withinBbox(bbox));
+    },
+    enabled,
+    placeholderData: (previous) => previous
+  });
+};
+var useProviderSequences = (providerId, bbox, zoom) => {
+  const adapter = adapterById[providerId];
+  const sequencesMinZoom = adapter.sequencesMinZoom ?? adapter.minZoom;
+  const enabled = adapter.kind === "photo" && bbox != null && zoom >= sequencesMinZoom && adapter.fetchSequences != null;
+  return useQuery({
+    queryKey: ["provider-sequences", providerId, bboxKey(bbox), zoom],
+    queryFn: ({ signal }) => adapter.fetchSequences?.(bbox, zoom, signal) ?? [],
+    enabled,
+    placeholderData: (previous) => previous
+  });
+};
+var useProviderMapFeatures = (providerId, bbox, zoom) => {
+  const adapter = adapterById[providerId];
+  const enabled = adapter.kind === "mapFeature" && bbox != null && zoom >= adapter.minZoom && adapter.fetchMapFeatures != null;
+  return useQuery({
+    queryKey: ["provider-map-features", providerId, bboxKey(bbox), zoom],
+    queryFn: async ({ signal }) => {
+      const features = await adapter.fetchMapFeatures(bbox, zoom, signal);
+      return features.filter(withinBbox(bbox));
+    },
+    enabled,
+    placeholderData: (previous) => previous
+  });
+};
+var CONE_SOURCE_ID = "view-direction-cone";
+var CONE_FILL_LAYER_ID = "view-direction-cone-fill";
+var CONE_LINE_LAYER_ID = "view-direction-cone-line";
+var INTERACTIVE_PANO_PROVIDERS = /* @__PURE__ */ new Set([
+  "mapillary",
+  "panoramax",
+  "streetside",
+  "kartaview",
+  "mapilio",
+  "vegbilder"
+]);
+var StreetLevelImageryViewCone = ({
+  selectedPhoto,
+  zoom,
+  viewerPov
+}) => {
+  const apex = viewerPov?.lngLat ?? selectedPhoto.lngLat;
+  const isPano = selectedPhoto.isPano === true;
+  const hasLiveBearing = isPano && INTERACTIVE_PANO_PROVIDERS.has(selectedPhoto.providerId);
+  let bearing = null;
+  let fov = 30;
+  if (isPano) {
+    bearing = hasLiveBearing ? viewerPov?.bearing ?? selectedPhoto.heading : selectedPhoto.heading;
+    fov = hasLiveBearing ? viewerPov?.hfov ?? 60 : 60;
+  } else if (selectedPhoto.providerId === "panoramax") {
+    bearing = viewerPov?.bearing ?? selectedPhoto.heading;
+    fov = 30;
+  } else {
+    bearing = selectedPhoto.heading;
+    fov = 30;
+  }
+  if (bearing == null) {
+    return null;
+  }
+  const coneFeature = viewConeGeoJson(apex, bearing, fov, coneRadiusMeters(zoom));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Source, { id: CONE_SOURCE_ID, type: "geojson", data: coneFeature }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: CONE_FILL_LAYER_ID,
+        type: "fill",
+        source: CONE_SOURCE_ID,
+        paint: {
+          "fill-color": "#0f172a",
+          "fill-opacity": 0.15
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: CONE_LINE_LAYER_ID,
+        type: "line",
+        source: CONE_SOURCE_ID,
+        paint: {
+          "line-color": "#0f172a",
+          "line-width": 1.5,
+          "line-opacity": 0.5
+        }
+      }
+    )
+  ] });
+};
+var CIRCLE_RADIUS = [
+  "interpolate",
+  ["linear"],
+  ["zoom"],
+  10,
+  2,
+  14,
+  4,
+  18,
+  6
+];
+var FEATURE_CIRCLE_RADIUS = [
+  "interpolate",
+  ["linear"],
+  ["zoom"],
+  10,
+  1.5,
+  14,
+  3,
+  18,
+  4
+];
+var PHOTO_SORT_KEY = ["coalesce", ["get", "capturedAt"], 0];
+var FEATURE_SORT_KEY = ["coalesce", ["get", "lastSeenAt"], 0];
+var PhotoProviderLayer = ({
+  providerId,
+  bbox,
+  zoom,
+  filter,
+  showSequences,
+  showViewfields,
+  photoCircleColor
+}) => {
+  const adapter = adapterById[providerId];
+  const { data: photos = [] } = useProviderPhotos(providerId, bbox, zoom);
+  const { data: sequences = [] } = useProviderSequences(providerId, bbox, zoom);
+  const visiblePhotos = zoom >= adapter.minZoom ? photos.filter((photo) => photoMatchesFilters(photo, filter?.photoTypes, filter?.date)) : [];
+  const photoCollection = zoom >= adapter.minZoom ? photosToFeatureCollection(photos) : emptyPointCollection();
+  const viewfieldCollection = showViewfields ? photosToViewfieldsFeatureCollection(visiblePhotos, zoom) : emptyPolygonCollection();
+  const photoFilter = buildPhotoLayerFilter(filter?.photoTypes, filter?.date);
+  const photoSrcId = photoSourceId(providerId);
+  const viewfieldSrcId = viewfieldSourceId(providerId);
+  const sequenceCapturedAtById = /* @__PURE__ */ new Map();
+  for (const photo of visiblePhotos) {
+    if (photo.sequenceId == null || photo.capturedAt == null) continue;
+    const prev = sequenceCapturedAtById.get(photo.sequenceId);
+    if (prev == null || photo.capturedAt > prev) {
+      sequenceCapturedAtById.set(photo.sequenceId, photo.capturedAt);
+    }
+  }
+  const filteredSequences = showSequences && zoom >= (adapter.sequencesMinZoom ?? adapter.minZoom) ? sequences.map((sequence) => {
+    if (sequence.capturedAt != null) return sequence;
+    const fromPhotos = sequenceCapturedAtById.get(sequence.sequenceId);
+    return fromPhotos != null ? { ...sequence, capturedAt: fromPhotos } : sequence;
+  }).filter((sequence) => {
+    const asPhoto = {
+      providerId: sequence.providerId,
+      photoId: sequence.sequenceId,
+      sequenceId: sequence.sequenceId,
+      capturedAt: sequence.capturedAt,
+      isPano: sequence.isPano,
+      heading: null,
+      lngLat: [0, 0]
+    };
+    return photoMatchesFilters(asPhoto, filter?.photoTypes, filter?.date);
+  }) : [];
+  const sequenceCollection = filteredSequences.length > 0 ? sequencesToFeatureCollection(filteredSequences) : emptyLineCollection();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    adapter.fetchSequences && showSequences ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Source,
+        {
+          id: sequenceSourceId(providerId),
+          type: "geojson",
+          data: sequenceCollection
+        },
+        sequenceSourceId(providerId)
+      ),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          id: sequenceLayerId(providerId),
+          type: "line",
+          source: sequenceSourceId(providerId),
+          paint: {
+            "line-color": adapter.color,
+            "line-width": 2,
+            "line-opacity": 0.35
+          }
+        }
+      )
+    ] }) : null,
+    showViewfields ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Source,
+        {
+          id: viewfieldSrcId,
+          type: "geojson",
+          data: viewfieldCollection
+        },
+        viewfieldSrcId
+      ),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          id: viewfieldLayerId(providerId),
+          type: "fill",
+          source: viewfieldSrcId,
+          paint: {
+            "fill-color": photoCircleColor,
+            "fill-opacity": 0.22
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Layer,
+        {
+          id: viewfieldLineLayerId(providerId),
+          type: "line",
+          source: viewfieldSrcId,
+          paint: {
+            "line-color": photoCircleColor,
+            "line-width": 1,
+            "line-opacity": 0.45
+          }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      Source,
+      {
+        id: photoSrcId,
+        type: "geojson",
+        data: photoCollection,
+        promoteId: "photoId"
+      },
+      photoSrcId
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: photoLayerId(providerId),
+        type: "circle",
+        source: photoSrcId,
+        filter: photoFilter,
+        layout: { "circle-sort-key": PHOTO_SORT_KEY },
+        paint: {
+          "circle-radius": CIRCLE_RADIUS,
+          "circle-color": photoCircleColor,
+          "circle-stroke-width": 1,
+          "circle-stroke-color": "#ffffff"
+        }
+      }
+    )
+  ] });
+};
+var MapFeatureProviderLayer = ({
+  providerId,
+  bbox,
+  zoom,
+  filter,
+  mapFeatureCircleColor
+}) => {
+  const adapter = adapterById[providerId];
+  const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom);
+  const featureCollection = zoom >= adapter.minZoom ? mapFeaturesToFeatureCollection(features) : emptyPointCollection();
+  const featureFilter = buildMapFeatureLayerFilter(filter?.date);
+  const featureSrcId = featureSourceId(providerId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Source,
+      {
+        id: featureSrcId,
+        type: "geojson",
+        data: featureCollection,
+        promoteId: "featureId"
+      },
+      featureSrcId
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: featureLayerId(providerId),
+        type: "circle",
+        source: featureSrcId,
+        filter: featureFilter,
+        layout: { "circle-sort-key": FEATURE_SORT_KEY },
+        paint: {
+          "circle-radius": FEATURE_CIRCLE_RADIUS,
+          "circle-color": mapFeatureCircleColor,
+          "circle-stroke-width": 1,
+          "circle-stroke-color": "#ffffff"
+        }
+      }
+    )
+  ] });
+};
+var ProviderLayer = (props) => {
+  const adapter = adapterById[props.providerId];
+  return adapter.kind === "mapFeature" ? /* @__PURE__ */ jsx(MapFeatureProviderLayer, { ...props }) : /* @__PURE__ */ jsx(PhotoProviderLayer, { ...props });
+};
+var StreetLevelImagerySourcesAndLayers = ({
+  providers,
+  filter,
+  bbox,
+  zoom,
+  options
+}) => {
+  const {
+    config,
+    showSequences = true,
+    showViewfields = true,
+    showViewCone = false,
+    showSelectionHighlight = false,
+    selectedPhoto,
+    selectedSequenceId,
+    viewerPov,
+    photoCircleColor,
+    mapFeatureCircleColor
+  } = options;
+  useEffect(
+    function applyStreetImageryConfig() {
+      if (config) {
+        setStreetImageryConfig(config);
+      }
+    },
+    [config]
+  );
+  const selectedProviderId = selectedPhoto?.providerId ?? null;
+  const { data: sequences = [] } = useProviderSequences(
+    selectedProviderId ?? "mapillary",
+    showSelectionHighlight && selectedProviderId ? bbox : null,
+    zoom
+  );
+  const selectedSequence = resolveSelectedSequence(
+    selectedPhoto,
+    sequences,
+    selectedSequenceId ?? selectedPhoto?.sequenceId
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    providers.map((providerId) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+      ProviderLayer,
+      {
+        bbox,
+        filter,
+        mapFeatureCircleColor,
+        photoCircleColor,
+        providerId,
+        showSequences,
+        showViewfields,
+        zoom
+      }
+    ) }, providerId)),
+    showViewCone && selectedPhoto ? /* @__PURE__ */ jsx(
+      StreetLevelImageryViewCone,
+      {
+        selectedPhoto,
+        viewerPov,
+        zoom
+      }
+    ) : null,
+    showSelectionHighlight ? /* @__PURE__ */ jsx(
+      StreetLevelImagerySelectionOverlay,
+      {
+        selectedPhoto,
+        selectedSequence
+      }
+    ) : null
+  ] });
+};
+var MapillaryPanel2 = lazy(
+  () => import('./MapillaryPanel-QX6NESX7.js').then((module) => ({
+    default: module.MapillaryPanel
+  }))
+);
+var PanoramaxPanel2 = lazy(
+  () => import('./PanoramaxPanel-J6ANR6LB.js').then((module) => ({
+    default: module.PanoramaxPanel
+  }))
+);
+var ViewerPanelPlaceholder = () => /* @__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: "Loading viewer\u2026" }) });
+var StreetLevelImageryViewer = ({
+  photo,
+  groupPhotos,
+  onPhotoSelected,
+  onEaseMapToPoint
+}) => {
+  if (photo.providerId === "mapillary") {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
+      MapillaryPanel2,
+      {
+        groupPhotos,
+        onEaseMapToPoint,
+        onPhotoSelected,
+        photo
+      }
+    ) });
+  }
+  if (photo.providerId === "panoramax") {
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
+      PanoramaxPanel2,
+      {
+        groupPhotos,
+        onEaseMapToPoint,
+        onPhotoSelected,
+        photo
+      }
+    ) });
+  }
+  return null;
+};
+var streetImageryInteractiveLayerIds = (providers) => [
+  ...providers.map((providerId) => photoLayerId(providerId)),
+  ...providers.map((providerId) => viewfieldLayerId(providerId)),
+  ...providers.map((providerId) => featureLayerId(providerId))
+];
+var parseProviderIdFromLayerId = (layerId) => {
+  const photoMatch = layerId.match(/^photos-(.+)$/);
+  if (photoMatch) {
+    return photoMatch[1];
+  }
+  const viewfieldMatch = layerId.match(/^viewfields-(.+)$/);
+  if (viewfieldMatch) {
+    return viewfieldMatch[1];
+  }
+  const featureMatch = layerId.match(/^features-(.+)$/);
+  if (featureMatch) {
+    return featureMatch[1];
+  }
+  return null;
+};
+var queryStreetImageryFeatures = (event) => {
+  const features = event.features ?? [];
+  const results = [];
+  const seenPhotoKeys = /* @__PURE__ */ new Set();
+  for (const feature of features) {
+    const layerId = feature.layer?.id;
+    if (!layerId) {
+      continue;
+    }
+    const providerId = parseProviderIdFromLayerId(layerId);
+    if (!providerId) {
+      continue;
+    }
+    const props = feature.properties ?? {};
+    if (layerId.startsWith("photos-") || layerId.startsWith("viewfields-")) {
+      const photoId = props.photoId;
+      if (photoId == null) {
+        continue;
+      }
+      const photoIdStr = String(photoId);
+      const dedupeKey = `${providerId}:${photoIdStr}`;
+      if (seenPhotoKeys.has(dedupeKey)) {
+        continue;
+      }
+      seenPhotoKeys.add(dedupeKey);
+      results.push({
+        providerId,
+        kind: "photo",
+        photoId: photoIdStr,
+        sequenceId: props.sequenceId != null ? String(props.sequenceId) : void 0
+      });
+      continue;
+    }
+    if (layerId.startsWith("features-")) {
+      const featureId = props.featureId;
+      if (featureId == null) {
+        continue;
+      }
+      results.push({
+        providerId,
+        kind: "mapFeature",
+        featureId: String(featureId)
+      });
+    }
+  }
+  return results;
+};
+var useProviderMapFeaturesMaybe = (providerId, enabled, bbox, zoom) => useProviderMapFeatures(providerId, enabled ? bbox : null, zoom);
+var useAllProviderMapFeatures = (providerIds, bbox, zoom, date) => {
+  const enabled = new Set(providerIds);
+  const queries = PROVIDER_IDS.map((providerId) => ({
+    providerId,
+    query: useProviderMapFeaturesMaybe(providerId, enabled.has(providerId), bbox, zoom)
+  }));
+  return queries.flatMap(({ query }) => {
+    const data = query.data ?? [];
+    return data.filter((feature) => mapFeatureMatchesDateRange(feature, date));
+  });
+};
+var useAllProviderMapFeaturesLoading = (providerIds, bbox, zoom) => {
+  const enabled = new Set(providerIds);
+  const queries = PROVIDER_IDS.map((providerId) => ({
+    providerId,
+    query: useProviderMapFeaturesMaybe(providerId, enabled.has(providerId), bbox, zoom)
+  }));
+  const activeQueries = queries.filter(({ providerId }) => enabled.has(providerId));
+  return {
+    isLoading: activeQueries.some(({ query }) => query.isLoading),
+    isFetching: activeQueries.some(({ query }) => query.isFetching)
+  };
+};
+var useProviderPhotosMaybe = (providerId, enabled, bbox, zoom) => useProviderPhotos(providerId, enabled ? bbox : null, zoom);
+var useAllProviderPhotos = (providerIds, bbox, zoom, photoTypes, date) => {
+  const enabled = new Set(providerIds);
+  const queries = PROVIDER_IDS.map((providerId) => ({
+    providerId,
+    query: useProviderPhotosMaybe(
+      providerId,
+      enabled.has(providerId) && isBrowserAvailableProvider(providerId),
+      bbox,
+      zoom
+    )
+  }));
+  const photos = queries.flatMap(({ query }) => {
+    const data = query.data ?? [];
+    return data.filter((photo) => photoMatchesFilters(photo, photoTypes, date));
+  });
+  const activeQueries = queries.filter(({ providerId }) => enabled.has(providerId));
+  const isLoading = activeQueries.some(({ query }) => query.isLoading);
+  const isFetching = activeQueries.some(({ query }) => query.isFetching);
+  return { photos, isLoading, isFetching };
+};
+var useMapViewportBbox = (mapId, viewportTrigger) => {
+  const { [mapId]: mapRef } = useMap();
+  const [mapLoaded, setMapLoaded] = useState(false);
+  useEffect(
+    function subscribeMapLoad() {
+      if (!mapRef) {
+        setMapLoaded(false);
+        return;
+      }
+      const map = mapRef.getMap();
+      if (map.loaded()) {
+        setMapLoaded(true);
+        return;
+      }
+      const onLoad = () => {
+        setMapLoaded(true);
+      };
+      void map.once("load", onLoad);
+      return () => {
+        map.off("load", onLoad);
+      };
+    },
+    [mapRef]
+  );
+  if (!mapRef || !mapLoaded) {
+    return null;
+  }
+  const bounds = mapRef.getBounds();
+  if (!bounds) {
+    return null;
+  }
+  return [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
+};
+var usePhotoFullUrl = (photo) => useQuery({
+  queryKey: photo ? photoFullUrlQueryKey(photo) : ["photo-full-url", "none"],
+  queryFn: () => {
+    if (!photo) {
+      return null;
+    }
+    return resolvePhotoPanoramaUrl(photo);
+  },
+  enabled: photo != null,
+  staleTime: 24 * 60 * 60 * 1e3
+});
+var usePhotoThumbnail = (photo) => useQuery({
+  queryKey: photo ? photoThumbnailQueryKey(photo) : ["photo-thumbnail", "none"],
+  queryFn: () => {
+    if (!photo) {
+      return null;
+    }
+    return resolvePhotoThumbnailUrl(photo);
+  },
+  enabled: photo != null,
+  staleTime: 24 * 60 * 60 * 1e3
+});
+
+export { StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useAllProviderMapFeatures, useAllProviderMapFeaturesLoading, useAllProviderPhotos, useMapViewportBbox, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences };

package/dist/panels/MapillaryPanel.d.ts

@@ -0,0 +1,11 @@
+import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import 'mapillary-js/dist/mapillary.css';
+import type { StreetImageryPhotoSelection } from '../types';
+type MapillaryPanelProps = {
+    photo: NormalizedPhoto;
+    groupPhotos: NormalizedPhoto[];
+    onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
+    onEaseMapToPoint: (lng: number, lat: number) => void;
+};
+export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, }: MapillaryPanelProps) => import("react").JSX.Element;
+export {};

package/dist/panels/PanoramaxPanel.d.ts

@@ -0,0 +1,11 @@
+import '@panoramax/web-viewer';
+import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { StreetImageryPhotoSelection } from '../types';
+type PanoramaxPanelProps = {
+    photo: NormalizedPhoto;
+    groupPhotos: NormalizedPhoto[];
+    onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
+    onEaseMapToPoint: (lng: number, lat: number) => void;
+};
+export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, }: PanoramaxPanelProps) => import("react").JSX.Element;
+export {};

package/dist/streetImageryClick.d.ts

@@ -0,0 +1,13 @@
+import { type ProviderId } from '@osm-editor-kit/street-imagery';
+import type { MapGeoJSONFeature } from 'maplibre-gl';
+export type StreetImageryClickFeature = {
+    providerId: ProviderId;
+    kind: 'photo' | 'mapFeature';
+    photoId?: string;
+    featureId?: string;
+    sequenceId?: string;
+};
+export declare const streetImageryInteractiveLayerIds: (providers: ProviderId[]) => string[];
+export declare const queryStreetImageryFeatures: (event: {
+    features?: MapGeoJSONFeature[] | null;
+}) => StreetImageryClickFeature[];

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+import type { ProviderId } from '@osm-editor-kit/street-imagery';
+export type StreetImageryPhotoSelection = {
+    provider: ProviderId;
+    sequenceId: string;
+    photoId: string;
+};

package/dist/useViewerStore.d.ts

@@ -0,0 +1,13 @@
+type ViewerPovUpdate = {
+    bearing?: number | null;
+    hfov?: number | null;
+    lngLat?: [number, number] | null;
+};
+export declare const useViewerBearing: () => number | null;
+export declare const useViewerHfov: () => number | null;
+export declare const useViewerLngLat: () => [number, number] | null;
+export declare const useViewerActions: () => {
+    setPov: (partial: ViewerPovUpdate) => void;
+    reset: () => void;
+};
+export {};

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@osm-editor-kit/street-imagery-react",
+  "version": "0.1.0-alpha.0",
+  "description": "React MapLibre layers and photo viewers for street-level imagery providers.",
+  "license": "MIT",
+  "author": "Tobias Jordans",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/osmberlin/street-space-editor.git",
+    "directory": "packages/street-imagery-react"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha"
+  },
+  "scripts": {
+    "build": "tsup && rm -f .tsbuildinfo && tsc -p tsconfig.build.json",
+    "type-check": "tsc --noEmit",
+    "test-run": "bun test --pass-with-no-tests src",
+    "prepublishOnly": "bun run build && bun ../../scripts/package-exports-for-publish.ts",
+    "postpublish": "bun ../../scripts/package-exports-restore.ts",
+    "prepack": "bun ../../scripts/package-exports-for-publish.ts",
+    "postpack": "bun ../../scripts/package-exports-restore.ts"
+  },
+  "devDependencies": {
+    "@panoramax/web-viewer": "^5",
+    "@tanstack/react-query": "^5.85.5",
+    "@types/geojson": "^7946.0.16",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "bun-types": "^1.2.20",
+    "mapillary-js": "^4.1.2",
+    "maplibre-gl": "^5.7.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-map-gl": "^8.0.4",
+    "tsup": "^8.5.1",
+    "typescript": "^7.0.0",
+    "zustand": "^5.0.7"
+  },
+  "peerDependencies": {
+    "@osm-editor-kit/street-imagery": "workspace:*",
+    "@panoramax/web-viewer": "^5",
+    "@tanstack/react-query": "^5",
+    "mapillary-js": "^4",
+    "maplibre-gl": "^5",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-map-gl": "^8",
+    "zustand": "^5"
+  },
+  "publishExports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  }
+}