@uipath/apollo-wind 2.29.0 → 2.31.0

package/dist/components/forms/form-schema.d.ts

@@ -255,6 +255,14 @@ export interface FormStep {
     validation?: 'onChange' | 'onBlur' | 'onSubmit';
     canSkip?: boolean;
     conditions?: FieldCondition[];
+    /**
+     * Message shown (in the `tabs` step variant) when this step has no visible
+     * sections. A step that sets this stays in the tab bar even while empty and
+     * renders the message in place of its content — e.g. a "Parameters" tab that
+     * always shows, reading "No available parameters" for a node with no inputs.
+     * Steps without both sections and `emptyState` are hidden from the tab bar.
+     */
+    emptyState?: string;
 }
 export interface FormAction {
     id: string;

package/dist/components/forms/metadata-form.cjs

@@ -39,7 +39,7 @@ const external_field_renderer_cjs_namespaceObject = require("./field-renderer.cj
 const external_rules_engine_cjs_namespaceObject = require("./rules-engine.cjs");
 const external_validation_converter_cjs_namespaceObject = require("./validation-converter.cjs");
 const DEFAULT_PLUGINS = [];
-function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard' }) {
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard', sectionVariant = 'card', activeStepId, onActiveStepChange }) {
     const [currentStep, setCurrentStep] = (0, external_react_namespaceObject.useState)(0);
     const [customComponents, setCustomComponents] = (0, external_react_namespaceObject.useState)({});
     const [isInitialized, setIsInitialized] = (0, external_react_namespaceObject.useState)(false);
@@ -131,6 +131,9 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 context: context,
                 customComponents: customComponents,
                 disabled: disabled,
+                sectionVariant: sectionVariant,
+                activeStepId: activeStepId,
+                onActiveStepChange: onActiveStepChange,
                 onReset: ()=>reset()
             });
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(MultiStepForm, {
@@ -139,14 +142,16 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 currentStep: currentStep,
                 setCurrentStep: setCurrentStep,
                 customComponents: customComponents,
-                disabled: disabled
+                disabled: disabled,
+                sectionVariant: sectionVariant
             });
         }
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SinglePageForm, {
             schema: schema,
             context: context,
             customComponents: customComponents,
-            disabled: disabled
+            disabled: disabled,
+            sectionVariant: sectionVariant
         });
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.FormProvider, {
@@ -166,20 +171,21 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
         })
     });
 }
-function SinglePageForm({ schema, context, customComponents, disabled }) {
+function SinglePageForm({ schema, context, customComponents, disabled, sectionVariant }) {
     const sections = schema.sections || [];
     const visibleSections = sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: "space-y-2",
+        className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
         children: visibleSections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
                 section: section,
                 context: context,
                 customComponents: customComponents,
-                disabled: disabled
+                disabled: disabled,
+                sectionVariant: sectionVariant
             }, section.id))
     });
 }
-function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled }) {
+function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled, sectionVariant }) {
     const steps = schema.steps || [];
     const step = steps[currentStep];
     if (!step) return null;
@@ -217,12 +223,13 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
                 ]
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: "space-y-2",
+                className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
                 children: step.sections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
                         section: section,
                         context: context,
                         customComponents: customComponents,
-                        disabled: disabled
+                        disabled: disabled,
+                        sectionVariant: sectionVariant
                     }, section.id))
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
@@ -250,15 +257,39 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
         ]
     });
 }
