@multiplatform.one/frappe-ui 7.66.0 → 7.68.0

package/src/FrappeLikedBy.tsx

@@ -281,10 +281,10 @@ function FrappeLikedByBody({
         <XStack alignItems="center" gap="$2">
           <Button
             size="$2"
-            circular
             chromeless
             disabled={!canToggle}
             aria-pressed={liked}
+            selected={false}
             aria-label={liked ? t("Unlike") : t("Like")}
             onPress={handleToggle}
             icon={

package/src/FrappeListView.controls.spec.tsx

@@ -165,7 +165,8 @@ describe("FrappeListView controls write their state back", () => {
     renderList({}, {}, navigationAt({}, setParams));
     await waitFor(() => expect(shownCards().length).toBe(6), { timeout: 5000 });
     const chip = await screen.findByTestId("pokemon-type-fire");
-    expect(getComputedStyle(chip).height).toBe("32px");
+    expect(chip.hasAttribute("data-chip")).toBe(true);
+    expect(chip.getAttribute("role")).toBe("radio");
     fireEvent.click(chip);
     await expectCards(["charmander"]);
     expect(setParams).toHaveBeenCalledWith({ type: "fire" });
@@ -228,7 +229,7 @@ describe("FrappeListView routed page with its toolbar off", () => {
     fireEvent.click(screen.getByTestId("insights"));
     expect(navigate).toHaveBeenCalledWith("/pokemon/insights");
     expect(screen.getByText("Skip to results")).toBeTruthy();
-    fireEvent.click(await screen.findByText("Add Pokemon"));
+    fireEvent.click(await screen.findByRole("button", { name: "Add Pokemon" }));
     expect(navigate).toHaveBeenCalledWith("/pokemon/new");
   });
 });

package/src/FrappeListView.spec.tsx

@@ -130,10 +130,14 @@ describe("FrappeListView refresh press floor (LC-54 amendment)", () => {
     expect(refresh.className).not.toMatch(negativeMarginAtom);
     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`);
+    // LC-176: the bare glyph sits in a square box at its control height, inside
+    // the token box, and slop restores the 44pt press floor.
+    const box = Number(/(?:^| )_mih-(\d+)px/.exec(refresh.className)?.[1]);
+    expect(refresh.className).toContain(`_miw-${box}px`);
+    expect(box).toBeGreaterThan(0);
+    expect(box).toBeLessThanOrEqual(px);
     const slop = Number(refresh.getAttribute("data-mp-press-slop") ?? 0);
-    expect(px + slop * 2).toBeGreaterThanOrEqual(44);
+    expect(box + slop * 2).toBeGreaterThanOrEqual(44);
   });
 
   it("hover feedback rides the button's own in-slot box (house channel)", async () => {

package/src/FrappeListView.tsx

@@ -22,6 +22,7 @@ import {
   EmptyState,
   ListPageLayout,
   ListRow,
+  PageBarButton,
   PageHeader,
   SkipLink,
   Tooltip,
@@ -922,7 +923,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
     : [];
   const headerActions =
     headerOwnsViews || (headerOwnsTools && onAdd) || headerAccessory || actions?.length ? (
-      <XStack {...knobProps.gap} alignItems="center" flexWrap="wrap" flexShrink={1} minWidth={0}>
+      <XStack alignItems="center">
         {headerOwnsViews ? (
           <Tooltip content={t("Switch views")}>
             <XStack {...secondaryHidden}>
@@ -938,69 +939,35 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
         {actions?.map((action) => {
           const Icon = action.icon;
           const onPress = pressFor(action);
-          if (sidebarFilters) {
-            return (
-              <XStack key={action.label} {...secondaryHidden}>
-                <Tooltip content={action.hint ?? action.label}>
-                  <Button
-                    outlined
+          return (
+            <XStack key={action.label} {...secondaryHidden}>
+              <Tooltip content={action.hint ?? action.label}>
+                {Icon ? (
+                  <PageBarButton
+                    icon={Icon as never}
+                    aria-label={action.label}
                     onPress={onPress}
-                    icon={Icon ? <Icon size={16} /> : undefined}
                     testID={action.testID}
-                  >
+                  />
+                ) : (
+                  <Button chromeless accentInk onPress={onPress} testID={action.testID}>
                     {action.label}
                   </Button>
-                </Tooltip>
-              </XStack>
-            );
-          }
-          return (
-            <React.Fragment key={action.label}>
-              <Tooltip content={action.hint ?? action.label}>
-                {/* responsive-parity: the circular icon twin below carries this action on phones */}
-                <Button
-                  outlined
-                  onPress={onPress}
-                  icon={Icon ? <Icon size={16} /> : undefined}
-                  $max-sm={{ display: "none" }}
-                  testID={action.testID}
-                >
-                  {action.label}
-                </Button>
+                )}
               </Tooltip>
-              <Button
-                outlined
-                circular
-                onPress={onPress}
-                icon={Icon ? <Icon size={16} /> : undefined}
-                display="none"
-                aria-label={action.label}
-                $max-sm={{ display: "flex" }}
-              />
-            </React.Fragment>
+            </XStack>
           );
         })}
         {headerOwnsTools && onAdd ? (
-          <>
-            {/* responsive-parity: the short "Add" twin below carries this action on phones */}
-            <Button
-              theme="accent"
-              onPress={onAdd}
-              icon={<PlusIcon size={16} />}
-              $max-sm={{ display: "none" }}
-            >
-              {t("Add {{doctype}}", { doctype })}
-            </Button>
-            <Button
-              theme="accent"
+          <Tooltip content={t("Add {{doctype}}", { doctype })}>
+            <PageBarButton
+              icon={PlusIcon}
+              aria-label={t("Add {{doctype}}", { doctype })}
               onPress={onAdd}
-              icon={<PlusIcon size={16} />}
-              display="none"
-              $max-sm={{ display: "flex" }}
-            >
-              {t("Add")}
-            </Button>
-          </>
+              edge="end"
+              testID={`${slug}-add`}
+            />
+          </Tooltip>
         ) : null}
       </XStack>
     ) : undefined;
@@ -1013,6 +980,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
         rows={shuffleRows}
         itemLabel={shuffle.label}
         renderPick={(doc) => drawCard(doc, 0)}
+        grid={gridProps}
         onGo={(doc) => {
           setShuffleOpen(false);
           onItemClick?.(doc);
@@ -1234,7 +1202,6 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
               feedback stays inside its own layout slot. */}
           <Button
             size="$2"
-            circular
             chromeless
             icon={ArrowsClockwiseIcon}
             onPress={handleRefresh}

package/src/FrappeRecordView.tsx

@@ -1,6 +1,7 @@
 import { EmptyState, Screen } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import type { Order } from "@multiplatform.one/frappe";
+import { DETAIL_READABLE_WIDTH } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { FrappeConnection } from "./frappeConnections";
@@ -141,12 +142,18 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
       showSidebar={false}
       showTimeline={false}
       loadingFallback={
-        <Screen noPadding gap={0} topBar={backButton}>
+        <Screen noPadding gap={0} maxWidth={DETAIL_READABLE_WIDTH} topBar={backButton}>
           <RecordSkeleton testID={`${slug}-detail-skeleton`} />
         </Screen>
       }
       notFoundFallback={
-        <Screen scroll={false} noPadding gap={0} topBar={backButton}>
+        <Screen
+          scroll={false}
+          noPadding
+          gap={0}
+          maxWidth={DETAIL_READABLE_WIDTH}
+          topBar={backButton}
+        >
           <EmptyState
             title={t("{{doctype}} not found", { doctype })}
             description={t("No {{doctype}} is named {{name}}.", { doctype, name })}
@@ -159,7 +166,13 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
         </Screen>
       }
       errorFallback={
-        <Screen scroll={false} noPadding gap={0} topBar={backButton}>
+        <Screen
+          scroll={false}
+          noPadding
+          gap={0}
+          maxWidth={DETAIL_READABLE_WIDTH}
+          topBar={backButton}
+        >
           <EmptyState
             intent="error"
             title={t("Couldn't load this {{doctype}}", { doctype })}

package/src/FrappeReportBuilder.tsx

@@ -870,25 +870,27 @@ function FrappeReportBuilderBody({
 
   const content = (
     <YStack flex={1} minWidth={0} minHeight={0} {...stackProps}>
-      <ReportViewToolbar
-        columns={allColumns}
-        selected={selectedFieldnames}
-        onToggleColumn={handleToggleColumn}
-        onResetColumns={handleResetColumns}
-        groupBy={groupBy}
-        onGroupByChange={setGroupBy}
-        baseFilters={baseFilters}
-        onClearBaseFilters={baseFilters.length > 0 ? handleClearBaseFilters : undefined}
-        columnFilterCount={columnTuples.length}
-        onClearColumnFilters={handleClearColumnFilters}
-        savedReports={savedReports.reports}
-        currentReport={currentReport}
-        onSelectReport={handleSelectReport}
-        onSaveReport={readsWithoutMeta ? undefined : handleSaveReport}
-        onDeleteReport={readsWithoutMeta ? undefined : handleDeleteReport}
-        onExport={exportEnabled ? handleExport : undefined}
-        exportDisabled={total === 0}
-      />
+      <YStack paddingHorizontal="$3">
+        <ReportViewToolbar
+          columns={allColumns}
+          selected={selectedFieldnames}
+          onToggleColumn={handleToggleColumn}
+          onResetColumns={handleResetColumns}
+          groupBy={groupBy}
+          onGroupByChange={setGroupBy}
+          baseFilters={baseFilters}
+          onClearBaseFilters={baseFilters.length > 0 ? handleClearBaseFilters : undefined}
+          columnFilterCount={columnTuples.length}
+          onClearColumnFilters={handleClearColumnFilters}
+          savedReports={savedReports.reports}
+          currentReport={currentReport}
+          onSelectReport={handleSelectReport}
+          onSaveReport={readsWithoutMeta ? undefined : handleSaveReport}
+          onDeleteReport={readsWithoutMeta ? undefined : handleDeleteReport}
+          onExport={exportEnabled ? handleExport : undefined}
+          exportDisabled={total === 0}
+        />
+      </YStack>
       <ScrollView
         flex={1}
         minWidth={0}

package/src/FrappeReportView.tsx

@@ -40,7 +40,7 @@
  * hidden where the web download pipeline does not exist.
  */
 import { AsyncBoundary, EmptyState } from "@multiplatform.one/components";
-import { Button, DatePicker, Spinner, formCommonColors } from "@multiplatform.one/forms";
+import { DatePicker, IconButton, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import {
   DataTable,
   DataTableExport,
@@ -477,14 +477,11 @@ export function FrappeReportView({
             </XStack>
           )}
           {refreshShown && (
-            <Button
-              size="$2"
+            <IconButton
               icon={ArrowClockwiseIcon}
               onPress={refresh}
               aria-label={t("Refresh report")}
-            >
-              {t("Refresh")}
-            </Button>
+            />
           )}
           {exportEnabled && rows.length > 0 && (
             <DataTableExport

package/src/SyncErrorNotice.spec.tsx

@@ -1,5 +1,5 @@
 // SyncErrorNotice contract: the visible half of the rejected-write pattern —
-// role="alert" message, Retry re-issues, Dismiss clears, and each affordance
+// role="alert" message, Retry re-issues, the close button clears, and each affordance
 // only renders when its handler is provided.
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup, fireEvent, screen } from "@testing-library/react";
@@ -33,7 +33,9 @@ describe("SyncErrorNotice", () => {
     );
     fireEvent.click(await screen.findByText("Retry"));
     expect(onRetry).toHaveBeenCalledTimes(1);
-    fireEvent.click(await screen.findByText("Dismiss"));
+    const close = await screen.findByRole("button", { name: "Dismiss" });
+    expect(close.textContent?.trim()).toBe("");
+    fireEvent.click(close);
     expect(onDismiss).toHaveBeenCalledTimes(1);
   });
 
@@ -41,20 +43,13 @@ describe("SyncErrorNotice", () => {
     renderWithProviders(<SyncErrorNotice message="No actions" />);
     await screen.findByRole("alert");
     expect(screen.queryByText("Retry")).toBeNull();
-    expect(screen.queryByText("Dismiss")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Dismiss" })).toBeNull();
   });
 
-  it("honors custom labels", async () => {
+  it("honors a custom Retry label", async () => {
     renderWithProviders(
-      <SyncErrorNotice
-        message="Custom"
-        onRetry={() => {}}
-        onDismiss={() => {}}
-        retryLabel="Try again"
-        dismissLabel="Ignore"
-      />,
+      <SyncErrorNotice message="Custom" onRetry={() => {}} retryLabel="Try again" />,
     );
     expect(await screen.findByText("Try again")).toBeTruthy();
-    expect(await screen.findByText("Ignore")).toBeTruthy();
   });
 });

package/src/SyncErrorNotice.stories.tsx

@@ -10,14 +10,13 @@ export default {
     docs: {
       description: {
         component:
-          "Rejected-write notice: role=alert message with Retry (same mutation id) and Dismiss. Each affordance only renders when its handler is provided.",
+          "Rejected-write notice: role=alert message with Retry (same mutation id) and a close button. Each affordance only renders when its handler is provided.",
       },
     },
   },
   argTypes: {
     message: { control: "text" },
     retryLabel: { control: "text" },
-    dismissLabel: { control: "text" },
   },
 };
 
@@ -40,11 +39,10 @@ export const AllStates = () => (
     <SyncErrorNotice message="Write rejected — retry only" onRetry={action("onRetry")} />
     <SyncErrorNotice message="No actions" />
     <SyncErrorNotice
-      message="Custom labels"
+      message="Custom Retry label"
       onRetry={action("onRetry")}
       onDismiss={action("onDismiss")}
       retryLabel="Try again"
-      dismissLabel="Ignore"
     />
   </YStack>
 );

package/src/SyncErrorNotice.tsx

@@ -1,8 +1,6 @@
-import { Button, Text } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Alert } from "@multiplatform.one/components";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { XStack } from "tamagui";
 
 export interface SyncErrorNoticeProps {
   /** Human-readable failure message (already localized by the caller). */
@@ -12,20 +10,18 @@ export interface SyncErrorNoticeProps {
    * Omit to hide the Retry affordance.
    */
   onRetry?: () => void;
-  /** Drops the failed entry without retrying. Omit to hide Dismiss. */
+  /** Drops the failed entry without retrying: the alert's close button. Omit to hide it. */
   onDismiss?: () => void;
   /** Override the Retry button label (defaults to a localized "Retry"). */
   retryLabel?: string;
-  /** Override the Dismiss button label (defaults to a localized "Dismiss"). */
-  dismissLabel?: string;
 }
 
 /**
  * The rejected-write notice — the visible half of the optimistic mutation
- * contract: when the server rejects a write, the optimistic state has
+ * contract, on the MPO error `Alert` (LC-175): when the server rejects a write, the optimistic state has
  * already been rolled back by the sync engine; this primitive surfaces the
  * error inline at the surface that initiated the write, with Retry
- * (re-issues the SAME mutation id) and Dismiss (clears the ledger entry).
+ * (re-issues the SAME mutation id) and a close button (clears the ledger entry).
  *
  * Pair with `useFrappePendingMutations` from `@multiplatform.one/frappe`:
  *
@@ -41,41 +37,17 @@ export interface SyncErrorNoticeProps {
  * ))}
  * ```
  */
-export function SyncErrorNotice({
-  message,
-  onRetry,
-  onDismiss,
-  retryLabel,
-  dismissLabel,
-}: SyncErrorNoticeProps) {
+export function SyncErrorNotice({ message, onRetry, onDismiss, retryLabel }: SyncErrorNoticeProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
   return (
-    <XStack
-      role="alert"
-      alignItems="center"
-      flexWrap="wrap"
-      gap="$2"
-      paddingHorizontal="$3"
-      paddingVertical="$2"
-      {...knobProps.borderRadius}
-      backgroundColor="$red3"
-      borderColor="$red7"
-      borderWidth={1}
+    <Alert
+      intent="error"
+      actionLabel={onRetry ? (retryLabel ?? t("Retry")) : undefined}
+      onAction={onRetry}
+      dismissible={Boolean(onDismiss)}
+      onDismiss={onDismiss}
     >
-      <Text flex={1} fontSize="$2" color="$red11">
-        {message}
-      </Text>
-      {onRetry && (
-        <Button size="$2" theme="error" {...knobProps.borderRadius} onPress={onRetry}>
-          {retryLabel ?? t("Retry")}
-        </Button>
-      )}
-      {onDismiss && (
-        <Button size="$2" chromeless {...knobProps.borderRadius} onPress={onDismiss}>
-          {dismissLabel ?? t("Dismiss")}
-        </Button>
-      )}
-    </XStack>
+      {message}
+    </Alert>
   );
 }

package/src/desk/DeskFormSidebar.tsx

@@ -20,7 +20,6 @@ import { useDocTypeMeta, useFrappeCollection, useLiveQuery } from "@multiplatfor
 import { eq } from "@tanstack/db";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { isWeb } from "tamagui";
 import {
   buildSidebarSections,
   mapDocToSidebarMetadata,
@@ -142,7 +141,7 @@ export function DeskFormSidebar({ doctype, name }: DeskFormSidebarProps) {
       // inline rail width, and drop the end rail — the pane gap separates the
       // sidebar from the form (stacked below on compact, the rail would float).
       width="100%"
-      {...(isWeb ? { borderInlineEndWidth: 0 } : { borderEndWidth: 0 })}
+      divider={false}
       data-testid="desk-form-sidebar"
     />
   );

package/src/desk/DeskShell.tsx

@@ -90,6 +90,7 @@ function useIsNarrowDesk(): boolean {
 // Component
 // ---------------------------------------------------------------------------
 
+// mpo-role-escape: MPO has no app shell (top bar, nav rail, compact drawer) yet; FZ-7996 builds it and moves DeskShell onto it.
 export function DeskShell({
   children,
   breadcrumbs,
@@ -156,7 +157,6 @@ export function DeskShell({
   const toggleButton = showMobileToggle ? (
     <Button
       chromeless
-      circular
       icon={mobileSidebarOpen ? XIcon : ListIcon}
       aria-label={t("Toggle sidebar")}
       aria-expanded={mobileSidebarOpen}

package/src/desk/deskDocumentRoutes.spec.tsx

@@ -21,9 +21,12 @@ vi.mock("../FrappeListView", () => ({
 }));
 vi.mock("../FrappeForm", () => ({
   FrappeForm: ({ onSave, name }: { onSave: (doc: { name: string }) => void; name?: string }) => (
-    <button onClick={() => onSave({ name: state.name })} data-testid="form" data-name={name}>
-      Save
-    </button>
+    <button
+      aria-label="Save"
+      onClick={() => onSave({ name: state.name })}
+      data-testid="form"
+      data-name={name}
+    />
   ),
 }));
 vi.mock("@multiplatform.one/components", () => ({
@@ -59,7 +62,7 @@ describe.each(["A/B", "A?B", "A#B", "A B", "Pokémon", "A%2FB"])("desk document
     state.name = name;
     const navigate = vi.fn();
     render(<DeskFormPage doctype="todo" onNavigate={navigate} />);
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     expect(navigate).toHaveBeenCalledWith(path);
   });
 });

package/src/fields/Date/catalog.tsx

@@ -1,6 +1,7 @@
 /**
- * Web `Date` field for the three Frappe date fieldtypes, and the native one
- * when the optional `@react-native-community/datetimepicker` peer is absent.
+ * The `Date` field for the three Frappe date fieldtypes, on web and native.
+ * On iOS and Android the forms pickers open the OS sheet themselves
+ * (`OsDateTimeSheet`), so this field has no native fork (FZ-8000).
  *
  * The field used to render ONE date-only calendar for all three types, with
  * only the placeholder varying — so a `Datetime` silently dropped its time
@@ -14,8 +15,8 @@
  *               registry routes the Frappe `Time` fieldtype to, so a
  *               `Date type="time"` and a `Time` field are one control
  *
- * This mirrors what the native half already does (calendar / wheel /
- * calendar-then-wheel), and every branch serializes through the one shared
+ * On native the same three pickers present the OS calendar, wheel, and
+ * calendar-then-wheel, and every branch serializes through the one shared
  * `wire.ts` body, so a web pick and a native pick of the same moment persist
  * byte-identical strings.
  */
@@ -50,8 +51,7 @@ function toPickerDate(value: string | undefined): Date | null {
 /**
  * `TimePicker` speaks `HH:mm`; Frappe stores `HH:mm:ss`. Round-tripping
  * through the shared wire body — rather than padding the string here — is
- * what keeps the two platform halves byte-identical, since the native half
- * serializes its wheel pick through exactly this call.
+ * what keeps a picked time in Frappe's wire shape on every platform.
  */
 function toTimeWireValue(picked: string): string {
   if (!picked) return "";
@@ -130,7 +130,6 @@ export function Date<
         // No `previousValue`: this picker owns both halves of the value and
         // preserves an existing time across a day change itself, so carrying
         // the old time part here would overwrite a time the user just set.
-        // The native half passes nothing for the same reason.
         onChange={(date) => emit?.(date ? toFrappeDateValue(date, "datetime") : "")}
         defaultValue={defaultValue as string}
         label={fieldProps.label}

package/src/fields/Date/nativeIsCatalog.spec.tsx

@@ -0,0 +1,26 @@
+/**
+ * The Frappe `Date` field has no native fork (FZ-8000, LC-175): iOS and
+ * Android resolve the same catalog field the web does, and forms'
+ * `DatePicker`, `DatetimePicker` and `TimePicker` open the OS sheet
+ * themselves (`OsDateTimeSheet`, with the catalog overlay when the optional
+ * `@react-native-community/datetimepicker` peer is absent, FZ-7357).
+ */
+
+import { existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+import * as catalog from "./catalog";
+import * as entry from "./index";
+
+const here = (file: string) => fileURLToPath(new URL(file, import.meta.url));
+
+describe("native Date field", () => {
+  it("is not forked: no index.native.tsx sits beside the catalog field", () => {
+    expect(existsSync(here("./index.tsx"))).toBe(true);
+    expect(existsSync(here("./index.native.tsx"))).toBe(false);
+  });
+
+  it("is the catalog field on every platform", () => {
+    expect(entry.Date).toBe(catalog.Date);
+  });
+});