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

package/dist/index.js

@@ -2,7 +2,7 @@ import { useStreetImageryI18n } from './chunk-3DFVM6VK.js';
 export { STREET_IMAGERY_MESSAGES, StreetImageryLocaleProvider, useStreetImageryI18n } from './chunk-3DFVM6VK.js';
 export { useViewerActions, useViewerBearing, useViewerHfov, useViewerLngLat } from './chunk-GYUS2JVV.js';
 import { c } from 'react/compiler-runtime';
-import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, fetchedSequencesMinZoom, viewShapeRadiusMeters, viewConeGeoJson, viewfieldLayerId, photoLayerId, photoTargetLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoFilter, photoFullUrlQueryKey, photoThumbnailQueryKey, formatLocalDateTime, formatRelativeDate, formatDateTooltip, formatMonth, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, SIGN_TARGET, bestTargetImage, MAP_FEATURE_COLOR, mapillaryValueName, mapillaryIconUrl, dateRangeToSliderPositions, sliderPositionsToDateRange, dateSliderBins, dateSliderPosition, yearsAgoMs, parseIsoDateStartMs, findLocationOpener, formatDate, isIsoDate, alignLineToPoints, setStreetImageryConfig, fetchImageDetections, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, resolvePhotoPanoramaUrl, resolvePhotoThumbnailUrl, coneRadiusMeters, openLocationInNewTab, buildMapFeatureLayerFilter, featureSourceId, viewfieldZoomStep, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceTilesSourceId, renameExpressionProperties, sequenceTilesLayerId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, emptyPointCollection, mapFeaturesToFeatureCollection, VIEWFIELD_MIN_ZOOM, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection, bboxIntersects } from '@osm-editor-kit/street-imagery';
+import { distanceMeters, sequencesToFeatureCollection, emptyLineCollection, adapterById, providerById, providerCoversBbox, fetchedSequencesMinZoom, viewShapeRadiusMeters, viewConeGeoJson, viewfieldLayerId, photoLayerId, photoTargetLayerId, featureLayerId, PROVIDER_IDS, mapFeatureMatchesDateRange, isBrowserAvailableProvider, photoFilter, photoFullUrlQueryKey, photoThumbnailQueryKey, formatLocalDateTime, formatRelativeDate, formatDateTooltip, formatMonth, mapillaryPhotoSource, buildViewSuggestions, yearsToMs, rankPhotosLookingAt, SIGN_TARGET, bestTargetImage, MAP_FEATURE_COLOR, mapillaryValueName, mapillaryIconUrl, dateRangeToSliderPositions, sliderPositionsToDateRange, dateSliderBins, dateSliderPosition, yearsAgoMs, parseIsoDateStartMs, findLocationOpener, formatDate, isIsoDate, alignLineToPoints, setStreetImageryConfig, fetchImageDetections, fetchMapFeatureImages, fetchMapillaryMapFeaturesInBbox, bboxAround, resolvePhotoPanoramaUrl, resolvePhotoThumbnailUrl, coneRadiusMeters, openLocationInNewTab, buildMapFeatureLayerFilter, featureSourceId, viewfieldZoomStep, buildPhotoLayerFilter, photoSourceId, viewfieldSourceId, sequenceTilesSourceId, renameExpressionProperties, sequenceTilesLayerId, sequenceSourceId, sequenceLayerId, viewfieldLineLayerId, emptyPointCollection, mapFeaturesToFeatureCollection, VIEWFIELD_MIN_ZOOM, photosToFeatureCollection, photosToViewfieldsFeatureCollection, emptyPolygonCollection, bboxIntersects } from '@osm-editor-kit/street-imagery';
 import { useMap, Source, Layer } from 'react-map-gl/maplibre';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { lazy, useEffect, useSyncExternalStore, useState, useRef, useEffectEvent, Fragment as Fragment$1, Suspense } from 'react';
