@multiplatform.one/forms 7.11.0 → 7.15.0

package/src/Button/Button.borderLadder.spec.tsx

@@ -0,0 +1,82 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-134: the borderWidth knob reaches an outlined Button. The frame's
+ * `outlined` styled variant used to hard-set `borderWidth: 1`, which beat
+ * `borderWidth={resolvedBorderWidth}` on Tamagui prop order and pinned every
+ * outlined Button at 1px while a filled one walked 0 / 0.5 / 1 / 2. The
+ * resolver owns the floor (DG-BOR-01): `none` under `fillStyle: outlined`
+ * is the 0.5 hairline, and `large` is 2 for filled and outlined alike, so the
+ * two keep the box parity the frame's comment promises.
+ *
+ * jsdom cannot cascade Tamagui CSS — assertions read the atomic border-width
+ * class the FRAME emits, the same idiom as Button.filledBorder.spec.tsx.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const STOPS = ["none", "small", "medium", "large"] as const;
+
+function widthAtoms(): string[] {
+  return String(screen.getByRole("button").className || "")
+    .split(/\s+/)
+    .filter((c) => c.startsWith("_btw-"))
+    .sort();
+}
+
+function renderAt(stop: (typeof STOPS)[number], outlined: boolean): string[] {
+  renderWithProviders(
+    <Preset overrides={{ fillStyle: outlined ? "outlined" : "filled", borderWidth: stop }}>
+      <Button>Restart</Button>
+    </Preset>,
+  );
+  const atoms = widthAtoms();
+  cleanup();
+  return atoms;
+}
+
+describe("Button borderWidth ladder (MPO-134)", () => {
+  it("outlined walks the ladder: hairline at none and small, 1 at medium, 2 at large", () => {
+    expect(renderAt("none", true)).toEqual(["_btw-0--5px"]);
+    expect(renderAt("small", true)).toEqual(["_btw-0--5px"]);
+    expect(renderAt("medium", true)).toEqual(["_btw-1px"]);
+    expect(renderAt("large", true)).toEqual(["_btw-2px"]);
+  });
+
+  it("outlined at none and at large no longer emit the same edge", () => {
+    expect(renderAt("none", true)).not.toEqual(renderAt("large", true));
+  });
+
+  it("filled walks the same ladder, chromeless at none", () => {
+    expect(renderAt("none", false)).toEqual(["_btw-0px"]);
+    expect(renderAt("small", false)).toEqual(["_btw-0--5px"]);
+    expect(renderAt("medium", false)).toEqual(["_btw-1px"]);
+    expect(renderAt("large", false)).toEqual(["_btw-2px"]);
+  });
+
+  it("the outlined prop and a filled sibling share one width at every stop", () => {
+    for (const stop of STOPS) {
+      renderWithProviders(
+        <Preset overrides={{ borderWidth: stop }}>
+          <Button outlined>Save draft</Button>
+        </Preset>,
+      );
+      const outlined = widthAtoms();
+      cleanup();
+      renderWithProviders(
+        <Preset overrides={{ borderWidth: stop }}>
+          <Button>Publish</Button>
+        </Preset>,
+      );
+      const filled = widthAtoms();
+      cleanup();
+      expect(outlined, stop).toEqual(filled);
+    }
+  });
+});

package/src/Button/Button.labelInk.spec.tsx

@@ -185,7 +185,10 @@ describe("Button MPO-40 outlined intent label ink", () => {
         ),
       ]),
     );
