@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/FormSection.tsx

@@ -14,7 +14,7 @@ export interface FormSectionProps {
   maxWidth?: number | "fluid";
   /**
    * Gap between fields inside the section. Defaults to the semantic
-   * within-group gap (`knobProps.gap`, DG-LAY-03) so the space knob
+   * within-group gap (`knobProps.gap`, DG-LAY-03) so the preset's scale
    * restyles form rhythm; explicit values eject.
    */
   gap?: number | string;
@@ -25,8 +25,6 @@ export interface FormSectionProps {
    * so assistive tech groups the fields. Native keeps a heading label.
    */
   fieldset?: boolean;
-  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
-  compact?: boolean;
 }
 
 /**
@@ -35,7 +33,7 @@ export interface FormSectionProps {
  * Field gap defaults to the within-group semantic gap (`knobProps.gap`);
  * stack multiple sections with {@link FormSectionStack}, whose gap defaults
  * to the between-groups gap (`knobProps.gapLg`) — always one step larger, so
- * section rhythm stays larger than field rhythm at every space knob value
+ * section rhythm stays larger than field rhythm on every scale
  * (DG-FORM-06 / DG-LAY-03). Gallery **Fieldset** is this component (also
  * exported as {@link Fieldset}).
  */
@@ -46,10 +44,9 @@ export function FormSection({
   gap,
   testID,
   fieldset = true,
-  compact,
 }: FormSectionProps) {
   const useFieldset = fieldset && isWeb;
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const { knobProps } = useResolvedKnobs();
   const resolvedGap = gap ?? knobProps.gap.gap;
 
   return (
@@ -58,8 +55,7 @@ export function FormSection({
       data-mpo-form-section=""
       data-mpo-fieldset={useFieldset ? "" : undefined}
       data-field-gap={String(resolvedGap)}
-      data-density={knobProps.density}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       data-testid={testID}
       gap={resolvedGap as never}
       width="100%"
@@ -134,8 +130,7 @@ export function FormSectionStack({ children, gap }: FormSectionStackProps) {
     <YStack
       data-mpo-form-section-stack=""
       data-section-gap={String(resolvedGap)}
-      data-density={knobProps.density}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       gap={resolvedGap as never}
       width="100%"
     >

package/src/InputParts/InputParts.stories.tsx

@@ -57,7 +57,7 @@ export const Anatomy: Story = {
  */
 export const FocusRingOnTheBox: Story = {
   render: () => (
-    <YStack gap="$4" width={320}>
+    <YStack gap="$4" width={320} maxWidth="100%">
       <Paragraph size="$2">Tab in — the border box rings, the input does not.</Paragraph>
       <InputParts>
         <InputParts.Box>
@@ -74,7 +74,7 @@ export const FocusRingOnTheBox: Story = {
 /** Leading and trailing slots. The trailing end-cap is square by size recipe. */
 export const Adornments: Story = {
   render: () => (
-    <YStack gap="$4" width={320}>
+    <YStack gap="$4" width={320} maxWidth="100%">
       <InputParts>
         <InputParts.Box>
           <InputParts.Icon adornment="leading">
@@ -152,7 +152,7 @@ export const TrailingButton: Story = {
  */
 export const MetaReservesOneLine: Story = {
   render: () => (
-    <YStack gap="$5" width={320}>
+    <YStack gap="$5" width={320} maxWidth="100%">
       <InputParts>
         <InputParts.Label>Helper</InputParts.Label>
         <InputParts.Box>
@@ -211,7 +211,7 @@ export const MultiLine: Story = {
 /** Disabled chrome lives on the Box, not on the Area. */
 export const DisabledBox: Story = {
   render: () => (
-    <YStack gap="$4" width={320}>
+    <YStack gap="$4" width={320} maxWidth="100%">
       <InputParts>
         <InputParts.Box>
           <InputParts.Area placeholder="Enabled" />

package/src/InputParts/index.spec.tsx

@@ -138,3 +138,28 @@ describe("LC-84 TEXT-INSET — Area chromeless, keyboard map", () => {
     expect(area.getAttribute("autocomplete") === "tel" || area.autocomplete === "tel").toBe(true);
   });
 });
+
+describe("Input frame motion", () => {
+  it("limits the frame transition to control paint and transform", () => {
+    const { container } = renderWithProviders(
+      <Input>
+        <Input.Box>
+          <Input.Area />
+        </Input.Box>
+      </Input>,
+    );
+    const frame = container.querySelector<HTMLElement>("[data-mp-input-box]");
+    const properties = Array.from(
+      (frame?.style.transition ?? "").matchAll(/(?:^|,\s+)([a-z-]+)\s+\d+ms/g),
+      (match) => match[1],
+    );
+    expect(properties).toEqual([
+      "background-color",
+      "border-color",
+      "color",
+      "opacity",
+      "transform",
+    ]);
+    expect(frame?.style.transition).not.toMatch(/outline|height|all|box-shadow/);
+  });
+});

package/src/InputParts/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import { getFontSized } from "@tamagui/get-font-sized";
 import type { SizeVariantSpreadFunction } from "@tamagui/web";
 import { useCallback, useEffect, useState, type ReactNode } from "react";
@@ -8,6 +9,7 @@ import type {
   FontSizeTokens,
   InputKeyboardType,
   InputTextContentType,
+  SizeTokens,
   TamaguiElement,
 } from "tamagui";
 import {
@@ -157,42 +159,6 @@ export const useForwardFocus = (target: RefObject<TamaguiElement | null>) => {
 // Default group styles
 // ---------------------------------------------------------------------------
 
-/**
- * Tamagui named transitions (`quick`, etc.) compile to `transition: all …`.
- * That tweens outline-color/width on blur — in dark theme `$outlineColor` is
- * near-white, so the ring flashes white while settling. Scope the frame
- * transition to non-outline paint props instead.
- */
-const inputFrameCssTimings: Record<string, string> = {
-  bouncy: "ease-in 200ms",
-  lazy: "ease-in 600ms",
-  slow: "ease-in 500ms",
-  medium: "ease-in-out 250ms",
-  quick: "ease-in 100ms",
-  tooltip: "ease-in 400ms",
-  snappy: "ease-out 80ms",
-  gentle: "ease-in-out 450ms",
-};
-
-export function getInputFrameTransitionProps(transition: string | undefined) {
-  if (!transition) return undefined;
-  if (!isWeb) return { transition };
-  const timing = inputFrameCssTimings[transition] ?? inputFrameCssTimings.quick;
-  return {
-    // Prefer explicit CSS over Tamagui's `transition: all` named prop.
-    style: {
-      transition: [
-        `background-color ${timing}`,
-        `border-color ${timing}`,
-        `color ${timing}`,
-        `opacity ${timing}`,
-        `box-shadow ${timing}`,
-        `transform ${timing}`,
-      ].join(", "),
-    },
-  };
-}
-
 /** Resting outline: transparent + 0 width so blur never lands on theme `$outlineColor`. */
 const inputOutlineRest = {
   outlineWidth: 0,
@@ -642,9 +608,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           {...(knobProps.elevation == null ? { elevation: undefined } : knobProps.elevationChrome)}
           {...knobProps.borderRadius}
           {...sizeTableRadius}
-          {...getInputFrameTransitionProps(
-            typeof knobProps.transition === "string" ? knobProps.transition : undefined,
-          )}
+          {...transitionProps(knobProps.motion.control)}
           hoverStyle={{
             borderColor: formInputColors.border.hover,
             ...control.hoverKnobProps,
@@ -815,7 +779,10 @@ const InputAreaImpl = InputFrame.styleable<{
 }>((areaProps, ref) => {
   const { setFocused } = FocusContext.useStyledContext();
   const hydrationTouch = useTouchSurface();
-  const { size } = InputContext.useStyledContext();
+  const { size: contextSize } = InputContext.useStyledContext();
+  // The styleable receives the group's context props; the hook alone can
+  // read the default `$true` here.
+  const size = (areaProps as { size?: FontSizeTokens }).size ?? contextSize;
   const {
     secureTextEntry,
     keyboardType,
@@ -850,7 +817,9 @@ const InputAreaImpl = InputFrame.styleable<{
     minHeight?: number | string;
     maxHeight?: number | string;
   };
-  const { knobProps } = useResolvedKnobs();
+  // The group's size token, so the text reads the same recipe as its box: a
+  // field given `size` directly (no Surface) must not type at `$true`.
+  const { knobProps } = useResolvedKnobs({ size: size as SizeTokens });
   const theme = useTheme();
   const fieldDescribedBy = useFieldDescribedBy();
   const nativeA11yProps = useNativeFieldA11yProps();
@@ -1071,9 +1040,9 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
   };
   const { size: contextSize, color: contextColor } = InputContext.useStyledContext();
   const hydrationTouch = useTouchSurface();
-  const { knobProps } = useResolvedKnobs();
-  const theme = useTheme();
   const size = (sizeProp ?? contextSize) as FontSizeTokens;
+  const { knobProps } = useResolvedKnobs({ size: size as SizeTokens });
+  const theme = useTheme();
   const paint = resolveGlyphPaint(theme as never, colorProp ?? contextColor);
   const getThemedIcon = useGetThemedIcon({
     size: knobProps.controlIcon.width,
@@ -1272,7 +1241,7 @@ const InputContainerImpl = InputContainerFrame.styleable((props, forwardedRef) =
       ref={forwardedRef}
       size={knobProps.sizeToken}
       {...knobProps.body}
-      {...knobProps.gap}
+      {...knobProps.gapSm}
       // LC-06/LC-10 (UX-P12): inside a table cell the field root must adopt
       // the cell width — the raw web <input> carries an intrinsic width that
       // otherwise floors the whole column at ~200px and lays out past the

package/src/InputParts/layoutGap.spec.tsx

@@ -1,23 +1,24 @@
 import { createRef } from "react";
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup } from "@testing-library/react";
+import type { SizeTokens } from "tamagui";
 import { afterEach, expect, it } from "vitest";
 import { Input } from "./index";
 
 afterEach(cleanup);
 
-function measure(size: "small" | "medium", space: "small" | "large", gap?: number) {
+function measure(size: SizeTokens, gap?: number) {
   const ref = createRef<HTMLElement>();
   const { getByTestId } = renderWithProviders(
-    <Preset overrides={{ size, space }}>
+    <Surface size={size}>
       <Input testID="root" ref={ref as never} {...(gap === undefined ? {} : { gap })}>
         <Input.Label>Location</Input.Label>
         <Input.Box>
           <Input.Area placeholder="Location" />
         </Input.Box>
       </Input>
-    </Preset>,
+    </Surface>,
   );
   const root = getByTestId("root");
   expect(ref.current).toBe(root);
@@ -30,14 +31,11 @@ function measure(size: "small" | "medium", space: "small" | "large", gap?: numbe
   return value;
 }
 
-it("lets space change the multi-slot layout gap at a fixed control size", () => {
-  expect(measure("medium", "small")).not.toBe(measure("medium", "large"));
-});
-
-it("keeps the layout gap stable when only control size changes", () => {
-  expect(measure("small", "small")).toBe(measure("medium", "small"));
+it("keeps the layout gap on the spacing role when the control size token changes", () => {
+  expect(measure("$3")).toBe(measure("$4"));
+  expect(measure("$5")).toBe(measure("$4"));
 });
 
 it("preserves the consumer gap eject and forwarded root ref", () => {
-  expect(measure("medium", "large", 11)).toBe("11px");
+  expect(measure("$4", 11)).toBe("11px");
 });

package/src/Label/Label.spec.tsx

@@ -1,8 +1,19 @@
+import { Preset } from "@multiplatform.one/theme";
+import { defaultConfig } from "@tamagui/config/v5";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { createTamagui, TamaguiProvider } from "tamagui";
 import { describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Input as TamaguiInput } from "tamagui";
 import { Label } from "./index";
 
+const bodyConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  fonts: { ...configWithoutAnimations.fonts, body: defaultConfig.fonts.body },
+});
+
 describe("Label", () => {
   it("associates with a control via htmlFor", () => {
     const { container } = renderWithProviders(
@@ -71,3 +82,25 @@ describe("Label", () => {
     expect(["400", "normal"]).toContain(String(weight));
   });
 });
+
+describe("label body stop and weight knob", () => {
+  for (const [fontWeight, expected] of [
+    ["regular", "400"],
+    ["bold", "700"],
+  ] as const) {
+    it(`uses body $true and ${fontWeight} weight`, () => {
+      const { container } = renderWithProviders(
+        <TamaguiProvider config={bodyConfig} defaultTheme="light">
+          <Preset overrides={{ fontWeight }}>
+            <Label htmlFor="w">Name</Label>
+          </Preset>
+        </TamaguiProvider>,
+        { tamagui: false },
+      );
+      const label = container.querySelector("label")!;
+      expect(label.className).toContain("_fos-f-size-true");
+      expect(getComputedStyle(label).fontSize).toBe("15px");
+      expect(getComputedStyle(label).fontWeight).toBe(expected);
+    });
+  }
+});

package/src/Label/index.tsx

@@ -73,7 +73,6 @@ export function Label({
       {...knobProps.body}
       {...knobProps.label}
       {...type}
-      fontWeight="400"
       color={color}
       cursor={disabled ? "not-allowed" : htmlFor ? "pointer" : "default"}
       display="flex"

package/src/MediaPicker/MediaPicker.stories.tsx

@@ -0,0 +1,65 @@
+import { Button, Image, Paragraph, YStack } from "@multiplatform.one/components";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { MediaPickerError, type MediaSource, type PickedMedia } from "./types";
+import { useMediaPicker } from "./useMediaPicker";
+
+export function MediaPickerDemo({ capture = false }: { capture?: boolean }) {
+  const { pick, pending } = useMediaPicker();
+  const [image, setImage] = useState<PickedMedia | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const choose = async (source: MediaSource) => {
+    setError(null);
+    try {
+      const result = await pick({ source, bytes: capture });
+      if (result) setImage(result);
+    } catch (reason) {
+      setError(
+        reason instanceof MediaPickerError ? reason.message : "The image could not be opened.",
+      );
+    }
+  };
+  return (
+    <YStack gap="$3" padding="$4">
+      <Paragraph>{capture ? "Attach an image" : "Profile photo"}</Paragraph>
+      {error ? (
+        <Paragraph theme="error" role="alert">
+          {error}
+        </Paragraph>
+      ) : null}
+      {image ? (
+        <YStack gap="$2">
+          <Image
+            source={{ uri: image.uri }}
+            width="$12"
+            height="$12"
+            objectFit="contain"
+            accessibilityLabel="Selected image"
+          />
+          <Paragraph>
+            {image.mimeType} · {image.width} × {image.height}
+          </Paragraph>
+          {image.bytes ? <Paragraph>{image.bytes.byteLength} bytes</Paragraph> : null}
+        </YStack>
+      ) : null}
+      {capture ? (
+        <Button disabled={pending} onPress={() => void choose("camera")}>
+          Take photo
+        </Button>
+      ) : null}
+      <Button disabled={pending} onPress={() => void choose("library")}>
+        Choose photo
+      </Button>
+    </YStack>
+  );
+}
+
+const meta: Meta<typeof MediaPickerDemo> = {
+  title: "Forms/MediaPicker",
+  component: MediaPickerDemo,
+  excludeStories: ["MediaPickerDemo"],
+};
+export default meta;
+type Story = StoryObj<typeof MediaPickerDemo>;
+export const ProfilePhoto: Story = { args: { capture: false } };
+export const CaptureImage: Story = { args: { capture: true } };

package/src/MediaPicker/MediaPickerDemo.spec.tsx

@@ -0,0 +1,68 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  Preset,
+  boldPreset,
+  defaultPreset,
+  densePreset,
+  heroPreset,
+  registerPreset,
+  roomyPreset,
+} from "@multiplatform.one/theme";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MediaPickerDemo } from "./MediaPicker.stories";
+import { pickMedia } from "./pickMedia";
+import { MediaPickerError } from "./types";
+
+vi.mock("./pickMedia", () => ({ pickMedia: vi.fn() }));
+beforeEach(() => vi.mocked(pickMedia).mockReset().mockResolvedValue(null));
+afterEach(cleanup);
+
+const presets = {
+  default: defaultPreset,
+  bold: boldPreset,
+  hero: heroPreset,
+  dense: densePreset,
+  roomy: roomyPreset,
+};
+for (const [name, preset] of Object.entries(presets)) registerPreset(name, preset);
+
+describe.each(Object.keys(presets))("%s media compositions", (preset) => {
+  it.each(["light", "dark"] as const)("keeps camera and library controls in %s", async (theme) => {
+    renderWithProviders(
+      <Preset preset={preset} theme={theme}>
+        <MediaPickerDemo capture />
+      </Preset>,
+    );
+    expect(document.querySelector('input[type="file"]')).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Take photo" }));
+    await waitFor(() =>
+      expect(pickMedia).toHaveBeenCalledWith(
+        { source: "camera", bytes: true },
+        expect.any(AbortSignal),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Choose photo" })).not.toBeDisabled(),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Choose photo" }));
+    await waitFor(() =>
+      expect(pickMedia).toHaveBeenLastCalledWith(
+        { source: "library", bytes: true },
+        expect.any(AbortSignal),
+      ),
+    );
+  });
+});
+
+it("shows a permission error at the invoking control and allows retry", async () => {
+  vi.mocked(pickMedia).mockRejectedValueOnce(
+    new MediaPickerError("permission-denied", "Photo access was denied.", "library"),
+  );
+  renderWithProviders(<MediaPickerDemo />);
+  fireEvent.click(screen.getByRole("button", { name: "Choose photo" }));
+  expect(await screen.findByRole("alert")).toHaveTextContent("Photo access was denied.");
+  expect(screen.getByRole("button", { name: "Choose photo" })).not.toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Choose photo" }));
+  await waitFor(() => expect(screen.queryByRole("alert")).toBeNull());
+});

package/src/MediaPicker/README.md

@@ -0,0 +1,35 @@
+# MediaPicker
+
+`useMediaPicker` opens the system camera or image library without rendering controls.
+Compose it with MPO buttons so the invoking UI follows the active preset.
+
+`pick({ source: "camera" | "library", base64?, bytes? })` resolves to
+`{ uri, mimeType, width, height, base64?, bytes? }`, or `null` on cancellation.
+Bytes are the encoded image file, not decoded pixels. Base64 has no data-URL prefix.
+Only requested data properties are included. Native URIs point to the picker's
+temporary local file; persist the image before relying on it across app restarts.
+Web returns a data URI that remains usable after unmount. Browsers read the file
+to decode dimensions even when the extra data properties aren't requested.
+
+Call `pick` directly from the press handler. Awaiting work before it loses browser
+user activation. Web camera selection uses the file input's `capture` hint; a
+browser without camera capture opens its ordinary file chooser. Modern browsers
+emit `cancel`; older browsers use a window-focus fallback.
+
+Catch `MediaPickerError` and show its message at the invoking control. Its `code`
+is `permission-denied`, `unavailable`, `read-failed`, `invalid-image`, or `busy`.
+Permission errors include `canAskAgain` when the OS provides it. Cancellation
+preserves the caller's previous value. Only one picker may be active at a time.
+Unmounting removes the web input and settles its request. A native OS sheet
+cannot be programmatically dismissed; its eventual result is ignored after
+unmount and another native picker remains blocked until that sheet closes.
+
+Native hosts must install the optional `expo-image-picker` peer and include its
+config plugin in their binary. Declare the app's own `cameraPermission` and
+`photosPermission` purpose strings there; MPO never substitutes an app name or
+permission message. Image-only hosts can set `microphonePermission: false`.
+Changing these native settings requires a new binary, not an OTA update. A binary
+without the native module receives `unavailable` without importing the module.
+
+`FileUpload` remains the visible form-field primitive. Use this hook when an
+existing capture or profile surface owns its own controls.

package/src/MediaPicker/base64.spec.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { base64ToBytes } from "./base64";
+
+describe("media image bytes", () => {
+  it.each([
+    ["", ""],
+    ["Zg==", "f"],
+    ["Zm8=", "fo"],
+    ["Zm9v", "foo"],
+    ["Zm9vYmFy", "foobar"],
+  ])("decodes RFC 4648 vector %s", (encoded, decoded) => {
+    expect(base64ToBytes(encoded)).toEqual(new TextEncoder().encode(decoded));
+  });
+  it("preserves binary bytes without relying on atob", () => {
+    expect(base64ToBytes("/9j/AA==")).toEqual(new Uint8Array([255, 216, 255, 0]));
+  });
+  it("handles large image payloads", () => {
+    const bytes = new Uint8Array(100_000).fill(241);
+    expect(base64ToBytes(Buffer.from(bytes).toString("base64"))).toEqual(bytes);
+  });
+  it("decodes a phone photo larger than the regexp stack", () => {
+    const bytes = base64ToBytes("A".repeat(16_777_216));
+    expect(bytes.length).toBe(12_582_912);
+    expect(bytes.every((byte) => byte === 0)).toBe(true);
+  });
+  it("rejects malformed data", () => {
+    expect(() => base64ToBytes("not base64!")).toThrow();
+  });
+});

package/src/MediaPicker/base64.ts

@@ -0,0 +1,23 @@
+const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+const sextets = new Uint8Array(128);
+for (let index = 0; index < alphabet.length; index++) sextets[alphabet.charCodeAt(index)] = index;
+
+export function base64ToBytes(value: string): Uint8Array {
+  const padding = value.endsWith("==") ? 2 : value.endsWith("=") ? 1 : 0;
+  if (value.length % 4 !== 0 || /[^A-Za-z0-9+/]/.test(value.slice(0, value.length - padding))) {
+    throw new Error("Invalid base64 image data");
+  }
+  const bytes = new Uint8Array((value.length / 4) * 3 - padding);
+  let offset = 0;
+  for (let i = 0; i < value.length; i += 4) {
+    const word =
+      (sextets[value.charCodeAt(i)]! << 18) |
+      (sextets[value.charCodeAt(i + 1)]! << 12) |
+      (sextets[value.charCodeAt(i + 2)]! << 6) |
+      sextets[value.charCodeAt(i + 3)]!;
+    bytes[offset++] = (word >> 16) & 255;
+    if (offset < bytes.length) bytes[offset++] = (word >> 8) & 255;
+    if (offset < bytes.length) bytes[offset++] = word & 255;
+  }
+  return bytes;
+}

package/src/MediaPicker/payload.ts

@@ -0,0 +1,54 @@
+import { base64ToBytes } from "./base64";
+import { MediaPickerError, type MediaPickOptions, type PickedMedia } from "./types";
+
+const imageMimes: Record<string, string> = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp",
+  heic: "image/heic",
+  heif: "image/heif",
+  avif: "image/avif",
+  bmp: "image/bmp",
+  tif: "image/tiff",
+  tiff: "image/tiff",
+  svg: "image/svg+xml",
+};
+
+export function imageMime(type: string | null | undefined, name: string): string {
+  return type || imageMimes[name.split(/[?#]/)[0]!.split(".").pop()!.toLowerCase()] || "";
+}
+
+export function imagePayload(
+  image: Omit<PickedMedia, "bytes" | "base64">,
+  base64: string | null | undefined,
+  options: MediaPickOptions,
+): PickedMedia {
+  if (
+    !image.mimeType.startsWith("image/") ||
+    !image.uri ||
+    !Number.isFinite(image.width) ||
+    !Number.isFinite(image.height) ||
+    image.width <= 0 ||
+    image.height <= 0
+  ) {
+    throw new MediaPickerError(
+      "invalid-image",
+      "The selected file is not a readable image.",
+      options.source,
+    );
+  }
+  const result: PickedMedia = { ...image };
+  if (options.base64 || options.bytes) {
+    if (!base64)
+      throw new MediaPickerError(
+        "read-failed",
+        "The image data could not be read.",
+        options.source,
+      );
+    if (options.base64) result.base64 = base64;
+    if (options.bytes) result.bytes = base64ToBytes(base64);
+  }
+  return result;
+}