@multiplatform.one/frappe-ui 7.11.0 → 7.16.0

package/dist/esm/FrappeForm.mjs

@@ -1,58 +1,67 @@
-import { useFrappeCollection, useFrappeDoctypeEvents, useLiveQuery, useDocTypeMeta } from "@multiplatform.one/frappe";
-import { AsyncSkeleton } from "@multiplatform.one/components";
+import { getFrappeSyncModule, useFrappeCollection, useFrappeDoctypeEvents, useLiveQuery, useDocTypeMeta } from "@multiplatform.one/frappe";
+import { AsyncBoundary, AsyncSkeleton, DetailPageLayout, PageHeader, Tabs } from "@multiplatform.one/components";
 import { SchemaForm } from "./schemaForm/index.mjs";
 import { FormSidebar } from "./FormSidebar.mjs";
 import { eq } from "@tanstack/db";
-import { FloppyDiskIcon, TrashIcon, XIcon } from "@phosphor-icons/react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { ArrowLeftIcon, FloppyDiskIcon, PencilSimpleIcon, TrashIcon, XIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, formCommonColors } from "@multiplatform.one/forms";
+import { Button, Input, formCommonColors } from "@multiplatform.one/forms";
 import { Text, XStack, YStack } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider.mjs";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator.mjs";
 import { Timeline } from "./components/timeline.mjs";
 import { dialog } from "@multiplatform.one/desktop";
-import { jsx, jsxs } from "react/jsx-runtime";
-const LAYOUT_FIELDTYPES = /* @__PURE__ */new Set(["Section Break", "Column Break", "Tab Break"]);
+import { applyFetchedValues, buildFetchMap } from "./formEngine/fetchFrom.mjs";
+import { buildPermLevelMatrix } from "./formEngine/fieldPermissions.mjs";
+import { createHttpClient, validateLink } from "./formEngine/formActions.mjs";
+import { buildFormTabs, isPromptNamed } from "./formEngine/formLayout.mjs";
+import { useSessionRoles } from "./formEngine/useSessionRoles.mjs";
+import { connectionFields, connectionsFromMeta } from "./frappeConnections.mjs";
+import { FrappeFormConnections } from "./FrappeFormConnections.mjs";
+import { FrappeRowsReader } from "./FrappeRowsReader.mjs";
+import { frappeRouteHref, frappeRouteTarget, useFrappeRouter } from "./frappeNavigation.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
 function isEmptyFieldValue(value) {
   if (value === void 0 || value === null) return true;
   if (typeof value === "string" && value.trim() === "") return true;
   if (Array.isArray(value) && value.length === 0) return true;
   return false;
 }
