@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/src/FrappeFormActions.tsx

@@ -1,5 +1,5 @@
 import { Chip, type ChipColor } from "@multiplatform.one/components";
-import { Button } from "@multiplatform.one/forms";
+import { Button, zIndex } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   ArrowCounterClockwiseIcon,
@@ -10,8 +10,9 @@ import {
   TrashIcon,
   XIcon,
 } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { XStack } from "tamagui";
+import { XStack, YStack, isWeb } from "tamagui";
 import type { DocAction, DocStatusIndicator } from "./formEngine/docLifecycle";
 
 const indicatorColors: Record<DocStatusIndicator, ChipColor> = {
@@ -47,6 +48,29 @@ 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 function FrappeFormIndicator({ indicator }: { indicator: DocStatusIndicator }) {
+  const { t } = useTranslation();
+  const labels: Record<DocStatusIndicator, string> = {
+    notSaved: t("Not Saved"),
+    draft: t("Draft"),
+    submitted: t("Submitted"),
+    cancelled: t("Cancelled"),
+  };
+  return (
+    <XStack alignItems="center" testID={`frappe-form-status-${indicator}`}>
+      <Chip size="$2" variant="subtle" color={indicatorColors[indicator]}>
+        {labels[indicator]}
+      </Chip>
+    </XStack>
+  );
 }
 
 /**
@@ -69,31 +93,25 @@ export function FrappeFormActions({
   onEdit,
   onClose,
   closeDisabled,
+  placement = "inline",
 }: FrappeFormActionsProps) {
+  const footer = placement === "footer";
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const readOnlyReason = t("Form is read-only");
 
-  const indicatorLabels: Record<DocStatusIndicator, string> = {
-    notSaved: t("Not Saved"),
-    draft: t("Draft"),
-    submitted: t("Submitted"),
-    cancelled: t("Cancelled"),
-  };
-
   return (
     <XStack
       {...knobProps.gap}
       justifyContent="flex-end"
       alignItems="center"
-      paddingTop="$3"
+      paddingTop={footer ? 0 : "$3"}
+      flex={footer ? 1 : undefined}
       testID="frappe-form-actions"
     >
-      {indicator && (
-        <XStack flex={1} alignItems="center" testID={`frappe-form-status-${indicator}`}>
-          <Chip size="$2" variant="subtle" color={indicatorColors[indicator]}>
-            {indicatorLabels[indicator]}
-          </Chip>
+      {indicator && !footer && (
+        <XStack flex={1}>
+          <FrappeFormIndicator indicator={indicator} />
         </XStack>
       )}
 
@@ -114,8 +132,8 @@ export function FrappeFormActions({
 
       {onClose && (
         <Button
-          outlined
-          icon={XIcon}
+          outlined={!footer}
+          icon={footer ? undefined : XIcon}
           disabled={closeDisabled}
           disabledReason={closeDisabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
@@ -186,6 +204,7 @@ export function FrappeFormActions({
         <Button
           accent
           icon={CheckCircleIcon}
+          flex={footer ? 1 : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
@@ -200,7 +219,8 @@ export function FrappeFormActions({
       {(action === "save" || action === "update") && (
         <Button
           accent
-          icon={FloppyDiskIcon}
+          icon={footer ? undefined : FloppyDiskIcon}
+          flex={footer ? 1 : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
@@ -214,3 +234,36 @@ export function FrappeFormActions({
     </XStack>
   );
 }
+
+/**
+ * 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 function FrappeFormActionsBar({
+  sticky = false,
+  children,
+}: {
+  sticky?: boolean;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  if (!sticky) return <>{children}</>;
+  return (
+    <YStack
+      testID="frappe-form-actions-sticky"
+      data-sticky-actions=""
+      backgroundColor="$background"
+      borderTopWidth={knobProps.surface.borderWidth}
+      borderColor="$borderColor"
+      paddingBottom="$3"
+      // Above the form's own stacked content (image tiles, remove discs).
+      zIndex={zIndex.stickyHeader}
+      {...(isWeb
+        ? { style: { position: "sticky", bottom: 0 } as never }
+        : { position: "relative" as const })}
+    >
+      {children}
+    </YStack>
+  );
+}

package/src/FrappeFormConnections.tsx

@@ -94,7 +94,7 @@ export function FrappeFormConnectionSection({
       <YStack {...knobProps.gap}>
         <AsyncBoundary
           layout="table"
-          compact
+          size="$3"
           loading={isLoading}
           error={error}
           errorTitle={

package/src/FrappeKPICard.tsx

@@ -145,7 +145,7 @@ export function FrappeKPICard({
   if (!connection) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         error
         errorTitle={t("{{title}} is not configured", { title: config.title })}
         errorDescription={t(
@@ -164,7 +164,7 @@ export function FrappeKPICard({
   if (error) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         error={error}
         errorTitle={
           isPermissionError

package/src/FrappeLikedBy.tsx

@@ -273,7 +273,7 @@ function FrappeLikedByBody({
     <YStack {...knobProps.gap} testID="frappe-liked-by" {...stackProps}>
       <FrappeReconnectIndicator config={connectionConfig} />
       <AsyncBoundary
-        compact
+        size="$3"
         loading={!!collection && isLoading}
         error={loadError}
         onRetry={onRetry}

package/src/FrappeListView.controls.spec.tsx

@@ -157,7 +157,9 @@ describe("FrappeListView controls write their state back", () => {
     const setParams = vi.fn();
     renderList({}, {}, navigationAt({}, setParams));
     await waitFor(() => expect(shownCards().length).toBe(6), { timeout: 5000 });
-    fireEvent.click(await screen.findByTestId("pokemon-type-fire"));
+    const chip = await screen.findByTestId("pokemon-type-fire");
+    expect(getComputedStyle(chip).height).toBe("32px");
+    fireEvent.click(chip);
     await expectCards(["charmander"]);
     expect(setParams).toHaveBeenCalledWith({ type: "fire" });
   });
@@ -223,3 +225,44 @@ describe("FrappeListView routed page with its toolbar off", () => {
     expect(navigate).toHaveBeenCalledWith("/pokemon/new");
   });
 });
+
+describe("FrappeListView on the house compact class (§ ListControls rows)", () => {
+  const initialWidth = window.innerWidth;
+  afterEach(() => {
+    window.innerWidth = initialWidth;
+  });
+
+  it("at 390 puts the view switcher icon-only on the one control row, with one chip row under it", async () => {
+    window.innerWidth = 390;
+    renderList({}, { route: "/pokemon", showToolbar: false, title: "Roster" });
+    const band = await screen.findByTestId("pokemon-controls");
+    expect(band.getAttribute("data-controls-layout")).toBe("compact");
+    const row = screen.getByTestId("pokemon-controls-row");
+    const switcher = screen.getByTestId("pokemon-view-switcher");
+    expect(row.contains(switcher)).toBe(true);
+    // Icon-only: the segments keep their names but paint no label text.
+    expect(switcher.textContent).toBe("");
+    expect(switcher.querySelector('[aria-label="List"]')).not.toBeNull();
+    expect(screen.queryByTestId("view-switcher")).toBeNull();
+    expect(row.contains(screen.getByTestId("pokemon-tools"))).toBe(true);
+    expect(band.children).toHaveLength(2);
+    expect(screen.getAllByRole("radiogroup", { name: "Type" })).toHaveLength(1);
+  });
+
+  it("at 700 keeps the switcher in the header and the controls on one row", async () => {
+    window.innerWidth = 700;
+    renderList({}, { route: "/pokemon", showToolbar: false, title: "Roster" });
+    const band = await screen.findByTestId("pokemon-controls");
+    expect(band.getAttribute("data-controls-layout")).toBe("wide");
+    expect(screen.getByTestId("view-switcher")).toBeTruthy();
+    expect(screen.queryByTestId("pokemon-view-switcher")).toBeNull();
+    expect(screen.queryByTestId("pokemon-tools")).toBeNull();
+  });
+
+  it("paints the surface card without an overflow clip, so the page scroll reaches every row", async () => {
+    renderList({}, { route: "/pokemon", surface: true, defaultViewMode: "list" });
+    const card = await screen.findByTestId("pokemon-list");
+    expect(getComputedStyle(card).overflow).not.toBe("hidden");
+    expect(card.getAttribute("data-constraint-container")).toBe("PageSection");
+  });
+});

package/src/FrappeListView.sidebar.spec.tsx

@@ -0,0 +1,225 @@
+// A routed list whose filters live in the page's one sidebar: type facets
+// with counts, a generation band, a base-XP stock slider and favorites
+// beside the results from md up; below md a Filters button wearing the
+// active-filter count opens the same filters (sort included) in a bottom
+// sheet, and the header's secondary actions move to a ⋯ menu.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor, within } from "@testing-library/react";
+import i18next from "i18next";
+import { Order } from "@multiplatform.one/frappe";
+import { ChartBarIcon } from "@phosphor-icons/react";
+import { initReactI18next } from "react-i18next";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  createRosterFixtures,
+  rosterPokemonFields,
+  rosterPokemonMeta,
+  type RosterPokemon,
+} from "../tests/fixtures/pokemonRoster";
+import type { FrappeNavigation } from "./frappeNavigation";
+import { FrappeListView } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+import { favoritesStore } from "./list/favorites";
+
+const host = "https://listview-sidebar.spec.test";
+const realFetch = globalThis.fetch;
+const favoritesKey = "sidebar-spec-favorites";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.startsWith(host)) {
+      const body = /\/api\/resource\/DocType\//.test(url)
+        ? { data: rosterPokemonMeta }
+        : { data: [] };
+      return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    return realFetch(input as RequestInfo, init);
+  }) as typeof fetch;
+});
+
+afterAll(() => {
+  globalThis.fetch = realFetch;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  favoritesStore(favoritesKey).setState(() => ({ names: [] }));
+});
+
+function renderList(navigate = vi.fn()) {
+  const navigation: FrappeNavigation = {
+    usePathname: () => "/pokemon",
+    useNavigate: () => navigate,
+  };
+  return renderWithProviders(
+    <FrappeProvider baseURL={host} fixtures={createRosterFixtures()} navigation={navigation}>
+      <FrappeListView<RosterPokemon>
+        doctype="Pokemon"
+        route="/pokemon"
+        title="Pokemon"
+        subtitle={(count) => `${count} Pokémon`}
+        fields={rosterPokemonFields}
+        defaultViewMode="grid"
+        showToolbar={false}
+        surface={false}
+        filterPlacement="sidebar"
+        look={{
+          title: (doc) => doc.pokemon_name ?? "",
+          code: (doc) => `#${String(doc.poke_id ?? 0).padStart(3, "0")}`,
+          images: (doc) => [`https://art.spec.test/${doc.poke_id}.png`],
+        }}
+        favorites={favoritesKey}
+        sorts={[
+          { value: "pokedex", label: "Pokédex", orderBy: [{ field: "poke_id", order: Order.Asc }] },
+          {
+            value: "name",
+            label: "Name",
+            orderBy: [{ field: "pokemon_name", order: Order.Asc }],
+          },
+        ]}
+        facets={[
+          {
+            param: "type",
+            doctype: "Pokemon Poke Type",
+            field: "poke_type",
+            orderBy: "slot",
+            label: "Type",
+            options: ["grass", "poison", "fire", "water", "electric", "ghost", "normal"],
+            tint: (value) => (value === "grass" ? "grass" : "purple"),
+          },
+        ]}
+        bands={[
+          {
+            param: "gen",
+            field: "poke_id",
+            label: "Generation",
+            options: [
+              { value: "1", label: "Generation I", min: 1, max: 151 },
+              { value: "2", label: "Generation II", min: 152, max: 251 },
+            ],
+          },
+        ]}
+        ranges={[{ param: "xp", field: "base_experience", label: "Base XP" }]}
+        actions={[{ label: "Insights", icon: ChartBarIcon, href: "/pokemon/insights" }]}
+      />
+    </FrappeProvider>,
+  );
+}
+
+async function sidebar() {
+  return screen.findByTestId("list-page-sidebar", {}, { timeout: 5000 });
+}
+
+describe("FrappeListView sidebar filters", () => {
+  it("puts every filter in the page's one sidebar", async () => {
+    renderList();
+    const aside = await sidebar();
+    expect(screen.getAllByTestId("list-page-sidebar")).toHaveLength(1);
+    expect(within(aside).getByRole("radiogroup", { name: "Type" })).toBeTruthy();
+    expect(within(aside).getByRole("radiogroup", { name: "Generation" })).toBeTruthy();
+    expect(aside.querySelector("[data-range-slider]")).not.toBeNull();
+    expect(within(aside).getByTestId("pokemon-sidebar-favorites-filter")).toBeTruthy();
+  });
+
+  it("labels each type and generation with its record count", async () => {
+    renderList();
+    const aside = await sidebar();
+    await waitFor(() => {
+      const poison = within(aside).getByTestId("pokemon-sidebar-type-poison");
+      expect(poison.querySelector("[data-facet-count]")?.textContent).toBe("2");
+    });
+    await waitFor(() => {
+      const gen1 = within(aside).getByTestId("pokemon-sidebar-gen-1");
+      expect(gen1.querySelector("[data-facet-count]")?.textContent).toBe("6");
+      const gen2 = within(aside).getByTestId("pokemon-sidebar-gen-2");
+      expect(gen2.querySelector("[data-facet-count]")?.textContent).toBe("0");
+    });
+  });
+
+  it("keeps the header's title and count beside the sidebar, not in it", async () => {
+    renderList();
+    const aside = await sidebar();
+    const main = screen.getByTestId("list-page-main");
+    await waitFor(() => expect(main.textContent).toContain("6 Pokémon"));
+    expect(aside.textContent).not.toContain("6 Pokémon");
+  });
+
+  it("narrows to a generation band", async () => {
+    renderList();
+    const aside = await sidebar();
+    await screen.findByTestId("pokemon-card-bulbasaur", {}, { timeout: 5000 });
+    fireEvent.click(within(aside).getByTestId("pokemon-sidebar-gen-2"));
+    await waitFor(() => expect(screen.queryByTestId("pokemon-card-bulbasaur")).toBeNull());
+  });
+});
+
+describe("FrappeListView phone filters", () => {
+  it("offers a Filters button wearing the active-filter count", async () => {
+    renderList();
+    const aside = await sidebar();
+    await screen.findByTestId("pokemon-card-bulbasaur", {}, { timeout: 5000 });
+    const button = screen.getByTestId("pokemon-filters-button");
+    expect(button.getAttribute("aria-label")).toBe("Filters");
+    fireEvent.click(within(aside).getByTestId("pokemon-sidebar-type-fire"));
+    await waitFor(() =>
+      expect(screen.getByTestId("pokemon-filters-button").getAttribute("aria-label")).toBe(
+        "Filters (1)",
+      ),
+    );
+    fireEvent.click(within(aside).getByTestId("pokemon-sidebar-gen-1"));
+    await waitFor(() =>
+      expect(screen.getByTestId("pokemon-filters-button").getAttribute("aria-label")).toBe(
+        "Filters (2)",
+      ),
+    );
+  });
+
+  it("opens the same filters, sort included, in a bottom sheet", async () => {
+    renderList();
+    await sidebar();
+    expect(screen.queryByTestId("pokemon-filters-sheet")).toBeNull();
+    fireEvent.click(screen.getByTestId("pokemon-filters-button"));
+    const sheet = await screen.findByTestId("pokemon-filters-sheet");
+    expect(within(sheet).getByRole("radiogroup", { name: "Type" })).toBeTruthy();
+    expect(within(sheet).getByRole("radiogroup", { name: "Generation" })).toBeTruthy();
+    expect(sheet.querySelector("[data-range-slider]")).not.toBeNull();
+    expect(within(sheet).getByTestId("pokemon-sheet-favorites-filter")).toBeTruthy();
+    expect(within(sheet).getByRole("group", { name: "Sort by" })).toBeTruthy();
+  });
+
+  it("a pick in the sheet narrows the list and counts on the button", async () => {
+    renderList();
+    await screen.findByTestId("pokemon-card-pikachu", {}, { timeout: 5000 });
+    fireEvent.click(screen.getByTestId("pokemon-filters-button"));
+    const sheet = await screen.findByTestId("pokemon-filters-sheet");
+    fireEvent.click(within(sheet).getByTestId("pokemon-sheet-type-fire"));
+    await waitFor(() => expect(screen.queryByTestId("pokemon-card-pikachu")).toBeNull());
+    expect(screen.getByTestId("pokemon-card-charmander")).toBeTruthy();
+    expect(screen.getByTestId("pokemon-filters-button").getAttribute("aria-label")).toBe(
+      "Filters (1)",
+    );
+  });
+
+  it("holds the secondary actions in a ⋯ menu beside the Filters button", async () => {
+    renderList();
+    await sidebar();
+    const tools = screen.getByTestId("pokemon-phone-tools");
+    const more = within(tools).getByTestId("pokemon-more");
+    expect(more.getAttribute("aria-label")).toBe("More actions");
+    fireEvent.click(more);
+    const menu = await screen.findByRole("menu");
+    expect(within(menu).getByText("Insights")).toBeTruthy();
+    expect(within(menu).getByText("Cards")).toBeTruthy();
+    expect(within(menu).getByText("Table")).toBeTruthy();
+  });
+});

package/src/FrappeListView.spec.tsx

@@ -1,9 +1,11 @@
+import { getSize } from "@tamagui/get-token";
+import { getVariableValue, type SizeTokens } from "tamagui";
 // FrappeListView toolbar refresh — LC-54 PRESS-FLOOR-CHANNEL (amendment
 // 2026-08-13, "the grown box NEVER PAINTS"): the refresh affordance used to
 // be a raw tamagui Button riding a grown transparent press target (negative
 // outsets escaping the toolbar slot) whose default hover fill painted the
 // whole escaped 44px floor. The fix migrates it to the house forms Button
-// with `circular` — the painted box ITSELF is the 44×44 control, so feedback
+// with `circular` — the painted box itself follows the control token, so feedback
 // stays inside its own reserved layout slot (box-is-control mechanism).
 // Same atom-based assertions as FrappeDashboard.spec.tsx (jsdom can't apply
 // :hover; the positive control proving the detectors work lives there).
@@ -121,16 +123,17 @@ const refreshIn = async (container: HTMLElement) => {
 };
 
 describe("FrappeListView refresh press floor (LC-54 amendment)", () => {
-  it("the refresh floor is its own box — no grown-target negative outset", async () => {
+  it("desktop refresh keeps its token box and restores the press floor with slop", async () => {
     const { container } = renderListView();
     const refresh = await refreshIn(container);
     expect(refresh.getAttribute("role")).toBe("button");
-    // House circular Button: the 44px floor is REAL layout (box-is-control);
-    // the escape mechanism (negative margins pulling the grown box over the
-    // adjacent Add button) must be gone.
     expect(refresh.className).not.toMatch(negativeMarginAtom);
-    expect(refresh.className).toMatch(/_mih-44px/);
-    expect(refresh.className).toMatch(/_miw-44px/);
+    const token = refresh.getAttribute("data-size-token") as SizeTokens;
+    const px = Number(getVariableValue(getSize(token)));
+    expect(refresh.className).toContain(`_mih-${px}px`);
+    expect(refresh.className).toContain(`_miw-${px}px`);
+    const slop = Number(refresh.getAttribute("data-mp-press-slop") ?? 0);
+    expect(px + slop * 2).toBeGreaterThanOrEqual(44);
   });
 
   it("hover feedback rides the button's own in-slot box (house channel)", async () => {
@@ -169,7 +172,7 @@ describe("FrappeListView design-law (avatar + type)", () => {
       return node as HTMLElement;
     });
     expect(avatar.getAttribute("data-avatar-nested")).toBe("true");
-    expect(Number(avatar.getAttribute("data-avatar-px"))).toBe(32);
+    expect(Number(avatar.getAttribute("data-avatar-px"))).toBe(29);
     expect(Number(avatar.getAttribute("data-avatar-px"))).not.toBe(40);
   });