-function TabbedStepForm({ schema, context, customComponents, disabled, onReset }) {
+function TabbedStepForm({ schema, context, customComponents, disabled, sectionVariant, onReset, activeStepId, onActiveStepChange }) {
     const steps = schema.steps || [];
-    const visibleSteps = steps.filter((step)=>step.sections.length > 0 && (!step.conditions || context.evaluateConditions(step.conditions)));
-    const [activeTab, setActiveTab] = (0, external_react_namespaceObject.useState)('');
-    const currentTab = visibleSteps.some((step)=>step.id === activeTab) ? activeTab : visibleSteps[0]?.id ?? '';
+    const visibleSteps = steps.filter((step)=>{
+        if (step.conditions && !context.evaluateConditions(step.conditions)) return false;
+        const hasVisibleSection = step.sections.some((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+        return hasVisibleSection || void 0 !== step.emptyState;
+    });
+    const formState = (0, external_react_hook_form_namespaceObject.useFormState)({
+        control: context.form.control
+    });
+    const errorCountByStepId = {};
+    for (const step of visibleSteps){
+        let count = 0;
+        for (const section of step.sections)if (!section.conditions || context.evaluateConditions(section.conditions)) for (const field of section.fields){
+            if (field.rules && !external_rules_engine_cjs_namespaceObject.RulesEngine.isFieldVisible(field.rules, context.values)) continue;
+            const fieldError = context.form.getFieldState(field.name, formState).error;
+            if (fieldError) count += Array.isArray(fieldError) ? fieldError.filter(Boolean).length : 1;
+        }
+        errorCountByStepId[step.id] = count;
+    }
+    const [internalTab, setInternalTab] = (0, external_react_namespaceObject.useState)('');
+    const controlled = void 0 !== activeStepId;
+    const requestedTab = controlled ? activeStepId : internalTab;
+    const currentTab = visibleSteps.some((step)=>step.id === requestedTab) ? requestedTab : visibleSteps[0]?.id ?? '';
+    const selectTab = (stepId)=>{
+        if (!controlled) setInternalTab(stepId);
+        onActiveStepChange?.(stepId);
+    };
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (activeTab !== currentTab) setActiveTab(currentTab);
+        if (!controlled && internalTab !== currentTab) setInternalTab(currentTab);
     }, [
-        activeTab,
+        controlled,
+        internalTab,
         currentTab
     ]);
     if (0 === visibleSteps.length) return null;
@@ -266,27 +297,53 @@ function TabbedStepForm({ schema, context, customComponents, disabled, onReset }
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.Tabs, {
                 value: currentTab,
-                onValueChange: setActiveTab,
-                className: "flex flex-col gap-4",
+                onValueChange: selectTab,
+                className: "flex min-h-0 flex-1 flex-col gap-1",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsList, {
-                        className: "h-auto justify-start gap-0.5 overflow-x-auto rounded-lg bg-transparent p-0.5 text-muted-foreground [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-                        children: visibleSteps.map((step)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsTrigger, {
-                                value: step.id,
-                                className: "inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-                                children: step.title
-                            }, step.id))
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        className: "shrink-0 pt-3 [padding-inline:var(--mf-content-inset,0px)]",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.ScrollableTabsList, {
+                            className: "h-auto justify-start gap-0.5 rounded-lg bg-transparent px-0 py-0.5 text-muted-foreground",
+                            scrollButtonClassName: "size-6 hover:bg-surface-overlay",
+                            children: visibleSteps.map((step)=>{
+                                const errorCount = errorCountByStepId[step.id] ?? 0;
+                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tabs_cjs_namespaceObject.TabsTrigger, {
+                                    value: step.id,
+                                    className: "inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+                                    children: [
+                                        step.title,
+                                        errorCount > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                            role: "img",
+                                            "aria-label": `${errorCount} ${1 === errorCount ? 'issue' : 'issues'}`,
+                                            title: `${errorCount} ${1 === errorCount ? 'issue' : 'issues'}`,
+                                            className: "grid h-4 min-w-4 place-items-center rounded-full bg-error px-1 text-[10px] font-semibold leading-none text-foreground-on-accent",
+                                            children: errorCount
+                                        })
+                                    ]
+                                }, step.id);
+                            })
+                        })
                     }),
-                    visibleSteps.map((step)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
+                    visibleSteps.map((step)=>{
+                        const stepSections = step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {
                             value: step.id,
-                            className: "space-y-2",
-                            children: step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions)).map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
-                                    section: section,
-                                    context: context,
-                                    customComponents: customComponents,
-                                    disabled: disabled
-                                }, section.id))
-                        }, step.id))
+                            className: "mt-0 min-h-0 flex-1 overflow-auto",
+                            children: 0 === stepSections.length && void 0 !== step.emptyState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "pt-4 text-sm text-muted-foreground [padding-inline:var(--mf-content-inset,0px)]",
+                                children: step.emptyState
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: 'plain' === sectionVariant ? 'pb-6 [padding-inline:var(--mf-content-inset,0px)]' : 'space-y-2 pb-6 pt-4 [padding-inline:var(--mf-content-inset,0px)]',
+                                children: stepSections.map((section)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormSection, {
+                                        section: section,
+                                        context: context,
+                                        customComponents: customComponents,
+                                        disabled: disabled,
+                                        sectionVariant: sectionVariant
+                                    }, section.id))
+                            })
+                        }, step.id);
+                    })
                 ]
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormActions, {
@@ -297,9 +354,13 @@ function TabbedStepForm({ schema, context, customComponents, disabled, onReset }
         ]
     });
 }
