@osm-editor-kit/street-imagery-react 0.1.0-alpha.9 → 1.1.0

package/dist/photo-details.js

@@ -1,4 +1,5 @@
-import { useStreetImageryI18n } from './chunk-6EMFFIL2.js';
+import { useStreetImageryI18n } from './chunk-3DFVM6VK.js';
+import { c } from 'react/compiler-runtime';
 import { providerById, formatLocalDateTime, formatDate, formatRelativeDate } from '@osm-editor-kit/street-imagery';
 import { useRef, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -68,168 +69,238 @@ var PHOTO_DETAILS_LABELS = {
 };
 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;
+var Section = (t0) => {
+  const $ = c(16);
+  const {
+    title,
+    rows
+  } = t0;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[0] !== rows || $[1] !== title) {
+    t5 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const filled = rows.filter(_temp);
+      if (filled.length === 0) {
+        t5 = null;
+        break bb0;
+      }
+      t3 = "mt-6 first:mt-0";
+      if ($[7] !== title) {
+        t4 = /* @__PURE__ */ jsx("h3", { className: "text-xs/5 font-semibold tracking-wide text-zinc-500 uppercase", children: title });
+        $[7] = title;
+        $[8] = t4;
+      } else {
+        t4 = $[8];
+      }
+      t1 = "mt-1 grid grid-cols-[minmax(7rem,35%)_1fr] text-sm/6";
+      t2 = filled.map(_temp2);
+    }
+    $[0] = rows;
+    $[1] = title;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+    t3 = $[4];
+    t4 = $[5];
+    t5 = $[6];
+  }
+  if (t5 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel")) {
+    return t5;
+  }
+  let t6;
+  if ($[9] !== t1 || $[10] !== t2) {
+    t6 = /* @__PURE__ */ jsx("dl", { className: t1, children: t2 });
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
   }
-  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)) })
-  ] });
+  let t7;
+  if ($[12] !== t3 || $[13] !== t4 || $[14] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("section", { className: t3, children: [
+      t4,
+      t6
+    ] });
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
 };
