@multiplatform.one/frappe-ui 7.45.1 → 7.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/frappe-ui",
-  "version": "7.45.1",
+  "version": "7.47.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.45.1",
-    "@multiplatform.one/desktop": "^7.45.1",
-    "@multiplatform.one/forms": "^7.45.1",
-    "@multiplatform.one/frappe": "^7.45.1",
-    "@multiplatform.one/i18n": "^7.45.1",
-    "@multiplatform.one/markdown": "^7.45.1",
-    "@multiplatform.one/platform": "^7.45.1",
-    "@multiplatform.one/rich-text": "^7.45.1",
-    "@multiplatform.one/router": "^7.45.1",
-    "@multiplatform.one/store": "^7.45.1",
-    "@multiplatform.one/table": "^7.45.1",
-    "@multiplatform.one/theme": "^7.45.1",
+    "@multiplatform.one/components": "^7.47.0",
+    "@multiplatform.one/desktop": "^7.47.0",
+    "@multiplatform.one/forms": "^7.47.0",
+    "@multiplatform.one/frappe": "^7.47.0",
+    "@multiplatform.one/i18n": "^7.47.0",
+    "@multiplatform.one/markdown": "^7.47.0",
+    "@multiplatform.one/platform": "^7.47.0",
+    "@multiplatform.one/rich-text": "^7.47.0",
+    "@multiplatform.one/router": "^7.47.0",
+    "@multiplatform.one/store": "^7.47.0",
+    "@multiplatform.one/table": "^7.47.0",
+    "@multiplatform.one/theme": "^7.47.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.45.1",
-    "@multiplatform.one/storybook": "7.45.1",
-    "@multiplatform.one/test-utils": "7.45.1",
+    "@multiplatform.one/config": "7.47.0",
+    "@multiplatform.one/storybook": "7.47.0",
+    "@multiplatform.one/test-utils": "7.47.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/FileBrowser/index.tsx

@@ -7,6 +7,7 @@ import {
   TreeView,
   ViewSwitcher,
   type TreeNode,
+  Text,
 } from "@multiplatform.one/components";
 import { Button, Checkbox, FileUpload, Input } from "@multiplatform.one/forms";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
@@ -34,7 +35,7 @@ import {
 } from "@phosphor-icons/react";
 import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { Text, XStack, YStack, useWindowDimensions } from "tamagui";
