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

package/dist/chunk-XQXYV6SR.js

@@ -0,0 +1,466 @@
+import { useViewerActions } from './chunk-25UGGXIE.js';
+import { getStreetImageryConfig, providerExternalLink } from '@osm-editor-kit/street-imagery';
+import 'mapillary-js/dist/mapillary.css';
+import { DataProviderBase, S2GeometryProvider, Viewer } from 'mapillary-js';
+import { useRef, useState, useEffectEvent, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/panels/panoramaxItem.ts
+var DEFAULT_FIELD_OF_VIEW_DEG = 70;
+var toMs = (iso) => {
+  const ms = iso ? Date.parse(iso) : Number.NaN;
+  return Number.isNaN(ms) ? null : ms;
+};
+var orientation = (item) => item.properties?.["pers:interior_orientation"];
+var isPanoramaxItemSpherical = (item) => orientation(item)?.field_of_view === 360;
+var panoramaxItemSize = (item) => orientation(item)?.sensor_array_dimensions ?? (isPanoramaxItemSpherical(item) ? [2, 1] : [4, 3]);
+var panoramaxItemNeighbour = (item, rel) => item.links?.find((link) => link.rel === rel)?.id ?? null;
+var SD_WIDTH = 2048;
+var panoramaxItemImageUrl = (item) => {
+  const { hd, sd, thumb } = item.assets ?? {};
+  return sd?.href ?? hd?.href ?? thumb?.href ?? "";
+};
+var TILE_SIZE = 1024;
+var tileSpan = ([width, height], z) => TILE_SIZE * 2 ** (Math.ceil(Math.log2(Math.max(width, height))) - z);
+var panoramaxViewerSize = (item) => {
+  const [width, height] = panoramaxItemSize(item);
+  const scale = 2 ** Math.ceil(Math.log2(Math.max(width, height))) / Math.max(width, height);
+  return [Math.round(width * scale), Math.round(height * scale)];
+};
+var panoramaxLevelNeedsOriginal = (size, z) => size[0] / (tileSpan(size, z) / TILE_SIZE) > SD_WIDTH;
+var panoramaxTilesOfLevel = (size, z) => {
+  const [width, height] = size;
+  const span = tileSpan(size, z);
+  const tiles = [];
+  for (let y = 0; y < Math.ceil(height / span); y++) {
+    for (let x = 0; x < Math.ceil(width / span); x++) {
+      tiles.push({ x, y });
+    }
+  }
+  return tiles;
+};
+var panoramaxTileRect = (size, tile, original) => {
+  const [width, height] = size;
+  const span = tileSpan(size, tile.z);
+  const x = tile.x * span;
+  const y = tile.y * span;
+  const cutWidth = Math.min(span, width - x);
+  const cutHeight = Math.min(span, height - y);
+  const scaleX = original.width / width;
+  const scaleY = original.height / height;
+  return {
+    x: x * scaleX,
+    y: y * scaleY,
+    width: cutWidth * scaleX,
+    height: cutHeight * scaleY,
+    outWidth: Math.max(1, Math.round(cutWidth / span * TILE_SIZE)),
+    outHeight: Math.max(1, Math.round(cutHeight / span * TILE_SIZE))
+  };
+};
+var panoramaxItemFocal = (item) => {
+  const fieldOfView = orientation(item)?.field_of_view || DEFAULT_FIELD_OF_VIEW_DEG;
+  const [width, height] = panoramaxItemSize(item);
+  const focalByWidth = 0.5 / Math.tan(Math.min(fieldOfView, 170) * Math.PI / 360);
+  return focalByWidth * (width / Math.max(width, height));
+};
+var creatorOf = (item) => item.properties?.["geovisio:producer"] ?? item.providers?.at(-1)?.name;
+var panoramaxPhotoFromItem = (item) => {
+  const properties = item.properties ?? {};
+  const camera = orientation(item);
+  const cameraName = [camera?.camera_manufacturer, camera?.camera_model].filter(Boolean).join(" ");
+  const isPano = isPanoramaxItemSpherical(item);
+  const creatorName = creatorOf(item);
+  const uploadedAt = toMs(properties.created);
+  const licenseUrl = item.links?.find((link) => link.rel === "license")?.href;
+  const instance = item.links?.find((link) => link.rel === "via")?.instance_name;
+  const exifEntries = Object.entries(properties.exif ?? {}).filter(([, value]) => typeof value === "string" || typeof value === "number").map(([key, value]) => [key, String(value)]);
+  const details = {
+    ...properties.license ? { license: properties.license } : {},
+    ...licenseUrl ? { licenseUrl } : {},
+    ...properties.datetimetz ? { capturedAtLocal: properties.datetimetz } : {},
+    ...uploadedAt != null ? { uploadedAt } : {},
+    ...cameraName ? { camera: cameraName } : {},
+    ...!isPano && camera?.field_of_view ? { fieldOfViewDeg: camera.field_of_view } : {},
+    ...properties["quality:horizontal_accuracy"] != null ? { positionAccuracyMeters: properties["quality:horizontal_accuracy"] } : {},
+    ...instance ? { instance } : {},
+    ...camera?.focal_length != null ? { focalLengthMm: camera.focal_length } : {},
+    ...properties["original_file:name"] ? { originalFileName: properties["original_file:name"] } : {},
+    ...properties["original_file:size"] != null ? { originalFileSizeBytes: properties["original_file:size"] } : {},
+    ...properties["geovisio:rank_in_collection"] != null ? { rankInSequence: properties["geovisio:rank_in_collection"] } : {},
+    ...exifEntries.length > 0 ? { exif: Object.fromEntries(exifEntries) } : {}
+  };
+  return {
+    providerId: "panoramax",
+    photoId: item.id,
+    sequenceId: item.collection ?? null,
+    capturedAt: toMs(properties.datetime),
+    isPano,
+    heading: properties["view:azimuth"] ?? null,
+    lngLat: item.geometry.coordinates,
+    ...creatorName ? { creatorName } : {},
+    details
+  };
+};
+
+// src/panels/panoramaxDataProvider.ts
+var IDS_PER_REQUEST = 40;
+var SEQUENCE_PREFIX = "panoramax-around:";
+var fetchFile = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Panoramax picture file: HTTP ${response.status}`);
+  }
+  return response;
+};
+var TILE_PREFIX = "panoramax-tile:";
+var PanoramaxDataProvider = class extends DataProviderBase {
+  endpoint;
+  items = /* @__PURE__ */ new Map();
+  itemRequests = /* @__PURE__ */ new Map();
+  imageBuffers = /* @__PURE__ */ new Map();
+  pictures = /* @__PURE__ */ new Map();
+  constructor({ endpoint }) {
+    super(new S2GeometryProvider());
+    this.endpoint = endpoint.replace(/\/$/, "");
+  }
+  /** The Panoramax data of a picture the viewer has loaded. */
+  getItem(imageId) {
+    return this.items.get(imageId);
+  }
+  // Only the arrows to pictures nearby need these, and those need a 3D reconstruction.
+  getCoreImages(cellId) {
+    return Promise.resolve({ cell_id: cellId, images: [] });
+  }
+  async getImages(imageIds) {
+    const items = await this.loadItems(imageIds);
+    return items.map((item) => ({ node: this.toImageEnt(item), node_id: item.id }));
+  }
+  getSpatialImages(imageIds) {
+    return this.getImages(imageIds);
+  }
+  async getSequence(sequenceId) {
+    const imageId = sequenceId.slice(SEQUENCE_PREFIX.length);
+    const [item] = await this.loadItems([imageId]);
+    if (!item) {
+      throw new Error(`Panoramax picture ${imageId} not found`);
+    }
+    const around = [
+      panoramaxItemNeighbour(item, "prev"),
+      item.id,
+      panoramaxItemNeighbour(item, "next")
+    ];
+    return { id: sequenceId, image_ids: around.filter((id) => id != null) };
+  }
+  // The viewer asks for the same file more than once while it starts; one download serves all.
+  getImageBuffer(url) {
+    const running = this.imageBuffers.get(url);
+    if (running) {
+      return running;
+    }
+    const load = url.startsWith(TILE_PREFIX) ? this.cutTile(url) : fetchFile(url).then((response) => response.arrayBuffer());
+    const request = load.finally(() => this.imageBuffers.delete(url));
+    this.imageBuffers.set(url, request);
+    return request;
+  }
+  async getImageTiles({
+    imageId,
+    z
+  }) {
+    const [item] = await this.loadItems([imageId]);
+    const tiles = item ? panoramaxTilesOfLevel(panoramaxViewerSize(item), z) : [];
+    return {
+      node_id: imageId,
+      node: tiles.map(({ x, y }) => ({ url: `${TILE_PREFIX}${imageId}/${z}/${x}/${y}`, x, y, z }))
+    };
+  }
+  async cutTile(url) {
+    const [imageId = "", z, x, y] = url.slice(TILE_PREFIX.length).split("/");
+    const item = this.items.get(imageId);
+    if (!item) {
+      throw new Error(`Panoramax picture ${imageId} not loaded`);
+    }
+    const size = panoramaxViewerSize(item);
+    const { hd, sd } = item.assets ?? {};
+    const file = (panoramaxLevelNeedsOriginal(size, Number(z)) ? hd : sd) ?? hd ?? sd;
+    const original = await this.loadPicture(file?.href ?? "");
+    const rect = panoramaxTileRect(
+      size,
+      { x: Number(x), y: Number(y), z: Number(z) },
+      { width: original.width, height: original.height }
+    );
+    const canvas = new OffscreenCanvas(rect.outWidth, rect.outHeight);
+    canvas.getContext("2d")?.drawImage(
+      original,
+      rect.x,
+      rect.y,
+      rect.width,
+      rect.height,
+      0,
+      0,
+      rect.outWidth,
+      rect.outHeight
+    );
+    const blob = await canvas.convertToBlob({ type: "image/jpeg", quality: 0.9 });
+    return blob.arrayBuffer();
+  }
+  loadPicture(url) {
+    const known = this.pictures.get(url);
+    if (known) {
+      return known;
+    }
+    const picture = fetchFile(url).then((response) => response.blob()).then((blob) => createImageBitmap(blob));
+    this.pictures.set(url, picture);
+    picture.catch(() => this.pictures.delete(url));
+    for (const [oldUrl, old] of [...this.pictures].slice(0, -3)) {
+      this.pictures.delete(oldUrl);
+      void old.then((bitmap) => bitmap.close()).catch(() => {
+      });
+    }
+    return picture;
+  }
+  getMesh() {
+    return Promise.resolve({ faces: [], vertices: [] });
+  }
+  getCluster(url) {
+    return Promise.resolve({ id: url, points: {}, reference: { lat: 0, lng: 0, alt: 0 } });
+  }
+  async loadItems(imageIds) {
+    const missing = [
+      ...new Set(imageIds.filter((id) => !this.items.has(id) && !this.itemRequests.has(id)))
+    ];
+    for (let start = 0; start < missing.length; start += IDS_PER_REQUEST) {
+      const ids = missing.slice(start, start + IDS_PER_REQUEST);
+      const request = fetch(`${this.endpoint}/search?ids=${ids.join(",")}&limit=${ids.length}`).then((response) => {
+        if (!response.ok) {
+          throw new Error(`Panoramax search: HTTP ${response.status}`);
+        }
+        return response.json();
+      }).then((result) => {
+        for (const item of result.features ?? []) {
+          this.items.set(item.id, item);
+        }
+      }).finally(() => {
+        for (const id of ids) {
+          this.itemRequests.delete(id);
+        }
+      });
+      for (const id of ids) {
+        this.itemRequests.set(id, request);
+      }
+    }
+    await Promise.all(imageIds.map((id) => this.itemRequests.get(id)));
+    return imageIds.flatMap((id) => this.items.get(id) ?? []);
+  }
+  toImageEnt(item) {
+    const [lng, lat] = item.geometry.coordinates;
+    const [width, height] = panoramaxViewerSize(item);
+    const spherical = isPanoramaxItemSpherical(item);
+    const properties = item.properties ?? {};
+    const none = { id: "", url: "" };
+    return {
+      id: item.id,
+      geometry: { lat, lng },
+      sequence: { id: `${SEQUENCE_PREFIX}${item.id}` },
+      altitude: 0,
+      camera_type: spherical ? "spherical" : "perspective",
+      camera_parameters: spherical ? [] : [panoramaxItemFocal(item), 0, 0],
+      captured_at: Date.parse(properties.datetime ?? "") || 0,
+      compass_angle: properties["view:azimuth"] ?? 0,
+      cluster: none,
+      creator: { id: "", username: properties["geovisio:producer"] ?? "" },
+      // Panoramax serves its pictures upright.
+      exif_orientation: 1,
+      width,
+      height,
+      mesh: none,
+      owner: { id: "" },
+      thumb: {
+        id: item.id,
+        url: panoramaxItemImageUrl(item)
+      }
+    };
+  }
+};
+var PanoramaxPanel = ({
+  photo,
+  onPhotoSelected,
+  onEaseMapToPoint,
+  onViewerPhoto,
+  hideAttribution = false
+}) => {
+  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);
+  const [shownPhoto, setShownPhoto] = useState(null);
+  const emitPhotoSelected = useEffectEvent(onPhotoSelected);
+  const emitEaseMapToPoint = useEffectEvent(onEaseMapToPoint);
+  const emitViewerPhoto = useEffectEvent(
+    (viewerPhoto) => onViewerPhoto?.(viewerPhoto)
+  );
+  useEffect(
+    function resetViewerStoreOnProviderChange() {
+      return () => {
+        actions.reset();
+      };
+    },
+    [actions, photo.providerId]
+  );
+  useEffect(
+    function mountViewer() {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const dataProvider = new PanoramaxDataProvider({
+        endpoint: `${getStreetImageryConfig().panoramaxApiBase}/api`
+      });
+      const viewer = new Viewer({
+        container,
+        dataProvider,
+        imageId: initialPhotoIdRef.current,
+        component: {
+          // The attribution of the viewer links to mapillary.com.
+          attribution: false,
+          // Load only the direct neighbours ahead.
+          cache: { depth: { sequence: 1, spherical: 0, step: 0, turn: 0 } },
+          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;
+        const item = dataProvider.getItem(image.id);
+        if (!item) {
+          return;
+        }
+        const viewerPhoto = panoramaxPhotoFromItem(item);
+        emitPhotoSelected({
+          provider: "panoramax",
+          sequenceId: viewerPhoto.sequenceId ?? `photo:${image.id}`,
+          photoId: image.id
+        });
+        setShownPhoto(viewerPhoto);
+        emitViewerPhoto(viewerPhoto);
+        actions.setPov({
+          lngLat: viewerPhoto.lngLat,
+          ...!viewerPhoto.isPano && viewerPhoto.heading != null ? { bearing: viewerPhoto.heading } : {}
+        });
+        emitEaseMapToPoint(...viewerPhoto.lngLat);
+      };
+      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]
+  );
+  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]
+  );
+  const attribution = hideAttribution ? null : shownPhoto;
+  const license = attribution?.details?.license;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
+      style: { aspectRatio: "4 / 3" },
+      children: [
+        /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full" }),
+        attribution ? /* @__PURE__ */ jsxs("div", { className: "absolute right-0 bottom-0 flex gap-1.5 rounded-tl bg-black/50 px-1.5 py-0.5 text-[11px] leading-4 text-white", children: [
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: "underline-offset-2 hover:underline",
+              href: providerExternalLink(attribution),
+              rel: "noreferrer",
+              target: "_blank",
+              children: ["Panoramax", attribution.creatorName].filter(Boolean).join(" \xB7 ")
+            }
+          ),
+          license ? attribution.details?.licenseUrl ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: "underline-offset-2 hover:underline",
+              href: attribution.details.licenseUrl,
+              rel: "noreferrer",
+              target: "_blank",
+              children: license
+            }
+          ) : /* @__PURE__ */ jsx("span", { children: license }) : null
+        ] }) : null
+      ]
+    }
+  );
+};
+
+export { PanoramaxDataProvider, PanoramaxPanel, panoramaxPhotoFromItem };

package/dist/filters/PhotoDateRangeFilter.d.ts

@@ -0,0 +1,46 @@
+import { type DateRange } from '@osm-editor-kit/street-imagery';
+/** A fixed date to show in the chart, e.g. the start of a project or of a survey. */
+export type PhotoDateMarker = {
+    /** A day as `YYYY-MM-DD`, or a time (ms). */
+    date: string | number;
+    label: string;
+    /** CSS color of line and label. Default red. */
+    color?: string;
+};
+export type PhotoDateRangeFilterProps = {
+    /** The chosen range, days as `YYYY-MM-DD`. No `from` and no `to`: all dates. */
+    value: DateRange;
+    /** Called when a handle is released, a year label is clicked or a date input changes. */
+    onChange: (range: DateRange) => void;
+    /**
+     * Capture times (ms) of the photos to show as marks above the slider, usually all photos in
+     * view before the date filter. Without it there are no marks.
+     */
+    capturedAt?: Iterable<number | null | undefined>;
+    /** Lines with a label at these ages in years; a click on a label shows that many years. */
+    yearLines?: readonly number[];
+    /** Its line is red; added to `yearLines` when it is not one of them. */
+    recommendedMaxAgeYears?: number;
+    markers?: readonly PhotoDateMarker[];
+    /** Years the slider spans. Default 10. */
+    maxYears?: number;
+    /** Reference time (ms). Default: the time of the first render. */
+    now?: number;
+    /**
+     * The two date inputs for exact days, in sync with the slider: folded away (default), open,
+     * 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;
+};
+/**
+ * Date filter for photos after iD's photo age slider: one slider with two handles on a scale that
+ * 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, allDatesAction, }: PhotoDateRangeFilterProps) => import("react").JSX.Element;

package/dist/hooks/useAllProviderMapFeatures.d.ts

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

package/dist/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/i18n/PhotoCount.d.ts

@@ -0,0 +1,12 @@
+type PhotoCountProps = {
+    /** Position of the shown photo, starting at 1; leave out to show only the total. */
+    index?: number;
+    total: number;
+    className?: string;
+};
+/**
+ * "1/5" behind a small picture icon: this button has several photos and a click on it shows the
+ * next one.
+ */
+export declare const PhotoCount: ({ index, total, className }: PhotoCountProps) => import("react").JSX.Element;
+export {};

package/dist/i18n/PhotoDate.d.ts

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

package/dist/i18n/StreetImageryLocaleProvider.d.ts

@@ -0,0 +1,21 @@
+import { type StreetImageryLocale } from '@osm-editor-kit/street-imagery';
+import { type ReactNode } from 'react';
+import { type StreetImageryMessages } from './messages';
+type StreetImageryI18n = {
+    locale: StreetImageryLocale;
+    messages: StreetImageryMessages;
+};
+/** Overrides per group, e.g. `{ feature: { name: germanSignName } }`. */
+export type StreetImageryMessageOverrides = {
+    [Group in keyof StreetImageryMessages]?: StreetImageryMessages[Group] extends object ? StreetImageryMessages[Group] extends ((...args: never[]) => unknown) | readonly unknown[] ? StreetImageryMessages[Group] : Partial<StreetImageryMessages[Group]> : StreetImageryMessages[Group];
+};
+type StreetImageryLocaleProviderProps = {
+    /** Language of the package's texts and date formats. Without a provider: English. */
+    locale: StreetImageryLocale;
+    messages?: StreetImageryMessageOverrides;
+    children: ReactNode;
+};
+export declare const StreetImageryLocaleProvider: ({ locale, messages, children, }: StreetImageryLocaleProviderProps) => import("react").JSX.Element;
+/** Locale and texts of the nearest `StreetImageryLocaleProvider`. */
+export declare const useStreetImageryI18n: () => StreetImageryI18n;
+export {};

package/dist/i18n/messages.d.ts

@@ -0,0 +1,45 @@
+import { type StreetImageryLocale, type ViewDirection, type ViewpointRole } from '@osm-editor-kit/street-imagery';
+/**
+ * Every text the package's components show. Texts with values are plain functions, so a host app
+ * can override single entries from a constant or from its own i18n library.
+ */
+export type StreetImageryMessages = {
+    viewer: {
+        regionLabel: string;
+        loading: string;
+        backInHistory: string;
+        forwardInHistory: string;
+        minimize: string;
+        close: string;
+        suggestedViews: string;
+        suggestedViewsHint: string;
+        noPhoto: (label: string) => string;
+        noMatchingPhoto: (label: string) => string;
+        nextPhotoOfView: (label: string) => string;
+    };
+    viewpointRole: Record<ViewpointRole, string>;
+    /** Eight compass points, clockwise from north: N, NE, E, SE, S, SW, W, NW. */
+    compass: readonly string[];
+    unknownDate: string;
+    dateFilter: {
+        allDates: string;
+        /** e.g. "Since 5 Oct 2024". */
+        since: (date: string) => string;
+        until: (date: string) => string;
+        between: (from: string, to: string) => string;
+        /** Short label below a year line, e.g. "2 y". */
+        yearsShort: (years: number) => string;
+        /** Tooltip of a year label; a click shows the photos of the last `years` years. */
+        lastYears: (years: number) => string;
+        recommendedMaxAge: (years: number) => string;
+        fromHandle: string;
+        toHandle: string;
+        exactDates: string;
+        from: string;
+        to: string;
+        photoCount: (count: number) => string;
+    };
+    /** e.g. "Start, looking along the street"; `role` is the viewpoint's label. */
+    viewDirection: (role: string, kind: ViewDirection['kind']) => string;
+};
+export declare const STREET_IMAGERY_MESSAGES: Record<StreetImageryLocale, StreetImageryMessages>;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { StreetLevelImagerySelectionOverlay, resolveSelectedSequence, } from './StreetLevelImagerySelectionOverlay';
+export { BASE_COLOR, SELECTION_COLOR, StreetLevelImagerySelectionOverlay, resolveSelectedSequence, } from './StreetLevelImagerySelectionOverlay';
 export { StreetLevelImagerySourcesAndLayers, type PhotoFilter, } from './StreetLevelImagerySourcesAndLayers';
-export { StreetLevelImageryViewCone } from './StreetLevelImageryViewCone';
+export { StreetLevelImageryViewCone, VIEW_SHAPE_FILL_OPACITY } from './StreetLevelImageryViewCone';
 export { StreetLevelImageryViewer } from './StreetLevelImageryViewer';
 export type { StreetImageryPhotoSelection } from './types';
 export { queryStreetImageryFeatures, streetImageryInteractiveLayerIds, type StreetImageryClickFeature, } from './streetImageryClick';
@@ -9,6 +9,21 @@ 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 type { MapillaryLookAt, MapillaryViewerOutline } from './panels/mapillaryLookAt';
+export * from './mapillary/useMapillaryFeatures';
+export { LocationPickOnMap, type LocationPickOnMapProps } from './openers/LocationPickOnMap';
+export * from './openers/useLocationPickStore';
+export { SelectedMapFeatureLayer, type SelectedMapFeatureLayerProps, } from './mapillary/SelectedMapFeatureLayer';
+export { MapillaryFeatureBar, type MapillaryFeatureBarProps } from './mapillary/MapillaryFeatureBar';
+export { MAPILLARY_FEATURE_BAR_LABELS, type MapillaryFeatureBarLabels, } from './mapillary/featureBarLabels';
+export { STREET_IMAGERY_MESSAGES, type StreetImageryMessages } from './i18n/messages';
+export { StreetImageryLocaleProvider, useStreetImageryI18n, type StreetImageryMessageOverrides, } from './i18n/StreetImageryLocaleProvider';
+export { PhotoDateRangeFilter, type PhotoDateMarker, type PhotoDateRangeFilterProps, } from './filters/PhotoDateRangeFilter';
+export { PhotoDate } from './i18n/PhotoDate';
+export { PhotoCount } from './i18n/PhotoCount';