@multiplatform.one/frappe-ui 6.6.0 → 7.0.0

package/src/FrappeTable.tsx

@@ -1,6 +1,7 @@
 import {
   FrappeApp,
   Order,
+  matchesFilters,
   useDocTypeMeta,
   useFrappeCollection,
   useFrappeDoctypeEvents,
@@ -19,7 +20,7 @@ import { AsyncBoundary } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Text, View, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { FilterManager, SavedFilterDropdown, useSavedFilters } from "@multiplatform.one/table";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
@@ -56,7 +57,14 @@ export interface FrappeTableProps<TDoc extends { name: string; doctype: string }
   fields?: readonly (keyof TDoc & string)[];
   /** Initial filter criteria */
   filters?: Partial<TDoc> | Array<[keyof TDoc & string, string, any]>;
-  /** Callback when a row is clicked */
+  /**
+   * Callback when a row is activated. Rides DataTable's first-class
+   * `onRowPress` contract: the whole row is ONE pressable unit (no
+   * per-cell pressable wrappers), the row set exposes a single roving tab
+   * stop (LC-49), Enter AND Space activate the focused row (LC-50), and
+   * presses on inner interactive controls (selection checkboxes, buttons,
+   * links) never fire the row press.
+   */
   onRowClick?: (row: Partial<TDoc>) => void;
   /** Custom loading indicator */
   loading?: React.ReactNode;
@@ -79,6 +87,18 @@ export interface FrappeTableProps<TDoc extends { name: string; doctype: string }
    * Used for server-side fetches when serverSide is true.
    */
   onStateChange?: (state: DataTableState) => void;
+  /**
+   * In-place refresh channel: bump the value to re-run the current query
+   * (serverSide mode) without remounting — rows stay rendered and swap when
+   * the response lands (keep-rows-and-reconcile; never key the table on a
+   * refresh generation).
+   */
+  refreshToken?: unknown;
+  /**
+   * Density. DataTableRoot accepts this; it is not on DataTableProps, so
+   * FrappeTable has to name it or callers (backoffice list) fail the build.
+   */
+  compact?: boolean;
 }
 
 /**
@@ -182,6 +202,26 @@ function isOperatorFilterValue(value: unknown): value is FilterValue {
   );
 }
 
+/** Sort the current page locally so a sort change is visible before reconcile. */
+function sortRowsLocally<T extends Record<string, unknown>>(
+  rows: T[],
+  orderBy: Array<{ field: string; order: Order }> | undefined,
+): T[] {
+  if (!orderBy?.length) return rows;
+  return [...rows].sort((a, b) => {
+    for (const { field, order } of orderBy) {
+      const av = a[field];
+      const bv = b[field];
+      if (av == null && bv == null) continue;
+      if (av == null) return order === Order.Asc ? -1 : 1;
+      if (bv == null) return order === Order.Asc ? 1 : -1;
+      if (av < bv) return order === Order.Asc ? -1 : 1;
+      if (av > bv) return order === Order.Asc ? 1 : -1;
+    }
+    return 0;
+  });
+}
+
 /** Convert DataTableState to Frappe API params */
 function stateToFrappeParams(state: DataTableState) {
   const { pagination, sorting, filters, columnFilters, globalFilter } = state;
@@ -233,9 +273,11 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   userId,
   serverSide = false,
   onStateChange: onStateChangeProp,
+  refreshToken,
   paginationMode = "pages",
   loadPage: loadPageProp,
   filterableFields: filterableFieldsProp,
+  layout,
   ...dataTableProps
 }: FrappeTableProps<TDoc>) {
   // Infinite + serverSide: DataTable's page cache drives fetching through a
@@ -250,6 +292,20 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   >(initialFilters);
   const config = useFrappeConfig();
 
+  // Adopt `filters` prop CONTENT changes in place (client/live-collection
+  // mode) — the keep-rows counterpart of DataTable's controlledState: outer
+  // filter surfaces update the query without remounting the table. Content-
+  // keyed so unstable array identities from hosts are safe; saved-filter
+  // selections (setActiveFilters below) are not overridden by echoes.
+  const filtersPropKey = initialFilters !== undefined ? JSON.stringify(initialFilters) : undefined;
+  const adoptedFiltersPropRef = useRef(filtersPropKey);
+  useEffect(() => {
+    if (filtersPropKey === undefined) return;
+    if (adoptedFiltersPropRef.current === filtersPropKey) return;
+    adoptedFiltersPropRef.current = filtersPropKey;
+    setActiveFilters(JSON.parse(filtersPropKey));
+  }, [filtersPropKey]);
+
   const finalBaseURL = baseURL ?? config?.baseURL;
   const finalAuth = auth ?? config?.auth;
   const finalSyncOptions = syncOptions ?? config?.syncOptions;
@@ -264,11 +320,21 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
     () => ({
       baseURL: finalBaseURL,
       socketPort: config?.socketPort,
+      siteName: config?.siteName,
+      socketBaseURL: config?.socketBaseURL,
       auth: finalAuth,
       syncOptions: finalSyncOptions,
       fixtures: config?.fixtures,
     }),
-    [finalBaseURL, config?.socketPort, finalAuth, finalSyncOptions, config?.fixtures],
+    [
+      finalBaseURL,
+      config?.socketPort,
+      config?.siteName,
+      config?.socketBaseURL,
+      finalAuth,
+      finalSyncOptions,
+      config?.fixtures,
+    ],
   );
 
   const frappeApp = useMemo(() => {
@@ -287,12 +353,28 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   );
   const filterableFields = filterableFieldsProp ?? metaFilterFields;
 
+  // Accessible row identity (DG-A11Y-06) for DataTable's row-press label
+  // and selection-checkbox names: the doctype's title-field value when
+  // meta is loaded, else the document name. An empty result defers to
+  // DataTable's own fallbacks (first visible cell → positional "Row N").
+  const titleField = meta?.title_field;
+  const rowLabel = useCallback(
+    (row: Partial<TDoc>): string => {
+      const fromTitle = titleField ? (row as Record<string, unknown>)[titleField] : undefined;
+      if (typeof fromTitle === "string" && fromTitle) return fromTitle;
+      if (typeof fromTitle === "number") return String(fromTitle);
+      return typeof row.name === "string" ? row.name : "";
+    },
+    [titleField],
+  );
+
   const [serverData, setServerData] = useState<TDoc[]>([]);
   const [serverRowCount, setServerRowCount] = useState(0);
   const [serverLoading, setServerLoading] = useState(serverSide);
   // First fetch completed (success or failure) — later live refetches must
   // swap rows in place without flashing the skeleton over the table.
   const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
+  const hasLoadedOnceRef = useRef(false);
   const lastFetchKey = useRef<string>("");
   const fetchSeq = useRef(0);
   /** In-flight serverSide request — superseding fetches and unmount abort it. */
@@ -300,6 +382,15 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   /** Last table state fetched — realtime refetches re-run the same query. */
   const lastStateRef = useRef<DataTableState | null>(null);
 
+  /** Filters / sort of the last issued query — detects changes for the
+   * optimistic local apply below. */
+  const lastFiltersKey = useRef<string>("");
+  const lastSortKey = useRef<string>("");
+  /** Last successful rows — held as placeholderData while a refetch is in
+   * flight so a local apply that would empty the current page cannot blank
+   * the body. */
+  const lastGoodServerRows = useRef<TDoc[]>([]);
+
   const fetchServerData = useCallback(
     async (state: DataTableState) => {
       if (!frappeApp || !serverSide) return;
@@ -308,6 +399,41 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
       const key = JSON.stringify(params);
       if (key === lastFetchKey.current) return;
       lastFetchKey.current = key;
+      // Optimistic local apply (keep-rows-and-reconcile / keepPreviousData):
+      // filter narrows the CURRENT page when it leaves rows; sort reorders
+      // what is on screen; pagination keeps the current page as placeholder
+      // until the new page arrives. A local pass that would empty the body
+      // is skipped — previous rows stay mounted until reconcile.
+      const filtersKey = JSON.stringify(params.filters);
+      const sortKey = JSON.stringify(params.orderBy ?? []);
+      const alreadyLoaded = lastFiltersKey.current !== "" || lastGoodServerRows.current.length > 0;
+      if (alreadyLoaded) {
+        const filtersChanged = filtersKey !== lastFiltersKey.current;
+        const sortChanged = sortKey !== lastSortKey.current;
+        if (filtersChanged || sortChanged) {
+          setServerData((previous) => {
+            let next = previous;
+            if (filtersChanged && params.filters.length > 0) {
+              const narrowed = previous.filter((row) =>
+                matchesFilters(
+                  row as unknown as Parameters<typeof matchesFilters>[0],
+                  params.filters,
+                ),
+              );
+              if (narrowed.length > 0) next = narrowed;
+            }
+            if (sortChanged && params.orderBy?.length) {
+              next = sortRowsLocally(
+                next as unknown as Record<string, unknown>[],
+                params.orderBy,
+              ) as TDoc[];
+            }
+            return next;
+          });
+        }
+      }
+      lastFiltersKey.current = filtersKey;
+      lastSortKey.current = sortKey;
       // Abort the superseded request (SB-M-011): the sequence guard below
       // already drops its response, aborting stops the wasted transfer too.
       fetchAbortRef.current?.abort();
@@ -339,17 +465,23 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
         if (seq !== fetchSeq.current) return;
         setServerData(data);
         setServerRowCount(count);
+        lastGoodServerRows.current = data;
         setErrorState(null);
       } catch (err) {
         if (seq !== fetchSeq.current) return;
         // Abort is a cancellation (unmount), not a failure to surface.
         if (controller.signal.aborted) return;
         setErrorState(err instanceof Error ? err : new Error(String(err)));
-        setServerData([]);
-        setServerRowCount(0);
+        // Keep last-good rows on a refetch failure — only the first load
+        // may settle as empty.
+        if (!hasLoadedOnceRef.current) {
+          setServerData([]);
+          setServerRowCount(0);
+        }
       } finally {
         if (seq === fetchSeq.current && !controller.signal.aborted) {
           setServerLoading(false);
+          hasLoadedOnceRef.current = true;
           setHasLoadedOnce(true);
         }
       }
@@ -384,6 +516,19 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
     [],
   );
 
+  // In-place refresh: re-run the current query when the host bumps
+  // refreshToken. Rows stay rendered (hasLoadedOnce is untouched) and swap
+  // when the response lands — the no-remount replacement for keying the
+  // table on a refresh generation.
+  const refreshTokenSeen = useRef(refreshToken);
+  useEffect(() => {
+    if (refreshTokenSeen.current === refreshToken) return;
+    refreshTokenSeen.current = refreshToken;
+    if (!serverSide || infiniteServerMode) return;
+    lastFetchKey.current = "";
+    if (lastStateRef.current) fetchServerData(lastStateRef.current);
+  }, [refreshToken, serverSide, infiniteServerMode, fetchServerData]);
+
   // Page loader for infinite mode: same param mapping as fetchServerData but
   // per-page and cacheable — DataTable pre-loads page N+1 while N is on
   // screen. totalCount rides page 0 only (one count query per query state).
@@ -427,17 +572,20 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   useEffect(() => {
     if (serverSide && !infiniteServerMode && frappeApp) {
       lastFetchKey.current = "";
-      fetchServerData({
-        data: [],
-        columns: columns as any,
-        pagination: { pageIndex: 0, pageSize: 10 },
-        sorting: [],
-        filters: [],
-        columnFilters: [],
-        columnVisibility: {},
-        columnOrder: columns.map((c) => c.id ?? ""),
-        columnSizing: {},
-      } as DataTableState);
+      fetchServerData(
+        lastStateRef.current ??
+          ({
+            data: [],
+            columns: columns as any,
+            pagination: { pageIndex: 0, pageSize: 10 },
+            sorting: [],
+            filters: [],
+            columnFilters: [],
+            columnVisibility: {},
+            columnOrder: columns.map((c) => c.id ?? ""),
+            columnSizing: {},
+          } as DataTableState),
+      );
     }
   }, [serverSide, infiniteServerMode, !!frappeApp, fetchServerData]);
 
@@ -471,16 +619,45 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   } = useLiveQuery((q) => (collection ? q.from({ _list: collection }) : null), [collection]);
   const clientRows = useMemo(() => (rawData as TDoc[] | undefined) ?? [], [rawData]);
 
