@osm-editor-kit/street-imagery-react 0.1.0-alpha.3 → 0.1.0-alpha.6

package/dist/mapillary/MapillaryFeatureBar.d.ts

@@ -0,0 +1,13 @@
+import { type MapFeatureImages, type TargetImage } from '@osm-editor-kit/street-imagery';
+export type MapillaryFeatureBarProps = {
+    data: MapFeatureImages;
+    shownImage: TargetImage | null;
+    onShow: (image: TargetImage) => void;
+};
+/**
+ * A Mapillary sign or object above its photo: what it is, when Mapillary saw it, and one button
+ * per capture day (newest first). The shown day is highlighted; clicking it again steps through
+ * that day's photos. Dates show month and year; the tooltip has the full date and the age.
+ * Texts and dates follow the `StreetImageryLocaleProvider`.
+ */
+export declare const MapillaryFeatureBar: ({ data, shownImage, onShow }: MapillaryFeatureBarProps) => import("react").JSX.Element;

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>;

package/dist/openers/LocationPickOnMap.d.ts

@@ -0,0 +1,10 @@
+import { type LocationOpener, type OpenTarget } from '@osm-editor-kit/street-imagery';
+export type LocationPickOnMapProps = {
+    /** Called after the place was opened, e.g. to mark it on the map. */
+    onPick?: (target: OpenTarget, opener: LocationOpener) => void;
+};
+/**
+ * Render inside `<Map>`. While a location opener is armed, the next map click opens the clicked
+ * place in a new tab and disarms; Escape disarms. The map's own click handlers still run.
+ */
+export declare const LocationPickOnMap: ({ onPick }: LocationPickOnMapProps) => null;

package/dist/openers/useLocationPickStore.d.ts

@@ -0,0 +1,9 @@
+import type { LocationOpenerId } from '@osm-editor-kit/street-imagery';
+/** The opener waiting for a map click, or `null`. */
+export declare const useArmedLocationOpenerId: () => LocationOpenerId | null;
+export declare const useLocationPickActions: () => {
+    arm: (openerId: LocationOpenerId) => void;
+    disarm: () => void;
+    /** Arm, or disarm when this opener is armed already. */
+    toggle: (openerId: LocationOpenerId) => void;
+};

package/dist/panels/MapillaryPanel.d.ts

@@ -1,11 +1,29 @@
 import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
 import 'mapillary-js/dist/mapillary.css';
 import type { StreetImageryPhotoSelection } from '../types';
+import { type MapillaryLookAt, type MapillaryViewerOutline } from './mapillaryLookAt';
 type MapillaryPanelProps = {
     photo: NormalizedPhoto;
     groupPhotos: NormalizedPhoto[];
     onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
     onEaseMapToPoint: (lng: number, lat: number) => void;
+    /** Full photo data for each image the viewer shows (incl. native prev/next navigation). */
+    onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /** 360° photos: turn the view to this map bearing when `photo` opens (e.g. a suggested view). */
+    lookAtBearing?: number | null;
+    /**
+     * Turn (and zoom) the view to a place when `photo` opens: a sign, a traffic light, a junction.
+     * Works for 360° and flat photos; wins over `lookAtBearing`.
+     */
+    lookAt?: MapillaryLookAt | null;
+    /** Outlines to draw in the shown image, e.g. the detections you care about. */
+    outlines?: MapillaryViewerOutline[];
+    /**
+     * Hide the viewer's own attribution (creator and year). The host must then show the creator
+     * (`creatorName` of `onViewerPhoto`) and a link to the image on Mapillary itself; the images
+     * are CC BY-SA.
+     */
+    hideAttribution?: boolean;
 };
-export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, }: MapillaryPanelProps) => import("react").JSX.Element;
+export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, }: MapillaryPanelProps) => import("react").JSX.Element;
 export {};

package/dist/panels/PanoramaxPanel.d.ts

@@ -6,6 +6,13 @@ type PanoramaxPanelProps = {
     groupPhotos: NormalizedPhoto[];
     onPhotoSelected: (selection: StreetImageryPhotoSelection) => void;
     onEaseMapToPoint: (lng: number, lat: number) => void;
+    /** The shown picture with creator, licence, local capture time and camera. */
+    onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /**
+     * Hide the viewer's own legend (a bottom drawer in narrow containers). The host must then show
+     * creator and licence itself, from `onViewerPhoto`.
+     */
+    hideLegend?: boolean;
 };
