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

package/dist/index.js

@@ -1,11 +1,12 @@
-export { MapillaryPanel } from './chunk-BS6LPDMY.js';
+export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-72HJV6II.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 { photosToFeatureCollection, emptyPointCollection, sequencesToFeatureCollection, emptyLineCollection, adapterById, viewConeGeoJson, coneRadiusMeters, setStreetImageryConfig, photoLayerId, viewfieldLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoMatchesFilters, resolvePhotoPanoramaUrl, photoFullUrlQueryKey, resolvePhotoThumbnailUrl, photoThumbnailQueryKey, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, distanceMeters, fetchImageDetections, mapFeaturesToFeatureCollection, buildMapFeatureLayerFilter, featureSourceId, photosToViewfieldsFeatureCollection, emptyPolygonCollection, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, 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 } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { lazy, useEffect, Fragment as Fragment$1, Suspense, useState, useRef, useEffectEvent } from 'react';
+import { useQuery, useQueries } from '@tanstack/react-query';
+import { create } from 'zustand';
 
 var HIGHLIGHT_SOURCE_ID = "selection-highlight";
 var HIGHLIGHT_LAYER_ID = "selection-highlight-layer";
@@ -199,6 +200,12 @@ var FEATURE_CIRCLE_RADIUS = [
   18,
   4
 ];