-  const rows = serverSide ? serverData : clientRows;
+  // Keep-rows-and-reconcile for client/live-collection mode: a filter change
+  // swaps the collection (new subscription), which reports loading from
+  // empty — render the LAST GOOD rows, locally narrowed by the new filters
+  // (optimistic local apply), until the new collection is ready. Only the
+  // very first load may show the skeleton.
+  const lastGoodClientRows = useRef<TDoc[] | null>(null);
+  if (!serverSide && !isRowsLoading) lastGoodClientRows.current = clientRows;
+  const clientRowsResolved = useMemo(() => {
+    if (serverSide) return clientRows;
+    if (!isRowsLoading || !lastGoodClientRows.current) return clientRows;
+    const held = lastGoodClientRows.current;
+    if (!activeFilters) return held;
+    const narrowed = held.filter((row) =>
+      matchesFilters(row as unknown as Parameters<typeof matchesFilters>[0], activeFilters),
+    );
+    // A local pass that would empty the body is skipped — held rows stay
+    // as placeholderData until the new collection reconciles.
+    return narrowed.length > 0 ? narrowed : held;
+  }, [serverSide, clientRows, isRowsLoading, activeFilters]);
+
+  const serverRowsResolved =
+    serverSide && serverLoading && serverData.length === 0 && lastGoodServerRows.current.length > 0
+      ? lastGoodServerRows.current
+      : serverData;
+  const rows = serverSide ? serverRowsResolved : clientRowsResolved;
   // Infinite serverSide: DataTable owns loading/empty chrome (skeleton +
   // honest end state) — FrappeTable must not early-return on its own.
   // Paged serverSide: only the FIRST load shows the skeleton; live
   // refetches swap rows in place without flashing (LC-06-adjacent).
