@multiplatform.one/forms 6.1.0 → 6.4.0

package/dist/cjs/fields/Geolocation/index.cjs

@@ -22,20 +22,58 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Geolocation_exports = {};
 __export(Geolocation_exports, {
-  Geolocation: () => Geolocation
+  Geolocation: () => Geolocation,
+  preflightGeolocation: () => preflightGeolocation
 });
 module.exports = __toCommonJS(Geolocation_exports);
 var import_theme = require("@multiplatform.one/theme");
-var import_react = require("react");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
 var import_tamagui = require("tamagui");
 var import_AdaptivePopup = require("../../AdaptivePopup/index.cjs");
 var import_Button = require("../../Button/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
+var import_GeolocationMap = require("./GeolocationMap.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_capabilityPreflight = require("../../shared/capabilityPreflight.cjs");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_t = require("../../shared/t.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+async function preflightGeolocation() {
+  if (typeof navigator === "undefined" || !navigator.geolocation) {
+    const insecure = typeof window !== "undefined" && window.isSecureContext === false;
+    return {
+      ok: false,
+      reason: insecure ? (0, import_t.t)("Geolocation unavailable: insecure context (HTTPS required).") : (0, import_t.t)("Geolocation unavailable: not supported in this browser.")
+    };
+  }
+  const permission = await (0, import_capabilityPreflight.queryPermissionState)("geolocation");
+  if (permission === "denied") {
+    return {
+      ok: false,
+      reason: (0, import_t.t)("Geolocation unavailable: permission denied. Allow location access in browser settings.")
+    };
+  }
+  return {
+    ok: true
+  };
+}
+function mapGeolocationError(err) {
+  const code = "code" in err ? err.code : void 0;
+  if (code === 1) {
+    return (0, import_t.t)("Location permission denied. Please allow location access.");
+  }
+  if (code === 2) {
+    return (0, import_t.t)("Location unavailable. Try again or enter coordinates manually.");
+  }
+  if (code === 3) {
+    return (0, import_t.t)("Location request timed out. Try again.");
+  }
+  return err.message || (0, import_t.t)("Failed to get location");
+}
 function parseGeoValue(value) {
   try {
     const parsed = JSON.parse(value);
@@ -56,119 +94,171 @@ function clampLat(val) {
 function clampLng(val) {
   return Math.max(-180, Math.min(180, val));
 }
-function useMapSrc(lat, lng, delta = 0.02) {
-  return (0, import_react.useMemo)(() => {
-    const bbox = `${lng - delta},${lat - delta},${lng + delta},${lat + delta}`;
-    return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat},${lng}`;
-  }, [lat, lng, delta]);
+function formatCoordChip(lat, lng) {
+  return `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
 }
-function DefaultMapPreview({
+function tryParseCoord(text, clamp) {
+  const trimmed = text.trim();
+  if (trimmed === "" || trimmed === "-" || trimmed === "." || trimmed === "-.") return void 0;
+  if (trimmed.endsWith(".")) return void 0;
+  const n = Number.parseFloat(trimmed);
+  if (Number.isNaN(n)) return void 0;
+  return clamp(n);
+}
+function CoordinatesPanel({
   lat,
   lng,
+  onCommit,
+  flushRef,
   knobProps,
-  onExpand,
-  expandIcon
+  required,
+  hasError
 }) {
-  const src = useMapSrc(lat, lng);
+  const [latText, setLatText] = (0, import_react2.useState)(String(lat));
+  const [lngText, setLngText] = (0, import_react2.useState)(String(lng));
+  const latTextRef = (0, import_react2.useRef)(latText);
+  const lngTextRef = (0, import_react2.useRef)(lngText);
+  const committedRef = (0, import_react2.useRef)({
+    lat,
+    lng
+  });
+  (0, import_react2.useEffect)(() => {
+    setLatText(String(lat));
+    setLngText(String(lng));
+    latTextRef.current = String(lat);
+    lngTextRef.current = String(lng);
+    committedRef.current = {
+      lat,
+      lng
+    };
+  }, [lat, lng]);
+  const commitPair = (0, import_react2.useCallback)((nextLat, nextLng) => {
+    if (nextLat === committedRef.current.lat && nextLng === committedRef.current.lng) return;
+    committedRef.current = {
+      lat: nextLat,
+      lng: nextLng
+    };
+    onCommit(nextLat, nextLng);
+  }, [onCommit]);
+  const flushDraft = (0, import_react2.useCallback)(() => {
+    const rawLat = Number.parseFloat(latTextRef.current);
+    const rawLng = Number.parseFloat(lngTextRef.current);
+    const nextLat = Number.isNaN(rawLat) ? committedRef.current.lat : clampLat(rawLat);
+    const nextLng = Number.isNaN(rawLng) ? committedRef.current.lng : clampLng(rawLng);
+    commitPair(nextLat, nextLng);
+  }, [commitPair]);
+  (0, import_react2.useEffect)(() => {
+    flushRef.current = flushDraft;
+    return () => {
+      flushRef.current = null;
+    };
+  }, [flushRef, flushDraft]);
+  const handleLatChange = text => {
+    setLatText(text);
+    latTextRef.current = text;
+    const parsed = tryParseCoord(text, clampLat);
+    if (parsed !== void 0) {
+      commitPair(parsed, committedRef.current.lng);
+    }
+  };
+  const handleLngChange = text => {
+    setLngText(text);
+    lngTextRef.current = text;
+    const parsed = tryParseCoord(text, clampLng);
+    if (parsed !== void 0) {
+      commitPair(committedRef.current.lat, parsed);
+    }
+  };
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.borderRadius,
-    ...knobProps.inputSurface,
-    borderColor: import_colorRamps.formInputColors.border.base,
-    overflow: "hidden",
-    height: 200,
-    position: "relative",
-    children: [import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("iframe", {
-      title: "Location preview",
-      src,
-      width: "100%",
-      height: "100%",
-      style: {
-        border: 0,
-        display: "block"
-      },
-      loading: "lazy"
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "$backgroundHover",
+    testID: "geolocation-coords-panel",
+    gap: "$3",
+    minWidth: 260,
+    ...knobProps.panelPadding,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$1",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: "$colorSubtle",
-        fontSize: "$2",
-        children: "Map preview (web only)"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: "$colorSubtle",
         fontSize: "$1",
-        children: `${lat.toFixed(4)}, ${lng.toFixed(4)}`
+        ...knobProps.body,
+        color: import_colorRamps.formCommonColors.muted,
+        children: (0, import_t.t)("Lat")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: knobProps.sizeToken,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+            value: latText,
+            onChangeText: handleLatChange,
+            onBlur: flushDraft,
+            placeholder: (0, import_t.t)("-90 to 90"),
+            inputMode: "decimal",
+            "aria-label": (0, import_t.t)("Latitude"),
+            "aria-required": required || void 0,
+            "aria-invalid": hasError || void 0
+          })
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$1",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$1",
+        ...knobProps.body,
+        color: import_colorRamps.formCommonColors.muted,
+        children: (0, import_t.t)("Lng")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: knobProps.sizeToken,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+            value: lngText,
+            onChangeText: handleLngChange,
+            onBlur: flushDraft,
+            placeholder: (0, import_t.t)("-180 to 180"),
+            inputMode: "decimal",
+            "aria-label": (0, import_t.t)("Longitude"),
+            "aria-required": required || void 0,
+            "aria-invalid": hasError || void 0
+          })
+        })
       })]
-    }), onExpand && expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      position: "absolute",
-      top: "$2",
-      right: "$2",
-      zIndex: 1,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        size: "$2",
-        circular: true,
-        onPress: onExpand,
-        backgroundColor: "$background",
-        opacity: 0.9,
-        children: expandIcon
-      })
     })]
   });
 }
 function ExpandedMapView({
   lat,
   lng,
-  onChange: _onChange,
-  disabled: _disabled
+  onChange,
+  disabled,
+  readOnly
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const src = useMapSrc(lat, lng, 0.05);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     flex: 1,
     minHeight: 400,
     borderRadius: knobProps.borderRadius.borderRadius,
     overflow: "hidden",
-    children: import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("iframe", {
-      title: "Location selection",
-      src,
-      width: "100%",
-      height: "100%",
-      style: {
-        border: 0,
-        display: "block",
-        minHeight: 400
-      },
-      loading: "lazy"
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "$backgroundHover",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: "$colorSubtle",
-        fontSize: "$2",
-        children: "Map view (web only)"
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        color: "$colorSubtle",
-        fontSize: "$1",
-        children: `${lat.toFixed(4)}, ${lng.toFixed(4)}`
-      })]
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GeolocationMap.GeolocationMap, {
+      lat,
+      lng,
+      delta: 0.05,
+      minHeight: 400,
+      title: (0, import_t.t)("Location selection"),
+      onChange,
+      disabled,
+      readOnly
     })
   });
 }