+var padBbox = ([west, south, east, north], factor) => {
+  const dx = (east - west) * factor;
+  const dy = (north - south) * factor;
+  return [west - dx, south - dy, east + dx, north + dy];
+};
+var lngLatInBbox = ([lng, lat], [west, south, east, north]) => lng >= west && lng <= east && lat >= south && lat <= north;
 var PHOTO_SORT_KEY = ["coalesce", ["get", "capturedAt"], 0];
 var FEATURE_SORT_KEY = ["coalesce", ["get", "lastSeenAt"], 0];
 var PhotoProviderLayer = ({
@@ -214,8 +221,12 @@ var PhotoProviderLayer = ({
   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 drawBbox = bbox ? padBbox(bbox, 0.25) : null;
+  const photoCollection = zoom >= adapter.minZoom ? photosToFeatureCollection(
+    drawBbox ? visiblePhotos.filter((photo) => lngLatInBbox(photo.lngLat, drawBbox)) : visiblePhotos
+  ) : emptyPointCollection();
+  const viewfieldsActive = showViewfields && zoom >= VIEWFIELD_MIN_ZOOM;
+  const viewfieldCollection = viewfieldsActive ? photosToViewfieldsFeatureCollection(visiblePhotos, zoom, { bbox }) : emptyPolygonCollection();
   const photoFilter = buildPhotoLayerFilter(filter?.photoTypes, filter?.date);
   const photoSrcId = photoSourceId(providerId);
   const viewfieldSrcId = viewfieldSourceId(providerId);
@@ -342,7 +353,10 @@ var MapFeatureProviderLayer = ({
 }) => {
   const adapter = adapterById[providerId];
   const { data: features = [] } = useProviderMapFeatures(providerId, bbox, zoom);
-  const featureCollection = zoom >= adapter.minZoom ? mapFeaturesToFeatureCollection(features) : emptyPointCollection();
+  const valueFilter = filter?.mapFeatureValue;
+  const featureCollection = zoom >= adapter.minZoom ? mapFeaturesToFeatureCollection(
+    valueFilter ? features.filter((feature) => valueFilter(feature.value)) : features
+  ) : emptyPointCollection();
   const featureFilter = buildMapFeatureLayerFilter(filter?.date);
   const featureSrcId = featureSourceId(providerId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -448,7 +462,7 @@ var StreetLevelImagerySourcesAndLayers = ({
   ] });
 };
 var MapillaryPanel2 = lazy(
-  () => import('./MapillaryPanel-QX6NESX7.js').then((module) => ({
+  () => import('./MapillaryPanel-I5GKT6YT.js').then((module) => ({
     default: module.MapillaryPanel
   }))
 );
@@ -462,7 +476,11 @@ var StreetLevelImageryViewer = ({
   photo,
   groupPhotos,
   onPhotoSelected,
-  onEaseMapToPoint
+  onEaseMapToPoint,
+  onViewerPhoto,
+  lookAtBearing,
+  lookAt,
+  outlines
 }) => {
   if (photo.providerId === "mapillary") {
     return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {}), children: /* @__PURE__ */ jsx(
@@ -471,6 +489,10 @@ var StreetLevelImageryViewer = ({
         groupPhotos,
         onEaseMapToPoint,
         onPhotoSelected,
+        lookAt,
+        lookAtBearing,
+        outlines,
+        onViewerPhoto,
         photo
       }
     ) });
@@ -656,4 +678,546 @@ var usePhotoThumbnail = (photo) => useQuery({
   staleTime: 24 * 60 * 60 * 1e3
 });
 
-export { StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useAllProviderMapFeatures, useAllProviderMapFeaturesLoading, useAllProviderPhotos, useMapViewportBbox, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences };
+// src/viewpoints/viewDirectionLabels.ts
+var ROLE_LABELS = {
+  here: "Here",
+  "line-start": "Start",
+  "line-end": "End",
+  "into-node": "Junction",
+  custom: "View"
+};
+var viewpointRoleLabel = (role) => ROLE_LABELS[role];
+var viewSuggestionLabel = ({ viewpoint, direction }) => {
+  const role = viewpoint.label ?? viewpointRoleLabel(viewpoint.role);
+  switch (direction.kind) {
+    case "forward":
+      return `${role}, looking along the street`;
+    case "back":
+      return `${role}, looking back along the street`;
+    case "into":
+      return `${role}, looking into the junction`;
+    case "N":
+    case "E":
+    case "S":
+    case "W":
+      return `${role}, looking ${direction.kind}`;
+  }
+};
+var DEFAULT_LAYOUT = { right: 16, bottom: 32, width: 420, minimized: false };
+var MIN_WIDTH = 280;
+var EDGE = 8;
+var readLayout = (storageKey) => {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    return raw ? { ...DEFAULT_LAYOUT, ...JSON.parse(raw) } : DEFAULT_LAYOUT;
+  } catch {
+    return DEFAULT_LAYOUT;
+  }
+};
+var writeLayout = (storageKey, layout) => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(layout));
+  } catch {
+  }
+};
+var Icon = ({ path, className = "size-4" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": true,
+    className,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.75,
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", { d: path })
+  }
+);
+var ICONS = {
+  back: "M15 18l-6-6 6-6",
+  forward: "M9 18l6-6-6-6",
+  close: "M18 6 6 18M6 6l12 12",
+  minimize: "M5 12h14",
+  expand: "M4 14v6h6M20 10V4h-6M14 10l6-6M10 14l-6 6",
+  arrow: "M12 20V5M6 11l6-6 6 6"
+};
+var ToolbarButton = ({
+  label,
+  onClick,
+  disabled,
+  children
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    "aria-label": label,
+    className: "inline-flex size-7 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent",
+    disabled,
+    onClick,
+    title: label,
+    type: "button",
+    children
+  }
+);
+var formatShortDate = (capturedAt) => capturedAt == null ? "\u2014" : new Intl.DateTimeFormat("en", { year: "2-digit", month: "short" }).format(capturedAt);
+var SuggestionChip = ({
+  suggestion,
+  active,
+  onSelect
+}) => {
+  const best = suggestion.candidates[0];
+  const label = viewSuggestionLabel(suggestion);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-label": best ? label : `${label} (no photo)`,
+      "aria-pressed": active,
+      className: [
+        "inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-xs whitespace-nowrap",
+        active ? "border-fuchsia-600 bg-fuchsia-600 text-white" : best ? "border-slate-300 bg-white text-slate-700 hover:border-fuchsia-500" : "border-dashed border-slate-200 bg-white text-slate-400"
+      ].join(" "),
+      disabled: !best,
+      onClick: onSelect,
+      title: best ? label : `${label}: no matching photo`,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: viewpointRoleLabel(suggestion.viewpoint.role) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "inline-flex",
+            style: { transform: `rotate(${suggestion.direction.bearing}deg)` },
+            children: /* @__PURE__ */ jsx(Icon, { className: "size-3", path: ICONS.arrow })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: active ? "text-fuchsia-100" : "text-slate-400", children: formatShortDate(best?.photo.capturedAt) })
+      ]
+    }
+  );
+};
+var FloatingPhotoViewer = ({
+  title,
+  suggestions,
+  activeDirectionKey,
+  onSelectSuggestion,
+  canGoBack,
+  canGoForward,
+  onBack,
+  onForward,
+  onClose,
+  status,
+  children,
+  footer,
+  drawer,
+  storageKey = "street-imagery:floating-viewer"
+}) => {
+  const [layout, setLayout] = useState(() => readLayout(storageKey));
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const dragRef = useRef(
+    null
+  );
+  const updateLayout = (next) => {
+    setLayout(next);
+    writeLayout(storageKey, next);
+  };
+  const onShortcut = useEffectEvent((event) => {
+    const target = event.target;
+    if (target instanceof Element && target.closest('input, textarea, select, [contenteditable="true"]')) {
+      return;
+    }
+    if (event.key === "Escape") {
+      onClose();
+    } else if (event.key === "[" && canGoBack) {
+      onBack();
+    } else if (event.key === "]" && canGoForward) {
+      onForward();
+    }
+  });
+  useEffect(function subscribeKeyboardShortcuts() {
+    window.addEventListener("keydown", onShortcut);
+    return () => window.removeEventListener("keydown", onShortcut);
+  }, []);
+  const startDrag = (event, mode) => {
+    if (event.button !== 0 || event.target.closest("button")) {
+      return;
+    }
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = { x: event.clientX, y: event.clientY, layout, mode };
+  };
+  const onDrag = (event) => {
+    const drag = dragRef.current;
+    if (!drag) {
+      return;
+    }
+    const dx = event.clientX - drag.x;
+    const dy = event.clientY - drag.y;
+    setLayout(
+      drag.mode === "move" ? {
+        ...drag.layout,
+        right: Math.max(EDGE, drag.layout.right - dx),
+        bottom: Math.max(EDGE, drag.layout.bottom - dy)
+      } : { ...drag.layout, width: Math.max(MIN_WIDTH, drag.layout.width - dx) }
+    );
+  };
+  const endDrag = () => {
+    if (dragRef.current) {
+      dragRef.current = null;
+      writeLayout(storageKey, layout);
+    }
+  };
+  const dragHandlers = { onPointerMove: onDrag, onPointerUp: endDrag, onPointerCancel: endDrag };
+  if (layout.minimized) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        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 },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { path: ICONS.expand }),
+          title
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": "Photo viewer",
+      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,
+        width: `min(${layout.width}px, calc(100% - 1rem))`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-y-0 left-0 z-10 w-1.5 cursor-ew-resize hover:bg-fuchsia-500/20",
+            onPointerDown: (event) => startDrag(event, "resize"),
+            ...dragHandlers
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            className: "flex cursor-move touch-none items-center gap-1 border-b border-slate-100 px-2 py-1.5 select-none",
+            onPointerDown: (event) => startDrag(event, "move"),
+            ...dragHandlers,
+            children: [
+              /* @__PURE__ */ jsx(ToolbarButton, { disabled: !canGoBack, label: "Previous photo in history ([)", onClick: onBack, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.back }) }),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  disabled: !canGoForward,
+                  label: "Next photo in history (])",
+                  onClick: onForward,
+                  children: /* @__PURE__ */ jsx(Icon, { path: ICONS.forward })
+                }
+              ),
+              /* @__PURE__ */ jsx("h2", { className: "min-w-0 flex-1 truncate px-1 text-sm font-semibold text-slate-800", children: title }),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  label: "Minimize",
+                  onClick: () => updateLayout({ ...layout, minimized: true }),
+                  children: /* @__PURE__ */ jsx(Icon, { path: ICONS.minimize })
+                }
+              ),
+              /* @__PURE__ */ jsx(ToolbarButton, { label: "Close (Esc)", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.close }) })
+            ]
+          }
+        ),
+        suggestions.length > 0 ? /* @__PURE__ */ jsx(
+          "nav",
+          {
+            "aria-label": "Suggested views",
+            className: "flex gap-1 overflow-x-auto border-b border-slate-100 px-2 py-1.5",
+            children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+              SuggestionChip,
+              {
+                active: suggestion.direction.key === activeDirectionKey,
+                onSelect: () => onSelectSuggestion(suggestion),
+                suggestion
+              },
+              suggestion.direction.key
+            ))
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto", children: [
+          status ? /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-slate-500", role: "status", children: status }) : null,
+          children,
+          footer ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-slate-600", children: footer }) : null,
+          drawer ? /* @__PURE__ */ jsxs("div", { className: "border-t border-slate-100", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                "aria-expanded": drawerOpen,
+                className: "flex w-full items-center justify-between px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50",
+                onClick: () => setDrawerOpen((open) => !open),
+                type: "button",
+                children: [
+                  drawer.label,
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: drawerOpen ? "inline-flex rotate-90" : "inline-flex", children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5", path: ICONS.forward }) })
+                ]
+              }
+            ),
+            drawerOpen ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: drawer.content }) : null
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+};
+var SOURCE_DIRECTIONS = "viewpoint-directions";
+var SOURCE_POINTS = "viewpoint-points";
+var SOURCE_LINE = "viewpoint-line";
+var VIEWPOINT_DIRECTION_LAYER_ID = "viewpoint-direction-fill";
+var VIEWPOINT_DEFAULT_COLOR = "#c026d3";
+var directionLengthMeters = (zoom) => Math.max(8, coneRadiusMeters(zoom) * 3);
+var ViewpointLayer = ({
+  viewpoints,
+  suggestions,
+  activeDirectionKey,
+  zoom,
+  line,
+  color = VIEWPOINT_DEFAULT_COLOR
+}) => {
+  const length = directionLengthMeters(zoom);
+  const directions = {
+    type: "FeatureCollection",
+    features: suggestions.map(({ viewpoint, direction, candidates }) => ({
+      ...viewConeGeoJson(viewpoint.lngLat, direction.bearing, 40, length),
+      properties: {
+        key: direction.key,
+        active: direction.key === activeDirectionKey,
+        hasPhoto: candidates.length > 0
+      }
+    }))
+  };
+  const points = {
+    type: "FeatureCollection",
+    features: viewpoints.map(
+      (viewpoint) => ({
+        type: "Feature",
+        properties: { id: viewpoint.id },
+        geometry: { type: "Point", coordinates: viewpoint.lngLat }
+      })
+    )
+  };
+  const lineFeature = {
+    type: "FeatureCollection",
+    features: line && line.length > 1 ? [{ type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: line } }] : []
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Source, { id: SOURCE_LINE, type: "geojson", data: lineFeature }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "viewpoint-line",
+        type: "line",
+        source: SOURCE_LINE,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: { "line-color": color, "line-width": 5, "line-opacity": 0.5 }
+      }
+    ),
+    /* @__PURE__ */ jsx(Source, { id: SOURCE_DIRECTIONS, type: "geojson", data: directions }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: VIEWPOINT_DIRECTION_LAYER_ID,
+        type: "fill",
+        source: SOURCE_DIRECTIONS,
+        paint: {
+          "fill-color": color,
+          "fill-opacity": ["case", ["get", "active"], 0.55, ["get", "hasPhoto"], 0.18, 0.04]
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "viewpoint-direction-line",
+        type: "line",
+        source: SOURCE_DIRECTIONS,
+        paint: {
+          "line-color": color,
+          "line-width": ["case", ["get", "active"], 2, 1],
+          "line-dasharray": [2, 1.5],
+          "line-opacity": ["case", ["get", "hasPhoto"], 0.9, 0.35]
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Source, { id: SOURCE_POINTS, type: "geojson", data: points }),
+    /* @__PURE__ */ jsx(
+      Layer,
+      {
+        id: "viewpoint-point",
+        type: "circle",
+        source: SOURCE_POINTS,
+        paint: {
+          "circle-radius": 5,
+          "circle-color": "#ffffff",
+          "circle-stroke-color": color,
+          "circle-stroke-width": 2.5
+        }
+      }
+    )
+  ] });
+};
+var viewDirectionKeyFromFeatures = (features) => {
+  const hit = features?.find((feature) => feature.layer?.id === VIEWPOINT_DIRECTION_LAYER_ID);
+  const key = hit?.properties?.key;
+  return typeof key === "string" ? key : null;
+};
+var samePhoto = (a, b) => a != null && a.providerId === b.providerId && a.photoId === b.photoId;
+var useViewpointSessionStore = create()((set, get) => ({
+  sessionId: 0,
+  viewpoints: [],
+  line: null,
+  activeDirectionKey: null,
+  history: [],
+  historyIndex: -1,
+  actions: {
+    open: ({ viewpoints, line = null }) => set((state) => ({
+      sessionId: state.sessionId + 1,
+      viewpoints,
+      line,
+      activeDirectionKey: null
+    })),
+    showPhoto: (entry) => set((state) => {
+      const current = state.history[state.historyIndex];
+      if (samePhoto(current?.photo, entry.photo)) {
+        return entry.directionKey != null && entry.directionKey !== state.activeDirectionKey ? { activeDirectionKey: entry.directionKey } : state;
+      }
+      const history = [...state.history.slice(0, state.historyIndex + 1), entry].slice(
+        -100
+      );
+      return {
+        history,
+        historyIndex: history.length - 1,
+        activeDirectionKey: entry.directionKey ?? state.activeDirectionKey
+      };
+    }),
+    back: () => {
+      const { history, historyIndex } = get();
+      const entry = history[historyIndex - 1];
+      if (!entry) {
+        return null;
+      }
+      set({ historyIndex: historyIndex - 1, activeDirectionKey: entry.directionKey });
+      return entry;
+    },
+    forward: () => {
+      const { history, historyIndex } = get();
+      const entry = history[historyIndex + 1];
+      if (!entry) {
+        return null;
+      }
+      set({ historyIndex: historyIndex + 1, activeDirectionKey: entry.directionKey });
+      return entry;
+    },
+    close: () => set({ viewpoints: [], line: null, activeDirectionKey: null })
+  }
+}));
+var useViewpointSessionId = () => useViewpointSessionStore((state) => state.sessionId);
+var useViewpoints = () => useViewpointSessionStore((state) => state.viewpoints);
+var useViewpointLine = () => useViewpointSessionStore((state) => state.line);
+var useActiveDirectionKey = () => useViewpointSessionStore((state) => state.activeDirectionKey);
+var useCurrentHistoryEntry = () => useViewpointSessionStore((state) => state.history[state.historyIndex] ?? null);
+var useCanGoBack = () => useViewpointSessionStore((state) => state.historyIndex > 0);
+var useCanGoForward = () => useViewpointSessionStore((state) => state.historyIndex < state.history.length - 1);
+var useViewpointSessionActions = () => useViewpointSessionStore((state) => state.actions);
+var getViewpointSession = () => {
+  const { actions, history, historyIndex } = useViewpointSessionStore.getState();
+  return { actions, current: history[historyIndex] ?? null };
+};
+var DEFAULT_SOURCES = [mapillaryPhotoSource];
+var useViewSuggestions = (viewpoints, {
+  maxAgeYears,
+  photoTypes,
+  limit,
+  filterPhoto,
+  sources = DEFAULT_SOURCES,
+  enabled = true
+} = {}) => {
+  const [now] = useState(() => Date.now());
+  const requests = viewpoints.flatMap(
+    (viewpoint) => sources.map((source) => ({ viewpoint, source }))
+  );
+  const queries = useQueries({
+    queries: requests.map(({ viewpoint, source }) => ({
+      queryKey: [
+        "street-imagery",
+        "photos-near",
+        source.id,
+        viewpoint.lngLat[0],
+        viewpoint.lngLat[1]
+      ],
+      queryFn: ({ signal }) => source.fetchNear(viewpoint.lngLat, signal),
+      enabled,
+      staleTime: 10 * 60 * 1e3
+    }))
+  });
+  const photosByViewpointId = /* @__PURE__ */ new Map();
+  requests.forEach(({ viewpoint }, index) => {
+    const photos = queries[index]?.data ?? [];
+    const kept = filterPhoto ? photos.filter(filterPhoto) : photos;
+    photosByViewpointId.set(viewpoint.id, [
+      ...photosByViewpointId.get(viewpoint.id) ?? [],
+      ...kept
+    ]);
+  });
+  const suggestions = buildViewSuggestions(
+    viewpoints,
+    (viewpoint) => photosByViewpointId.get(viewpoint.id) ?? [],
+    {
+      now,
+      maxAgeMs: maxAgeYears == null ? void 0 : yearsToMs(maxAgeYears),
+      photoTypes,
+      limit
+    }
+  );
+  return {
+    suggestions,
+    isLoading: enabled && queries.some((query) => query.isPending),
+    // An error only when every source failed; one failing provider still leaves suggestions.
+    isError: queries.length > 0 && queries.every((query) => query.isError)
+  };
+};
+var STALE_TIME = 10 * 60 * 1e3;
+var useMapillaryMapFeatureImages = (featureId, { shape = SIGN_TARGET } = {}) => useQuery({
+  queryKey: ["street-imagery", "mapillary-map-feature", featureId, shape],
+  queryFn: ({ signal }) => fetchMapFeatureImages(featureId, { shape, signal }),
+  enabled: !!featureId,
+  staleTime: STALE_TIME
+});
+var useMapillaryMapFeaturesNear = (lngLat, {
+  radiusMeters = 40,
+  objectValues,
+  enabled = true
+} = {}) => useQuery({
+  queryKey: ["street-imagery", "mapillary-map-features-near", lngLat, radiusMeters, objectValues],
+  queryFn: async ({ signal }) => {
+    const center = lngLat;
+    const features = await fetchMapillaryMapFeaturesInBbox(bboxAround(center, radiusMeters), {
+      objectValues,
+      signal
+    });
+    return features.map((feature) => ({ ...feature, distanceMeters: distanceMeters(center, feature.lngLat) })).filter((feature) => feature.distanceMeters <= radiusMeters).sort((a, b) => a.distanceMeters - b.distanceMeters);
+  },
+  enabled: enabled && !!lngLat,
+  staleTime: STALE_TIME
+});
+var useMapillaryImageDetections = (imageId, { filter, filterKey } = {}) => useQuery({
+  queryKey: ["street-imagery", "mapillary-detections", imageId, filterKey ?? null],
+  queryFn: ({ signal }) => fetchImageDetections(imageId, { filter, signal }),
+  enabled: !!imageId,
+  staleTime: STALE_TIME
+});
+
+export { FloatingPhotoViewer, StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, ViewpointLayer, getViewpointSession, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useActiveDirectionKey, useAllProviderMapFeatures, useAllProviderMapFeaturesLoading, useAllProviderPhotos, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useMapViewportBbox, useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useViewSuggestions, useViewpointLine, useViewpointSessionActions, useViewpointSessionId, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel, viewpointRoleLabel };