+  // Client mode: the skeleton shows only before the FIRST ready pass —
+  // collection swaps keep the last-good rows rendered.
   const isRowsLoadingResolved = serverSide
     ? infiniteServerMode
       ? false
       : serverLoading && !hasLoadedOnce
-    : isRowsLoading;
+    : isRowsLoading && lastGoodClientRows.current === null;
+  const isFetching = serverSide
+    ? !infiniteServerMode && serverLoading && hasLoadedOnce
+    : isRowsLoading && lastGoodClientRows.current !== null;
 
   // Reset stale errors when the underlying collection changes (new doctype
   // or filters) so a recovered query doesn't keep showing the old failure.
@@ -525,11 +702,13 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   const rowData = rows ?? [];
   // Honest states via AsyncBoundary (DG-ST-01: error > loading > empty).
   // Infinite serverSide delegates loading/empty chrome to DataTable.
+  // After the first load, NEVER replace DataTable with empty/loading chrome
+  // while a refetch is in flight — that was the named blank-the-list defect.
   const boundaryState = errorState
     ? { error: errorState }
     : isRowsLoadingResolved
       ? { loading: loading ?? true }
-      : rowData.length === 0 && !infiniteServerMode
+      : rowData.length === 0 && !infiniteServerMode && !isFetching
         ? { empty: true }
         : null;
   if (boundaryState) {
@@ -537,7 +716,7 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
       <YStack {...knobProps.gap} flex={1}>
         <FrappeReconnectIndicator config={connectionConfig} />
         <AsyncBoundary
-          layout="table"
+          layout={layout === "list" || layout === "cards" ? "list" : "table"}
           errorTitle={t("Error loading {{doctype}}", { doctype })}
           emptyTitle={t("No {{doctype}} records found", { doctype })}
           {...boundaryState}
@@ -546,39 +725,6 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
     );
   }
 
