@multiplatform.one/frappe-ui 7.23.1 → 7.23.2

package/src/FormSidebar.stories.tsx

@@ -29,6 +29,8 @@ import { FrappeForm } from "./FrappeForm";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider, LiveToDoGate, frappeStoriesLive } from "./frappeStoryTarget";
 
+// hex-escape: generated image fixtures are data, not paint
+
 export default {
   title: "FrappeUI/FormSidebar",
   component: FormSidebar,

package/src/FrappeCalendar.stories.tsx

@@ -6,6 +6,8 @@ import { FrappeCalendar } from "./FrappeCalendar";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
+// hex-escape: Frappe sends column, event and series colours as hex: fixture data, not paint
+
 export default {
   title: "FrappeUI/FrappeCalendar",
   component: FrappeCalendar,

package/src/FrappeChartCard.stories.tsx

@@ -5,6 +5,8 @@ import { FrappeChartCard } from "./FrappeChartCard";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
+// hex-escape: Frappe sends column, event and series colours as hex: fixture data, not paint
+
 export default {
   title: "FrappeUI/FrappeChartCard",
   component: ChartCard,

package/src/FrappeDashboard.stories.tsx

@@ -5,6 +5,8 @@ import { FrappeDashboard } from "./FrappeDashboard";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
+// hex-escape: Frappe sends column, event and series colours as hex: fixture data, not paint
+
 export default {
   title: "FrappeUI/FrappeDashboard",
   component: FrappeDashboard,

package/src/FrappeForm.tsx

@@ -52,6 +52,7 @@ import { extractServerError } from "./formEngine/useFormEngine";
 import { FrappeFormActions } from "./FrappeFormActions";
 import { connectionFields, connectionsFromMeta, type FrappeConnection } from "./frappeConnections";
 import { FrappeFormConnections } from "./FrappeFormConnections";
+import { FrappeNotConfigured } from "./FrappeNotConfigured";
 import { FrappeRowsReader, type FrappeRowsSnapshot } from "./FrappeRowsReader";
 import {
   frappeRouteHref,
@@ -377,12 +378,17 @@ export function mapDocToSidebarMetadata(
  * `buildFormTabs` (tabs, sections, `depends_on`, `mandatory_depends_on`,
  * `read_only_depends_on`, `collapsible_depends_on`, permlevel,
  * `set_only_once`, `fetch_from` and docstatus), and renders each tab with
- * `SchemaForm`. With a `route` it is the doctype's record page.
+ * `SchemaForm`. With a `route` it is the doctype's record page. With neither
+ * a bench URL nor a fixture corpus it says Frappe is not configured.
  */
 export function FrappeForm<TDoc extends { name: string; doctype: string }>(
   props: FrappeFormProps<TDoc>,
 ) {
+  const config = useFrappeConfig();
   const { route, ...formProps } = props;
+  if (!(props.baseURL ?? config?.baseURL) && !config?.fixtures) {
+    return <FrappeNotConfigured doctype={props.doctype} page={route !== undefined} />;
+  }
   if (route === undefined) return <FrappeFormBody<TDoc> {...formProps} />;
   return <FrappeFormRoute<TDoc> {...formProps} route={route} />;
 }

package/src/FrappeImageView.stories.tsx

@@ -4,6 +4,8 @@ import { FrappeImageView } from "./FrappeImageView";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
+// hex-escape: generated image fixtures are data, not paint
+
 export default {
   title: "FrappeUI/FrappeImageView",
   component: FrappeImageView,

package/src/FrappeKPICard.stories.tsx

@@ -4,6 +4,7 @@ import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 // catalog names it does not define).
 import { KPICard } from "@multiplatform.one/components";
 import { action } from "@multiplatform.one/storybook";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { CurrencyDollarIcon } from "@phosphor-icons/react";
 import { XStack } from "tamagui";
 import { FrappeKPICard } from "./FrappeKPICard";
@@ -81,8 +82,7 @@ function jsonResponse(body: unknown, status = 200): Response {
         return jsonResponse({ docs: [todoMetaRaw(decodeURIComponent(doctype))] });
       }
       const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
-      if (metaMatch)
-        return jsonResponse({ data: todoMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (metaMatch) return jsonResponse({ data: todoMetaRaw(decodeURIComponent(metaMatch[1])) });
       if (url.pathname === "/api/resource/DocType") {
         return jsonResponse({ data: [{ name: "ToDo", module: "Desk" }] });
       }
@@ -201,7 +201,7 @@ export const Clickable = () => (
 
 export const LongTitle = () => (
   <KPICard
-    width={220}
+    width={sizeRecipeEscape(220, "story fixture: a card narrow enough to truncate the long title")}
     config={{
       id: "long",
       title:

package/src/FrappeKanban.stories.tsx

@@ -5,6 +5,8 @@ import { FrappeKanban, type KanbanColumn } from "./FrappeKanban";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
+// hex-escape: Frappe sends column, event and series colours as hex: fixture data, not paint
+
 export default {
   title: "FrappeUI/FrappeKanban",
   component: FrappeKanban,
@@ -310,10 +312,7 @@ const bugColumns: KanbanColumn[] = [
 ];
 
 export const BugTracker = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ Bug: bugFixtures })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ Bug: bugFixtures })}>
     <FrappeKanban<Bug>
       doctype="Bug"
       columns={bugColumns}
@@ -360,10 +359,7 @@ export const Loading = () => (
 
 /** Zero documents, no failure — configured columns render with per-column "No items" (empty ≠ error). */
 export const Empty = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ ToDo: [] })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ ToDo: [] })}>
     <FrappeKanban<ToDo>
       doctype="ToDo"
       columns={todoColumns}

package/src/FrappeListView.stories.tsx

@@ -4,6 +4,8 @@ import { FrappeListView } from "./FrappeListView";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
+// hex-escape: generated image fixtures are data, not paint
+
 export default {
   title: "FrappeUI/FrappeListView",
   component: FrappeListView,

package/src/FrappeListView.tsx

@@ -19,6 +19,7 @@ import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
 import { storage } from "@multiplatform.one/store";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeList, type FrappeListProps } from "./FrappeList";
+import { FrappeNotConfigured } from "./FrappeNotConfigured";
 import { FrappeTable } from "./FrappeTable";
 import { useDocRights } from "./formEngine/useDocRights";
 import { frappeRouteHref, useFrappeRouter } from "./frappeNavigation";
@@ -170,8 +171,20 @@ async function setStoredViewMode(doctype: string, mode: ListViewMode): Promise<v
  *
  * Delegates to `FrappeList` (which delegates to generic `List`) or
  * `FrappeTable` (which delegates to `DataTable`) based on the view mode.
+ * With neither a bench URL nor a fixture corpus it says Frappe is not
+ * configured.
  */
-export function FrappeListView<TDoc extends { name: string; doctype: string }>({
+export function FrappeListView<TDoc extends { name: string; doctype: string }>(
+  props: FrappeListViewProps<TDoc>,
+) {
+  const config = useFrappeConfig();
+  if (!(props.baseURL ?? config?.baseURL) && !config?.fixtures) {
+    return <FrappeNotConfigured doctype={props.doctype} page={props.route !== undefined} />;
+  }
+  return <FrappeListViewBody<TDoc> {...props} />;
+}
+
+function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
   doctype,
   fields,
   connections,

package/src/FrappeNotConfigured.tsx

@@ -0,0 +1,29 @@
+import { EmptyState, ListPageLayout, PageHeader } from "@multiplatform.one/components";
+import { useTranslation } from "react-i18next";
+
+export interface FrappeNotConfiguredProps {
+  doctype: string;
+  /** A routed page keeps the page template, the doctype as its title. */
+  page?: boolean;
+}
+
+/**
+ * What a doctype's list or form shows when neither a bench URL nor a fixture
+ * corpus is configured (a host built with Frappe off), in place of the view.
+ */
+export function FrappeNotConfigured({ doctype, page = false }: FrappeNotConfiguredProps) {
+  const { t } = useTranslation();
+  const state = (
+    <EmptyState
+      testID="frappe-not-configured"
+      title={t("Frappe is not configured")}
+      description={t("{{doctype}} can't load without a Frappe bench URL.", { doctype })}
+    />
+  );
+  if (!page) return state;
+  return (
+    <ListPageLayout scroll={false} header={<PageHeader title={doctype} divider={false} />}>
+      {state}
+    </ListPageLayout>
+  );
+}

package/src/FrappeReportView.tsx

@@ -349,7 +349,7 @@ export interface FrappeReportConnection {
 const callCache = new Map<string, CallModule>();
 
 function getCall(connection: FrappeReportConnection): CallModule {
-  const key = `${connection.baseURL}:${connection.auth?.token ?? ""}:${connection.auth?.type ?? ""}`;
+  const key = `${connection.baseURL}:${connection.auth?.useToken ? "t" : ""}:${connection.auth?.token ?? ""}:${connection.auth?.type ?? ""}`;
   let call = callCache.get(key);
   if (!call) {
     const authConfig: AuthConfig | undefined = connection.auth

package/src/clientCache.auth.spec.tsx

@@ -0,0 +1,94 @@
+// Each hook here caches its REST client per connection. Two connections to
+// one bench that differ only in useToken must not share a client, or the
+// first one built decides whether the other sends its token (MPO-399,
+// MPO-406). The bench answers a tokenless call as Guest.
+import { renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useFrappeReport } from "./FrappeReportView";
+import { useFrappeAggregate } from "./useFrappeAggregate";
+import { useFrappeFacets } from "./useFrappeFacets";
+
+const token = "token key:secret";
+let sent: (string | null)[] = [];
+
+function reply(url: URL): unknown {
+  const method = url.pathname.replace(/^\/api\/method\//, "");
+  if (method === "frappe.client.get_count") return { message: 3 };
+  if (method === "frappe.desk.reportview.get_sidebar_stats") return { message: { stats: {} } };
+  if (method === "frappe.desk.query_report.run") return { message: { columns: [], result: [] } };
+  return { message: [] };
+}
+
+beforeEach(() => {
+  sent = [];
+  vi.stubGlobal("fetch", async (input: string | URL | Request, init?: RequestInit) => {
+    sent.push(new Headers(init?.headers).get("Authorization"));
+    return new Response(JSON.stringify(reply(new URL(String(input)))), {
+      headers: { "content-type": "application/json" },
+    });
+  });
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+function connection(baseURL: string, useToken: boolean) {
+  return { baseURL, realtime: false, auth: { useToken, token: "key:secret", type: "token" } };
+}
+
+async function authorizationPerConnection(
+  mount: (useToken: boolean) => () => boolean,
+): Promise<{ off: (string | null)[]; on: (string | null)[] }> {
+  const offSettled = mount(false);
+  await waitFor(() => expect(offSettled()).toBe(true));
+  const off = sent.splice(0);
+  const onSettled = mount(true);
+  await waitFor(() => expect(onSettled()).toBe(true));
+  return { off, on: sent.splice(0) };
+}
+
+describe("cached REST clients never drop a connection's token", () => {
+  it("useFrappeAggregate", async () => {
+    const { off, on } = await authorizationPerConnection((useToken) => {
+      const { result } = renderHook(() =>
+        useFrappeAggregate(connection("http://aggregate-auth.test", useToken), {
+          doctype: "ToDo",
+        }),
+      );
+      return () => !result.current.isLoading;
+    });
+    expect(off).toEqual([null]);
+    expect(on).toEqual([token]);
+  });
+
+  it("useFrappeFacets", async () => {
+    const { off, on } = await authorizationPerConnection((useToken) => {
+      const { result } = renderHook(() =>
+        useFrappeFacets("ToDo", [], {
+          connection: connection("http://facets-auth.test", useToken),
+        }),
+      );
+      return () =>
+        !result.current.assigned.isLoading &&
+        !result.current.owner.isLoading &&
+        !result.current.tags.isLoading;
+    });
+    expect(off.length).toBeGreaterThan(0);
+    expect(new Set(off)).toEqual(new Set([null]));
+    expect(on.length).toBe(off.length);
+    expect(new Set(on)).toEqual(new Set([token]));
+  });
+
+  it("useFrappeReport (FrappeReportView)", async () => {
+    const { off, on } = await authorizationPerConnection((useToken) => {
+      const { result } = renderHook(() =>
+        useFrappeReport(connection("http://report-auth.test", useToken), {
+          reportName: "ToDo Summary",
+          debounceMs: 0,
+        }),
+      );
+      return () => !result.current.isLoading;
+    });
+    expect(off).toEqual([null]);
+    expect(on).toEqual([token]);
+  });
+});

package/src/desk/DeskFormSidebar.stories.tsx

@@ -3,6 +3,8 @@ import { YStack } from "tamagui";
 import { FrappeProvider } from "../FrappeProvider";
 import { DeskFormSidebar } from "./DeskFormSidebar";
 
+// hex-escape: generated image fixtures are data, not paint
+
 export default {
   title: "FrappeUI/Desk/DeskFormSidebar",
   component: DeskFormSidebar,

package/src/desk/DeskShell.stories.tsx

@@ -1,9 +1,15 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
 import { Text, YStack } from "@multiplatform.one/components";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { FrappeProvider } from "../FrappeProvider";
 import { DeskShell } from "./DeskShell";
 
+const frameHeight = sizeRecipeEscape(
+  640,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 export default {
   title: "FrappeUI/Desk/DeskShell",
   component: DeskShell,
@@ -85,7 +91,7 @@ const content = (blocks: number) => (
 
 export const Main = (args: Record<string, unknown>) => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack height={640}>
+    <YStack height={frameHeight}>
       <DeskShell
         breadcrumbs={[{ label: "Desk", href: "/desk" }, { label: "Todo" }]}
         onNavigate={action("onNavigate")}
@@ -102,7 +108,7 @@ Main.storyName = "Main";
 
 export const NoSidebar = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack height={640}>
+    <YStack height={frameHeight}>
       <DeskShell showSidebar={false} onNavigate={action("onNavigate")}>
         {content(2)}
       </DeskShell>
@@ -112,7 +118,7 @@ export const NoSidebar = () => (
 
 export const NoAwesomebar = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack height={640}>
+    <YStack height={frameHeight}>
       <DeskShell showAwesomebar={false} onNavigate={action("onNavigate")}>
         {content(2)}
       </DeskShell>
@@ -123,7 +129,7 @@ export const NoAwesomebar = () => (
 /** Long page content must scroll inside the main area, header staying fixed. */
 export const LongContent = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack height={640}>
+    <YStack height={frameHeight}>
       <DeskShell
         breadcrumbs={[{ label: "Desk", href: "/desk" }, { label: "Long" }]}
         onNavigate={action("onNavigate")}
@@ -136,7 +142,7 @@ export const LongContent = () => (
 
 /** No breadcrumbs, no provider config: shell must still render header + nav + content. */
 export const Bare = () => (
-  <YStack height={640}>
+  <YStack height={frameHeight}>
     <DeskShell onNavigate={action("onNavigate")}>{content(1)}</DeskShell>
   </YStack>
 );
@@ -144,7 +150,7 @@ export const Bare = () => (
 /** Compact viewport: rail collapses to a phosphor toggle + overlay drawer. */
 export const Narrow = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack height={640}>
+    <YStack height={frameHeight}>
       <DeskShell
         breadcrumbs={[{ label: "Desk", href: "/desk" }, { label: "Todo" }]}
         onNavigate={action("onNavigate")}

package/src/fields/CodeEditor/index.tsx

@@ -29,7 +29,7 @@ import {
   useResolvedValidators,
   type AnyFormApi,
 } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useEffect, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
@@ -183,7 +183,13 @@ export function CodeEditorField({
   if (skeleton) {
     return (
       <YStack {...knobProps.gap} width="100%">
-        {label && <Skeleton variant="text" width="30%" height={14} />}
+        {label && (
+          <Skeleton
+            variant="text"
+            width="30%"
+            height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
+          />
+        )}
         <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
       </YStack>
     );

package/src/fields/Color/Color.stories.tsx

@@ -6,6 +6,8 @@ import { fieldtypeToTableField } from "../../fieldRegistry";
 import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Color, type ColorProps } from ".";
 
+// hex-escape: Color field values are hex strings: specimen data, not paint
+
 export default {
   title: "FrappeUI/Color",
   component: Color,

package/src/fields/Color/index.tsx

@@ -62,6 +62,7 @@ export function Color<
     validators,
     disabled,
     value,
+    // hex-escape: a Color field stores hex; the placeholder shows that format and paints nothing
     placeholder = "#000000",
     _showPresets = true,
     presetColors,

package/src/fields/FileUpload.tsx

@@ -1,7 +1,7 @@
 import { useFrappeCollection } from "@multiplatform.one/frappe";
 import { Skeleton } from "@multiplatform.one/forms";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -276,7 +276,13 @@ export function FileUpload({
   if (skeleton) {
     return (
       <YStack {...knobProps.gap}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
+        {label && (
+          <Skeleton
+            variant="text"
+            width="30%"
+            height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
+          />
+        )}
         <Skeleton variant="rounded" width="100%" height={minHeight} />
       </YStack>
     );

package/src/fields/Heading/index.tsx

@@ -1,6 +1,6 @@
 import { useRegisterPageHeading } from "@multiplatform.one/components";
 import { Skeleton } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
 import { useCallback, useEffect, useId, useState } from "react";
 import { H1, H2, H3, H4, Separator, Text, XStack, YStack, type YStackProps } from "tamagui";
@@ -105,7 +105,13 @@ export function Heading({
       <YStack {...knobProps.gap} {...stackProps}>
         <Skeleton variant="text" width="45%" height={compact ? 18 : 24} />
         <Skeleton variant="text" width="70%" height={compact ? 12 : 14} />
-        {showSeparator && <Skeleton variant="rounded" width="100%" height={1} />}
+        {showSeparator && (
+          <Skeleton
+            variant="rounded"
+            width="100%"
+            height={sizeRecipeEscape(1, "separator bone: the 1px rule a Separator draws")}
+          />
+        )}
       </YStack>
     );
   }

package/src/fields/MarkdownEditor/index.native.tsx

@@ -31,7 +31,7 @@ import { useEffect, useState, type ComponentType, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
 import { Paragraph, YStack } from "tamagui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
 import { EditorPreviewPanes, PreviewSurface } from "../shared/EditorPreviewPanes";
 
 // ---------------------------------------------------------------------------
@@ -176,7 +176,13 @@ export function MarkdownEditorField({
   if (skeleton) {
     return (
       <YStack {...knobProps.gap} width="100%">
-        {label && <Skeleton variant="text" width="30%" height={14} />}
+        {label && (
+          <Skeleton
+            variant="text"
+            width="30%"
+            height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
+          />
+        )}
         <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
       </YStack>
     );

package/src/fields/MarkdownEditor/index.tsx

@@ -27,6 +27,7 @@ import {
   type AnyFormApi,
 } from "@multiplatform.one/forms";
 import { RichEditor, type RichEditorRef } from "@multiplatform.one/rich-text";
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { YStack } from "tamagui";
@@ -111,7 +112,13 @@ export function MarkdownEditorField({
   if (skeleton) {
     return (
       <YStack {...knobProps.gap} width="100%">
-        {label && <Skeleton variant="text" width="30%" height={14} />}
+        {label && (
+          <Skeleton
+            variant="text"
+            width="30%"
+            height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
+          />
+        )}
         <Skeleton variant="rounded" width="100%" height={compact ? 120 : 200} />
       </YStack>
     );

package/src/fields/ReadOnly/ReadOnly.stories.tsx

@@ -4,6 +4,8 @@ import { fieldtypeToTableField } from "../../fieldRegistry";
 import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { ReadOnly } from ".";
 
+// hex-escape: Color field values are hex strings: specimen data, not paint
+
 export default {
   title: "FrappeUI/ReadOnly",
   component: ReadOnly,

package/src/frappeRoutes.notConfigured.spec.tsx

@@ -0,0 +1,77 @@
+// A host built with Frappe off (MPO-403): createApp mounts no FrappeProvider
+// without FRAPPE_ENABLED, so a doctype's routed pages find no bench URL and no
+// fixture corpus. They say the backend isn't configured instead of throwing
+// and taking the route down, and they dial nothing.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeForm } from "./FrappeForm";
+import { FrappeListView } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+
+interface Move {
+  name: string;
+  doctype: string;
+  move_name?: string;
+}
+
+const doctype = "Poke Move";
+const route = "/moves";
+
+let fetchSpy: ReturnType<typeof vi.fn>;
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+beforeEach(() => {
+  fetchSpy = vi.fn(async () => {
+    throw new Error("a page with no bench dialled one");
+  });
+  vi.stubGlobal("fetch", fetchSpy);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function expectNotConfigured() {
+  expect(screen.getByTestId("frappe-not-configured")).toBeTruthy();
+  expect(screen.getByText("Frappe is not configured")).toBeTruthy();
+  expect(fetchSpy).not.toHaveBeenCalled();
+}
+
+describe("a doctype's pages on a host with no Frappe backend", () => {
+  it("the new page says the backend isn't configured", () => {
+    renderWithProviders(<FrappeForm<Move> doctype={doctype} route={route} />);
+    expectNotConfigured();
+    expect(screen.getByText(`${doctype} can't load without a Frappe bench URL.`)).toBeTruthy();
+  });
+
+  it("a record page says the backend isn't configured", () => {
+    renderWithProviders(<FrappeForm<Move> doctype={doctype} name="a1b2c3" />);
+    expectNotConfigured();
+  });
+
+  it("the list page says the backend isn't configured", () => {
+    renderWithProviders(<FrappeListView<Move> doctype={doctype} route={route} />);
+    expectNotConfigured();
+  });
+
+  it("a provider that resolved no bench URL reads the same", () => {
+    renderWithProviders(
+      <FrappeProvider realtime={false}>
+        <FrappeForm<Move> doctype={doctype} route={route} />
+      </FrappeProvider>,
+    );
+    expectNotConfigured();
+  });
+});