@multiplatform.one/frappe-ui 7.46.0 → 7.47.0

package/src/fields/FileUpload.tsx

@@ -5,8 +5,9 @@ import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatf
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Image, Label, Text, XStack, YStack } from "tamagui";
+import { Button, Image, Label, Text as TamaguiText, XStack, YStack } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
+import { Text } from "@multiplatform.one/components";
 
 export type FrappeFileUploadHandler = (
   file: File,
@@ -189,7 +190,10 @@ export function FileUpload({
       } catch (err) {
         if (
           controller.signal.aborted ||
-          (err instanceof DOMException && err.name === "AbortError")
+          (err instanceof Error && err.name === "AbortError") ||
+          (typeof DOMException !== "undefined" &&
+            err instanceof DOMException &&
+            err.name === "AbortError")
         ) {
           return;
         }
@@ -290,9 +294,9 @@ export function FileUpload({
   return (
     <YStack {...knobProps.gap}>
       {label && (
-        <Label>
+        <Label {...knobProps.label}>
           {label}
-          {required && <Text color="$red10"> *</Text>}
+          {required && <TamaguiText color="$red10"> *</TamaguiText>}
         </Label>
       )}
 

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

@@ -11,9 +11,11 @@
  *   3. a controlled `value` winning over `defaultValue`, so a saved attachment
  *      paints on a re-render instead of the mount-time default.
  */
+import { Form, useForm } from "@multiplatform.one/forms";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { cleanup } from "@testing-library/react";
+import { act, cleanup, fireEvent } from "@testing-library/react";
 import type React from "react";
+import { useState } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
 import { FileUploadField } from ".";
@@ -202,3 +204,86 @@ describe("FileUploadField stored value", () => {
     expect(result.container.querySelector('[data-file-upload="existing"]')).toBeNull();
   });
 });
+
+describe("FileUploadField attachment states", () => {
+  it("hides source choices until Replace and keeps the library reachable", async () => {
+    const result = renderWithProviders(<FileUploadField value="/files/a.png" isImage />);
+    expect(result.getButton("From Library")).toBeUndefined();
+    expect(result.getButton("Choose File")).toBeUndefined();
+    await act(async () => {
+      fireEvent.click(result.container.querySelector('[aria-label="Replace"]')!);
+    });
+    expect(result.getButton("From Library")).toBeTruthy();
+    expect(result.getButton("Choose File")).toBeTruthy();
+    expect(result.container.querySelector('[data-file-upload="preview"] img')).toBeTruthy();
+  });
+
+  it("shows an empty field after its controlled stored value is removed", () => {
+    const result = renderWithProviders(<FileUploadField value="/files/a.png" isImage />);
+    result.rerender(<FileUploadField value="" isImage />);
+    expect(result.container.querySelector('[data-file-upload="preview"]')).toBeNull();
+    expect(result.getButton("From Library")).toBeTruthy();
+  });
+
+  it("keeps locked stored attachments free of replacement actions", () => {
+    const result = renderWithProviders(<FileUploadField value="/files/a.png" isImage disabled />);
+    expect(result.getButton("Replace")).toBeUndefined();
+    expect(result.getButton("From Library")).toBeUndefined();
+    expect(result.container.querySelector('[data-file-upload="preview"] img')).toBeTruthy();
+  });
+});
+
+it("keeps the newly selected file visible when replacing a controlled stored URL", async () => {
+  function Controlled() {
+    const [value, setValue] = useState<unknown>("/files/old.pdf");
+    return <FileUploadField value={value} onChange={setValue} />;
+  }
+  const result = renderWithProviders(<Controlled />);
+  await act(async () => {
+    fireEvent.change(nativePicker(result.container)!, {
+      target: { files: [new File(["new"], "new.pdf", { type: "application/pdf" })] },
+    });
+  });
+  expect(result.container.textContent).toContain("new.pdf");
+  expect(result.container.textContent).not.toContain("Choose File");
+});
+
+it("paints and removes a stored URL bound through a form", async () => {
+  let readValue: () => unknown = () => undefined;
+  function Harness() {
+    const form = useForm({ defaultValues: { attachment: "/files/old.png" } });
+    readValue = () => form.state.values.attachment;
+    return (
+      <Form form={form}>
+        <FileUploadField form={form} name="attachment" isImage />
+      </Form>
+    );
+  }
+  const result = renderWithProviders(<Harness />);
+  expect(result.container.querySelector('[data-file-upload="preview"] img')).toBeTruthy();
+  await act(async () => {
+    fireEvent.click(result.getButton("Remove old.png")!);
+  });
+  expect(readValue()).toBe("");
+  expect(result.container.textContent).toContain("Choose File");
+});
+
+it("keeps multiple files visible when replacing a controlled stored URL", async () => {
+  function Harness() {
+    const [value, setValue] = useState<unknown>("/files/old.pdf");
+    return <FileUploadField value={value} onChange={setValue} multiple />;
+  }
+  const result = renderWithProviders(<Harness />);
+  await act(async () => {
+    fireEvent.change(nativePicker(result.container)!, {
+      target: {
+        files: [
+          new File(["one"], "one.pdf", { type: "application/pdf" }),
+          new File(["two"], "two.pdf", { type: "application/pdf" }),
+        ],
+      },
+    });
+  });
+  expect(result.container.textContent).toContain("one.pdf");
+  expect(result.container.textContent).toContain("two.pdf");
+});

package/src/fields/FileUploadField/FileUploadField.stories.tsx

@@ -172,3 +172,12 @@ export const InTable = {
     );
   },
 };
+
+export const StoredImage = () => {
+  const [value, setValue] = useState<unknown>(
+    "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10.png",
+  );
+  return (
+    <FileUploadField label="Sprite" isImage value={value} onChange={setValue} libraryFiles={[]} />
+  );
+};

package/src/fields/FileUploadField/index.tsx

@@ -3,12 +3,20 @@ import type {
   FileUploadHandler,
   FormFieldProps,
 } from "@multiplatform.one/forms";
-import { Button, FileUpload } from "@multiplatform.one/forms";
+import {
+  Button,
+  FileUpload,
+  Field,
+  getFieldError,
+  mergeFieldHandler,
+  useFormField,
+  useResolvedValidators,
+} from "@multiplatform.one/forms";
 import { FolderOpenIcon } from "@phosphor-icons/react";
 import type { DeepKeys } from "@tanstack/form-core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useProps } from "tamagui";
+import { useMedia, useProps } from "tamagui";
 import { AttachLibrary } from "../../FileBrowser/AttachLibrary";
 import { useFrappeConfig } from "../../FrappeProvider";
 import type { FileBrowserFile } from "../../FileBrowser/types";
@@ -68,8 +76,51 @@ export type FileUploadFieldProps<
 export function FileUploadField<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TName extends string = string,
+>(props: FileUploadFieldProps<TData, TName>) {
+  const { resolvedForm, knobProps, id } = useFormField({ form: props.form, id: props.id });
+  const validators = useResolvedValidators(
+    props.required,
+    props.validators,
+    props.label,
+    props.name,
+  );
+  if (!resolvedForm || !props.name) {
+    return <FileUploadFieldControl {...props} size={props.size ?? knobProps.sizeToken} />;
+  }
+  return (
+    <Field
+      form={resolvedForm}
+      name={props.name as any}
+      defaultValue={props.defaultValue}
+      validators={validators}
+      mode={props.mode}
+      preserveValue={props.preserveValue}
+    >
+      {(field) => (
+        <FileUploadFieldControl
+          {...props}
+          id={id}
+          name={undefined}
+          size={props.size ?? knobProps.sizeToken}
+          value={field.state.value}
+          error={getFieldError(field, props.error)}
+          onChange={(next) => {
+            field.handleChange(next as any);
+            props.onChange?.(next);
+          }}
+          onBlur={mergeFieldHandler(field, "handleBlur", props.onBlur)}
+        />
+      )}
+    </Field>
+  );
+}
+
+function FileUploadFieldControl<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
 >(props: FileUploadFieldProps<TData, TName>) {
   const { t } = useTranslation();
+  const media = useMedia();
   const {
     defaultValue,
     form,
@@ -112,11 +163,15 @@ export function FileUploadField<
         form={form}
         validators={validators}
         defaultValue={(stored ? undefined : resolvedDefaultValue) as any}
-        existing={stored ? { src: resolveStoredFileUrl(stored, baseURL) } : undefined}
+        existing={
+          stored
+            ? { src: resolveStoredFileUrl(stored, baseURL), isImage: isImage || undefined }
+            : undefined
+        }
         onExistingRemove={
           stored && !disabled && !fieldProps.readOnly ? () => onChange?.("") : undefined
         }
-        onValueChange={onChange as any}
+        onChange={onChange as any}
         label={fieldProps.label}
         labelProps={fieldProps.labelProps}
         error={fieldProps.error}
@@ -125,6 +180,7 @@ export function FileUploadField<
         skeleton={fieldProps.skeleton}
         required={fieldProps.required}
         id={fieldProps.id}
+        onBlur={fieldProps.onBlur}
         size={fieldProps.size}
         disabled={disabled}
         accept={resolvedAccept}
@@ -134,11 +190,16 @@ export function FileUploadField<
         actions={
           library ? (
             <Button
-              size="$4"
+              size={fieldProps.size}
+              alignSelf="stretch"
+              flex={media.xs ? undefined : 1}
               outlined
               icon={FolderOpenIcon}
               disabled={disabled || fieldProps.readOnly}
-              onPress={() => setLibraryOpen(true)}
+              onPress={(event) => {
+                event.stopPropagation();
+                setLibraryOpen(true);
+              }}
             >
               {t("From Library")}
             </Button>

package/src/fields/Heading/index.tsx

@@ -1,4 +1,4 @@
-import { useRegisterPageHeading } from "@multiplatform.one/components";
+import { useRegisterPageHeading, Text } from "@multiplatform.one/components";
 import { Skeleton } from "@multiplatform.one/forms";
 import { sizeRecipeEscape, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import type React from "react";
@@ -10,7 +10,7 @@ import {
   H3,
   H4,
   Separator,
-  Text,
+  Text as TamaguiText,
   XStack,
   YStack,
   type YStackProps,
@@ -174,14 +174,14 @@ export function Heading({
       <YStack gap={descriptionGap} paddingBottom={showDescription ? "$1" : undefined}>
         {headingContent}
         {showDescription && (
-          <Text
+          <TamaguiText
             fontSize={knobProps.sizeToken}
             {...knobProps.body}
             color="$color10"
             paddingInlineStart={canCollapse ? "$6" : undefined}
           >
             {resolvedDescription}
-          </Text>
+          </TamaguiText>
         )}
       </YStack>
       {showSeparator && (

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

@@ -30,9 +30,10 @@ import {
 import { useEffect, useState, type ComponentType, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { EditorPreviewPanes, PreviewSurface } from "../shared/EditorPreviewPanes";
+import { Paragraph } from "@multiplatform.one/components";
 
 // ---------------------------------------------------------------------------
 // Preview (lazy house Markdown renderer)

package/src/fields/Numeric/index.tsx

@@ -9,7 +9,8 @@ import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/for
 import { Stepper as FormsStepper, formCommonColors, useForm } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
 import { useEffect, useRef } from "react";
-import { Text, XStack, YStack, useProps } from "tamagui";
+import { XStack, YStack, useProps } from "tamagui";
+import { Text } from "@multiplatform.one/components";
 
 export type NumericType = "Int" | "Float" | "Currency" | "Percent";
 

package/src/fields/Password/index.tsx

@@ -7,20 +7,21 @@
  * inside a 46-tall / radius-5 / #f7f7f7 frame; ours is a real Input.Button
  * tab stop. Frame stays measured mpo 44/9 on $color2 (chain step 1).
  *
- * Reveal uses Input.Button `glyphRing`: chip-dismiss class, 2px offset 0
- * on the glyph, not the 44px hit box (LC-71). Size comes from the
- * generated end-cap recipe, not a hardcoded square.
+ * The reveal is the shared PasswordReveal, the field's trailing action
+ * (LC-149): a chromeless eye inside the Box that rings its own glyph (LC-71)
+ * and squares off the generated end-cap recipe.
  */
-import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import {
   Field,
   FieldLayout,
   Input as FormsInput,
+  PasswordReveal,
   Skeleton,
   getFieldError,
   mergeFieldHandler,
   useFormField,
+  usePasswordReveal,
   useResolvedValidators,
 } from "@multiplatform.one/forms";
 import {
@@ -31,7 +32,7 @@ import {
 } from "@multiplatform.one/theme";
 import type { DeepKeys } from "@tanstack/form-core";
 import type { SizeTokens, TamaguiElement } from "tamagui";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useProps } from "tamagui";
 
 export type PasswordProps<
@@ -69,32 +70,6 @@ export type PasswordProps<
     size?: import("tamagui").SizeTokens;
   };
 
-const SHOW_PASSWORD = "Show password";
-const HIDE_PASSWORD = "Hide password";
-
-type Selection = { start: number; end: number };
-
-function nativeInput(node: unknown, id?: string): HTMLInputElement | null {
-  const fromRef = node as { selectionStart?: number; setSelectionRange?: unknown } | null;
-  if (fromRef && typeof fromRef.setSelectionRange === "function") {
-    return fromRef as HTMLInputElement;
-  }
-  if (typeof document === "undefined" || !id) return null;
-  return document.getElementById(id) as HTMLInputElement | null;
-}
-
-function readSelection(node: unknown, id?: string): Selection | null {
-  const el = nativeInput(node, id);
-  if (!el || typeof el.selectionStart !== "number") return null;
-  return { start: el.selectionStart, end: el.selectionEnd ?? el.selectionStart };
-}
-
-function restoreSelection(node: unknown, sel: Selection | null, id?: string) {
-  const el = nativeInput(node, id);
-  el?.focus();
-  if (sel) el?.setSelectionRange(sel.start, sel.end);
-}
-
 export function Password<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TName extends string = string,
@@ -137,19 +112,8 @@ export function Password<
   const isControlled = value !== undefined;
   const [internalText, setInternalText] = useState(String(defaultValue ?? ""));
   const text = isControlled ? String(value ?? "") : internalText;
-  const [revealed, setRevealed] = useState(false);
   const inputRef = useRef<TamaguiElement>(null);
-  const pendingSelection = useRef<Selection | null>(null);
-
-  useEffect(() => {
-    if (!text) setRevealed(false);
-  }, [text]);
-
-  useLayoutEffect(() => {
-    if (!pendingSelection.current) return;
-    restoreSelection(inputRef.current, pendingSelection.current, id);
-    pendingSelection.current = null;
-  }, [id, revealed]);
+  const { revealed, toggle: toggleReveal } = usePasswordReveal({ inputRef, id, text });
 
   const handleChangeText = useCallback(
     (next: string) => {
@@ -160,11 +124,6 @@ export function Password<
     [disabled, isControlled, onChange],
   );
 
-  const toggleReveal = useCallback(() => {
-    pendingSelection.current = readSelection(inputRef.current, id);
-    setRevealed((open) => !open);
-  }, [id]);
-
   const boxContract = {
     size: resolvedSize,
     "data-size-token": String(resolvedSize),
@@ -193,7 +152,7 @@ export function Password<
     handleChange?: (text: string) => void,
     hasError?: boolean,
   ) => (
-    <FormsInput.Box {...boxContract} disabled={disabled}>
+    <FormsInput.Box {...boxContract} disabled={disabled} paddingInlineEnd={0}>
       <FormsInput.Area
         ref={inputRef}
         {...(areaInputProps as object)}
@@ -215,28 +174,13 @@ export function Password<
           handleChangeText(next);
         }}
       />
-      <FormsInput.Button
-        glyphRing
-        size={resolvedSize}
+      <PasswordReveal
+        revealed={revealed}
+        onToggle={toggleReveal}
+        controls={id}
         disabled={disabled}
-        aria-label={revealed ? HIDE_PASSWORD : SHOW_PASSWORD}
-        aria-pressed={revealed}
-        aria-controls={id}
-        hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
-        onPress={disabled || fieldProps.readOnly ? undefined : toggleReveal}
-        onKeyDown={
-          ((e: KeyboardEvent) => {
-            if (disabled || fieldProps.readOnly) return;
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              e.stopPropagation();
-              toggleReveal();
-            }
-          }) as unknown as () => void
-        }
-      >
-        <FormsInput.Icon aria-hidden>{revealed ? <EyeSlashIcon /> : <EyeIcon />}</FormsInput.Icon>
-      </FormsInput.Button>
+        size={resolvedSize}
+      />
     </FormsInput.Box>
   );
 

package/src/fields/ReadOnly/index.tsx

@@ -18,7 +18,8 @@ import {
   sizeTokenStep,
 } from "@multiplatform.one/theme";
 import { useMemo } from "react";
-import { Text, XStack, YStack, type YStackProps } from "tamagui";
+import { Text as TamaguiText, XStack, YStack, type YStackProps } from "tamagui";
+import { Text } from "@multiplatform.one/components";
 
 export type ReadOnlyType =
   | "Data"
@@ -193,15 +194,15 @@ export function ReadOnly({
       return (
         <XStack alignItems="center">
           {renderColorSwatch()}
-          <Text {...knobProps.body} color={valueColor} fontFamily="$mono">
+          <TamaguiText {...knobProps.body} color={valueColor} fontFamily="$mono">
             {displayValue}
-          </Text>
+          </TamaguiText>
         </XStack>
       );
     }
     if (type === "Link" && (linkHref || onLinkPress) && !isEmpty) {
       return (
-        <Text
+        <TamaguiText
           {...knobProps.body}
           color="$accentColor"
           textDecorationLine="underline"
@@ -210,7 +211,7 @@ export function ReadOnly({
           hoverStyle={{ opacity: 0.8 }}
         >
           {displayValue}
-        </Text>
+        </TamaguiText>
       );
     }
     if (type === "Check") {
@@ -236,23 +237,23 @@ export function ReadOnly({
               </Text>
             ) : null}
           </XStack>
-          <Text {...knobProps.body} color={valueColor}>
+          <TamaguiText {...knobProps.body} color={valueColor}>
             {displayValue}
-          </Text>
+          </TamaguiText>
         </XStack>
       );
     }
     if (type === "LongText" || type === "Text" || type === "SmallText") {
       return (
-        <Text {...knobProps.body} color={valueColor} whiteSpace="pre-wrap">
+        <TamaguiText {...knobProps.body} color={valueColor} whiteSpace="pre-wrap">
           {displayValue}
-        </Text>
+        </TamaguiText>
       );
     }
     return (
-      <Text {...knobProps.body} color={valueColor}>
+      <TamaguiText {...knobProps.body} color={valueColor}>
         {displayValue}
-      </Text>
+      </TamaguiText>
     );
   };
 

package/src/fields/TextEditor/TextEditor.stories.tsx

@@ -2,10 +2,11 @@ import { action } from "@multiplatform.one/storybook";
 import { Button } from "@multiplatform.one/forms";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { fieldtypeToTableField } from "../../fieldRegistry";
 import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { TextEditor, type TextEditorProps } from ".";
+import { Text } from "@multiplatform.one/components";
 
 export default {
   title: "FrappeUI/TextEditor",

package/src/frappeRemainder.designLaw.spec.ts

@@ -145,10 +145,11 @@ describe("Frappe remainder wrappers — design-law 100%", () => {
     expect(source).not.toContain("<Tint");
   });
 
-  it("Desk pages use body fragment, not sizeToken as fontSize; form back is house Button", () => {
+  it("Desk pages use body fragment, not sizeToken as fontSize; form back is the house PageBackButton", () => {
     const form = read("desk/DeskFormPage.tsx");
     const list = read("desk/DeskListPage.tsx");
-    expect(form).toMatch(/Button.*from "@multiplatform.one\/forms"/);
+    expect(form).toMatch(/page=\{\{\s*back:/);
+    expect(read("FrappeForm.tsx")).toMatch(/<PageBackButton\b/);
     expect(form).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
     expect(list).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
     expect(form).toContain("formCommonColors.muted");

package/src/frappeRoutes.spec.tsx

@@ -190,6 +190,16 @@ function button(container: HTMLElement, label: string): HTMLElement {
   return found as HTMLElement;
 }
 
+// LC-145: a record page keeps its secondary actions (Delete) in the top bar's "…" menu.
+async function menuEntry(label: string): Promise<HTMLElement | null> {
+  const trigger = screen.queryByTestId("frappe-form-menu");
+  if (!trigger) return null;
+  fireEvent.click(trigger);
+  const entry = await screen.findByRole("menuitem", { name: label }).catch(() => null);
+  fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+  return entry;
+}
+
 function input(container: HTMLElement, label: string): HTMLInputElement {
   const field = screen.getByLabelText(label, { exact: false });
   if (field instanceof HTMLInputElement) return field;
@@ -373,8 +383,9 @@ describe("FrappeForm with a route", () => {
   it("deletes through delete_doc and returns to the list", async () => {
     const { container, pushed } = renderAt("/moves/d4e5f6", "form");
     await waitFor(() => expect(input(container, "Move Name").value).toBe("vine-whip"));
-    await waitFor(() => expect(button(container, "Delete")).toBeTruthy());
-    fireEvent.click(button(container, "Delete"));
+    await screen.findByTestId("frappe-form-menu");
+    fireEvent.click(screen.getByTestId("frappe-form-menu"));
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Delete" }));
 
     await waitFor(() => expect(pushed).toEqual(["/moves"]));
     expect(confirmDelete).toHaveBeenCalledTimes(1);
@@ -391,7 +402,8 @@ describe("FrappeForm with a route", () => {
     expect(input(container, "Power").value).toBe("40");
     expect(screen.queryByText(`Failed to load ${doctype} form`)).toBeNull();
     expect(() => button(container, "Edit")).toThrow();
-    expect(() => button(container, "Delete")).toThrow();
+    expect(await menuEntry("Edit")).toBeNull();
+    expect(await menuEntry("Delete")).toBeNull();
   });
 
   it("draws no field for the collection's own $ keys on a reader's record", async () => {
@@ -415,7 +427,8 @@ describe("FrappeForm with a route", () => {
       true,
     );
     expect(() => button(container, "Edit")).toThrow();
-    expect(() => button(container, "Delete")).toThrow();
+    expect(await menuEntry("Edit")).toBeNull();
+    expect(await menuEntry("Delete")).toBeNull();
   });
 
   it("renders a reader's edit page read-only with no Save", async () => {
@@ -444,13 +457,14 @@ describe("FrappeForm with a route", () => {
     const own = renderAt("/moves/a1b2c3", "form");
     await waitFor(() => expect(input(own.container, "Move Name").value).toBe("tackle"));
     await waitFor(() => expect(button(own.container, "Edit")).toBeTruthy());
-    expect(button(own.container, "Delete")).toBeTruthy();
+    expect(await menuEntry("Delete")).not.toBeNull();
     cleanup();
 
     const others = renderAt("/moves/d4e5f6", "form");
     await waitFor(() => expect(input(others.container, "Move Name").value).toBe("vine-whip"));
     await sessionSettled();
     expect(() => button(others.container, "Edit")).toThrow();
-    expect(() => button(others.container, "Delete")).toThrow();
+    expect(await menuEntry("Edit")).toBeNull();
+    expect(await menuEntry("Delete")).toBeNull();
   });
 });

package/src/index.ts

@@ -53,7 +53,12 @@ export {
 // ---------------------------------------------------------------------------
 
 export { FrappeTable, filterValueToFrappeTuple, type FrappeTableProps } from "./FrappeTable";
-export { FrappeForm, type FrappeConnectionRows, type FrappeFormProps } from "./FrappeForm";
+export {
+  FrappeForm,
+  type FrappeConnectionRows,
+  type FrappeFormPage,
+  type FrappeFormProps,
+} from "./FrappeForm";
 export {
   useFrappeForm,
   type FrappeFormConnectionConfig,
@@ -120,6 +125,7 @@ export {
 } from "./list/ListToolsSheet";
 export { ShufflePanel, type ShufflePanelProps } from "./list/ShufflePanel";
 export { FacetBadge, type FacetBadgeProps } from "./list/FacetBadge";
+export { facetBadgeSteps } from "./list/facetBadgeSteps";
 export { ImageWell, type ImageWellProps } from "./list/ImageWell";
 export { RecordCard, type RecordCardBadge, type RecordCardProps } from "./list/RecordCard";
 export { recordTitle, type FrappeRecordLook, type FrappeRecordSlide } from "./list/recordLook";

package/src/insights/InsightsLeaders.tsx

@@ -78,14 +78,14 @@ export function InsightsLeaders<TDoc>({
         accessorKey: "title",
         header: t("Record"),
         cell: ({ row }) => {
-          const tints = record.tints(row.original.doc);
+          const tint = record.tint(row.original.doc);
           const code = record.code(row.original.doc);
           return (
             <XStack gap="$2" alignItems="center" minWidth={0}>
               <ImageWell
                 sources={record.images(row.original.doc)}
                 alt={row.original.title}
-                tints={tints}
+                tint={tint}
                 inset={0.04}
                 width={nestedPx}
                 data-nested-px={nestedPx}