@multiplatform.one/frappe-ui 7.6.1 → 7.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/frappe-ui",
-  "version": "7.6.1",
+  "version": "7.6.3",
   "description": "Pre-wired Tamagui components for Frappe doctypes with live data",
   "keywords": [
     "cross-platform",
@@ -78,18 +78,18 @@
     "html5-qrcode": "^2.3.8",
     "signature_pad": "^5.1.3",
     "tamagui": "2.7.6",
-    "@multiplatform.one/components": "7.6.1",
-    "@multiplatform.one/desktop": "7.6.1",
-    "@multiplatform.one/forms": "7.6.1",
-    "@multiplatform.one/frappe": "7.6.1",
-    "@multiplatform.one/i18n": "7.6.1",
-    "@multiplatform.one/markdown": "7.6.1",
-    "@multiplatform.one/platform": "7.6.1",
-    "@multiplatform.one/rich-text": "7.6.1",
-    "@multiplatform.one/router": "7.6.1",
-    "@multiplatform.one/store": "7.6.1",
-    "@multiplatform.one/table": "7.6.1",
-    "@multiplatform.one/theme": "7.6.1"
+    "@multiplatform.one/components": "7.6.3",
+    "@multiplatform.one/desktop": "7.6.3",
+    "@multiplatform.one/forms": "7.6.3",
+    "@multiplatform.one/frappe": "7.6.3",
+    "@multiplatform.one/i18n": "7.6.3",
+    "@multiplatform.one/markdown": "7.6.3",
+    "@multiplatform.one/platform": "7.6.3",
+    "@multiplatform.one/rich-text": "7.6.3",
+    "@multiplatform.one/router": "7.6.3",
+    "@multiplatform.one/store": "7.6.3",
+    "@multiplatform.one/table": "7.6.3",
+    "@multiplatform.one/theme": "7.6.3"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
@@ -102,9 +102,9 @@
     "react-dom": "19.2.5",
     "react-i18next": "^16.6.6",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.6.1",
-    "@multiplatform.one/storybook": "7.6.1",
-    "@multiplatform.one/test-utils": "7.6.1"
+    "@multiplatform.one/config": "7.6.3",
+    "@multiplatform.one/storybook": "7.6.3",
+    "@multiplatform.one/test-utils": "7.6.3"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8.0.1",

package/src/FileBrowser/AttachLibrary.spec.tsx

@@ -0,0 +1,74 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { AttachLibrary } from "./AttachLibrary";
+import type { FileBrowserFile } from "./types";
+
+const FIXTURE: FileBrowserFile[] = [
+  { name: "Home", file_name: "Home", folder: "", is_folder: 1 },
+  { name: "Home/Invoices", file_name: "Invoices", folder: "Home", is_folder: 1 },
+  {
+    name: "inv-1",
+    file_name: "invoice.pdf",
+    folder: "Home/Invoices",
+    file_size: 72400,
+    file_type: "pdf",
+    file_url: "/files/invoice.pdf",
+    modified: "2026-08-12",
+  },
+  {
+    name: "img-1",
+    file_name: "topology.png",
+    folder: "Home/Invoices",
+    file_size: 612000,
+    file_type: "png",
+    file_url: "/files/topology.png",
+    modified: "2026-08-09",
+  },
+];
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+describe("AttachLibrary (MPO-111)", () => {
+  it("opens the library tab onto FileBrowser and commits onPick", () => {
+    const onPick = vi.fn();
+    const onOpenChange = vi.fn();
+    renderWithProviders(
+      <AttachLibrary
+        open
+        onOpenChange={onOpenChange}
+        files={FIXTURE}
+        currentFolder="Home/Invoices"
+        onPick={onPick}
+      />,
+    );
+    expect(screen.getByRole("dialog", { name: "Attach file" })).toBeTruthy();
+    expect(screen.getByRole("tab", { name: /From library/i })).toBeTruthy();
+    expect(document.querySelector("[data-filebrowser-attach-library]")).toBeTruthy();
+    expect(screen.getByText("invoice.pdf")).toBeTruthy();
+    fireEvent.click(screen.getByText("invoice.pdf"));
+    expect(onPick).toHaveBeenCalled();
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("renders nothing interactive when closed", () => {
+    renderWithProviders(
+      <AttachLibrary
+        open={false}
+        onOpenChange={vi.fn()}
+        files={FIXTURE}
+        currentFolder="Home/Invoices"
+        onPick={vi.fn()}
+      />,
+    );
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+});

package/src/FileBrowser/AttachLibrary.stories.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { AttachLibrary } from "./AttachLibrary";
+import type { FileBrowserFile } from "./types";
+
+const files: FileBrowserFile[] = [
+  { name: "Home", file_name: "Home", folder: "", is_folder: 1 },
+  { name: "Home/Invoices", file_name: "Invoices", folder: "Home", is_folder: 1 },
+  {
+    name: "inv-1",
+    file_name: "hetzner-hel1-invoice-aug.pdf",
+    folder: "Home/Invoices",
+    file_size: 72400,
+    file_type: "pdf",
+    file_url: "/files/invoice.pdf",
+    modified: "2026-08-12",
+  },
+  {
+    name: "img-1",
+    file_name: "swarm01-topology.png",
+    folder: "Home/Invoices",
+    file_size: 612000,
+    file_type: "png",
+    file_url: "/files/topology.png",
+    modified: "2026-08-09",
+  },
+];
+
+export default {
+  title: "FrappeUI/AttachLibrary",
+  component: AttachLibrary,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          'Attach dialog: Upload tab plus a FileBrowser "From library" tab. FileUploadField opens this; picking a library row commits and closes.',
+      },
+    },
+  },
+};
+
+export const Default = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <YStack height={520}>
+      <AttachLibrary
+        open={open}
+        onOpenChange={setOpen}
+        files={files}
+        currentFolder="Home/Invoices"
+        onPick={() => setOpen(false)}
+      />
+    </YStack>
+  );
+};
+Default.storyName = "Main";
+
+export const Closed = () => (
+  <AttachLibrary
+    open={false}
+    onOpenChange={() => {}}
+    files={files}
+    currentFolder="Home/Invoices"
+    onPick={() => {}}
+  />
+);