-function FormSection({ section, context, customComponents, disabled }) {
+function FormSection({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
     const gridColumns = context.schema.layout?.columns || 1;
     const gap = context.schema.layout?.gap || 4;
+    const isPlain = 'plain' === sectionVariant;
+    const dividerClassName = 'border-t first:border-t-0';
+    const wrapperClassName = isPlain ? 'border-b-0' : 'border rounded-lg px-3';
+    const triggerClassName = isPlain ? 'justify-start gap-2 py-4 text-sm font-semibold hover:no-underline' : 'text-sm font-medium';
     const fieldsGrid = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: "grid",
         style: {
@@ -313,7 +374,10 @@ function FormSection({ section, context, customComponents, disabled }) {
                 disabled: disabled
             }, field.name))
     });
-    if (!section.title) return fieldsGrid;
+    if (!section.title) return isPlain ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: `${dividerClassName} pb-4 pt-4`,
+        children: fieldsGrid
+    }) : fieldsGrid;
     const innerContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: "flex flex-col gap-4",
         children: [
@@ -331,12 +395,13 @@ function FormSection({ section, context, customComponents, disabled }) {
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.Accordion, {
             type: "multiple",
             defaultValue: defaultValue,
+            className: isPlain ? dividerClassName : void 0,
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(accordion_cjs_namespaceObject.AccordionItem, {
                 value: section.id,
-                className: "border rounded-lg px-3",
+                className: wrapperClassName,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.AccordionTrigger, {
-                        className: "text-sm font-medium",
+                        className: triggerClassName,
                         children: section.title
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(accordion_cjs_namespaceObject.AccordionContent, {
@@ -347,12 +412,12 @@ function FormSection({ section, context, customComponents, disabled }) {
         });
     }
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: "border rounded-lg px-3",
+        className: isPlain ? dividerClassName : wrapperClassName,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "flex",
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                    className: "flex flex-1 items-center justify-between py-4 text-sm font-medium",
+                    className: isPlain ? 'flex flex-1 items-center justify-start gap-2 py-4 text-sm font-semibold' : 'flex flex-1 items-center justify-between py-4 text-sm font-medium',
                     children: section.title
                 })
             }),

package/dist/components/forms/metadata-form.d.ts

@@ -18,6 +18,30 @@ interface MetadataFormProps {
      * across every step. Ignored for single-page (`sections`) schemas.
      */
     stepVariant?: 'wizard' | 'tabs';
+    /**
+     * Visual treatment for each titled section. `'card'` (default) wraps every
+     * section in a bordered, rounded, horizontally-padded box. `'plain'` drops the
+     * border, rounding, and horizontal padding so sections read as flush headers
+     * over their content, separated by a full-width hairline divider between
+     * consecutive sections — used by hosts (e.g. the canvas properties panel) that
+     * already frame the form and want a borderless list. Applies to both
+     * collapsible (accordion) and non-collapsible sections across every layout
+     * (single-page, wizard, tabs).
+     */
+    sectionVariant?: 'card' | 'plain';
+    /**
+     * Controlled active step id for the `tabs` step variant. When provided the
+     * caller owns which tab is selected — persist it across remounts to keep the
+     * user on the same tab when switching between nodes. If the id isn't one of
+     * the currently visible steps, the form shows the first tab without mutating
+     * the caller's value. Omit for uncontrolled (internal) tab state.
+     */
+    activeStepId?: string;
+    /**
+     * Fires with the step id whenever the user selects a tab, in both controlled
+     * and uncontrolled mode. Pair it with `activeStepId` to persist the selection.
+     */
+    onActiveStepChange?: (stepId: string) => void;
 }
-export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, stepVariant, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataForm({ schema, plugins, onSubmit, className, disabled, autoComplete, stepVariant, sectionVariant, activeStepId, onActiveStepChange, }: MetadataFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/forms/metadata-form.js

@@ -1,17 +1,17 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm, useFormState } from "react-hook-form";
 import { z } from "zod/v4";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion.js";
 import { Button } from "../ui/button.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
+import { ScrollableTabsList, Tabs, TabsContent, TabsTrigger } from "../ui/tabs.js";
 import { DataFetcher } from "./data-fetcher.js";
 import { FormFieldRenderer } from "./field-renderer.js";
 import { RulesEngine } from "./rules-engine.js";
 import { validationConfigToZod } from "./validation-converter.js";
 const DEFAULT_PLUGINS = [];
-function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard' }) {
+function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className, disabled = false, autoComplete, stepVariant = 'wizard', sectionVariant = 'card', activeStepId, onActiveStepChange }) {
     const [currentStep, setCurrentStep] = useState(0);
     const [customComponents, setCustomComponents] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
@@ -103,6 +103,9 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 context: context,
                 customComponents: customComponents,
                 disabled: disabled,
+                sectionVariant: sectionVariant,
+                activeStepId: activeStepId,
+                onActiveStepChange: onActiveStepChange,
                 onReset: ()=>reset()
             });
             return /*#__PURE__*/ jsx(MultiStepForm, {
@@ -111,14 +114,16 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
                 currentStep: currentStep,
                 setCurrentStep: setCurrentStep,
                 customComponents: customComponents,
-                disabled: disabled
+                disabled: disabled,
+                sectionVariant: sectionVariant
             });
         }
         return /*#__PURE__*/ jsx(SinglePageForm, {
             schema: schema,
             context: context,
             customComponents: customComponents,
-            disabled: disabled
+            disabled: disabled,
+            sectionVariant: sectionVariant
         });
     };
     return /*#__PURE__*/ jsx(FormProvider, {
@@ -138,20 +143,21 @@ function MetadataForm({ schema, plugins = DEFAULT_PLUGINS, onSubmit, className,
         })
     });
 }
