@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

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/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"}

package/types/FrappeForm.d.ts

@@ -134,6 +134,18 @@ export interface FrappeFormProps<TDoc extends {
     renderFieldWrapper?: SchemaFormProps["renderFieldWrapper"];
     /** Wraps each laid-out tab's body. */
     renderTab?: (tab: FormTab, content: React.ReactNode) => React.ReactNode;
+    /**
+     * `flat`: sections drop their card on phones and run full width under
+     * caps labels, columns hug their fields on wider screens and number
+     * fields hug their value. Defaults to `flat` on a routed page, `cards`
+     * elsewhere.
+     */
+    layout?: SchemaFormProps["layout"];
+    /**
+     * The action bar sticks to the bottom of the viewport while the form
+     * scrolls. Defaults to on for a routed page.
+     */
+    stickyActions?: boolean;
 }
 /** DocShare row shape used for the live "Shared With" sidebar section. */
 export interface DocShareRow {

package/types/FrappeForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrappeForm.d.ts","sourceRoot":"","sources":["../src/FrappeForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAOL,KAAK,QAAQ,EACd,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAc,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAe,KAAK,cAAc,EAAE,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE5F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AASzC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AASvD,OAAO,EAAyC,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAanG,OAAO,EAAiB,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE3E,4EAA4E;AAC5E,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;AAElF,MAAM,WAAW,eAAe,CAAC,IAAI,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;IAC7E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC;IAC1C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QACjB,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QACtD,YAAY,EAAE,OAAO,CAAC;QACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;QACnB,qFAAqF;QACrF,QAAQ,EAAE,OAAO,CAAC;QAClB,yEAAyE;QACzE,WAAW,EAAE,oBAAoB,CAAC;QAClC,gDAAgD;QAChD,kBAAkB,EAAE,OAAO,CAAC;KAC7B,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC1C,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,sDAAsD;IACtD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iEAAiE;IACjE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC1C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,mFAAmF;IACnF,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACzC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAClC,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC3D,sCAAsC;IACtC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CACzE;AAmBD,0EAA0E;AAC1E,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAK9F;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5B,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EACjC,CAAC,EAAE,SAAS,EACZ,WAAW,CAAC,EAAE,iBAAiB,EAAE,GAChC,cAAc,EAAE,CAyClB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5B,CAAC,EAAE,SAAS,GACX,oBAAoB,EAAE,CAcxB;AAMD;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,IAAI,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EACvE,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,2CAS7B"}
+{"version":3,"file":"FrappeForm.d.ts","sourceRoot":"","sources":["../src/FrappeForm.tsx"],"names":[],"mappings":"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"}

package/types/FrappeFormActions.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { DocAction, DocStatusIndicator } from "./formEngine/docLifecycle";
 export interface FrappeFormActionsProps {
     /** Desk's state pill: Not Saved, Draft, Submitted or Cancelled. */
@@ -25,12 +26,30 @@ export interface FrappeFormActionsProps {
     /** The host's leave action (discards unsaved edits first). */
     onClose?: () => void;
     closeDisabled?: boolean;
+    /**
+     * `footer` is a routed editor's bottom bar: no state pill (the page header
+     * carries it), the leave button soft and the primary action filling the row.
+     */
+    placement?: "inline" | "footer";
 }
+/** Desk's state pill: Not Saved, Draft, Submitted or Cancelled. */
+export declare function FrappeFormIndicator({ indicator }: {
+    indicator: DocStatusIndicator;
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * FrappeForm's action bar with desk's docstatus lifecycle: one primary
  * action at a time (Save, Submit, Update or Amend), Cancel Document as the
  * secondary destructive action on a submitted document, and the state pill.
  * A read-only view trades Save and the leave button for Edit.
  */
-export declare function FrappeFormActions({ indicator, action, busy, disabled, onSave, onSubmit, onCancelDocument, onAmend, amendedAs, onDelete, onEdit, onClose, closeDisabled, }: FrappeFormActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function FrappeFormActions({ indicator, action, busy, disabled, onSave, onSubmit, onCancelDocument, onAmend, amendedAs, onDelete, onEdit, onClose, closeDisabled, placement, }: FrappeFormActionsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Holds the action bar. Sticky, it pins to the bottom of the scrolling page
+ * on a page surface with a top hairline, so Save stays in reach on a long
+ * form; the page scrolls under it.
+ */
+export declare function FrappeFormActionsBar({ sticky, children, }: {
+    sticky?: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FrappeFormActions.d.ts.map

package/types/FrappeFormActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FrappeFormActions.d.ts","sourceRoot":"","sources":["../src/FrappeFormActions.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAS/E,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,uEAAuE;IACvE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,sBAAsB,2CAgJxB"}
+{"version":3,"file":"FrappeFormActions.d.ts","sourceRoot":"","sources":["../src/FrappeFormActions.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAS/E,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,uEAAuE;IACvE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CACjC;AAED,mEAAmE;AACnE,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,kBAAkB,CAAA;CAAE,2CAenF;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,aAAa,EACb,SAAoB,GACrB,EAAE,sBAAsB,2CA2IxB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,MAAc,EACd,QAAQ,GACT,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAoBA"}

package/types/FrappeListView.d.ts

@@ -5,7 +5,7 @@ import { type ImageGridProps } from "@multiplatform.one/components";
 import { type FrappeListProps } from "./FrappeList";
 import { type FrappeConnection } from "./frappeConnections";
 import { type FrappeRecordLook } from "./list/recordLook";
-import { type FrappeListFacet, type FrappeListFilter, type FrappeListRange, type FrappeListSort } from "./list/listState";
+import { type FrappeListBand, type FrappeListFacet, type FrappeListFilter, type FrappeListRange, type FrappeListSort } from "./list/listState";
 import { type FrappeDoctypeFilter } from "./useConnectionFilters";
 interface ListFieldConfig {
     key: string;
@@ -140,6 +140,15 @@ export interface FrappeListViewProps<TDoc extends {
     facets?: readonly FrappeListFacet[];
     /** One minimum-value slider per numeric field. */
     ranges?: readonly FrappeListRange[];
+    /** One choice of named spans per numeric field (a Pokédex generation). */
+    bands?: readonly FrappeListBand[];
+    /**
+     * Where a routed list's filters live. `band` (default): a band above the
+     * results. `sidebar`: the page's one sidebar beside the header and
+     * results from `md` up; below it a Filters button opens the same filters
+     * in a bottom sheet and the header's secondary actions move to a ⋯ menu.
+     */
+    filterPlacement?: "band" | "sidebar";
     /**
      * Star records on this device and filter to them: true keys the stars by
      * doctype, a string names the storage key.
@@ -154,6 +163,14 @@ export interface FrappeListViewProps<TDoc extends {
      * refresh or a shared link reproduces the list.
      */
     urlState?: boolean;
+    /**
+     * `sheet` folds sort, favorites, facets and ranges into a Filters sheet
+     * behind a counted button, with the view switch beside the active-filter
+     * chips instead of in the page header (the phone layout). A routed list
+     * with `filterPlacement="sidebar"` already opens its filters in a phone
+     * sheet, so the sidebar wins and this layout applies only without it.
+     */
+    controlsLayout?: "band" | "sheet";
     baseURL?: string;
     auth?: {
         useToken?: boolean;