@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/AppSidebar.story.vue

@@ -9,8 +9,14 @@ import BaseInput from './BaseInput.vue'
 import NumberInput from './NumberInput.vue'
 import FileUploader from './FileUploader.vue'
 import FormField from './FormField.vue'
+import WellPlate from './WellPlate.vue'
+import { defineControlModel, defineControls, getControlDefaults } from '../composables/useControlSchema'
+import { useBioTemplateWorkspace } from '../composables/useBioTemplateWorkspace'
+import { createWellPlateScreenCollection } from '../templates'
 import type { SidebarToolSection } from '../types'
 
+type SidebarVariant = 'analysis' | 'default'
+
 /* --- Icon paths (Lucide-style) --- */
 const icons = {
   upload: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M17 8l-5-5-5 5', 'M12 3v12'],
@@ -126,7 +132,98 @@ const polarity = ref('negative')
 const container = ref('vial')
 const expNumber = ref(1)
 const initials = ref('XP')
+const sequencePrefix = ref('exp001_260210_XP')
+const runMode = ref('balanced')
+const runModeOptions = [
+  { value: 'fast', label: 'Fast' },
+  { value: 'balanced', label: 'Balanced' },
+  { value: 'qc', label: 'QC focused' },
+]
 const toggleState = reactive<Record<string, boolean>>({ naming: true, randomize: false })
+const schemaControls = defineControls({
+  threshold: {
+    type: 'slider',
+    label: 'Threshold',
+    default: 0.05,
+    min: 0,
+    max: 1,
+    props: { step: 0.01 },
+    section: 'parameters',
+    sectionLabel: 'Parameters',
+    sectionSubtitle: 'Analysis controls',
+    view: 'analysis',
+    sidebar: {
+      icon: icons.settings,
+      iconColor: '#6366f1',
+      iconBg: '#e0e7ff',
+    },
+  },
+  method: {
+    label: 'Model',
+    default: 'linear',
+    options: ['linear', 'logistic', 'quadratic'],
+    required: true,
+    section: 'parameters',
+    view: 'analysis',
+  },
+  showOutliers: {
+    label: 'Show outliers',
+    default: true,
+    section: 'display',
+    sectionLabel: 'Display',
+    sectionSubtitle: 'Result filters',
+    view: 'analysis',
+    sidebar: {
+      icon: icons.zap,
+      iconColor: '#0ea5e9',
+      iconBg: '#e0f2fe',
+      defaultOpen: false,
+    },
+  },
+})
+const controlValues = ref<Record<string, unknown>>({ ...getControlDefaults(schemaControls) })
+const modelDrivenSidebarModel = defineControlModel({
+  views: {
+    analysis: {
+      label: 'Analysis',
+      sections: {
+        parameters: {
+          label: 'Parameters',
+          description: 'Thresholds and scoring',
+          icon: icons.settings,
+          controls: {
+            threshold: { type: 'number', default: 0.05, min: 0, max: 1 },
+            method: ['linear', 'logistic', 'spline'],
+          },
+        },
+        filters: {
+          label: 'Filters',
+          description: 'Result cleanup',
+          sidebar: {
+            icon: icons.zap,
+            iconColor: '#0ea5e9',
+            iconBg: '#e0f2fe',
+            defaultOpen: false,
+          },
+          controls: {
+            showOutliers: true,
+            minPeakArea: { type: 'number', default: 1000, min: 0 },
+          },
+        },
+      },
+    },
+  },
+})
+const modelDrivenValues = ref<Record<string, unknown>>({})
+const templateCollection = createWellPlateScreenCollection({
+  samples: ['Control', 'Treatment'],
+  compounds: { 'Drug A': [10, 1, 0.1] },
+})
+const templateWorkspace = useBioTemplateWorkspace(templateCollection)
+const templateValues = ref<Record<string, unknown>>({ ...templateWorkspace.controls.initialValues })
+const templateWellPlateProps = templateWorkspace.componentProps
+  .find(binding => binding.component === 'WellPlate')
+  ?.propsObject ?? {}
 
 function handleToggle(id: string, value: boolean) {
   toggleState[id] = value
@@ -135,8 +232,9 @@ function handleToggle(id: string, value: boolean) {
 function initSimpleToolkit() {
   return {
     activeView: 'analysis',
+    variant: 'analysis' as SidebarVariant,
     floating: false,
-    width: '260px',
+    width: '20rem',
     side: 'left' as const,
   }
 }
@@ -218,6 +316,101 @@ function initSimpleToolkit() {
       </div>
     </Variant>
 
+    <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"
+          active-view="analysis"
+          v-model="controlValues"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Model Driven Analysis">
+      <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"
+        />
+      </div>
+    </Variant>
+
+    <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"
+          show-when-empty
+        >
+          <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+            <FormField label="File Prefix">
+              <BaseInput v-model="sequencePrefix" size="sm" />
+            </FormField>
+            <FormField label="Run Mode">
+              <BaseSelect v-model="runMode" :options="runModeOptions" size="sm" />
+            </FormField>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;">
+              <BaseButton size="sm" variant="secondary">NEG</BaseButton>
+              <BaseButton size="sm" variant="secondary">VIAL</BaseButton>
+            </div>
+          </div>
+
+          <template #footer>
+            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+              <BaseButton variant="cta" style="width: 100%;">Generate Sequence</BaseButton>
+              <BaseButton variant="ghost" size="sm" style="width: 100%;">Clear Draft</BaseButton>
+            </div>
+          </template>
+        </AppSidebar>
+
+        <div style="flex: 1; min-width: 0; border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.5rem; background: var(--bg-card, #fff); padding: 1rem;">
+          <div style="display: flex; justify-content: space-between; gap: 1rem; align-items: center;">
+            <div>
+              <div style="font-size: 0.875rem; font-weight: 650; color: var(--text-primary, #111827);">MS queue</div>
+              <div style="font-size: 0.75rem; color: var(--text-muted, #6b7280);">{{ sequencePrefix }} · {{ runMode }}</div>
+            </div>
+            <BaseButton size="sm" variant="secondary">Preview CSV</BaseButton>
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Template Driven Controls">
+      <div style="padding: 2rem; min-height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
+        <AppSidebar
+          v-bind="templateWorkspace.sidebar"
+          active-view="design"
+          v-model="templateValues"
+          width="300px"
+        />
+
+        <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem;">
+          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+            <span
+              v-for="binding in templateWorkspace.componentBindings"
+              :key="binding.id"
+              style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-secondary, #4b5563);"
+            >
+              {{ binding.component }}
+            </span>
+          </div>
+          <WellPlate
+            v-bind="templateWellPlateProps"
+            size="fill"
+            readonly
+          />
+        </div>
+      </div>
+    </Variant>
+
     <Variant title="Simple Toolkit" :init-state="initSimpleToolkit">
       <template #default="{ state }">
         <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
@@ -241,6 +434,7 @@ function initSimpleToolkit() {
           </div>
           <AppSidebar
             :panels="simplePanels"
+            :variant="state.variant"
             :active-view="state.activeView"
             :floating="state.floating"
             :width="state.width"
@@ -271,6 +465,14 @@ function initSimpleToolkit() {
           title="Active View"
           :options="['analysis', 'results', 'settings'].map(v => ({ label: v, value: v }))"
         />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="[
+            { label: 'Analysis', value: 'analysis' },
+            { label: 'Default', value: 'default' },
+          ]"
+        />
         <HstCheckbox v-model="state.floating" title="Floating" />
         <HstText v-model="state.width" title="Width" />
         <HstSelect

package/src/components/AppSidebar.vue

@@ -2,10 +2,9 @@
 /**
  * AppSidebar - Context-sensitive toolkit panel
  *
- * Shows tool sections relevant to the active view. Sections are defined
- * via the `panels` config (mapping view IDs to section arrays) and rendered
- * as CollapsibleCards. Actual controls are provided through named slots:
- * `#section-{sectionId}`.
+ * 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.
  *
  * When the active view has no matching panels, the sidebar hides entirely.
  *
@@ -20,61 +19,287 @@
  *   </template>
  *   <template #header>Plugin Tools</template>
  * </AppSidebar>
+ *
+ * <!-- Direct schema-driven controls -->
+ * <AppSidebar :controls="controls" :active-view="activeTab" v-model="values" />
  * ```
  */
-import { computed } from 'vue'
-import type { SidebarToolSection } from '../types'
+import { computed, ref, useSlots, type Slots } from 'vue'
+import type { PillNavItem, SidebarToolSection } from '../types'
+import type { FormEnhancements, FormSchema } from '../types/form-builder'
+import {
+  controlsToSectionFormSchemas,
+  controlsToSidebarPanels,
+  defineControlModel,
+  getControlDefaults,
+  mergeControlWorkspaceOptions,
+  type ControlModel,
+  type ControlModelBinding,
+  type ControlSchema,
+  type ControlWorkspaceOptions,
+} from '../composables/useControlSchema'
 import CollapsibleCard from './CollapsibleCard.vue'
+import FormBuilder from './FormBuilder.vue'
 
 interface Props {
+  /** Optional chrome title rendered above generated sections. */
+  title?: string
+  /** Optional secondary chrome copy rendered below title. */
+  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 */
   activeView?: string
-  /** Floating variant with absolute positioning */
+  /** Floating variant with absolute positioning. Defaults to false for analysis variant. */
   floating?: boolean
   /** Compact layout: smaller headers, tighter spacing, no icon backgrounds */
   dense?: boolean
-  /** Width when visible */
+  /** Width when visible. Defaults to 20rem for analysis variant, otherwise 280px. */
   width?: string
   /** Position sidebar on left or right side */
   side?: 'left' | 'right'
   /** Toggle state map: sectionId → boolean */
   toggleState?: Record<string, boolean>
+  /** Optional FormBuilder schemas keyed by section ID. Used when no section slot is provided. */
+  forms?: Record<string, FormSchema>
+  /** Generated view IDs from useControlSchema(). Consumed for clean v-bind ergonomics. */
+  viewIds?: string[]
+  /** Generated AppTopBar pillNav-compatible view items from useControlSchema(). Consumed for clean v-bind ergonomics. */
+  viewItems?: PillNavItem[]
+  /** Default view ID used when activeView is omitted. */
+  defaultView?: string
+  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step sidebar/form generation. */
+  model?: ControlModel | ControlModelBinding
+  /** Compact control schema. When provided, AppSidebar generates panels, section forms, and default values. */
+  controls?: ControlSchema
+  /** Options passed to compact control schema generation, including shared initialValues. */
+  controlOptions?: ControlWorkspaceOptions
+  /** DOM id for the scrollable content area. Use with Teleport when route/tab children own sidebar controls. */
+  contentId?: string
+  /** Render the sidebar shell even when no panel matches the active view. Useful for default-slot or Teleport-driven sidebars. */
+  showWhenEmpty?: boolean
+  /** Shared values for auto-rendered section forms. Supports default v-model. */
+  modelValue?: Record<string, unknown>
+  /** Shared values for auto-rendered section forms */
+  values?: Record<string, unknown>
+  /** Runtime FormBuilder enhancements for auto-rendered section forms */
+  formEnhancements?: FormEnhancements<Record<string, unknown>>
+  /** Show submit/cancel actions inside auto-rendered section forms */
+  showFormActions?: boolean
+  /** Loading/saving state for auto-rendered section forms */
+  formLoading?: boolean
+  /** Disabled state for auto-rendered section forms */
+  formDisabled?: boolean
+  /** Readonly state for auto-rendered section forms */
+  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. */
+  collapsible?: boolean
+  /** Controlled collapsed state. */
+  collapsed?: boolean
+  /** Initial collapsed state when collapsed is uncontrolled. */
+  defaultCollapsed?: boolean
+  /** Width when collapsed. */
+  collapsedWidth?: string
+  /** Accessible label for the collapse action. */
+  collapseButtonLabel?: string
+  /** Accessible label for the expand action. */
+  expandButtonLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  subtitle: undefined,
+  badge: undefined,
+  variant: 'default',
   panels: () => ({}),
   activeView: '',
-  floating: true,
+  floating: undefined,
   dense: false,
-  width: '280px',
+  width: undefined,
   side: 'left',
   toggleState: () => ({}),
+  forms: () => ({}),
+  viewIds: () => [],
+  viewItems: () => [],
+  defaultView: '',
+  model: undefined,
+  controlOptions: () => ({}),
+  contentId: undefined,
+  showWhenEmpty: false,
+  modelValue: undefined,
+  values: () => ({}),
+  showFormActions: false,
+  formLoading: false,
+  formDisabled: false,
+  formReadonly: false,
+  formSize: 'sm',
+  collapsible: undefined,
+  collapsed: undefined,
+  defaultCollapsed: false,
+  collapsedWidth: '3rem',
+  collapseButtonLabel: 'Collapse sidebar',
+  expandButtonLabel: 'Expand sidebar',
 })
 
-defineEmits<{
+const emit = defineEmits<{
   'update:toggle': [sectionId: string, value: boolean]
+  'update:modelValue': [values: Record<string, unknown>]
+  'update:values': [values: Record<string, unknown>]
+  'update:collapsed': [value: boolean]
+  'form-submit': [sectionId: string, values: Record<string, unknown>]
+  'form-cancel': [sectionId: string]
 }>()
 
+const slots: Slots = useSlots()
+const internalCollapsed = ref(props.defaultCollapsed)
+const collapsedModel = computed({
+  get: () => props.collapsed ?? internalCollapsed.value,
+  set: (value: boolean) => {
+    internalCollapsed.value = value
+    emit('update:collapsed', value)
+  },
+})
+
+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 resolvedModel = computed<ControlModelBinding | undefined>(() => {
+  if (props.model === undefined) return undefined
+  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+})
+
+const resolvedControls = computed<ControlSchema | undefined>(() =>
+  props.controls ?? resolvedModel.value?.controls,
+)
+
+const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
+  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
+)
+
+const generatedPanels = computed<Record<string, SidebarToolSection[]>>(() => {
+  if (!resolvedControls.value) return {}
+  return controlsToSidebarPanels(resolvedControls.value, resolvedControlOptions.value)
+})
+
+const generatedForms = computed<Record<string, FormSchema>>(() => {
+  if (!resolvedControls.value) return {}
+  return controlsToSectionFormSchemas(resolvedControls.value, resolvedControlOptions.value)
+})
+
+const generatedDefaults = computed<Record<string, unknown>>(() => {
+  if (!resolvedControls.value) return {}
+  return {
+    ...getControlDefaults(resolvedControls.value),
+    ...(resolvedControlOptions.value.initialValues ?? {}),
+  }
+})
+
+const resolvedPanels = computed<Record<string, SidebarToolSection[]>>(() =>
+  mergeSidebarPanels(generatedPanels.value, props.panels),
+)
+
+const resolvedForms = computed<Record<string, FormSchema>>(() => ({
+  ...generatedForms.value,
+  ...props.forms,
+}))
+
+const resolvedValues = computed<Record<string, unknown>>(() => ({
+  ...generatedDefaults.value,
+  ...(props.modelValue ?? props.values),
+}))
+
+const resolvedActiveView = computed(() => {
+  if (props.activeView) return props.activeView
+  if (props.defaultView) return props.defaultView
+  if (!resolvedControls.value) return ''
+  return firstVisibleViewId(resolvedPanels.value)
+})
+
 const activeSections = computed<SidebarToolSection[]>(() => {
-  if (!props.activeView || !props.panels[props.activeView]) return []
-  return props.panels[props.activeView]
+  if (!resolvedActiveView.value || !resolvedPanels.value[resolvedActiveView.value]) return []
+  return resolvedPanels.value[resolvedActiveView.value]
 })
 
-const isVisible = computed(() => activeSections.value.length > 0)
+const isVisible = computed<boolean>(() =>
+  activeSections.value.length > 0 || props.showWhenEmpty || Boolean(slots.default),
+)
 
-const sidebarClasses = computed(() => [
+const sidebarClasses = computed<string[]>(() => [
   'mint-sidebar',
   `mint-sidebar--${props.side}`,
-  props.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
+  `mint-sidebar--${props.variant}`,
+  resolvedFloating.value ? 'mint-sidebar--floating' : 'mint-sidebar--static',
   props.dense ? 'mint-sidebar--dense' : '',
+  resolvedCollapsible.value ? 'mint-sidebar--collapsible' : '',
+  collapsedModel.value ? 'mint-sidebar--collapsed' : '',
   !isVisible.value ? 'mint-sidebar--hidden' : '',
 ])
 
-const sidebarStyle = computed(() => ({
-  width: props.width,
+const sidebarStyle = computed<Record<string, string>>(() => ({
+  width: collapsedModel.value ? props.collapsedWidth : resolvedWidth.value,
 }))
+
+function handleFormUpdate(values: Record<string, unknown>) {
+  const nextValues = { ...resolvedValues.value, ...values }
+  emit('update:modelValue', nextValues)
+  emit('update:values', nextValues)
+}
+
+function handleFormSubmit(sectionId: string, values: Record<string, unknown>) {
+  emit('form-submit', sectionId, values)
+}
+
+function handleFormCancel(sectionId: string) {
+  emit('form-cancel', sectionId)
+}
+
+function toggleCollapsed() {
+  collapsedModel.value = !collapsedModel.value
+}
+
+function expandCollapsed() {
+  collapsedModel.value = false
+}
+
+function mergeSidebarPanels(
+  generated: Record<string, SidebarToolSection[]>,
+  explicit: Record<string, SidebarToolSection[]>,
+): Record<string, SidebarToolSection[]> {
+  const merged: Record<string, SidebarToolSection[]> = {}
+  const viewIds = new Set([...Object.keys(generated), ...Object.keys(explicit)])
+
+  for (const viewId of viewIds) {
+    const sectionsById = new Map<string, SidebarToolSection>()
+    for (const section of generated[viewId] ?? []) {
+      sectionsById.set(section.id, section)
+    }
+    for (const section of explicit[viewId] ?? []) {
+      sectionsById.set(section.id, section)
+    }
+    merged[viewId] = [...sectionsById.values()]
+  }
+
+  return merged
+}
+
+function firstVisibleViewId(panels: Record<string, SidebarToolSection[]>): string {
+  for (const [viewId, sections] of Object.entries(panels)) {
+    if (sections.length > 0) return viewId
+  }
+  return ''
+}
+
+function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
+  return 'controls' in model && 'controlOptions' in model
+}
 </script>
 
 <template>
@@ -82,13 +307,54 @@ const sidebarStyle = computed(() => ({
     :class="sidebarClasses"
     :style="sidebarStyle"
   >
-    <!-- Header slot -->
-    <div v-if="$slots.header" class="mint-sidebar__header">
-      <slot name="header" />
+    <!-- Header slot / built-in chrome -->
+    <div
+      v-if="$slots.header || title || subtitle || badge !== undefined || resolvedCollapsible"
+      class="mint-sidebar__header"
+    >
+      <slot
+        name="header"
+        :collapsed="collapsedModel"
+        :toggle-collapsed="toggleCollapsed"
+      >
+        <div v-if="!collapsedModel" class="mint-sidebar__heading">
+          <div class="mint-sidebar__heading-copy">
+            <h2 v-if="title" class="mint-sidebar__title">{{ title }}</h2>
+            <p v-if="subtitle" class="mint-sidebar__subtitle">{{ subtitle }}</p>
+          </div>
+          <span v-if="badge !== undefined" class="mint-sidebar__badge">{{ badge }}</span>
+        </div>
+        <button
+          v-if="resolvedCollapsible"
+          type="button"
+          class="mint-sidebar__collapse-button"
+          :aria-label="collapsedModel ? expandButtonLabel : collapseButtonLabel"
+          :aria-expanded="!collapsedModel"
+          @click="toggleCollapsed"
+        >
+          <svg
+            class="mint-sidebar__collapse-icon"
+            :class="{ 'mint-sidebar__collapse-icon--collapsed': collapsedModel }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+          </svg>
+        </button>
+      </slot>
     </div>
 
     <!-- Tool sections -->
-    <div class="mint-sidebar__sections">
+    <div
+      v-if="!collapsedModel"
+      :id="contentId"
+      class="mint-sidebar__sections"
+    >
       <CollapsibleCard
         v-for="section in activeSections"
         :key="section.id"
@@ -101,14 +367,43 @@ const sidebarStyle = computed(() => ({
         :default-open="section.defaultOpen !== false"
         :show-toggle="section.showToggle"
         :toggle-value="toggleState[section.id] ?? false"
-        @update:toggle-value="$emit('update:toggle', section.id, $event)"
+        @update:toggle-value="emit('update:toggle', section.id, $event)"
       >
-        <slot :name="`section-${section.id}`" />
+        <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>
+
+      <slot
+        :sections="activeSections"
+        :active-view="resolvedActiveView"
+        :values="resolvedValues"
+      />
+    </div>
+
+    <div v-else-if="$slots.collapsed" class="mint-sidebar__collapsed">
+      <slot
+        name="collapsed"
+        :sections="activeSections"
+        :expand="expandCollapsed"
+      />
     </div>
 
     <!-- Footer slot -->
-    <div v-if="$slots.footer" class="mint-sidebar__footer">
+    <div v-if="!collapsedModel && $slots.footer" class="mint-sidebar__footer">
       <slot name="footer" />
     </div>
   </aside>