@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/fieldRegistry.ts

@@ -103,8 +103,6 @@ export interface FieldRenderProps {
   readOnly?: boolean;
   /** Render a skeleton placeholder instead of the live field. */
   skeleton?: boolean;
-  /** Use compact sizing. */
-  compact?: boolean;
   /** Helper / description text (falls back to fieldMeta.description in adapters). */
   helperText?: string;
   required?: boolean;
@@ -153,14 +151,13 @@ export function getFieldComponent(fieldtype: string): ComponentType<FieldRenderP
 
 /**
  * Thin-adapter contract props shared by every field wrapper: forwards
- * readOnly / skeleton / compact plus helper text (df `description` fallback).
+ * readOnly / skeleton plus helper text (df `description` fallback).
  */
 function passthroughProps(props: FieldRenderProps) {
   return {
     helperText: props.helperText ?? props.fieldMeta?.description,
     readOnly: props.readOnly,
     skeleton: props.skeleton,
-    compact: props.compact,
   };
 }
 
@@ -225,10 +222,26 @@ function AutocompleteAdapter(props: FieldRenderProps) {
   });
 }
 
+/**
+ * A hugging number's label "Height (dm)" as the label "Height" and the unit
+ * "dm": a short unit in trailing parentheses moves after the value.
+ */
+export function splitUnitLabel(label: unknown): { label: unknown; unit?: string } {
+  if (typeof label !== "string") return { label };
+  const match = /^(.*\S)\s*\(([^()\s]{1,6})\)$/.exec(label);
+  return match ? { label: match[1], unit: match[2] } : { label };
+}
+
 function NumericAdapter(type: "Int" | "Float" | "Currency" | "Percent") {
   return function NumericAdapter(props: FieldRenderProps) {
+    const hug = props.hug === true;
+    const explicitUnit = typeof props.unit === "string" ? props.unit : undefined;
+    const split =
+      hug && explicitUnit === undefined && type !== "Currency" && type !== "Percent"
+        ? splitUnitLabel(props.label)
+        : { label: props.label };
     return React.createElement(Numeric, {
-      label: props.label,
+      label: split.label as string | undefined,
       value:
         typeof props.value === "number"
           ? props.value
@@ -243,6 +256,11 @@ function NumericAdapter(type: "Int" | "Float" | "Currency" | "Percent") {
       ...passthroughProps(props),
       ...disabledInputBlock(props),
       precision: props.fieldMeta?.precision,
+      // Host overrides: a unit after the value, and a field sized to it.
+      unit: explicitUnit ?? split.unit,
+      hug,
+      min: typeof props.min === "number" ? props.min : undefined,
+      max: typeof props.max === "number" ? props.max : undefined,
     });
   };
 }
@@ -697,7 +715,6 @@ function ButtonAdapter(props: FieldRenderProps) {
     disabled,
     disabledReason: disabled ? String(reason ?? "Unavailable") : undefined,
     skeleton: props.skeleton,
-    compact: props.compact,
     onPress: disabled ? undefined : props.onPress,
     children: props.label,
   });
