feat(plugin-form): render object fieldGroups as full-width, collapsible form sections (#1789)

* feat(plugin-form): render object fieldGroups as form sections

ObjectForm only honored field groups in the designer preview. Now the
runtime SimpleObjectForm auto-derives sections from an object's declared
`fieldGroups` + each field's `group` when no explicit sections are given,
so authored groups show up on the actual record form.

- Add fieldGroups.ts helper (readObjectFieldGroups / deriveFieldGroupSections)
  mirroring the designer's grouping semantics (declared order, trailing
  untitled bucket for ungrouped fields).
- Carry field `group` onto generated FormFields.
- Reuse the existing section-render path (i18n + FLS) via derived sections.
- Unit + integration tests.

* feat(plugin-form): full-width, collapsible fieldGroup form sections

Render fieldGroup-derived simple-form sections as full-width, optionally
collapsible groups, and fix a latent multi-section submit bug.

Previously each derived section rendered its own <SchemaRenderer type="form">
— i.e. N independent react-hook-form instances — with the submit button only
on the last one. Submitting therefore captured just the last group's fields
and silently dropped every other group's edits.

All sections now share ONE form (the same single-form pattern DrawerForm uses):
a virtual `section-divider` field renders each group's header and the group's
fields follow inline. This fixes submit (every field is captured), lets a
collapsed group simply hide its fields (`hidden: true`) while react-hook-form
retains their values, and lets cross-section field conditions resolve via
watch().

Field groups gain `collapsible` / `collapsed` flags: `readObjectFieldGroups`
reads them and `deriveFieldGroupSections` passes them through to the section.

The byo-backend-console example is fixed and extended to demo this: the
Tailwind v4 entry (index.css) is corrected so @object-ui components are styled,
a standalone /form/:objectName route renders the simple ObjectForm, and the
contact mock declares two collapsible groups plus an ungrouped field.

Tests: readObjectFieldGroups reads/validates the flags; deriveFieldGroupSections
passes them through and omits them when absent; ObjectForm collapses a group on
header click (its fields leave the DOM) and restores them on expand.

Author: baozhoutao

examples/byo-backend-console/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@object-ui/app-shell": "workspace:*",
     "@object-ui/components": "workspace:*",
+    "@object-ui/plugin-form": "workspace:*",
     "@object-ui/plugin-view": "workspace:*",
     "@object-ui/providers": "workspace:*",
     "@object-ui/react": "workspace:*",

examples/byo-backend-console/src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
 import { AppShell } from '@object-ui/app-shell';
 import { ObjectView } from '@object-ui/plugin-view';
+import { ObjectForm } from '@object-ui/plugin-form';
 import { ThemeProvider, DataSourceProvider } from '@object-ui/providers';
 import { mockDataSource } from './mockDataSource';
 
@@ -19,6 +20,7 @@ function App() {
           <AppShell sidebar={<Sidebar />}>
             <Routes>
               <Route path="/" element={<Home />} />
+              <Route path="/form/:objectName" element={<ObjectFormPage />} />
               <Route path="/:objectName" element={<ObjectPage />} />
             </Routes>
           </AppShell>
@@ -52,6 +54,12 @@ function Sidebar() {
         >
           Accounts
         </Link>
+        <Link
+          to="/form/contact"
+          className="block rounded px-3 py-2 text-sm hover:bg-accent"
+        >
+          Contact Form (grouped)
+        </Link>
       </div>
 
       <div className="mt-auto border-t pt-4 text-xs text-muted-foreground">
@@ -137,4 +145,29 @@ function ObjectPage() {
   );
 }
 
+/**
+ * Standalone simple ObjectForm. Unlike the grid's modal create/view dialogs,
+ * this is the default `formType: 'simple'` form — so when the object declares
+ * `fieldGroups` (see mockDataSource), the form renders grouped sections.
+ */
+function ObjectFormPage() {
+  const { objectName } = useParams<{ objectName: string }>();
+
+  return (
+    <div className="mx-auto max-w-2xl p-8">
+      <h1 className="mb-6 text-2xl font-bold">
+        New {objectName} (simple form)
+      </h1>
+      <ObjectForm
+        schema={{
+          type: 'object-form',
+          objectName: objectName || '',
+          mode: 'create',
+        }}
+        dataSource={mockDataSource}
+      />
+    </div>
+  );
+}
+
 export default App;

examples/byo-backend-console/src/index.css

@@ -1,45 +1,176 @@
 /**
- * Minimal CSS for the example
- * In a real app, you'd import your full Tailwind setup
+ * Tailwind v4 setup for the example.
+ *
+ * This project depends on Tailwind v4 (`@tailwindcss/postcss`), so it MUST use
+ * the v4 entry syntax — NOT the legacy v3 `@tailwind base/components/utilities`
+ * directives (v4 ignores them, which is why the form/grid/app-shell rendered
+ * completely unstyled).
+ *
+ * Three pieces are required, mirroring apps/console/src/index.css:
+ *  1. `@import 'tailwindcss'`                       — Tailwind v4 engine + preflight.
+ *  2. `@import '@object-ui/app-shell/styles.css'`   — shared variant/theming contract.
+ *  3. `@theme { --color-*: hsl(var(--*)) }` + `:root`/`.dark` token blocks —
+ *     registers `bg-card` / `text-muted-foreground` / `border` etc. as real
+ *     utilities AND gives them values. Without the `@theme` mapping those
+ *     class names don't exist in v4.
+ *  4. `@source` globs — Tailwind only generates classes it can see; the class
+ *     names live inside the `@object-ui/*` package sources, so those dirs must
+ *     be scanned or the components stay unstyled.
  */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-}
+@import 'tailwindcss';
+@import '@object-ui/app-shell/styles.css';
 
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-}
+/* Scan this app + every ObjectUI package whose components we render. */
+@source '../src/**/*.{ts,tsx}';
+@source '../../../packages/app-shell/src/**/*.{ts,tsx}';
+@source '../../../packages/components/src/**/*.{ts,tsx}';
+@source '../../../packages/layout/src/**/*.{ts,tsx}';
+@source '../../../packages/fields/src/**/*.{ts,tsx}';
+@source '../../../packages/react/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-form/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-view/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-grid/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-list/src/**/*.{ts,tsx}';
+@source '../../../packages/plugin-detail/src/**/*.{ts,tsx}';
+
+/* Map the shadcn-style HSL design tokens to Tailwind v4 color utilities. */
+@theme {
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
 
-* {
-  border-color: hsl(var(--border));
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
 }
 
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 243 75% 59%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 243 75% 59%;
+
+    --radius: 0.5rem;
+
+    --sidebar: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 243 75% 59%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 243 75% 59%;
+
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 239 84% 67%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 239 84% 67%;
+
+    --sidebar: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 239 84% 67%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 239 84% 67%;
+
+    --success: 142 65% 50%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 55%;
+    --warning-foreground: 0 0% 10%;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
 }