-function GeoInputs({
+function GeoMapSurface({
   coordinates,
-  onLatChange,
-  onLngChange,
+  onCommitCoordinates,
   onUseMyLocation,
+  onRetryLocate,
+  onCloseLocate,
   onMapChange,
   disabled,
   readOnly,
-  locating,
+  locatePhase,
+  locateError,
   knobProps,
   locationIcon,
   expandIcon,
@@ -176,99 +266,176 @@ function GeoInputs({
   required,
   hasError
 }) {
-  const [expanded, setExpanded] = (0, import_react.useState)(false);
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  const [coordsOpen, setCoordsOpen] = (0, import_react2.useState)(false);
+  const coordsFlushRef = (0, import_react2.useRef)(null);
+  const locating = locatePhase === "locating";
+  const locateSurfaceOpen = locatePhase === "locating" || locatePhase === "error";
   const handleExpand = expandIcon ? () => setExpanded(true) : void 0;
-  const mapNode = renderMap ? renderMap({
+  const handleCoordsOpenChange = open => {
+    if (!open) {
+      coordsFlushRef.current?.();
+    }
+    setCoordsOpen(open);
+  };
+  const customMap = renderMap ? renderMap({
     lat: coordinates.lat,
     lng: coordinates.lng,
     onChange: onMapChange,
     disabled,
     knobProps
-  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultMapPreview, {
-    lat: coordinates.lat,
-    lng: coordinates.lng,
-    knobProps,
-    onExpand: handleExpand,
-    expandIcon
-  });
+  }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [mapNode, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      ...knobProps.gap,
-      alignItems: "flex-end",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        flex: 1,
-        gap: "$1",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      testID: "geolocation-map",
+      ...knobProps.borderRadius,
+      ...knobProps.inputSurface,
+      borderColor: import_colorRamps.formInputColors.border.base,
+      overflow: "hidden",
+      height: 200,
+      position: "relative",
+      children: [customMap ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GeolocationMap.GeolocationMap, {
+        lat: coordinates.lat,
+        lng: coordinates.lng,
+        onChange: onMapChange,
+        disabled,
+        readOnly
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        top: "$2",
+        insetInlineStart: "$2",
+        zIndex: 1,
+        backgroundColor: "$background",
+        opacity: 0.92,
+        paddingHorizontal: "$2",
+        paddingVertical: "$1",
+        ...knobProps.borderRadius,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          testID: "geolocation-coords-chip",
           fontSize: "$1",
           ...knobProps.body,
           color: import_colorRamps.formCommonColors.muted,
-          children: "Lat"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-              value: String(coordinates.lat),
-              onChangeText: readOnly ? void 0 : onLatChange,
-              readOnly,
-              "aria-readonly": readOnly || void 0,
-              disabled,
-              placeholder: "-90 to 90",
-              inputMode: "decimal",
-              "aria-required": required || void 0,
-              "aria-invalid": hasError || void 0
+          children: formatCoordChip(coordinates.lat, coordinates.lng)
+        })
+      }), handleExpand && expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        top: "$2",
+        insetInlineEnd: "$2",
+        zIndex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          size: "$2",
+          circular: true,
+          onPress: handleExpand,
+          backgroundColor: "$background",
+          opacity: 0.9,
+          "aria-label": (0, import_t.t)("Expand map"),
+          children: expandIcon
+        })
+      }), !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        bottom: "$2",
+        insetInlineStart: "$2",
+        zIndex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+          open: coordsOpen,
+          onOpenChange: handleCoordsOpenChange,
+          disabled,
+          fitContent: true,
+          sizing: "fill",
+          contentPadding: "none",
+          trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            size: "$2",
+            disabled,
+            backgroundColor: "$background",
+            opacity: 0.9,
+            "aria-label": (0, import_t.t)("Edit coordinates"),
+            onPress: import_tamagui.isWeb && !disabled ? () => setCoordsOpen(true) : void 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+              children: (0, import_t.t)("Coordinates")
             })
