From 12e40226e0bd9b15a6956b0fc73fa8f9f7faefe2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 19:37:42 +0000
Subject: [PATCH 1/4] fix(components): bound each registered field widget's
 lazy load to its own slot (objectui#12559)

A collapsed section's first expand drew a not-yet-loaded lazy field widget
with no Suspense boundary in the form, so the suspension unwound to the host's
nearest boundary; the console's record dialog mounts under the shell's root
boundary, so the whole console (dialog included) was swapped for the root
fallback. Each registered widget now renders behind a per-widget boundary
cached per component, with a control-height placeholder.

Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
Co-authored-by: Claude <noreply@anthropic.com>
---
 .changeset/12559-dialog-section-toggle.md     |   9 +
 .../components/src/renderers/form/form.tsx    |  56 +++-
 .../modalSectionToggleSuspense-12559.test.tsx | 243 ++++++++++++++++++
 3 files changed, 307 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/12559-dialog-section-toggle.md
 create mode 100644 packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx

diff --git a/.changeset/12559-dialog-section-toggle.md b/.changeset/12559-dialog-section-toggle.md
new file mode 100644
index 0000000000..1cec7476d9
--- /dev/null
+++ b/.changeset/12559-dialog-section-toggle.md
@@ -0,0 +1,9 @@
+---
+'@object-ui/components': patch
+---
+
+A form field whose widget is still loading no longer takes its host off screen (objectui#12559).
+
+The field widgets `@object-ui/fields` registers load on demand: a type's code is fetched the first time a form draws it. The form renderer drew such a widget with no loading boundary of its own, so the wait landed on the host's nearest one. In the console's record create and edit dialog that is the boundary around the whole console, because the dialog mounts beside the pages rather than inside one. Opening a collapsed section whose fields used a type not loaded yet, for example a currency or address field, swapped the whole console, dialog included, for the loading screen until the code arrived. The full-page form hid only its page.
+
+Each registered field widget now waits in its own slot: while its code loads, the field shows a placeholder the height of a control, and the section opens in place with everything typed elsewhere in the form kept. Nothing is added to the package entry: no export, prop or type member.
diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
index b067131cdc..a60788de51 100644
--- a/packages/components/src/renderers/form/form.tsx
+++ b/packages/components/src/renderers/form/form.tsx
@@ -4450,6 +4450,55 @@ function nativeNumberStep(carrier: Record<string, unknown> | undefined): number
   return typeof scale === 'number' ? Math.pow(10, -scale) : 'any';
 }
 
+/**
+ * A registered field widget behind a `<Suspense>` boundary of the field's own
+ * (objectui#12559).
+ *
+ * The widgets `@object-ui/fields` registers are `React.lazy` — each type's
+ * chunk is fetched the first time a form draws that type. Without a boundary
+ * here, that first render suspended past the form to the HOST's nearest
+ * `<Suspense>`, whatever and wherever it is. For the console's record dialog
+ * that is the shell's root boundary — the dialog mounts beside the routes, not
+ * inside the route boundary — so expanding a collapsed section whose fields
+ * used a type not yet loaded swapped the WHOLE console, dialog included, for
+ * the root fallback while the chunk loaded. The full-page form hid only its
+ * page, because its nearest boundary is the route's. The renderer that introduces the laziness
+ * is the one that owns the wait: a pending widget draws a placeholder in its
+ * own slot, and nothing above the field is ever hidden or torn down.
+ *
+ * The bounded twin is cached PER WIDGET COMPONENT, so its identity is as
+ * stable as the registration it wraps: a fresh wrapper per render would
+ * remount every widget on every render. It receives the props `<FormControl>`'s
+ * Slot merges onto it (`id`, `aria-*`, `ref` — a plain prop under React 19)
+ * and hands them all to the widget unchanged.
+ */
+const boundedFieldWidgets = new WeakMap<React.ComponentType<any>, React.ComponentType<any>>();
+
+function boundedFieldWidget(Widget: React.ComponentType<any>): React.ComponentType<any> {
+  let Bounded = boundedFieldWidgets.get(Widget);
+  if (!Bounded) {
+    const BoundedFieldWidget = (props: Record<string, any>) => (
+      <React.Suspense fallback={<FieldWidgetPending />}>
+        <Widget {...props} />
+      </React.Suspense>
+    );
+    Bounded = BoundedFieldWidget;
+    boundedFieldWidgets.set(Widget, Bounded);
+  }
+  return Bounded;
+}
+
+/** The slot a field widget holds while its chunk loads: the height of a control, nothing to read. */
+function FieldWidgetPending() {
+  return (
+    <div
+      className="h-9 w-full animate-pulse rounded-md bg-muted"
+      aria-hidden="true"
+      data-field-widget-pending=""
+    />
+  );
+}
+
 function renderFieldComponent(type: string, props: RenderFieldProps) {
   // 1. Resolve the specialized FIELD WIDGET — and only a field widget.
   //    A form field's type either names a `field:`-namespaced widget or takes
@@ -4511,7 +4560,12 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
     // `field || schema` to `field` on this path every time — which is why
     // dropping the key here changes no payload, only the number of spellings
     // a widget author has to know.
-    return <RegisteredComponent {...stripRegisteredFieldProps(type, props)} />;
+    //
+    // Drawn through its BOUNDED twin (objectui#12559): a registered widget is
+    // typically `React.lazy`, so its first render suspends — see
+    // `boundedFieldWidget` for why that suspension must stop at this field.
+    const Bounded = boundedFieldWidget(RegisteredComponent);
+    return <Bounded {...stripRegisteredFieldProps(type, props)} />;
   }
 
   const { inputType, options = [], placeholder, readonly, emptyHint, ...fieldProps } = props;
diff --git a/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx b/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx
new file mode 100644
index 0000000000..e6f25e40cc
--- /dev/null
+++ b/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx
@@ -0,0 +1,243 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectui#12559 — expanding a collapsed section of the console's record
+ * dialog must open it IN PLACE.
+ *
+ * THE PRODUCER. The field widgets `@object-ui/fields` registers are
+ * `React.lazy`: a type's chunk is fetched the first time a form draws it. A
+ * section that starts collapsed holds its fields out of the DOM, so the click
+ * that opens it is often the first render of a type (`currency`, `url`,
+ * `address`…). The form renderer drew that lazy widget with no boundary of its
+ * own, so the suspension left the form, left `ModalForm`, and landed on the
+ * HOST's nearest `<Suspense>`. The console mounts the record dialog beside its
+ * routes, under the shell's root boundary, with no route boundary in between —
+ * so the whole console, dialog included, was swapped for the root fallback
+ * while the chunk loaded. The full-page form hid only its page: its nearest
+ * boundary is the route's. The fix is a boundary per registered field widget
+ * in the form renderer (`boundedFieldWidget` in `form.tsx`).
+ *
+ * NOT the producer, read off the code: the collapse state lives in
+ * `ModalForm`'s own `useState` (not above the dialog's key), and the console's
+ * key for the dialog is the object name plus the record id or `new`, which a
+ * toggle cannot change.
+ *
+ * THE HOST HERE is the console's shape: a root `<Suspense>` whose fallback
+ * counts its mounts, a host component that mints a mount id once, and the
+ * dialog under a stable key, handed a FRESH schema object on every render as
+ * `AppContent` hands it. The `url` widget is replaced by one whose chunk
+ * resolves only when the test releases it, so the suspension is observable
+ * mid-flight instead of racing the module loader.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, waitFor, fireEvent, screen, act } from '@testing-library/react';
+import React, { Suspense, useState } from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { registerAllFields } from '@object-ui/fields';
+import { ModalForm } from '../ModalForm';
+import { ObjectForm } from '../ObjectForm';
+
+registerAllFields();
+
+/** Replace the `url` widget with one whose chunk lands only on `release()`. */
+function deferUrlWidget(): { release: () => void } {
+  let release: () => void = () => {};
+  const gate = new Promise<void>((resolve) => { release = resolve; });
+  const Deferred = React.lazy(async () => {
+    await gate;
+    return {
+      default: (props: { id?: string; value?: unknown; onChange?: (v: unknown) => void }) => (
+        <input
+          data-testid="deferred-url-widget"
+          id={props.id}
+          value={(props.value as string) ?? ''}
+          onChange={(e) => props.onChange?.(e.target.value)}
+        />
+      ),
+    };
+  });
+  ComponentRegistry.register('url', Deferred, { namespace: 'field', skipFallback: true });
+  return { release: () => act(() => release()) as unknown as void };
+}
+
+const LEAD = {
+  name: 'lead',
+  fields: {
+    first_name: { type: 'text', label: 'First Name' },
+    company: { type: 'text', label: 'Company' },
+    website: { type: 'url', label: 'Website' },
+  },
+};
+
+const makeDataSource = () =>
+  ({
+    getObjectSchema: vi.fn().mockResolvedValue(LEAD),
+    findOne: vi.fn(),
+    create: vi.fn().mockResolvedValue({ id: '1' }),
+    update: vi.fn(),
+  }) as any;
+
+const SECTIONS = (company: Record<string, unknown>) => [
+  { name: 'basic', label: 'Basic', fields: ['first_name'] },
+  { name: 'company_info', label: 'Company Information', ...company, fields: ['company', 'website'] },
+];
+
+/** The console's mount, reduced: root boundary → host → keyed dialog. */
+function mountConsoleShaped(ds: any, company: Record<string, unknown>) {
+  const counts = { hostFallbackMounts: 0, hostMounts: 0 };
+  let rerenderHost: () => void = () => {};
+  function HostFallback() {
+    React.useEffect(() => { counts.hostFallbackMounts++; }, []);
+    return <div data-testid="host-fallback">loading</div>;
+  }
+  function Host() {
+    const [mountId] = useState(() => ++counts.hostMounts);
+    const [, setTick] = useState(0);
+    rerenderHost = () => act(() => setTick((n) => n + 1));
+    return (
+      <div data-testid="host-mount-id" data-mount={mountId}>
+        <ModalForm
+          key="lead:new"
+          // A fresh object every render, as `AppContent` builds it.
+          schema={{
+            type: 'object-form',
+            formType: 'modal',
+            objectName: 'lead',
+            mode: 'create',
+            open: true,
+            title: 'Create Lead',
+            sections: SECTIONS(company),
+          } as any}
+          dataSource={ds}
+        />
+      </div>
+    );
+  }
+  render(
+    <Suspense fallback={<HostFallback />}>
+      <Host />
+    </Suspense>,
+  );
+  return { counts, rerenderHost: () => rerenderHost() };
+}
+
+const sectionHeader = (label: string) =>
+  [...document.body.querySelectorAll('[role="button"][aria-expanded]')].find((el) =>
+    el.textContent?.includes(label),
+  ) as HTMLElement | undefined;
+
+const drawnFields = () =>
+  [...document.body.querySelectorAll('[data-field]')].map((el) => el.getAttribute('data-field'));
+
+const firstNameInput = () =>
+  document.body.querySelector('[data-field="first_name"] input') as HTMLInputElement | null;
+
+/** Whether React's Suspense hiding has taken the dialog off screen. */
+const dialogShown = () => {
+  const dialog = screen.queryByRole('dialog');
+  return !!dialog && dialog.style.display !== 'none';
+};
+
+async function formReady() {
+  await waitFor(() => expect(firstNameInput()).not.toBeNull());
+}
+
+describe('ModalForm — a collapsed section opens in place (objectui#12559)', () => {
+  it('a header click expands the section with no host fallback, no remount, and the typed value kept', async () => {
+    const { release } = deferUrlWidget();
+    const ds = makeDataSource();
+    const { counts } = mountConsoleShaped(ds, { collapsed: true });
+    await formReady();
+
+    fireEvent.change(firstNameInput()!, { target: { value: 'Ada' } });
+    expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('false');
+    expect(drawnFields()).not.toContain('website');
+    const fallbacksBefore = counts.hostFallbackMounts;
+
+    fireEvent.click(sectionHeader('Company Information')!);
+
+    // Mid-load: the field's own slot waits; nothing above the form does.
+    expect(counts.hostFallbackMounts).toBe(fallbacksBefore);
+    expect(screen.queryByTestId('host-fallback')).toBeNull();
+    expect(dialogShown()).toBe(true);
+    expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('true');
+    expect(drawnFields()).toEqual(expect.arrayContaining(['company', 'website']));
+    expect(document.body.querySelector('[data-field="website"] [data-field-widget-pending]')).not.toBeNull();
+
+    release();
+    await screen.findByTestId('deferred-url-widget');
+
+    // The same mount throughout: one host mount, one schema read, the value kept.
+    expect(counts.hostFallbackMounts).toBe(fallbacksBefore);
+    expect(counts.hostMounts).toBe(1);
+    expect(ds.getObjectSchema).toHaveBeenCalledTimes(1);
+    expect(screen.queryByTestId('modal-form-skeleton')).toBeNull();
+    expect(firstNameInput()!.value).toBe('Ada');
+    expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('the toggled state is owned by the dialog: a host re-render with a fresh schema keeps the section open', async () => {
+    const { release } = deferUrlWidget();
+    release();
+    const ds = makeDataSource();
+    const { rerenderHost } = mountConsoleShaped(ds, { collapsed: true });
+    await formReady();
+
+    fireEvent.click(sectionHeader('Company Information')!);
+    await screen.findByTestId('deferred-url-widget');
+    rerenderHost();
+
+    expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('true');
+    expect(drawnFields()).toContain('website');
+  });
+
+  it('control: a section that starts expanded still collapses on a header click', async () => {
+    const { release } = deferUrlWidget();
+    release();
+    const ds = makeDataSource();
+    mountConsoleShaped(ds, { collapsible: true });
+    await formReady();
+    await screen.findByTestId('deferred-url-widget');
+    expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('true');
+
+    fireEvent.click(sectionHeader('Company Information')!);
+
+    expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('false');
+    expect(drawnFields()).not.toContain('website');
+  });
+
+  it('control: the full-page form (ObjectForm, simple) still expands a collapsed section', async () => {
+    const { release } = deferUrlWidget();
+    const ds = makeDataSource();
+    render(
+      <Suspense fallback={<div data-testid="route-fallback">loading</div>}>
+        <ObjectForm
+          schema={{
+            type: 'object-form',
+            formType: 'simple',
+            objectName: 'lead',
+            mode: 'create',
+            sections: SECTIONS({ collapsed: true }),
+          } as any}
+          dataSource={ds}
+        />
+      </Suspense>,
+    );
+    await formReady();
+    expect(drawnFields()).not.toContain('website');
+
+    fireEvent.click(sectionHeader('Company Information')!);
+    release();
+
+    await screen.findByTestId('deferred-url-widget');
+    expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('true');
+    expect(drawnFields()).toEqual(expect.arrayContaining(['company', 'website']));
+  });
+});

From 163f545844c958d76f45c865e1e92a5f5accb4ee Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 20:01:11 +0000
Subject: [PATCH 2/4] chore(components): type the bounded field widget on
 RenderFieldProps; lint-clean the 12559 pin host (objectui#12559)

Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
Co-authored-by: Claude <noreply@anthropic.com>
---
 packages/components/src/renderers/form/form.tsx        | 10 ++++++----
 .../modalSectionToggleSuspense-12559.test.tsx          |  8 +++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
index a60788de51..54d30b3e17 100644
--- a/packages/components/src/renderers/form/form.tsx
+++ b/packages/components/src/renderers/form/form.tsx
@@ -4472,12 +4472,14 @@ function nativeNumberStep(carrier: Record<string, unknown> | undefined): number
  * Slot merges onto it (`id`, `aria-*`, `ref` — a plain prop under React 19)
  * and hands them all to the widget unchanged.
  */
-const boundedFieldWidgets = new WeakMap<React.ComponentType<any>, React.ComponentType<any>>();
+type RegisteredFieldWidget = React.ComponentType<RenderFieldProps>;
 
-function boundedFieldWidget(Widget: React.ComponentType<any>): React.ComponentType<any> {
+const boundedFieldWidgets = new WeakMap<RegisteredFieldWidget, RegisteredFieldWidget>();
+
+function boundedFieldWidget(Widget: RegisteredFieldWidget): RegisteredFieldWidget {
   let Bounded = boundedFieldWidgets.get(Widget);
   if (!Bounded) {
-    const BoundedFieldWidget = (props: Record<string, any>) => (
+    const BoundedFieldWidget = (props: RenderFieldProps) => (
       <React.Suspense fallback={<FieldWidgetPending />}>
         <Widget {...props} />
       </React.Suspense>
@@ -4564,7 +4566,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
     // Drawn through its BOUNDED twin (objectui#12559): a registered widget is
     // typically `React.lazy`, so its first render suspends — see
     // `boundedFieldWidget` for why that suspension must stop at this field.
-    const Bounded = boundedFieldWidget(RegisteredComponent);
+    const Bounded = boundedFieldWidget(RegisteredComponent as RegisteredFieldWidget);
     return <Bounded {...stripRegisteredFieldProps(type, props)} />;
   }
 
diff --git a/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx b/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx
index e6f25e40cc..702fe3ea9e 100644
--- a/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx
+++ b/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx
@@ -92,7 +92,7 @@ const SECTIONS = (company: Record<string, unknown>) => [
 /** The console's mount, reduced: root boundary → host → keyed dialog. */
 function mountConsoleShaped(ds: any, company: Record<string, unknown>) {
   const counts = { hostFallbackMounts: 0, hostMounts: 0 };
-  let rerenderHost: () => void = () => {};
+  const handle = { rerender: () => {} };
   function HostFallback() {
     React.useEffect(() => { counts.hostFallbackMounts++; }, []);
     return <div data-testid="host-fallback">loading</div>;
@@ -100,7 +100,9 @@ function mountConsoleShaped(ds: any, company: Record<string, unknown>) {
   function Host() {
     const [mountId] = useState(() => ++counts.hostMounts);
     const [, setTick] = useState(0);
-    rerenderHost = () => act(() => setTick((n) => n + 1));
+    React.useEffect(() => {
+      handle.rerender = () => act(() => setTick((n) => n + 1));
+    }, []);
     return (
       <div data-testid="host-mount-id" data-mount={mountId}>
         <ModalForm
@@ -125,7 +127,7 @@ function mountConsoleShaped(ds: any, company: Record<string, unknown>) {
       <Host />
     </Suspense>,
   );
-  return { counts, rerenderHost: () => rerenderHost() };
+  return { counts, rerenderHost: () => handle.rerender() };
 }
 
 const sectionHeader = (label: string) =>

From 276d22c175d707e977c8b2f3d6d9022e07e3c273 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 20:16:54 +0000
Subject: [PATCH 3/4] fix(plugin-form): the record dialog owns its body's
 lazy-widget wait (objectui#12559)

Move the boundary from every registered field widget (form renderer) to the
modal form's dialog bodies, the shape FlowRunner gives its screen body. The
per-widget boundary changed the readiness contract of every form in the
product (labels drawn before their controls; a pinned test went red on it),
while the defect is specific to an overlay a host mounts outside its page
boundary. form.tsx is back to main.

Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
Co-authored-by: Claude <noreply@anthropic.com>
---
 .changeset/12559-dialog-section-toggle.md     |  8 +--
 .../components/src/renderers/form/form.tsx    | 58 +------------------
 packages/plugin-form/src/ModalForm.tsx        | 44 +++++++++++++-
 .../modalSectionToggleSuspense-12559.test.tsx | 24 ++++----
 4 files changed, 59 insertions(+), 75 deletions(-)

diff --git a/.changeset/12559-dialog-section-toggle.md b/.changeset/12559-dialog-section-toggle.md
index 1cec7476d9..55e827bdee 100644
--- a/.changeset/12559-dialog-section-toggle.md
+++ b/.changeset/12559-dialog-section-toggle.md
@@ -1,9 +1,9 @@
 ---
-'@object-ui/components': patch
+'@object-ui/plugin-form': patch
 ---
 
-A form field whose widget is still loading no longer takes its host off screen (objectui#12559).
+Opening a collapsed section in a record dialog no longer takes the whole console off screen (objectui#12559).
 
-The field widgets `@object-ui/fields` registers load on demand: a type's code is fetched the first time a form draws it. The form renderer drew such a widget with no loading boundary of its own, so the wait landed on the host's nearest one. In the console's record create and edit dialog that is the boundary around the whole console, because the dialog mounts beside the pages rather than inside one. Opening a collapsed section whose fields used a type not loaded yet, for example a currency or address field, swapped the whole console, dialog included, for the loading screen until the code arrived. The full-page form hid only its page.
+The field widgets `@object-ui/fields` registers load on demand: a type's code is fetched the first time a form draws it. Nothing inside the modal form caught that wait, so it landed on the host's nearest loading boundary. In the console's record create and edit dialog that is the boundary around the whole console, because the dialog mounts beside the pages rather than inside one. Opening a collapsed section whose fields used a type not loaded yet, for example a currency or address field, swapped the whole console, dialog included, for the loading screen until the code arrived. The full-page form hid only its page.
 
-Each registered field widget now waits in its own slot: while its code loads, the field shows a placeholder the height of a control, and the section opens in place with everything typed elsewhere in the form kept. Nothing is added to the package entry: no export, prop or type member.
+The modal form now owns that wait: the dialog keeps its header and footer, its body shows a placeholder until the widget's code arrives, and the form underneath keeps its state, so the section the user opened is open and everything typed elsewhere is kept. Nothing is added to the package entry: no export, prop or type member.
diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
index 54d30b3e17..b067131cdc 100644
--- a/packages/components/src/renderers/form/form.tsx
+++ b/packages/components/src/renderers/form/form.tsx
@@ -4450,57 +4450,6 @@ function nativeNumberStep(carrier: Record<string, unknown> | undefined): number
   return typeof scale === 'number' ? Math.pow(10, -scale) : 'any';
 }
 
-/**
- * A registered field widget behind a `<Suspense>` boundary of the field's own
- * (objectui#12559).
- *
- * The widgets `@object-ui/fields` registers are `React.lazy` — each type's
- * chunk is fetched the first time a form draws that type. Without a boundary
- * here, that first render suspended past the form to the HOST's nearest
- * `<Suspense>`, whatever and wherever it is. For the console's record dialog
- * that is the shell's root boundary — the dialog mounts beside the routes, not
- * inside the route boundary — so expanding a collapsed section whose fields
- * used a type not yet loaded swapped the WHOLE console, dialog included, for
- * the root fallback while the chunk loaded. The full-page form hid only its
- * page, because its nearest boundary is the route's. The renderer that introduces the laziness
- * is the one that owns the wait: a pending widget draws a placeholder in its
- * own slot, and nothing above the field is ever hidden or torn down.
- *
- * The bounded twin is cached PER WIDGET COMPONENT, so its identity is as
- * stable as the registration it wraps: a fresh wrapper per render would
- * remount every widget on every render. It receives the props `<FormControl>`'s
- * Slot merges onto it (`id`, `aria-*`, `ref` — a plain prop under React 19)
- * and hands them all to the widget unchanged.
- */
-type RegisteredFieldWidget = React.ComponentType<RenderFieldProps>;
-
-const boundedFieldWidgets = new WeakMap<RegisteredFieldWidget, RegisteredFieldWidget>();
-
-function boundedFieldWidget(Widget: RegisteredFieldWidget): RegisteredFieldWidget {
-  let Bounded = boundedFieldWidgets.get(Widget);
-  if (!Bounded) {
-    const BoundedFieldWidget = (props: RenderFieldProps) => (
-      <React.Suspense fallback={<FieldWidgetPending />}>
-        <Widget {...props} />
-      </React.Suspense>
-    );
-    Bounded = BoundedFieldWidget;
-    boundedFieldWidgets.set(Widget, Bounded);
-  }
-  return Bounded;
-}
-
-/** The slot a field widget holds while its chunk loads: the height of a control, nothing to read. */
-function FieldWidgetPending() {
-  return (
-    <div
-      className="h-9 w-full animate-pulse rounded-md bg-muted"
-      aria-hidden="true"
-      data-field-widget-pending=""
-    />
-  );
-}
-
 function renderFieldComponent(type: string, props: RenderFieldProps) {
   // 1. Resolve the specialized FIELD WIDGET — and only a field widget.
   //    A form field's type either names a `field:`-namespaced widget or takes
@@ -4562,12 +4511,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
     // `field || schema` to `field` on this path every time — which is why
     // dropping the key here changes no payload, only the number of spellings
     // a widget author has to know.
-    //
-    // Drawn through its BOUNDED twin (objectui#12559): a registered widget is
-    // typically `React.lazy`, so its first render suspends — see
-    // `boundedFieldWidget` for why that suspension must stop at this field.
-    const Bounded = boundedFieldWidget(RegisteredComponent as RegisteredFieldWidget);
-    return <Bounded {...stripRegisteredFieldProps(type, props)} />;
+    return <RegisteredComponent {...stripRegisteredFieldProps(type, props)} />;
   }
 
   const { inputType, options = [], placeholder, readonly, emptyHint, ...fieldProps } = props;
diff --git a/packages/plugin-form/src/ModalForm.tsx b/packages/plugin-form/src/ModalForm.tsx
index 7d4829841f..0a97d769a6 100644
--- a/packages/plugin-form/src/ModalForm.tsx
+++ b/packages/plugin-form/src/ModalForm.tsx
@@ -13,7 +13,7 @@
  * Aligns with @objectstack/spec FormView type: 'modal'
  */
 
-import React, { useState, useCallback, useEffect, useMemo, useId, useRef } from 'react';
+import React, { Suspense, useState, useCallback, useEffect, useMemo, useId, useRef } from 'react';
 import type { FormField, FormSchema, DataSource, ObjectFormSchema, ObjectFormSection } from '@object-ui/types';
 import {
   Dialog,
@@ -1068,6 +1068,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
             </DialogHeader>
           )}
           <div className="@container flex-1 overflow-y-auto px-4 sm:px-6 py-4">
+            <Suspense fallback={<ModalFormBodyPending />}>
             <MasterDetailForm
               schema={{
                 type: 'object-master-detail-form',
@@ -1090,6 +1091,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
               }}
               dataSource={dataSource}
             />
+            </Suspense>
           </div>
         </MobileDialogContent>
       </Dialog>
@@ -1127,7 +1129,11 @@ export const ModalForm: React.FC<ModalFormProps> = ({
               a section, a tab, a subform row (objectui#10166). */}
           <UploadGateProvider gate={uploadGate}>
             {closedAffordanceNotice}
-            {renderContent()}
+            {/* The dialog owns its body's wait (objectui#12559) — see
+                `ModalFormBodyPending`. */}
+            <Suspense fallback={<ModalFormBodyPending />}>
+              {renderContent()}
+            </Suspense>
           </UploadGateProvider>
         </div>
 
@@ -1198,4 +1204,38 @@ export const ModalForm: React.FC<ModalFormProps> = ({
   );
 };
 
+/**
+ * What the dialog's body shows while a field widget's code loads
+ * (objectui#12559).
+ *
+ * The field widgets `@object-ui/fields` registers are `React.lazy`: a type's
+ * chunk is fetched the first time a form draws it, and that first render
+ * SUSPENDS. With no boundary inside the dialog, the suspension left the dialog
+ * and landed on the HOST's nearest `<Suspense>`. A record dialog is an overlay
+ * a host mounts beside its pages — the console mounts this one beside its
+ * routes, under the shell's root boundary — so expanding a collapsed section
+ * whose fields used a type not loaded yet swapped the WHOLE console, dialog
+ * included, for the root fallback while the chunk loaded. A full-page form
+ * sits inside its route's boundary and hid only its page.
+ *
+ * So the dialog owns its body's wait, the shape `FlowRunner` gives its screen
+ * body: the header and footer stay, the body shows this placeholder, and the
+ * form underneath is hidden, not unmounted — React keeps its state, so the
+ * section the user opened is open and every typed value is kept when the
+ * widget lands. Distinct from `modal-form-skeleton`, which is the record READ's
+ * loading state.
+ */
+function ModalFormBodyPending() {
+  return (
+    <div className="space-y-4" data-testid="modal-form-body-pending" aria-hidden="true">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export default ModalForm;
diff --git a/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx b/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx
index 702fe3ea9e..d0f2561369 100644
--- a/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx
+++ b/packages/plugin-form/src/__tests__/modalSectionToggleSuspense-12559.test.tsx
@@ -14,14 +14,13 @@
  * `React.lazy`: a type's chunk is fetched the first time a form draws it. A
  * section that starts collapsed holds its fields out of the DOM, so the click
  * that opens it is often the first render of a type (`currency`, `url`,
- * `address`…). The form renderer drew that lazy widget with no boundary of its
- * own, so the suspension left the form, left `ModalForm`, and landed on the
- * HOST's nearest `<Suspense>`. The console mounts the record dialog beside its
- * routes, under the shell's root boundary, with no route boundary in between —
- * so the whole console, dialog included, was swapped for the root fallback
- * while the chunk loaded. The full-page form hid only its page: its nearest
- * boundary is the route's. The fix is a boundary per registered field widget
- * in the form renderer (`boundedFieldWidget` in `form.tsx`).
+ * `address`…). Nothing inside the dialog caught that suspension, so it left
+ * `ModalForm` and landed on the HOST's nearest `<Suspense>`. The console mounts
+ * the record dialog beside its routes, under the shell's root boundary, with no
+ * route boundary in between — so the whole console, dialog included, was
+ * swapped for the root fallback while the chunk loaded. The full-page form hid
+ * only its page: its nearest boundary is the route's. The fix is a boundary
+ * around the dialog's body (`ModalFormBodyPending` in `ModalForm.tsx`).
  *
  * NOT the producer, read off the code: the collapse state lives in
  * `ModalForm`'s own `useState` (not above the dialog's key), and the console's
@@ -165,13 +164,12 @@ describe('ModalForm — a collapsed section opens in place (objectui#12559)', ()
 
     fireEvent.click(sectionHeader('Company Information')!);
 
-    // Mid-load: the field's own slot waits; nothing above the form does.
+    // Mid-load: the dialog's body waits; nothing above the dialog does.
     expect(counts.hostFallbackMounts).toBe(fallbacksBefore);
     expect(screen.queryByTestId('host-fallback')).toBeNull();
     expect(dialogShown()).toBe(true);
-    expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('true');
-    expect(drawnFields()).toEqual(expect.arrayContaining(['company', 'website']));
-    expect(document.body.querySelector('[data-field="website"] [data-field-widget-pending]')).not.toBeNull();
+    expect(screen.getByRole('dialog').textContent).toContain('Create Lead');
+    expect(screen.getByRole('dialog').querySelector('[data-testid="modal-form-body-pending"]')).not.toBeNull();
 
     release();
     await screen.findByTestId('deferred-url-widget');
@@ -181,8 +179,10 @@ describe('ModalForm — a collapsed section opens in place (objectui#12559)', ()
     expect(counts.hostMounts).toBe(1);
     expect(ds.getObjectSchema).toHaveBeenCalledTimes(1);
     expect(screen.queryByTestId('modal-form-skeleton')).toBeNull();
+    expect(screen.queryByTestId('modal-form-body-pending')).toBeNull();
     expect(firstNameInput()!.value).toBe('Ada');
     expect(sectionHeader('Company Information')?.getAttribute('aria-expanded')).toBe('true');
+    expect(drawnFields()).toEqual(expect.arrayContaining(['company', 'website']));
   });
 
   it('the toggled state is owned by the dialog: a host re-render with a fresh schema keeps the section open', async () => {

From 48a6bc42c171fcb0dac960b0e4b2c11faf04c1d2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 20:31:48 +0000
Subject: [PATCH 4/4] test(plugin-form): read the tabbed dialog's form once its
 body has stopped waiting (objectui#12559)

Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
Co-authored-by: Claude <noreply@anthropic.com>
---
 packages/plugin-form/src/sectionedFormValues.test.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/plugin-form/src/sectionedFormValues.test.tsx b/packages/plugin-form/src/sectionedFormValues.test.tsx
index 735acede7f..2bd0afc130 100644
--- a/packages/plugin-form/src/sectionedFormValues.test.tsx
+++ b/packages/plugin-form/src/sectionedFormValues.test.tsx
@@ -112,6 +112,10 @@ describe('ModalForm tabbed sections — per-tab form state (#2959)', () => {
     );
 
     await waitFor(() => expect(screen.getByTestId('modal-form-footer')).toBeTruthy());
+    // The footer is drawn while the body still waits on a field widget's code
+    // (objectui#12559: the dialog owns that wait), so the form is read once
+    // the body's placeholder has gone.
+    await waitFor(() => expect(screen.queryByTestId('modal-form-body-pending')).toBeNull());
 
     // ONE form for all three sections — the shared-`formId` duplicate <form>
     // elements are what stranded section 2+ outside the submit (#2153).