-function SinglePageForm({ schema, context, customComponents, disabled }) {
+function SinglePageForm({ schema, context, customComponents, disabled, sectionVariant }) {
     const sections = schema.sections || [];
     const visibleSections = sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
     return /*#__PURE__*/ jsx("div", {
-        className: "space-y-2",
+        className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
         children: visibleSections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
                 section: section,
                 context: context,
                 customComponents: customComponents,
-                disabled: disabled
+                disabled: disabled,
+                sectionVariant: sectionVariant
             }, section.id))
     });
 }
-function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled }) {
+function MultiStepForm({ schema, context, currentStep, setCurrentStep, customComponents, disabled, sectionVariant }) {
     const steps = schema.steps || [];
     const step = steps[currentStep];
     if (!step) return null;
@@ -189,12 +195,13 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
-                className: "space-y-2",
+                className: 'plain' === sectionVariant ? void 0 : 'space-y-2',
                 children: step.sections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
                         section: section,
                         context: context,
                         customComponents: customComponents,
-                        disabled: disabled
+                        disabled: disabled,
+                        sectionVariant: sectionVariant
                     }, section.id))
             }),
             /*#__PURE__*/ jsxs("div", {
@@ -222,15 +229,39 @@ function MultiStepForm({ schema, context, currentStep, setCurrentStep, customCom
         ]
     });
 }