-export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, }: PanoramaxPanelProps) => import("react").JSX.Element;
+export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, hideLegend, }: PanoramaxPanelProps) => import("react").JSX.Element;
 export {};

package/dist/panels/mapillaryLookAt.d.ts

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

package/dist/panels/panoramaxLimitPanning.d.ts

@@ -0,0 +1,54 @@
+/** The parts of Photo Sphere Viewer (inside the Panoramax viewer) that limiting the view needs. */
+export type PsvForPanLimit = {
+    state: {
+        hFov: number;
+        vFov: number;
+        textureData?: {
+            panoData?: {
+                baseData?: {
+                    fullWidth: number;
+                    fullHeight: number;
+                    croppedWidth: number;
+                    croppedHeight: number;
+                    croppedX: number;
+                    croppedY: number;
+                };
+            };
+        };
+    };
+    dataHelper: {
+        fovToZoomLevel(fov: number): number;
+    };
+    getZoomLevel(): number;
+    zoom(level: number): void;
+    getPosition(): {
+        yaw: number;
+        pitch: number;
+    };
+    rotate(position: {
+        yaw: number;
+        pitch: number;
+    }): void;
+    addEventListener(type: string, listener: (event: Event) => void): void;
+    removeEventListener(type: string, listener: (event: Event) => void): void;
+};
+type ViewPosition = {
+    yaw: number;
+    pitch: number;
+};
+/**
+ * The view position moved back so the image stays in view. Flat photos are shown as a small
+ * patch of a sphere; outside the patch there is only black. 360° photos have no limit.
+ */
+export declare const limitToImage: (psv: PsvForPanLimit, position: ViewPosition) => ViewPosition;
+/**
+ * The widest zoom level for a flat photo: the image with a small margin around it (in the
+ * tighter direction). `null` when there is no limit.
+ */
+export declare const widestZoomLevel: (psv: PsvForPanLimit) => number | null;
+/**
+ * Keep the view inside the image while the user pans and zooms. Returns a function that removes
+ * the listeners again.
+ */
+export declare const limitPanningToImage: (psv: PsvForPanLimit) => (() => void);
+export {};

package/dist/panels/panoramaxPhotoFromMetadata.d.ts

@@ -0,0 +1,8 @@
+import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { PnxPictureMetadata } from './panoramax-photo-viewer.d';
+/**
+ * The shown picture as a photo with everything the Panoramax viewer knows about it: creator,
+ * licence, local capture time, camera. The viewer's own legend holds the same; hosts show it in
+ * their own layout instead.
+ */
+export declare const panoramaxPhotoFromMetadata: (metadata: PnxPictureMetadata) => NormalizedPhoto;

package/dist/photo-details/PhotoDetailsDialog.d.ts