+          }),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(CoordinatesPanel, {
+            lat: coordinates.lat,
+            lng: coordinates.lng,
+            knobProps,
+            required,
+            hasError,
+            flushRef: coordsFlushRef,
+            onCommit: onCommitCoordinates
           })
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        flex: 1,
-        gap: "$1",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: "$1",
-          ...knobProps.body,
-          color: import_colorRamps.formCommonColors.muted,
-          children: "Lng"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Box, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-              value: String(coordinates.lng),
-              onChangeText: readOnly ? void 0 : onLngChange,
-              readOnly,
-              "aria-readonly": readOnly || void 0,
-              disabled,
-              placeholder: "-180 to 180",
-              inputMode: "decimal",
-              "aria-required": required || void 0,
-              "aria-invalid": hasError || void 0
-            })
+        })
+      }), !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        bottom: "$2",
+        insetInlineEnd: "$2",
+        zIndex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          size: "$2",
+          disabled: disabled || locating,
+          onPress: onUseMyLocation,
+          backgroundColor: "$background",
+          opacity: 0.9,
+          icon: locating ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+            size: "small"
+          }) : locationIcon,
+          "aria-label": locating ? (0, import_t.t)("Locating") : (0, import_t.t)("Locate"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+            children: locating ? (0, import_t.t)("Locating...") : (0, import_t.t)("Locate")
           })