-  const columnsWithClick: DataTableColumn<Partial<TDoc>>[] = onRowClick
-    ? columns.map((col) => ({
-        ...col,
-        cell: (props) => {
-          const content = typeof col.cell === "function" ? col.cell(props) : props.getValue();
-          return (
-            <View
-              onPress={() => onRowClick(props.row.original)}
-              cursor="pointer"
-              hoverStyle={{ backgroundColor: "$color2" }}
-              // Cell containment (LC-06/LC-10): a bare View defaults to
-              // flexShrink 0 and hugs its content, so long cell content
-              // (e.g. a ToDo description) painted PAST the column bounds and
-              // under the neighbor cells (the td itself doesn't clip).
-              // Shrink with the cell, cap at its box, clip the excess — the
-              // inner one-line Texts then ellipsize in-column.
-              minWidth={0}
-              maxWidth="100%"
-              flexShrink={1}
-              overflow="hidden"
-            >
-              {/* raw strings crash native (text must be inside <Text>) */}
-              {typeof content === "string" || typeof content === "number" ? (
-                <Text fontSize="$3">{content}</Text>
-              ) : (
-                (content as React.ReactNode)
-              )}
-            </View>
-          );
-        },
-      }))
-    : columns;
-
   return (
     <YStack {...knobProps.gap} flex={1}>
       <FrappeReconnectIndicator config={connectionConfig} />
@@ -607,7 +753,16 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
       )}
       <DataTable
         data={rowData}