@@ -1490,10 +1490,10 @@ var StreetLevelImagerySourcesAndLayers = (t0) => {
 function _temp(id) {
   return providerById[id].kind === "photo" && adapterById[id]?.fetchPhotos;
 }
-var MapillaryPanel = lazy(() => import('./MapillaryPanel-FQR4TTEW.js').then((module) => ({
+var MapillaryPanel = lazy(() => import('./MapillaryPanel-SOHGB7JA.js').then((module) => ({
   default: module.MapillaryPanel
 })));
-var PanoramaxPanel = lazy(() => import('./PanoramaxPanel-GO4GSVFE.js').then((module) => ({
+var PanoramaxPanel = lazy(() => import('./PanoramaxPanel-5P5LWMRY.js').then((module) => ({
   default: module.PanoramaxPanel
 })));
 var ViewerPanelPlaceholder = () => {
@@ -1512,13 +1512,14 @@ var ViewerPanelPlaceholder = () => {
   return t0;
 };
 var StreetLevelImageryViewer = (t0) => {
-  const $ = c(20);
+  const $ = c(22);
   const {
     photo,
     groupPhotos,
     onPhotoSelected,
     onEaseMapToPoint,
     onViewerPhoto,
+    onViewerView,
     lookAtBearing,
     lookAt,
     outlines,
@@ -1534,8 +1535,8 @@ var StreetLevelImageryViewer = (t0) => {
       t1 = $[0];
     }
     let t2;
-    if ($[1] !== groupPhotos || $[2] !== hideAttribution || $[3] !== lookAt || $[4] !== lookAtBearing || $[5] !== onEaseMapToPoint || $[6] !== onPhotoSelected || $[7] !== onViewerPhoto || $[8] !== outlines || $[9] !== photo) {
-      t2 = /* @__PURE__ */ jsx(Suspense, { fallback: t1, children: /* @__PURE__ */ jsx(MapillaryPanel, { groupPhotos, hideAttribution, onEaseMapToPoint, onPhotoSelected, lookAt, lookAtBearing, outlines, onViewerPhoto, photo }) });
+    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;
@@ -1543,36 +1544,38 @@ var StreetLevelImageryViewer = (t0) => {
       $[5] = onEaseMapToPoint;
       $[6] = onPhotoSelected;
       $[7] = onViewerPhoto;
-      $[8] = outlines;
-      $[9] = photo;
-      $[10] = t2;
+      $[8] = onViewerView;
+      $[9] = outlines;
+      $[10] = photo;
+      $[11] = t2;
     } else {
-      t2 = $[10];
+      t2 = $[11];
     }
     return t2;
   }
   if (photo.providerId === "panoramax") {
     const Panel = PanoramaxPanelOverride ?? PanoramaxPanel;
     let t1;
-    if ($[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    if ($[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
       t1 = /* @__PURE__ */ jsx(ViewerPanelPlaceholder, {});
-      $[11] = t1;
+      $[12] = t1;
     } else {
-      t1 = $[11];
+      t1 = $[12];
     }
     let t2;
-    if ($[12] !== Panel || $[13] !== groupPhotos || $[14] !== hideAttribution || $[15] !== onEaseMapToPoint || $[16] !== onPhotoSelected || $[17] !== onViewerPhoto || $[18] !== photo) {
-      t2 = /* @__PURE__ */ jsx(Suspense, { fallback: t1, children: /* @__PURE__ */ jsx(Panel, { groupPhotos, hideAttribution, onViewerPhoto, onEaseMapToPoint, onPhotoSelected, photo }) });
-      $[12] = Panel;
-      $[13] = groupPhotos;
-      $[14] = hideAttribution;
-      $[15] = onEaseMapToPoint;
-      $[16] = onPhotoSelected;
-      $[17] = onViewerPhoto;
-      $[18] = photo;
-      $[19] = 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 = $[19];
+      t2 = $[21];
     }
     return t2;
   }
@@ -1929,6 +1932,24 @@ ${formatRelativeDate(timestamp, locale)}` : formatDateTooltip(timestamp, locale)
   return t5;
 };
 
+// src/viewpoints/floatingViewerPosition.ts
+var FLOATING_VIEWER_EDGE = 8;
+var clampFloatingViewerPosition = ({
+  right,
+  bottom
+}, box, container, minVisibleShare) => {
+  if (minVisibleShare === void 0) {
+    return {
+      right: Math.max(FLOATING_VIEWER_EDGE, right),
+      bottom: Math.max(FLOATING_VIEWER_EDGE, bottom)
+    };
+  }
+  return {
+    right: Math.min(container.width - box.width * minVisibleShare, Math.max(-box.width * (1 - minVisibleShare), right)),
+    bottom: Math.min(container.height - box.height, Math.max(-box.height * (1 - minVisibleShare), bottom))
+  };
+};
+
 // src/viewpoints/viewDirectionLabels.ts
 var viewSuggestionLabel = ({
   viewpoint,
@@ -1941,7 +1962,16 @@ var DEFAULT_LAYOUT = {
   minimized: false
 };
 var MIN_WIDTH = 280;
-var EDGE = 8;
+var BUTTON_DRAG_SLOP = 4;
+var EDGE = FLOATING_VIEWER_EDGE;
+var MINIMIZED_WIDTH = "6rem";
+var containerSize = (box, position) => {
+  const container = position === "fixed" ? document.documentElement : box.offsetParent;
+  return {
+    width: container?.clientWidth ?? 0,
+    height: container?.clientHeight ?? 0
+  };
+};
 var hasStoredLayout = (storageKey) => {
   try {
     return localStorage.getItem(storageKey) != null;
@@ -2013,7 +2043,7 @@ var ToolbarButton = (t0) => {
   } = t0;
   let t1;
   if ($[0] !== children || $[1] !== disabled || $[2] !== label || $[3] !== onClick) {
-    t1 = /* @__PURE__ */ jsx("button", { "aria-label": label, className: "inline-flex size-7 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent", disabled, onClick, title: label, type: "button", children });
+    t1 = /* @__PURE__ */ jsx("button", { "aria-label": label, className: "inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent", disabled, onClick, title: label, type: "button", children });
     $[0] = children;
     $[1] = disabled;
     $[2] = label;
@@ -2246,16 +2276,16 @@ var FloatingViewerInfoButton = (t0) => {
   return t2;
 };
 var FloatingPhotoViewer = (t0) => {
-  const $ = c(109);
+  const $ = c(136);
   const {
     title,
     titleActions,
-    suggestions,
+    suggestions: t1,
     activeDirectionKey,
     onSelectSuggestion,
     shownPhotoId,
-    canGoBack: t1,
-    canGoForward: t2,
+    canGoBack: t2,
+    canGoForward: t3,
     onBack,
     onForward,
     onClose,
@@ -2265,70 +2295,99 @@ var FloatingPhotoViewer = (t0) => {
     children,
     footer,
     drawer,
-    storageKey: t3,
-    defaultPosition
+    storageKey: t4,
+    defaultPosition,
+    position: t5,
+    minVisibleShare
   } = t0;
-  const canGoBack = t1 === void 0 ? false : t1;
-  const canGoForward = t2 === void 0 ? false : t2;
-  const storageKey = t3 === void 0 ? "street-imagery:floating-viewer" : t3;
+  let t6;
+  if ($[0] !== t1) {
+    t6 = t1 === void 0 ? [] : t1;
+    $[0] = t1;
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  const suggestions = t6;
+  const canGoBack = t2 === void 0 ? false : t2;
+  const canGoForward = t3 === void 0 ? false : t3;
+  const storageKey = t4 === void 0 ? "street-imagery:floating-viewer" : t4;
+  const position = t5 === void 0 ? "absolute" : t5;
   const {
     messages
   } = useStreetImageryI18n();
   const severalViewpoints = new Set(suggestions.map(_temp3)).size > 1;
-  let t4;
-  if ($[0] !== storageKey) {
-    t4 = () => readLayout(storageKey);
-    $[0] = storageKey;
-    $[1] = t4;
+  let t7;
+  if ($[2] !== storageKey) {
+    t7 = () => readLayout(storageKey);
+    $[2] = storageKey;
+    $[3] = t7;
   } else {
-    t4 = $[1];
+    t7 = $[3];
   }
-  const [layout, setLayout] = useState(t4);
+  const [layout, setLayout] = useState(t7);
   const [drawerOpen, setDrawerOpen] = useState(false);
-  let t5;
-  if ($[2] !== storageKey) {
-    t5 = () => hasStoredLayout(storageKey);
-    $[2] = storageKey;
-    $[3] = t5;
+  let t8;
+  if ($[4] !== storageKey) {
+    t8 = () => hasStoredLayout(storageKey);
+    $[4] = storageKey;
+    $[5] = t8;
   } else {
-    t5 = $[3];
+    t8 = $[5];
   }
-  const [moved, setMoved] = useState(t5);
+  const [moved, setMoved] = useState(t8);
   const atTopLeft = defaultPosition?.corner === "top-left" && !moved;
-  let t6;
-  if ($[4] !== atTopLeft || $[5] !== defaultPosition || $[6] !== layout.bottom || $[7] !== layout.right) {
-    t6 = atTopLeft ? {
+  let t9;
+  if ($[6] !== atTopLeft || $[7] !== defaultPosition || $[8] !== layout.bottom || $[9] !== layout.right) {
+    t9 = atTopLeft ? {
       left: defaultPosition.left ?? EDGE,
       top: defaultPosition.top ?? EDGE
     } : {
       right: layout.right,
       bottom: layout.bottom
     };
-    $[4] = atTopLeft;
-    $[5] = defaultPosition;
-    $[6] = layout.bottom;
-    $[7] = layout.right;
-    $[8] = t6;
+    $[6] = atTopLeft;
+    $[7] = defaultPosition;
+    $[8] = layout.bottom;
+    $[9] = layout.right;
+    $[10] = t9;
   } else {
-    t6 = $[8];
+    t9 = $[10];
   }
-  const position = t6;
+  const placement = t9;
+  let t10;
+  if ($[11] !== atTopLeft || $[12] !== layout.bottom || $[13] !== layout.right || $[14] !== minVisibleShare || $[15] !== placement) {
+    t10 = minVisibleShare === void 0 || atTopLeft ? placement : {
+      right: `clamp(${EDGE}px, ${layout.right}px, calc(100% - ${MINIMIZED_WIDTH}))`,
+      bottom: Math.max(EDGE, layout.bottom)
+    };
+    $[11] = atTopLeft;
+    $[12] = layout.bottom;
+    $[13] = layout.right;
+    $[14] = minVisibleShare;
+    $[15] = placement;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  const minimizedPlacement = t10;
+  const boxRef = useRef(null);
   const dragRef = useRef(null);
-  let t7;
-  if ($[9] !== storageKey) {
-    t7 = (next) => {
+  let t11;
+  if ($[17] !== storageKey) {
+    t11 = (next) => {
       setLayout(next);
       writeLayout(storageKey, next);
     };
-    $[9] = storageKey;
-    $[10] = t7;
+    $[17] = storageKey;
+    $[18] = t11;
   } else {
-    t7 = $[10];
+    t11 = $[18];
   }
-  const updateLayout = t7;
-  let t8;
-  if ($[11] !== canGoBack || $[12] !== canGoForward || $[13] !== onBack || $[14] !== onClose || $[15] !== onForward || $[16] !== step) {
-    t8 = (event) => {
+  const updateLayout = t11;
+  let t12;
+  if ($[19] !== canGoBack || $[20] !== canGoForward || $[21] !== onBack || $[22] !== onClose || $[23] !== onForward || $[24] !== step) {
+    t12 = (event) => {
       const target = event.target;
       if (target instanceof Element && target.closest('input, textarea, select, [contenteditable="true"]')) {
         return;
@@ -2353,382 +2412,492 @@ var FloatingPhotoViewer = (t0) => {
         }
       }
     };
-    $[11] = canGoBack;
-    $[12] = canGoForward;
-    $[13] = onBack;
-    $[14] = onClose;
-    $[15] = onForward;
-    $[16] = step;
-    $[17] = t8;
+    $[19] = canGoBack;
+    $[20] = canGoForward;
+    $[21] = onBack;
+    $[22] = onClose;
+    $[23] = onForward;
+    $[24] = step;
+    $[25] = t12;
   } else {
-    t8 = $[17];
+    t12 = $[25];
   }
-  const onShortcut = useEffectEvent(t8);
-  let t9;
-  if ($[18] !== onShortcut) {
-    t9 = function subscribeKeyboardShortcuts() {
+  const onShortcut = useEffectEvent(t12);
+  let t13;
+  if ($[26] !== onShortcut) {
+    t13 = function subscribeKeyboardShortcuts() {
       window.addEventListener("keydown", onShortcut);
       return () => window.removeEventListener("keydown", onShortcut);
     };
-    $[18] = onShortcut;
-    $[19] = t9;
+    $[26] = onShortcut;
+    $[27] = t13;
   } else {
-    t9 = $[19];
+    t13 = $[27];
   }
-  let t10;
-  if ($[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t10 = [];
-    $[20] = t10;
+  let t14;
+  if ($[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t14 = [];
+    $[28] = t14;
   } else {
-    t10 = $[20];
+    t14 = $[28];
   }
-  useEffect(t9, t10);
-  let t11;
-  if ($[21] !== atTopLeft || $[22] !== layout) {
-    t11 = (event_0, mode) => {
-      if (event_0.button !== 0 || event_0.target.closest("button")) {
+  useEffect(t13, t14);
+  let t15;
+  if ($[29] !== atTopLeft || $[30] !== layout || $[31] !== minVisibleShare || $[32] !== position) {
+    t15 = () => {
+      const box = boxRef.current;
+      if (!box || atTopLeft) {
+        return;
+      }
+      const {
+        right,
+        bottom
+      } = clampFloatingViewerPosition(layout, {
+        width: box.offsetWidth,
+        height: box.offsetHeight
+      }, containerSize(box, position), minVisibleShare);
+      if (right !== layout.right || bottom !== layout.bottom) {
+        setLayout({
+          ...layout,
+          right,
+          bottom
+        });
+      }
+    };
+    $[29] = atTopLeft;
+    $[30] = layout;
+    $[31] = minVisibleShare;
+    $[32] = position;
+    $[33] = t15;
+  } else {
+    t15 = $[33];
+  }
+  const keepOnScreen = useEffectEvent(t15);
+  const isFree = minVisibleShare !== void 0;
+  let t16;
+  if ($[34] !== isFree || $[35] !== keepOnScreen) {
+    t16 = function followBoxAndContainerSize() {
+      const box_0 = boxRef.current;
+      if (!isFree || !box_0) {
+        return;
+      }
+      const observer = new ResizeObserver(() => keepOnScreen());
+      observer.observe(box_0);
+      if (box_0.offsetParent) {
+        observer.observe(box_0.offsetParent);
+      }
+      window.addEventListener("resize", keepOnScreen);
+      return () => {
+        observer.disconnect();
+        window.removeEventListener("resize", keepOnScreen);
+      };
+    };
+    $[34] = isFree;
+    $[35] = keepOnScreen;
+    $[36] = t16;
+  } else {
+    t16 = $[36];
+  }
+  let t17;
+  if ($[37] !== isFree || $[38] !== layout.minimized) {
+    t17 = [isFree, layout.minimized];
+    $[37] = isFree;
+    $[38] = layout.minimized;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+  useEffect(t16, t17);
+  let t18;
+  if ($[40] !== atTopLeft || $[41] !== layout || $[42] !== position) {
+    t18 = (event_0, mode) => {
+      const target_0 = event_0.target;
+      if (event_0.button !== 0 || target_0.closest("a")) {
         return;
       }
-      event_0.currentTarget.setPointerCapture(event_0.pointerId);
-      const box = event_0.currentTarget.closest("section");
-      const container = box?.offsetParent;
-      const start = atTopLeft && box && container ? {
+      const button = target_0.closest("button");
+      const onButton = button !== null;
+      (button ?? event_0.currentTarget).setPointerCapture(event_0.pointerId);
+      const box_1 = boxRef.current;
+      const container = box_1 ? containerSize(box_1, position) : null;
+      const start = atTopLeft && box_1 && container ? {
         ...layout,
-        right: container.clientWidth - box.offsetLeft - box.offsetWidth,
-        bottom: container.clientHeight - box.offsetTop - box.offsetHeight
+        right: container.width - box_1.offsetLeft - box_1.offsetWidth,
+        bottom: container.height - box_1.offsetTop - box_1.offsetHeight
       } : layout;
-      setLayout(start);
-      setMoved(true);
       dragRef.current = {
         x: event_0.clientX,
         y: event_0.clientY,
         layout: start,
-        mode
+        mode,
+        onButton
       };
+      if (!onButton) {
+        setLayout(start);
+        setMoved(true);
+      }
     };
-    $[21] = atTopLeft;
-    $[22] = layout;
-    $[23] = t11;
+    $[40] = atTopLeft;
+    $[41] = layout;
+    $[42] = position;
+    $[43] = t18;
   } else {
-    t11 = $[23];
+    t18 = $[43];
   }
-  const startDrag = t11;
-  let t12;
-  if ($[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t12 = (event_1) => {
+  const startDrag = t18;
+  let t19;
+  if ($[44] !== minVisibleShare || $[45] !== position) {
+    t19 = (event_1) => {
       const drag = dragRef.current;
       if (!drag) {
         return;
       }
       const dx = event_1.clientX - drag.x;
       const dy = event_1.clientY - drag.y;
-      setLayout(drag.mode === "move" ? {
-        ...drag.layout,
-        right: Math.max(EDGE, drag.layout.right - dx),
-        bottom: Math.max(EDGE, drag.layout.bottom - dy)
-      } : {
-        ...drag.layout,
-        width: Math.max(MIN_WIDTH, drag.layout.width - dx)
-      });
+      if (drag.onButton) {
+        if (Math.hypot(dx, dy) < BUTTON_DRAG_SLOP) {
+          return;
+        }
+        event_1.currentTarget.setPointerCapture(event_1.pointerId);
+        drag.onButton = false;
+        setMoved(true);
+      }
+      const box_2 = boxRef.current;
+      if (drag.mode === "resize") {
+        setLayout({
+          ...drag.layout,
+          width: Math.max(MIN_WIDTH, drag.layout.width - dx)
+        });
+      } else {
+        if (box_2) {
+          const next_0 = clampFloatingViewerPosition({
+            right: drag.layout.right - dx,
+            bottom: drag.layout.bottom - dy
+          }, {
+            width: box_2.offsetWidth,
+            height: box_2.offsetHeight
+          }, containerSize(box_2, position), minVisibleShare);
+          setLayout({
+            ...drag.layout,
+            ...next_0
+          });
+        }
+      }
     };
-    $[24] = t12;
+    $[44] = minVisibleShare;
+    $[45] = position;
+    $[46] = t19;
   } else {
-    t12 = $[24];
+    t19 = $[46];
   }
-  const onDrag = t12;
-  let t13;
-  if ($[25] !== layout || $[26] !== storageKey) {
-    t13 = () => {
-      if (dragRef.current) {
-        dragRef.current = null;
+  const onDrag = t19;
+  let t20;
+  if ($[47] !== layout || $[48] !== storageKey) {
+    t20 = () => {
+      const wasDragged = dragRef.current?.onButton === false;
+      dragRef.current = null;
+      if (wasDragged) {
         writeLayout(storageKey, layout);
       }
     };
-    $[25] = layout;
-    $[26] = storageKey;
-    $[27] = t13;
+    $[47] = layout;
+    $[48] = storageKey;
+    $[49] = t20;
   } else {
-    t13 = $[27];
+    t20 = $[49];
   }
-  const endDrag = t13;
-  let t14;
-  if ($[28] !== endDrag) {
-    t14 = {
+  const endDrag = t20;
+  let t21;
+  if ($[50] !== endDrag || $[51] !== onDrag) {
+    t21 = {
       onPointerMove: onDrag,
       onPointerUp: endDrag,
       onPointerCancel: endDrag
     };
-    $[28] = endDrag;
-    $[29] = t14;
+    $[50] = endDrag;
+    $[51] = onDrag;
+    $[52] = t21;
   } else {
-    t14 = $[29];
+    t21 = $[52];
   }
-  const dragHandlers = t14;
+  const dragHandlers = t21;
   if (layout.minimized) {
-    let t152;
-    if ($[30] !== layout || $[31] !== updateLayout) {
-      t152 = () => updateLayout({
+    const t222 = `${position} z-10 inline-flex items-center gap-2 rounded-full bg-white px-3 py-1.5 text-sm font-medium text-slate-800 shadow-lg ring-1 ring-slate-200 hover:bg-slate-50`;
+    let t232;
+    if ($[53] !== layout || $[54] !== updateLayout) {
+      t232 = () => updateLayout({
         ...layout,
         minimized: false
       });
-      $[30] = layout;
-      $[31] = updateLayout;
-      $[32] = t152;
+      $[53] = layout;
+      $[54] = updateLayout;
+      $[55] = t232;
     } else {
-      t152 = $[32];
+      t232 = $[55];
     }
-    let t162;
-    if ($[33] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t162 = /* @__PURE__ */ jsx(Icon, { path: ICONS.expand });
-      $[33] = t162;
+    let t242;
+    if ($[56] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t242 = /* @__PURE__ */ jsx(Icon, { path: ICONS.expand });
+      $[56] = t242;
     } else {
-      t162 = $[33];
+      t242 = $[56];
     }
-    let t172;
-    if ($[34] !== position || $[35] !== t152 || $[36] !== title) {
-      t172 = /* @__PURE__ */ jsxs("button", { className: "absolute z-10 inline-flex items-center gap-2 rounded-full bg-white px-3 py-1.5 text-sm font-medium text-slate-800 shadow-lg ring-1 ring-slate-200 hover:bg-slate-50", onClick: t152, style: position, type: "button", children: [
-        t162,
+    let t252;
+    if ($[57] !== minimizedPlacement || $[58] !== t222 || $[59] !== t232 || $[60] !== title) {
+      t252 = /* @__PURE__ */ jsxs("button", { className: t222, onClick: t232, style: minimizedPlacement, type: "button", children: [
+        t242,
         title
       ] });
-      $[34] = position;
-      $[35] = t152;
-      $[36] = title;
-      $[37] = t172;
+      $[57] = minimizedPlacement;
+      $[58] = t222;
+      $[59] = t232;
+      $[60] = title;
+      $[61] = t252;
     } else {
-      t172 = $[37];
+      t252 = $[61];
     }
-    return t172;
+    return t252;
   }
-  const t15 = `min(${layout.width}px, calc(100% - 1rem))`;
-  let t16;
-  if ($[38] !== position || $[39] !== t15) {
-    t16 = {
-      ...position,
-      width: t15
+  const t22 = `${position} z-10 flex max-h-[calc(100%-1rem)] flex-col overflow-hidden rounded-xl bg-white shadow-xl ring-1 ring-slate-200`;
+  const t23 = `min(${layout.width}px, calc(100% - 1rem))`;
+  let t24;
+  if ($[62] !== placement || $[63] !== t23) {
+    t24 = {
+      ...placement,
+      width: t23
     };
-    $[38] = position;
-    $[39] = t15;
-    $[40] = t16;
+    $[62] = placement;
+    $[63] = t23;
+    $[64] = t24;
   } else {
-    t16 = $[40];
+    t24 = $[64];
   }
-  let t17;
-  if ($[41] !== startDrag) {
-    t17 = (event_2) => startDrag(event_2, "resize");
-    $[41] = startDrag;
-    $[42] = t17;
+  let t25;
+  if ($[65] !== startDrag) {
+    t25 = (event_2) => startDrag(event_2, "resize");
+    $[65] = startDrag;
+    $[66] = t25;
   } else {
-    t17 = $[42];
+    t25 = $[66];
   }
-  let t18;
-  if ($[43] !== dragHandlers || $[44] !== t17) {
-    t18 = /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 left-0 z-10 w-1.5 cursor-ew-resize hover:bg-fuchsia-500/20", onPointerDown: t17, ...dragHandlers });
-    $[43] = dragHandlers;
-    $[44] = t17;
-    $[45] = t18;
+  let t26;
+  if ($[67] !== dragHandlers || $[68] !== t25) {
+    t26 = /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 left-0 z-10 w-1.5 cursor-ew-resize hover:bg-fuchsia-500/20", onPointerDown: t25, ...dragHandlers });
+    $[67] = dragHandlers;
+    $[68] = t25;
+    $[69] = t26;
   } else {
-    t18 = $[45];
+    t26 = $[69];
   }
-  let t19;
-  if ($[46] !== startDrag) {
-    t19 = (event_3) => startDrag(event_3, "move");
-    $[46] = startDrag;
-    $[47] = t19;
+  let t27;
+  if ($[70] !== startDrag) {
+    t27 = (event_3) => startDrag(event_3, "move");
+    $[70] = startDrag;
+    $[71] = t27;
   } else {
-    t19 = $[47];
+    t27 = $[71];
   }
-  let t20;
-  if ($[48] !== step) {
-    t20 = step ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  let t28;
+  if ($[72] !== step) {
+    t28 = step ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ToolbarButton, { disabled: !step.onPrevious, label: step.previousLabel, onClick: () => step.onPrevious?.(), children: /* @__PURE__ */ jsx(Icon, { path: ICONS.back }) }),
       /* @__PURE__ */ jsx(ToolbarButton, { disabled: !step.onNext, label: step.nextLabel, onClick: () => step.onNext?.(), children: /* @__PURE__ */ jsx(Icon, { path: ICONS.forward }) })
     ] }) : null;
-    $[48] = step;
-    $[49] = t20;
+    $[72] = step;
+    $[73] = t28;
   } else {
-    t20 = $[49];
+    t28 = $[73];
   }
-  let t21;
-  if ($[50] !== title) {
-    t21 = /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate px-1 text-sm font-semibold text-slate-800", children: title });
-    $[50] = title;
-    $[51] = t21;
+  let t29;
+  if ($[74] !== title) {
+    t29 = /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate px-1 text-sm font-semibold text-slate-800", children: title });
+    $[74] = title;
+    $[75] = t29;
   } else {
-    t21 = $[51];
+    t29 = $[75];
   }
-  let t22;
-  if ($[52] !== t21 || $[53] !== titleActions) {
-    t22 = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-0.5", children: [
-      t21,
-      titleActions
+  let t30;
+  if ($[76] !== titleActions) {
+    t30 = titleActions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-0.5", children: titleActions }) : null;
+    $[76] = titleActions;
+    $[77] = t30;
+  } else {
+    t30 = $[77];
+  }
+  let t31;
+  if ($[78] !== t29 || $[79] !== t30) {
+    t31 = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-0.5", children: [
+      t29,
+      t30
     ] });
-    $[52] = t21;
-    $[53] = titleActions;
-    $[54] = t22;
+    $[78] = t29;
+    $[79] = t30;
+    $[80] = t31;
   } else {
-    t22 = $[54];
+    t31 = $[80];
   }
-  let t23;
-  if ($[55] !== canGoBack || $[56] !== canGoForward || $[57] !== messages.viewer.backInHistory || $[58] !== messages.viewer.forwardInHistory || $[59] !== onBack || $[60] !== onForward) {
-    t23 = onBack && onForward ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  let t32;
+  if ($[81] !== canGoBack || $[82] !== canGoForward || $[83] !== messages.viewer.backInHistory || $[84] !== messages.viewer.forwardInHistory || $[85] !== onBack || $[86] !== onForward) {
+    t32 = onBack && onForward ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ToolbarButton, { disabled: !canGoBack, label: messages.viewer.backInHistory, onClick: onBack, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.undo }) }),
       /* @__PURE__ */ jsx(ToolbarButton, { disabled: !canGoForward, label: messages.viewer.forwardInHistory, onClick: onForward, children: /* @__PURE__ */ jsx(Icon, { path: ICONS.redo }) })
     ] }) : null;
-    $[55] = canGoBack;
-    $[56] = canGoForward;
-    $[57] = messages.viewer.backInHistory;
-    $[58] = messages.viewer.forwardInHistory;
-    $[59] = onBack;
-    $[60] = onForward;
-    $[61] = t23;
+    $[81] = canGoBack;
+    $[82] = canGoForward;
+    $[83] = messages.viewer.backInHistory;
+    $[84] = messages.viewer.forwardInHistory;
+    $[85] = onBack;
+    $[86] = onForward;
+    $[87] = t32;
   } else {
-    t23 = $[61];
+    t32 = $[87];
   }
-  let t24;
-  if ($[62] !== layout || $[63] !== updateLayout) {
-    t24 = () => updateLayout({
+  let t33;
+  if ($[88] !== layout || $[89] !== updateLayout) {
+    t33 = () => updateLayout({
       ...layout,
       minimized: true
     });
-    $[62] = layout;
-    $[63] = updateLayout;
-    $[64] = t24;
-  } else {
-    t24 = $[64];
-  }
-  let t25;
-  if ($[65] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t25 = /* @__PURE__ */ jsx(Icon, { path: ICONS.minimize });
-    $[65] = t25;
+    $[88] = layout;
+    $[89] = updateLayout;
+    $[90] = t33;
   } else {
-    t25 = $[65];
+    t33 = $[90];
   }
-  let t26;
-  if ($[66] !== messages.viewer.minimize || $[67] !== t24) {
-    t26 = /* @__PURE__ */ jsx(ToolbarButton, { label: messages.viewer.minimize, onClick: t24, children: t25 });
-    $[66] = messages.viewer.minimize;
-    $[67] = t24;
-    $[68] = t26;
-  } else {
-    t26 = $[68];
-  }
-  let t27;
-  if ($[69] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t27 = /* @__PURE__ */ jsx(Icon, { path: ICONS.close });
-    $[69] = t27;
-  } else {
-    t27 = $[69];
-  }
-  let t28;
-  if ($[70] !== messages.viewer.close || $[71] !== onClose) {
-    t28 = /* @__PURE__ */ jsx(ToolbarButton, { label: messages.viewer.close, onClick: onClose, children: t27 });
-    $[70] = messages.viewer.close;
-    $[71] = onClose;
-    $[72] = t28;
+  let t34;
+  if ($[91] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t34 = /* @__PURE__ */ jsx(Icon, { path: ICONS.minimize });
+    $[91] = t34;
   } else {
-    t28 = $[72];
+    t34 = $[91];
   }
-  let t29;
-  if ($[73] !== dragHandlers || $[74] !== t19 || $[75] !== t20 || $[76] !== t22 || $[77] !== t23 || $[78] !== t26 || $[79] !== t28) {
-    t29 = /* @__PURE__ */ jsxs("header", { className: "flex cursor-move touch-none items-center gap-1 border-b border-slate-100 px-2 py-1.5 select-none", onPointerDown: t19, ...dragHandlers, children: [
-      t20,
-      t22,
-      t23,
-      t26,
-      t28
+  let t35;
+  if ($[92] !== messages.viewer.minimize || $[93] !== t33) {
+    t35 = /* @__PURE__ */ jsx(ToolbarButton, { label: messages.viewer.minimize, onClick: t33, children: t34 });
+    $[92] = messages.viewer.minimize;
+    $[93] = t33;
+    $[94] = t35;
+  } else {
+    t35 = $[94];
+  }
+  let t36;
+  if ($[95] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t36 = /* @__PURE__ */ jsx(Icon, { path: ICONS.close });
+    $[95] = t36;
+  } else {
+    t36 = $[95];
+  }
+  let t37;
+  if ($[96] !== messages.viewer.close || $[97] !== onClose) {
+    t37 = /* @__PURE__ */ jsx(ToolbarButton, { label: messages.viewer.close, onClick: onClose, children: t36 });
+    $[96] = messages.viewer.close;
+    $[97] = onClose;
+    $[98] = t37;
+  } else {
+    t37 = $[98];
+  }
+  let t38;
+  if ($[99] !== dragHandlers || $[100] !== t27 || $[101] !== t28 || $[102] !== t31 || $[103] !== t32 || $[104] !== t35 || $[105] !== t37) {
+    t38 = /* @__PURE__ */ jsxs("header", { className: "flex cursor-move touch-none items-center gap-1 border-b border-slate-100 px-2 py-1.5 select-none", onPointerDown: t27, ...dragHandlers, children: [
+      t28,
+      t31,
+      t32,
+      t35,
+      t37
     ] });
-    $[73] = dragHandlers;
-    $[74] = t19;
-    $[75] = t20;
-    $[76] = t22;
-    $[77] = t23;
-    $[78] = t26;
-    $[79] = t28;
-    $[80] = t29;
-  } else {
-    t29 = $[80];
-  }
-  let t30;
-  if ($[81] !== activeDirectionKey || $[82] !== messages.viewer.suggestedViews || $[83] !== messages.viewer.suggestedViewsHint || $[84] !== onSelectSuggestion || $[85] !== severalViewpoints || $[86] !== shownPhotoId || $[87] !== suggestions || $[88] !== toolbar) {
-    t30 = toolbar ? /* @__PURE__ */ jsx("div", { className: "border-b border-slate-100 px-2 py-1.5", children: toolbar }) : suggestions.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": messages.viewer.suggestedViews, className: "grid grid-cols-[repeat(auto-fit,minmax(5.25rem,1fr))] gap-1 border-b border-slate-100 px-2 py-1.5", title: messages.viewer.suggestedViewsHint, children: suggestions.map((suggestion_0) => /* @__PURE__ */ jsx(SuggestionChip, { active: suggestion_0.direction.key === activeDirectionKey, onSelect: (candidate) => onSelectSuggestion(suggestion_0, candidate), shownPhotoId, showPlace: severalViewpoints, suggestion: suggestion_0 }, suggestion_0.direction.key)) }) : null;
-    $[81] = activeDirectionKey;
-    $[82] = messages.viewer.suggestedViews;
-    $[83] = messages.viewer.suggestedViewsHint;
-    $[84] = onSelectSuggestion;
-    $[85] = severalViewpoints;
-    $[86] = shownPhotoId;
-    $[87] = suggestions;
-    $[88] = toolbar;
-    $[89] = t30;
-  } else {
-    t30 = $[89];
-  }
-  let t31;
-  if ($[90] !== status) {
-    t31 = status ? /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-slate-500", role: "status", children: status }) : null;
-    $[90] = status;
-    $[91] = t31;
-  } else {
-    t31 = $[91];
-  }
-  let t32;
-  if ($[92] !== footer) {
-    t32 = footer ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-slate-600", children: footer }) : null;
-    $[92] = footer;
-    $[93] = t32;
-  } else {
-    t32 = $[93];
-  }
-  let t33;
-  if ($[94] !== drawer || $[95] !== drawerOpen) {
-    t33 = drawer ? /* @__PURE__ */ jsxs("div", { className: "border-t border-slate-100", children: [
+    $[99] = dragHandlers;
+    $[100] = t27;
+    $[101] = t28;
+    $[102] = t31;
+    $[103] = t32;
+    $[104] = t35;
+    $[105] = t37;
+    $[106] = t38;
+  } else {
+    t38 = $[106];
+  }
+  let t39;
+  if ($[107] !== activeDirectionKey || $[108] !== messages.viewer.suggestedViews || $[109] !== messages.viewer.suggestedViewsHint || $[110] !== onSelectSuggestion || $[111] !== severalViewpoints || $[112] !== shownPhotoId || $[113] !== suggestions || $[114] !== toolbar) {
+    t39 = toolbar ? /* @__PURE__ */ jsx("div", { className: "border-b border-slate-100 px-2 py-1.5", children: toolbar }) : suggestions.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": messages.viewer.suggestedViews, className: "grid grid-cols-[repeat(auto-fit,minmax(5.25rem,1fr))] gap-1 border-b border-slate-100 px-2 py-1.5", title: messages.viewer.suggestedViewsHint, children: suggestions.map((suggestion_0) => /* @__PURE__ */ jsx(SuggestionChip, { active: suggestion_0.direction.key === activeDirectionKey, onSelect: (candidate) => onSelectSuggestion?.(suggestion_0, candidate), shownPhotoId, showPlace: severalViewpoints, suggestion: suggestion_0 }, suggestion_0.direction.key)) }) : null;
+    $[107] = activeDirectionKey;
+    $[108] = messages.viewer.suggestedViews;
+    $[109] = messages.viewer.suggestedViewsHint;
+    $[110] = onSelectSuggestion;
+    $[111] = severalViewpoints;
+    $[112] = shownPhotoId;
+    $[113] = suggestions;
+    $[114] = toolbar;
+    $[115] = t39;
+  } else {
+    t39 = $[115];
+  }
+  let t40;
+  if ($[116] !== status) {
+    t40 = status ? /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-xs text-slate-500", role: "status", children: status }) : null;
+    $[116] = status;
+    $[117] = t40;
+  } else {
+    t40 = $[117];
+  }
+  let t41;
+  if ($[118] !== footer) {
+    t41 = footer ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-slate-600", children: footer }) : null;
+    $[118] = footer;
+    $[119] = t41;
+  } else {
+    t41 = $[119];
+  }
+  let t42;
+  if ($[120] !== drawer || $[121] !== drawerOpen) {
+    t42 = drawer ? /* @__PURE__ */ jsxs("div", { className: "border-t border-slate-100", children: [
       /* @__PURE__ */ jsxs("button", { "aria-expanded": drawerOpen, className: "flex w-full items-center justify-between px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50", onClick: () => setDrawerOpen(_temp22), type: "button", children: [
         drawer.label,
         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: drawerOpen ? "inline-flex rotate-90" : "inline-flex", children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5", path: ICONS.forward }) })
       ] }),
       drawerOpen ? /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: drawer.content }) : null
     ] }) : null;
-    $[94] = drawer;
-    $[95] = drawerOpen;
-    $[96] = t33;
+    $[120] = drawer;
+    $[121] = drawerOpen;
+    $[122] = t42;
   } else {
-    t33 = $[96];
+    t42 = $[122];
   }
-  let t34;
-  if ($[97] !== children || $[98] !== t31 || $[99] !== t32 || $[100] !== t33) {
-    t34 = /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto", children: [
-      t31,
+  let t43;
+  if ($[123] !== children || $[124] !== t40 || $[125] !== t41 || $[126] !== t42) {
+    t43 = /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto", children: [
+      t40,
       children,
-      t32,
-      t33
+      t41,
+      t42
     ] });
-    $[97] = children;
-    $[98] = t31;
-    $[99] = t32;
-    $[100] = t33;
-    $[101] = t34;
+    $[123] = children;
+    $[124] = t40;
+    $[125] = t41;
+    $[126] = t42;
+    $[127] = t43;
   } else {
-    t34 = $[101];
+    t43 = $[127];
   }
-  let t35;
-  if ($[102] !== messages.viewer.regionLabel || $[103] !== t16 || $[104] !== t18 || $[105] !== t29 || $[106] !== t30 || $[107] !== t34) {
-    t35 = /* @__PURE__ */ jsxs("section", { "aria-label": messages.viewer.regionLabel, className: "absolute z-10 flex max-h-[calc(100%-1rem)] flex-col overflow-hidden rounded-xl bg-white shadow-xl ring-1 ring-slate-200", style: t16, children: [
-      t18,
-      t29,
-      t30,
-      t34
+  let t44;
+  if ($[128] !== messages.viewer.regionLabel || $[129] !== t22 || $[130] !== t24 || $[131] !== t26 || $[132] !== t38 || $[133] !== t39 || $[134] !== t43) {
+    t44 = /* @__PURE__ */ jsxs("section", { "aria-label": messages.viewer.regionLabel, className: t22, ref: boxRef, style: t24, children: [
+      t26,
+      t38,
+      t39,
+      t43
     ] });
-    $[102] = messages.viewer.regionLabel;
-    $[103] = t16;
-    $[104] = t18;
-    $[105] = t29;
-    $[106] = t30;
-    $[107] = t34;
-    $[108] = t35;
-  } else {
-    t35 = $[108];
-  }
-  return t35;
+    $[128] = messages.viewer.regionLabel;
+    $[129] = t22;
+    $[130] = t24;
+    $[131] = t26;
+    $[132] = t38;
+    $[133] = t39;
+    $[134] = t43;
+    $[135] = t44;
+  } else {
+    t44 = $[135];
+  }
+  return t44;
 };
 function _temp3(suggestion) {
   return suggestion.viewpoint.id;
@@ -3255,6 +3424,141 @@ function _temp24(query) {
 function _temp33(query_0) {
   return query_0.isError;
 }
+var DEFAULT_SOURCES2 = [mapillaryPhotoSource];
+var usePhotosLookingAt = (place, t0) => {
+  const $ = c(30);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === void 0 ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    maxAgeYears,
+    photoTypes,
+    maxDistanceMeters,
+    maxFlatAngleDeg,
+    limit,
+    filterPhoto,
+    sources: t2,
+    enabled: t3
+  } = t1;
+  const sources = t2 === void 0 ? DEFAULT_SOURCES2 : t2;
+  const enabled = t3 === void 0 ? true : t3;
+  const [now] = useState(_temp8);
+  const active = enabled && place != null;
+  let t4;
+  if ($[2] !== active || $[3] !== place || $[4] !== sources) {
+    let t52;
+    if ($[6] !== active || $[7] !== place) {
+      t52 = (source) => ({
+        queryKey: ["street-imagery", "photos-near", source.id, place?.[0], place?.[1]],
+        queryFn: (t62) => {
+          const {
+            signal
+          } = t62;
+          return place ? source.fetchNear(place, signal) : Promise.resolve([]);
+        },
+        enabled: active,
+        staleTime: 6e5
+      });
+      $[6] = active;
+      $[7] = place;
+      $[8] = t52;
+    } else {
+      t52 = $[8];
+    }
+    t4 = sources.map(t52);
+    $[2] = active;
+    $[3] = place;
+    $[4] = sources;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[9] !== t4) {
+    t5 = {
+      queries: t4
+    };
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const queries = useQueries(t5);
+  let t6;
+  if ($[11] !== filterPhoto || $[12] !== limit || $[13] !== maxAgeYears || $[14] !== maxDistanceMeters || $[15] !== maxFlatAngleDeg || $[16] !== now || $[17] !== photoTypes || $[18] !== place || $[19] !== queries) {
+    const photos = queries.flatMap(_temp25);
+    const kept = filterPhoto ? photos.filter(filterPhoto) : photos;
+    t6 = place ? rankPhotosLookingAt(place, kept, {
+      now,
+      maxAgeMs: maxAgeYears == null ? void 0 : yearsToMs(maxAgeYears),
+      maxDistanceMeters,
+      maxFlatAngleDeg,
+      photoTypes,
+      limit
+    }) : [];
+    $[11] = filterPhoto;
+    $[12] = limit;
+    $[13] = maxAgeYears;
+    $[14] = maxDistanceMeters;
+    $[15] = maxFlatAngleDeg;
+    $[16] = now;
+    $[17] = photoTypes;
+    $[18] = place;
+    $[19] = queries;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  let t7;
+  if ($[21] !== active || $[22] !== queries) {
+    t7 = active && queries.some(_temp34);
+    $[21] = active;
+    $[22] = queries;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  let t8;
+  if ($[24] !== queries) {
+    t8 = queries.length > 0 && queries.every(_temp43);
+    $[24] = queries;
+    $[25] = t8;
+  } else {
+    t8 = $[25];
+  }
+  let t9;
+  if ($[26] !== t6 || $[27] !== t7 || $[28] !== t8) {
+    t9 = {
+      candidates: t6,
+      isLoading: t7,
+      isError: t8
+    };
+    $[26] = t6;
+    $[27] = t7;
+    $[28] = t8;
+    $[29] = t9;
+  } else {
+    t9 = $[29];
+  }
+  return t9;
+};
+function _temp8() {
+  return Date.now();
+}
+function _temp25(query) {
+  return query.data ?? [];
+}
+function _temp34(query_0) {
+  return query_0.isPending;
+}
+function _temp43(query_1) {
+  return query_1.isError;
+}
 var STALE_TIME = 10 * 60 * 1e3;
 var useMapillaryMapFeatureImages = (featureId, t0) => {
   const $ = c(10);
@@ -3342,7 +3646,7 @@ var useMapillaryMapFeaturesNear = (lngLat, t0) => {
       return features.map((feature) => ({
         ...feature,
         distanceMeters: distanceMeters(center, feature.lngLat)
-      })).filter((feature_0) => feature_0.distanceMeters <= radiusMeters).sort(_temp8);
+      })).filter((feature_0) => feature_0.distanceMeters <= radiusMeters).sort(_temp9);
     };
     $[2] = lngLat;
     $[3] = objectValues;
@@ -3498,7 +3802,7 @@ var useSelectedMapillaryFeature = (t0) => {
   }
   return t5;
 };
-function _temp8(a, b) {
+function _temp9(a, b) {
   return a.distanceMeters - b.distanceMeters;
 }
 var useLocationPickStore = create()((set) => ({
@@ -3516,15 +3820,15 @@ var useLocationPickStore = create()((set) => ({
   }
 }));
 var useArmedLocationOpenerId = () => {
-  return useLocationPickStore(_temp9);
+  return useLocationPickStore(_temp10);
 };
 var useLocationPickActions = () => {
-  return useLocationPickStore(_temp25);
+  return useLocationPickStore(_temp26);
 };
-function _temp9(state) {
+function _temp10(state) {
   return state.armedOpenerId;
 }
-function _temp25(state) {
+function _temp26(state) {
   return state.actions;
 }
 
@@ -3777,7 +4081,7 @@ var MapillaryFeatureBar = (t0) => {
     }
     let t6;
     if ($[9] !== feature.value || $[10] !== t5) {
-      t6 = /* @__PURE__ */ jsx("img", { alt: "", className: "size-7 shrink-0", onError: _temp10, src: t5 }, t4);
+      t6 = /* @__PURE__ */ jsx("img", { alt: "", className: "size-7 shrink-0", onError: _temp11, src: t5 }, t4);
       $[9] = feature.value;
       $[10] = t5;
       $[11] = t6;
@@ -3855,49 +4159,82 @@ ${labels.dayPhotos(day.images.length, active && day.images.length > 1)}`, type:
   }
   return t2;
 };
-function _temp10(event) {
+function _temp11(event) {
   event.currentTarget.style.display = "none";
 }
+
+// src/filters/dateSliderPointer.ts
+var DATE_SLIDER_STEP = 1e-3;
+var HANDLE_PX = 16;
+var GRAB_RADIUS_PX = 22;
+var stepped = (position) => Math.round(position / DATE_SLIDER_STEP) * DATE_SLIDER_STEP;
+var clamped = (position) => Math.min(1, Math.max(0, position));
+var closeTo = (a, b, widthPx, px) => Math.abs(a - b) * widthPx <= px;
+var positionOnTrack = (leftPx, widthPx) => stepped(clamped(leftPx / widthPx));
+var moveHandle = (positions, handle, position) => handle === "from" ? {
+  ...positions,
+  from: Math.min(position, positions.to)
+} : {
+  ...positions,
+  to: Math.max(position, positions.from)
+};
+var nearestHandle = (positions, press) => press < (positions.from + positions.to) / 2 ? "from" : "to";
+var pressedHandle = (positions, press, widthPx) => {
+  const overlap = closeTo(positions.from, positions.to, widthPx, HANDLE_PX);
+  const middle = (positions.from + positions.to) / 2;
+  return overlap && closeTo(press, middle, widthPx, GRAB_RADIUS_PX) ? null : nearestHandle(positions, press);
+};
+var handleOfDrag = (deltaPx) => deltaPx < 0 ? "from" : "to";
+var dragPositions = (start, press, handle, deltaPx, widthPx) => {
+  const grabbed = closeTo(press, start[handle], widthPx, GRAB_RADIUS_PX);
+  const origin = grabbed ? start[handle] : press;
+  return moveHandle(start, handle, stepped(clamped(origin + deltaPx / widthPx)));
+};
+var tapPositions = (start, press, widthPx) => {
+  const handle = nearestHandle(start, press);
+  const onHandle = closeTo(press, start[handle], widthPx, HANDLE_PX / 2);
+  return {
+    handle,
+    positions: onHandle ? null : moveHandle(start, handle, press)
+  };
+};
 var DEFAULT_YEAR_LINES = [1, 2, 3, 4];
 var BINS = 60;
-var STEP = 1e-3;
 var CHART_HEIGHT_PX = 36;
 var RED = "#dc2626";
-var HANDLE_CLASS = "pointer-events-none absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none bg-transparent focus:outline-none [&::-webkit-slider-runnable-track]:appearance-none [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-slate-800 [&::-webkit-slider-thumb]:shadow [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-slate-800 [&::-moz-range-thumb]:shadow focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-sky-500 focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-sky-500";
+var DRAG_SLOP_PX = 4;
+var HANDLE_CLASS = "pointer-events-none absolute inset-0 m-0 h-full w-full appearance-none bg-transparent focus:outline-none [&::-webkit-slider-runnable-track]:appearance-none [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:bg-transparent [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-slate-800 [&::-webkit-slider-thumb]:shadow [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:bg-slate-800 [&::-moz-range-thumb]:shadow focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-sky-500 focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-sky-500";
 var percent = (position) => `${position * 100}%`;
-var PhotoDateRangeFilter = (t0) => {
-  const $ = c(80);
+var trackBox = (area) => {
   const {
-    value,
-    onChange,
-    capturedAt,
-    yearLines: t1,
-    recommendedMaxAgeYears,
-    markers: t2,
-    maxYears,
-    now: nowProp,
-    dateInputs: t3,
-    className,
-    allDatesAction: t4
-  } = t0;
-  const yearLines = t1 === void 0 ? DEFAULT_YEAR_LINES : t1;
-  let t5;
-  if ($[0] !== t2) {
-    t5 = t2 === void 0 ? [] : t2;
-    $[0] = t2;
-    $[1] = t5;
-  } else {
-    t5 = $[1];
-  }
-  const markers = t5;
-  const dateInputs = t3 === void 0 ? "collapsed" : t3;
-  const allDatesAction = t4 === void 0 ? true : t4;
+    left,
+    width
+  } = area.getBoundingClientRect();
+  const inset = HANDLE_PX / 2;
+  return {
+    left: left + inset,
+    width: Math.max(1, width - 2 * inset)
+  };
+};
+var PhotoDateRangeFilter = ({
+  value,
+  onChange,
+  capturedAt,
+  yearLines = DEFAULT_YEAR_LINES,
+  recommendedMaxAgeYears,
+  markers = [],
+  maxYears,
+  now: nowProp,
+  dateInputs = "collapsed",
+  className,
+  allDatesAction = true
+}) => {
   const {
     locale,
     messages
   } = useStreetImageryI18n();
   const text = messages.dateFilter;
-  const [startNow] = useState(_temp11);
+  const [startNow] = useState(() => Date.now());
   const now = nowProp ?? startNow;
   const scale = {
     now,
@@ -3906,396 +4243,236 @@ var PhotoDateRangeFilter = (t0) => {
   const [dragged, setDragged] = useState(null);
   const fromInput = useRef(null);
   const toInput = useRef(null);
+  const press = useRef(null);
   const positions = dragged ?? dateRangeToSliderPositions(value, scale);
   const shownRange = dragged ? sliderPositionsToDateRange(dragged, scale) : value;
-  let t6;
-  if ($[2] !== positions.from || $[3] !== positions.to) {
-    t6 = (moved) => {
-      const from = Number(fromInput.current?.value ?? positions.from);
-      const to = Number(toInput.current?.value ?? positions.to);
-      return moved === "from" ? {
-        from: Math.min(from, to),
-        to
-      } : {
-        from,
-        to: Math.max(from, to)
-      };
+  const readPositions = (moved) => {
+    const from = Number(fromInput.current?.value ?? positions.from);
+    const to = Number(toInput.current?.value ?? positions.to);
+    return moved === "from" ? {
+      from: Math.min(from, to),
+      to
+    } : {
+      from,
+      to: Math.max(from, to)
     };
-    $[2] = positions.from;
-    $[3] = positions.to;
-    $[4] = t6;
-  } else {
-    t6 = $[4];
-  }
-  const readPositions = t6;
-  const commitOnRelease = (moved_0) => (input) => {
+  };
+  const commit = (moved_0, next) => {
+    setDragged(null);
+    const range = sliderPositionsToDateRange(next, scale);
+    const other = moved_0 === "from" ? "to" : "from";
+    onChange({
+      ...range,
+      [other]: value[other]
+    });
+  };
+  const commitOnRelease = (moved_1) => (input) => {
     if (!input) {
-      return;
+      return void 0;
     }
-    const commit = () => {
-      setDragged(null);
-      const next = sliderPositionsToDateRange(readPositions(moved_0), scale);
-      const other = moved_0 === "from" ? "to" : "from";
-      onChange({
-        ...next,
-        [other]: value[other]
-      });
+    const onRelease = () => {
+      commit(moved_1, readPositions(moved_1));
     };
-    input.addEventListener("change", commit);
+    input.addEventListener("change", onRelease);
     return () => {
-      input.removeEventListener("change", commit);
+      input.removeEventListener("change", onRelease);
     };
   };
-  let t7;
-  if ($[5] !== readPositions) {
-    t7 = (moved_1, event) => {
-      if (event.type === "input") {
-        setDragged(readPositions(moved_1));
-      }
+  const trackDrag = (moved_2, event) => {
+    if (event.type === "input") {
+      setDragged(readPositions(moved_2));
+    }
+  };
+  const onPressStart = (event_0) => {
+    if (event_0.button !== 0 || press.current) {
+      return;
+    }
+    const track = trackBox(event_0.currentTarget);
+    const position = positionOnTrack(event_0.clientX - track.left, track.width);
+    event_0.currentTarget.setPointerCapture(event_0.pointerId);
+    press.current = {
+      pointerId: event_0.pointerId,
+      x: event_0.clientX,
+      position,
+      start: positions,
+      handle: pressedHandle(positions, position, track.width),
+      dragging: false
     };
-    $[5] = readPositions;
-    $[6] = t7;
-  } else {
-    t7 = $[6];
-  }
-  const trackDrag = t7;
+  };
+  const onPressMove = (event_1) => {
+    const current = press.current;
+    if (current?.pointerId !== event_1.pointerId) {
+      return;
+    }
+    const deltaPx = event_1.clientX - current.x;
+    if (!current.dragging && Math.abs(deltaPx) < DRAG_SLOP_PX) {
+      return;
+    }
+    current.dragging = true;
+    current.handle ??= handleOfDrag(deltaPx);
+    const {
+      width
+    } = trackBox(event_1.currentTarget);
+    setDragged(dragPositions(current.start, current.position, current.handle, deltaPx, width));
+  };
+  const onPressEnd = (event_2) => {
+    const current_0 = press.current;
+    if (current_0?.pointerId !== event_2.pointerId) {
+      return;
+    }
+    press.current = null;
+    const {
+      width: width_0
+    } = trackBox(event_2.currentTarget);
+    const {
+      handle,
+      positions: next_0
+    } = current_0.dragging && current_0.handle ? {
+      handle: current_0.handle,
+      positions: dragPositions(current_0.start, current_0.position, current_0.handle, event_2.clientX - current_0.x, width_0)
+    } : tapPositions(current_0.start, current_0.position, width_0);
+    if (next_0) {
+      commit(handle, next_0);
+    }
+    const input_0 = handle === "from" ? fromInput : toInput;
+    input_0.current?.focus({
+      preventScroll: true
+    });
+  };
+  const onPressCancel = (event_3) => {
+    if (press.current?.pointerId === event_3.pointerId) {
+      press.current = null;
+      setDragged(null);
+    }
+  };
   const bins = capturedAt ? dateSliderBins(capturedAt, scale, BINS) : [];
   const maxCount = Math.max(1, ...bins);
   const years = [...new Set(recommendedMaxAgeYears ? [...yearLines, recommendedMaxAgeYears] : yearLines)].map((count) => ({
     count,
     position: dateSliderPosition(yearsAgoMs(count, now), scale)
-  })).filter(_temp26);
+  })).filter(({
+    position: position_0
+  }) => position_0 > 0 && position_0 < 1);
   const shownMarkers = markers.map((marker) => {
     const time = typeof marker.date === "number" ? marker.date : parseIsoDateStartMs(marker.date);
     return {
       ...marker,
       position: dateSliderPosition(time, scale)
     };
-  }).filter(_temp34);
-  let t8;
-  if ($[7] !== locale) {
-    t8 = (isoDate) => formatDate(parseIsoDateStartMs(isoDate), locale);
-    $[7] = locale;
-    $[8] = t8;
-  } else {
-    t8 = $[8];
-  }
-  const day = t8;
-  let t9;
-  if ($[9] !== day || $[10] !== shownRange.from || $[11] !== shownRange.to || $[12] !== text) {
-    t9 = shownRange.from && shownRange.to ? text.between(day(shownRange.from), day(shownRange.to)) : shownRange.from ? text.since(day(shownRange.from)) : shownRange.to ? text.until(day(shownRange.to)) : text.allDates;
-    $[9] = day;
-    $[10] = shownRange.from;
-    $[11] = shownRange.to;
-    $[12] = text;
-    $[13] = t9;
-  } else {
-    t9 = $[13];
-  }
-  const rangeLabel = t9;
+  }).filter(({
+    position: position_1
+  }) => position_1 > 0 && position_1 < 1);
+  const day = (isoDate) => formatDate(parseIsoDateStartMs(isoDate), locale);
+  const rangeLabel = shownRange.from && shownRange.to ? text.between(day(shownRange.from), day(shownRange.to)) : shownRange.from ? text.since(day(shownRange.from)) : shownRange.to ? text.until(day(shownRange.to)) : text.allDates;
   const setYears = (count_0) => {
     onChange({
       from: new Date(yearsAgoMs(count_0, now)).toISOString().slice(0, 10)
     });
   };
-  let t10;
-  if ($[14] !== onChange || $[15] !== value) {
-    t10 = (key, input_0) => {
-      if (input_0 === "") {
-        onChange({
-          ...value,
-          [key]: void 0
-        });
-      } else {
-        if (isIsoDate(input_0)) {
-          onChange({
-            ...value,
-            [key]: input_0
-          });
-        }
-      }
-    };
-    $[14] = onChange;
-    $[15] = value;
-    $[16] = t10;
-  } else {
-    t10 = $[16];
-  }
-  const setDay = t10;
+  const setDay = (key, input_1) => {
+    if (input_1 === "") {
+      onChange({
+        ...value,
+        [key]: void 0
+      });
+    } else if (isIsoDate(input_1)) {
+      onChange({
+        ...value,
+        [key]: input_1
+      });
+    }
+  };
   const isAllDates = !shownRange.from && !shownRange.to;
-  const t11 = shownMarkers.length > 0 ? 14 : 0;
-  let t12;
-  if ($[17] !== t11) {
-    t12 = {
-      height: CHART_HEIGHT_PX,
-      marginTop: t11
-    };
-    $[17] = t11;
-    $[18] = t12;
-  } else {
-    t12 = $[18];
-  }
-  let t13;
-  if ($[19] !== maxCount || $[20] !== positions.from || $[21] !== positions.to || $[22] !== text) {
-    t13 = (count_1, index) => {
-      const start = index / BINS;
-      const inRange = start + 1 / BINS > positions.from && start < positions.to;
-      return /* @__PURE__ */ jsx("div", { className: `flex-1 rounded-t-[1px] ${inRange ? "bg-slate-500" : "bg-slate-300"}`, style: {
-        height: count_1 === 0 ? 0 : Math.max(2, Math.log1p(count_1) / Math.log1p(maxCount) * CHART_HEIGHT_PX)
-      }, title: count_1 > 0 ? text.photoCount(count_1) : void 0 }, index);
-    };
-    $[19] = maxCount;
-    $[20] = positions.from;
-    $[21] = positions.to;
-    $[22] = text;
-    $[23] = t13;
-  } else {
-    t13 = $[23];
-  }
-  let t15;
-  if ($[24] !== positions.from) {
-    t15 = percent(positions.from);
-    $[24] = positions.from;
-    $[25] = t15;
-  } else {
-    t15 = $[25];
-  }
-  const t16 = 1 - positions.to;
-  let t17;
-  if ($[26] !== t16) {
-    t17 = percent(t16);
-    $[26] = t16;
-    $[27] = t17;
-  } else {
-    t17 = $[27];
-  }
-  let t18;
-  if ($[28] !== t15 || $[29] !== t17) {
-    t18 = /* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 top-1/2 h-1 -translate-y-1/2 rounded-full bg-slate-200", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 rounded-full bg-slate-700", style: {
-      left: t15,
-      right: t17
-    } }) });
-    $[28] = t15;
-    $[29] = t17;
-    $[30] = t18;
-  } else {
-    t18 = $[30];
-  }
-  let t19;
-  if ($[31] !== day || $[32] !== shownRange.from || $[33] !== text.allDates) {
-    t19 = shownRange.from ? day(shownRange.from) : text.allDates;
-    $[31] = day;
-    $[32] = shownRange.from;
-    $[33] = text.allDates;
-    $[34] = t19;
-  } else {
-    t19 = $[34];
-  }
-  let t20;
-  if ($[35] !== trackDrag) {
-    t20 = (event_0) => {
-      trackDrag("from", event_0.nativeEvent);
-    };
-    $[35] = trackDrag;
-    $[36] = t20;
-  } else {
-    t20 = $[36];
-  }
-  let t21;
-  if ($[37] !== commitOnRelease) {
-    t21 = (input_1) => {
-      fromInput.current = input_1;
-      return commitOnRelease("from")(input_1);
-    };
-    $[37] = commitOnRelease;
-    $[38] = t21;
-  } else {
-    t21 = $[38];
-  }
-  let t22;
-  if ($[39] !== positions.from || $[40] !== t19 || $[41] !== t20 || $[42] !== t21 || $[43] !== text.fromHandle) {
-    t22 = /* @__PURE__ */ jsx("input", { "aria-label": text.fromHandle, "aria-valuetext": t19, className: HANDLE_CLASS, max: 1, min: 0, onChange: t20, ref: t21, step: STEP, type: "range", value: positions.from });
-    $[39] = positions.from;
-    $[40] = t19;
-    $[41] = t20;
-    $[42] = t21;
-    $[43] = text.fromHandle;
-    $[44] = t22;
-  } else {
-    t22 = $[44];
-  }
-  let t23;
-  if ($[45] !== day || $[46] !== shownRange.to || $[47] !== text.allDates) {
-    t23 = shownRange.to ? day(shownRange.to) : text.allDates;
-    $[45] = day;
-    $[46] = shownRange.to;
-    $[47] = text.allDates;
-    $[48] = t23;
-  } else {
-    t23 = $[48];
-  }
-  let t24;
-  if ($[49] !== trackDrag) {
-    t24 = (event_1) => {
-      trackDrag("to", event_1.nativeEvent);
-    };
-    $[49] = trackDrag;
-    $[50] = t24;
-  } else {
-    t24 = $[50];
-  }
-  let t25;
-  if ($[51] !== commitOnRelease) {
-    t25 = (input_2) => {
-      toInput.current = input_2;
-      return commitOnRelease("to")(input_2);
-    };
-    $[51] = commitOnRelease;
-    $[52] = t25;
-  } else {
-    t25 = $[52];
-  }
-  let t26;
-  if ($[53] !== positions.to || $[54] !== t23 || $[55] !== t24 || $[56] !== t25 || $[57] !== text.toHandle) {
-    t26 = /* @__PURE__ */ jsx("input", { "aria-label": text.toHandle, "aria-valuetext": t23, className: HANDLE_CLASS, max: 1, min: 0, onChange: t24, ref: t25, step: STEP, type: "range", value: positions.to });
-    $[53] = positions.to;
-    $[54] = t23;
-    $[55] = t24;
-    $[56] = t25;
-    $[57] = text.toHandle;
-    $[58] = t26;
-  } else {
-    t26 = $[58];
-  }
-  let t27;
-  if ($[59] !== t18 || $[60] !== t22 || $[61] !== t26) {
-    t27 = /* @__PURE__ */ jsxs("div", { className: "relative h-4", children: [
-      t18,
-      t22,
-      t26
-    ] });
-    $[59] = t18;
-    $[60] = t22;
-    $[61] = t26;
-    $[62] = t27;
-  } else {
-    t27 = $[62];
-  }
-  const t28 = "relative mx-2 h-4";
-  const t30 = years.map((t29) => {
-    const {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `-mb-3.5 touch-pan-y pb-3.5 select-none ${dragged ? "cursor-grabbing" : "cursor-pointer"}`,
+        onPointerCancel: onPressCancel,
+        onPointerDown: onPressStart,
+        onPointerMove: onPressMove,
+        onPointerUp: onPressEnd,
+        onClick: () => {
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", style: {
+            height: CHART_HEIGHT_PX,
+            marginTop: shownMarkers.length > 0 ? 14 : 0
+          }, children: [
+            /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 flex items-end", children: bins.map((count_1, index) => {
+              const start = index / BINS;
+              const inRange = start + 1 / BINS > positions.from && start < positions.to;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex-1 rounded-t-[1px] ${inRange ? "bg-slate-500" : "bg-slate-300"}`,
+                  style: {
+                    height: count_1 === 0 ? 0 : Math.max(2, Math.log1p(count_1) / Math.log1p(maxCount) * CHART_HEIGHT_PX)
+                  },
+                  title: count_1 > 0 ? text.photoCount(count_1) : void 0
+                },
+                index
+              );
+            }) }),
+            years.map(({
+              count: count_2,
+              position: position_2
+            }) => /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 w-px -translate-x-1/2", style: {
+              left: percent(position_2),
+              backgroundColor: count_2 === recommendedMaxAgeYears ? RED : "rgb(148 163 184 / 0.7)"
+            } }, count_2)),
+            shownMarkers.map((marker_0) => /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 w-0 border-l-2 border-dashed", style: {
+              left: percent(marker_0.position),
+              borderColor: marker_0.color ?? RED
+            }, children: /* @__PURE__ */ jsx("span", { className: "absolute -top-3.5 -translate-x-1/2 text-[10px] leading-none whitespace-nowrap", style: {
+              color: marker_0.color ?? RED
+            }, children: marker_0.label }) }, `${marker_0.date}-${marker_0.label}`))
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative h-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-x-2 top-1/2 h-1 -translate-y-1/2 rounded-full bg-slate-200", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 rounded-full bg-slate-700", style: {
+              left: percent(positions.from),
+              right: percent(1 - positions.to)
+            } }) }),
+            /* @__PURE__ */ jsx("input", { "aria-label": text.fromHandle, "aria-valuetext": shownRange.from ? day(shownRange.from) : text.allDates, className: HANDLE_CLASS, max: 1, min: 0, onChange: (event_4) => {
+              trackDrag("from", event_4.nativeEvent);
+            }, ref: (input_2) => {
+              fromInput.current = input_2;
+              return commitOnRelease("from")(input_2);
+            }, step: DATE_SLIDER_STEP, type: "range", value: positions.from }),
+            /* @__PURE__ */ jsx("input", { "aria-label": text.toHandle, "aria-valuetext": shownRange.to ? day(shownRange.to) : text.allDates, className: HANDLE_CLASS, max: 1, min: 0, onChange: (event_5) => {
+              trackDrag("to", event_5.nativeEvent);
+            }, ref: (input_3) => {
+              toInput.current = input_3;
+              return commitOnRelease("to")(input_3);
+            }, step: DATE_SLIDER_STEP, type: "range", value: positions.to })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none relative mx-2 h-4", children: years.map(({
       count: count_3,
-      position: position_2
-    } = t29;
-    return /* @__PURE__ */ jsx("button", { className: `absolute top-0 -translate-x-1/2 rounded px-0.5 text-[10px] leading-4 whitespace-nowrap hover:underline ${count_3 === recommendedMaxAgeYears ? "font-semibold text-red-600" : "text-slate-500 hover:text-slate-900"}`, onClick: () => {
+      position: position_3
+    }) => /* @__PURE__ */ jsx("button", { className: `pointer-events-auto absolute top-0 -translate-x-1/2 rounded px-0.5 text-[10px] leading-4 whitespace-nowrap hover:underline ${count_3 === recommendedMaxAgeYears ? "font-semibold text-red-600" : "text-slate-500 hover:text-slate-900"}`, onClick: () => {
       setYears(count_3);
     }, style: {
-      left: percent(position_2)
-    }, title: count_3 === recommendedMaxAgeYears ? text.recommendedMaxAge(count_3) : text.lastYears(count_3), type: "button", children: text.yearsShort(count_3) }, count_3);
-  });
-  let t31;
-  if ($[63] !== t30) {
-    t31 = /* @__PURE__ */ jsx("div", { className: t28, children: t30 });
-    $[63] = t30;
-    $[64] = t31;
-  } else {
-    t31 = $[64];
-  }
-  let t32;
-  if ($[65] !== rangeLabel) {
-    t32 = /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-700", children: rangeLabel });
-    $[65] = rangeLabel;
-    $[66] = t32;
-  } else {
-    t32 = $[66];
-  }
-  let t33;
-  if ($[67] !== allDatesAction || $[68] !== isAllDates || $[69] !== onChange || $[70] !== text.allDates) {
-    t33 = isAllDates || !allDatesAction ? null : /* @__PURE__ */ jsx("button", { className: "shrink-0 font-medium text-slate-600 underline decoration-slate-300 underline-offset-2 hover:text-slate-900", onClick: () => {
-      onChange({});
-    }, type: "button", children: text.allDates });
-    $[67] = allDatesAction;
-    $[68] = isAllDates;
-    $[69] = onChange;
-    $[70] = text.allDates;
-    $[71] = t33;
-  } else {
-    t33 = $[71];
-  }
-  let t34;
-  if ($[72] !== t32 || $[73] !== t33) {
-    t34 = /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline justify-between gap-2 text-xs", children: [
-      t32,
-      t33
-    ] });
-    $[72] = t32;
-    $[73] = t33;
-    $[74] = t34;
-  } else {
-    t34 = $[74];
-  }
-  let t35;
-  if ($[75] !== dateInputs || $[76] !== setDay || $[77] !== text || $[78] !== value) {
-    t35 = dateInputs === "none" ? null : /* @__PURE__ */ jsxs("details", { className: "mt-1 text-xs text-slate-600", open: dateInputs === "open" || void 0, children: [
+      left: percent(position_3)
+    }, title: count_3 === recommendedMaxAgeYears ? text.recommendedMaxAge(count_3) : text.lastYears(count_3), type: "button", children: text.yearsShort(count_3) }, count_3)) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-baseline justify-between gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-700", children: rangeLabel }),
+      isAllDates || !allDatesAction ? null : /* @__PURE__ */ jsx("button", { className: "shrink-0 font-medium text-slate-600 underline decoration-slate-300 underline-offset-2 hover:text-slate-900", onClick: () => {
+        onChange({});
+      }, type: "button", children: text.allDates })
+    ] }),
+    dateInputs === "none" ? null : /* @__PURE__ */ jsxs("details", { className: "mt-1 text-xs text-slate-600", open: dateInputs === "open" || void 0, children: [
       /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none hover:text-slate-900", children: text.exactDates }),
       /* @__PURE__ */ jsx("div", { className: "mt-1.5 grid grid-cols-2 gap-2", children: ["from", "to"].map((key_0) => /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1", children: [
         text[key_0],
-        /* @__PURE__ */ jsx("input", { className: "rounded-md border border-slate-200 px-2 py-1.5 text-sm text-slate-800", onChange: (event_2) => {
-          setDay(key_0, event_2.target.value);
+        /* @__PURE__ */ jsx("input", { className: "rounded-md border border-slate-200 px-2 py-1.5 text-sm text-slate-800", onChange: (event_6) => {
+          setDay(key_0, event_6.target.value);
         }, type: "date", value: value[key_0] ?? "" })
       ] }, key_0)) })
-    ] });
-    $[75] = dateInputs;
-    $[76] = setDay;
-    $[77] = text;
-    $[78] = value;
-    $[79] = t35;
-  } else {
-    t35 = $[79];
-  }
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx("div", { className: "mx-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", style: t12, children: [
-      /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 flex items-end", children: bins.map(t13) }),
-      years.map((t14) => {
-        const {
-          count: count_2,
-          position: position_1
-        } = t14;
-        return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 w-px -translate-x-1/2", style: {
-          left: percent(position_1),
-          backgroundColor: count_2 === recommendedMaxAgeYears ? RED : "rgb(148 163 184 / 0.7)"
-        } }, count_2);
-      }),
-      shownMarkers.map(_temp43)
-    ] }) }),
-    t27,
-    t31,
-    t34,
-    t35
+    ] })
   ] });
 };
-function _temp11() {
-  return Date.now();
-}
-function _temp26(t0) {
-  const {
-    position
-  } = t0;
-  return position > 0 && position < 1;
-}
-function _temp34(t0) {
-  const {
-    position: position_0
-  } = t0;
-  return position_0 > 0 && position_0 < 1;
-}
-function _temp43(marker_0) {
-  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 w-0 border-l-2 border-dashed", style: {
-    left: percent(marker_0.position),
-    borderColor: marker_0.color ?? RED
-  }, children: /* @__PURE__ */ jsx("span", { className: "absolute -top-3.5 -translate-x-1/2 text-[10px] leading-none whitespace-nowrap", style: {
-    color: marker_0.color ?? RED
-  }, children: marker_0.label }) }, `${marker_0.date}-${marker_0.label}`);
-}
 
-export { BASE_COLOR, FloatingPhotoViewer, FloatingViewerInfoButton, LocationPickOnMap, MAPILLARY_FEATURE_BAR_LABELS, MapillaryFeatureBar, PhotoCount, PhotoDate, PhotoDateRangeFilter, SELECTION_COLOR, SelectedMapFeatureLayer, StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, VIEW_SHAPE_FILL_OPACITY, ViewpointLayer, getViewpointSession, previousDataWhile, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useActiveDirectionKey, useAllProviderMapFeatures, useAllProviderPhotos, useArmedLocationOpenerId, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useLocationPickActions, useMapViewportBbox, useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, usePhotoFullUrl, usePhotoThumbnail, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useSelectedMapillaryFeature, useViewSuggestions, useViewpointLine, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel };
+export { BASE_COLOR, FloatingPhotoViewer, FloatingViewerInfoButton, LocationPickOnMap, MAPILLARY_FEATURE_BAR_LABELS, MapillaryFeatureBar, PhotoCount, PhotoDate, PhotoDateRangeFilter, SELECTION_COLOR, SelectedMapFeatureLayer, StreetLevelImagerySelectionOverlay, StreetLevelImagerySourcesAndLayers, StreetLevelImageryViewCone, StreetLevelImageryViewer, VIEWPOINT_DEFAULT_COLOR, VIEWPOINT_DIRECTION_LAYER_ID, VIEW_SHAPE_FILL_OPACITY, ViewpointLayer, getViewpointSession, previousDataWhile, queryStreetImageryFeatures, resolveSelectedSequence, streetImageryInteractiveLayerIds, useActiveDirectionKey, useAllProviderMapFeatures, useAllProviderPhotos, useArmedLocationOpenerId, useCanGoBack, useCanGoForward, useCurrentHistoryEntry, useLocationPickActions, useMapViewportBbox, useMapillaryImageDetections, useMapillaryMapFeatureImages, useMapillaryMapFeaturesNear, usePhotoFullUrl, usePhotoThumbnail, usePhotosLookingAt, useProviderMapFeatures, useProviderPhotos, useProviderSequences, useSelectedMapillaryFeature, useViewSuggestions, useViewpointLine, useViewpoints, viewDirectionKeyFromFeatures, viewSuggestionLabel };