+import { Text as TamaguiText, XStack, YStack, useWindowDimensions } from "tamagui";
 import {
   ancestorFolderIds,
   breadcrumbItems,
@@ -366,14 +367,14 @@ export function FileBrowser({
           return (
             <XStack alignItems="center" gap="$2" minWidth={0} flex={1}>
               <KindIcon kind={fileKind(file)} />
-              <Text
+              <TamaguiText
                 fontSize="$3"
                 flex={1}
                 minWidth={0}
                 {...({ numberOfLines: 1, title: file.file_name } as Record<string, unknown>)}
               >
                 {file.file_name}
-              </Text>
+              </TamaguiText>
               {single && current ? (
                 <CheckIcon size={14} data-filebrowser-current-check aria-hidden />
               ) : null}
@@ -389,9 +390,9 @@ export function FileBrowser({
         accessorKey: "file_size",
         header: t("Size"),
         cell: ({ row }) => (
-          <Text fontSize="$3" fontFamily="$mono">
+          <TamaguiText fontSize="$3" fontFamily="$mono">
             {isFolder(row.original) ? "—" : formatSize(row.original.file_size)}
-          </Text>
+          </TamaguiText>
         ),
       },
       ...(single
@@ -540,20 +541,20 @@ export function FileBrowser({
           </YStack>
         </YStack>
         <XStack alignItems="center" gap="$2">
-          <Text
+          <TamaguiText
             fontSize="$3"
             flex={1}
             {...({ numberOfLines: 1, title: file.file_name } as Record<string, unknown>)}
           >
             {file.file_name}
-          </Text>
+          </TamaguiText>
           {single && current ? (
             <CheckIcon size={14} data-filebrowser-current-check aria-hidden />
           ) : null}
         </XStack>
-        <Text fontSize="$2" fontFamily="$mono" color="$color10">
+        <TamaguiText fontSize="$2" fontFamily="$mono" color="$color10">
           {isFolder(file) ? "—" : formatSize(file.file_size)}
-        </Text>
+        </TamaguiText>
       </YStack>
     );
   };
@@ -587,18 +588,18 @@ export function FileBrowser({
         renderItem={(file) => (
           <XStack alignItems="center" gap="$3" flex={1} minWidth={0} width="100%">
             <KindIcon kind={fileKind(file)} />
-            <Text
+            <TamaguiText
               fontSize="$3"
               flex={1}
               minWidth={0}
               {...({ numberOfLines: 1, title: file.file_name } as Record<string, unknown>)}
             >
               {file.file_name}
-            </Text>
+            </TamaguiText>
             {isFolder(file) ? null : (
-              <Text fontSize="$2" fontFamily="$mono" color="$color10">
+              <TamaguiText fontSize="$2" fontFamily="$mono" color="$color10">
                 {formatSize(file.file_size)}
-              </Text>
+              </TamaguiText>
             )}
           </XStack>
         )}

package/src/FormSidebar.stories.tsx

@@ -3,6 +3,7 @@ import {
   Tags,
   type AttachmentItem,
   type TagItem,
+  Text,
 } from "@multiplatform.one/components";
 import { action } from "@multiplatform.one/storybook";
 import {
@@ -18,7 +19,7 @@ import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import React from "react";
 // Catalog Button (LC-56 story honesty): stories compose catalog controls, never raw tamagui ones.
 import { Button, Switch } from "@multiplatform.one/forms";
-import { Text, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import {
   FormSidebar,
   type SidebarMetadataEntry,

package/src/FrappeCalendar.stories.tsx

@@ -1,10 +1,10 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
 import { resolveChartPalette } from "@multiplatform.one/theme";
-import { Text } from "tamagui";
 import { FrappeCalendar } from "./FrappeCalendar";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
+import { Text } from "@multiplatform.one/components";
 
 // hex-escape: Frappe sends column, event and series colours as hex: fixture data, not paint
 

package/src/FrappeCalendar.tsx

@@ -3,10 +3,11 @@ import {
   eventChipTextColor,
   type CalendarEvent,
   type CalendarEventMoveRange,
+  Text,
 } from "@multiplatform.one/components";
 import { Spinner, formCommonColors } from "@multiplatform.one/forms";
 import React, { useMemo, useCallback, useState, type ReactNode } from "react";
-import { Text, YStack, type YStackProps } from "tamagui";
+import { Text as TamaguiText, YStack, type YStackProps } from "tamagui";
 import { useTranslation } from "react-i18next";
 import {
   formatCalendarDate,
@@ -221,13 +222,13 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
   // was invisible on light fills and failed AA on mid-tone doc colors.
   const defaultEventContent = useCallback(
     (calEvent: CalendarEvent): ReactNode => (
-      <Text
+      <TamaguiText
         numberOfLines={2}
         color={eventChipTextColor(calEvent.color, onIdentity)}
         {...knobProps.label}
       >
         {calEvent.title}
-      </Text>
+      </TamaguiText>
     ),
     [knobProps.label, onIdentity],
   );
@@ -282,9 +283,9 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" gap="$2" {...stackProps}>
         <Spinner size="large" />
-        <Text color={formCommonColors.muted} {...knobProps.body}>
+        <TamaguiText color={formCommonColors.muted} {...knobProps.body}>
           {t("Loading {{doctype}}...", { doctype })}
-        </Text>
+        </TamaguiText>
       </YStack>
     );
   }
@@ -294,9 +295,9 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps} {...knobProps.gap}>
         <Text color={formCommonColors.error}>{t("Error loading {{doctype}}", { doctype })}</Text>
-        <Text color={formCommonColors.muted} {...knobProps.body}>
+        <TamaguiText color={formCommonColors.muted} {...knobProps.body}>
           {queryError.message}
-        </Text>
+        </TamaguiText>
       </YStack>
     );
   }
@@ -313,9 +314,9 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
           borderWidth={1}
         >
           <Text color={formCommonColors.error}>{t("Action failed")}</Text>
-          <Text color={formCommonColors.muted} {...knobProps.body}>
+          <TamaguiText color={formCommonColors.muted} {...knobProps.body}>
             {actionError.message}
-          </Text>
+          </TamaguiText>
         </YStack>
       )}
       <Calendar

package/src/FrappeConnectionIndicator.stories.tsx

@@ -1,8 +1,9 @@
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import {
   FrappeConnectionIndicator,
   type FrappeConnectionIndicatorProps,
 } from "./FrappeConnectionIndicator";
+import { Text } from "@multiplatform.one/components";
 
 export default {
   title: "FrappeUI/FrappeConnectionIndicator",

package/src/FrappeConnectionIndicator.tsx

@@ -6,7 +6,8 @@ import {
 import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Text, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
+import { Text } from "@multiplatform.one/components";
 
 export interface FrappeConnectionIndicatorProps {
   /** The same connection config the sibling collection hooks use. */

package/src/FrappeDashboard.stories.tsx

@@ -1,6 +1,6 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
-import { KPICard, ChartCard, type DashboardWidget } from "@multiplatform.one/components";
-import { Text, YStack } from "tamagui";
+import { KPICard, ChartCard, type DashboardWidget, Text } from "@multiplatform.one/components";
+import { YStack } from "tamagui";
 import { FrappeDashboard } from "./FrappeDashboard";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";

package/src/FrappeDashboard.tsx

@@ -1,10 +1,10 @@
 import { useFrappeDoctypeEvents } from "@multiplatform.one/frappe";
-import { Dashboard, type DashboardWidget } from "@multiplatform.one/components";
+import { Dashboard, type DashboardWidget, Text } from "@multiplatform.one/components";
 import { Button, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import { ArrowsClockwiseIcon } from "@phosphor-icons/react";
 import React, { useMemo, useCallback, useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Text, XStack, YStack, type YStackProps, H3 } from "tamagui";
+import { Text as TamaguiText, XStack, YStack, type YStackProps, H3 } from "tamagui";
 import { formatTimeOfDay, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
 import { useFrappeRows } from "./useFrappeRows";
@@ -160,9 +160,9 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" gap="$2" {...stackProps}>
         <Spinner size="large" />
-        <Text color={knobProps.textAccentColor} {...knobProps.body}>
+        <TamaguiText color={knobProps.textAccentColor} {...knobProps.body}>
           {t("Loading dashboard...")}
-        </Text>
+        </TamaguiText>
       </YStack>
     );
   }
@@ -173,9 +173,9 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps} {...knobProps.gap}>
         <Text color={formCommonColors.error}>{t("Failed to load dashboard")}</Text>
-        <Text color={knobProps.textAccentColor} {...knobProps.body}>
+        <TamaguiText color={knobProps.textAccentColor} {...knobProps.body}>
           {err.message}
-        </Text>
+        </TamaguiText>
       </YStack>
     );
   }
@@ -193,11 +193,11 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
           {showRefresh && (
             <XStack {...knobProps.gap} alignItems="center">
               {isLiveStale && <Spinner size="small" aria-label={t("Updating")} />}
-              <Text color={knobProps.textAccentColor} {...knobProps.label}>
+              <TamaguiText color={knobProps.textAccentColor} {...knobProps.label}>
                 {t("Last updated: {{time}}", {
                   time: formatTimeOfDay(dataUpdatedAt ?? lastRefresh),
                 })}
-              </Text>
+              </TamaguiText>
               {/* LC-54 (amendment 2026-08-13): house Button, own-box floor —
                   the raw tamagui Button + grown transparent target painted
                   its hover fill across the escaped 44px floor. `circular`
@@ -321,9 +321,9 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
             {title ? <H3 {...knobProps.heading}>{title}</H3> : <YStack flex={1} />}
             <XStack {...knobProps.gap} alignItems="center">
               {autoRefresh && (
-                <Text color={knobProps.textAccentColor} {...knobProps.label}>
+                <TamaguiText color={knobProps.textAccentColor} {...knobProps.label}>
                   {t("Last updated: {{time}}", { time: formatTimeOfDay(lastRefresh) })}
-                </Text>
+                </TamaguiText>
               )}
               {/* LC-54: house Button, own-box floor (see the live-path refresh). */}
               <Button

package/src/FrappeForm.lifecycle.spec.tsx

@@ -376,7 +376,9 @@ describe("a submittable doctype's routed pages", () => {
     expect(screen.getByText("Submit")).toBeTruthy();
     expect(screen.queryByText("Save")).toBeNull();
 
-    fireEvent.click(screen.getByText("Edit"));
+    // LC-145: Submit is the bar's one action, so Edit rides the "…" menu.
+    fireEvent.click(screen.getByTestId("frappe-form-menu"));
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Edit" }));
     expect(pushed).toEqual(["/loans/LOAN-DRAFT/edit"]);
   });
 

package/src/FrappeForm.tsx

@@ -9,21 +9,22 @@ import {
   AsyncSkeleton,
   DetailPageLayout,
   EmptyState,
+  PageBackButton,
   PageHeader,
   ScrollView,
   Tabs,
   type TabsItem,
+  Text,
 } from "@multiplatform.one/components";
 import { SchemaForm, type FieldOverride, type SchemaFormProps } from "./schemaForm";
 import type { HeadingLevel } from "./fields/Heading";
 import { FormSidebar, type SidebarSection, type SidebarMetadataEntry } from "./FormSidebar";
-import { ArrowLeftIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useEffect, useMemo, useState } from "react";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { Button, Input, formCommonColors } from "@multiplatform.one/forms";
-import { Text, XStack, YStack } from "tamagui";
+import { Text as TamaguiText, XStack, YStack } from "tamagui";
 import { hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
@@ -37,7 +38,12 @@ import {
   resolveDocAction,
   resolveDocIndicator,
 } from "./formEngine/docLifecycle";
-import { FrappeFormActions, FrappeFormActionsBar, FrappeFormIndicator } from "./FrappeFormActions";
+import {
+  FrappeFormActions,
+  FrappeFormActionsBar,
+  FrappeFormHeaderActions,
+  FrappeFormIndicator,
+} from "./FrappeFormActions";
 import { connectionFields, connectionsFromMeta, type FrappeConnection } from "./frappeConnections";
 import { FrappeFormConnections } from "./FrappeFormConnections";
 import { FrappeNotConfigured } from "./FrappeNotConfigured";
@@ -185,6 +191,26 @@ export interface FrappeFormProps<TDoc extends { name: string; doctype: string }>
    * scrolls. Defaults to on for a routed page.
    */
   stickyActions?: boolean;
+  /**
+   * Renders the form as its own detail page (LC-29): back in the top bar's
+   * leading slot and the record's actions beside it on the same row
+   * (LC-145), the title directly under the bar with the state chip under
+   * it, and `aside` as the supporting pane.
+   */
+  page?: FrappeFormPage;
+}
+
+export interface FrappeFormPage {
+  back: {
+    /** Where back goes (the list's name), beside the caret. */
+    label: string;
+    onPress: () => void;
+    "aria-label"?: string;
+    testID?: string;
+  };
+  /** The page title. Defaults to the record's title field, else its name. */
+  title?: string;
+  aside?: React.ReactNode;
 }
 
 /**
@@ -466,6 +492,7 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
   notFoundFallback,
   errorFallback,
   routePage,
+  page,
 }: FrappeFormBodyProps<TDoc> & { form: FrappeFormController<TDoc> }) {
   const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation();
@@ -625,10 +652,26 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
   const titleValue = titleField ? (localDoc as Record<string, unknown>)[titleField] : undefined;
   const pageTitle = isCreate ? t("New {{doctype}}", { doctype }) : String(titleValue || name);
   const editing = Boolean(routePage) && !onEdit;
+  const pageChrome: FrappeFormPage | undefined =
+    page ??
+    (routePage && !editing
+      ? {
+          back: {
+            label: doctype,
+            onPress: routePage.onBack,
+            "aria-label": t("Back to {{doctype}} list", { doctype }),
+          },
+        }
+      : undefined);
   const frame = (
     content: React.ReactNode,
     aside?: React.ReactNode,
-    chrome?: { badge?: React.ReactNode; footer?: React.ReactNode },
+    chrome?: {
+      badge?: React.ReactNode;
+      footer?: React.ReactNode;
+      actions?: React.ReactNode;
+      status?: React.ReactNode;
+    },
   ) =>
     routePage && editing ? (
       <YStack flex={1} backgroundColor="$background" testID="frappe-form-route-editor">
@@ -681,24 +724,28 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
           </FrappeFormActionsBar>
         ) : null}
       </YStack>
-    ) : routePage ? (
-      // flexBasis auto: see DeskFormPage (react-native-web's min-height:0
-      // reset would cap the scroll page at viewport height).
+    ) : pageChrome ? (
+      // flexBasis auto: react-native-web's min-height:0 reset would cap the
+      // scroll page at viewport height and crush the form.
       <DetailPageLayout
         flexBasis="auto"
         toolbarLeading={
-          <Button
-            size="$3"
-            chromeless
-            icon={ArrowLeftIcon}
-            onPress={routePage.onBack}
-            aria-label={t("Back to {{doctype}} list", { doctype })}
-          >
-            {doctype}
-          </Button>
+          <PageBackButton
+            label={pageChrome.back.label}
+            onPress={pageChrome.back.onPress}
+            aria-label={pageChrome.back["aria-label"]}
+            testID={pageChrome.back.testID}
+          />
         }
-        header={<PageHeader title={pageTitle} divider={false} />}
-        aside={aside}
+        toolbarTrailing={chrome?.actions}
+        header={
+          <PageHeader
+            title={pageChrome.title ?? pageTitle}
+            status={chrome?.status}
+            divider={false}
+          />
+        }
+        aside={pageChrome.aside ?? aside}
       >
         {content}
       </DetailPageLayout>
@@ -786,12 +833,12 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
     if (notFoundFallback !== undefined) return frame(notFoundFallback);
     return frame(
       <YStack {...knobProps.panelPadding} alignItems="center" {...knobProps.gap}>
-        <Text color={formCommonColors.error} {...knobProps.body}>
+        <TamaguiText color={formCommonColors.error} {...knobProps.body}>
           {t("{{doctype}} not found", { doctype })}
-        </Text>
-        <Text color={formCommonColors.muted} {...knobProps.body}>
+        </TamaguiText>
+        <TamaguiText color={formCommonColors.muted} {...knobProps.body}>
           {t("Document {{name}} does not exist or could not be loaded.", { name })}
-        </Text>
+        </TamaguiText>
       </YStack>,
     );
   }
@@ -926,7 +973,7 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
           backgroundColor="$red3"
           testID="frappe-form-deleted-banner"
         >
-          <Text color={formCommonColors.error} {...knobProps.body}>
+          <TamaguiText color={formCommonColors.error} {...knobProps.body}>
             {hasUnsavedChanges
               ? t(
                   "This {{doctype}} was deleted on the server. Fields are read-only and your unsaved edits can no longer be saved.",
@@ -935,7 +982,7 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
               : t("This {{doctype}} was deleted on the server. Fields are read-only.", {
                   doctype,
                 })}
-          </Text>
+          </TamaguiText>
         </XStack>
       )}
 
@@ -948,12 +995,12 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
           backgroundColor="$orange3"
           testID="frappe-form-conflict-banner"
         >
-          <Text color="$orange11" {...knobProps.body}>
+          <TamaguiText color="$orange11" {...knobProps.body}>
             {t(
               "Changed elsewhere while you were editing: {{fields}}. Your edits are kept — saving will overwrite the newer server values.",
               { fields: conflictLabels },
             )}
-          </Text>
+          </TamaguiText>
         </XStack>
       )}
 
@@ -999,20 +1046,21 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
           ) : (
             // Metadata unavailable (should be covered by metaError branch above)
             <YStack {...knobProps.panelPadding} alignItems="center">
-              <Text color={formCommonColors.muted} {...knobProps.body}>
+              <TamaguiText color={formCommonColors.muted} {...knobProps.body}>
                 {t("Form schema unavailable")}
-              </Text>
+              </TamaguiText>
             </YStack>
           )}
 
           {errors.general && (
-            <Text color={formCommonColors.error} {...knobProps.body} role="alert">
+            <TamaguiText color={formCommonColors.error} {...knobProps.body} role="alert">
               {errors.general}
-            </Text>
+            </TamaguiText>
           )}
 
-          {/* A routed editor carries its actions in the page footer instead. */}
-          {toolbarShown && !editing && (
+          {/* A routed editor carries its actions in the page footer, a
+              detail page in its top bar. */}
+          {toolbarShown && !editing && !pageChrome && (
             <FrappeFormActionsBar sticky={stickyActions}>
               <FrappeFormActions
                 indicator={indicator}
@@ -1040,12 +1088,11 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
       )}
     </YStack>,
     routePage && !editing ? sidebar : undefined,
-    editing
+    pageChrome && !editing
       ? {
-          badge: indicator ? <FrappeFormIndicator indicator={indicator} /> : null,
-          footer: toolbarShown ? (
-            <FrappeFormActions
-              placement="footer"
+          status: indicator ? <FrappeFormIndicator indicator={indicator} /> : undefined,
+          actions: toolbarShown ? (
+            <FrappeFormHeaderActions
               action={docAction}
               busy={isSubmitting}
               disabled={effectiveDisabled}
@@ -1055,11 +1102,32 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
               onAmend={showAmend ? handleAmend : undefined}
               amendedAs={amendedAs}
               onDelete={showDelete ? handleDelete : undefined}
+              onEdit={showEdit ? onEdit : undefined}
               onClose={showClose ? handleCancel : undefined}
               closeDisabled={disabled}
             />
           ) : null,
         }
-      : undefined,
+      : editing
+        ? {
+            badge: indicator ? <FrappeFormIndicator indicator={indicator} /> : null,
+            footer: toolbarShown ? (
+              <FrappeFormActions
+                placement="footer"
+                action={docAction}
+                busy={isSubmitting}
+                disabled={effectiveDisabled}
+                onSave={handleSave}
+                onSubmit={handleSubmitDocument}
+                onCancelDocument={handleCancelDocument}
+                onAmend={showAmend ? handleAmend : undefined}
+                amendedAs={amendedAs}
+                onDelete={showDelete ? handleDelete : undefined}
+                onClose={showClose ? handleCancel : undefined}
+                closeDisabled={disabled}
+              />
+            ) : null,
+          }
+        : undefined,
   );
 }