@@ -0,0 +1,21 @@
+import { type NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import { type PhotoDetailsLabels } from './labels';
+export type PhotoDetailsDialogProps = {
+    /** The photo with its `details`, as a viewer's `onViewerPhoto` gives it. */
+    photo: NormalizedPhoto;
+    open: boolean;
+    onClose: () => void;
+    /** Link to the photo on the provider's site, shown at the photo id. */
+    externalUrl?: string;
+    /** Replace single texts; the rest follows the `StreetImageryLocaleProvider`'s language. */
+    labels?: Partial<PhotoDetailsLabels>;
+};
+/**
+ * Everything known about a photo, as a modal: capture, camera, position, source and raw EXIF.
+ * Replaces the providers' own legends (Panoramax's drawer), which do not fit a small viewer box.
+ * A native `<dialog>`: Escape and a click on the backdrop close it.
+ *
+ * Lives in its own entry (`@osm-editor-kit/street-imagery-react/photo-details`), so apps that do
+ * not import it do not bundle it.
+ */
+export declare const PhotoDetailsDialog: ({ photo, open, onClose, externalUrl, labels, }: PhotoDetailsDialogProps) => import("react").JSX.Element;

package/dist/photo-details/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Optional entry: the photo details dialog. Import it from
+ * `@osm-editor-kit/street-imagery-react/photo-details`; apps that do not, do not bundle it.
+ */
+export { PhotoDetailsDialog, type PhotoDetailsDialogProps } from './PhotoDetailsDialog';
+export { PHOTO_DETAILS_LABELS, type PhotoDetailsLabels } from './labels';

package/dist/photo-details/labels.d.ts

@@ -0,0 +1,33 @@
+import type { StreetImageryLocale } from '@osm-editor-kit/street-imagery';
+/** Texts of the photo details dialog and of the button that opens it. */
+export type PhotoDetailsLabels = {
+    open: string;
+    title: string;
+    close: string;
+    sectionCapture: string;
+    sectionCamera: string;
+    sectionPosition: string;
+    sectionSource: string;
+    creator: string;
+    contact: string;
+    capturedAt: string;
+    uploadedAt: string;
+    license: string;
+    type: string;
+    pano: string;
+    flat: string;
+    camera: string;
+    focalLength: string;
+    fieldOfView: string;
+    coordinates: string;
+    heading: string;
+    accuracy: string;
+    provider: string;
+    instance: string;
+    photoId: string;
+    sequence: string;
+    rankInSequence: string;
+    file: string;
+    exif: (count: number) => string;
+};
+export declare const PHOTO_DETAILS_LABELS: Record<StreetImageryLocale, PhotoDetailsLabels>;

package/dist/photo-details.js

@@ -0,0 +1,235 @@
+import { useStreetImageryI18n } from './chunk-HA4GJWHI.js';
+import { providerById, formatLocalDateTime, formatDate, formatRelativeDate } from '@osm-editor-kit/street-imagery';
+import { useRef, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/photo-details/labels.ts
+var PHOTO_DETAILS_LABELS = {
+  en: {
+    open: "Details of this photo",
+    title: "Photo details",
+    close: "Close",
+    sectionCapture: "Capture",
+    sectionCamera: "Camera",
+    sectionPosition: "Position",
+    sectionSource: "Source",
+    creator: "Creator",
+    contact: "Contact",
+    capturedAt: "Captured",
+    uploadedAt: "Uploaded",
+    license: "Licence",
+    type: "Type",
+    pano: "360\xB0 panorama",
+    flat: "Flat photo",
+    camera: "Camera",
+    focalLength: "Focal length",
+    fieldOfView: "Field of view",
+    coordinates: "Coordinates",
+    heading: "Heading",
+    accuracy: "Accuracy",
+    provider: "Provider",
+    instance: "Instance",
+    photoId: "Photo ID",
+    sequence: "Sequence",
+    rankInSequence: "Position in sequence",
+    file: "File",
+    exif: (count) => `EXIF (${count} tags)`
+  },
+  de: {
+    open: "Details zu diesem Foto",
+    title: "Fotodetails",
+    close: "Schlie\xDFen",
+    sectionCapture: "Aufnahme",
+    sectionCamera: "Kamera",
+    sectionPosition: "Position",
+    sectionSource: "Quelle",
+    creator: "Urheber:in",
+    contact: "Kontakt",
+    capturedAt: "Aufgenommen",
+    uploadedAt: "Hochgeladen",
+    license: "Lizenz",
+    type: "Typ",
+    pano: "360\xB0-Panorama",
+    flat: "Normales Foto",
+    camera: "Kamera",
+    focalLength: "Brennweite",
+    fieldOfView: "Bildwinkel",
+    coordinates: "Koordinaten",
+    heading: "Blickrichtung",
+    accuracy: "Genauigkeit",
+    provider: "Anbieter",
+    instance: "Instanz",
+    photoId: "Foto-ID",
+    sequence: "Sequenz",
+    rankInSequence: "Position in der Sequenz",
+    file: "Datei",
+    exif: (count) => `EXIF (${count} Eintr\xE4ge)`
+  }
+};
+var formatBytes = (bytes) => bytes >= 1e6 ? `${(bytes / 1e6).toFixed(1)} MB` : `${Math.round(bytes / 1e3)} kB`;
+var LINK_CLASS = "text-zinc-950 underline decoration-zinc-950/30 hover:decoration-zinc-950";
+var Section = ({ title, rows }) => {
+  const filled = rows.filter(([, value]) => value != null && value !== "");
+  if (filled.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "mt-6 first:mt-0", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xs/5 font-semibold tracking-wide text-zinc-500 uppercase", children: title }),
+    /* @__PURE__ */ jsx("dl", { className: "mt-1 grid grid-cols-[minmax(7rem,35%)_1fr] text-sm/6", children: filled.map(([term, value]) => /* @__PURE__ */ jsxs("div", { className: "col-span-2 grid grid-cols-subgrid border-t border-zinc-950/5", children: [
+      /* @__PURE__ */ jsx("dt", { className: "py-2 pr-3 text-zinc-500", children: term }),
+      /* @__PURE__ */ jsx("dd", { className: "min-w-0 py-2 wrap-break-word text-zinc-950", children: value })
+    ] }, term)) })
+  ] });
+};
+var PhotoDetailsDialog = ({
+  photo,
+  open,
+  onClose,
+  externalUrl,
+  labels
+}) => {
+  const { locale } = useStreetImageryI18n();
+  const t = { ...PHOTO_DETAILS_LABELS[locale], ...labels };
+  const dialogRef = useRef(null);
+  useEffect(
+    function syncOpenState() {
+      const dialog = dialogRef.current;
+      if (!dialog) {
+        return;
+      }
+      if (open && !dialog.open) {
+        dialog.showModal();
+        dialog.firstElementChild?.scrollTo({ top: 0 });
+      } else if (!open && dialog.open) {
+        dialog.close();
+      }
+    },
+    [open]
+  );
+  const details = photo.details ?? {};
+  const provider = providerById[photo.providerId];
+  const capturedAt = (details.capturedAtLocal ? formatLocalDateTime(details.capturedAtLocal, locale) : null) ?? (photo.capturedAt != null ? formatDate(photo.capturedAt, locale) : null);
+  const contact = details.creatorContact?.includes("@") ? /* @__PURE__ */ jsx("a", { className: LINK_CLASS, href: `mailto:${details.creatorContact}`, children: details.creatorContact }) : details.creatorContact;
+  const license = details.license && details.licenseUrl ? /* @__PURE__ */ jsx("a", { className: LINK_CLASS, href: details.licenseUrl, rel: "noreferrer", target: "_blank", children: details.license }) : details.license;
+  const photoId = externalUrl ? /* @__PURE__ */ jsx("a", { className: LINK_CLASS, href: externalUrl, rel: "noreferrer", target: "_blank", children: photo.photoId }) : photo.photoId;
+  const exif = Object.entries(details.exif ?? {}).sort(([a], [b]) => a.localeCompare(b));
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      "aria-labelledby": "photo-details-title",
+      className: "m-auto w-full max-w-lg rounded-2xl bg-white p-0 shadow-lg ring-1 ring-zinc-950/10 backdrop:bg-zinc-950/25",
+      ref: dialogRef,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) {
+          onClose();
+        }
+      },
+      onClose,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+        }
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "max-h-[85vh] overflow-y-auto p-6 sm:p-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("h2", { className: "text-base/6 font-semibold text-zinc-950", id: "photo-details-title", children: [
+            t.title,
+            /* @__PURE__ */ jsx("span", { className: "ml-2 font-normal text-zinc-500", children: provider.label })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "-m-1 rounded-md p-1 text-sm/6 font-medium text-zinc-500 hover:bg-zinc-950/5 hover:text-zinc-950",
+              type: "button",
+              onClick: onClose,
+              children: t.close
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+          /* @__PURE__ */ jsx(
+            Section,
+            {
+              rows: [
+                [t.creator, photo.creatorName],
+                [t.contact, contact],
+                [
+                  t.capturedAt,
+                  capturedAt && photo.capturedAt != null ? `${capturedAt} \xB7 ${formatRelativeDate(photo.capturedAt, locale)}` : capturedAt
+                ],
+                [
+                  t.uploadedAt,
+                  details.uploadedAt != null ? formatDate(details.uploadedAt, locale) : null
+                ],
+                [t.license, license]
+              ],
+              title: t.sectionCapture
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Section,
+            {
+              rows: [
+                [t.type, photo.isPano == null ? null : photo.isPano ? t.pano : t.flat],
+                [t.camera, details.camera],
+                [t.focalLength, details.focalLengthMm != null ? `${details.focalLengthMm} mm` : null],
+                [
+                  t.fieldOfView,
+                  details.fieldOfViewDeg != null ? `${Math.round(details.fieldOfViewDeg)}\xB0` : null
+                ]
+              ],
+              title: t.sectionCamera
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Section,
+            {
+              rows: [
+                [t.coordinates, `${photo.lngLat[1].toFixed(6)}, ${photo.lngLat[0].toFixed(6)}`],
+                [t.heading, photo.heading != null ? `${Math.round(photo.heading)}\xB0` : null],
+                [
+                  t.accuracy,
+                  details.positionAccuracyMeters != null ? `\xB1 ${details.positionAccuracyMeters} m` : null
+                ]
+              ],
+              title: t.sectionPosition
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Section,
+            {
+              rows: [
+                [t.provider, provider.label],
+                [t.instance, details.instance],
+                [t.photoId, photoId],
+                [t.sequence, photo.sequenceId],
+                [t.rankInSequence, details.rankInSequence],
+                [
+                  t.file,
+                  details.originalFileName ? `${details.originalFileName}${details.originalFileSizeBytes != null ? ` (${formatBytes(details.originalFileSizeBytes)})` : ""}` : null
+                ]
+              ],
+              title: t.sectionSource
+            }
+          ),
+          exif.length > 0 ? /* @__PURE__ */ jsxs("details", { className: "mt-6 border-t border-zinc-950/5 pt-3", children: [
+            /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs/5 font-semibold tracking-wide text-zinc-500 uppercase hover:text-zinc-950", children: t.exif(exif.length) }),
+            /* @__PURE__ */ jsx("dl", { className: "mt-2 grid grid-cols-[minmax(7rem,45%)_1fr] text-xs/5", children: exif.map(([key, value]) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "col-span-2 grid grid-cols-subgrid border-t border-zinc-950/5",
+                children: [
+                  /* @__PURE__ */ jsx("dt", { className: "py-1 pr-3 wrap-break-word text-zinc-500", children: key }),
+                  /* @__PURE__ */ jsx("dd", { className: "min-w-0 py-1 wrap-break-word text-zinc-950", children: value })
+                ]
+              },
+              key
+            )) })
+          ] }) : null
+        ] })
+      ] })
+    }
+  );
+};
+
+export { PHOTO_DETAILS_LABELS, PhotoDetailsDialog };