package/dist/mapillary/useMapillaryFeatures.d.ts

@@ -0,0 +1,36 @@
+import { type LngLat, type TargetShape } from '@osm-editor-kit/street-imagery';
+/**
+ * A Mapillary map feature (sign, traffic light, marking) with all images that show it, grouped by
+ * day, and the outlines Mapillary linked to it. Feed `days[0].best` into the viewer with
+ * `lookAt={{ lngLat: feature.lngLat, outline: image.outline }}`.
+ */
+export declare const useMapillaryMapFeatureImages: (featureId: string | null | undefined, { shape }?: {
+    shape?: TargetShape;
+}) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").MapFeatureImages | null>, Error>;
+/**
+ * Map features within `radiusMeters` of a point (Graph API), nearest first, e.g. the traffic
+ * lights and markings at a junction. `objectValues` accepts wildcards (`object--traffic-light--*`).
+ */
+export declare const useMapillaryMapFeaturesNear: (lngLat: LngLat | null | undefined, { radiusMeters, objectValues, enabled, }?: {
+    radiusMeters?: number;
+    objectValues?: string[];
+    enabled?: boolean;
+}) => import("@tanstack/react-query").UseQueryResult<NoInfer<{
+    id: string;
+    value: string;
+    lngLat: LngLat;
+    firstSeenAt: number | null;
+    lastSeenAt: number | null;
+    facing: number | null;
+    imageIds: string[];
+    distanceMeters: number;
+}[]>, Error>;
+/**
+ * Detection outlines of one image, for `outlines` of the Mapillary viewer. An image has ~500
+ * detections; pass `filter` (e.g. `matchesAnyGroup(JUNCTION_DETECTION_GROUPS)`) and name it with
+ * `filterKey` so the cache can tell filters apart.
+ */
+export declare const useMapillaryImageDetections: (imageId: string | null | undefined, { filter, filterKey }?: {
+    filter?: (value: string) => boolean;
+    filterKey?: string;
+}) => import("@tanstack/react-query").UseQueryResult<NoInfer<import("@osm-editor-kit/street-imagery").MapillaryDetection[]>, Error>;