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

package/dist/panoramax-web-viewer.js

@@ -0,0 +1,314 @@
+import { useViewerActions } from './chunk-25UGGXIE.js';
+import '@panoramax/web-viewer';
+import { getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
+import { useRef, useEffectEvent, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/panels/panoramaxLimitPanning.ts
+var toRad = (degrees) => degrees * Math.PI / 180;
+var MIN_VISIBLE_SHARE = 0.3;
+var MIN_IMAGE_SHARE_OF_VIEW = 0.8;
+var keepInView = (centre, imageMin, imageMax, halfView) => {
+  const keep = MIN_VISIBLE_SHARE * Math.min(imageMax - imageMin, 2 * halfView);
+  return Math.max(imageMin - halfView + keep, Math.min(imageMax + halfView - keep, centre));
+};
+var limitToImage = (psv, position) => {
+  const crop = psv.state.textureData?.panoData?.baseData;
+  if (!crop || !crop.fullWidth || !crop.fullHeight) {
+    return position;
+  }
+  const halfH = toRad(psv.state.hFov) / 2;
+  const halfV = toRad(psv.state.vFov) / 2;
+  let { yaw, pitch } = position;
+  if (crop.croppedWidth < crop.fullWidth) {
+    const left = crop.croppedX / crop.fullWidth * 2 * Math.PI - Math.PI;
+    const right = (crop.croppedX + crop.croppedWidth) / crop.fullWidth * 2 * Math.PI - Math.PI;
+    const centred = yaw > Math.PI ? yaw - 2 * Math.PI : yaw;
+    yaw = keepInView(centred, left, right, halfH);
+  }
+  if (crop.croppedHeight < crop.fullHeight) {
+    const top = Math.PI / 2 - crop.croppedY / crop.fullHeight * Math.PI;
+    const bottom = Math.PI / 2 - (crop.croppedY + crop.croppedHeight) / crop.fullHeight * Math.PI;
+    pitch = keepInView(pitch, bottom, top, halfV);
+  }
+  return { yaw, pitch };
+};
+var toDeg = (radians) => radians * 180 / Math.PI;
+var widestZoomLevel = (psv) => {
+  const crop = psv.state.textureData?.panoData?.baseData;
+  if (!crop || !crop.fullWidth || !crop.fullHeight) {
+    return null;
+  }
+  const flatWide = crop.croppedWidth < crop.fullWidth;
+  const flatHigh = crop.croppedHeight < crop.fullHeight;
+  if (!flatWide && !flatHigh) {
+    return null;
+  }
+  const imageV = crop.croppedHeight / crop.fullHeight * 180;
+  const imageH = crop.croppedWidth / crop.fullWidth * 360;
+  const aspect = Math.tan(toRad(psv.state.hFov) / 2) / Math.tan(toRad(psv.state.vFov) / 2);
+  const vForImageWidth = toDeg(2 * Math.atan(Math.tan(toRad(Math.min(imageH, 179)) / 2) / aspect));
+  const widestV = Math.min(flatHigh ? imageV : 180, flatWide ? vForImageWidth : 180);
+  return psv.dataHelper.fovToZoomLevel(Math.min(widestV / MIN_IMAGE_SHARE_OF_VIEW, 179));
+};
+var limitPanningToImage = (psv) => {
+  const onMove = (event) => {
+    const move = event;
+    if (move.position) {
+      move.position = limitToImage(psv, move.position);
+    }
+  };
+  const onZoomOrLoad = () => {
+    const widest = widestZoomLevel(psv);
+    if (widest != null && psv.getZoomLevel() < widest - 0.01) {
+      psv.zoom(widest);
+      return;
+    }
+    const current = psv.getPosition();
+    const limited = limitToImage(psv, current);
+    if (Math.abs(limited.yaw - current.yaw) > 1e-4 || Math.abs(limited.pitch - current.pitch) > 1e-4) {
+      psv.rotate(limited);
+    }
+  };
+  psv.addEventListener("before-rotate", onMove);
+  psv.addEventListener("before-animate", onMove);
+  psv.addEventListener("zoom-updated", onZoomOrLoad);
+  psv.addEventListener("panorama-loaded", onZoomOrLoad);
+  return () => {
+    psv.removeEventListener("before-rotate", onMove);
+    psv.removeEventListener("before-animate", onMove);
+    psv.removeEventListener("zoom-updated", onZoomOrLoad);
+    psv.removeEventListener("panorama-loaded", onZoomOrLoad);
+  };
+};
+
+// src/panels/panoramaxPhotoFromMetadata.ts
+var toMs = (iso) => {
+  const ms = iso ? Date.parse(iso) : Number.NaN;
+  return Number.isNaN(ms) ? null : ms;
+};
+var panoramaxPhotoFromMetadata = (metadata) => {
+  const properties = metadata.properties ?? {};
+  const producers = metadata.caption?.producer ?? [];
+  const creatorName = producers.find((entry) => !entry.includes("@")) ?? producers.at(-1);
+  const creatorContact = producers.find((entry) => entry.includes("@"));
+  const camera = properties["pers:interior_orientation"];
+  const cameraName = [camera?.camera_manufacturer, camera?.camera_model].filter(Boolean).join(" ");
+  const crop = metadata.panorama?.cropData;
+  const isFlat = crop?.croppedWidth != null && crop.fullWidth != null && crop.croppedWidth < crop.fullWidth;
+  const uploadedAt = toMs(properties.created);
+  const exifEntries = Object.entries(properties.exif ?? {}).filter(([, value]) => typeof value === "string" || typeof value === "number").map(([key, value]) => [key, String(value)]);
+  const exif = exifEntries.length > 0 ? Object.fromEntries(exifEntries) : null;
+  const details = {
+    ...creatorContact && creatorContact !== creatorName ? { creatorContact } : {},
+    ...properties.license ? { license: properties.license } : {},
+    ...metadata.origLinks?.find((link) => link.rel === "license")?.href ? { licenseUrl: metadata.origLinks.find((link) => link.rel === "license")?.href } : {},
+    ...properties.datetimetz ? { capturedAtLocal: properties.datetimetz } : {},
+    ...uploadedAt != null ? { uploadedAt } : {},
+    ...cameraName ? { camera: cameraName } : {},
+    ...isFlat && metadata.horizontalFov ? { fieldOfViewDeg: metadata.horizontalFov } : {},
+    ...properties["quality:horizontal_accuracy"] != null ? { positionAccuracyMeters: properties["quality:horizontal_accuracy"] } : {},
+    ...metadata.origInstance?.instance_name ? { instance: metadata.origInstance.instance_name } : {},
+    ...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"] } : {},
+    ...exif ? { exif } : {}
+  };
+  return {
+    providerId: "panoramax",
+    photoId: metadata.id,
+    sequenceId: metadata.sequence?.id ?? null,
+    capturedAt: toMs(properties.datetime),
+    isPano: !isFlat,
+    heading: properties["view:azimuth"] ?? null,
+    lngLat: metadata.gps,
+    ...creatorName ? { creatorName } : {},
+    details
+  };
+};
+var panoramaxApiEndpoint = () => `${getStreetImageryConfig().panoramaxApiBase}/api`;
+var HIDE_LEGEND_CSS = "pnx-photo-viewer pnx-bottom-drawer, pnx-photo-viewer pnx-picture-legend { display: none !important; }";
+var normalizeBearing = (degrees) => (degrees % 360 + 360) % 360;
+var PanoramaxWebViewerPanel = ({
+  photo,
+  onPhotoSelected,
+  onEaseMapToPoint,
+  onViewerPhoto,
+  hideLegend: hideLegendProp = false,
+  hideAttribution = false
+}) => {
+  const hideLegend = hideLegendProp || hideAttribution;
+  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();
+  const emitViewerPhoto = useEffectEvent(
+    (viewerPhoto) => onViewerPhoto?.(viewerPhoto)
+  );
+  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;
+        const metadata = viewer.psv?.getPictureMetadata();
+        if (metadata) {
+          emitViewerPhoto(panoramaxPhotoFromMetadata(metadata));
+        }
+        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);
+      let stopLimit = null;
+      const startLimit = () => {
+        if (!stopLimit && viewer.psv) {
+          stopLimit = limitPanningToImage(viewer.psv);
+        }
+      };
+      startLimit();
+      viewer.addEventListener("psv:picture-loaded", startLimit);
+      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);
+        viewer.removeEventListener("psv:picture-loaded", startLimit);
+        stopLimit?.();
+      };
+    },
+    [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__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
+      style: { aspectRatio: "4 / 3" },
+      children: [
+        hideLegend ? /* @__PURE__ */ jsx("style", { children: HIDE_LEGEND_CSS }) : null,
+        /* @__PURE__ */ jsx(
+          "pnx-photo-viewer",
+          {
+            ref: viewerRef,
+            className: "block h-full w-full",
+            endpoint: panoramaxApiEndpoint(),
+            "url-parameters": "false",
+            widgets: hideLegend ? "false" : void 0,
+            picture: photo.photoId,
+            sequence: photo.sequenceId ?? void 0
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { PanoramaxWebViewerPanel };

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-6EMFFIL2.js';
+import { providerById, formatLocalDateTime, formatDate, formatRelativeDate } from '@osm-editor-kit/street-imagery';
+import { useRef, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// 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/streetImageryClick.d.ts

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

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

@@ -0,0 +1,5 @@
+export { MapillaryPanel } from '../panels/MapillaryPanel';
+export { PanoramaxPanel, type PanoramaxPanelProps } from '../panels/PanoramaxPanel';
+export { PanoramaxDataProvider, type PanoramaxDataProviderOptions, } from '../panels/panoramaxDataProvider';
+export { panoramaxPhotoFromItem, type PanoramaxItem } from '../panels/panoramaxItem';
+export { mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo, } from '../panels/mapillaryLookAt';

package/dist/viewer-panels.js

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