package/dist/viewpoints/FloatingPhotoViewer.d.ts

@@ -0,0 +1,54 @@
+import type { ViewSuggestion } from '@osm-editor-kit/street-imagery';
+import { type ReactNode } from 'react';
+/** Info button for `titleActions`; `label` is its tooltip and accessible name. */
+export declare const FloatingViewerInfoButton: ({ label, onClick, }: {
+    label: string;
+    onClick: () => void;
+}) => import("react").JSX.Element;
+export type FloatingPhotoViewerProps = {
+    title: ReactNode;
+    /** Buttons right after the title, e.g. `<FloatingViewerInfoButton>` for the photo's details. */
+    titleActions?: ReactNode;
+    /** Suggested views (viewpoint × direction); shown as chips. Empty hides the strip. */
+    suggestions: ViewSuggestion[];
+    activeDirectionKey: string | null;
+    onSelectSuggestion: (suggestion: ViewSuggestion) => void;
+    canGoBack: boolean;
+    canGoForward: boolean;
+    onBack: () => void;
+    onForward: () => void;
+    onClose: () => void;
+    /**
+     * Step to the neighbouring photo, e.g. along the clicked street: the `<` `>` buttons at the
+     * left of the header. A missing handler disables its button.
+     */
+    step?: {
+        onPrevious?: () => void;
+        onNext?: () => void;
+        previousLabel: string;
+        nextLabel: string;
+    };
+    /**
+     * Bar below the header, in place of the suggested-view chips; e.g. the map feature the photos
+     * belong to, with a button per capture day.
+     */
+    toolbar?: ReactNode;
+    /** Short status line, e.g. "Loading…" or "No photos from the last 2 years". */
+    status?: ReactNode;
+    /** Viewer body (provider panel). */
+    children?: ReactNode;
+    footer?: ReactNode;
+    /** Collapsible list below the footer, e.g. other photos near the click. */
+    drawer?: {
+        label: ReactNode;
+        content: ReactNode;
+    };
+    /** localStorage key for position, width and minimized state. */
+    storageKey?: string;
+};
+/**
+ * Photo viewer box floating over the map. Render inside a positioned (relative) map container.
+ * Drag the header to move, drag the left edge to resize. Keys: Esc closes, [ and ] step history,
+ * Alt + arrow left/right step along (`step`).
+ */
+export declare const FloatingPhotoViewer: ({ title, titleActions, suggestions, activeDirectionKey, onSelectSuggestion, canGoBack, canGoForward, onBack, onForward, onClose, step, toolbar, status, children, footer, drawer, storageKey, }: FloatingPhotoViewerProps) => import("react").JSX.Element;