package/src/FileBrowser/AttachLibrary.tsx

@@ -36,55 +36,62 @@ export function AttachLibrary({
 
   return (
     <Dialog modal open={open} onOpenChange={onOpenChange}>
-      <DialogOverlay backgroundColor="$background" opacity={0.5} data-filebrowser-attach-scrim />
-      <DialogContent
-        aria-label={t("Attach file")}
-        data-filebrowser-attach-dialog
-        width={drill ? "100%" : 820}
-        maxWidth="100%"
-      >
-        <Text fontSize={20} lineHeight={32} fontFamily="$mono">
-          {t("Attach file")}
-        </Text>
-        <Tabs
-          variant="contained"
-          value={tab}
-          onChange={setTab}
-          items={[
-            {
-              value: "upload",
-              label: t("Upload"),
-              content: (
-                <YStack paddingTop="$4">
-                  <FileUpload accept={accept} />
-                </YStack>
-              ),
-            },
-            {
-              value: "library",
-              label: t("From library"),
-              content: (
-                <YStack paddingTop="$4" data-filebrowser-attach-library>
-                  <FileBrowser
-                    files={files}
-                    layout={drill ? "drill" : "split"}
-                    selectionMode="single"
-                    currentValue={current}
-                    currentFolder={currentFolder}
-                    surfaceId="attach-library"
-                    onPick={(file) => {
-                      onPick(file);
-                      onOpenChange(false);
-                    }}
-                    accept={accept}
-                    onUpload={onUpload}
-                  />
-                </YStack>
-              ),
-            },
-          ]}
-        />
-      </DialogContent>
+      {/* Dialog.Portal is what gates mounting on `open`. Without it Tamagui
+          mounts Dialog.Content unconditionally, so a CLOSED AttachLibrary still
+          put role="dialog" in the a11y tree and kept the whole FileBrowser
+          subtree live. Every other house dialog (ConfirmDialog, CellModalEditor,
+          HelpAboutDialog) already wraps overlay + content this way. */}
+      <Dialog.Portal>
+        <DialogOverlay backgroundColor="$background" opacity={0.5} data-filebrowser-attach-scrim />
+        <DialogContent
+          aria-label={t("Attach file")}
+          data-filebrowser-attach-dialog
+          width={drill ? "100%" : 820}
+          maxWidth="100%"
+        >
+          <Text fontSize={20} lineHeight={32} fontFamily="$mono">
+            {t("Attach file")}
+          </Text>
+          <Tabs
+            variant="contained"
+            value={tab}
+            onChange={setTab}
+            items={[
+              {
+                value: "upload",
+                label: t("Upload"),
+                content: (
+                  <YStack paddingTop="$4">
+                    <FileUpload accept={accept} />
+                  </YStack>
+                ),
+              },
+              {
+                value: "library",
+                label: t("From library"),
+                content: (
+                  <YStack paddingTop="$4" data-filebrowser-attach-library>
+                    <FileBrowser
+                      files={files}
+                      layout={drill ? "drill" : "split"}
+                      selectionMode="single"
+                      currentValue={current}
+                      currentFolder={currentFolder}
+                      surfaceId="attach-library"
+                      onPick={(file) => {
+                        onPick(file);
+                        onOpenChange(false);
+                      }}
+                      accept={accept}
+                      onUpload={onUpload}
+                    />
+                  </YStack>
+                ),
+              },
+            ]}
+          />
+        </DialogContent>
+      </Dialog.Portal>
     </Dialog>
   );
 }

package/src/FrappeConnectionIndicator.spec.tsx

@@ -0,0 +1,51 @@
+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, describe, expect, it } from "vitest";
+import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(cleanup);
+
+const config = { baseURL: "https://bench.example.com" };
+
+describe("FrappeConnectionIndicator (MPO-111)", () => {
+  it("renders nothing when the socket was never up", () => {
+    const { container } = renderWithProviders(
+      <FrappeConnectionIndicator
+        config={config}
+        connection={{ connected: false, everConnected: false }}
+      />,
+    );
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+
+  it("renders nothing while connected", () => {
+    const { container } = renderWithProviders(
+      <FrappeConnectionIndicator
+        config={config}
+        connection={{ connected: true, everConnected: true }}
+      />,
+    );
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+
+  it("renders a live status pill while reconnecting", async () => {
+    renderWithProviders(
+      <FrappeConnectionIndicator
+        config={config}
+        connection={{ connected: false, everConnected: true }}
+      />,
+    );
+    const status = await screen.findByRole("status");
+    expect(status).toHaveTextContent("Reconnecting…");
+  });
+});

package/src/FrappeConnectionIndicator.stories.tsx

@@ -0,0 +1,55 @@
+import { Text, YStack } from "tamagui";
+import {
+  FrappeConnectionIndicator,
+  type FrappeConnectionIndicatorProps,
+} from "./FrappeConnectionIndicator";
+
+export default {
+  title: "FrappeUI/FrappeConnectionIndicator",
+  component: FrappeConnectionIndicator,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Compact reconnecting pill for live Frappe views. Renders only while the realtime socket is down after having been up. Fixture mode, SSR, and a healthy socket all render nothing.",
+      },
+    },
+  },
+};
+
+const config: FrappeConnectionIndicatorProps["config"] = {
+  baseURL: "https://connection.mock.test",
+};
+
+export const Default = () => (
+  <YStack gap="$3" width={360}>
+    <Text fontSize="$2" color="$color10">
+      Fixture / never-connected: the indicator paints nothing. That is the contract.
+    </Text>
+    <FrappeConnectionIndicator
+      config={config}
+      connection={{ connected: false, everConnected: false }}
+    />
+  </YStack>
+);
+Default.storyName = "Main";
+
+export const Reconnecting = () => (
+  <FrappeConnectionIndicator
+    config={config}
+    connection={{ connected: false, everConnected: true }}
+  />
+);
+
+export const Connected = () => (
+  <YStack gap="$3" width={360}>
+    <Text fontSize="$2" color="$color10">
+      Live socket up: nothing to show.
+    </Text>
+    <FrappeConnectionIndicator
+      config={config}
+      connection={{ connected: true, everConnected: true }}
+    />
+  </YStack>
+);

package/src/FrappeConnectionIndicator.tsx

@@ -1,12 +1,22 @@
-import { useFrappeConnection, type UseFrappeCollectionConfig } from "@multiplatform.one/frappe";
+import {
+  useFrappeConnection,
+  type FrappeConnectionState,
+  type UseFrappeCollectionConfig,
+} from "@multiplatform.one/frappe";
+import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Text, XStack, YStack } from "tamagui";
-import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
 
 export interface FrappeConnectionIndicatorProps {
   /** The same connection config the sibling collection hooks use. */
   config: UseFrappeCollectionConfig | undefined;
+  /**
+   * Story and spec injection. Production callers omit this; the live socket
+   * from `useFrappeConnection(config)` wins. Fixture configs always report
+   * never-connected, so boards that need the reconnecting pill pass a snapshot.
+   */
+  connection?: FrappeConnectionState;
 }
 
 /**
@@ -18,10 +28,11 @@ export interface FrappeConnectionIndicatorProps {
  * connected, in fixture mode, or during SSR (realtime never up), so
  * fixture-backed stories stay clean.
  */