-function mapFieldToGenericSchema(field) {
-  return {
-    type: field.fieldtype,
-    name: field.fieldname,
-    label: field.label,
-    options: field.options,
-    required: !!field.reqd,
-    hidden: !!field.hidden,
-    readOnly: !!field.read_only,
-    precision: field.precision,
-    depends_on: field.depends_on,
-    // Pass through additional Frappe-specific metadata
-    fieldtype: field.fieldtype,
-    fieldname: field.fieldname,
-    in_list_view: field.in_list_view,
-    in_standard_filter: field.in_standard_filter
-  };
+function sectionsToLayoutFields(sections) {
+  const fields = [];
+  sections.forEach((section, sectionIndex) => {
+    fields.push({
+      fieldname: `__section_${sectionIndex}`,
+      fieldtype: section.tab ? "Tab Break" : "Section Break",
+      label: section.label,
+      collapsible: section.collapsible ? 1 : 0
+    });
+    section.columns.forEach((column, columnIndex) => {
+      if (columnIndex > 0) {
+        fields.push({
+          fieldname: `__column_${sectionIndex}_${columnIndex}`,
+          fieldtype: "Column Break"
+        });
+      }
+      fields.push(...column.fields);
+    });
+  });
+  return fields;
 }
-function mapMetaToFormSchema(meta, sectionOverrides) {
-  const sections = sectionOverrides ?? meta.sections;
-  const genericSections = sections.map(section => ({
-    label: section.label,
-    collapsible: section.collapsible,
-    columns: section.columns.map(col => ({
-      fields: col.fields.map(mapFieldToGenericSchema)
-    }))
+const documentBookkeeping = /* @__PURE__ */new Set(["name", "owner", "creation", "modified", "modified_by", "docstatus", "idx", "doctype", "_user_tags", "_comments", "_assign", "_liked_by", "_seen"]);
+function fieldsFromDocument(doc) {
+  return Object.entries(doc).filter(([key, value]) => !key.startsWith("$") && !documentBookkeeping.has(key) && (value === null || typeof value === "string" || typeof value === "number")).map(([key, value]) => ({
+    name: key,
+    label: key.replace(/_/g, " ").replace(/(^|\s)\S/g, c => c.toUpperCase()),
+    type: typeof value === "number" ? Number.isInteger(value) ? "Int" : "Float" : "Data",
+    readOnly: true
   }));
-  const allFields = meta.fields.map(mapFieldToGenericSchema);
-  return {
-    sections: genericSections,
-    fields: allFields
-  };
+}
+function hasRestrictedPermLevel(meta) {
+  return !!meta?.fields.some(field => Number(field.permlevel ?? 0) > 0);
 }
 function resolveFileUrl(value, baseURL) {
   if (!value || typeof value !== "string") return void 0;
@@ -118,7 +127,72 @@ function mapDocToSidebarMetadata(doc, t) {
   }
   return metadata;
 }
-function FrappeForm({
+function FrappeForm(props) {
+  const {
+    route,
+    ...formProps
+  } = props;
+  if (route === void 0) return /* @__PURE__ */jsx(FrappeFormBody, {
+    ...formProps
+  });
+  return /* @__PURE__ */jsx(FrappeFormRoute, {
+    ...formProps,
+    route
+  });
+}
+function FrappeFormRoute({
+  route,
+  name: nameProp,
+  onSave,
+  onCancel,
+  onDelete,
+  onEdit,
+  ...props
+}) {
+  const router = useFrappeRouter();
+  const fromPath = router ? frappeRouteTarget(route, router.pathname) : void 0;
+  const target = nameProp ? {
+    mode: fromPath?.mode === "view" ? "view" : "edit",
+    name: nameProp
+  } : fromPath?.mode === "view" || fromPath?.mode === "edit" ? fromPath : {
+    mode: "create"
+  };
+  const go = next => router?.navigate(frappeRouteHref(route, next));
+  const name = target.mode === "view" || target.mode === "edit" ? target.name : void 0;
+  return /* @__PURE__ */createElement(FrappeFormBody, {
+    ...props,
+    key: `${target.mode}:${name ?? ""}`,
+    name,
+    routePage: {
+      onBack: () => go({
+        mode: "list"
+      })
+    },
+    onEdit: target.mode === "view" ? onEdit ?? (() => go({
+      mode: "edit",
+      name: target.name
+    })) : void 0,
+    onSave: onSave ?? (doc => {
+      const saved = doc.name ?? name;
+      go(saved ? {
+        mode: "view",
+        name: saved
+      } : {
+        mode: "list"
+      });
+    }),
+    onCancel: onCancel ?? (() => go(name ? {
+      mode: "view",
+      name
+    } : {
+      mode: "list"
+    })),
+    onDelete: onDelete ?? (() => go({
+      mode: "list"
+    }))
+  });
+}
+function FrappeFormBody({
   baseURL,
   auth,
   syncOptions,
@@ -131,14 +205,23 @@ function FrappeForm({
   readOnlyFields,
   sections,
   order,
+  roles,
   onSave,
   onCancel,
   onDelete,
+  onEdit,
   showToolbar = true,
   showSidebar = true,
   showTimeline = true,
   disabled = false,
-  sectionHeadingLevel
+  sectionHeadingLevel,
+  connections,
+  showConnections = true,
+  initialDoc,
+  loadingFallback,
+  notFoundFallback,
+  errorFallback,
+  routePage
 }) {
   const config = useFrappeConfig();
   const {
@@ -147,12 +230,17 @@ function FrappeForm({
   const {
     t
   } = useTranslation();
-  const [localDoc, setLocalDoc] = useState({});
-  const [baselineDoc, setBaselineDoc] = useState(void 0);
+  const seedDoc = name && initialDoc && initialDoc.name === name ? initialDoc : void 0;
+  const seedRef = useRef(seedDoc);
+  seedRef.current = seedDoc;
+  const [localDoc, setLocalDoc] = useState(() => seedDoc ?? {});
+  const [baselineDoc, setBaselineDoc] = useState(() => seedDoc);
+  const [docError, setDocError] = useState(null);
   const [conflictFields, setConflictFields] = useState([]);
   const [wasDeleted, setWasDeleted] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errors, setErrors] = useState({});
+  const [activeTab, setActiveTab] = useState(void 0);
   const everLoadedRef = useRef(false);
   const localDocRef = useRef(localDoc);
   localDocRef.current = localDoc;
@@ -179,16 +267,59 @@ function FrappeForm({
     isLoading: isMetaLoading,
     error: metaError
   } = useDocTypeMeta(frappeConfig, doctype);
-  const formSchema = useMemo(() => {
+  const sessionRoles = useSessionRoles(!roles && hasRestrictedPermLevel(meta) ? frappeConfig : void 0);
+  const effectiveRoles = roles ?? sessionRoles;
+  const permLevels = useMemo(() => buildPermLevelMatrix(meta?.permissions, effectiveRoles), [meta?.permissions, effectiveRoles]);
+  const isCreate = !name;
+  const docstatus = Number(baselineDoc?.docstatus ?? 0);
+  const layoutFields = useMemo(() => {
     if (!meta) return void 0;
-    return mapMetaToFormSchema(meta, sections);
+    return sections ? sectionsToLayoutFields(sections) : meta.fields;
   }, [meta, sections]);
-  const hideFieldSet = useMemo(() => new Set(hideFields ?? []), [hideFields]);
+  const formTabs = useMemo(() => {
+    if (!layoutFields) return void 0;
+    return buildFormTabs({
+      fields: layoutFields,
+      doc: {
+        ...localDoc,
+        __islocal: isCreate ? 1 : 0
+      },
+      docstatus,
+      formReadOnly: !!meta?.read_only,
+      isCreate,
+      detailsLabel: t("Details"),
+      permLevels,
+      hiddenFields: hideFields
+    });
+  }, [layoutFields, localDoc, docstatus, meta?.read_only, isCreate, permLevels, hideFields, t]);
+  const readsWithoutMeta = !children && !meta && Boolean(metaError) && Boolean(name);
+  const recordTabs = useMemo(() => {
+    if (!readsWithoutMeta || !baselineDoc) return void 0;
+    const recordFields = fieldsFromDocument(baselineDoc);
+    return [{
+      key: "__details",
+      label: t("Details"),
+      schema: {
+        sections: [{
+          columns: [{
+            fields: recordFields
+          }]
+        }],
+        fields: recordFields
+      }
+    }];
+  }, [readsWithoutMeta, baselineDoc, t]);
+  const promptNamed = isCreate && !!meta && isPromptNamed(meta.autoname, meta.naming_rule);
+  const fetchMap = useMemo(() => meta ? buildFetchMap(meta.fields) : void 0, [meta]);
+  const handleDocSyncError = useCallback(err => {
+    setDocError(err instanceof Error ? err : new Error(String(err)));
+  }, []);
   const docCollection = useFrappeCollection(name ? frappeConfig : void 0, doctype, {
     fields,
     filters: name ? {
       name
-    } : void 0
+    } : void 0,
+    onSyncError: handleDocSyncError
   });
   const {
     data: rawDocData,
@@ -249,8 +380,41 @@ function FrappeForm({
     everLoadedRef.current = false;
     setWasDeleted(false);
     setConflictFields([]);
-    setBaselineDoc(void 0);
+    setDocError(null);
+    const seed = seedRef.current;
+    setBaselineDoc(seed);
+    if (seed) setLocalDoc(seed);
   }, [doctype, name]);
+  const effectiveConnections = useMemo(() => connections ?? connectionsFromMeta(meta), [connections, meta]);
+  const readsConnections = Boolean(children) && Boolean(name) && effectiveConnections.length > 0;
+  const [connectionSnapshots, setConnectionSnapshots] = useState({});
+  useEffect(() => {
+    setConnectionSnapshots({});
+  }, [doctype, name]);
+  const connectionReads = useMemo(() => readsConnections && name ? effectiveConnections.map(link => ({
+    link,
+    options: {
+      fields: connectionFields(link),
+      filters: [[link.fieldname, "=", name]],
+      limit: link.limit ?? 0
+    },
+    onChange: snapshot => setConnectionSnapshots(prev => ({
+      ...prev,
+      [link.doctype]: snapshot
+    }))
+  })) : [], [readsConnections, effectiveConnections, name]);
+  const connectionRows = useMemo(() => {
+    const rows = {};
+    for (const {
+      link
+    } of connectionReads) {
+      rows[link.doctype] = connectionSnapshots[link.doctype]?.rows ?? [];
+    }
+    return rows;
+  }, [connectionReads, connectionSnapshots]);
+  const connectionsLoading = connectionReads.some(({
+    link
+  }) => connectionSnapshots[link.doctype]?.isLoading ?? true);
   useFrappeDoctypeEvents(name ? frappeConfig : void 0, doctype, event => {
     if (event.type !== "doc_deleted") return;
     const payload = event.payload;
@@ -303,6 +467,32 @@ function FrappeForm({
     return dirty;
   }, [localDoc, baselineDoc]);
   const hasUnsavedChanges = dirtyFieldNames.length > 0;
+  const runFetchFrom = (field, value) => {
+    const rules = fetchMap?.get(field);
+    if (!rules || rules.length === 0) return;
+    const applyPatch = fetched2 => {
+      setLocalDoc(prev => {
+        const current = prev;
+        if (current[field] !== value) return prev;
+        const patch = applyFetchedValues(rules, fetched2, current);
+        return Object.keys(patch).length > 0 ? {
+          ...current,
+          ...patch
+        } : prev;
+      });
+    };
+    if (isEmptyFieldValue(value)) {
+      applyPatch({});
+      return;
+    }
+    const linkField = meta?.fields.find(metaField => metaField.fieldname === field);
+    const targetDoctype = typeof linkField?.options === "string" ? linkField.options : "";
+    if (!targetDoctype) return;
+    const sources = Array.from(new Set(rules.map(rule => rule.source)));
+    const fixtures = frappeConfig.fixtures;
+    const fetched = fixtures ? fixtures.getDoc(targetDoctype, String(value), sources).then(doc => doc ?? {}) : validateLink(createHttpClient(frappeConfig), targetDoctype, String(value), sources);
+    fetched.then(applyPatch).catch(() => void 0);
+  };
   const setValue = (field, value) => {
     setLocalDoc(prev => ({
       ...prev,
@@ -315,19 +505,23 @@ function FrappeForm({
       delete newErrors[String(field)];
       return newErrors;
     });
+    runFetchFrom(String(field), value);
   };
   const validateRequiredFields = () => {
-    if (!meta) return {};
+    if (!formTabs) return {};
     const validationErrors = {};
     const doc = localDoc;
-    for (const field of meta.fields) {
-      if (!field.reqd) continue;
-      if (field.hidden || LAYOUT_FIELDTYPES.has(field.fieldtype)) continue;
-      if (hideFieldSet.has(field.fieldname)) continue;
-      if (isEmptyFieldValue(doc[field.fieldname])) {
-        validationErrors[field.fieldname] = t("{{label}} is required", {
-          label: field.label || field.fieldname
-        });
+    if (promptNamed && isEmptyFieldValue(doc.name)) {
+      validationErrors.name = t("Name is required");
+    }
+    for (const tab of formTabs) {
+      for (const field of tab.schema.fields) {
+        if (!field.required) continue;
+        if (isEmptyFieldValue(doc[field.name])) {
+          validationErrors[field.name] = t("{{label}} is required", {
+            label: field.label || field.name
+          });
+        }
       }
     }
     return validationErrors;
@@ -357,13 +551,20 @@ function FrappeForm({
         setConflictFields([]);
       } else {
         if (!collection) return;
+        const temporaryName = localDoc.name ?? `new-${Date.now()}`;
         const docToInsert = {
           ...localDoc,
           doctype,
-          name: localDoc.name ?? `new-${Date.now()}`
+          name: temporaryName
         };
         const tx = collection.insert(docToInsert);
         await tx.isPersisted.promise;
+        const createdName = getFrappeSyncModule(frappeConfig)?.createdName(temporaryName) ?? temporaryName;
+        onSave?.({
+          ...localDoc,
+          name: createdName
+        });
+        return;
       }
       onSave?.(localDoc);
     } catch (err) {
@@ -426,17 +627,45 @@ function FrappeForm({
       setIsSubmitting(false);
     }
   };
+  const titleField = meta?.title_field;
+  const titleValue = titleField ? localDoc[titleField] : void 0;
+  const pageTitle = isCreate ? t("New {{doctype}}", {
+    doctype
+  }) : String(titleValue || name);
+  const frame = (content, aside) => routePage ?
+  // flexBasis auto: see DeskFormPage (react-native-web's min-height:0
+  // reset would cap the scroll page at viewport height).
+  /* @__PURE__ */
+  jsx(DetailPageLayout, {
+    flexBasis: "auto",
+    toolbarLeading: /* @__PURE__ */jsx(Button, {
+      size: "$3",
+      chromeless: true,
+      icon: ArrowLeftIcon,
+      onPress: routePage.onBack,
+      "aria-label": t("Back to {{doctype}} list", {
+        doctype
+      }),
+      children: doctype
+    }),
+    header: /* @__PURE__ */jsx(PageHeader, {
+      title: pageTitle,
+      divider: false
+    }),
+    aside,
+    children: content
+  }) : content;
   if (!children && isMetaLoading && !meta) {
-    return /* @__PURE__ */jsx(YStack, {
+    return frame(/* @__PURE__ */jsx(YStack, {
       ...knobProps.panelPadding,
       testID: "frappe-form-skeleton",
       children: /* @__PURE__ */jsx(AsyncSkeleton, {
         layout: "generic"
       })
-    });
+    }));
   }
-  if (!children && metaError && !meta) {
-    return /* @__PURE__ */jsxs(YStack, {
+  if (!children && metaError && !meta && !name) {
+    return frame(/* @__PURE__ */jsxs(YStack, {
       ...knobProps.panelPadding,
       alignItems: "center",
       ...knobProps.gap,
@@ -451,19 +680,33 @@ function FrappeForm({
         ...knobProps.body,
         children: metaError.message
       })]
-    });
+    }));
   }
-  if (name && liveDoc?.isLoading && !wasDeleted) {
-    return /* @__PURE__ */jsx(YStack, {
+  const isDocReading = Boolean(name) && (!docCollection || Boolean(liveDoc?.isLoading));
+  const showsSeed = Boolean(seedDoc) && isDocReading;
+  if (name && docError && !liveDoc?.data && !wasDeleted) {
+    if (errorFallback !== void 0) return frame(errorFallback);
+    return frame(/* @__PURE__ */jsx(AsyncBoundary, {
+      ...knobProps.panelPadding,
+      error: docError,
+      errorTitle: t("Failed to load {{doctype}}", {
+        doctype
+      })
+    }));
+  }
+  if (name && isDocReading && !showsSeed && !wasDeleted) {
+    if (loadingFallback !== void 0) return frame(loadingFallback);
+    return frame(/* @__PURE__ */jsx(YStack, {
       ...knobProps.panelPadding,
       testID: "frappe-form-skeleton",
       children: /* @__PURE__ */jsx(AsyncSkeleton, {
         layout: "generic"
       })
-    });
+    }));
   }
-  if (name && !liveDoc?.isLoading && !liveDoc?.data && !wasDeleted) {
-    return /* @__PURE__ */jsxs(YStack, {
+  if (name && !isDocReading && !liveDoc?.data && !wasDeleted) {
+    if (notFoundFallback !== void 0) return frame(notFoundFallback);
+    return frame(/* @__PURE__ */jsxs(YStack, {
       ...knobProps.panelPadding,
       alignItems: "center",
       ...knobProps.gap,
@@ -480,132 +723,179 @@ function FrappeForm({
           name
         })
       })]
-    });
+    }));
   }
   const effectiveDisabled = disabled || wasDeleted;
+  const readOnlyView = Boolean(onEdit) || readsWithoutMeta;
+  const fieldsDisabled = effectiveDisabled || readOnlyView;
+  const shownTabs = formTabs ?? recordTabs;
   const imageFieldName = meta?.image_field;
   const sidebarImageUrl = imageFieldName ? resolveFileUrl(localDoc[imageFieldName], finalBaseURL) : void 0;
   const conflictLabels = conflictFields.map(fieldname => {
     const field = meta?.fields.find(metaField => metaField.fieldname === fieldname);
     return field?.label || fieldname;
   }).join(", ");
-  return (
-    // flexBasis auto (not the flex:1 shorthand's 0%): inside scroll-flow page
-    // scaffolds (LC-29 templates) the parent is auto-height, and a 0% basis
-    // collapses this stack to zero height on web — content then paints over
-    // whatever follows. Bounded parents still fill (grow 1) exactly as before.
-    /* @__PURE__ */
-    jsxs(YStack, {
-      ...knobProps.gapLg,
+  const formTabItems = (shownTabs ?? []).map(tab => ({
+    value: tab.key,
+    label: tab.label,
+    content: /* @__PURE__ */jsx(SchemaForm, {
+      schema: tab.schema,
+      doc: localDoc,
+      setValue: (field, value) => setValue(field, value),
+      errors,
+      disabled: fieldsDisabled,
+      overrides,
+      readOnlyFields,
+      sectionHeadingLevel,
+      order
+    })
+  }));
+  const tabItems = showConnections && name && effectiveConnections.length > 0 ? [...formTabItems, {
+    value: "__connections",
+    label: t("Connections"),
+    content: /* @__PURE__ */jsx(FrappeFormConnections, {
+      connection: frappeConfig,
+      connections: effectiveConnections,
+      name
+    })
+  }] : formTabItems;
+  const effectiveTab = activeTab && tabItems.some(tab => tab.value === activeTab) ? activeTab : tabItems[0]?.value;
+  const localName = localDoc.name;
+  const sidebar = showSidebar && name && meta ? /* @__PURE__ */jsx(FormSidebar, {
+    imageUrl: sidebarImageUrl,
+    sections: buildSidebarSections(localDoc, shareRows, t, assignmentRows),
+    metadata: mapDocToSidebarMetadata(localDoc, t)
+  }) : void 0;
+  return frame(
+  // flexBasis auto (not the flex:1 shorthand's 0%): inside scroll-flow page
+  // scaffolds (LC-29 templates) the parent is auto-height, and a 0% basis
+  // collapses this stack to zero height on web — content then paints over
+  // whatever follows. Bounded parents still fill (grow 1) exactly as before.
+  /* @__PURE__ */
+  jsxs(YStack, {
+    ...knobProps.gapLg,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    children: [/* @__PURE__ */jsx(FrappeReconnectIndicator, {
+      config: frappeConfig
+    }), connectionReads.map(read => /* @__PURE__ */jsx(FrappeRowsReader, {
+      connection: frappeConfig,
+      doctype: read.link.doctype,
+      options: read.options,
+      onChange: read.onChange
+    }, read.link.doctype)), wasDeleted && /* @__PURE__ */jsx(XStack, {
+      role: "alert",
+      alignItems: "center",
+      ...knobProps.containerRadius,
+      ...knobProps.panelPadding,
+      backgroundColor: "$red3",
+      testID: "frappe-form-deleted-banner",
+      children: /* @__PURE__ */jsx(Text, {
+        color: formCommonColors.error,
+        ...knobProps.body,
+        children: hasUnsavedChanges ? t("This {{doctype}} was deleted on the server. Fields are read-only and your unsaved edits can no longer be saved.", {
+          doctype
+        }) : t("This {{doctype}} was deleted on the server. Fields are read-only.", {
+          doctype
+        })
+      })
+    }), !wasDeleted && conflictFields.length > 0 && /* @__PURE__ */jsx(XStack, {
+      role: "status",
+      alignItems: "center",
+      ...knobProps.containerRadius,
+      ...knobProps.panelPadding,
+      backgroundColor: "$orange3",
+      testID: "frappe-form-conflict-banner",
+      children: /* @__PURE__ */jsx(Text, {
+        color: "$orange11",
+        ...knobProps.body,
+        children: t("Changed elsewhere while you were editing: {{fields}}. Your edits are kept \u2014 saving will overwrite the newer server values.", {
+          fields: conflictLabels
+        })
+      })
+    }), /* @__PURE__ */jsxs(XStack, {
       flexGrow: 1,
       flexShrink: 1,
       flexBasis: "auto",
-      children: [/* @__PURE__ */jsx(FrappeReconnectIndicator, {
-        config: frappeConfig
-      }), wasDeleted && /* @__PURE__ */jsx(XStack, {
-        role: "alert",
-        alignItems: "center",
-        ...knobProps.containerRadius,
-        ...knobProps.panelPadding,
-        backgroundColor: "$red3",
-        testID: "frappe-form-deleted-banner",
-        children: /* @__PURE__ */jsx(Text, {
-          color: formCommonColors.error,
-          ...knobProps.body,
-          children: hasUnsavedChanges ? t("This {{doctype}} was deleted on the server. Fields are read-only and your unsaved edits can no longer be saved.", {
-            doctype
-          }) : t("This {{doctype}} was deleted on the server. Fields are read-only.", {
-            doctype
-          })
-        })
-      }), !wasDeleted && conflictFields.length > 0 && /* @__PURE__ */jsx(XStack, {
-        role: "status",
-        alignItems: "center",
-        ...knobProps.containerRadius,
-        ...knobProps.panelPadding,
-        backgroundColor: "$orange3",
-        testID: "frappe-form-conflict-banner",
-        children: /* @__PURE__ */jsx(Text, {
-          color: "$orange11",
-          ...knobProps.body,
-          children: t("Changed elsewhere while you were editing: {{fields}}. Your edits are kept \u2014 saving will overwrite the newer server values.", {
-            fields: conflictLabels
-          })
-        })
-      }), /* @__PURE__ */jsxs(XStack, {
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: "auto",
+      ...knobProps.gapLg,
+      children: [routePage ? null : sidebar, /* @__PURE__ */jsxs(YStack, {
+        flex: 1,
         ...knobProps.gapLg,
-        children: [showSidebar && name && meta && /* @__PURE__ */jsx(FormSidebar, {
-          imageUrl: sidebarImageUrl,
-          sections: buildSidebarSections(localDoc, shareRows, t, assignmentRows),
-          metadata: mapDocToSidebarMetadata(localDoc, t)
-        }), /* @__PURE__ */jsxs(YStack, {
-          flex: 1,
+        children: [children ?
+        // Render-prop mode
+        children({
+          doc: localDoc,
+          setValue,
+          isSubmitting,
+          errors,
+          meta,
+          disabled: fieldsDisabled,
+          connections: connectionRows,
+          connectionsLoading
+        }) : shownTabs ? /* @__PURE__ */jsxs(YStack, {
           ...knobProps.gapLg,
-          children: [children ?
-          // Render-prop mode
-          children({
-            doc: localDoc,
-            setValue,
-            isSubmitting,
-            errors,
-            meta,
+          children: [promptNamed && /* @__PURE__ */jsx(Input, {
+            label: t("Name"),
+            value: typeof localName === "string" ? localName : "",
+            onChangeText: value => setValue("name", value),
+            placeholder: t("New document name"),
+            error: errors.name,
             disabled: effectiveDisabled
-          }) : formSchema ?
-          // Schema-driven mode using generic SchemaForm from @multiplatform.one/forms
-          /* @__PURE__ */
-          jsx(SchemaForm, {
-            schema: formSchema,
-            doc: localDoc,
-            setValue: (field, value) => setValue(field, value),
-            errors,
-            disabled: effectiveDisabled,
-            overrides,
-            hideFields,
-            readOnlyFields,
-            sectionHeadingLevel,
-            order
-          }) :
-          // Metadata unavailable (should be covered by metaError branch above)
-          /* @__PURE__ */
-          jsx(YStack, {
-            ...knobProps.panelPadding,
-            alignItems: "center",
-            children: /* @__PURE__ */jsx(Text, {
-              color: formCommonColors.muted,
-              ...knobProps.body,
-              children: t("Form schema unavailable")
-            })
-          }), errors.general && /* @__PURE__ */jsx(Text, {
-            color: formCommonColors.error,
+          }), tabItems.length > 1 ? /* @__PURE__ */jsx(Tabs, {
+            items: tabItems,
+            value: effectiveTab,
+            onChange: setActiveTab,
+            lazyMount: true
+          }) : tabItems[0]?.content ?? null]
+        }) :
+        // Metadata unavailable (should be covered by metaError branch above)
+        /* @__PURE__ */
+        jsx(YStack, {
+          ...knobProps.panelPadding,
+          alignItems: "center",
+          children: /* @__PURE__ */jsx(Text, {
+            color: formCommonColors.muted,
             ...knobProps.body,
-            children: errors.general
-          }), showToolbar && /* @__PURE__ */jsxs(XStack, {
-            ...knobProps.gap,
-            justifyContent: "flex-end",
-            alignItems: "center",
-            paddingTop: "$3",
-            children: [hasUnsavedChanges && /* @__PURE__ */jsx(Text, {
-              color: "$orange11",
-              marginInlineEnd: "auto",
-              ...knobProps.body,
-              children: t("Not Saved")
-            }), name && onDelete && !wasDeleted && /* @__PURE__ */jsx(Button, {
-              outlined: true,
-              error: true,
-              icon: TrashIcon,
-              loading: isSubmitting,
-              disabled: effectiveDisabled,
-              disabledReason: t("Form is read-only"),
-              disabledReasonPlacement: "inline",
-              onPress: handleDelete,
-              children: t("Delete")
-            }), onCancel && /* @__PURE__ */jsx(Button, {
+            children: t("Form schema unavailable")
+          })
+        }), errors.general && /* @__PURE__ */jsx(Text, {
+          color: formCommonColors.error,
+          ...knobProps.body,
+          children: errors.general
+        }), showToolbar && !readsWithoutMeta && /* @__PURE__ */jsxs(XStack, {
+          ...knobProps.gap,
+          justifyContent: "flex-end",
+          alignItems: "center",
+          paddingTop: "$3",
+          children: [hasUnsavedChanges && !onEdit && /* @__PURE__ */jsx(Text, {
+            color: "$orange11",
+            marginInlineEnd: "auto",
+            ...knobProps.body,
+            children: t("Not Saved")
+          }), name && onDelete && !wasDeleted && /* @__PURE__ */jsx(Button, {
+            outlined: true,
+            error: true,
+            icon: TrashIcon,
+            loading: isSubmitting,
+            disabled: effectiveDisabled,
+            disabledReason: t("Form is read-only"),
+            disabledReasonPlacement: "inline",
+            onPress: handleDelete,
+            children: t("Delete")
+          }), onEdit ? /* @__PURE__ */jsx(Button, {
+            accent: true,
+            icon: PencilSimpleIcon,
+            disabled: effectiveDisabled,
+            disabledReason: t("Form is read-only"),
+            disabledReasonPlacement: "inline",
+            onPress: onEdit,
+            children: t("Edit")
+          }) : /* @__PURE__ */jsxs(Fragment, {
+            children: [onCancel && /* @__PURE__ */jsx(Button, {
               outlined: true,
               icon: XIcon,
-              disabled: isSubmitting || disabled,
+              disabled,
               disabledReason: t("Form is read-only"),
               disabledReasonPlacement: "inline",
               onPress: handleCancel,
@@ -622,13 +912,13 @@ function FrappeForm({
             })]
           })]
         })]
-      }), showTimeline && name && /* @__PURE__ */jsx(Timeline, {
-        doctype,
-        docname: name,
-        label: t("Activity")
       })]
-    })
-  );
+    }), showTimeline && name && !readsWithoutMeta && /* @__PURE__ */jsx(Timeline, {
+      doctype,
+      docname: name,
+      label: t("Activity")
+    })]
+  }), routePage ? sidebar : void 0);
 }
 export { FrappeForm, buildSidebarSections, mapDocToSidebarMetadata, resolveFileUrl };
 //# sourceMappingURL=FrappeForm.mjs.map