@morscherlab/mint-sdk 1.2.0 → 1.2.2

package/src/__tests__/generatedUi.test.ts

@@ -6,6 +6,8 @@ import {
   normalizeGeneratedJobInput,
 } from '../generated/schema'
 import type { GeneratedJobDefinition } from '../types/generated-ui'
+import { validateFieldValue } from '../composables/useFormValidation'
+import { buildRules } from '../composables/formBuilderSchema'
 
 const definition: GeneratedJobDefinition = {
   id: 'summarize',
@@ -30,6 +32,115 @@ const definition: GeneratedJobDefinition = {
 }
 
 describe('generated UI schema adapter', () => {
+  it('allows present empty strings, arrays, nullable values and false', () => {
+    const requiredDefinition: GeneratedJobDefinition = {
+      ...definition,
+      input_schema: {
+        properties: {
+          nullable: { anyOf: [{ type: 'string' }, { type: 'null' }] },
+          text: { type: 'string' },
+          labels: { type: 'array', items: { type: 'string' } },
+          enabled: { type: 'boolean' },
+          nonempty: { type: 'string', minLength: 1 },
+        },
+        required: ['nullable', 'text', 'labels', 'enabled', 'nonempty'],
+      },
+    }
+    const fields = generatedJobFormSchema(requiredDefinition).sections[0]!.fields
+    const rules = buildRules(fields)
+    const values = { nullable: null, text: '', labels: [], enabled: false, nonempty: 'valid' }
+    expect(fields.map(field => validateFieldValue(values[field.name as keyof typeof values], rules[field.name], values)))
+      .toEqual([null, null, null, null, null])
+    expect(generatedJobDefaults(requiredDefinition)).toEqual({ nullable: null })
+    expect(validateFieldValue('', rules.nonempty, {})).not.toBeNull()
+    expect(normalizeGeneratedJobInput(requiredDefinition, values)).toEqual(values)
+  })
+
+  it('supplies fixed literal values and resolves array enums and numeric items', () => {
+    const arrayDefinition: GeneratedJobDefinition = {
+      ...definition,
+      input_schema: {
+        $defs: { Choice: { type: 'integer', enum: [1, 2] } },
+        properties: {
+          kind: { type: 'string', const: 'fixed' },
+          choices: { type: 'array', items: { $ref: '#/$defs/Choice' } },
+          counts: { type: 'array', items: { type: 'integer' } },
+          scales: { type: 'array', items: { type: 'number' } },
+          labels: { type: 'array', items: { type: 'string' } },
+          flags: { type: 'array', items: { type: 'boolean' } },
+        },
+      },
+    }
+    expect(generatedJobDefaults(arrayDefinition)).toEqual({ kind: 'fixed' })
+    expect(generatedJobFormSchema(arrayDefinition).sections[0]!.fields).toMatchObject([
+      { name: 'kind', defaultValue: 'fixed', disabled: true },
+      { name: 'choices', type: 'multiselect', props: { options: [1, 2] } },
+      { name: 'counts', type: 'tags' },
+      { name: 'scales', type: 'tags' },
+      { name: 'labels', type: 'tags', props: { allowDuplicates: true } },
+      { name: 'flags', type: 'tags' },
+    ])
+    expect(normalizeGeneratedJobInput(arrayDefinition, {
+      counts: ['1', '2'], scales: ['0.5', '1.5'], choices: [1, 2], labels: ['1', '1'],
+    })).toEqual({ counts: [1, 2], scales: [0.5, 1.5], choices: [1, 2], labels: ['1', '1'] })
+    expect(normalizeGeneratedJobInput(arrayDefinition, { counts: ['bad', '1.5'] }))
+      .toEqual({ counts: ['bad', 1.5] })
+    expect(normalizeGeneratedJobInput(arrayDefinition, { flags: ['true', 'false', true, 'bad'] }))
+      .toEqual({ flags: [true, false, true, 'bad'] })
+  })
+
+  it('applies integer bounds and numeric steps to the existing controls', () => {
+    const boundedDefinition: GeneratedJobDefinition = {
+      ...definition,
+      input_schema: { properties: {
+        count: { type: 'integer', exclusiveMinimum: 0, exclusiveMaximum: 10, multipleOf: 2 },
+        fraction: { type: 'number', minimum: 0, maximum: 1, multipleOf: 0.1 },
+      } },
+    }
+    const fields = generatedJobFormSchema(boundedDefinition).sections[0]!.fields
+    const rules = buildRules(fields)
+    expect(fields).toMatchObject([
+      { validation: { min: 2, max: 8 }, props: { min: 2, max: 8, step: 2 } },
+      { validation: { min: 0, max: 1 }, props: { min: 0, max: 1, step: 0.1 } },
+    ])
+    expect(validateFieldValue(0, rules.count, {})).not.toBeNull()
+    expect(validateFieldValue(10, rules.count, {})).not.toBeNull()
+  })
+
+  it('preserves field labels and hints outside nullable schemas and enum references', () => {
+    const annotatedDefinition: GeneratedJobDefinition = {
+      ...definition,
+      input_schema: {
+        type: 'object',
+        $defs: { Method: { type: 'string', enum: ['fast', 'robust'], title: 'Method' } },
+        properties: {
+          count: {
+            anyOf: [{ type: 'integer', minimum: 1 }, { type: 'null' }],
+            title: 'Optional sample count',
+            description: 'Leave empty to use all samples',
+            default: null,
+          },
+          method: {
+            $ref: '#/$defs/Method',
+            title: 'Analysis method',
+            description: 'Choose the analysis method',
+          },
+        },
+      },
+    }
+
+    expect(generatedJobFormSchema(annotatedDefinition).sections[0]?.fields).toMatchObject([
+      {
+        name: 'count', type: 'number', label: 'Optional sample count',
+        hint: 'Leave empty to use all samples', defaultValue: null, validation: { min: 1 },
+      },
+      {
+        name: 'method', type: 'select', label: 'Analysis method',
+        hint: 'Choose the analysis method', props: { options: ['fast', 'robust'] },
+      },
+    ])
+  })
+
   it('maps the supported JSON Schema subset to standard FormBuilder fields', () => {
     expect(generatedJobFormSchema(definition).sections[0]?.fields).toMatchObject([
       { name: 'threshold', type: 'number', validation: { required: true, min: 0, max: 10 } },

package/src/__tests__/styles/tokenOnlyColors.test.ts

@@ -0,0 +1,16 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const componentsDir = resolve(here, '../../styles/components')
+
+// Every color in these sheets must resolve from a token so dark mode remaps it.
+const TOKEN_ONLY = ['pill.css', 'tabs.css', 'segmented-control.css', 'toast.css']
+
+describe('token-only component stylesheets', () => {
+  it.each(TOKEN_ONLY)('%s has no rgba() literal', (file) => {
+    expect(readFileSync(join(componentsDir, file), 'utf-8')).not.toMatch(/rgba?\(/)
+  })
+})

package/src/components/AdductText.story.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import AdductText from './AdductText.vue'
+</script>
+
+<template>
+  <Story title="Data Display/AdductText">
+    <Variant title="Inline and badge">
+      <div style="display: flex; align-items: center; gap: 1rem; padding: 2rem; color: var(--text-primary);">
+        <AdductText value="[M+H]+" />
+        <AdductText value="[M+Na]+" variant="badge" />
+        <AdductText />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AdductText.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/** Compact, overflow-safe display for mass-spectrometry adduct notation. */
+import { computed } from 'vue'
+
+interface Props {
+  value?: string | null
+  emptyText?: string
+  variant?: 'inline' | 'badge'
+  tone?: 'default' | 'on-primary' | 'muted'
+  size?: 'xs' | 'inherit'
+  font?: 'mono' | 'sans'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: null,
+  emptyText: '-',
+  variant: 'inline',
+  tone: 'default',
+  size: 'xs',
+  font: 'mono',
+})
+
+const value = computed(() => props.value?.trim() ?? '')
+</script>
+
+<template>
+  <span
+    :class="[
+      'mint-adduct-text',
+      `mint-adduct-text--${variant}`,
+      `mint-adduct-text--${tone}`,
+      `mint-adduct-text--${size}`,
+      `mint-adduct-text--${font}`,
+      { 'mint-adduct-text--empty': !value },
+    ]"
+    :title="value || undefined"
+  >
+    {{ value || emptyText }}
+  </span>
+</template>

package/src/components/AppLayout.story.vue

@@ -229,7 +229,7 @@ const logScale = ref(false)
           </template>
           <template #sidebar>
             <AppSidebar
-              variant="analysis"
+              :floating="false"
               title="Feature Filters"
               subtitle="12 active samples"
               :badge="2"

package/src/components/AppSidebar.story.vue

@@ -16,7 +16,7 @@ import { useBioTemplateWorkspace } from '../composables/useBioTemplateWorkspace'
 import { createWellPlateScreenCollection } from '../templates'
 import type { SidebarToolSection } from '../types'
 
-type SidebarVariant = 'analysis' | 'default'
+type SidebarDensity = 'compact' | 'comfortable'
 
 /* --- Icon paths (Lucide-style) --- */
 const icons = {
@@ -256,7 +256,7 @@ function handleToggle(id: string, value: boolean) {
 function initSimpleToolkit() {
   return {
     activeView: 'analysis',
-    variant: 'analysis' as SidebarVariant,
+    density: 'compact' as SidebarDensity,
     floating: false,
     width: '20rem',
     side: 'left' as const,
@@ -351,7 +351,6 @@ function initSimpleToolkit() {
     <Variant title="Schema Driven Controls">
       <div style="padding: 2rem; height: 520px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          variant="analysis"
           title="Peak Picking"
           subtitle="Current experiment"
           :controls="schemaControls"
@@ -365,7 +364,6 @@ function initSimpleToolkit() {
       <div style="padding: 2rem; height: 560px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
           v-model="modelDrivenValues"
-          variant="analysis"
           title="Peak Picking"
           subtitle="Current experiment"
           :model="modelDrivenSidebarModel"
@@ -376,7 +374,6 @@ function initSimpleToolkit() {
     <Variant title="Route Owned Shell">
       <div style="padding: 2rem; height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          variant="analysis"
           title="Sequence"
           subtitle="Acquisition run"
           content-id="seqgen-sidebar"
@@ -466,7 +463,7 @@ function initSimpleToolkit() {
           </div>
           <AppSidebar
             :panels="simplePanels"
-            :variant="state.variant"
+            :density="state.density"
             :active-view="state.activeView"
             :floating="state.floating"
             :width="state.width"
@@ -531,11 +528,11 @@ function initSimpleToolkit() {
           :options="['analysis', 'results', 'settings'].map(v => ({ label: v, value: v }))"
         />
         <HstSelect
-          v-model="state.variant"
-          title="Variant"
+          v-model="state.density"
+          title="Density"
           :options="[
-            { label: 'Analysis', value: 'analysis' },
-            { label: 'Default', value: 'default' },
+            { label: 'Compact', value: 'compact' },
+            { label: 'Comfortable', value: 'comfortable' },
           ]"
         />
         <HstCheckbox v-model="state.floating" title="Floating" />

package/src/components/AppSidebar.vue

@@ -3,8 +3,9 @@
  * AppSidebar - Context-sensitive toolkit panel
  *
  * Shows tool sections relevant to the active view. Sections are defined via
- * the `panels` config and rendered as CollapsibleCards. Controls can be
- * provided through named slots or auto-rendered from FormBuilder schemas.
+ * the `panels` config and rendered as flat groups (header row + hairline,
+ * no nested card). Controls can be provided through named slots or
+ * auto-rendered from FormBuilder schemas.
  *
  * When activeView is omitted, the first non-empty panel view is selected.
  * When no view has matching panels, the sidebar hides entirely.
@@ -15,7 +16,7 @@
  * ```
  */
 import { computed, ref, useSlots, type Slots } from 'vue'
-import type { PillNavItem, SidebarToolSection } from '../types'
+import type { PillNavItem, SidebarToolSection, SidebarToolSectionAction } from '../types'
 import type { FormEnhancements, FormSchema } from '../types/form-builder'
 import {
   controlsToSectionFormSchemas,
@@ -28,7 +29,6 @@ import {
   type ControlSchema,
   type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
-import CollapsibleCard from './CollapsibleCard.vue'
 import FormBuilder from './FormBuilder.vue'
 
 interface Props {
@@ -38,17 +38,17 @@ interface Props {
   subtitle?: string
   /** Optional compact badge/count rendered in the chrome header. */
   badge?: string | number
-  /** Visual preset for common plugin sidebars. `analysis` preserves the LEAF-style MINT analysis sidebar design language. */
-  variant?: 'default' | 'analysis'
   /** Map of view IDs to their tool sections */
   panels?: Record<string, SidebarToolSection[]>
   /** Which view's panels to display. Defaults to the first non-empty panel view. */
   activeView?: string
-  /** Floating variant with absolute positioning. Defaults to false for analysis variant. */
+  /** Floating shell with absolute positioning. Prefer letting `AppLayout` own this; it stays for standalone use. */
   floating?: boolean
-  /** Compact layout: smaller headers, tighter spacing, no icon backgrounds */
+  /** Section density. `compact` (default) is the 36px header row; `comfortable` restores the roomier spacing. */
+  density?: 'compact' | 'comfortable'
+  /** @deprecated Compact is now the default. Pass `density="comfortable"` for the roomier layout. */
   dense?: boolean
-  /** Width when visible. Defaults to 20rem for analysis variant, otherwise 280px. */
+  /** Width when visible. */
   width?: string
   /** Position sidebar on left or right side */
   side?: 'left' | 'right'
@@ -88,7 +88,7 @@ interface Props {
   formReadonly?: boolean
   /** Size passed to auto-rendered section forms */
   formSize?: 'sm' | 'md' | 'lg'
-  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to true for analysis variant. */
+  /** Show a built-in collapse/expand button in the sidebar chrome. */
   collapsible?: boolean
   /** Controlled collapsed state. */
   collapsed?: boolean
@@ -106,12 +106,12 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   subtitle: undefined,
   badge: undefined,
-  variant: 'default',
   panels: () => ({}),
   activeView: '',
-  floating: undefined,
-  dense: false,
-  width: undefined,
+  floating: true,
+  density: undefined,
+  dense: undefined,
+  width: '280px',
   side: 'left',
   toggleState: () => ({}),
   forms: () => ({}),
@@ -129,7 +129,7 @@ const props = withDefaults(defineProps<Props>(), {
   formDisabled: false,
   formReadonly: false,
   formSize: 'sm',
-  collapsible: undefined,
+  collapsible: false,
   collapsed: undefined,
   defaultCollapsed: false,
   collapsedWidth: '3rem',
@@ -157,10 +157,20 @@ const collapsedModel = computed({
   },
 })
 
-const isAnalysisVariant = computed(() => props.variant === 'analysis')
-const resolvedFloating = computed(() => props.floating ?? !isAnalysisVariant.value)
-const resolvedWidth = computed(() => props.width ?? (isAnalysisVariant.value ? '20rem' : '280px'))
-const resolvedCollapsible = computed(() => props.collapsible ?? isAnalysisVariant.value)
+const resolvedDensity = computed(() =>
+  props.density ?? (props.dense === false ? 'comfortable' : 'compact'),
+)
+
+// Per-section open state; falls back to `defaultOpen` until the user toggles.
+const openState = ref<Record<string, boolean>>({})
+
+function isSectionOpen(section: SidebarToolSection): boolean {
+  return openState.value[section.id] ?? section.defaultOpen !== false
+}
+
+function toggleSection(section: SidebarToolSection) {
+  openState.value[section.id] = !isSectionOpen(section)
+}
 
 const resolvedModel = computed<ControlModelBinding | undefined>(() => {
   return resolveControlModel(props.model)
@@ -224,16 +234,15 @@ const isVisible = computed<boolean>(() =>
 const sidebarClasses = computed<string[]>(() => [
   'mint-sidebar',
   `mint-sidebar--${props.side}`,
-  `mint-sidebar--${props.variant}`,
-  resolvedFloating.value ? 'mint-sidebar--floating' : 'mint-sidebar--static',
-  props.dense ? 'mint-sidebar--dense' : '',
-  resolvedCollapsible.value ? 'mint-sidebar--collapsible' : '',
+  props.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
+  resolvedDensity.value === 'comfortable' ? 'mint-sidebar--comfortable' : '',
+  props.collapsible ? 'mint-sidebar--collapsible' : '',
   collapsedModel.value ? 'mint-sidebar--collapsed' : '',
   !isVisible.value ? 'mint-sidebar--hidden' : '',
 ])
 
 const sidebarStyle = computed<Record<string, string>>(() => ({
-  width: collapsedModel.value ? props.collapsedWidth : resolvedWidth.value,
+  width: collapsedModel.value ? props.collapsedWidth : props.width,
 }))
 
 function handleFormUpdate(values: Record<string, unknown>) {
@@ -282,6 +291,17 @@ function badgeToneClass(section: SidebarToolSection): string {
   return `mint-sidebar__rail-badge--${section.badgeTone ?? 'cta'}`
 }
 
+function tagToneClass(section: SidebarToolSection): string {
+  return `mint-sidebar__tag--${section.badgeTone ?? 'cta'}`
+}
+
+function actionClasses(action: SidebarToolSectionAction): string[] {
+  return [
+    'mint-sidebar__group-action',
+    action.tone ? `mint-sidebar__group-action--${action.tone}` : '',
+  ]
+}
+
 function mergeSidebarPanels(
   generated: Record<string, SidebarToolSection[]>,
   explicit: Record<string, SidebarToolSection[]>,
@@ -319,7 +339,7 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
   >
     <!-- Header slot / built-in chrome -->
     <div
-      v-if="$slots.header || title || subtitle || badge !== undefined || resolvedCollapsible"
+      v-if="$slots.header || title || subtitle || badge !== undefined || collapsible"
       class="mint-sidebar__header"
     >
       <slot
@@ -335,7 +355,7 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
           <span v-if="badge !== undefined" class="mint-sidebar__badge">{{ badge }}</span>
         </div>
         <button
-          v-if="resolvedCollapsible"
+          v-if="collapsible"
           type="button"
           class="mint-sidebar__collapse-button"
           :aria-label="collapsedModel ? expandButtonLabel : collapseButtonLabel"
@@ -365,41 +385,141 @@ function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): strin
       :id="contentId"
       class="mint-sidebar__sections"
     >
-      <CollapsibleCard
+      <div
         v-for="section in activeSections"
         :key="section.id"
-        :title="section.label"
-        :subtitle="section.subtitle"
-        :icon="section.icon"
-        :icon-color="section.iconColor"
-        :icon-bg="section.iconBg"
-        :badge="section.badge"
-        :badge-tone="section.badgeTone"
-        :actions="section.actions"
-        :dense="dense"
-        :default-open="section.defaultOpen !== false"
-        :show-toggle="section.showToggle"
-        :toggle-value="toggleState[section.id] ?? false"
-        @action="handleSectionAction(section.id, $event)"
-        @update:toggle-value="emit('update:toggle', section.id, $event)"
+        :class="['mint-sidebar__group', isSectionOpen(section) ? 'mint-sidebar__group--open' : 'mint-sidebar__group--closed']"
       >
-        <slot :name="`section-${section.id}`">
-          <FormBuilder
-            v-if="resolvedForms[section.id]"
-            :model-value="resolvedValues"
-            :schema="resolvedForms[section.id]"
-            :enhancements="formEnhancements"
-            :loading="formLoading"
-            :disabled="formDisabled"
-            :readonly="formReadonly"
-            :size="formSize"
-            :show-actions="showFormActions"
-            @update:model-value="handleFormUpdate"
-            @submit="handleFormSubmit(section.id, $event)"
-            @cancel="handleFormCancel(section.id)"
-          />
-        </slot>
-      </CollapsibleCard>
+        <div class="mint-sidebar__group-head">
+          <button
+            type="button"
+            class="mint-sidebar__group-toggle"
+            :aria-expanded="isSectionOpen(section)"
+            @click="toggleSection(section)"
+          >
+            <span
+              v-if="section.icon"
+              class="mint-sidebar__group-icon"
+              :style="railIconStyle(section)"
+            >
+              <svg
+                v-if="isSvgIcon(section.icon)"
+                class="mint-sidebar__group-svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <template v-if="Array.isArray(section.icon)">
+                  <path v-for="(d, i) in section.icon" :key="i" :d="d" />
+                </template>
+                <path v-else :d="section.icon" />
+              </svg>
+              <span v-else class="mint-sidebar__group-text-icon">{{ section.icon }}</span>
+            </span>
+            <span class="mint-sidebar__group-copy">
+              <span class="mint-sidebar__group-label">{{ section.label }}</span>
+              <span v-if="section.subtitle" class="mint-sidebar__group-subtitle">{{ section.subtitle }}</span>
+            </span>
+          </button>
+
+          <div class="mint-sidebar__group-tail">
+            <span
+              v-if="section.badge !== undefined"
+              :class="['mint-sidebar__tag', tagToneClass(section)]"
+            >
+              {{ section.badge }}
+            </span>
+
+            <button
+              v-for="action in section.actions ?? []"
+              :key="action.id"
+              type="button"
+              :class="actionClasses(action)"
+              :style="action.iconColor ? { color: action.iconColor } : undefined"
+              :disabled="action.disabled"
+              :aria-label="action.label"
+              :title="action.label"
+              @click="handleSectionAction(section.id, action.id)"
+            >
+              <svg
+                v-if="action.icon && isSvgIcon(action.icon)"
+                class="mint-sidebar__group-action-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <template v-if="Array.isArray(action.icon)">
+                  <path v-for="(d, i) in action.icon" :key="i" :d="d" />
+                </template>
+                <path v-else :d="action.icon" />
+              </svg>
+              <span v-else-if="action.icon">{{ action.icon }}</span>
+            </button>
+
+            <button
+              v-if="section.showToggle"
+              type="button"
+              role="switch"
+              :aria-checked="toggleState[section.id] ?? false"
+              :aria-label="`Enable ${section.label}`"
+              :class="['mint-sidebar__switch', (toggleState[section.id] ?? false) ? 'mint-sidebar__switch--on' : '']"
+              @click="emit('update:toggle', section.id, !(toggleState[section.id] ?? false))"
+            >
+              <span class="mint-sidebar__switch-knob" />
+            </button>
+
+            <button
+              type="button"
+              class="mint-sidebar__chevron-button"
+              :aria-label="isSectionOpen(section) ? 'Collapse section' : 'Expand section'"
+              :aria-expanded="isSectionOpen(section)"
+              @click="toggleSection(section)"
+            >
+              <svg
+                :class="['mint-sidebar__chevron', isSectionOpen(section) ? 'mint-sidebar__chevron--open' : '']"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <Transition name="collapse">
+          <div v-show="isSectionOpen(section)" class="mint-sidebar__group-body">
+            <slot :name="`section-${section.id}`">
+              <FormBuilder
+                v-if="resolvedForms[section.id]"
+                :model-value="resolvedValues"
+                :schema="resolvedForms[section.id]"
+                :enhancements="formEnhancements"
+                :loading="formLoading"
+                :disabled="formDisabled"
+                :readonly="formReadonly"
+                :size="formSize"
+                :show-actions="showFormActions"
+                @update:model-value="handleFormUpdate"
+                @submit="handleFormSubmit(section.id, $event)"
+                @cancel="handleFormCancel(section.id)"
+              />
+            </slot>
+          </div>
+        </Transition>
+      </div>
 
       <slot
         :sections="activeSections"