-var PhotoDetailsDialog = ({
-  photo,
-  open,
-  onClose,
-  externalUrl,
-  labels
-}) => {
-  const { locale } = useStreetImageryI18n();
-  const t = { ...PHOTO_DETAILS_LABELS[locale], ...labels };
+var PhotoDetailsDialog = (t0) => {
+  const $ = c(19);
+  const {
+    photo,
+    open,
+    onClose,
+    externalUrl,
+    labels
+  } = t0;
+  const {
+    locale
+  } = useStreetImageryI18n();
+  const t = {
+    ...PHOTO_DETAILS_LABELS[locale],
+    ...labels
+  };
   const dialogRef = useRef(null);
-  useEffect(
-    function syncOpenState() {
+  let t1;
+  let t2;
+  if ($[0] !== open) {
+    t1 = 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();
+        dialog.firstElementChild?.scrollTo({
+          top: 0
+        });
+      } else {
+        if (!open && dialog.open) {
+          dialog.close();
+        }
       }
-    },
-    [open]
-  );
-  const details = photo.details ?? {};
+    };
+    t2 = [open];
+    $[0] = open;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== photo.details) {
+    t3 = photo.details ?? {};
+    $[3] = photo.details;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const details = t3;
   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
-        ] })
-      ] })
-    }
-  );
+  let t4;
+  if ($[5] !== details.creatorContact) {
+    t4 = details.creatorContact?.includes("@") ? /* @__PURE__ */ jsx("a", { className: LINK_CLASS, href: `mailto:${details.creatorContact}`, children: details.creatorContact }) : details.creatorContact;
+    $[5] = details.creatorContact;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const contact = t4;
+  let t5;
+  if ($[7] !== details.license || $[8] !== details.licenseUrl) {
+    t5 = details.license && details.licenseUrl ? /* @__PURE__ */ jsx("a", { className: LINK_CLASS, href: details.licenseUrl, rel: "noreferrer", target: "_blank", children: details.license }) : details.license;
+    $[7] = details.license;
+    $[8] = details.licenseUrl;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  const license = t5;
+  let t6;
+  if ($[10] !== externalUrl || $[11] !== photo.photoId) {
+    t6 = externalUrl ? /* @__PURE__ */ jsx("a", { className: LINK_CLASS, href: externalUrl, rel: "noreferrer", target: "_blank", children: photo.photoId }) : photo.photoId;
+    $[10] = externalUrl;
+    $[11] = photo.photoId;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  const photoId = t6;
+  let t7;
+  if ($[13] !== details.exif) {
+    t7 = details.exif ?? {};
+    $[13] = details.exif;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  const exif = Object.entries(t7).sort(_temp3);
+  let t8;
+  if ($[15] !== onClose) {
+    t8 = (event) => {
+      if (event.target === event.currentTarget) {
+        onClose();
+      }
+    };
+    $[15] = onClose;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] !== provider.label) {
+    t9 = /* @__PURE__ */ jsx("span", { className: "ml-2 font-normal text-zinc-500", children: provider.label });
+    $[17] = provider.label;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  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: t8, onClose, onKeyDown: _temp4, 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,
+        t9
+      ] }),
+      /* @__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(_temp5) })
+      ] }) : null
+    ] })
+  ] }) });
 };
+function _temp(t0) {
+  const [, value] = t0;
+  return value != null && value !== "";
+}
+function _temp2(t0) {
+  const [term, value_0] = t0;
+  return /* @__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_0 })
+  ] }, term);
+}
+function _temp3(t0, t1) {
+  const [a] = t0;
+  const [b] = t1;
+  return a.localeCompare(b);
+}
+function _temp4(event_0) {
+  if (event_0.key === "Escape") {
+    event_0.stopPropagation();
+  }
+}
+function _temp5(t0) {
+  const [key, value] = t0;
+  return /* @__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);
+}
 
 export { PHOTO_DETAILS_LABELS, PhotoDetailsDialog };

package/dist/viewer/index.d.ts

@@ -0,0 +1 @@
+export { StreetLevelImageryViewer } from '../StreetLevelImageryViewer';

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

@@ -1,3 +1,5 @@
 export { MapillaryPanel } from '../panels/MapillaryPanel';
-export { PanoramaxPanel } from '../panels/PanoramaxPanel';
+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

@@ -1,3 +1,4 @@
-export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-SGIB7AVC.js';
-export { PanoramaxPanel } from './chunk-KZTMKQT5.js';
-import './chunk-25UGGXIE.js';
+export { MapillaryPanel, mapillaryViewFor, setMapillaryViewerOutlines, turnMapillaryViewerTo } from './chunk-LZR5SZDS.js';
+export { PanoramaxDataProvider, PanoramaxPanel, panoramaxPhotoFromItem } from './chunk-R6BDVYWM.js';
+import './chunk-XLBFXACK.js';
+import './chunk-GYUS2JVV.js';

package/dist/viewer.js

@@ -0,0 +1,98 @@
+import { useStreetImageryI18n } from './chunk-3DFVM6VK.js';
+import { c } from 'react/compiler-runtime';
+import { lazy, Suspense } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var MapillaryPanel = lazy(() => import('./MapillaryPanel-SOHGB7JA.js').then((module) => ({
+  default: module.MapillaryPanel
+})));
+var PanoramaxPanel = lazy(() => import('./PanoramaxPanel-5P5LWMRY.js').then((module) => ({
+  default: module.PanoramaxPanel
+})));
+var ViewerPanelPlaceholder = () => {
+  const $ = c(2);
+  const {
+    messages
+  } = useStreetImageryI18n();
+  let t0;
+  if ($[0] !== messages.viewer.loading) {
+    t0 = /* @__PURE__ */ jsx("div", { className: "flex min-h-48 animate-pulse items-center justify-center rounded-lg border border-slate-200 bg-slate-100", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: messages.viewer.loading }) });
+    $[0] = messages.viewer.loading;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+var StreetLevelImageryViewer = (t0) => {
+  const $ = c(22);
+  const {
+    photo,
+    groupPhotos,
+    onPhotoSelected,
+    onEaseMapToPoint,
+    onViewerPhoto,
+    onViewerView,
+    lookAtBearing,
+    lookAt,
+    outlines,
+    hideAttribution,
+    panoramaxPanel: PanoramaxPanelOverride
+  } = t0;
+  if (photo.providerId === "mapillary") {
+    let t1;
+    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {});
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    let t2;
+    if ($[1] !== groupPhotos || $[2] !== hideAttribution || $[3] !== lookAt || $[4] !== lookAtBearing || $[5] !== onEaseMapToPoint || $[6] !== onPhotoSelected || $[7] !== onViewerPhoto || $[8] !== onViewerView || $[9] !== outlines || $[10] !== photo) {
+      t2 = /* @__PURE__ */ jsx(Suspense, { fallback: t1, children: /* @__PURE__ */ jsx(MapillaryPanel, { groupPhotos, hideAttribution, onEaseMapToPoint, onPhotoSelected, lookAt, lookAtBearing, outlines, onViewerPhoto, onViewerView, photo }) });
+      $[1] = groupPhotos;
+      $[2] = hideAttribution;
+      $[3] = lookAt;
+      $[4] = lookAtBearing;
+      $[5] = onEaseMapToPoint;
+      $[6] = onPhotoSelected;
+      $[7] = onViewerPhoto;
+      $[8] = onViewerView;
+      $[9] = outlines;
+      $[10] = photo;
+      $[11] = t2;
+    } else {
+      t2 = $[11];
+    }
+    return t2;
+  }
+  if (photo.providerId === "panoramax") {
+    const Panel = PanoramaxPanelOverride ?? PanoramaxPanel;
+    let t1;
+    if ($[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {});
+      $[12] = t1;
+    } else {
+      t1 = $[12];
+    }
+    let t2;
+    if ($[13] !== Panel || $[14] !== groupPhotos || $[15] !== hideAttribution || $[16] !== onEaseMapToPoint || $[17] !== onPhotoSelected || $[18] !== onViewerPhoto || $[19] !== onViewerView || $[20] !== photo) {
+      t2 = /* @__PURE__ */ jsx(Suspense, { fallback: t1, children: /* @__PURE__ */ jsx(Panel, { groupPhotos, hideAttribution, onViewerPhoto, onViewerView, onEaseMapToPoint, onPhotoSelected, photo }) });
+      $[13] = Panel;
+      $[14] = groupPhotos;
+      $[15] = hideAttribution;
+      $[16] = onEaseMapToPoint;
+      $[17] = onPhotoSelected;
+      $[18] = onViewerPhoto;
+      $[19] = onViewerView;
+      $[20] = photo;
+      $[21] = t2;
+    } else {
+      t2 = $[21];
+    }
+    return t2;
+  }
+  return null;
+};
+
+export { StreetLevelImageryViewer };

