@multiplatform.one/forms 6.1.0 → 6.3.0

package/dist/esm/fields/Geolocation/index.mjs

@@ -1,14 +1,51 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useCallback, useMemo, useState } from "react";
+import { NavigationArrowIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Spinner, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { AdaptivePopup } from "../../AdaptivePopup/index.mjs";
 import { Button } from "../../Button/index.mjs";
 import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { FloatingPanel } from "../../FloatingPanel/index.mjs";
+import { GeolocationMap } from "./GeolocationMap.mjs";
 import { Input as InputParts } from "../../InputParts/index.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
+import { queryPermissionState } from "../../shared/capabilityPreflight.mjs";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { t } from "../../shared/t.mjs";
 import { getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
 import { Fragment, jsx, jsxs } from "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 ? t("Geolocation unavailable: insecure context (HTTPS required).") : t("Geolocation unavailable: not supported in this browser.")
+    };
+  }
+  const permission = await queryPermissionState("geolocation");
+  if (permission === "denied") {
+    return {
+      ok: false,
+      reason: 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 t("Location permission denied. Please allow location access.");
+  }
+  if (code === 2) {
+    return t("Location unavailable. Try again or enter coordinates manually.");
+  }
+  if (code === 3) {
+    return t("Location request timed out. Try again.");
+  }
+  return err.message || t("Failed to get location");
+}
 function parseGeoValue(value) {
   try {
     const parsed = JSON.parse(value);
@@ -29,119 +66,171 @@ function clampLat(val) {
 function clampLng(val) {
   return Math.max(-180, Math.min(180, val));
 }
-function useMapSrc(lat, lng, delta = 0.02) {
-  return 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] = useState(String(lat));
+  const [lngText, setLngText] = useState(String(lng));
+  const latTextRef = useRef(latText);
+  const lngTextRef = useRef(lngText);
+  const committedRef = useRef({
+    lat,
+    lng
+  });
+  useEffect(() => {
+    setLatText(String(lat));
+    setLngText(String(lng));
+    latTextRef.current = String(lat);
+    lngTextRef.current = String(lng);
+    committedRef.current = {
+      lat,
+      lng
+    };
+  }, [lat, lng]);
+  const commitPair = 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 = 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]);
+  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__ */jsxs(YStack, {
-    ...knobProps.borderRadius,
-    ...knobProps.inputSurface,
-    borderColor: formInputColors.border.base,
-    overflow: "hidden",
-    height: 200,
-    position: "relative",
-    children: [isWeb ? /* @__PURE__ */jsx("iframe", {
-      title: "Location preview",
-      src,
-      width: "100%",
-      height: "100%",
-      style: {
-        border: 0,
-        display: "block"
-      },
-      loading: "lazy"
-    }) : /* @__PURE__ */jsxs(YStack, {
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "$backgroundHover",
+    testID: "geolocation-coords-panel",
+    gap: "$3",
+    minWidth: 260,
+    ...knobProps.panelPadding,
+    children: [/* @__PURE__ */jsxs(YStack, {
+      gap: "$1",
       children: [/* @__PURE__ */jsx(Text, {
-        color: "$colorSubtle",
-        fontSize: "$2",
-        children: "Map preview (web only)"
-      }), /* @__PURE__ */jsx(Text, {
-        color: "$colorSubtle",
         fontSize: "$1",
-        children: `${lat.toFixed(4)}, ${lng.toFixed(4)}`
+        ...knobProps.body,
+        color: formCommonColors.muted,
+        children: t("Lat")
+      }), /* @__PURE__ */jsx(InputParts, {
+        size: knobProps.sizeToken,
+        children: /* @__PURE__ */jsx(InputParts.Box, {
+          children: /* @__PURE__ */jsx(InputParts.Area, {
+            value: latText,
+            onChangeText: handleLatChange,
+            onBlur: flushDraft,
+            placeholder: t("-90 to 90"),
+            inputMode: "decimal",
+            "aria-label": t("Latitude"),
+            "aria-required": required || void 0,
+            "aria-invalid": hasError || void 0
+          })
+        })
+      })]
+    }), /* @__PURE__ */jsxs(YStack, {
+      gap: "$1",
+      children: [/* @__PURE__ */jsx(Text, {
+        fontSize: "$1",
+        ...knobProps.body,
+        color: formCommonColors.muted,
+        children: t("Lng")
+      }), /* @__PURE__ */jsx(InputParts, {
+        size: knobProps.sizeToken,
+        children: /* @__PURE__ */jsx(InputParts.Box, {
+          children: /* @__PURE__ */jsx(InputParts.Area, {
+            value: lngText,
+            onChangeText: handleLngChange,
+            onBlur: flushDraft,
+            placeholder: t("-180 to 180"),
+            inputMode: "decimal",
+            "aria-label": t("Longitude"),
+            "aria-required": required || void 0,
+            "aria-invalid": hasError || void 0
+          })
+        })
       })]
-    }), onExpand && expandIcon && /* @__PURE__ */jsx(View, {
-      position: "absolute",
-      top: "$2",
-      right: "$2",
-      zIndex: 1,
-      children: /* @__PURE__ */jsx(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
   } = useResolvedKnobs();
-  const src = useMapSrc(lat, lng, 0.05);
   return /* @__PURE__ */jsx(YStack, {
     flex: 1,
     minHeight: 400,
     borderRadius: knobProps.borderRadius.borderRadius,
     overflow: "hidden",
-    children: isWeb ? /* @__PURE__ */jsx("iframe", {
-      title: "Location selection",
-      src,
-      width: "100%",
-      height: "100%",
-      style: {
-        border: 0,
-        display: "block",
-        minHeight: 400
-      },
-      loading: "lazy"
-    }) : /* @__PURE__ */jsxs(YStack, {
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "$backgroundHover",
-      children: [/* @__PURE__ */jsx(Text, {
-        color: "$colorSubtle",
-        fontSize: "$2",
-        children: "Map view (web only)"
-      }), /* @__PURE__ */jsx(Text, {
-        color: "$colorSubtle",
-        fontSize: "$1",
-        children: `${lat.toFixed(4)}, ${lng.toFixed(4)}`
-      })]
+    children: /* @__PURE__ */jsx(GeolocationMap, {
+      lat,
+      lng,
+      delta: 0.05,
+      minHeight: 400,
+      title: 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,
@@ -150,98 +239,175 @@ function GeoInputs({
   hasError
 }) {
   const [expanded, setExpanded] = useState(false);
+  const [coordsOpen, setCoordsOpen] = useState(false);
+  const coordsFlushRef = 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__ */jsx(DefaultMapPreview, {
-    lat: coordinates.lat,
-    lng: coordinates.lng,
-    knobProps,
-    onExpand: handleExpand,
-    expandIcon
-  });
+  }) : null;
   return /* @__PURE__ */jsxs(Fragment, {
-    children: [mapNode, /* @__PURE__ */jsxs(XStack, {
-      ...knobProps.gap,
-      alignItems: "flex-end",
-      children: [/* @__PURE__ */jsxs(YStack, {
-        flex: 1,
-        gap: "$1",
-        children: [/* @__PURE__ */jsx(Text, {
+    children: [/* @__PURE__ */jsxs(YStack, {
+      testID: "geolocation-map",
+      ...knobProps.borderRadius,
+      ...knobProps.inputSurface,
+      borderColor: formInputColors.border.base,
+      overflow: "hidden",
+      height: 200,
+      position: "relative",
+      children: [customMap ?? /* @__PURE__ */jsx(GeolocationMap, {
+        lat: coordinates.lat,
+        lng: coordinates.lng,
+        onChange: onMapChange,
+        disabled,
+        readOnly
+      }), /* @__PURE__ */jsx(View, {
+        position: "absolute",
+        top: "$2",
+        insetInlineStart: "$2",
+        zIndex: 1,
+        backgroundColor: "$background",
+        opacity: 0.92,
+        paddingHorizontal: "$2",
+        paddingVertical: "$1",
+        ...knobProps.borderRadius,
+        children: /* @__PURE__ */jsx(Text, {
+          testID: "geolocation-coords-chip",
           fontSize: "$1",
           ...knobProps.body,
           color: formCommonColors.muted,
-          children: "Lat"
-        }), /* @__PURE__ */jsx(InputParts, {
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */jsx(InputParts.Box, {
-            children: /* @__PURE__ */jsx(InputParts.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__ */jsx(View, {
+        position: "absolute",
+        top: "$2",
+        insetInlineEnd: "$2",
+        zIndex: 1,
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$2",
+          circular: true,
+          onPress: handleExpand,
+          backgroundColor: "$background",
+          opacity: 0.9,
+          "aria-label": t("Expand map"),
+          children: expandIcon
+        })
+      }), !readOnly && /* @__PURE__ */jsx(View, {
+        position: "absolute",
+        bottom: "$2",
+        insetInlineStart: "$2",
+        zIndex: 1,
+        children: /* @__PURE__ */jsx(FloatingPanel, {
+          open: coordsOpen,
+          onOpenChange: handleCoordsOpenChange,
+          disabled,
+          fitContent: true,
+          sizing: "fill",
+          contentPadding: "none",
+          trigger: /* @__PURE__ */jsx(Button, {
+            size: "$2",
+            disabled,
+            backgroundColor: "$background",
+            opacity: 0.9,
+            "aria-label": t("Edit coordinates"),
+            onPress: isWeb && !disabled ? () => setCoordsOpen(true) : void 0,
+            children: /* @__PURE__ */jsx(Button.Text, {
+              children: t("Coordinates")
             })
+          }),
+          children: /* @__PURE__ */jsx(CoordinatesPanel, {
+            lat: coordinates.lat,
+            lng: coordinates.lng,
+            knobProps,
+            required,
+            hasError,
+            flushRef: coordsFlushRef,
+            onCommit: onCommitCoordinates
           })
-        })]
-      }), /* @__PURE__ */jsxs(YStack, {
-        flex: 1,
-        gap: "$1",
-        children: [/* @__PURE__ */jsx(Text, {
-          fontSize: "$1",
-          ...knobProps.body,
-          color: formCommonColors.muted,
-          children: "Lng"
-        }), /* @__PURE__ */jsx(InputParts, {
-          size: knobProps.sizeToken,
-          children: /* @__PURE__ */jsx(InputParts.Box, {
-            children: /* @__PURE__ */jsx(InputParts.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__ */jsx(View, {
+        position: "absolute",
+        bottom: "$2",
+        insetInlineEnd: "$2",
+        zIndex: 1,
+        children: /* @__PURE__ */jsx(Button, {
+          size: "$2",
+          disabled: disabled || locating,
+          onPress: onUseMyLocation,
+          backgroundColor: "$background",
+          opacity: 0.9,
+          icon: locating ? /* @__PURE__ */jsx(Spinner, {
+            size: "small"
+          }) : locationIcon,
+          "aria-label": locating ? t("Locating") : t("Locate"),
+          children: /* @__PURE__ */jsx(Button.Text, {
+            children: locating ? t("Locating...") : t("Locate")
           })
-        })]
-      }), !readOnly && /* @__PURE__ */jsx(Button, {
-        size: knobProps.sizeToken,
-        disabled: disabled || locating,
-        onPress: onUseMyLocation,
-        flexShrink: 0,
-        icon: locating ? /* @__PURE__ */jsx(Spinner, {
-          size: "small"
-        }) : locationIcon,
-        children: /* @__PURE__ */jsx(Button.Text, {
-          children: locating ? "Locating..." : "Locate"
         })
       })]
+    }), locateSurfaceOpen && /* @__PURE__ */jsx(YStack, {
+      testID: "geolocation-locate-panel",
+      ...knobProps.borderRadius,
+      ...knobProps.inputSurface,
+      borderColor: formInputColors.border.base,
+      padding: "$3",
+      gap: "$3",
+      alignItems: "center",
+      children: locatePhase === "error" ? /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx(Text, {
+          ...knobProps.body,
+          color: formCommonColors.error,
+          textAlign: "center",
+          children: locateError
+        }), /* @__PURE__ */jsxs(XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */jsx(Button, {
+            size: knobProps.sizeToken,
+            onPress: onRetryLocate,
+            "aria-label": t("Retry location"),
+            children: t("Retry")
+          }), /* @__PURE__ */jsx(Button, {
+            size: knobProps.sizeToken,
+            onPress: onCloseLocate,
+            "aria-label": t("Close location"),
+            children: t("Close")
+          })]
+        })]
+      }) : /* @__PURE__ */jsx(Text, {
+        ...knobProps.body,
+        textAlign: "center",
+        opacity: 0.7,
+        children: t("Requesting location\u2026")
+      })
     }), expandIcon && /* @__PURE__ */jsx(AdaptivePopup, {
       open: expanded,
       onOpenChange: setExpanded,
-      title: "Select Location",
+      title: t("Select Location"),
       size: "lg",
       children: /* @__PURE__ */jsx(ExpandedMapView, {
         lat: coordinates.lat,
         lng: coordinates.lng,
         onChange: onMapChange,
-        disabled
+        disabled,
+        readOnly
       })
     })]
   });
 }
+const defaultLocationIcon = /* @__PURE__ */jsx(NavigationArrowIcon, {
+  size: 16
+});
 function Geolocation({
   name,
   form: formProp,
@@ -259,7 +425,7 @@ function Geolocation({
   onBlur,
   disabled,
   readOnly,
-  locationIcon,
+  locationIcon = defaultLocationIcon,
   expandIcon,
   renderMap,
   skeleton,
@@ -275,31 +441,66 @@ function Geolocation({
     compact
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const [locating, setLocating] = useState(false);
-  const [geoError, setGeoError] = useState();
+  const [locatePhase, setLocatePhase] = useState("idle");
+  const [locateError, setLocateError] = useState(null);
+  const [preflightError, setPreflightError] = useState();
+  const preflightingRef = useRef(false);
+  const onValueChangeRef = useRef(() => {});
+  const requestPosition = useCallback(() => {
+    if (!navigator?.geolocation) {
+      setLocateError(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 = 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 = 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) => {
@@ -309,63 +510,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__ */jsxs(FieldLayout, {
+    return /* @__PURE__ */jsx(FieldLayout, {
       id,
       label,
       size,
       knobProps,
-      children: [/* @__PURE__ */jsx(Skeleton, {
+      children: /* @__PURE__ */jsx(Skeleton, {
         variant: "rounded",
         width: "100%",
         height: 200
-      }), /* @__PURE__ */jsxs(XStack, {
-        ...knobProps.gap,
-        width: "100%",
-        children: [/* @__PURE__ */jsx(Skeleton, {
-          variant: "rounded",
-          width: "100%",
-          height: knobProps.sizeToken,
-          flex: 1
-        }), /* @__PURE__ */jsx(Skeleton, {
-          variant: "rounded",
-          width: "100%",
-          height: knobProps.sizeToken,
-          flex: 1
-        }), /* @__PURE__ */jsx(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__ */jsx(FieldLayout, {
@@ -378,15 +547,18 @@ function Geolocation({
       size,
       knobProps,
       onBlur,
-      children: /* @__PURE__ */jsx(GeoInputs, {
+      disabled,
+      children: /* @__PURE__ */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,
@@ -417,14 +589,18 @@ function Geolocation({
         size,
         knobProps,
         onBlur: mergeFieldHandler(field, "handleBlur", onBlur),
-        children: /* @__PURE__ */jsx(GeoInputs, {
+        disabled,
+        children: /* @__PURE__ */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,
@@ -436,5 +612,5 @@ function Geolocation({
     }
   });
 }
-export { Geolocation };
+export { Geolocation, preflightGeolocation };
 //# sourceMappingURL=index.mjs.map