-        })]
-      }), !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        size: knobProps.sizeToken,
-        disabled: disabled || locating,
-        onPress: onUseMyLocation,
-        flexShrink: 0,
-        icon: locating ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
-          size: "small"
-        }) : locationIcon,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-          children: locating ? "Locating..." : "Locate"
         })
       })]
+    }), locateSurfaceOpen && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      testID: "geolocation-locate-panel",
+      ...knobProps.borderRadius,
+      ...knobProps.inputSurface,
+      borderColor: import_colorRamps.formInputColors.border.base,
+      padding: "$3",
+      gap: "$3",
+      alignItems: "center",
+      children: locatePhase === "error" ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.body,
+          color: import_colorRamps.formCommonColors.error,
+          textAlign: "center",
+          children: locateError
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            size: knobProps.sizeToken,
+            onPress: onRetryLocate,
+            "aria-label": (0, import_t.t)("Retry location"),
+            children: (0, import_t.t)("Retry")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            size: knobProps.sizeToken,
+            onPress: onCloseLocate,
+            "aria-label": (0, import_t.t)("Close location"),
+            children: (0, import_t.t)("Close")
+          })]
+        })]
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.body,
+        textAlign: "center",
+        opacity: 0.7,
+        children: (0, import_t.t)("Requesting location\u2026")
+      })
     }), expandIcon && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AdaptivePopup.AdaptivePopup, {
       open: expanded,
       onOpenChange: setExpanded,
-      title: "Select Location",
+      title: (0, import_t.t)("Select Location"),
       size: "lg",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ExpandedMapView, {
         lat: coordinates.lat,
         lng: coordinates.lng,
         onChange: onMapChange,
-        disabled
+        disabled,
+        readOnly
       })
     })]
   });
 }