package/dist/viewpoints/FloatingPhotoViewer.d.ts

@@ -7,16 +7,19 @@ export declare const FloatingViewerInfoButton: ({ label, onClick, }: {
 }) => import("react").JSX.Element;
 export type FloatingPhotoViewerProps = {
     title: ReactNode;
-    /** Buttons right after the title, e.g. `<FloatingViewerInfoButton>` for the photo's details. */
+    /**
+     * Buttons or links right after the title, e.g. `<FloatingViewerInfoButton>` for the photo's
+     * details. They keep their size; a long title gives way.
+     */
     titleActions?: ReactNode;
-    /** Suggested views (viewpoint × direction); shown as chips. Empty hides the strip. */
-    suggestions: ViewSuggestion[];
-    activeDirectionKey: string | null;
+    /** Suggested views (viewpoint × direction); shown as chips. Empty or left out hides the strip. */
+    suggestions?: ViewSuggestion[];
+    activeDirectionKey?: string | null;
     /**
      * A view button was clicked. `candidate` is the photo to show: the view's best one, or the next
      * one when the active view is clicked again.
      */
-    onSelectSuggestion: (suggestion: ViewSuggestion, candidate: PhotoCandidate) => void;
+    onSelectSuggestion?: (suggestion: ViewSuggestion, candidate: PhotoCandidate) => void;
     /** The photo in the viewer, so the active view can show which of its photos that is. */
     shownPhotoId?: string | null;
     /**
@@ -64,10 +67,22 @@ export type FloatingPhotoViewerProps = {
         left?: number;
         top?: number;
     };
+    /**
+     * What the box moves in: its positioned parent (`absolute`, default), or the viewport (`fixed`),
+     * for a box over the whole page. A `fixed` box needs an ancestor without `transform` or `filter`.
+     */
+    position?: 'absolute' | 'fixed';
+    /**
+     * Lets the box leave its container until only this share (0–1) of its width and height shows,
+     * like a free window; never over the top, where the header is. It also stays that way when the
+     * container or the box changes size. Without it the box keeps 8px from the right and bottom edge.
+     */
+    minVisibleShare?: number;
 };
 /**
- * Photo viewer box floating over the map. Render inside a positioned (relative) map container.
+ * Photo viewer box floating over the map. Render inside a positioned (relative) map container,
+ * or anywhere with `position="fixed"`.
  * 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, shownPhotoId, canGoBack, canGoForward, onBack, onForward, onClose, step, toolbar, status, children, footer, drawer, storageKey, defaultPosition, }: FloatingPhotoViewerProps) => import("react").JSX.Element;
+export declare const FloatingPhotoViewer: ({ title, titleActions, suggestions, activeDirectionKey, onSelectSuggestion, shownPhotoId, canGoBack, canGoForward, onBack, onForward, onClose, step, toolbar, status, children, footer, drawer, storageKey, defaultPosition, position, minVisibleShare, }: FloatingPhotoViewerProps) => import("react").JSX.Element;

package/dist/viewpoints/floatingViewerPosition.d.ts

@@ -0,0 +1,18 @@
+type Size = {
+    width: number;
+    height: number;
+};
+/** Offset of the box from the right and bottom edge of its container. */
+export type FloatingViewerPosition = {
+    right: number;
+    bottom: number;
+};
+/** Distance the box keeps from the right and bottom edge without `minVisibleShare`. */
+export declare const FLOATING_VIEWER_EDGE = 8;
+/**
+ * Keeps the box in its container. With `minVisibleShare` (0–1) it may leave the container until
+ * only that share of its width and height shows, but never over the top: the header up there is
+ * what moves it, so the top limit wins when the box is taller than the container.
+ */
+export declare const clampFloatingViewerPosition: ({ right, bottom }: FloatingViewerPosition, box: Size, container: Size, minVisibleShare?: number) => FloatingViewerPosition;
+export {};

