@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/frappe-ui",
-  "version": "7.34.3",
+  "version": "7.35.0",
   "description": "Pre-wired Tamagui components for Frappe doctypes with live data",
   "keywords": [
     "cross-platform",
@@ -72,18 +72,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/components": "^7.34.3",
-    "@multiplatform.one/desktop": "^7.34.3",
-    "@multiplatform.one/forms": "^7.34.3",
-    "@multiplatform.one/frappe": "^7.34.3",
-    "@multiplatform.one/i18n": "^7.34.3",
-    "@multiplatform.one/markdown": "^7.34.3",
-    "@multiplatform.one/platform": "^7.34.3",
-    "@multiplatform.one/rich-text": "^7.34.3",
-    "@multiplatform.one/router": "^7.34.3",
-    "@multiplatform.one/store": "^7.34.3",
-    "@multiplatform.one/table": "^7.34.3",
-    "@multiplatform.one/theme": "^7.34.3",
+    "@multiplatform.one/components": "^7.35.0",
+    "@multiplatform.one/desktop": "^7.35.0",
+    "@multiplatform.one/forms": "^7.35.0",
+    "@multiplatform.one/frappe": "^7.35.0",
+    "@multiplatform.one/i18n": "^7.35.0",
+    "@multiplatform.one/markdown": "^7.35.0",
+    "@multiplatform.one/platform": "^7.35.0",
+    "@multiplatform.one/rich-text": "^7.35.0",
+    "@multiplatform.one/router": "^7.35.0",
+    "@multiplatform.one/store": "^7.35.0",
+    "@multiplatform.one/table": "^7.35.0",
+    "@multiplatform.one/theme": "^7.35.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/colors": "2.7.6",
     "@tanstack/db": "0.8.0",
@@ -100,9 +100,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.34.3",
-    "@multiplatform.one/storybook": "7.34.3",
-    "@multiplatform.one/test-utils": "7.34.3",
+    "@multiplatform.one/config": "7.35.0",
+    "@multiplatform.one/storybook": "7.35.0",
+    "@multiplatform.one/test-utils": "7.35.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/FileBrowser/FileBrowser.stories.tsx

@@ -60,14 +60,14 @@ export const SplitGrid = () => (
 );
 
 export const DrillIn = () => (
-  <YStack width={390}>
+  <YStack width={390} maxWidth="100%">
     <FileBrowser files={files} layout="drill" currentFolder="Home" surfaceId="story-drill" />
   </YStack>
 );
 
 /** Drilled-into files list at 390 — DrillIn pins Home so a row press cannot navigate. */
 export const DrillInFiles = () => (
-  <YStack width={390}>
+  <YStack width={390} maxWidth="100%">
     <FileBrowser
       files={files}
       layout="drill"
@@ -79,7 +79,7 @@ export const DrillInFiles = () => (
 
 /** Drill layout grid of the drilled-into files list (board 05 / MPO-423). */
 export const DrillInGrid = () => (
-  <YStack width={390}>
+  <YStack width={390} maxWidth="100%">
     <FileBrowser
       files={files}
       layout="drill"

package/src/FileBrowser/index.tsx

@@ -195,9 +195,7 @@ function BulkBar({
       marginTop={placement === "top" ? "$3" : 0}
       marginBottom={placement === "bottom" ? "$3" : 0}
     >
-      <Text fontWeight="600" fontSize="$3">
-        {t("{{count}} selected", { count })}
-      </Text>
+      <Text fontSize="$3">{t("{{count}} selected", { count })}</Text>
       <Button size="$4" chromeless icon={DownloadSimpleIcon} onPress={onDownload}>
         {t("Download")}
       </Button>
@@ -679,7 +677,7 @@ export function FileBrowser({
           onRetry={onFilesRetry}
           emptyTitle={t("No files")}
           errorTitle={t("Couldn't load files")}
-          compact
+          size="$3"
           // LIST: the DataTable paints at height 100% of this chain, so the
           // boundary needs a DEFINITE height (flex basis 0). Without it the
           // stack sat at auto/0, the table clipped to its 2px border sum, and
@@ -717,7 +715,7 @@ export function FileBrowser({
         onRetry={onFoldersRetry}
         emptyTitle={t("No folders")}
         errorTitle={t("Couldn't load folders")}
-        compact
+        size="$3"
         flex={1}
         // The rail skeleton must live and die inside the rail (LC-20/LC-61);
         // unbounded it bled past the frame in the measured shot. The frame

package/src/FormSidebar.stories.tsx

@@ -259,7 +259,7 @@ export const DeskParity = () => {
       icon: <PaperclipIcon size={14} />,
       render: () => (
         <Attachments
-          compact
+          size="$3"
           items={attachments}
           onRemove={(a) => setAttachments((prev) => prev.filter((x) => x.id !== a.id))}
           onAdd={(file) =>

package/src/FormSidebar.tsx

@@ -133,7 +133,7 @@ export function FormSidebar({
   const [erroredUrl, setErroredUrl] = React.useState<string | undefined>();
   const imageBroken = Boolean(imageUrl) && erroredUrl === imageUrl;
 
-  // Scale typography, avatars, icons and the image block with the size knob
+  // Scale typography, avatars, icons and the image block with the size token
   const sz = knobProps.sizeToken;
   const avatarSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
   const imageSize = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;

package/src/FrappeAssignment.tsx

@@ -400,14 +400,14 @@ function FrappeAssignmentBody({
           value=""
           onChange={handleAssign}
           placeholder={t("Assign to user")}
-          compact
+          size="$3"
         />
       ) : null}
       {/* Honest first-load state: skeleton until the ToDo subscription is
           live; a failed subscription renders error chrome, never "no one
           assigned" (DG-ST-01 / LC-20). */}
       <AsyncBoundary
-        compact
+        size="$3"
         loading={!!collection && isLoading}
         error={loadError}
         onRetry={onRetry}

package/src/FrappeCalendar.radius.spec.tsx

@@ -2,9 +2,10 @@
  * @vitest-environment jsdom
  */
 
+import type { ReactElement } from "react";
 import { cleanup } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset, type Knobs } from "@multiplatform.one/theme";
+import { Preset, useReadableTextOn, type Knobs } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { FrappeCalendar } from "./FrappeCalendar";
 
@@ -19,6 +20,10 @@ vi.mock("@multiplatform.one/components", async (importOriginal) => ({
     return null;
   },
 }));
+vi.mock("@multiplatform.one/theme", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/theme")>();
+  return { ...actual, useChartPalette: () => ({ ...actual.useChartPalette(), single: "#ffffff" }) };
+});
 vi.mock("./FrappeProvider", () => ({ useFrappeConfig: () => ({ baseURL: "http://bench" }) }));
 vi.mock("./FrappeConnectionIndicator", () => ({ FrappeConnectionIndicator: () => null }));
 vi.mock("./useFrappeRows", () => ({
@@ -40,16 +45,36 @@ function frameRadius(overrides: Partial<Knobs>) {
 }
 
 describe("FrappeCalendar frame is CONTAINER-CAP (DG-RAD-04, MPO-56)", () => {
-  it("caps full at the panel padding", () => {
-    expect(frameRadius({ borderRadius: "full", space: "medium" })).toBe(18);
-  });
-
-  it("caps large at 13 under space small", () => {
-    expect(frameRadius({ borderRadius: "large", space: "small" })).toBe(13);
+  it("caps full at the 16px panelPadding role", () => {
+    expect(frameRadius({ borderRadius: "full" })).toBe(16);
   });
 
   it("keeps the token while it fits, and none is $0", () => {
-    expect(frameRadius({ borderRadius: "medium", space: "medium" })).toBe("$4");
+    expect(frameRadius({ borderRadius: "large" })).toBe(16);
+    expect(frameRadius({ borderRadius: "medium" })).toBe("$6");
     expect(frameRadius({ borderRadius: "none" })).toBe("$0");
   });
 });
+
+describe("FrappeCalendar default event ink", () => {
+  it("uses readable ink on the chart identity for an event without a colour", () => {
+    let expected: string | undefined;
+    function IdentityInk() {
+      expected = useReadableTextOn("#ffffff");
+      return null;
+    }
+    const renderEvent = (_doc: Partial<EventDoc>, content: unknown) => content as ReactElement;
+    renderWithProviders(
+      <>
+        <IdentityInk />
+        <FrappeCalendar<EventDoc> doctype="Event" dateField="starts_on" renderEvent={renderEvent} />
+      </>,
+    );
+    const render = calendarProps.at(-1)?.renderEvent as (
+      event: unknown,
+    ) => ReactElement<{ color: string }>;
+    const content = render({ id: "event", title: "Event", start: new Date(), _doc: {} });
+    expect(expected).toBeTruthy();
+    expect(content.props.color).toBe(expected);
+  });
+});

package/src/FrappeCalendar.tsx

@@ -215,7 +215,7 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
       .filter(Boolean) as CalendarEvent[];
   }, [docs, dateField, endDateField, titleField, colorField, chartPalette]);
 
-  const onAccent = useReadableTextOn("$accentBackground");
+  const onIdentity = useReadableTextOn(chartPalette.single);
   // Default chip content custom renderers can compose (SB-M-715). Text color
   // is luminance-computed against the event fill (Axiom 15) — hardcoded white
   // was invisible on light fills and failed AA on mid-tone doc colors.
@@ -223,13 +223,13 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
     (calEvent: CalendarEvent): ReactNode => (
       <Text
         numberOfLines={2}
-        color={eventChipTextColor(calEvent.color, onAccent)}
+        color={eventChipTextColor(calEvent.color, onIdentity)}
         {...knobProps.label}
       >
         {calEvent.title}
       </Text>
     ),
-    [knobProps.label, onAccent],
+    [knobProps.label, onIdentity],
   );
 
   // Bridge renderEvent from Frappe doc to generic CalendarEvent

package/src/FrappeChartCard.stories.tsx

@@ -104,13 +104,13 @@ Main.storyName = "Main";
 
 export const ChartModes = () => (
   <XStack gap="$3" flexWrap="wrap">
-    <YStack width={340}>
+    <YStack width={340} maxWidth="100%">
       <ChartCard config={{ id: "bar2", title: "Bar", type: "bar", data: monthly }} />
     </YStack>
-    <YStack width={340}>
+    <YStack width={340} maxWidth="100%">
       <ChartCard config={{ id: "line", title: "Line", type: "line", data: monthly }} />
     </YStack>
-    <YStack width={340}>
+    <YStack width={340} maxWidth="100%">
       <ChartCard
         config={{ id: "pie", title: "Pie", type: "pie", data: monthly, showLegend: true }}
       />
@@ -180,7 +180,7 @@ const liveTodoFixtures = [
 ];
 
 const todoByStatusChart = (
-  <YStack width={480} testID="live-todo-by-status">
+  <YStack width={480} maxWidth="100%" testID="live-todo-by-status">
     <FrappeChartCard
       config={{ id: "todo-by-status", title: "ToDos by Status", type: "bar", showLabels: true }}
       dataSource={{ doctype: "ToDo", groupBy: "status" }}

package/src/FrappeChartCard.tsx

@@ -170,7 +170,7 @@ export function FrappeChartCard({
   if (!connection) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         error
         errorTitle={t("{{title}} is not configured", { title: config.title })}
         errorDescription={t(
@@ -194,7 +194,7 @@ export function FrappeChartCard({
   if (error) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         error={error}
         errorTitle={
           isPermissionError
@@ -209,7 +209,7 @@ export function FrappeChartCard({
   if (liveConfig.data.length === 0) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         empty
         emptyTitle={t("No data yet")}
         emptyDescription={t("{{doctype}} has no rows matching this chart", {

package/src/FrappeConnectionIndicator.stories.tsx

@@ -23,7 +23,7 @@ const config: FrappeConnectionIndicatorProps["config"] = {
 };
 
 export const Default = () => (
-  <YStack gap="$3" width={360}>
+  <YStack gap="$3" width={360} maxWidth="100%">
     <Text fontSize="$2" color="$color10">
       Fixture / never-connected: the indicator paints nothing. That is the contract.
     </Text>
@@ -43,7 +43,7 @@ export const Reconnecting = () => (
 );
 
 export const Connected = () => (
-  <YStack gap="$3" width={360}>
+  <YStack gap="$3" width={360} maxWidth="100%">
     <Text fontSize="$2" color="$color10">
       Live socket up: nothing to show.
     </Text>

package/src/FrappeDashboard.spec.tsx

@@ -1,9 +1,11 @@
+import { getSize } from "@tamagui/get-token";
+import { getVariableValue, type SizeTokens } from "tamagui";
 // FrappeDashboard refresh trigger — 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 header slot) whose default hover fill painted the
 // whole escaped 44px floor. The fix migrates it to the house forms Button
-// with `circular`, whose painted box ITSELF is the 44×44 control — feedback
+// with `circular`, whose painted box follows its size token; feedback
 // stays inside its own reserved layout slot (box-is-control mechanism).
 //
 // jsdom never applies :hover, but tamagui compiles style props into
@@ -70,15 +72,16 @@ describe("FrappeDashboard refresh press floor (LC-54 amendment)", () => {
     expect(refresh.getAttribute("role")).toBe("button");
   });
 
-  it("the refresh floor is its own box — no grown-target negative outset", () => {
+  it("desktop refresh keeps its token box and restores the press floor with slop", () => {
     const { container } = renderStatic();
     const refresh = container.querySelector('[aria-label="Refresh"]') as HTMLElement;
-    // The house circular Button reserves the 44px floor as REAL layout
-    // (box-is-control); the escape mechanism (negative margins pulling the
-    // grown box over neighbors) 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)", () => {

package/src/FrappeForm.lifecycle.spec.tsx

@@ -391,7 +391,7 @@ describe("a submittable doctype's routed pages", () => {
     expect(screen.getByText("Save")).toBeTruthy();
     expect(screen.queryByText("Submit")).toBeNull();
 
-    fireEvent.click(screen.getByText("Cancel"));
+    fireEvent.click(screen.getAllByText("Cancel")[0]);
     expect(pushed).toEqual(["/loans/LOAN-DRAFT"]);
   });
 

package/src/FrappeForm.routedPage.spec.tsx

@@ -0,0 +1,121 @@
+// A routed FrappeForm is the record's own edit page: its sections are flat
+// (no card on phones, caps labels), its Save bar sticks to the bottom of the
+// page, its numbers hug their value with the label's unit after it, and its
+// image fields preview the stored file instead of printing its path.
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeForm } from "./FrappeForm";
+import type { FrappeNavigation } from "./frappeNavigation";
+import { FrappeProvider } from "./FrappeProvider";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(cleanup);
+
+const meta = {
+  name: "Pokemon",
+  doctype: "DocType",
+  module: "App",
+  title_field: "pokemon_name",
+  image_field: "sprite_front",
+  fields: [
+    { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", reqd: 1 },
+    { fieldname: "height", fieldtype: "Int", label: "Height (dm)" },
+    { fieldname: "weight", fieldtype: "Int", label: "Weight (hg)" },
+    { fieldname: "column_break_1", fieldtype: "Column Break" },
+    { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (Front)" },
+  ],
+  permissions: [{ role: "Pokemon Editor", read: 1, write: 1, create: 1 }],
+};
+
+function fixtures() {
+  return new InMemoryFixtureProvider({
+    DocType: [meta],
+    Pokemon: [
+      {
+        name: "pikachu",
+        doctype: "Pokemon",
+        pokemon_name: "Pikachu",
+        height: 4,
+        weight: 60,
+        sprite_front: "https://img.spec.test/files/pikachu.png",
+      },
+    ],
+  });
+}
+
+function renderEditPage(props: { layout?: "cards" | "flat"; stickyActions?: boolean } = {}) {
+  const navigation: FrappeNavigation = {
+    usePathname: () => "/pokemon/pikachu/edit",
+    useNavigate: () => () => {},
+  };
+  return renderWithProviders(
+    <FrappeProvider baseURL="http://test" fixtures={fixtures()} navigation={navigation}>
+      <FrappeForm
+        doctype="Pokemon"
+        route="/pokemon"
+        roles={["Pokemon Editor"]}
+        showSidebar={false}
+        showTimeline={false}
+        {...props}
+      />
+    </FrappeProvider>,
+  );
+}
+
+async function heightInput(): Promise<HTMLInputElement> {
+  return (await screen.findByLabelText("Height", {}, { timeout: 5000 })) as HTMLInputElement;
+}
+
+describe("FrappeForm as a routed edit page", () => {
+  it("lays its sections out flat", async () => {
+    renderEditPage();
+    await heightInput();
+    expect(document.querySelector("[data-mpo-schema-form-flat]")).not.toBeNull();
+    expect(document.querySelector("[data-mpo-schema-form-col-hug]")).not.toBeNull();
+  });
+
+  it("sticks the Save bar to the bottom of the page", async () => {
+    renderEditPage();
+    await heightInput();
+    const bar = await screen.findByTestId("frappe-form-actions-sticky");
+    expect(bar.style.position).toBe("sticky");
+    expect(bar.contains(screen.getByTestId("frappe-form-actions"))).toBe(true);
+  });
+
+  it("hugs each number to its value, the label's unit after it", async () => {
+    renderEditPage();
+    const height = await heightInput();
+    expect(height.style.width).toMatch(/^\d+ch$/);
+    expect(height.closest("[data-stepper-control]")?.textContent).toContain("dm");
+    const weight = screen.getByLabelText("Weight") as HTMLInputElement;
+    expect(weight.closest("[data-stepper-control]")?.textContent).toContain("hg");
+  });
+
+  it("previews the stored sprite instead of printing its path", async () => {
+    renderEditPage();
+    await heightInput();
+    await waitFor(() => {
+      const img = document.querySelector('[data-file-upload="existing"] img');
+      expect(img?.getAttribute("src")).toBe("https://img.spec.test/files/pikachu.png");
+    });
+    expect(document.body.textContent).not.toContain("https://img.spec.test/files/pikachu.png");
+  });
+
+  it("an explicit cards layout keeps the card form and the bar in place", async () => {
+    renderEditPage({ layout: "cards", stickyActions: false });
+    expect(await screen.findByLabelText("Height (dm)", {}, { timeout: 5000 })).toBeTruthy();
+    expect(document.querySelector("[data-mpo-schema-form-flat]")).toBeNull();
+    expect(screen.queryByTestId("frappe-form-actions-sticky")).toBeNull();
+  });
+});

package/src/FrappeForm.stories.tsx

@@ -166,7 +166,7 @@ export const CreateForm = () => (
   >
     <FrappeForm<Contact> doctype="Contact" onSave={action("onSave")} onCancel={action("onCancel")}>
       {({ doc, setValue, errors }) => (
-        <YStack gap="$3" width={400}>
+        <YStack gap="$3" width={400} maxWidth="100%">
           <Data
             label="First Name"
             value={doc.first_name || ""}
@@ -221,7 +221,7 @@ export const EditForm = () => (
       onCancel={action("onCancel")}
     >
       {({ doc, setValue, errors }) => (
-        <YStack gap="$3" width={400}>
+        <YStack gap="$3" width={400} maxWidth="100%">
           <Data
             label="First Name"
             value={doc.first_name || ""}
@@ -388,7 +388,7 @@ export const ComplexForm = () => (
       onCancel={action("onCancel")}
     >
       {({ doc, setValue, errors }) => (
-        <YStack gap="$3" width={500}>
+        <YStack gap="$3" width={500} maxWidth="100%">
           <Data
             label="Customer"
             value={doc.customer || ""}
@@ -490,7 +490,7 @@ export const Live = (args: { name?: string }) => (
           onCancel={action("onCancel")}
         >
           {({ doc, setValue, errors, disabled }) => (
-            <YStack gap="$3" width={420}>
+            <YStack gap="$3" width={420} maxWidth="100%">
               <Data
                 label="Description"
                 value={doc.description || ""}