package/dist/viewpoints/ViewpointLayer.d.ts

@@ -0,0 +1,17 @@
+import { type LngLat, type ViewSuggestion, type Viewpoint } from '@osm-editor-kit/street-imagery';
+import type { MapGeoJSONFeature } from 'maplibre-gl';
+/** Add to `interactiveLayerIds` to make view directions clickable; see `viewDirectionKeyFromFeatures`. */
+export declare const VIEWPOINT_DIRECTION_LAYER_ID = "viewpoint-direction-fill";
+export declare const VIEWPOINT_DEFAULT_COLOR = "#c026d3";
+export type ViewpointLayerProps = {
+    viewpoints: Viewpoint[];
+    suggestions: ViewSuggestion[];
+    activeDirectionKey: string | null;
+    zoom: number;
+    /** Clicked line, drawn below the viewpoints. */
+    line?: LngLat[] | null;
+    color?: string;
+};
+export declare const ViewpointLayer: ({ viewpoints, suggestions, activeDirectionKey, zoom, line, color, }: ViewpointLayerProps) => import("react").JSX.Element;
+/** Direction key of the top-most clicked view direction, if any. */
+export declare const viewDirectionKeyFromFeatures: (features: MapGeoJSONFeature[] | undefined) => string | null;

package/dist/viewpoints/useViewSuggestions.d.ts