-        columns={columnsWithClick}
+        columns={columns}
+        // onRowClick (the stable FrappeTable prop name) rides DataTable's
+        // first-class row activation: whole-row press target, roving tab
+        // stop (LC-49), Enter/Space activation (LC-50), inner interactive
+        // controls win. rowLabel names each pressable row and its
+        // selection checkbox by document identity. Both spread BEFORE
+        // {...dataTableProps} so an explicit consumer onRowPress/rowLabel
+        // still ejects (consumer-last house rule).
+        {...(onRowClick ? { onRowPress: (row: Partial<TDoc>) => onRowClick(row) } : {})}
+        rowLabel={rowLabel}
         {...(serverSide && {
           manualFiltering: true,
           manualPagination: true,
@@ -618,7 +773,9 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
         paginationMode={paginationMode}
         {...(resolvedLoadPage ? { loadPage: resolvedLoadPage } : {})}
         {...(filterableFields ? { filterableFields } : {})}
+        isFetching={isFetching}
         {...dataTableProps}
+        {...(layout ? { layout } : {})}
       />
     </YStack>
   );

package/src/FrappeTreeView.tsx

@@ -130,11 +130,21 @@ export function FrappeTreeView<TDoc extends { name: string; doctype: string }>({
     () => ({
       baseURL: finalBaseURL,
       socketPort: config?.socketPort,
+      siteName: config?.siteName,
+      socketBaseURL: config?.socketBaseURL,
       auth: finalAuth,
       syncOptions: finalSyncOptions,
       fixtures: config?.fixtures,
     }),
-    [finalBaseURL, config?.socketPort, finalAuth, finalSyncOptions, config?.fixtures],
+    [
+      finalBaseURL,
+      config?.socketPort,
+      config?.siteName,
+      config?.socketBaseURL,
+      finalAuth,
+      finalSyncOptions,
+      config?.fixtures,
+    ],
   );
 
   const { meta, isLoading: isMetaLoading, error: metaError } = useDocTypeMeta(appConfig, doctype);

package/src/SyncErrorNotice.spec.tsx

@@ -0,0 +1,60 @@
+// SyncErrorNotice contract: the visible half of the rejected-write pattern —
+// role="alert" message, Retry re-issues, Dismiss 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";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { SyncErrorNotice } from "./SyncErrorNotice";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(cleanup);
+
+describe("SyncErrorNotice", () => {
+  it("renders the message as an alert", async () => {
+    renderWithProviders(<SyncErrorNotice message="Could not add comment" />);
+    const alert = await screen.findByRole("alert");
+    expect(alert).toHaveTextContent("Could not add comment");
+  });
+
+  it("fires onRetry and onDismiss from their buttons", async () => {
+    const onRetry = vi.fn();
+    const onDismiss = vi.fn();
+    renderWithProviders(
+      <SyncErrorNotice message="Write rejected" onRetry={onRetry} onDismiss={onDismiss} />,
+    );
+    fireEvent.click(await screen.findByText("Retry"));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+    fireEvent.click(await screen.findByText("Dismiss"));
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides affordances whose handlers are omitted", async () => {
+    renderWithProviders(<SyncErrorNotice message="No actions" />);
+    await screen.findByRole("alert");
+    expect(screen.queryByText("Retry")).toBeNull();
+    expect(screen.queryByText("Dismiss")).toBeNull();
+  });
+
+  it("honors custom labels", async () => {
+    renderWithProviders(
+      <SyncErrorNotice
+        message="Custom"
+        onRetry={() => {}}
+        onDismiss={() => {}}
+        retryLabel="Try again"
+        dismissLabel="Ignore"
+      />,
+    );
+    expect(await screen.findByText("Try again")).toBeTruthy();
+    expect(await screen.findByText("Ignore")).toBeTruthy();
+  });
+});

package/src/SyncErrorNotice.tsx

@@ -0,0 +1,81 @@
+import { Button } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Text, XStack } from "tamagui";
+
+export interface SyncErrorNoticeProps {
+  /** Human-readable failure message (already localized by the caller). */
+  message: string;
+  /**
+   * Re-issues the failed write (same mutation id — idempotent server-side).
+   * Omit to hide the Retry affordance.
+   */
+  onRetry?: () => void;
+  /** Drops the failed entry without retrying. Omit to hide Dismiss. */
+  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
+ * 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).
+ *
+ * Pair with `useFrappePendingMutations` from `@multiplatform.one/frappe`:
+ *
+ * ```tsx
+ * const { failed, retry, dismiss } = useFrappePendingMutations(config, "Comment");
+ * {failed.map((entry) => (
+ *   <SyncErrorNotice
+ *     key={entry.id}
+ *     message={entry.error ?? t("Could not save changes")}
+ *     onRetry={retry}
+ *     onDismiss={() => dismiss(entry.id)}
+ *   />
+ * ))}
+ * ```
+ */
+export function SyncErrorNotice({
+  message,
+  onRetry,
+  onDismiss,
+  retryLabel,
+  dismissLabel,
+}: 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}
+    >
+      <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>
+  );
+}