-export function FrappeConnectionIndicator({ config }: FrappeConnectionIndicatorProps) {
+export function FrappeConnectionIndicator({ config, connection }: FrappeConnectionIndicatorProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const { connected, everConnected } = useFrappeConnection(config);
+  const hooked = useFrappeConnection(config);
+  const { connected, everConnected } = connection ?? hooked;
   if (connected || !everConnected) return null;
   return (
     <XStack

package/src/FrappeForm.tsx

@@ -66,6 +66,12 @@ export interface FrappeFormProps<TDoc extends { name: string; doctype: string }>
   readOnlyFields?: string[];
   /** Completely replace the auto-generated layout. */
   sections?: FormSection[];
+  /**
+   * R2: reorder fields in the meta-derived layout. Listed names permute
+   * among their slots; unlisted fields keep their meta positions. Unknown
+   * names are ignored. Cheaper than replacing `sections`.
+   */
+  order?: string[];
   onSave?: (doc: Partial<TDoc>) => void;
   onCancel?: () => void;
   onDelete?: (doc: Partial<TDoc>) => void;
@@ -117,9 +123,11 @@ function mapMetaToFormSchema(meta: DocTypeMeta, sectionOverrides?: FormSection[]
   const genericSections: GenericFormSection[] = sections.map((section) => ({
     label: section.label,
     collapsible: section.collapsible,
-    columns: section.columns.map((col): GenericFormColumn => ({
-      fields: col.fields.map(mapFieldToGenericSchema),
-    })),
+    columns: section.columns.map(
+      (col): GenericFormColumn => ({
+        fields: col.fields.map(mapFieldToGenericSchema),
+      }),
+    ),
   }));
 
   // Flat list of all fields for depends_on pre-compilation
@@ -274,6 +282,7 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
   hideFields,
   readOnlyFields,
   sections,
+  order,
   onSave,
   onCancel,
   onDelete,
@@ -765,6 +774,7 @@ export function FrappeForm<TDoc extends { name: string; doctype: string }>({
               hideFields={hideFields}
               readOnlyFields={readOnlyFields}
               sectionHeadingLevel={sectionHeadingLevel}
+              order={order}
             />
           ) : (
             // Metadata unavailable (should be covered by metaError branch above)

package/src/FrappeReconnectIndicator.spec.tsx

@@ -0,0 +1,52 @@
+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, describe, expect, it } from "vitest";
+import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(cleanup);
+
+const config = { baseURL: "https://bench.example.com" };
+
+describe("FrappeReconnectIndicator (MPO-111)", () => {
+  it("renders nothing when the socket was never up", () => {
+    const { container } = renderWithProviders(
+      <FrappeReconnectIndicator
+        config={config}
+        connection={{ connected: false, everConnected: false }}
+      />,
+    );
+    expect(container.querySelector('[data-testid="frappe-reconnect-indicator"]')).toBeNull();
+  });
+
+  it("renders nothing while connected", () => {
+    const { container } = renderWithProviders(
+      <FrappeReconnectIndicator
+        config={config}
+        connection={{ connected: true, everConnected: true }}
+      />,
+    );
+    expect(container.querySelector('[data-testid="frappe-reconnect-indicator"]')).toBeNull();
+  });
+
+  it("renders the interrupted-updates chip while reconnecting", async () => {
+    renderWithProviders(
+      <FrappeReconnectIndicator
+        config={config}
+        connection={{ connected: false, everConnected: true }}
+      />,
+    );
+    const chip = await screen.findByTestId("frappe-reconnect-indicator");
+    expect(chip.getAttribute("role")).toBe("status");
+    expect(chip).toHaveTextContent("Live updates interrupted — reconnecting…");
+  });
+});

package/src/FrappeReconnectIndicator.stories.tsx

@@ -0,0 +1,55 @@
+import { Text, YStack } from "tamagui";
+import {
+  FrappeReconnectIndicator,
+  type FrappeReconnectIndicatorProps,
+} from "./FrappeReconnectIndicator";
+
+export default {
+  title: "FrappeUI/FrappeReconnectIndicator",
+  component: FrappeReconnectIndicator,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Honest realtime-state chip for live Frappe components. Renders only while the socket feeding this connection's live queries is down after having been up. Fixture-backed configs render nothing.",
+      },
+    },
+  },
+};
+
+const config: FrappeReconnectIndicatorProps["config"] = {
+  baseURL: "https://reconnect.mock.test",
+};
+
+export const Default = () => (
+  <YStack gap="$3" width={420}>
+    <Text fontSize="$2" color="$color10">
+      Never-connected (fixtures, SSR): paints nothing.
+    </Text>
+    <FrappeReconnectIndicator
+      config={config}
+      connection={{ connected: false, everConnected: false }}
+    />
+  </YStack>
+);
+Default.storyName = "Main";
+
+export const Reconnecting = () => (
+  <FrappeReconnectIndicator
+    config={config}
+    connection={{ connected: false, everConnected: true }}
+  />
+);
+
+export const Connected = () => (
+  <YStack gap="$3" width={420}>
+    <Text fontSize="$2" color="$color10">
+      Socket up: the chip is gone.
+    </Text>
+    <FrappeReconnectIndicator
+      config={config}
+      connection={{ connected: true, everConnected: true }}
+    />
+  </YStack>
+);

package/src/FrappeReconnectIndicator.tsx

@@ -1,4 +1,8 @@
-import { useFrappeConnection, type UseFrappeCollectionConfig } from "@multiplatform.one/frappe";
+import {
+  useFrappeConnection,
+  type FrappeConnectionState,
+  type UseFrappeCollectionConfig,
+} from "@multiplatform.one/frappe";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { WifiSlashIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
@@ -7,6 +11,11 @@ import { Text, XStack } from "tamagui";
 export interface FrappeReconnectIndicatorProps {
   /** The connection config the component's live queries sync through. */
   config: UseFrappeCollectionConfig | undefined;
+  /**
+   * Story and spec injection. Production callers omit this; the live socket
+   * from `useFrappeConnection(config)` wins.
+   */
+  connection?: FrappeConnectionState;
 }
 
 /**
@@ -19,10 +28,11 @@ export interface FrappeReconnectIndicatorProps {
  * gap is owned by the client's reconnect backfill; this chip only tells the
  * user that in-place updates are paused right now.
  */
-export function FrappeReconnectIndicator({ config }: FrappeReconnectIndicatorProps) {
+export function FrappeReconnectIndicator({ config, connection }: FrappeReconnectIndicatorProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const { connected, everConnected } = useFrappeConnection(config);
+  const hooked = useFrappeConnection(config);
+  const { connected, everConnected } = connection ?? hooked;
   if (!everConnected || connected) return null;
   return (
     <XStack