@multiplatform.one/backoffice 6.4.2 → 6.6.0

package/dist/jsx/form/DocFormScreen.mjs

@@ -0,0 +1,718 @@
+import { AsyncSkeleton, Button, ConfirmDialog, EmptyState, ScrollView, Tabs, Text, XStack, YStack } from "@multiplatform.one/components";
+import { Input } from "@multiplatform.one/forms";
+import { SchemaForm, useFrappeConfig } from "@multiplatform.one/frappe-ui";
+import { useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import { ListBulletsIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { actionsForDoctype, useBackofficeCapabilities, useBackofficeConfig, useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider.mjs";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n/index.mjs";
+import { invalidateDocinfo, useDocinfo } from "../shared/useDocinfo.mjs";
+import { useRecentVisit } from "../shared/useRecentVisit.mjs";
+import { useDoctypeMeta } from "../shared/useDoctypeMeta.mjs";
+import { useUserRoles } from "../shared/useUserRoles.mjs";
+import { setCreatePrefill } from "./createPrefill.mjs";
+import { normalizeDocPermissions } from "./docinfo.mjs";
+import { buildPermLevelMatrix } from "./fieldPermissions.mjs";
+import { createHttpClient, renameDoc, sendEmail } from "./formActions.mjs";
+import { EmailDialog, RenameDialog } from "./FormDialogs.mjs";
+import { FormErrorBoundary, wrapFieldWithErrorBoundary } from "./FormErrorBoundary.mjs";
+import { buildCopyValues, buildFormTabs, isPromptNamed } from "./formLayout.mjs";
+import { FormConnections } from "./FormConnections.mjs";
+import { FormHeaderCluster } from "./FormHeaderCluster.mjs";
+import { FormSidebarPanel } from "./FormSidebarPanel.mjs";
+import { FormTimeline } from "./FormTimeline.mjs";
+import { FormToolbar, resolveIndicator } from "./FormToolbar.mjs";
+import { htmlToText } from "./timeline-utils.mjs";
+import { canOpenNewTab, openInNewTab, useBeforeUnloadGuard, useNavigationDirtyGuard, useSaveShortcut } from "./platformHooks.mjs";
+import { useFormEngine } from "./useFormEngine.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const CONNECTIONS_TAB = "__connections";
+function DocFormScreen({
+  doctype,
+  name,
+  readOnly,
+  hiddenSections,
+  hiddenFields,
+  defaults,
+  onSaved,
+  onDeleted,
+  actionOverrides
+}) {
+  const {
+    t
+  } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const capabilities = useBackofficeCapabilities();
+  const {
+    actions,
+    slots,
+    emitEvent
+  } = useBackofficeConfig();
+  const sizeClass = useLayoutSizeClass();
+  const config = useFrappeConfig();
+  const isCreate = name === "new";
+  const docName = isCreate ? void 0 : name;
+  useRecentVisit(isCreate || config?.fixtures ? void 0 : {
+    label: `${doctype}: ${name}`,
+    path: paths.form(doctype, name)
+  });
+  const defaultsKey = defaults ? JSON.stringify(defaults) : void 0;
+  useMemo(() => {
+    if (!isCreate || !defaultsKey) return;
+    const parsed = JSON.parse(defaultsKey);
+    if (Object.keys(parsed).length > 0) setCreatePrefill(doctype, parsed);
+  }, [doctype, defaultsKey, isCreate]);
+  useEffect(() => {
+    if (!isCreate) emitEvent({
+      type: "doc-opened",
+      doctype,
+      name
+    });
+  }, [isCreate, doctype, name, emitEvent]);
+  const connection = useMemo(() => config?.baseURL ? {
+    baseURL: config.baseURL,
+    socketPort: config.socketPort,
+    auth: config.auth,
+    syncOptions: config.syncOptions,
+    fixtures: config.fixtures
+  } : void 0, [config]);
+  const {
+    meta,
+    loading: isMetaLoading,
+    error: metaError,
+    reload: refetchMeta
+  } = useDoctypeMeta(doctype);
+  const engine = useFormEngine(connection, doctype, docName, meta, t);
+  useEffect(() => {
+    if (metaError && !meta) emitEvent({
+      type: "error",
+      error: metaError,
+      context: "form-meta"
+    });
+  }, [metaError, meta, emitEvent]);
+  const {
+    docinfo,
+    reload: reloadDocinfo
+  } = useDocinfo(doctype, name);
+  const refreshDocinfo = useCallback(() => {
+    if (docName) invalidateDocinfo(doctype, docName);
+    reloadDocinfo();
+  }, [doctype, docName, reloadDocinfo]);
+  const modifiedStamp = typeof engine.baseline?.modified === "string" ? engine.baseline.modified : void 0;
+  const stampRef = useRef(void 0);
+  useEffect(() => {
+    stampRef.current = void 0;
+  }, [doctype, name]);
+  useEffect(() => {
+    if (!docName || !modifiedStamp) return;
+    if (stampRef.current === modifiedStamp) return;
+    const isFirstLoad = stampRef.current === void 0;
+    stampRef.current = modifiedStamp;
+    if (!isFirstLoad) {
+      invalidateDocinfo(doctype, docName);
+      reloadDocinfo();
+    }
+  }, [modifiedStamp, docName, doctype, reloadDocinfo]);
+  const perms = useMemo(() => {
+    const docPerms = normalizeDocPermissions(docinfo?.permissions);
+    if (docPerms) {
+      return {
+        write: !!docPerms.write,
+        create: !!docPerms.create,
+        delete: !!docPerms.delete,
+        submit: !!docPerms.submit,
+        cancel: !!docPerms.cancel,
+        amend: !!docPerms.amend,
+        email: !!docPerms.email,
+        print: !!docPerms.print
+      };
+    }
+    const rules = meta?.permissions ?? [];
+    const anyRole = key => rules.some(rule => !rule.permlevel && !!rule[key]);
+    return {
+      write: rules.length === 0 || anyRole("write"),
+      create: rules.length === 0 || anyRole("create"),
+      delete: anyRole("delete"),
+      submit: anyRole("submit"),
+      cancel: anyRole("cancel"),
+      amend: anyRole("amend"),
+      email: rules.length === 0 || anyRole("email"),
+      print: rules.length === 0 || anyRole("print")
+    };
+  }, [docinfo?.permissions, meta?.permissions]);
+  const isSubmittable = !!meta?.is_submittable;
+  const formReadOnly = !!readOnly || !!meta?.read_only || engine.wasDeleted || !isCreate && !perms.write || isCreate && !perms.create;
+  const {
+    roles
+  } = useUserRoles();
+  const permLevels = useMemo(() => buildPermLevelMatrix(meta?.permissions, roles), [meta?.permissions, roles]);
+  const formTabs = useMemo(() => {
+    if (!meta) return [];
+    return buildFormTabs({
+      fields: meta.fields,
+      // depends_on evaluates against the doc plus desk's ambient context:
+      // __islocal (unsaved doc flag) and the session user behind
+      // `frappe.session.user` references.
+      doc: {
+        ...engine.doc,
+        __islocal: isCreate ? 1 : 0,
+        ...(engine.currentUser ? {
+          __session_user: engine.currentUser
+        } : {})
+      },
+      docstatus: engine.docstatus,
+      formReadOnly,
+      isCreate,
+      detailsLabel: t("detailsTab", "Details"),
+      permLevels,
+      hiddenFields,
+      hiddenSections
+    });
+  }, [meta, engine.doc, engine.currentUser, engine.docstatus, formReadOnly, isCreate, permLevels, hiddenFields, hiddenSections, t]);
+  const [activeTab, setActiveTab] = useState(void 0);
+  const showConnections = !isCreate && !!connection && (meta?.links?.some(link => !link.hidden) ?? false);
+  const [pendingNav, setPendingNav] = useState(void 0);
+  const navigate = useCallback(href => {
+    if (engine.isDirty) {
+      setPendingNav(href);
+      return;
+    }
+    navigator.navigate(href);
+  }, [engine.isDirty, navigator]);
+  useBeforeUnloadGuard(engine.isDirty);
+  const backGuard = useNavigationDirtyGuard(engine.isDirty);
+  const [confirmAction, setConfirmAction] = useState(void 0);
+  const [renameOpen, setRenameOpen] = useState(false);
+  const [emailOpen, setEmailOpen] = useState(false);
+  const [validationSummary, setValidationSummary] = useState(void 0);
+  const handleSave = useCallback(async () => {
+    const validationErrors = engine.validate();
+    const errorFields = Object.keys(validationErrors);
+    if (errorFields.length > 0) {
+      const owner = formTabs.find(tab => tab.schema.fields.some(field => errorFields.includes(field.name)));
+      if (owner) setActiveTab(owner.key);
+      setValidationSummary(t("validationSummary", "Cannot save \u2014 {{count}} required field(s) are missing.", {
+        count: errorFields.length
+      }));
+    } else {
+      setValidationSummary(void 0);
+    }
+    const savedName = await engine.save();
+    if (!savedName) return;
+    setValidationSummary(void 0);
+    invalidateDocinfo(doctype, savedName);
+    emitEvent({
+      type: "doc-saved",
+      doctype,
+      name: savedName,
+      isNew: isCreate
+    });
+    onSaved?.({
+      ...engine.doc,
+      name: savedName
+    });
+    if (isCreate) {
+      navigator.replace(paths.form(doctype, savedName));
+    } else {
+      reloadDocinfo();
+    }
+  }, [engine, formTabs, isCreate, navigator, paths, doctype, reloadDocinfo, t, emitEvent, onSaved]);
+  useSaveShortcut(!formReadOnly, () => {
+    if (engine.isDirty || isCreate) void handleSave();
+  });
+  const handleAmend = useCallback(() => {
+    if (!meta || !docName) return;
+    setCreatePrefill(doctype, {
+      ...buildCopyValues(meta.fields, engine.doc),
+      amended_from: docName
+    });
+    navigator.navigate(paths.newDoc(doctype));
+  }, [meta, docName, doctype, engine.doc, navigator, paths]);
+  const handleDuplicate = useCallback(() => {
+    if (!meta) return;
+    setCreatePrefill(doctype, buildCopyValues(meta.fields, engine.doc));
+    navigator.navigate(paths.newDoc(doctype));
+  }, [meta, doctype, engine.doc, navigator, paths]);
+  const handleRename = useCallback(async newName => {
+    if (!connection || !docName) return;
+    try {
+      const resolved = await renameDoc(createHttpClient(connection), doctype, docName, newName);
+      navigator.replace(paths.form(doctype, resolved));
+    } catch {}
+  }, [connection, docName, doctype, navigator, paths]);
+  const titleFieldValue = meta?.title_field && typeof engine.doc[meta.title_field] === "string" ?
+  // Title fields can hold rich text (e.g. ToDo.description = "<p>…</p>");
+  // strip to plain text so the breadcrumb + toolbar heading don't show
+  // literal HTML tags.
+  htmlToText(engine.doc[meta.title_field]) : void 0;
+  const title = isCreate ? t("newDocTitle", "New {{doctype}}", {
+    doctype
+  }) : titleFieldValue || name;
+  const menuItems = useMemo(() => {
+    if (isCreate) return [];
+    const items = [{
+      key: "reload",
+      label: t("menuReload", "Reload"),
+      icon: "reload",
+      onSelect: () => {
+        engine.reload();
+        setValidationSummary(void 0);
+        refetchMeta();
+        invalidateDocinfo(doctype, name);
+        reloadDocinfo();
+      }
+    }, {
+      key: "duplicate",
+      label: t("menuDuplicate", "Duplicate"),
+      icon: "duplicate",
+      onSelect: handleDuplicate
+    }];
+    if (meta?.allow_rename && perms.write) {
+      items.push({
+        key: "rename",
+        label: t("menuRename", "Rename"),
+        icon: "rename",
+        onSelect: () => setRenameOpen(true)
+      });
+    }
+    if (capabilities.print.enabled && canOpenNewTab() && perms.print && connection) {
+      items.push({
+        key: "print",
+        label: t("menuPrint", "Print"),
+        icon: "print",
+        onSelect: () => {
+          const base = connection.baseURL.replace(/\/$/, "");
+          openInNewTab(`${base}/printview?doctype=${encodeURIComponent(doctype)}&name=${encodeURIComponent(name)}&format=Standard`);
+        }
+      });
+    }
+    if (capabilities.email.enabled && perms.email) {
+      items.push({
+        key: "email",
+        label: t("menuEmail", "Email"),
+        icon: "email",
+        onSelect: () => setEmailOpen(true)
+      });
+    }
+    if (showConnections) {
+      items.push({
+        key: "links",
+        label: t("menuLinks", "Links"),
+        icon: "links",
+        onSelect: () => setActiveTab(CONNECTIONS_TAB)
+      });
+    }
+    items.push({
+      key: "jump-list",
+      label: t("menuJumpToList", "Jump to {{doctype}} List", {
+        doctype
+      }),
+      icon: "list",
+      onSelect: () => navigate(paths.list(doctype))
+    });
+    if (capabilities.newDoc.enabled && perms.create) {
+      items.push({
+        key: "new",
+        label: t("menuNew", "New {{doctype}}", {
+          doctype
+        }),
+        icon: "new",
+        onSelect: () => navigate(paths.newDoc(doctype))
+      });
+    }
+    if (perms.delete) {
+      items.push({
+        key: "delete",
+        label: t("menuDelete", "Delete"),
+        icon: "delete",
+        destructive: true,
+        onSelect: () => setConfirmAction("delete")
+      });
+    }
+    return items;
+  }, [isCreate, t, engine, refetchMeta, reloadDocinfo, handleDuplicate, meta?.allow_rename, perms, connection, doctype, name, showConnections, navigate, paths, capabilities]);
+  const effectiveMenuItems = useMemo(() => {
+    const hidden = new Set(actionOverrides?.hide ?? []);
+    const items = menuItems.filter(item => !hidden.has(item.key));
+    const injected = [...actionsForDoctype(actions.form, doctype), ...actionsForDoctype(actionOverrides?.extra, doctype)];
+    for (const action of injected) {
+      items.push({
+        key: `host:${action.id}`,
+        label: action.label,
+        onSelect: () => action.onPress({
+          doctype,
+          ...(docName ? {
+            name: docName
+          } : {})
+        })
+      });
+    }
+    return items;
+  }, [menuItems, actions.form, actionOverrides, doctype, docName]);
+  if (!config?.baseURL || !connection) {
+    return /* @__PURE__ */jsx(YStack, {
+      flex: 1,
+      children: /* @__PURE__ */jsx(EmptyState, {
+        title: t("noFrappe", "Frappe is not configured"),
+        description: t("noFrappeHint", "Pass a frappe connection to BackofficeProvider to point the backoffice at a bench.")
+      })
+    });
+  }
+  if (isMetaLoading && !meta) {
+    return /* @__PURE__ */jsx(YStack, {
+      flex: 1,
+      ...knobProps.panelPadding,
+      testID: "doc-form-skeleton",
+      children: /* @__PURE__ */jsx(AsyncSkeleton, {
+        layout: "generic"
+      })
+    });
+  }
+  if (metaError && !meta) {
+    return /* @__PURE__ */jsx(YStack, {
+      flex: 1,
+      children: /* @__PURE__ */jsx(EmptyState, {
+        title: t("metaError", "Could not load {{doctype}}", {
+          doctype
+        }),
+        description: metaError.message
+      })
+    });
+  }
+  if (!isCreate && engine.notFound) {
+    return /* @__PURE__ */jsx(YStack, {
+      flex: 1,
+      children: /* @__PURE__ */jsx(EmptyState, {
+        title: t("docNotFound", "{{doctype}} {{name}} not found", {
+          doctype,
+          name
+        }),
+        description: t("docNotFoundHint", "The document does not exist or you do not have permission to read it."),
+        action: /* @__PURE__ */jsx(Button, {
+          icon: ListBulletsIcon,
+          onPress: () => navigator.navigate(paths.list(doctype)),
+          children: t("backToList", "Back to {{doctype}} list", {
+            doctype
+          })
+        })
+      })
+    });
+  }
+  if (!isCreate && engine.isLoading) {
+    return /* @__PURE__ */jsx(YStack, {
+      flex: 1,
+      ...knobProps.panelPadding,
+      testID: "doc-form-skeleton",
+      children: /* @__PURE__ */jsx(AsyncSkeleton, {
+        layout: "generic"
+      })
+    });
+  }
+  const indicator = resolveIndicator({
+    isCreate,
+    isDirty: engine.isDirty,
+    docstatus: engine.docstatus,
+    isSubmittable,
+    statusValue: typeof engine.doc.status === "string" ? engine.doc.status : void 0,
+    states: meta?.states
+  });
+  const canSave = !formReadOnly && (isCreate ? perms.create : perms.write && engine.docstatus === 0);
+  const canSubmit = !isCreate && isSubmittable && engine.docstatus === 0 && !engine.isDirty && perms.submit && !engine.wasDeleted;
+  const canCancel = !isCreate && isSubmittable && engine.docstatus === 1 && perms.cancel && !engine.wasDeleted;
+  const canAmend = !isCreate && isSubmittable && engine.docstatus === 2 && perms.amend && !engine.wasDeleted;
+  const breadcrumbs = [{
+    label: t("home", "Home"),
+    href: paths.home()
+  }, {
+    label: doctype,
+    href: paths.list(doctype)
+  }, {
+    label: isCreate ? t("newCrumb", "New") : title
+  }];
+  const promptNamed = isCreate && isPromptNamed(meta?.autoname, meta?.naming_rule);
+  const sidebarStacked = sizeClass === "compact";
+  const bodyTabs = [...formTabs.map(tab => ({
+    value: tab.key,
+    label: tab.label,
+    content: /* @__PURE__ */jsx(YStack, {
+      ...knobProps.gapLg,
+      paddingTop: "$3",
+      children: /* @__PURE__ */jsx(FormErrorBoundary, {
+        errorTitle: t("formTabRenderError", "This form tab failed to render"),
+        testID: `form-tab-error-${tab.key}`,
+        children: /* @__PURE__ */jsx(SchemaForm, {
+          schema: tab.schema,
+          doc: engine.doc,
+          setValue: engine.setValue,
+          errors: engine.errors,
+          disabled: formReadOnly || engine.isSaving,
+          sectionHeadingLevel: 2,
+          renderFieldWrapper: wrapFieldWithErrorBoundary
+        })
+      })
+    })
+  })), ...(showConnections ? [{
+    value: CONNECTIONS_TAB,
+    label: t("connectionsTab", "Connections"),
+    content: /* @__PURE__ */jsx(YStack, {
+      paddingTop: "$3",
+      children: /* @__PURE__ */jsx(FormConnections, {
+        doctype,
+        name,
+        meta
+      })
+    })
+  }] : [])];
+  const effectiveTab = activeTab && bodyTabs.some(tab => tab.value === activeTab) ? activeTab : bodyTabs[0]?.value;
+  const formBody =
+  // No flex here: formBody now lives inside COLUMN containers (both
+  // branches below), where `flex={1}` means flex-basis:0 — the body would
+  // stop contributing height and the timeline/sidebar would paint over it.
+  /* @__PURE__ */
+  jsxs(YStack, {
+    minWidth: 0,
+    ...knobProps.gapLg,
+    children: [promptNamed && /* @__PURE__ */jsx(YStack, {
+      ...knobProps.gap,
+      children: /* @__PURE__ */jsx(Input, {
+        label: t("namePrompt", "Name"),
+        value: typeof engine.doc.name === "string" ? engine.doc.name : "",
+        onChangeText: value => engine.setValue("name", value),
+        placeholder: t("namePromptPlaceholder", "New document name"),
+        error: engine.errors.name
+      })
+    }), bodyTabs.length > 1 ? /* @__PURE__ */jsx(Tabs, {
+      items: bodyTabs,
+      value: effectiveTab,
+      onChange: setActiveTab,
+      lazyMount: true
+    }) : bodyTabs[0]?.content ?? null, engine.errors.general && /* @__PURE__ */jsx(Text, {
+      color: "$red10",
+      fontSize: "$3",
+      role: "alert",
+      children: engine.errors.general
+    })]
+  });
+  const timeline = capabilities.timeline.enabled && !isCreate && docName ? /* @__PURE__ */jsx(FormTimeline, {
+    doctype,
+    name: docName
+  }) : null;
+  const sidebar = !isCreate && docName && meta ? /* @__PURE__ */jsx(FormSidebarPanel, {
+    doctype,
+    name: docName,
+    meta,
+    doc: engine.doc,
+    docinfo,
+    currentUser: engine.currentUser,
+    onRefresh: refreshDocinfo,
+    stacked: sidebarStacked
+  }) : null;
+  const toolbar = /* @__PURE__ */jsx(FormToolbar, {
+    breadcrumbs,
+    onNavigate: navigate,
+    title,
+    indicator,
+    showIndicator: !!meta,
+    isSaving: engine.isSaving,
+    cluster: !isCreate && docName ? /* @__PURE__ */jsx(FormHeaderCluster, {
+      doctype,
+      name: docName,
+      docinfo,
+      currentUser: engine.currentUser,
+      onRefresh: refreshDocinfo
+    }) : void 0,
+    canSave,
+    canSubmit,
+    canCancel,
+    canAmend,
+    onSave: () => void handleSave(),
+    onSubmit: () => setConfirmAction("submit"),
+    onCancel: () => setConfirmAction("cancel"),
+    onAmend: handleAmend,
+    menuItems: effectiveMenuItems
+  });
+  return /* @__PURE__ */jsxs(YStack, {
+    flex: 1,
+    children: [slots.renderFormHeader ? slots.renderFormHeader({
+      doctype,
+      ...(docName ? {
+        name: docName
+      } : {}),
+      defaultContent: toolbar
+    }) : toolbar, engine.wasDeleted && /* @__PURE__ */jsx(XStack, {
+      role: "alert",
+      ...knobProps.containerRadius,
+      ...knobProps.panelPadding,
+      marginHorizontal: "$3",
+      backgroundColor: "$red3",
+      children: /* @__PURE__ */jsx(Text, {
+        color: "$red11",
+        fontSize: "$3",
+        children: t("deletedBanner", "This document was deleted on the server. Fields are read-only.")
+      })
+    }), validationSummary && !engine.wasDeleted && /* @__PURE__ */jsx(XStack, {
+      role: "alert",
+      ...knobProps.containerRadius,
+      ...knobProps.panelPadding,
+      marginHorizontal: "$3",
+      backgroundColor: "$red3",
+      testID: "doc-form-validation-summary",
+      children: /* @__PURE__ */jsx(Text, {
+        color: "$red11",
+        fontSize: "$3",
+        children: validationSummary
+      })
+    }), engine.conflict && !engine.wasDeleted && /* @__PURE__ */jsxs(XStack, {
+      role: "status",
+      alignItems: "center",
+      justifyContent: "space-between",
+      ...knobProps.containerRadius,
+      ...knobProps.panelPadding,
+      marginHorizontal: "$3",
+      backgroundColor: "$orange3",
+      gap: "$3",
+      children: [/* @__PURE__ */jsx(Text, {
+        color: "$orange11",
+        fontSize: "$3",
+        flex: 1,
+        children: t("conflictBanner", "This document changed on the server while you were editing.")
+      }), /* @__PURE__ */jsx(Text, {
+        color: "$orange11",
+        fontSize: "$3",
+        fontWeight: "700",
+        cursor: "pointer",
+        role: "button",
+        "aria-label": t("reloadDoc", "Reload"),
+        onPress: engine.reload,
+        children: t("reloadDoc", "Reload")
+      })]
+    }), /* @__PURE__ */jsx(ScrollView, {
+      flex: 1,
+      children: sidebarStacked ?
+      // Compact: form body → metadata accordion → timeline (the accordion
+      // must not hide below the activity feed's long scroll).
+      /* @__PURE__ */
+      jsxs(YStack, {
+        ...knobProps.panelPadding,
+        ...knobProps.gapLg,
+        children: [formBody, sidebar, timeline]
+      }) :
+      // Wide: main column (body + timeline) with the compact metadata
+      // rail keeping its trailing position.
+      /* @__PURE__ */
+      jsxs(XStack, {
+        ...knobProps.panelPadding,
+        ...knobProps.gapLg,
+        alignItems: "flex-start",
+        children: [/* @__PURE__ */jsxs(YStack, {
+          flex: 1,
+          minWidth: 0,
+          ...knobProps.gapLg,
+          children: [formBody, timeline]
+        }), sidebar]
+      })
+    }), /* @__PURE__ */jsx(ConfirmDialog, {
+      open: confirmAction === "submit",
+      onOpenChange: open => !open && setConfirmAction(void 0),
+      title: t("submitConfirmTitle", "Submit {{doctype}}?", {
+        doctype
+      }),
+      body: t("submitConfirmBody", "After submitting, the document becomes read-only and can only be cancelled or amended."),
+      confirmLabel: t("submit", "Submit"),
+      warning: true,
+      onConfirm: () => {
+        setConfirmAction(void 0);
+        void engine.submit().then(ok => {
+          if (ok) reloadDocinfo();
+        });
+      }
+    }), /* @__PURE__ */jsx(ConfirmDialog, {
+      open: confirmAction === "cancel",
+      onOpenChange: open => !open && setConfirmAction(void 0),
+      title: t("cancelConfirmTitle", "Cancel {{doctype}}?", {
+        doctype
+      }),
+      body: t("cancelConfirmBody", "Cancelling marks the document as void. You can amend it into a new draft afterwards."),
+      confirmLabel: t("cancelAction", "Cancel"),
+      destructive: true,
+      onConfirm: () => {
+        setConfirmAction(void 0);
+        void engine.cancel().then(ok => {
+          if (ok) reloadDocinfo();
+        });
+      }
+    }), /* @__PURE__ */jsx(ConfirmDialog, {
+      open: confirmAction === "delete",
+      onOpenChange: open => !open && setConfirmAction(void 0),
+      title: t("deleteConfirmTitle", "Delete {{doctype}} {{name}}?", {
+        doctype,
+        name: title
+      }),
+      body: t("deleteConfirmBody", "This action cannot be undone."),
+      confirmLabel: t("menuDelete", "Delete"),
+      destructive: true,
+      onConfirm: () => {
+        setConfirmAction(void 0);
+        void engine.remove().then(ok => {
+          if (ok) {
+            invalidateDocinfo(doctype, name);
+            emitEvent({
+              type: "doc-deleted",
+              doctype,
+              name
+            });
+            if (onDeleted) onDeleted();else navigator.replace(paths.list(doctype));
+          }
+        });
+      }
+    }), /* @__PURE__ */jsx(ConfirmDialog, {
+      open: !!pendingNav || backGuard.blocked,
+      onOpenChange: open => {
+        if (open) return;
+        setPendingNav(void 0);
+        backGuard.reset();
+      },
+      title: t("unsavedTitle", "Discard unsaved changes?"),
+      body: t("unsavedBody", "You have unsaved changes that will be lost if you leave this page."),
+      confirmLabel: t("leave", "Leave"),
+      warning: true,
+      onConfirm: () => {
+        if (backGuard.blocked) {
+          backGuard.proceed();
+          return;
+        }
+        const target = pendingNav;
+        setPendingNav(void 0);
+        if (target) navigator.navigate(target);
+      }
+    }), /* @__PURE__ */jsx(RenameDialog, {
+      open: renameOpen,
+      onOpenChange: setRenameOpen,
+      currentName: name,
+      onRename: newName => {
+        setRenameOpen(false);
+        void handleRename(newName);
+      }
+    }), /* @__PURE__ */jsx(EmailDialog, {
+      open: emailOpen,
+      onOpenChange: setEmailOpen,
+      defaultSubject: `${doctype}: ${title}`,
+      onSend: args => {
+        setEmailOpen(false);
+        if (!docName) return;
+        void sendEmail(createHttpClient(connection), {
+          doctype,
+          name: docName,
+          ...args
+        }).catch(() => {}).finally(reloadDocinfo);
+      }
+    })]
+  });
+}
+export { DocFormScreen };
+//# sourceMappingURL=DocFormScreen.mjs.map