@osm-editor-kit/street-imagery-react 0.1.0-alpha.12 → 0.1.0-alpha.13

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-panels.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osm-editor-kit/street-imagery-react",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.13",
   "description": "React MapLibre layers and photo viewers for street-level imagery providers.",
   "homepage": "https://github.com/osmberlin/street-space-editor/tree/main/packages/street-imagery-react",
   "license": "MIT",
@@ -48,11 +48,14 @@
     "postpack": "bun ../../scripts/package-exports-restore.ts"
   },
   "devDependencies": {
+    "@babel/core": "^7.29.7",
     "@panoramax/web-viewer": "^5",
     "@tanstack/react-query": "^5.85.5",
+    "@types/babel__core": "^7.20.5",
     "@types/geojson": "^7946.0.16",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "bun-types": "^1.2.20",
     "mapillary-js": "^4.1.2",
     "maplibre-gl": "^6.7.0",
@@ -64,7 +67,7 @@
     "zustand": "^5.0.7"
   },
   "peerDependencies": {
-    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.9",
+    "@osm-editor-kit/street-imagery": "^0.1.0-alpha.10",
     "@panoramax/web-viewer": "^5",
     "@tanstack/react-query": "^5",
     "mapillary-js": "^4",

package/dist/MapillaryPanel-FAXVZH37.js

@@ -1,2 +0,0 @@
-export { MapillaryPanel } from './chunk-SGIB7AVC.js';
-import './chunk-25UGGXIE.js';

package/dist/PanoramaxPanel-TWKTSOXM.js

@@ -1,2 +0,0 @@
-export { PanoramaxPanel } from './chunk-XQXYV6SR.js';
-import './chunk-25UGGXIE.js';