fix(form): keep the fieldTabs schema keys off the DOM, and make tab position work

Two follow-ups found by running the tabbed form in a real browser (console
preview gallery):

- `fieldTabs` / `defaultFieldTab` / `fieldTabsPosition` bled through
  `...formProps` onto the <form> element ("React does not recognize the
  `fieldTabs` prop on a DOM element"), the same leak the neighbouring
  destructure already guards `objectName` / `onDirtyChange` / `fields` against.
  Added to that list, with a regression test that spreads the form node at the
  top level the way the SDUI dispatch does.

- `fieldTabsPosition: 'bottom' | 'right'` positioned the strip with
  `order-last`, which does nothing unless the parent is a flex container — the
  root was only flex in the vertical case (a quirk carried over verbatim from
  TabbedForm). The Tabs root is now always flex (`flex-col` when horizontal),
  the strip keeps its content size via `self-start`, and `bottom` swaps its
  margin to `mt-4`.

Re-verified in the browser: single form, panels force-mounted with the inactive
ones computed `display: none`, strip content-width above the panel, and no
console errors.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: os-zhuang

packages/components/src/renderers/form/__tests__/form-field-tabs.test.tsx

@@ -138,6 +138,27 @@ describe('form renderer — fieldTabs (#2959)', () => {
     expect(screen.getByTestId('form-tab-panel:detail')).toHaveAttribute('data-state', 'active');
   });
 
+  it('keeps the tab schema keys off the <form> DOM element', () => {
+    // Callers/the SDUI dispatch spread the whole form node at the top level too,
+    // so a FormSchema key that isn't consumed leaks onto the DOM and React logs
+    // "does not recognize the `fieldTabs` prop on a DOM element".
+    const Form = ComponentRegistry.get('form')!;
+    const { container } = render(
+      <Form
+        schema={{ type: 'form', fields: FIELDS, fieldTabs: TABS }}
+        // The top-level spread that reproduces the leak.
+        fields={FIELDS}
+        fieldTabs={TABS}
+        defaultFieldTab="detail"
+        fieldTabsPosition="top"
+      />,
+    );
+    const form = container.querySelector('form')!;
+    for (const attr of ['fieldtabs', 'defaultfieldtab', 'fieldtabsposition']) {
+      expect(form.hasAttribute(attr)).toBe(false);
+    }
+  });
+
   it('renders fields no tab claims instead of dropping them', () => {
     const { container } = renderTabbedForm({
       fieldTabs: [

packages/components/src/renderers/form/form.tsx

@@ -1151,6 +1151,9 @@ ComponentRegistry.register('form',
           columns: _columns,
           validationMode: _validationMode,
           disabled: _disabledProp,
+          fieldTabs: _fieldTabs,
+          defaultFieldTab: _defaultFieldTab,
+          fieldTabsPosition: _fieldTabsPosition,
 	        ...formProps
 	    } = props;
 
@@ -1195,13 +1198,19 @@ ComponentRegistry.register('form',
                 value={activeFieldTab}
                 onValueChange={setPickedFieldTab}
                 orientation={isVerticalFieldTabs ? 'vertical' : 'horizontal'}
-                className={cn('w-full', isVerticalFieldTabs && 'flex gap-4')}
+                // Always a flex container: `order-last` on the strip is what
+                // puts it after the panels for `bottom`/`right`, and `order`
+                // only applies to flex children.
+                className={cn('flex w-full', isVerticalFieldTabs ? 'gap-4' : 'flex-col')}
               >
                 <TabsList
                   className={cn(
-                    'mb-4',
-                    isVerticalFieldTabs && 'h-auto flex-col',
-                    (fieldTabsPosition === 'bottom' || fieldTabsPosition === 'right') && 'order-last',
+                    // `self-start` keeps the strip its content's size instead of
+                    // being stretched by the flex container above.
+                    'self-start',
+                    isVerticalFieldTabs
+                      ? cn('h-auto flex-col', fieldTabsPosition === 'right' && 'order-last')
+                      : fieldTabsPosition === 'bottom' ? 'order-last mt-4' : 'mb-4',
                   )}
                 >
                   {fieldTabGroups.map((group) => (