@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

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}

package/src/fields/Geolocation/index.tsx

@@ -35,7 +35,6 @@ export type GeolocationProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
   };
 
 export function Geolocation<
@@ -68,7 +67,6 @@ export function Geolocation<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/HTML/Html.spec.tsx

@@ -161,19 +161,17 @@ describe("registry resolution (HTML fieldtype)", () => {
     expect(element.props.value).toBe("");
   });
 
-  it("passes helperText / readOnly / skeleton / compact through", () => {
+  it("passes helperText / readOnly / skeleton through", () => {
     const Component = getFieldComponent("HTML")!;
     const element = (Component as Function)(
       propsFor({
         helperText: "rendered server-side",
         readOnly: true,
         skeleton: true,
-        compact: true,
       }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("rendered server-side");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

package/src/fields/HTML/Html.stories.tsx

@@ -68,7 +68,7 @@ export const ContractProbe = (args: StoryProps) => (
       helperText="help"
     />
     <Html {...(args as any)} label="skeleton probe" skeleton />
-    <Html {...(args as any)} label="compact probe" compact value="<p>Compact</p>" />
+    <Html {...(args as any)} label="compact probe" size="$3" value="<p>Compact</p>" />
   </YStack>
 );
 ContractProbe.args = { value: "<p>Probe content</p>" } as Partial<StoryProps>;

package/src/fields/HTML/index.tsx

@@ -3,7 +3,7 @@
  * Design-law: compose FieldLayout; inherit body metrics (no 14px / 1px fork).
  */
 import { FieldLayout, Skeleton, formCommonColors } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { Text, View, YStack, type YStackProps } from "tamagui";
 
@@ -17,7 +17,6 @@ export interface HtmlProps extends Omit<YStackProps, "children"> {
   required?: boolean;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
 }
 
 const FORBIDDEN_TAGS = new Set([
@@ -126,17 +125,17 @@ export function Html({
   required = false,
   readOnly: _readOnly,
   skeleton = false,
-  compact = false,
   ...stackProps
 }: HtmlProps) {
   const { knobProps } = useResolvedKnobs();
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const sanitizedHtml = useMemo(() => sanitizeHtml(value), [value]);
 
   if (skeleton) {
     return (
       <YStack {...stackProps}>
         <FieldLayout label={label} required={required}>
-          <Skeleton variant="rounded" width="100%" height={compact ? 40 : 60} />
+          <Skeleton variant="rounded" width="100%" height={small ? 40 : 60} />
         </FieldLayout>
       </YStack>
     );
@@ -151,21 +150,21 @@ export function Html({
         required={required}
         disabled={disabled}
       >
-      <YStack
-        {...knobProps.cardSurface}
-        {...knobProps.body}
-        opacity={disabled ? 0.6 : 1}
-        minHeight={compact ? 40 : 60}
-      >
-        {sanitizedHtml ? (
-          <HtmlContent html={sanitizedHtml} />
-        ) : (
-          <Text color={formCommonColors.muted} {...knobProps.body}>
-            No content
-          </Text>
-        )}
-      </YStack>
-    </FieldLayout>
+        <YStack
+          {...knobProps.cardSurface}
+          {...knobProps.body}
+          opacity={disabled ? 0.6 : 1}
+          minHeight={small ? 40 : 60}
+        >
+          {sanitizedHtml ? (
+            <HtmlContent html={sanitizedHtml} />
+          ) : (
+            <Text color={formCommonColors.muted} {...knobProps.body}>
+              No content
+            </Text>
+          )}
+        </YStack>
+      </FieldLayout>
     </YStack>
   );
 }

package/src/fields/Heading/Heading.stories.tsx

@@ -43,7 +43,7 @@ Default.args = {
 Default.storyName = "Main";
 export const Collapsible = () => {
   return (
-    <YStack gap="$4" width={500}>
+    <YStack gap="$4" width={500} maxWidth="100%">
       <Heading
         label="Personal Information"
         description="Click to expand/collapse"
@@ -73,7 +73,7 @@ export const FormWithSections = () => {
   const [newsletter, setNewsletter] = useState(false);
 
   return (
-    <YStack gap="$4" width={500}>
+    <YStack gap="$4" width={500} maxWidth="100%">
       <Heading label="Personal Information" level={2} showSeparator collapsible>
         <YStack gap="$3" paddingTop="$3">
           <Data label="First Name" value={firstName} onChange={(v) => setFirstName(v)} required />

package/src/fields/Heading/index.tsx

@@ -1,6 +1,6 @@
 import { useRegisterPageHeading } from "@multiplatform.one/components";
 import { Skeleton } from "@multiplatform.one/forms";
-import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useId, useState } from "react";
 import {
@@ -38,7 +38,6 @@ export interface HeadingProps extends Omit<YStackProps, "children"> {
   onCollapseChange?: (collapsed: boolean) => void;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
 }
 
 // Explicit per-level sizes (matching the default $heading scale: H1 $8 / H2 $6
@@ -73,10 +72,10 @@ export function Heading({
   onCollapseChange,
   readOnly: _readOnly,
   skeleton = false,
-  compact = false,
   ...stackProps
 }: HeadingProps) {
   const { knobProps } = useResolvedKnobs();
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const [isCollapsed, setIsCollapsed] = useState(collapsed ?? defaultCollapsed);
   useEffect(() => {
     if (collapsed !== undefined) setIsCollapsed(collapsed);
@@ -114,8 +113,8 @@ export function Heading({
   if (skeleton) {
     return (
       <YStack {...knobProps.gap} {...stackProps}>
-        <Skeleton variant="text" width="45%" height={compact ? 18 : 24} />
-        <Skeleton variant="text" width="70%" height={compact ? 12 : 14} />
+        <Skeleton variant="text" width="45%" height={small ? 18 : 24} />
+        <Skeleton variant="text" width="70%" height={small ? 12 : 14} />
         {showSeparator && (
           <Skeleton
             variant="rounded"
@@ -131,10 +130,10 @@ export function Heading({
   // Knob weight wins; 600 is only a fallback. Kept out of the spread and set
   // after the size props so no font-table weight (e.g. Inter's 300) beats it.
   const { fontWeight: knobHeadingWeight, ...knobHeadingFont } = knobProps.heading ?? {};
-  const headingFontSize = compact
+  const headingFontSize = small
     ? Math.max(16, levelFont[level].fontSize - 4)
     : levelFont[level].fontSize;
-  const headingLineHeight = compact
+  const headingLineHeight = small
     ? Math.max(22, levelFont[level].lineHeight - 6)
     : levelFont[level].lineHeight;
 
@@ -144,7 +143,7 @@ export function Heading({
       gap="$2"
       cursor={canCollapse ? "pointer" : "default"}
       onPress={handleToggle}
-      paddingVertical={compact ? "$1" : "$2"}
+      paddingVertical={small ? "$1" : "$2"}
       hoverStyle={canCollapse ? { opacity: 0.8 } : undefined}
       role={canCollapse ? "button" : undefined}
       tabIndex={canCollapse ? 0 : undefined}
@@ -186,7 +185,7 @@ export function Heading({
         )}
       </YStack>
       {showSeparator && (
-        <YStack paddingVertical={compact ? "$0.5" : "$1"}>
+        <YStack paddingVertical={small ? "$0.5" : "$1"}>
           <Separator backgroundColor="$color5" />
         </YStack>
       )}

package/src/fields/Icon/Icon.stories.tsx

@@ -25,7 +25,6 @@ export default {
     disabled: { control: "boolean", description: "Disable the field" },
     readOnly: { control: "boolean", description: "Render read-only" },
     required: { control: "boolean", description: "Mark as required" },
-    compact: { control: "boolean", description: "Compact (table cell) presentation" },
     options: { control: "text", description: "df.options — newline list narrowing the catalog" },
     error: { control: "text", description: "Error message to display" },
   },
@@ -54,7 +53,7 @@ Default.args = {
 Default.storyName = "Main";
 
 export const AllStates = () => (
-  <YStack gap="$4" width={400}>
+  <YStack gap="$4" width={400} maxWidth="100%">
     <ControlledIcon label="Default" placeholder="Choose an icon" />
     <ControlledIcon label="With Value" value="mail" />
     <ControlledIcon label="Required" required />
@@ -85,7 +84,7 @@ export const ViaRegistry = () => {
     throw new Error("fieldtype Icon is not registered — initDefaultRegistry() lost registerField");
   }
   return (
-    <YStack gap="$4" width={400}>
+    <YStack gap="$4" width={400} maxWidth="100%">
       <RegisteredIcon
         label="Workspace icon (through the registry)"
         value={value}

package/src/fields/Icon/index.tsx

@@ -34,7 +34,6 @@ export type IconProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     icons?: readonly string[];
     options?: string;
   };
@@ -74,7 +73,6 @@ export function Icon<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Link.tsx

@@ -19,12 +19,14 @@ import {
 import { Combobox, type ComboboxOption } from "@multiplatform.one/forms";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import type { YStackProps } from "tamagui";
+import type { SizeTokens, YStackProps } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
 import { LinkTree } from "./LinkTree";
 
-export interface LinkProps extends Omit<YStackProps, "children" | "onChange"> {
+export interface LinkProps extends Omit<YStackProps, "children" | "onChange" | "size"> {
   label?: string;
+  /** Control size token (Tamagui's own `size`, e.g. `"$3"` in a filter bar). */
+  size?: SizeTokens;
   value?: string;
   /** Canonical change handler (LC-14): fires with the picked document name. */
   onChange: (value: string) => void;
@@ -56,7 +58,6 @@ export interface LinkProps extends Omit<YStackProps, "children" | "onChange"> {
   helperText?: string;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   placeholder?: string;
   /** Results per page for the backend search (default 20) */
   pageLength?: number;
@@ -106,7 +107,6 @@ function LinkCombobox({
   helperText,
   readOnly = false,
   skeleton = false,
-  compact = false,
   placeholder,
   pageLength = 20,
   referenceDoctype,
@@ -200,7 +200,6 @@ function LinkCombobox({
       error={error}
       helperText={helperText}
       skeleton={skeleton}
-      compact={compact}
       creatable={allowCreate && !!onCreateNew}
       onCreate={handleCreate}
       createLabel={t("Create new {{doctype}}", { doctype })}

package/src/fields/LinkTree.stories.tsx

@@ -147,7 +147,7 @@ Default.storyName = "Main";
 
 export const AllStates = () =>
   host(
-    <YStack gap="$4" width={400}>
+    <YStack gap="$4" width={400} maxWidth="100%">
       <ControlledTree label="Default" />
       <ControlledTree label="With Value" value="North A" />
       <ControlledTree label="Required" required />
@@ -169,7 +169,7 @@ Empty.parameters = {
 
 export const Nested = () =>
   host(
-    <YStack gap="$4" width={400}>
+    <YStack gap="$4" width={400} maxWidth="100%">
       <ControlledTree label="Leaf, three levels deep" value="North A1" />
       <ControlledTree label="Branch, two levels deep" value="North A" />
     </YStack>,
@@ -186,7 +186,7 @@ Nested.parameters = {
 export const ViaLink = () => {
   const [value, setValue] = useState("North A");
   return host(
-    <YStack gap="$4" width={400}>
+    <YStack gap="$4" width={400} maxWidth="100%">
       <Link
         label="Region (through Link, is_tree)"
         doctype="QaRegion"