@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/recordShape.ts

@@ -53,7 +53,7 @@ export function recordKeyLabel(key: string): string {
 
 /**
  * The record's own fields as read-only doctype fields: Int or Float for a
- * number, Data for anything else.
+ * number, Attach Image for a Frappe image file, Data otherwise.
  */
 export function fieldsFromRecord(record: Record<string, unknown>): DocTypeField[] {
   return recordFieldKeys(record).map((key) => {
@@ -61,7 +61,15 @@ export function fieldsFromRecord(record: Record<string, unknown>): DocTypeField[
     return {
       fieldname: key,
       label: recordKeyLabel(key),
-      fieldtype: typeof value === "number" ? (Number.isInteger(value) ? "Int" : "Float") : "Data",
+      fieldtype:
+        typeof value === "number"
+          ? Number.isInteger(value)
+            ? "Int"
+            : "Float"
+          : typeof value === "string" &&
+              /^\/(private\/)?files\/[^?#]+\.(png|jpe?g|gif|webp|svg)$/i.test(value)
+            ? "Attach Image"
+            : "Data",
       read_only: 1,
     };
   });

package/src/report/ReportGrid.tsx

@@ -419,7 +419,6 @@ export function ReportGrid({
                   <View flex={1} minWidth={0} overflow="visible">
                     <Input
                       size="$2"
-                      compact
                       value={columnFilters[column.fieldname] ?? ""}
                       onChangeText={(next) => onColumnFilterChange(column.fieldname, next)}
                       placeholder={placeholder}

package/src/report/ReportViewToolbar.tsx

@@ -249,7 +249,6 @@ export function ReportViewToolbar({
               <YStack flex={1} minWidth={0}>
                 <Input
                   size="$3"
-                  compact
                   value={saveName}
                   onChangeText={setSaveName}
                   placeholder={t("report.reportNamePlaceholder", "New report name")}

package/src/schemaForm/SchemaForm.flat.spec.tsx

@@ -0,0 +1,192 @@
+// The flat layout an edit page on a phone reads: sections without their
+// card under caps labels, columns that hug their fields, and number fields
+// that size to their value with the unit after it.
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import type { FieldSchema } from "../fieldRegistry";
+import { SchemaForm, type FormSchema } from "./index";
+
+const vitals: FieldSchema[] = [
+  { type: "Data", name: "pokemon_name", label: "Name" },
+  { type: "Int", name: "height", label: "Height" },
+  { type: "Int", name: "weight", label: "Weight" },
+];
+const art: FieldSchema[] = [{ type: "Attach Image", name: "sprite_front", label: "Front" }];
+
+const schema: FormSchema = {
+  fields: [...vitals, ...art],
+  sections: [{ label: "Vitals", columns: [{ fields: vitals }, { fields: art }] }],
+};
+
+const doc = {
+  pokemon_name: "Pikachu",
+  height: 4,
+  weight: 60,
+  sprite_front: "https://img.test/pikachu.png",
+};
+
+function renderCompact() {
+  return renderWithProviders(
+    <SchemaForm
+      schema={schema}
+      doc={doc}
+      setValue={vi.fn()}
+      layout="flat"
+      overrides={{
+        height: { props: { unit: "dm", hug: true } },
+        weight: { props: { unit: "hg", hug: true } },
+      }}
+    />,
+  );
+}
+
+describe("SchemaForm flat layout", () => {
+  it("labels a section with a caps heading instead of the card heading", () => {
+    renderCompact();
+    const heading = screen.getByRole("heading", { name: "Vitals" });
+    expect(heading.hasAttribute("data-mpo-schema-form-caps-label")).toBe(true);
+    expect(document.querySelector("h2")).toBeNull();
+  });
+
+  it("marks the section flat and its columns hugging", () => {
+    renderCompact();
+    expect(document.querySelector("[data-mpo-schema-form-flat]")).not.toBeNull();
+    const columns = document.querySelectorAll("[data-mpo-schema-form-col]");
+    expect(columns.length).toBeGreaterThan(0);
+    for (const column of columns) {
+      expect(column.hasAttribute("data-mpo-schema-form-col-hug")).toBe(true);
+    }
+  });
+
+  it("flattens the section card on phones: no inset, fill or radius under max-sm", () => {
+    const source = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "index.tsx"), "utf8");
+    expect(source).toMatch(/"\$max-sm": phoneFlatSection/);
+    const flat = source.match(/const phoneFlatSection = \{([\s\S]*?)\}/)?.[1] ?? "";
+    expect(flat).toMatch(/padding: 0/);
+    expect(flat).toMatch(/backgroundColor: "transparent"/);
+    expect(flat).toMatch(/borderRadius: 0/);
+  });
+
+  it("number fields hug their value with the unit after it", () => {
+    renderCompact();
+    const height = screen.getByLabelText("Height") as HTMLInputElement;
+    expect(height.style.width).toMatch(/^\d+ch$/);
+    expect(height.closest("[data-field-hug='true']")).not.toBeNull();
+    const box = height.closest("[data-stepper-control]");
+    expect(box?.textContent).toContain("dm");
+    const weight = screen.getByLabelText("Weight") as HTMLInputElement;
+    expect(weight.closest("[data-stepper-control]")?.textContent).toContain("hg");
+  });
+
+  it("the text field keeps its natural width (no hug)", () => {
+    renderCompact();
+    const name = screen.getByLabelText("Name") as HTMLInputElement;
+    expect(name.closest("[data-field-hug='true']")).toBeNull();
+  });
+
+  it("an image field previews its stored URL", () => {
+    renderCompact();
+    const img = document.querySelector('[data-file-upload="existing"] img');
+    expect(img?.getAttribute("src")).toBe("https://img.test/pikachu.png");
+  });
+
+  it("the default layout keeps the card heading and even columns", () => {
+    renderWithProviders(<SchemaForm schema={schema} doc={doc} setValue={vi.fn()} />);
+    expect(document.querySelector("[data-mpo-schema-form-flat]")).toBeNull();
+    expect(document.querySelector("[data-mpo-schema-form-col-hug]")).toBeNull();
+    expect(document.querySelector("[data-mpo-schema-form-caps-label]")).toBeNull();
+  });
+});
+
+describe("FrappeFormActionsBar", () => {
+  it("sticks the Save bar to the bottom of the scrolling page", async () => {
+    const { FrappeFormActionsBar } = await import("../FrappeFormActions");
+    renderWithProviders(
+      <FrappeFormActionsBar sticky>
+        <button type="button">Save</button>
+      </FrappeFormActionsBar>,
+    );
+    const bar = screen.getByTestId("frappe-form-actions-sticky");
+    expect(bar.style.position).toBe("sticky");
+    expect(bar.style.bottom).toMatch(/^0(px)?$/);
+    expect(bar.contains(screen.getByText("Save"))).toBe(true);
+  });
+
+  it("renders the bar in place when not sticky", async () => {
+    const { FrappeFormActionsBar } = await import("../FrappeFormActions");
+    renderWithProviders(
+      <FrappeFormActionsBar>
+        <button type="button">Save</button>
+      </FrappeFormActionsBar>,
+    );
+    expect(screen.queryByTestId("frappe-form-actions-sticky")).toBeNull();
+  });
+});
+
+describe("flat number fields from meta labels", () => {
+  it("moves a short unit in the label's parentheses after the value", async () => {
+    const { splitUnitLabel } = await import("../fieldRegistry");
+    expect(splitUnitLabel("Height (dm)")).toEqual({ label: "Height", unit: "dm" });
+    expect(splitUnitLabel("Weight (hg)")).toEqual({ label: "Weight", unit: "hg" });
+    expect(splitUnitLabel("Sprite (Front)")).toEqual({ label: "Sprite", unit: "Front" });
+    expect(splitUnitLabel("Base Experience")).toEqual({ label: "Base Experience" });
+    expect(splitUnitLabel("Notes (see the long remark)")).toEqual({
+      label: "Notes (see the long remark)",
+    });
+  });
+
+  it("hugs every number in a flat form and reads its unit from the label", () => {
+    const fields: FieldSchema[] = [
+      { type: "Int", name: "height", label: "Height (dm)" },
+      { type: "Int", name: "base_experience", label: "Base Experience" },
+    ];
+    renderWithProviders(
+      <SchemaForm
+        schema={{ fields, sections: [{ label: "Vitals", columns: [{ fields }] }] }}
+        doc={{ height: 7, base_experience: 64 }}
+        setValue={vi.fn()}
+        layout="flat"
+      />,
+    );
+    const height = screen.getByLabelText("Height") as HTMLInputElement;
+    expect(height.style.width).toMatch(/^\d+ch$/);
+    expect(height.closest("[data-stepper-control]")?.textContent).toContain("dm");
+    const xp = screen.getByLabelText("Base Experience") as HTMLInputElement;
+    expect(xp.style.width).toMatch(/^\d+ch$/);
+  });
+
+  it("a cards form keeps the meta label whole and the number full width", () => {
+    const fields: FieldSchema[] = [{ type: "Int", name: "height", label: "Height (dm)" }];
+    renderWithProviders(
+      <SchemaForm
+        schema={{ fields, sections: [{ label: "Vitals", columns: [{ fields }] }] }}
+        doc={{ height: 7 }}
+        setValue={vi.fn()}
+      />,
+    );
+    const height = screen.getByLabelText("Height (dm)") as HTMLInputElement;
+    expect(height.style.width).toBe("");
+  });
+});
+
+describe("flat columns", () => {
+  it("stacks each column whole, so a phone reads one column's fields before the next", () => {
+    renderCompact();
+    const order = ["Name", "Height", "Weight", "Front"].map((label) =>
+      screen.getByText(label, { selector: "label" }),
+    );
+    for (let index = 1; index < order.length; index += 1) {
+      expect(
+        order[index - 1].compareDocumentPosition(order[index]) & Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBeTruthy();
+    }
+    const columns = document.querySelectorAll("[data-mpo-schema-form-col]");
+    expect(columns).toHaveLength(2);
+    expect(columns[0].textContent).toContain("Weight");
+    expect(columns[1].textContent).toContain("Front");
+  });
+});

package/src/schemaForm/SchemaForm.spec.tsx

@@ -111,7 +111,7 @@ describe("SchemaForm design-law (MPO-60 / R10)", () => {
     expect(style).not.toMatch(/border-width:\s*1px/i);
   });
 
-  it("forwards description as helperText and honors compact/skeleton flags", () => {
+  it("forwards description as helperText", () => {
     const fields: FieldSchema[] = [
       {
         type: "Data",

package/src/schemaForm/SchemaWizard.tsx

@@ -64,7 +64,6 @@ export interface SchemaWizardProps extends Omit<SchemaFormProps, "schema"> {
   reviewLabel?: string;
   status?: WizardStatus;
   labels?: "visible" | "hidden" | "auto";
-  compact?: boolean;
   emptyTitle?: string;
   emptyDescription?: string;
   errorTitle?: string;
@@ -82,7 +81,6 @@ export function SchemaWizard({
   reviewLabel = "Review",
   status = "ready",
   labels,
-  compact,
   emptyTitle,
   emptyDescription,
   errorTitle,
@@ -156,7 +154,6 @@ export function SchemaWizard({
       onCancel={onCancel}
       status={status}
       labels={labels}
-      compact={compact}
       emptyTitle={emptyTitle}
       emptyDescription={emptyDescription}
       errorTitle={errorTitle}

package/src/schemaForm/index.tsx

@@ -112,6 +112,13 @@ export interface SchemaFormProps {
    * positions. Unknown names are ignored. Cheaper than replacing `sections`.
    */
   order?: string[];
+  /**
+   * `cards` (default): each section is a card under its heading. `flat`:
+   * on phones a section drops its card and runs full width under a caps
+   * label; on wider screens columns hug their fields instead of splitting
+   * the row evenly.
+   */
+  layout?: "cards" | "flat";
 }
 
 // ---------------------------------------------------------------------------
@@ -125,6 +132,8 @@ export interface SchemaFormProps {
  */
 const layoutFieldTypes = new Set(["Section Break", "Column Break", "Tab Break", "Fold"]);
 
+const numericFieldTypes = new Set(["Int", "Float", "Currency", "Percent"]);
+
 function isOverrideFunction(
   override: FieldOverride,
 ): override is (props: FieldRenderProps) => React.ReactNode {
@@ -158,6 +167,7 @@ export function SchemaForm({
   sectionHeadingLevel = 2,
   renderFieldWrapper,
   order,
+  layout = "cards",
 }: SchemaFormProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
@@ -255,6 +265,8 @@ export function SchemaForm({
       commit: field.commit,
       control: field.control,
       ...(field.type === "Table" ? { parentDoc: doc } : null),
+      // A flat form's numbers hug their value.
+      ...(layout === "flat" && numericFieldTypes.has(field.type) ? { hug: true } : null),
     };
 
     // Check overrides
@@ -316,6 +328,7 @@ export function SchemaForm({
               section={section}
               headingLevel={sectionHeadingLevel}
               renderField={renderWrappedField}
+              flat={layout === "flat"}
             />
           );
         })}
@@ -332,6 +345,7 @@ interface SchemaFormSectionCardProps {
   section: FormSection;
   headingLevel: HeadingLevel;
   renderField: (field: FieldSchema) => React.ReactNode;
+  flat?: boolean;
 }
 
 /**
@@ -341,7 +355,12 @@ interface SchemaFormSectionCardProps {
  * missing) and recomputes it as the doc changes; the user's manual toggle
  * wins until the computed value itself changes.
  */
-function SchemaFormSectionCard({ section, headingLevel, renderField }: SchemaFormSectionCardProps) {
+function SchemaFormSectionCard({
+  section,
+  headingLevel,
+  renderField,
+  flat = false,
+}: SchemaFormSectionCardProps) {
   const { knobProps } = useResolvedKnobs();
   const collapsible = !!section.collapsible && !!section.label;
   const [collapsed, setCollapsed] = React.useState(
@@ -357,9 +376,23 @@ function SchemaFormSectionCard({ section, headingLevel, renderField }: SchemaFor
     <Card
       data-mpo-schema-form-card=""
       data-mpo-schema-form-borderless={hideBorder ? "" : undefined}
+      data-mpo-schema-form-flat={flat ? "" : undefined}
       {...(hideBorder ? { borderWidth: 0, backgroundColor: "transparent" } : {})}
+      {...(flat ? { "$max-sm": phoneFlatSection } : {})}
     >
-      {(section.label || section.description) && (
+      {flat && section.label ? (
+        <Card.Header>
+          <CompactSectionLabel
+            label={section.label}
+            description={section.description}
+            level={headingLevel}
+            collapsible={collapsible}
+            collapsed={effectiveCollapsed}
+            onCollapseChange={setCollapsed}
+          />
+        </Card.Header>
+      ) : null}
+      {!flat && (section.label || section.description) && (
         <Card.Header>
           {section.label ? (
             <Heading
@@ -384,37 +417,123 @@ function SchemaFormSectionCard({ section, headingLevel, renderField }: SchemaFor
         display={effectiveCollapsed ? "none" : undefined}
         aria-hidden={effectiveCollapsed || undefined}
       >
-        <YStack {...knobProps.gap} width="100%" data-mpo-schema-form-section="">
-          {Array.from(
-            { length: Math.max(...section.columns.map((c) => c.fields.length), 0) },
-            (_, rowIndex) => (
-              // flexWrap + minWidth: columns stack when the container is narrower
-              // than ~250px × N (DG-FORM-09). Keep row-major DOM order for tab.
-              <XStack
-                key={rowIndex}
-                {...knobProps.gapLg}
-                width="100%"
-                flexWrap="wrap"
-                alignItems="flex-start"
-                data-mpo-schema-form-row=""
+        {flat ? (
+          // Flat: each column is one stack, so a hugging column keeps one
+          // width down the section and a phone reads each column whole.
+          <XStack
+            {...knobProps.gapLg}
+            width="100%"
+            flexWrap="wrap"
+            alignItems="flex-start"
+            data-mpo-schema-form-section=""
+            data-mpo-schema-form-row=""
+          >
+            {section.columns.map((column, colIndex) => (
+              <YStack
+                key={colIndex}
+                {...hugColumn}
+                {...knobProps.gap}
+                data-mpo-schema-form-col=""
+                data-mpo-schema-form-col-hug=""
               >
-                {section.columns.map((column, colIndex) => (
-                  <YStack
-                    key={colIndex}
-                    flex={1}
-                    flexBasis={250}
-                    minWidth={250}
-                    maxWidth="100%"
-                    data-mpo-schema-form-col=""
-                  >
-                    {column.fields[rowIndex] ? renderField(column.fields[rowIndex]) : null}
-                  </YStack>
-                ))}
-              </XStack>
-            ),
-          )}
-        </YStack>
+                {column.fields.map((field) => renderField(field))}
+              </YStack>
+            ))}
+          </XStack>
+        ) : (
+          <YStack {...knobProps.gap} width="100%" data-mpo-schema-form-section="">
+            {Array.from(
+              { length: Math.max(...section.columns.map((c) => c.fields.length), 0) },
+              (_, rowIndex) => (
+                // flexWrap + minWidth: columns stack when the container is narrower
+                // than ~250px × N (DG-FORM-09). Keep row-major DOM order for tab.
+                <XStack
+                  key={rowIndex}
+                  {...knobProps.gapLg}
+                  width="100%"
+                  flexWrap="wrap"
+                  alignItems="flex-start"
+                  data-mpo-schema-form-row=""
+                >
+                  {section.columns.map((column, colIndex) => (
+                    <YStack key={colIndex} {...evenColumn} data-mpo-schema-form-col="">
+                      {column.fields[rowIndex] ? renderField(column.fields[rowIndex]) : null}
+                    </YStack>
+                  ))}
+                </XStack>
+              ),
+            )}
+          </YStack>
+        )}
       </Card.Footer>
     </Card>
   );
 }
+
+// Even columns split the row and stack under ~250px each (DG-FORM-09).
+const evenColumn = { flex: 1, flexBasis: 250, minWidth: 250, maxWidth: "100%" } as const;
+// Hugging columns take their fields' width and wrap when the row runs out;
+// on phones each takes the full row.
+const hugColumn = {
+  flexGrow: 0,
+  flexShrink: 1,
+  flexBasis: "auto",
+  minWidth: 0,
+  maxWidth: "100%",
+  "$max-sm": { flexGrow: 1, flexBasis: "100%" },
+} as const;
+// A phone section is no card: no inset, fill or radius, the page's own gutter.
+const phoneFlatSection = {
+  padding: 0,
+  backgroundColor: "transparent",
+  borderRadius: 0,
+  borderWidth: 0,
+  elevation: 0,
+} as const;
+
+/**
+ * A flat section's label: a caps heading at the label tier, collapsing
+ * like the full Heading when the section does.
+ */
+function CompactSectionLabel({
+  label,
+  description,
+  level,
+  collapsible,
+  collapsed,
+  onCollapseChange,
+}: {
+  label: string;
+  description?: string;
+  level: HeadingLevel;
+  collapsible: boolean;
+  collapsed: boolean;
+  onCollapseChange: (collapsed: boolean) => void;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  const toggle = collapsible ? () => onCollapseChange(!collapsed) : undefined;
+  return (
+    <YStack gap="$1">
+      <Text
+        role="heading"
+        aria-level={level}
+        {...knobProps.label}
+        fontWeight="700"
+        color="$color10"
+        textTransform="uppercase"
+        letterSpacing={1}
+        cursor={toggle ? "pointer" : undefined}
+        aria-expanded={collapsible ? !collapsed : undefined}
+        onPress={toggle}
+        data-mpo-schema-form-caps-label=""
+      >
+        {label}
+      </Text>
+      {description && !collapsed ? (
+        <Text {...knobProps.body} color="$color10">
+          {description}
+        </Text>
+      ) : null}
+    </YStack>
+  );
+}

package/src/useFrappeForm.spec.tsx

@@ -207,3 +207,85 @@ describe("a caller-owned FrappeForm", () => {
     expect(created).toMatchObject({ subject: "Scanner", priority: "Medium", status: "Open" });
   });
 });
+
+describe("save single-flight", () => {
+  it.each([false, true])("shares an edit save and releases it after failure=%s", async (fail) => {
+    const fixtures = ticketFixtures();
+    let release!: () => void;
+    const persistence = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const updateDoc = fixtures.updateDoc.bind(fixtures);
+    const mutate = vi.spyOn(fixtures, "updateDoc").mockImplementationOnce(async (...args) => {
+      await persistence;
+      if (fail) throw new Error("Persistence refused");
+      return updateDoc(...args);
+    });
+    renderWithProviders(
+      <FrappeProvider baseURL={`http://single-flight-${fail}.test`} fixtures={fixtures}>
+        <Host doctype="Desk Ticket" name="TICKET-1" />
+      </FrappeProvider>,
+    );
+    await expectProbe("subject", "val=Printer");
+    act(() => {
+      controller?.setValue("subject", "Scanner");
+      controller?.setValue("resolution", "Rebooted");
+    });
+    let first!: Promise<string | undefined>;
+    let second!: Promise<string | undefined>;
+    act(() => {
+      first = controller!.save();
+      second = controller!.save();
+    });
+    expect(second).toBe(first);
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+    expect(controller?.isSubmitting).toBe(true);
+    await act(async () => {
+      release();
+      expect(await first).toBe(fail ? undefined : "TICKET-1");
+    });
+    expect(controller?.isSubmitting).toBe(false);
+    act(() => controller?.setValue("subject", "Another edit"));
+    await act(async () => {
+      const retry = controller!.save();
+      expect(retry).not.toBe(first);
+      expect(await retry).toBe("TICKET-1");
+    });
+    expect(mutate).toHaveBeenCalledTimes(2);
+  });
+
+  it("shares a create save until persistence assigns its name", async () => {
+    const fixtures = ticketFixtures();
+    let release!: () => void;
+    const persistence = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const createDoc = fixtures.createDoc.bind(fixtures);
+    const mutate = vi.spyOn(fixtures, "createDoc").mockImplementationOnce(async (...args) => {
+      await persistence;
+      return createDoc(...args);
+    });
+    renderWithProviders(
+      <FrappeProvider baseURL="http://single-flight-create.test" fixtures={fixtures}>
+        <Host doctype="Desk Ticket" />
+      </FrappeProvider>,
+    );
+    await expectProbe("priority", "val=Medium");
+    act(() => {
+      controller?.setValue("subject", "Scanner");
+      controller?.setValue("resolution", "Rebooted");
+    });
+    let first!: Promise<string | undefined>;
+    let second!: Promise<string | undefined>;
+    act(() => {
+      first = controller!.save();
+      second = controller!.save();
+    });
+    expect(second).toBe(first);
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+    await act(async () => {
+      release();
+      expect(await first).toBeTruthy();
+    });
+  });
+});

package/src/useFrappeForm.ts

@@ -229,6 +229,7 @@ export function useFrappeForm<TDoc extends { name: string; doctype: string }>(
   const [saveConflict, setSaveConflict] = useState(false);
   const [wasDeleted, setWasDeleted] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const saveInFlight = useRef<Promise<string | undefined> | undefined>(undefined);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [activeTab, setActiveTab] = useState<string | undefined>(undefined);
   const everLoadedRef = useRef(false);
@@ -552,7 +553,7 @@ export function useFrappeForm<TDoc extends { name: string; doctype: string }>(
 
   const canWrite = isCreate ? rights.create : rights.write;
 
-  const save = async (): Promise<string | undefined> => {
+  const persist = async (): Promise<string | undefined> => {
     if (wasDeleted || !canWrite || disabled) return undefined;
 
     const requiredErrors = validate();
@@ -618,6 +619,17 @@ export function useFrappeForm<TDoc extends { name: string; doctype: string }>(
     }
   };
 
+  const save = (): Promise<string | undefined> => {
+    if (saveInFlight.current) return saveInFlight.current;
+    const promise = Promise.resolve()
+      .then(persist)
+      .finally(() => {
+        if (saveInFlight.current === promise) saveInFlight.current = undefined;
+      });
+    saveInFlight.current = promise;
+    return promise;
+  };
+
   const reset = () => {
     if (baselineDoc) {
       setLocalDoc(baselineDoc);

package/src/useFrappePagination.ts

@@ -15,9 +15,9 @@
  *
  * The read itself is {@link useFrappeRows} (MPO-251), so FrappeList shares
  * the one implementation every other doctype view uses. On top of it this
- * hook manages an increasing `limit` over the rows it returns. When the
- * number of returned items equals the limit, `hasMore` is `true`. Calling
- * `onLoadMore` increases the limit by `pageSize`.
+ * hook manages an increasing `limit` over the rows it returns. While the read
+ * holds more rows than the limit, `hasMore` is `true`. Calling `onLoadMore`
+ * increases the limit by `pageSize`.
  */
 
 import { useCallback, useMemo, useState } from "react";
@@ -129,10 +129,12 @@ export function useFrappePagination<TDoc extends { name: string; doctype: string
   // Slice to the current limit (progressive disclosure)
   const items = useMemo(() => allItems.slice(0, limit), [allItems, limit]);
 
-  // If the total data available equals or exceeds the limit, there might
-  // be more to load. If the sync layer has fetched all available docs and
-  // they're fewer than the limit, hasMore is false.
-  const hasMore = allItems.length >= limit;
+  // More remains only while the read holds rows past the revealed slice.
+  // `onLoadMore` widens the slice over rows already read; it fetches nothing,
+  // so a read that ends exactly on the limit is the last page: `>=` kept
+  // hasMore true there, and the list stayed a capped inner viewport whose
+  // rows the page scroll could not reach (§ List scroll owner).
+  const hasMore = allItems.length > limit;
 
   const onLoadMore = useCallback(() => {
     setLimit((prev) => prev + pageSize);

package/types/FileBrowser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FileBrowser/index.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EACV,2BAA2B,EAC3B,eAAe,EACf,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,yBAAyB,EACzB,wBAAwB,EACxB,eAAe,EAChB,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,2BAA2B,EAC3B,eAAe,EACf,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,yBAAyB,EACzB,wBAAwB,EACxB,eAAe,GAChB,CAAC;AAsJF,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,WAAoB,EACpB,YAAY,EACZ,SAAS,EACT,aAAuB,EACvB,WAAW,EAAE,eAAe,EAC5B,mBAAmB,EACnB,YAAY,EACZ,MAAM,EACN,aAAa,EAAE,iBAAiB,EAChC,qBAAqB,EACrB,QAAe,EACf,WAAsB,EACtB,cAAuB,EACvB,gBAAwB,EACxB,UAAkB,EAClB,MAAM,EAAE,UAAU,EAClB,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,cAAc,EACd,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,GACP,EAAE,gBAAgB,2CAwhBlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FileBrowser/index.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EACV,2BAA2B,EAC3B,eAAe,EACf,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,yBAAyB,EACzB,wBAAwB,EACxB,eAAe,EAChB,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,2BAA2B,EAC3B,eAAe,EACf,iBAAiB,EACjB,qBAAqB,EACrB,gBAAgB,EAChB,yBAAyB,EACzB,wBAAwB,EACxB,eAAe,GAChB,CAAC;AAoJF,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,WAAoB,EACpB,YAAY,EACZ,SAAS,EACT,aAAuB,EACvB,WAAW,EAAE,eAAe,EAC5B,mBAAmB,EACnB,YAAY,EACZ,MAAM,EACN,aAAa,EAAE,iBAAiB,EAChC,qBAAqB,EACrB,QAAe,EACf,WAAsB,EACtB,cAAuB,EACvB,gBAAwB,EACxB,UAAkB,EAClB,MAAM,EAAE,UAAU,EAClB,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,cAAc,EACd,MAAM,EACN,UAAU,EACV,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,GACP,EAAE,gBAAgB,2CAwhBlB"}