package/dist/viewpoints/usePhotosLookingAt.d.ts

@@ -0,0 +1,26 @@
+import { type LngLat, type NormalizedPhoto, type PhotoLookingAt, type PhotoTypeFilter, type ViewpointPhotoSource } from '@osm-editor-kit/street-imagery';
+export type PhotosLookingAtOptions = {
+    /** Only photos from the last N years. */
+    maxAgeYears?: number;
+    photoTypes?: PhotoTypeFilter[];
+    /** Default 50; a source may not reach further (the Mapillary radius search ends at 50 m). */
+    maxDistanceMeters?: number;
+    /** A flat photo's heading must point within this many degrees of the place. Default 35. */
+    maxFlatAngleDeg?: number;
+    /** Candidates kept. Default 20. */
+    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. */
+    sources?: ViewpointPhotoSource[];
+    /** Set after the click; nothing is requested before. */
+    enabled?: boolean;
+};
+export type PhotosLookingAtResult = {
+    /** Best first. */
+    candidates: PhotoLookingAt[];
+    isLoading: boolean;
+    isError: boolean;
+};
+/** The photos from all `sources` that see `place`, best first; `null` while there is no place. */
+export declare const usePhotosLookingAt: (place: LngLat | null, { maxAgeYears, photoTypes, maxDistanceMeters, maxFlatAngleDeg, limit, filterPhoto, sources, enabled, }?: PhotosLookingAtOptions) => PhotosLookingAtResult;