@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -68,8 +68,6 @@ export type MultiDatePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the multi-date picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
   };
 
 // ---------------------------------------------------------------------------
@@ -332,12 +330,11 @@ export function MultiDatePicker<
     size,
     onBlur: _onBlur,
     skeleton,
-    compact,
     id: idProp,
     ..._restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name, isEmptyDates);
   const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
   const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
@@ -459,7 +456,6 @@ export function MultiDatePicker<
             open={open}
             onReset={() => handleClear(fieldChange)}
             onButtonPress={openPicker}
-            error={!!hasError}
             // SB-KS-04: without the field id the sibling FieldLayout label's
             // `htmlFor` resolves to nothing — a dangling label and a control
             // with no accessible name.
@@ -507,7 +503,10 @@ export function MultiDatePicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
           {renderPopover(!!errorProp, undefined, onChange)}
         </InputParts>
       </FieldLayout>
@@ -543,7 +542,10 @@ export function MultiDatePicker<
               // LC-40: see standalone branch — FieldLayout carries dimWhole.
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderPopover(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", _onBlur),

package/src/fields/DatePicker/catalog.tsx

@@ -66,8 +66,6 @@ export type DatePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the date picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
     /** Standalone controlled value (Date or ISO string). Ignored when used inside a form. */
     value?: Date | string | null;
     /**
@@ -205,12 +203,11 @@ export function DatePicker<
     readOnly,
     onBlur,
     skeleton,
-    compact,
     id: idProp,
     ..._restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
 
@@ -338,7 +335,6 @@ export function DatePicker<
               if (selectedDate) setDisplayDate(selectedDate);
               setOpen(true);
             }}
-            error={!!hasError}
             id={id}
             // Labelled: FieldLayout's Label wires `aria-labelledby` onto this
             // id itself — naming it here too doubles the spoken name.
@@ -388,7 +384,12 @@ export function DatePicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderPopover(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -422,7 +423,10 @@ export function DatePicker<
               // LC-40: see standalone branch — FieldLayout carries dimWhole.
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderPopover(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", onBlur),

package/src/fields/DatePicker/index.native.tsx

@@ -50,7 +50,6 @@ export type DatePickerProps<
     maxDate?: Date;
     disabled?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     value?: Date | string | null;
     onChange?: (value: Date | null) => void;
     onValueChange?: (value: Date | null) => void;
@@ -106,11 +105,10 @@ export function DatePicker<
     readOnly,
     onBlur,
     skeleton,
-    compact,
     id: idProp,
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
   const [open, setOpen] = useState(false);
@@ -169,7 +167,6 @@ export function DatePicker<
             open={open}
             onReset={() => commit(null, fieldChange)}
             onButtonPress={() => {}}
-            error={!!hasError}
             id={id}
             aria-label={hasLabel ? undefined : t("Date")}
             aria-required={required || undefined}
@@ -217,7 +214,12 @@ export function DatePicker<
         onBlur={onBlur}
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderControl(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderControl(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -247,7 +249,10 @@ export function DatePicker<
               knobProps={knobProps}
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderControl(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", onBlur),

package/src/fields/DatePicker/parts.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import {
   CalendarBlankIcon,
   CaretLeftIcon,
@@ -22,7 +23,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { AnimatePresence, Text, View, isWeb } from "tamagui";
+import { AnimatePresence, SizableText, Text, View, isWeb } from "tamagui";
 
 import { FloatingPanel, floatingPanelActionProps, isNestedPanelAction } from "../../FloatingPanel";
 import type { PanelActionEvent } from "../../FloatingPanel/nestedAction";
@@ -190,7 +191,7 @@ export function dayCellRadius(knobProps: { pointy?: boolean }): {
 
 /** Calendar chrome sits one density step below the page (LC-73). */
 export function useCalendarKnobs() {
-  return useResolvedKnobs({ compact: true });
+  return useResolvedKnobs();
 }
 
 /** Overlay/dialog calendar frame: compact padding + a 7-cell content width. */
@@ -487,7 +488,7 @@ export function CalendarDays({
   return (
     <AnimatePresence key={animationKey}>
       <View
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.slide)}
         {...animation}
         alignSelf="center"
         gap="$1"
@@ -639,9 +640,9 @@ export function CalendarHeader({
 
       <View flexDirection="row" alignItems="center" {...knobProps.gap}>
         <CalendarTextButton onPress={onMonthPress}>
-          <Text color="$color" {...knobProps.label} {...knobProps.textWeight} fontWeight="600">
+          <SizableText color="$color" size={knobProps.label.fontSize} {...knobProps.heading}>
             {monthName}
-          </Text>
+          </SizableText>
         </CalendarTextButton>
         <CalendarTextButton onPress={onYearPress}>
           <Text color={formCommonColors.muted} {...knobProps.label} {...knobProps.textWeight}>
@@ -681,7 +682,7 @@ export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGr
     <AnimatePresence key={animationKey}>
       <View
         {...animation}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.slide)}
         flexDirection="row"
         flexWrap="wrap"
         width={px * 7}
@@ -786,7 +787,7 @@ export function YearGrid({
       <AnimatePresence key={animationKey}>
         <View
           {...animation}
-          transition={knobProps.transition}
+          {...transitionProps(knobProps.motion.slide)}
           flexDirection="row"
           flexWrap="wrap"
           width={px * 7}
@@ -852,7 +853,6 @@ interface DatePickerInputTriggerProps {
   open?: boolean;
   onReset: () => void;
   onButtonPress: () => void;
-  error?: boolean;
   id?: string;
   /** Empty-state glyph. Datetime uses calendar; TimePicker uses clock. */
   glyph?: "calendar" | "clock";
@@ -896,7 +896,6 @@ export function DatePickerInputTrigger({
   onReset,
   disabled,
   placeholder,
-  error,
   id,
   open,
   glyph = "calendar",
@@ -938,7 +937,6 @@ export function DatePickerInputTrigger({
       pointerEvents={isWeb ? undefined : "none"}
     >
       <InputParts.Box
-        theme={error ? "error" : undefined}
         // Yoga has no intrinsic TextInput width to size this row child.
         {...(isWeb ? undefined : { flex: 1, minWidth: 0 })}
         // Elevation is an overlay recipe: it belongs on the open panel, never
@@ -1033,7 +1031,6 @@ export function DatePickerPopoverShell({
       disabled={disabled}
       sizing="grow"
       contentPadding="none"
-      compact
       widthMode="fit-content"
       triggerA11y={triggerA11y}
     >

package/src/fields/Duration/Duration.spec.tsx

@@ -165,9 +165,9 @@ describe("Duration", () => {
       if (boxH > 0 && inputH > 0) expect(inputH).toBeLessThanOrEqual(boxH + 0.5);
     });
 
-    it("pins six default preset chips at the $2 / 28px family", () => {
+    it("pins six default preset chips at the $2 / 26px family", () => {
       expect(DURATION_PRESET_SIZE).toBe("$2");
-      expect(sizeRecipeForToken(DURATION_PRESET_SIZE).height).toBe(28);
+      expect(sizeRecipeForToken(DURATION_PRESET_SIZE).height).toBe(26);
       const result = renderWithProviders(<Duration label="P" value={0} />);
       const chips = result.container.querySelectorAll("[data-duration-preset]");
       expect(chips).toHaveLength(6);

package/src/fields/Duration/Duration.stories.tsx

@@ -29,7 +29,6 @@ const meta: Meta<typeof Duration> = {
     showSeconds: { control: "boolean", description: "Show seconds segment" },
     hideDays: { control: "boolean", description: "Fold days into hours" },
     readOnly: { control: "boolean" },
-    compact: { control: "boolean" },
     clockIcon: { control: false, description: "Leading clock; pass null to hide" },
     skeleton: { control: "boolean" },
     placeholder: { control: "text" },
@@ -211,8 +210,8 @@ export const HideClock: Story = {
 
 export const Compact: Story = {
   args: {
+    size: "$3",
     label: "Compact",
     value: 1800,
-    compact: true,
   },
 };

package/src/fields/Duration/index.tsx

@@ -52,7 +52,7 @@ const defaultPresets: DurationPreset[] = [
   { label: "8h", seconds: 28800 },
 ];
 
-/** Preset chips stay on the $2 row (28px). The field size knob does not reach them. */
+/** Preset chips stay on the $2 row (28px). The field size token does not reach them. */
 export const DURATION_PRESET_SIZE = "$2" as const;
 
 function DurationSegment({
@@ -231,9 +231,8 @@ function DurationControl({
   );
 
   return (
-    <InputParts size={size || knobProps.sizeToken}>
+    <InputParts size={size || knobProps.sizeToken} {...(hasError ? { theme: "error" } : undefined)}>
       <InputParts.Box
-        theme={hasError ? "error" : undefined}
         elevation={undefined}
         disabled={disabled}
         role="group"
@@ -356,7 +355,6 @@ function DurationPresets({
         return (
           <Button
             key={preset.seconds}
-            compact
             size={DURATION_PRESET_SIZE}
             outlined={!selected}
             accent={selected}
@@ -406,8 +404,6 @@ export interface DurationProps {
   clockIcon?: ReactNode | null;
   /** When true, renders a skeleton placeholder instead of the duration picker */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 export function Duration({
@@ -433,13 +429,11 @@ export function Duration({
   placeholder = t("Select duration"),
   clockIcon,
   skeleton,
-  compact,
 }: DurationProps) {
   const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const isControlled = value !== undefined;

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -269,15 +269,15 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     },
   );
 
-  it("renders no standalone glyph — the CTA carries the upload mark inside the 44 control", () => {
+  it("renders no standalone glyph — the CTA carries the upload mark inside the 40 control", () => {
     const { container } = renderWithHouseThemes(
       <FileUpload label="Attachment" name="attachment" />,
     );
     const zone = getZone(container);
-    // The CTA is the house 44 control (held exception: Bento draws 36/$3).
+    // The CTA is the house 40 control (held exception: Bento draws 36).
     const cta = zone.querySelector("[data-mp-button-height]") as HTMLElement;
     expect(cta).toBeTruthy();
-    expect(cta.getAttribute("data-mp-button-height")).toBe("44");
+    expect(cta.getAttribute("data-mp-button-height")).toBe("40");
     // Every svg in the empty zone lives INSIDE the CTA — no standalone glyph.
     const svgs = Array.from(zone.querySelectorAll("svg"));
     expect(svgs.length).toBeGreaterThan(0);
@@ -288,7 +288,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(zone.textContent).toContain("Drag a file into this area");
   });
 
-  it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (32 painted, hitSlop 44)", async () => {
+  it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (29 painted, hitSlop 44)", async () => {
     const { container } = renderWithHouseThemes(
       <FileUpload label="Attachment" name="attachment" />,
     );
@@ -311,12 +311,12 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(sizeLine).toBeTruthy();
     expect(sizeLine.className).toMatch(/_fow-700/);
 
-    // Remove: a circular filled $color12 disc painted at nestedControl (32)
-    // with hitSlop restoring the 44 floor (data-mp-press-slop 6 → 32+12=44).
+    // Remove: a circular filled $color12 disc painted at nestedControl (29)
+    // with hitSlop restoring the 44 floor (data-mp-press-slop 8 → 29+16=45).
     const remove = flist.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
     expect(remove).toBeTruthy();
-    expect(remove.getAttribute("data-nested-px")).toBe("32");
-    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(remove.getAttribute("data-nested-px")).toBe("29");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("8");
     expect(remove.className).toMatch(/_bg-color12/);
     // The inverse ✕ rides inside the disc.
     expect(remove.querySelector("svg")).toBeTruthy();
@@ -346,20 +346,6 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     }
   });
 
-  it("keeps compact a space-only dial — CTA stays 44 and remove stays nested 32 (LC-76)", async () => {
-    const { container } = renderWithHouseThemes(
-      <FileUpload label="Attachment" name="attachment" compact />,
-    );
-    const zone = getZone(container);
-    const cta = zone.querySelector("[data-mp-button-height]") as HTMLElement;
-    expect(cta.getAttribute("data-mp-button-height")).toBe("44");
-
-    await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
-    const remove = zone.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
-    expect(remove.getAttribute("data-nested-px")).toBe("32");
-    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
-  });
-
   it("renders image picks with an in-zone preview thumb at the nested-chrome step", async () => {
     if (typeof URL.createObjectURL !== "function") {
       (URL as any).createObjectURL = () => "blob:mock";
@@ -380,7 +366,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     // AC-4 image clause (Bento Image Picker): an image pick is a TILE in the
     // in-zone grid, not a row — the thumb IS the tile, and the remove disc
     // rides its top-right corner (absolute, negative inset) instead of
-    // trailing on a row. Same 32/hitSlop-44 disc the rows carry.
+    // trailing on a row. Same 29/hitSlop-44 disc the rows carry.
     const grid = flist.querySelector('[data-file-upload="tiles"]') as HTMLElement;
     expect(grid).toBeTruthy();
     const tile = grid.querySelector('[data-file-upload="tile"]') as HTMLElement;
@@ -388,8 +374,8 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(tile.contains(thumb)).toBe(true);
     const remove = tile.querySelector('[aria-label="Remove diagram.png"]') as HTMLElement;
     expect(remove).toBeTruthy();
-    expect(remove.getAttribute("data-nested-px")).toBe("32");
-    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(remove.getAttribute("data-nested-px")).toBe("29");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("8");
     const corner = tile.querySelector('[data-file-upload="tile-remove"]') as HTMLElement;
     expect(corner).toBeTruthy();
     expect(corner.contains(remove)).toBe(true);

package/src/fields/FileUpload/FileUpload.stories.tsx

@@ -139,7 +139,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <FileUpload label="Small" size="$2" placeholder="Upload a file" />
-      <FileUpload label="Medium (default)" size="$3" placeholder="Upload a file" />
+      <FileUpload label="Medium ($3)" size="$3" placeholder="Upload a file" />
       <FileUpload label="Large" size="$4" placeholder="Upload a file" />
     </YStack>
   ),

package/src/fields/FileUpload/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
@@ -102,13 +103,18 @@ export type FileUploadProps<
     pickerMode?: NativePickerMode;
     /** When true, renders a skeleton placeholder instead of the file upload */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
     /**
      * Extra controls in the CTA row (Attach "From Library"). The dropzone
      * stays the OS-picker target (LC-23); these are the carve-out children.
      */
     actions?: ReactNode;
+    /**
+     * The file the value already names (a stored URL), shown as a preview
+     * tile until a new pick replaces it — never as a raw path.
+     */
+    existing?: { src: string; name?: string } | null;
+    /** Removes the existing file; given, its tile carries a remove disc. */
+    onExistingRemove?: () => void;
   };
 
 const UploadAreaFrame = styled(YStack, {
@@ -221,8 +227,9 @@ export function FileUpload<
     disabled,
     readOnly,
     skeleton,
-    compact,
     actions,
+    existing,
+    onExistingRemove,
     id: idProp,
     ...fieldProps
   } = useProps(props);
@@ -230,7 +237,6 @@ export function FileUpload<
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form,
     id: idProp,
-    compact,
   });
   if (isWeb) ensureKeyboardModalityTracking();
   const [kbZoneFocus, setKbZoneFocus] = useState(false);
@@ -254,8 +260,7 @@ export function FileUpload<
   const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
   // Intentional: extract the nested-chrome step (32 at medium) for the row
   // thumb/glyph boxes — in-zone previews are nested chrome, not press
-  // targets, so they take the px without the fragment's hitSlop. LC-76 keeps
-  // compact a space-only dial, so the old `compact ? 24 : 32` size fork drops.
+  // targets, so they take the px without the fragment's hitSlop.
   const rowMediaPx = knobProps.nestedControl.px;
   // Intentional: extract the recipe icon step (16 at the 44 control) for the
   // row file glyph — same held "icon 16" exception the CTA carries.
@@ -703,7 +708,10 @@ export function FileUpload<
   }
 
   const canInteract = !disabled && !readOnly;
-  const hasRows = selectedFiles.length > 0 || transfers.length > 0;
+  const showExisting =
+    Boolean(existing?.src) && selectedFiles.length === 0 && transfers.length === 0;
+  const existingName = existing?.name || fileNameFromSrc(existing?.src ?? "");
+  const hasRows = selectedFiles.length > 0 || transfers.length > 0 || showExisting;
 
   const renderRemoveDisc = (ariaLabel: string, onPress: () => void) =>
     canInteract ? (
@@ -878,7 +886,7 @@ export function FileUpload<
         borderWidth={knobProps.borderRadius.borderWidth ?? 1}
         {...(errorProp ? { borderColor: formCommonColors.error } : undefined)}
         elevation={knobProps.elevation}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.control)}
         // CONTRACT (boards media-01..03): the getFieldHeight floor sits on
         // the FRAME, so the frame border-box measures 220 — hanging it on
         // the inner stack painted 222, a number no token expresses.
@@ -964,7 +972,13 @@ export function FileUpload<
           justifyContent="center"
           {...knobProps.gap}
         >
-          <XStack alignItems="center" {...knobProps.gap}>
+          <XStack
+            alignItems="center"
+            justifyContent="center"
+            flexWrap="wrap"
+            maxWidth="100%"
+            {...knobProps.gap}
+          >
             <Button
               onPress={requestFiles}
               disabled={!canInteract}
@@ -981,7 +995,7 @@ export function FileUpload<
             {actions}
           </XStack>
 
-          {selectedFiles.length === 0 && transfers.length === 0 && (
+          {selectedFiles.length === 0 && transfers.length === 0 && !showExisting && (
             <Text color={formCommonColors.muted} textAlign="center" {...knobProps.body}>
               {placeholder}
             </Text>
@@ -1010,6 +1024,43 @@ export function FileUpload<
             // The hairline tracks the frame edge's knob width — one dash voice.
             borderTopWidth={knobProps.borderRadius.borderWidth ?? 1}
           >
+            {showExisting && existing ? (
+              <UploadTileGridFrame
+                data-file-upload="tiles"
+                {...knobProps.gap}
+                {...knobProps.panelPadding}
+              >
+                <YStack
+                  data-file-upload="existing"
+                  position="relative"
+                  width={tilePx}
+                  height={tilePx}
+                >
+                  <Image
+                    borderRadius={cappedRadius}
+                    src={existing.src}
+                    alt={existingName}
+                    width={tilePx}
+                    height={tilePx}
+                    objectFit="cover"
+                  />
+                  {onExistingRemove ? (
+                    <YStack
+                      data-file-upload="tile-remove"
+                      position="absolute"
+                      top={tileRemoveInset}
+                      right={tileRemoveInset}
+                      zIndex={1}
+                    >
+                      {renderRemoveDisc(
+                        t("Remove {{name}}", { name: existingName }),
+                        onExistingRemove,
+                      )}
+                    </YStack>
+                  ) : null}
+                </YStack>
+              </UploadTileGridFrame>
+            ) : null}
             {imageTiles.length > 0 ? (
               <UploadTileGridFrame
                 data-file-upload="tiles"
@@ -1182,6 +1233,17 @@ export function FileUpload<
   );
 }
 
+/** The last path segment of a stored file URL, decoded, without its query. */
+function fileNameFromSrc(src: string): string {
+  const path = src.split(/[?#]/)[0] ?? "";
+  const segment = path.split("/").filter(Boolean).pop() ?? "";
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
+
 /**
  * The value shape a native pick binds. `{ uri, name, type, size }` is what
  * React Native's FormData accepts for a multipart upload, so a form value can

package/src/fields/Geolocation/Geolocation.spec.tsx

@@ -1,3 +1,4 @@
+import { defaultKnobs, resolveKnobs } from "@multiplatform.one/theme";
 import { describe, expect, it, vi, afterEach } from "vitest";
 import { fireEvent, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -548,6 +549,10 @@ describe("Geolocation", () => {
       const result = renderWithProviders(
         <Geolocation label="Loading" name="l" locationIcon={locationIcon} skeleton />,
       );
+      const search = result.container.querySelectorAll(".is_Skeleton")[0];
+      expect(getComputedStyle(search).height).toBe(
+        `${resolveKnobs(defaultKnobs).knobProps.control.height}px`,
+      );
       expect(result.container.querySelector("[data-testid='geolocation-map']")).toBeNull();
       expect(result.container.querySelector("[aria-label='Locate']")).toBeNull();
       expect(result.container.querySelector("input")).toBeNull();