+const defaultLocationIcon = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.NavigationArrowIcon, {
+  size: 16
+});
 function Geolocation({
   name,
   form: formProp,
@@ -286,7 +453,7 @@ function Geolocation({
   onBlur,
   disabled,
   readOnly,
-  locationIcon,
+  locationIcon = defaultLocationIcon,
   expandIcon,
   renderMap,
   skeleton,
@@ -302,31 +469,66 @@ function Geolocation({
     compact
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
-  const [locating, setLocating] = (0, import_react.useState)(false);
-  const [geoError, setGeoError] = (0, import_react.useState)();
-  const makeHandlers = (0, import_react.useCallback)((currentValue, onValueChange) => {
+  const [locatePhase, setLocatePhase] = (0, import_react2.useState)("idle");
+  const [locateError, setLocateError] = (0, import_react2.useState)(null);
+  const [preflightError, setPreflightError] = (0, import_react2.useState)();
+  const preflightingRef = (0, import_react2.useRef)(false);
+  const onValueChangeRef = (0, import_react2.useRef)(() => {});
+  const requestPosition = (0, import_react2.useCallback)(() => {
+    if (!navigator?.geolocation) {
+      setLocateError((0, import_t.t)("Geolocation unavailable: not supported in this browser."));
+      setLocatePhase("error");
+      return;
+    }
+    setLocatePhase("locating");
+    setLocateError(null);
+    navigator.geolocation.getCurrentPosition(position => {
+      const lat = clampLat(position.coords.latitude);
+      const lng = clampLng(position.coords.longitude);
+      onValueChangeRef.current(JSON.stringify({
+        lat,
+        lng
+      }));
+      setLocatePhase("idle");
+      setLocateError(null);
+    }, err => {
+      setLocateError(mapGeolocationError(err));
+      setLocatePhase("error");
+    }, {
+      enableHighAccuracy: true,
+      timeout: 1e4
+    });
+  }, []);
+  const startLocate = (0, import_react2.useCallback)(async () => {
+    if (disabled || readOnly) return;
+    if (preflightingRef.current || locatePhase === "locating") return;
+    preflightingRef.current = true;
+    try {
+      const result = await preflightGeolocation();
+      if (result.ok) {
+        setPreflightError(void 0);
+        requestPosition();
+      } else {
+        setPreflightError(result.reason);
+        setLocatePhase("idle");
+        setLocateError(null);
+      }
+    } finally {
+      preflightingRef.current = false;
+    }
+  }, [disabled, readOnly, locatePhase, requestPosition]);
+  const makeHandlers = (0, import_react2.useCallback)((currentValue, onValueChange) => {
+    onValueChangeRef.current = onValueChange;
     const coordinates = currentValue ? parseGeoValue(currentValue) : {
       lat: 0,
       lng: 0
     };
     return {
       coordinates,
-      onLatChange: text => {
-        const parsedNumber = Number.parseFloat(text);
-        if (Number.isNaN(parsedNumber) && text !== "" && text !== "-") return;
-        const lat = Number.isNaN(parsedNumber) ? 0 : clampLat(parsedNumber);
+      onCommitCoordinates: (lat, lng) => {
         onValueChange(JSON.stringify({
-          lat,
-          lng: coordinates.lng
-        }));
-      },
-      onLngChange: text => {
-        const parsedNumber = Number.parseFloat(text);
-        if (Number.isNaN(parsedNumber) && text !== "" && text !== "-") return;
-        const lng = Number.isNaN(parsedNumber) ? 0 : clampLng(parsedNumber);
-        onValueChange(JSON.stringify({
-          lat: coordinates.lat,
-          lng
+          lat: clampLat(lat),
+          lng: clampLng(lng)
         }));
       },
       onMapChange: (lat, lng) => {
@@ -336,63 +538,31 @@ function Geolocation({
         }));
       },
       onUseMyLocation: () => {
-        if (disabled || readOnly) return;
-        if (!navigator?.geolocation) {
-          setGeoError("Geolocation is not supported by this browser");
-          return;
-        }
-        setLocating(true);
-        setGeoError(void 0);
-        navigator.geolocation.getCurrentPosition(position => {
-          const lat = clampLat(position.coords.latitude);
-          const lng = clampLng(position.coords.longitude);
-          onValueChange(JSON.stringify({
-            lat,
-            lng
-          }));
-          setLocating(false);
-        }, err => {
-          setGeoError(err.message || "Failed to get location");
-          setLocating(false);
-        }, {
-          enableHighAccuracy: true,
-          timeout: 1e4
-        });
+        void startLocate();
+      },
+      onRetryLocate: () => {
+        requestPosition();
+      },
+      onCloseLocate: () => {
+        setLocatePhase("idle");
+        setLocateError(null);
       }
     };
-  }, [disabled]);
+  }, [startLocate, requestPosition]);
   if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_fieldLayout.FieldLayout, {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label,
       size,
       knobProps,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
         variant: "rounded",
         width: "100%",
         height: 200
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        ...knobProps.gap,
-        width: "100%",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-          variant: "rounded",
-          width: "100%",
-          height: knobProps.sizeToken,
-          flex: 1
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-          variant: "rounded",
-          width: "100%",
-          height: knobProps.sizeToken,
-          flex: 1
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-          variant: "rounded",
-          width: 80,
-          height: knobProps.sizeToken
-        })]
-      })]
+      })
     });
   }