@@ -0,0 +1,23 @@
+import { type NormalizedPhoto, type PhotoTypeFilter, type ViewSuggestion, type ViewpointPhotoSource, type Viewpoint } from '@osm-editor-kit/street-imagery';
+export type ViewSuggestionsOptions = {
+    /** Only photos from the last N years. */
+    maxAgeYears?: number;
+    photoTypes?: PhotoTypeFilter[];
+    /** Candidates kept per direction. */
+    limit?: number;
+    /** Extra app filter (e.g. date range), applied before ranking. */
+    filterPhoto?: (photo: NormalizedPhoto) => boolean;
+    /**
+     * Where photos come from; default Mapillary. Pass several to rank across providers, e.g.
+     * `[mapillaryPhotoSource, streetViewPhotoSource]` or your own (Infra3D).
+     */
+    sources?: ViewpointPhotoSource[];
+    enabled?: boolean;
+};
+export type ViewSuggestionsResult = {
+    suggestions: ViewSuggestion[];
+    isLoading: boolean;
+    isError: boolean;
+};
+/** Photos near each viewpoint from all `sources`, ranked per view direction. */
+export declare const useViewSuggestions: (viewpoints: Viewpoint[], { maxAgeYears, photoTypes, limit, filterPhoto, sources, enabled, }?: ViewSuggestionsOptions) => ViewSuggestionsResult;

package/dist/viewpoints/useViewpointSessionStore.d.ts

@@ -0,0 +1,32 @@
+import type { LngLat, NormalizedPhoto, Viewpoint } from '@osm-editor-kit/street-imagery';
+export type ViewpointHistoryEntry = {
+    photo: NormalizedPhoto;
+    /** Suggested view the photo came from; `null` for photos picked by hand. */
+    directionKey: string | null;
+};
+type OpenInput = {
+    viewpoints: Viewpoint[];
+    /** Clicked line, drawn as context on the map. */
+    line?: LngLat[] | null;
+};
+export declare const useViewpoints: () => Viewpoint[];
+export declare const useViewpointLine: () => LngLat[] | null;
+export declare const useActiveDirectionKey: () => string | null;
+export declare const useCurrentHistoryEntry: () => ViewpointHistoryEntry;
+export declare const useCanGoBack: () => boolean;
+export declare const useCanGoForward: () => boolean;
+/** Actions + current entry outside React (event handlers, tests). */
+export declare const getViewpointSession: () => {
+    actions: {
+        open: (input: OpenInput) => void;
+        /** Show a photo; truncates forward history. No-op when it is already the current photo. */
+        showPhoto: (entry: ViewpointHistoryEntry) => void;
+        back: () => ViewpointHistoryEntry | null;
+        forward: () => ViewpointHistoryEntry | null;
+        close: () => void;
+        /** Like `close`, and forget the history too: the viewer was closed. */
+        reset: () => void;
+    };
+    current: ViewpointHistoryEntry;
+};
+export {};

package/dist/viewpoints/viewDirectionLabels.d.ts

@@ -0,0 +1,4 @@
+import type { ViewSuggestion } from '@osm-editor-kit/street-imagery';
+import type { StreetImageryMessages } from '../i18n/messages';
+/** Label of a suggested view, e.g. "Start, looking along the street". */
+export declare const viewSuggestionLabel: ({ viewpoint, direction }: ViewSuggestion, messages: StreetImageryMessages) => string;