-function TabbedStepForm({ schema, context, customComponents, disabled, onReset }) {
+function TabbedStepForm({ schema, context, customComponents, disabled, sectionVariant, onReset, activeStepId, onActiveStepChange }) {
     const steps = schema.steps || [];
-    const visibleSteps = steps.filter((step)=>step.sections.length > 0 && (!step.conditions || context.evaluateConditions(step.conditions)));
-    const [activeTab, setActiveTab] = useState('');
-    const currentTab = visibleSteps.some((step)=>step.id === activeTab) ? activeTab : visibleSteps[0]?.id ?? '';
+    const visibleSteps = steps.filter((step)=>{
+        if (step.conditions && !context.evaluateConditions(step.conditions)) return false;
+        const hasVisibleSection = step.sections.some((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+        return hasVisibleSection || void 0 !== step.emptyState;
+    });
+    const formState = useFormState({
+        control: context.form.control
+    });
+    const errorCountByStepId = {};
+    for (const step of visibleSteps){
+        let count = 0;
+        for (const section of step.sections)if (!section.conditions || context.evaluateConditions(section.conditions)) for (const field of section.fields){
+            if (field.rules && !RulesEngine.isFieldVisible(field.rules, context.values)) continue;
+            const fieldError = context.form.getFieldState(field.name, formState).error;
+            if (fieldError) count += Array.isArray(fieldError) ? fieldError.filter(Boolean).length : 1;
+        }
+        errorCountByStepId[step.id] = count;
+    }
+    const [internalTab, setInternalTab] = useState('');
+    const controlled = void 0 !== activeStepId;
+    const requestedTab = controlled ? activeStepId : internalTab;
+    const currentTab = visibleSteps.some((step)=>step.id === requestedTab) ? requestedTab : visibleSteps[0]?.id ?? '';
+    const selectTab = (stepId)=>{
+        if (!controlled) setInternalTab(stepId);
+        onActiveStepChange?.(stepId);
+    };
     useEffect(()=>{
-        if (activeTab !== currentTab) setActiveTab(currentTab);
+        if (!controlled && internalTab !== currentTab) setInternalTab(currentTab);
     }, [
-        activeTab,
+        controlled,
+        internalTab,
         currentTab
     ]);
     if (0 === visibleSteps.length) return null;
@@ -238,27 +269,53 @@ function TabbedStepForm({ schema, context, customComponents, disabled, onReset }
         children: [
             /*#__PURE__*/ jsxs(Tabs, {
                 value: currentTab,
-                onValueChange: setActiveTab,
-                className: "flex flex-col gap-4",
+                onValueChange: selectTab,
+                className: "flex min-h-0 flex-1 flex-col gap-1",
                 children: [
-                    /*#__PURE__*/ jsx(TabsList, {
-                        className: "h-auto justify-start gap-0.5 overflow-x-auto rounded-lg bg-transparent p-0.5 text-muted-foreground [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-                        children: visibleSteps.map((step)=>/*#__PURE__*/ jsx(TabsTrigger, {
-                                value: step.id,
-                                className: "inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-                                children: step.title
-                            }, step.id))
+                    /*#__PURE__*/ jsx("div", {
+                        className: "shrink-0 pt-3 [padding-inline:var(--mf-content-inset,0px)]",
+                        children: /*#__PURE__*/ jsx(ScrollableTabsList, {
+                            className: "h-auto justify-start gap-0.5 rounded-lg bg-transparent px-0 py-0.5 text-muted-foreground",
+                            scrollButtonClassName: "size-6 hover:bg-surface-overlay",
+                            children: visibleSteps.map((step)=>{
+                                const errorCount = errorCountByStepId[step.id] ?? 0;
+                                return /*#__PURE__*/ jsxs(TabsTrigger, {
+                                    value: step.id,
+                                    className: "inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+                                    children: [
+                                        step.title,
+                                        errorCount > 0 && /*#__PURE__*/ jsx("span", {
+                                            role: "img",
+                                            "aria-label": `${errorCount} ${1 === errorCount ? 'issue' : 'issues'}`,
+                                            title: `${errorCount} ${1 === errorCount ? 'issue' : 'issues'}`,
+                                            className: "grid h-4 min-w-4 place-items-center rounded-full bg-error px-1 text-[10px] font-semibold leading-none text-foreground-on-accent",
+                                            children: errorCount
+                                        })
+                                    ]
+                                }, step.id);
+                            })
+                        })
                     }),
-                    visibleSteps.map((step)=>/*#__PURE__*/ jsx(TabsContent, {
+                    visibleSteps.map((step)=>{
+                        const stepSections = step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions));
+                        return /*#__PURE__*/ jsx(TabsContent, {
                             value: step.id,
-                            className: "space-y-2",
-                            children: step.sections.filter((section)=>!section.conditions || context.evaluateConditions(section.conditions)).map((section)=>/*#__PURE__*/ jsx(FormSection, {
-                                    section: section,
-                                    context: context,
-                                    customComponents: customComponents,
-                                    disabled: disabled
-                                }, section.id))
-                        }, step.id))
+                            className: "mt-0 min-h-0 flex-1 overflow-auto",
+                            children: 0 === stepSections.length && void 0 !== step.emptyState ? /*#__PURE__*/ jsx("div", {
+                                className: "pt-4 text-sm text-muted-foreground [padding-inline:var(--mf-content-inset,0px)]",
+                                children: step.emptyState
+                            }) : /*#__PURE__*/ jsx("div", {
+                                className: 'plain' === sectionVariant ? 'pb-6 [padding-inline:var(--mf-content-inset,0px)]' : 'space-y-2 pb-6 pt-4 [padding-inline:var(--mf-content-inset,0px)]',
+                                children: stepSections.map((section)=>/*#__PURE__*/ jsx(FormSection, {
+                                        section: section,
+                                        context: context,
+                                        customComponents: customComponents,
+                                        disabled: disabled,
+                                        sectionVariant: sectionVariant
+                                    }, section.id))
+                            })
+                        }, step.id);
+                    })
                 ]
             }),
             /*#__PURE__*/ jsx(FormActions, {
@@ -269,9 +326,13 @@ function TabbedStepForm({ schema, context, customComponents, disabled, onReset }
         ]
     });
 }
-function FormSection({ section, context, customComponents, disabled }) {
+function FormSection({ section, context, customComponents, disabled, sectionVariant = 'card' }) {
     const gridColumns = context.schema.layout?.columns || 1;
     const gap = context.schema.layout?.gap || 4;
+    const isPlain = 'plain' === sectionVariant;
+    const dividerClassName = 'border-t first:border-t-0';
+    const wrapperClassName = isPlain ? 'border-b-0' : 'border rounded-lg px-3';
+    const triggerClassName = isPlain ? 'justify-start gap-2 py-4 text-sm font-semibold hover:no-underline' : 'text-sm font-medium';
     const fieldsGrid = /*#__PURE__*/ jsx("div", {
         className: "grid",
         style: {
@@ -285,7 +346,10 @@ function FormSection({ section, context, customComponents, disabled }) {
                 disabled: disabled
             }, field.name))
     });
-    if (!section.title) return fieldsGrid;
+    if (!section.title) return isPlain ? /*#__PURE__*/ jsx("div", {
+        className: `${dividerClassName} pb-4 pt-4`,
+        children: fieldsGrid
+    }) : fieldsGrid;
     const innerContent = /*#__PURE__*/ jsxs("div", {
         className: "flex flex-col gap-4",
         children: [
@@ -303,12 +367,13 @@ function FormSection({ section, context, customComponents, disabled }) {
         return /*#__PURE__*/ jsx(Accordion, {
             type: "multiple",
             defaultValue: defaultValue,
+            className: isPlain ? dividerClassName : void 0,
             children: /*#__PURE__*/ jsxs(AccordionItem, {
                 value: section.id,
-                className: "border rounded-lg px-3",
+                className: wrapperClassName,
                 children: [
                     /*#__PURE__*/ jsx(AccordionTrigger, {
-                        className: "text-sm font-medium",
+                        className: triggerClassName,
                         children: section.title
                     }),
                     /*#__PURE__*/ jsx(AccordionContent, {
@@ -319,12 +384,12 @@ function FormSection({ section, context, customComponents, disabled }) {
         });
     }
     return /*#__PURE__*/ jsxs("div", {
-        className: "border rounded-lg px-3",
+        className: isPlain ? dividerClassName : wrapperClassName,
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: "flex",
                 children: /*#__PURE__*/ jsx("div", {
-                    className: "flex flex-1 items-center justify-between py-4 text-sm font-medium",
+                    className: isPlain ? 'flex flex-1 items-center justify-start gap-2 py-4 text-sm font-semibold' : 'flex flex-1 items-center justify-between py-4 text-sm font-medium',
                     children: section.title
                 })
             }),

package/dist/components/ui/dropdown-menu.cjs

@@ -45,6 +45,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_dropdown_menu_namespaceObject = require("@radix-ui/react-dropdown-menu");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
+const external_portal_container_cjs_namespaceObject = require("./portal-container.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const DropdownMenu = react_dropdown_menu_namespaceObject.Root;
 const DropdownMenuTrigger = react_dropdown_menu_namespaceObject.Trigger;
@@ -70,14 +71,18 @@ const DropdownMenuSubContent = /*#__PURE__*/ external_react_namespaceObject.forw
         ...props
     }));
 DropdownMenuSubContent.displayName = react_dropdown_menu_namespaceObject.SubContent.displayName;
-const DropdownMenuContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Portal, {
+const DropdownMenuContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, sideOffset = 4, container, ...props }, ref)=>{
+    const resolvedContainer = (0, external_portal_container_cjs_namespaceObject.useResolvedPortalContainer)(container);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Portal, {
+        container: resolvedContainer,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Content, {
             ref: ref,
             sideOffset: sideOffset,
             className: (0, index_cjs_namespaceObject.cn)('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]', className),
             ...props
         })
-    }));
+    });
+});
 DropdownMenuContent.displayName = react_dropdown_menu_namespaceObject.Content.displayName;
 const DropdownMenuItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, inset, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.Item, {
         ref: ref,

package/dist/components/ui/dropdown-menu.d.ts

@@ -1,5 +1,6 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as React from 'react';
+import { type PortalContainerOverride } from './portal-container';
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
@@ -10,7 +11,9 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: PortalContainerOverride;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;