@@ -1031,7 +1048,6 @@ export function fieldtypeToTableField(
             React.createElement(Icon, {
               value: value === null || value === undefined ? "" : String(value),
               onChange: onCellChange,
-              compact: true,
               readOnly: context?.readOnly,
               disabled: context?.disabled,
             }),
@@ -1056,7 +1072,6 @@ export function fieldtypeToTableField(
               value: typeof value === "number" ? value : Number(value) || 0,
               onChange: onCellChange,
               maxStars,
-              compact: true,
               // D-18.4: read-only cells block commits, so the stars must not
               // look pressable.
               readOnly: context?.readOnly,
@@ -1113,7 +1128,6 @@ export function fieldtypeToTableField(
               value: value === null || value === undefined ? "" : String(value),
               onChange: onCellChange,
               doctype: linkDoctype,
-              compact: true,
               // D-18.4: read-only cells block commits, so the combobox must
               // render its non-interactive representation.
               readOnly: context?.readOnly,
@@ -1169,7 +1183,6 @@ export function fieldtypeToTableField(
               value: value === null || value === undefined ? "" : String(value),
               onChange: onCellChange,
               doctype: rowDoctype,
-              compact: true,
               disabled: Boolean(!rowDoctype || context?.disabled),
               // D-18.4: read-only cells block commits, so the combobox must
               // render its non-interactive representation.

package/src/fields/Barcode/index.tsx

@@ -34,7 +34,6 @@ export type BarcodeProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     enableScan?: boolean;
     formats?: string[];
   };
@@ -71,7 +70,6 @@ export function Barcode<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Check/Check.stories.tsx

@@ -46,7 +46,7 @@ Default.args = {
 
 Default.storyName = "Main";
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledCheck label="Unchecked (Default)" value={false} />
     <ControlledCheck label="Checked" value={true} />
     <ControlledCheck label="With Error" value={false} error="This field is required" />

package/src/fields/Check/index.tsx

@@ -41,7 +41,6 @@ export type CheckProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     checkboxProps?: Record<string, unknown>;
   };
 
@@ -76,7 +75,6 @@ export function Check<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/CodeEditor/CodeEditor.spec.tsx

@@ -188,14 +188,13 @@ describe("registry resolution (Code / JSON fieldtypes)", () => {
     expect(element.props.language).toBe("json");
   });
 
-  it("adapter passes helperText / readOnly / skeleton / compact through (passthrough parity)", () => {
+  it("adapter passes helperText / readOnly / skeleton through (passthrough parity)", () => {
     const Component = getFieldComponent("Code")!;
     const element = (Component as Function)(
-      propsFor({ helperText: "Server script", readOnly: true, skeleton: true, compact: true }),
+      propsFor({ helperText: "Server script", readOnly: true, skeleton: true }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("Server script");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

package/src/fields/CodeEditor/CodeEditor.stories.tsx

@@ -52,7 +52,6 @@ export default {
     disabled: { control: "boolean" },
     readOnly: { control: "boolean" },
     skeleton: { control: "boolean" },
-    compact: { control: "boolean" },
     minRows: { control: "number" },
     maxRows: { control: "number" },
   },
@@ -141,7 +140,7 @@ export const States = {
     <YStack gap="$5">
       <Controlled {...args} label="Error" error="Script fails to parse at line 3" />
       <Controlled {...args} label="Disabled" disabled />
-      <Controlled {...args} label="Compact" compact />
+      <Controlled {...args} label="Compact" size="$3" />
       <CodeEditorField label="Skeleton" skeleton onChange={() => {}} />
     </YStack>
   ),

package/src/fields/CodeEditor/index.tsx

@@ -29,7 +29,7 @@ import {
   useResolvedValidators,
   type AnyFormApi,
 } from "@multiplatform.one/forms";
-import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { useEffect, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
@@ -74,19 +74,18 @@ export function frappeCodeLanguage(options?: string | null): string {
 interface CodePreviewProps {
   value: string;
   language: string;
-  compact?: boolean;
 }
 
-function CodePreview({ value, language, compact }: CodePreviewProps) {
+function CodePreview({ value, language }: CodePreviewProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact });
+  const { knobProps } = useResolvedKnobs();
   const tokens = useShikiTokens(value, language);
   const lineCount = value ? value.split("\n").length : 0;
-  // Content type scale follows the size knob (same idiom as CodeBlock).
+  // Content type scale follows the size token (same idiom as CodeBlock).
   const textSize = knobProps.sizeToken as FontSizeTokens;
 
   return (
-    <PreviewSurface compact={compact} horizontalScroll>
+    <PreviewSurface horizontalScroll>
       {!value ? (
         <Paragraph color={formCommonColors.muted} size={textSize}>
           {t("Nothing to preview")}
@@ -119,7 +118,6 @@ export interface CodeEditorFieldProps {
   disabled?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   size?: SizeTokens;
   id?: string;
   value?: string;
@@ -152,7 +150,6 @@ export function CodeEditorField({
   disabled,
   readOnly,
   skeleton,
-  compact,
   size,
   id: idProp,
   value,
@@ -166,7 +163,8 @@ export function CodeEditorField({
   "aria-label": ariaLabel,
 }: CodeEditorFieldProps) {
   const { t } = useTranslation();
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const inTableCell = useIsInTableCell();
 
@@ -190,7 +188,7 @@ export function CodeEditorField({
             height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
           />
         )}
-        <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
+        <Skeleton variant="rounded" width="100%" height={small ? 120 : 200} />
       </YStack>
     );
   }
@@ -213,7 +211,6 @@ export function CodeEditorField({
       readOnly={readOnly}
       required={required}
       error={hasError ? true : undefined}
-      compact={compact}
       size={size}
       minRows={minRows}
       maxRows={maxRows}
@@ -242,10 +239,9 @@ export function CodeEditorField({
     return (
       <EditorPreviewPanes
         editor={renderSource(textValue, handleChange, hasError)}
-        preview={<CodePreview value={textValue} language={language} compact={compact} />}
+        preview={<CodePreview value={textValue} language={language} />}
         editTabLabel={t("Code")}
         previewTabLabel={t("Preview")}
-        compact={compact}
         defaultPreview={!!readOnly}
       />
     );

package/src/fields/Color/Color.stories.tsx

@@ -53,7 +53,7 @@ Default.args = {
 
 Default.storyName = "Main";
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledColor label="Default" />
     <ControlledColor label="With Value" value="#10B981" />
     <ControlledColor label="Required" required />

package/src/fields/Color/index.tsx

@@ -42,7 +42,6 @@ export type ColorProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     showPresets?: boolean;
     presetColors?: string[];
   };
@@ -83,7 +82,6 @@ export function Color<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Data/Data.stories.tsx

@@ -56,7 +56,7 @@ Default.args = {
 
 Default.storyName = "Main";
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledData label="Default" placeholder="Enter text" />
     <ControlledData label="With Value" value="Some entered text" />
     <ControlledData label="Required Field" required placeholder="Required" />

package/src/fields/Data/index.tsx

@@ -43,7 +43,6 @@ export type DataProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     maxLength?: number;
     inputProps?: Record<string, unknown>;
   };
@@ -83,7 +82,6 @@ export function Data<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Date/Date.stories.tsx

@@ -110,7 +110,7 @@ Disabled.args = {
 } satisfies Partial<DateProps>;
 
 export const AllTypes = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledDate label="Date Only" type="date" value="2026-01-24" />
     <ControlledDate label="Date and Time" type="datetime" value="2026-01-24T14:30" />
     <ControlledDate label="Time Only" type="time" value="14:30" />
@@ -125,7 +125,7 @@ AllTypes.parameters = {
 };
 
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledDate label="Default (Empty)" type="date" />
     <ControlledDate label="With Value" type="date" value="2026-06-15" />
     <ControlledDate label="Required" type="date" required />
@@ -142,7 +142,7 @@ AllStates.parameters = {
 };
 
 export const EventSchedulingExample = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledDate label="Event Date" type="date" value="2026-02-14" required />
     <ControlledDate label="Start Time" type="time" value="09:00" required />
     <ControlledDate label="End Time" type="time" value="17:00" required />

package/src/fields/Date/catalog.tsx

@@ -110,7 +110,6 @@ export function Date<
         helperText={fieldProps.helperText}
         readOnly={fieldProps.readOnly}
         skeleton={fieldProps.skeleton}
-        compact={fieldProps.compact}
         required={fieldProps.required}
         id={fieldProps.id}
         size={fieldProps.size}
@@ -140,7 +139,6 @@ export function Date<
         helperText={fieldProps.helperText}
         readOnly={fieldProps.readOnly}
         skeleton={fieldProps.skeleton}
-        compact={fieldProps.compact}
         required={fieldProps.required}
         id={fieldProps.id}
         size={fieldProps.size}
@@ -174,7 +172,6 @@ export function Date<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

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

@@ -117,7 +117,6 @@ function OsDateField<
   ...props
 }: DateProps<TData, TName> & { DateTimePicker: DateTimePickerComponent }) {
   const {
-    compact,
     defaultValue,
     disabled,
     error: errorProp,
@@ -144,11 +143,11 @@ function OsDateField<
     value,
   } = useProps(props) as DateProps<TData, TName> & Record<string, unknown>;
 
-  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 themeVariant = useNativePickerScheme();
   const theme = useTheme();
-  const accentColor = theme.accentBackground?.val;
+  const accentColor = theme.accentColor?.val;
   // MPO-64 leftover: the sheet must end ABOVE the keyboard, not run under it.
   const keyboardInset = useKeyboardInset();
   const { height: windowHeight } = useWindowDimensions();
@@ -328,13 +327,13 @@ function OsDateField<
 
                     {fieldType === "datetime" && !showTimePicker && (
                       <Button size="$3" chromeless onPress={() => setShowTimePicker(true)}>
-                        <Text color="$accentBackground">Next</Text>
+                        <Text color="$accentColor">Next</Text>
                       </Button>
                     )}
 
                     {(fieldType !== "datetime" || showTimePicker) && (
                       <Button size="$3" chromeless onPress={confirm}>
-                        <Text color="$accentBackground">Done</Text>
+                        <Text color="$accentColor">Done</Text>
                       </Button>
                     )}
                   </XStack>

package/src/fields/Date/types.ts

@@ -44,7 +44,6 @@ export type DateProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     /** Overrides the type-derived default ("Select date" / "…time"). */
     placeholder?: string;
     minDate?: Date;

package/src/fields/DateRange/DateRange.spec.tsx

@@ -264,19 +264,17 @@ describe("registry resolution (Date Range fieldtype)", () => {
     expect(element.props.label).toBe("Period");
   });
 
-  it("passes helperText / readOnly / skeleton / compact through", () => {
+  it("passes helperText / readOnly / skeleton through", () => {
     const Component = getFieldComponent("Date Range")!;
     const element = (Component as Function)(
       propsFor({
         helperText: "both ends inclusive",
         readOnly: true,
         skeleton: true,
-        compact: true,
       }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("both ends inclusive");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

package/src/fields/DateRange/index.tsx

@@ -35,7 +35,6 @@ export type DateRangeFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     placeholder?: string;
   };
 
@@ -116,7 +115,6 @@ export function DateRangeField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Duration/index.tsx

@@ -7,16 +7,13 @@ export type DurationProps = FormsDurationProps;
 
 /** Thin adapter — forwards helperText / readOnly / skeleton / compact via props spread. */
 export function Duration(props: DurationProps) {
-  const { helperText, readOnly, skeleton, compact, ...resolvedProps } = useProps(
-    props,
-  ) as DurationProps;
+  const { helperText, readOnly, skeleton, ...resolvedProps } = useProps(props) as DurationProps;
   return (
     <FormsDuration
       clockIcon={<ClockIcon size={16} />}
       helperText={helperText}
       readOnly={readOnly}
       skeleton={skeleton}
-      compact={compact}
       {...resolvedProps}
     />
   );

package/src/fields/DynamicLink.tsx

@@ -25,7 +25,6 @@ export interface DynamicLinkProps {
   helperText?: string;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
 }
 
 export function DynamicLink({
@@ -43,7 +42,6 @@ export function DynamicLink({
   helperText,
   readOnly = false,
   skeleton = false,
-  compact = false,
 }: DynamicLinkProps) {
   const { knobProps } = useResolvedKnobs();
   const [selectedDoctype, setSelectedDoctype] = useState<string>(doctypeFieldValue || "");
@@ -72,7 +70,6 @@ export function DynamicLink({
         required={required}
         readOnly={readOnly}
         skeleton={skeleton}
-        compact={compact}
         error={documentPicked ? undefined : error}
         helperText={documentPicked ? undefined : helperText}
       />
@@ -84,7 +81,6 @@ export function DynamicLink({
           disabled={isLocked}
           readOnly={readOnly}
           skeleton={skeleton}
-          compact={compact}
           placeholder={`Select ${selectedDoctype}`}
           error={error}
           helperText={helperText}

package/src/fields/FileUpload.tsx

@@ -1,7 +1,7 @@
 import { useFrappeCollection } from "@multiplatform.one/frappe";
 import { Skeleton } from "@multiplatform.one/forms";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
-import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -27,7 +27,6 @@ export interface FileUploadProps {
   helperText?: string;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   /**
    * Override the File-doctype transport. Same progress/abort contract as
    * forms FileUpload; resolve with the committed URL. Tests and custom
@@ -106,11 +105,11 @@ export function FileUpload({
   helperText,
   readOnly = false,
   skeleton = false,
-  compact = false,
   onUpload,
 }: FileUploadProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const config = useFrappeConfig();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [transfer, setTransfer] = useState<TransferState | null>(null);
@@ -119,8 +118,8 @@ export function FileUpload({
   const onUploadRef = useRef(onUpload);
   onUploadRef.current = onUpload;
   const isLocked = disabled || readOnly;
-  const minHeight = compact ? 40 : 56;
-  const previewSize = compact ? 120 : 200;
+  const minHeight = small ? 40 : 56;
+  const previewSize = small ? 120 : 200;
   const uploading = transfer?.status === "uploading";
 
   const finalBaseURL = baseURL ?? config?.baseURL ?? "";

package/src/fields/FileUploadField/FileUploadField.spec.tsx

@@ -164,3 +164,41 @@ describe("registry resolution (Attach / Attach Image fieldtypes)", () => {
     expect(element.props.onChange).toBe(onChange);
   });
 });
+
+describe("FileUploadField stored value", () => {
+  it("previews a stored image URL as a tile, never as a raw path", () => {
+    const result = renderWithProviders(
+      <FileUploadField label="Sprite" isImage value="https://img.test/files/pikachu.png" />,
+    );
+    const tile = result.container.querySelector('[data-file-upload="existing"]');
+    expect(tile).not.toBeNull();
+    const img = tile?.querySelector("img");
+    expect(img?.getAttribute("src")).toBe("https://img.test/files/pikachu.png");
+    expect(img?.getAttribute("alt")).toBe("pikachu.png");
+    expect(result.container.textContent).not.toContain("https://img.test/files/pikachu.png");
+  });
+
+  it("removing the stored file clears the value", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <FileUploadField label="Sprite" isImage value="/files/a.png" onChange={onChange} />,
+    );
+    const remove = result.getButton("Remove a.png");
+    expect(remove).toBeTruthy();
+    (remove as HTMLElement).click();
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("a read-only stored file shows its preview without a remove disc", () => {
+    const result = renderWithProviders(
+      <FileUploadField label="Sprite" isImage value="/files/a.png" readOnly />,
+    );
+    expect(result.container.querySelector('[data-file-upload="existing"] img')).not.toBeNull();
+    expect(result.getButton("Remove a.png")).toBeUndefined();
+  });
+
+  it("an empty value shows the dropzone caption, no tile", () => {
+    const result = renderWithProviders(<FileUploadField label="Sprite" isImage value="" />);
+    expect(result.container.querySelector('[data-file-upload="existing"]')).toBeNull();
+  });
+});

package/src/fields/FileUploadField/index.tsx

@@ -10,10 +10,18 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useProps } from "tamagui";
 import { AttachLibrary } from "../../FileBrowser/AttachLibrary";
+import { useFrappeConfig } from "../../FrappeProvider";
 import type { FileBrowserFile } from "../../FileBrowser/types";
 
 const imageAccept = "image/png,image/jpeg,image/gif,image/webp,image/svg+xml";
 
+/** A stored file URL against the bench: absolute stays, `/files/…` joins the base. */
+export function resolveStoredFileUrl(value: string, baseURL: string | undefined): string {
+  if (/^(https?:|data:|blob:)/.test(value)) return value;
+  if (value.startsWith("/") && baseURL) return `${baseURL.replace(/\/$/, "")}${value}`;
+  return value;
+}
+
 export type FileUploadFieldProps<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TName extends string = string,
@@ -42,7 +50,6 @@ export type FileUploadFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     accept?: string;
     maxSize?: number;
     multiple?: boolean;
@@ -88,8 +95,15 @@ export function FileUploadField<
   } & Record<string, unknown>;
 
   const [libraryOpen, setLibraryOpen] = useState(false);
+  const baseURL = useFrappeConfig()?.baseURL;
   const resolvedAccept = isImage ? (accept ?? imageAccept) : accept;
   const resolvedDefaultValue = value !== undefined ? value : defaultValue;
+  // A stored value is a URL, not a File: it shows as the field's current
+  // file (a preview tile for an image) until a new pick replaces it.
+  const stored =
+    typeof resolvedDefaultValue === "string" && resolvedDefaultValue
+      ? resolvedDefaultValue
+      : undefined;
 
   return (
     <>
@@ -97,7 +111,11 @@ export function FileUploadField<
         name={name}
         form={form}
         validators={validators}
-        defaultValue={resolvedDefaultValue as any}
+        defaultValue={(stored ? undefined : resolvedDefaultValue) as any}
+        existing={stored ? { src: resolveStoredFileUrl(stored, baseURL) } : undefined}
+        onExistingRemove={
+          stored && !disabled && !fieldProps.readOnly ? () => onChange?.("") : undefined
+        }
         onValueChange={onChange as any}
         label={fieldProps.label}
         labelProps={fieldProps.labelProps}
@@ -105,7 +123,6 @@ export function FileUploadField<
         helperText={fieldProps.helperText}
         readOnly={fieldProps.readOnly}
         skeleton={fieldProps.skeleton}
-        compact={fieldProps.compact}
         required={fieldProps.required}
         id={fieldProps.id}
         size={fieldProps.size}