-    expect(measured, `light.color2 is ${ground}`).toEqual({
+    const displayed = Object.fromEntries(
+      Object.entries(measured).map(([intent, ratio]) => [intent, Math.round(ratio * 100) / 100]),
+    );
+    expect(displayed, `light.color2 is ${ground}`).toEqual({
       error: 4.95,
       warning: 4.56,
       success: 4.55,

package/src/Button/Button.radiusLaw.spec.tsx

@@ -0,0 +1,153 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-162: the seeded knob fuzz for the Button frame's radius, judged in
+ * jsdom against docs/design/knob-laws.md § Radius › Button (default,
+ * outlined): honour at none/small/large/full, remap at medium to the
+ * size-recipe radius. The combos are `node scripts/knob-fuzz.mjs
+ * MPO-162-button 5` verbatim, painted in both schemes at $2/$3/$4/$6.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { type Knobs, Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { Theme } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const STOP_PX = { none: 0, small: 5, medium: 9, large: 16, full: 50 } as const;
+const RECIPE_RADIUS = { $2: 5, $3: 7, $4: 9, $6: 16 } as const;
+const SCHEMES = ["light", "dark"] as const;
+const TOKENS = ["$2", "$3", "$4", "$6"] as const;
+
+type Stop = keyof typeof STOP_PX;
+type Token = keyof typeof RECIPE_RADIUS;
+type Combo = Partial<Knobs> & { borderRadius: Stop };
+
+const COMBOS: Combo[] = [
+  {
+    fillStyle: "filled",
+    borderRadius: "none",
+    borderWidth: "large",
+    elevation: "none",
+    space: "medium",
+    size: "large",
+    textAccent: "high",
+    headingFont: "pixel",
+    bodyFont: "mono",
+    fontWeight: "regular",
+    animation: "lazy",
+  },
+  {
+    fillStyle: "filled",
+    borderRadius: "small",
+    borderWidth: "none",
+    elevation: "large",
+    space: "large",
+    size: "small",
+    textAccent: "low",
+    headingFont: "cursive",
+    bodyFont: "serif",
+    fontWeight: "bold",
+    animation: "snappy",
+  },
+  {
+    fillStyle: "outlined",
+    borderRadius: "full",
+    borderWidth: "none",
+    elevation: "medium",
+    space: "small",
+    size: "small",
+    textAccent: "medium",
+    headingFont: "condensed",
+    bodyFont: "handwriting",
+    fontWeight: "bold",
+    animation: "medium",
+  },
+  {
+    fillStyle: "outlined",
+    borderRadius: "medium",
+    borderWidth: "none",
+    elevation: "small",
+    space: "medium",
+    size: "large",
+    textAccent: "medium",
+    headingFont: "pixel",
+    bodyFont: "pixel",
+    fontWeight: "regular",
+    animation: "lazy",
+  },
+  {
+    fillStyle: "outlined",
+    borderRadius: "large",
+    borderWidth: "small",
+    elevation: "small",
+    space: "large",
+    size: "medium",
+    textAccent: "low",
+    headingFont: "slab",
+    bodyFont: "pixel",
+    fontWeight: "regular",
+    animation: "medium",
+  },
+];
+
+function lawRadius(stop: Stop, token: Token): number {
+  return stop === "medium" ? RECIPE_RADIUS[token] : STOP_PX[stop];
+}
+
+const RADIUS_TOKEN_PX: Record<string, number> = {
+  "0": 0,
+  "2": 5,
+  "3": 7,
+  "4": 9,
+  "5": 10,
+  "6": 16,
+  "12": 50,
+};
+
+function radiusPx(el: HTMLElement): number | null {
+  let found: number | null = null;
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const px = c.match(/^_btlr-(\d+)px$/);
+    if (px) found = Number(px[1]);
+    const tok = c.match(/^_btlr-t-radius-(\d+)$/);
+    if (tok) found = RADIUS_TOKEN_PX[tok[1]] ?? found;
+  }
+  return found;
+}
+
+function paint(combo: Combo, scheme: (typeof SCHEMES)[number], token: Token): number | null {
+  renderWithProviders(
+    <Theme name={scheme}>
+      <Preset overrides={combo}>
+        <Button size={token} icon={<span>i</span>}>
+          Restart
+        </Button>
+      </Preset>
+    </Theme>,
+  );
+  const px = radiusPx(screen.getByRole("button"));
+  cleanup();
+  return px;
+}
+
+describe("MPO-162 Button frame radius: seeded fuzz against knob-laws.md § Radius › Button", () => {
+  for (const [i, combo] of COMBOS.entries()) {
+    const expected =
+      combo.borderRadius === "medium"
+        ? "the size-recipe radius 5/7/9/16"
+        : `${STOP_PX[combo.borderRadius]}px at every size`;
+    for (const scheme of SCHEMES) {
+      it(`combo ${i + 1} ${scheme}: borderRadius ${combo.borderRadius} paints ${expected}`, () => {
+        for (const token of TOKENS) {
+          expect(paint(combo, scheme, token), `${token} ${scheme}`).toBe(
+            lawRadius(combo.borderRadius, token),
+          );
+        }
+      });
+    }
+  }
+});

package/src/Button/index.tsx

@@ -26,6 +26,7 @@ import {
   type SizeRecipeRadiusStop,
 } from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
+import { getFormSubmission } from "../Form/submissionController";
 import { useFormField } from "../shared/utils";
 import {
   Button as TamaguiButton,
@@ -201,7 +202,6 @@ export const ButtonFrame = styled(View, {
       true: {
         backgroundColor: "transparent",
         borderColor: "$borderColor",
-        borderWidth: 1,
         hoverStyle: { backgroundColor: "transparent" },
         pressStyle: { backgroundColor: "transparent" },
       },
@@ -463,8 +463,11 @@ export function Button({
     // Explained disable keeps the frame press-able (aria-disabled, focusable)
     // so the activation guard lives here, not in pointerEvents.
     if (isDisabled) return;
-    if (action === "submit" && resolvedForm) resolvedForm.handleSubmit();
-    if (action === "reset" && resolvedForm) resolvedForm.reset();
+    if (action === "submit" && resolvedForm) void getFormSubmission(resolvedForm).submit();
+    if (action === "reset" && resolvedForm) {
+      getFormSubmission(resolvedForm).clearError();
+      resolvedForm.reset();
+    }
     onPress?.(e as Parameters<NonNullable<TamaguiButtonProps["onPress"]>>[0]);
   };
 

package/src/ContextualSaveBar/ContextualSaveBar.spec.tsx

@@ -119,6 +119,29 @@ describe("ContextualSaveBar", () => {
     expect(savebar()).toBeNull();
   });
 
+  it.each(["Refused", "Refused.", "Refused?", "Refused!", "Refused。"])(
+    "separates refusal copy once for %s",
+    async (refusal) => {
+      const result = renderWithProviders(
+        <Form
+          saveBar
+          formOptions={{ defaultValues: { name: "svc" } }}
+          onSubmit={async () => {
+            throw new Error(refusal);
+          }}
+        >
+          <Input name="name" label="Name" />
+        </Form>,
+      );
+      await act(async () => typeIn(result.container.querySelector("input")!, "other"));
+      await act(async () => fireEvent.click(barButton("Save")));
+      const displayed = /[.!?。]$/u.test(refusal) ? refusal : `${refusal}.`;
+      await waitFor(() =>
+        expect(savebar()?.textContent).toContain(`${displayed} Edits are kept on this page.`),
+      );
+    },
+  );
+
   it.each([undefined, "Review changes"])(
     "shows the complete narrow-form refusal with custom status %s",
     async (message) => {
@@ -141,6 +164,7 @@ describe("ContextualSaveBar", () => {
       await act(async () => typeIn(input, "svc-billing"));
       await act(async () => fireEvent.click(barButton("Save")));
       await waitFor(() => expect(savebar()?.textContent).toContain(refusal));
+      expect(savebar()?.textContent).not.toContain("retry..");
       const status = savebar()!.querySelector('[role="status"]')!;
       expect(getComputedStyle(status).whiteSpace).not.toBe("nowrap");
       expect(getComputedStyle(status).textOverflow).not.toBe("ellipsis");

package/src/ContextualSaveBar/ContextualSaveBar.stories.tsx

@@ -1,6 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { YStack } from "tamagui";
+import { useState } from "react";
+import { SizableText, YStack } from "tamagui";
+import { Button } from "../Button";
 import { Checkbox } from "../fields/Checkbox";
 import { Input } from "../fields/Input";
 import { RadioGroup } from "../fields/RadioGroup";
@@ -108,3 +110,37 @@ export const NarrowRefusal: Story = {
     </YStack>
   ),
 };
+
+function SubmissionPathsFixture() {
+  const [calls, setCalls] = useState(0);
+  return (
+    <YStack gap="$3" width={360} maxWidth="100%" padding="$4">
+      <SizableText data-testid="submit-calls">onSubmit calls: {calls}</SizableText>
+      <Form
+        saveBar={{ forceVisible: true, onSaved: action("onSaved") }}
+        formOptions={{ defaultValues: { name: "service-example" } }}
+        onSubmit={async (values) => {
+          setCalls((count) => count + 1);
+          action("onSubmit")(values);
+          throw new Error("The record changed. Refresh and retry.");
+        }}
+      >
+        <Input name="name" label="Service name" />
+        <Button action="submit">Submit</Button>
+      </Form>
+    </YStack>
+  );
+}
+
+export const SubmissionPaths: Story = {
+  name: "Submission paths",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Every path into one refusing onSubmit: Enter in the field (HTML submit), Submit (Button action=submit), Save, and Cmd/Ctrl-S. The counter shows how many times onSubmit ran, so each activation must add exactly one and every path must show the same failure.",
+      },
+    },
+  },
+  render: () => <SubmissionPathsFixture />,
+};

package/src/ContextualSaveBar/UnsavedChangesDialog.tsx

@@ -1,6 +1,6 @@
 import { useResolvedKnobs, warnCancelDisabled } from "@multiplatform.one/theme";
 import { useEffect } from "react";
-import { Dialog, Paragraph, XStack, isWeb } from "tamagui";
+import { Dialog, Paragraph, XStack } from "tamagui";
 import { Button } from "../Button";
 import { formCommonColors } from "../shared/colorRamps";
 import { useReturnFocusOnClose } from "../shared/focusManagement";
@@ -61,6 +61,8 @@ export function UnsavedChangesDialog({
           maxWidth={440}
           padding="$4"
           gap="$4"
+          {...knobProps.elevatedSurface}
+          elevate={false}
           backgroundColor="$background"
           borderColor="$borderColor"
           borderWidth={1}
@@ -71,16 +73,6 @@ export function UnsavedChangesDialog({
           data-mp-savebar-guard=""
           onPointerDownOutside={(e) => e.preventDefault()}
           onInteractOutside={(e) => e.preventDefault()}
-          {...(isWeb
-            ? {
-                boxShadow: "0 12px 24px rgba(0,0,0,0.12)",
-              }
-            : {
-                shadowColor: "#000",
-                shadowOpacity: 0.12,
-                shadowRadius: 24,
-                shadowOffset: { width: 0, height: 12 },
-              })}
         >
           <Dialog.Title {...knobProps.body} fontSize="$4">
             {t("Discard unsaved changes?")}

package/src/ContextualSaveBar/index.tsx

@@ -1,10 +1,11 @@
 import { useResolvedKnobs, warnCancelDisabled, type KnobProps } from "@multiplatform.one/theme";
 import { Store, useStore } from "@tanstack/react-store";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { AnimatePresence, Text, XStack, isWeb } from "tamagui";
 import { Button } from "../Button";
 import { collectFormFieldErrors } from "../ErrorSummary";
 import { useFormContext } from "../Form";
+import { getFormSubmission } from "../Form/submissionController";
 import { Spinner } from "../Spinner";
 import { formCommonColors } from "../shared/colorRamps";
 import { t } from "../shared/t";
@@ -86,8 +87,10 @@ function statusCopy(args: {
   if (args.isSubmitting) return { text: t("Saving…"), failed: false };
   if (args.saveError) {
     return {
-      text: t("Couldn't save — {{error}}. Edits are kept on this page.", {
-        error: args.saveError,
+      text: t("Couldn't save — {{error}} Edits are kept on this page.", {
+        error: /[.!?。！？]$/u.test(args.saveError.trimEnd())
+          ? args.saveError.trimEnd()
+          : `${args.saveError.trimEnd()}.`,
       }),
       failed: true,
     };
@@ -138,7 +141,12 @@ export function ContextualSaveBar({
   const form = useFormContext();
   const { knobProps, elevation } = useResolvedKnobs();
   const snap = useSaveBarSnapshot();
-  const [saveError, setSaveError] = useState<string | null>(null);
+  const submission = getFormSubmission(form);
+  const { error: saveError } = useSyncExternalStore(
+    submission.subscribe,
+    submission.getSnapshot,
+    submission.getSnapshot,
+  );
   const [discardOpen, setDiscardOpen] = useState(false);
 
   const stagedDirty = dirtyCount(snap.fieldMeta);
@@ -161,9 +169,8 @@ export function ContextualSaveBar({
 
   const handleSave = useCallback(async () => {
     if (snap.isSubmitting) return;
-    setSaveError(null);
     try {
-      await form.handleSubmit();
+      if ((await submission.submit()) !== "success") return;
       const errors = fieldErrorCount((form.store.state.fieldMeta ?? {}) as FieldMetaMap);
       if (errors > 0) return;
       const values = form.store.state.values as Record<string, unknown>;
@@ -177,18 +184,17 @@ export function ContextualSaveBar({
       onSaved?.(values);
       restoreFocusToForm();
     } catch (error) {
-      const text = error instanceof Error ? error.message : String(error);
-      setSaveError(text || "network unreachable");
+      submission.reportError(error);
     }
-  }, [form, onSaved, restoreFocusToForm, snap.isSubmitting]);
+  }, [form, onSaved, restoreFocusToForm, snap.isSubmitting, submission]);
 
   const handleDiscardCommit = useCallback(() => {
-    setSaveError(null);
+    submission.clearError();
     form.reset();
     setDiscardOpen(false);
     if (blocker.state === "blocked") blocker.proceed();
     restoreFocusToForm();
-  }, [blocker, form, restoreFocusToForm]);
+  }, [blocker, form, restoreFocusToForm, submission]);
 
   const handleKeepEditing = useCallback(() => {
     setDiscardOpen(false);

package/src/ErrorSummary.stories.tsx

@@ -2,12 +2,13 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Input as TamaguiInput, Paragraph, YStack } from "tamagui";
+import { Paragraph, YStack } from "tamagui";
 import { Button } from "./Button";
 import { ErrorSummary, collectFormFieldErrors } from "./ErrorSummary";
 import { FieldLayout } from "./fieldLayout";
 import { Form } from "./Form";
 import { FormSection } from "./FormSection";
+import { Input as InputParts } from "./InputParts";
 
 const meta: Meta<typeof ErrorSummary> = {
   title: "Forms/ErrorSummary",
@@ -144,18 +145,26 @@ export const FocusesTheFieldOnPress: Story = {
             <ErrorSummary errors={errors} disableAutoFocus onFocusField={action("onFocusField")} />
             <FormSection label="Sign in">
               <FieldLayout id="email" label="Email">
-                <TamaguiInput
-                  id="email"
-                  placeholder="you@example.com"
-                  onChangeText={(text) => form.setFieldValue("email", text)}
-                />
+                <InputParts>
+                  <InputParts.Box>
+                    <InputParts.Area
+                      id="email"
+                      placeholder="you@example.com"
+                      onChangeText={(text) => form.setFieldValue("email", text)}
+                    />
+                  </InputParts.Box>
+                </InputParts>
               </FieldLayout>
               <FieldLayout id="password" label="Password">
-                <TamaguiInput
-                  id="password"
-                  secureTextEntry
-                  onChangeText={(text) => form.setFieldValue("password", text)}
-                />
+                <InputParts>
+                  <InputParts.Box>
+                    <InputParts.Area
+                      id="password"
+                      secureTextEntry
+                      onChangeText={(text) => form.setFieldValue("password", text)}
+                    />
+                  </InputParts.Box>
+                </InputParts>
               </FieldLayout>
             </FormSection>
             <Button onPress={submit}>Submit</Button>

package/src/FieldDisplay/FieldDisplay.spec.tsx

@@ -4,8 +4,9 @@
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset } from "@multiplatform.one/theme";
-import { cleanup } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { GeocoderProvider } from "../fields/Geolocation/geocoderContext";
 import { FieldDisplay } from "./index";
 import { EMPTY } from "./formatters";
 
@@ -135,4 +136,48 @@ describe("FieldDisplay", () => {
     expect(result.container.querySelector("canvas")).toBeNull();
     expect(result.container.textContent?.split("SKU-001234").length).toBe(2); // exactly once
   });
+
+  describe("geolocation", () => {
+    const helsinki = { lat: 60.16952, lng: 24.93545 };
+
+    it("reads a pair from an object or a stored JSON string", () => {
+      const object = renderWithProviders(<FieldDisplay field="geolocation" value={helsinki} />);
+      expect(object.container.textContent).toContain("60.1695, 24.9354");
+      cleanup();
+      const json = renderWithProviders(
+        <FieldDisplay field="geolocation" value={JSON.stringify(helsinki)} />,
+      );
+      expect(json.container.textContent).toContain("60.1695, 24.9354");
+      expect(json.container.textContent).not.toContain("{");
+    });
+
+    it("shows the provider's address in place of the pair", async () => {
+      const reverseGeocode = vi.fn().mockResolvedValue({
+        ...helsinki,
+        label: "Mannerheimintie 3",
+        description: "Kamppi, Helsinki",
+      });
+      const result = renderWithProviders(
+        <GeocoderProvider geocoder={{ geocode: vi.fn(), reverseGeocode }}>
+          <FieldDisplay field="geolocation" value={JSON.stringify(helsinki)} />
+        </GeocoderProvider>,
+      );
+      await waitFor(() => {
+        expect(result.container.textContent).toContain("Mannerheimintie 3, Kamppi, Helsinki");
+      });
+      expect(result.container.textContent).not.toContain("60.1695");
+      expect(reverseGeocode).toHaveBeenCalledWith(helsinki);
+    });
+
+    it("keeps the pair when the provider fails or finds nothing", async () => {
+      const reverseGeocode = vi.fn().mockRejectedValue(new Error("down"));
+      const result = renderWithProviders(
+        <GeocoderProvider geocoder={{ geocode: vi.fn(), reverseGeocode }}>
+          <FieldDisplay field="geolocation" value={helsinki} />
+        </GeocoderProvider>,
+      );
+      await waitFor(() => expect(reverseGeocode).toHaveBeenCalled());
+      expect(result.container.textContent).toContain("60.1695, 24.9354");
+    });
+  });
 });

package/src/FieldDisplay/index.tsx

@@ -24,6 +24,8 @@ import type { SizeTokens } from "tamagui";
 import { Image, Text, View, XStack, getVariableValue, isWeb, useTheme } from "tamagui";
 import { Chip, type ChipColor, type ChipSize } from "../Chip";
 import { BarcodePreview } from "../fields/Barcode/BarcodePreview";
+import { useReverseGeocodedLabel } from "../fields/Geolocation/geocoderContext";
+import { parseGeoValue } from "../fields/Geolocation/geoValue";
 import { formControlColors, formSelectedColors } from "../shared/colorRamps";
 import { clampRadiusForControl } from "../shared/utils";
 import { useIsInTableCell } from "../shared/tableCellContext";
@@ -587,20 +589,26 @@ function SignatureDisplay({ value }: { value: any }) {
   return <TextCell>{hasInk ? t("signed") : EMPTY}</TextCell>;
 }
 
+function geoPair(value: unknown): { lat: number; lng: number } | null {
+  if (typeof value === "string") return parseGeoValue(value);
+  if (typeof value !== "object" || value === null) return null;
+  const record = value as Record<string, unknown>;
+  const lat = record.lat ?? record.latitude;
+  const lng = record.lng ?? record.lon ?? record.longitude;
+  return typeof lat === "number" && typeof lng === "number" ? { lat, lng } : null;
+}
+
 function GeolocationDisplay({ value }: { value: any }) {
-  if (value == null) return <TextCell>{EMPTY}</TextCell>;
-  if (typeof value === "object" && value !== null) {
-    const lat = (value as any).lat ?? (value as any).latitude;
-    const lng = (value as any).lng ?? (value as any).lon ?? (value as any).longitude;
-    if (typeof lat === "number" && typeof lng === "number") {
-      return (
-        <TextCell mono>
-          {lat.toFixed(4)}, {lng.toFixed(4)}
-        </TextCell>
-      );
-    }
-  }
-  return <TextCell>{asText(value)}</TextCell>;
+  const pair = geoPair(value);
+  const address = useReverseGeocodedLabel(pair);
+  if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
+  if (!pair) return <TextCell>{asText(value)}</TextCell>;
+  if (address) return <TextCell>{address}</TextCell>;
+  return (
+    <TextCell mono>
+      {pair.lat.toFixed(4)}, {pair.lng.toFixed(4)}
+    </TextCell>
+  );
 }
 
 function RichTextDisplay({ value }: { value: any }) {