-  const displayError = error || geoError;
+  const displayError = error || preflightError;
   if (!resolvedForm || !name) {
     const handlers = makeHandlers(value || "", v => onChange?.(v));
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
@@ -405,15 +575,18 @@ function Geolocation({
       size,
       knobProps,
       onBlur,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoInputs, {
+      disabled,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoMapSurface, {
         coordinates: handlers.coordinates,
-        onLatChange: handlers.onLatChange,
-        onLngChange: handlers.onLngChange,
+        onCommitCoordinates: handlers.onCommitCoordinates,
         onUseMyLocation: handlers.onUseMyLocation,
+        onRetryLocate: handlers.onRetryLocate,
+        onCloseLocate: handlers.onCloseLocate,
         onMapChange: handlers.onMapChange,
         disabled: !!disabled,
         readOnly: !!readOnly,
-        locating,
+        locatePhase,
+        locateError,
         knobProps,
         locationIcon,
         expandIcon,
@@ -444,14 +617,18 @@ function Geolocation({
         size,
         knobProps,
         onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoInputs, {
+        disabled,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GeoMapSurface, {
           coordinates: handlers.coordinates,
-          onLatChange: handlers.onLatChange,
-          onLngChange: handlers.onLngChange,
+          onCommitCoordinates: handlers.onCommitCoordinates,
           onUseMyLocation: handlers.onUseMyLocation,
+          onRetryLocate: handlers.onRetryLocate,
+          onCloseLocate: handlers.onCloseLocate,
           onMapChange: handlers.onMapChange,
           disabled: !!disabled,
-          locating,
+          readOnly: !!readOnly,
+          locatePhase,
+          locateError,
           knobProps,
           locationIcon,
           expandIcon,