@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/__tests__/composables/useControlSchema.test.ts

@@ -0,0 +1,1060 @@
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import {
+  controlsToFormSchema,
+  controlsToSectionFormSchema,
+  controlsToSectionFormSchemas,
+  controlsToSidebarPanels,
+  controlsToSettingsSchema,
+  controlsToTopBarSettingsConfig,
+  controlsToViewIds,
+  controlsToViewItems,
+  controlValuesToComponentBindings,
+  controlValuesToComponentBindingsById,
+  controlValuesToComponentProps,
+  defineControlComponentBindings,
+  defineControlModel,
+  defineDoseDesignControlModel,
+  defineDoseCalculatorControlProps,
+  defineControls,
+  defineWellPlateControlProps,
+  defineWellPlateDoseComponentBindings,
+  defineWellPlateDoseControlProps,
+  getDefaultControlView,
+  getControlDefaults,
+  isControlModelBinding,
+  resolveControlModel,
+  useControlSchema,
+  useControlWorkspace,
+} from '../../composables/useControlSchema'
+import {
+  useBioTemplateComponents,
+} from '../../composables/useBioTemplateComponents'
+import {
+  useBioTemplateControls,
+} from '../../composables/useBioTemplateControls'
+import {
+  createWellPlateScreenCollection,
+} from '../../templates'
+
+describe('useControlSchema', () => {
+  const shorthandControls = defineControls({
+    threshold: 0.05,
+    model: ['linear', 'logistic'],
+    enabled: true,
+    title: 'Drug screen',
+    mode: [
+      { value: 'fast', label: 'Fast' },
+      { value: 'careful', label: 'Careful' },
+    ],
+  })
+
+  const controls = 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: {
+        label: 'Analysis Parameters',
+        icon: 'settings',
+        iconColor: '#6366f1',
+        iconBg: '#e0e7ff',
+      },
+    },
+    method: {
+      label: 'Model',
+      default: 'linear',
+      options: ['linear', 'logistic'],
+      required: true,
+      section: 'parameters',
+      view: 'analysis',
+    },
+    saveResults: {
+      label: 'Save results',
+      default: true,
+      section: 'output',
+      sectionLabel: 'Output',
+      view: 'analysis',
+      sidebar: { defaultOpen: false, showToggle: true },
+    },
+    notes: {
+      label: 'Notes',
+      placeholder: 'Optional notes',
+      section: 'output',
+      view: 'analysis',
+      sidebar: false,
+    },
+    diagnostics: {
+      label: 'Diagnostics',
+      default: false,
+      section: 'diagnostics',
+      sectionLabel: 'Diagnostics',
+      view: 'analysis',
+      sidebar: { enabled: false },
+    },
+  })
+
+  it('builds defaults from compact controls', () => {
+    expect(getControlDefaults(controls)).toEqual({
+      threshold: 0.05,
+      method: 'linear',
+      saveResults: true,
+      notes: '',
+      diagnostics: false,
+    })
+  })
+
+  it('accepts primitive and option-array shorthand controls', () => {
+    const schema = controlsToFormSchema(shorthandControls)
+
+    expect(getControlDefaults(shorthandControls)).toEqual({
+      threshold: 0.05,
+      model: 'linear',
+      enabled: true,
+      title: 'Drug screen',
+      mode: 'fast',
+    })
+    expect(schema.sections).toHaveLength(1)
+    expect(schema.sections[0].fields.map(field => [field.name, field.type, field.defaultValue])).toEqual([
+      ['threshold', 'number', 0.05],
+      ['model', 'select', 'linear'],
+      ['enabled', 'toggle', true],
+      ['title', 'text', 'Drug screen'],
+      ['mode', 'select', 'fast'],
+    ])
+    expect(schema.sections[0].fields[1].props?.options).toEqual([
+      { value: 'linear', label: 'Linear' },
+      { value: 'logistic', label: 'Logistic' },
+    ])
+    expect(schema.sections[0].fields[4].props?.options).toEqual([
+      { value: 'fast', label: 'Fast' },
+      { value: 'careful', label: 'Careful' },
+    ])
+  })
+
+  it('converts controls to a FormBuilder schema', () => {
+    const schema = controlsToFormSchema(controls, {
+      submitLabel: 'Run analysis',
+      sections: {
+        parameters: { columns: 2 },
+      },
+    })
+
+    expect(schema.submitLabel).toBe('Run analysis')
+    expect(schema.sections.map(section => section.id)).toEqual(['parameters', 'output', 'diagnostics'])
+    expect(schema.sections[0].title).toBe('Parameters')
+    expect(schema.sections[0].description).toBeUndefined()
+    expect(schema.sections[0].columns).toBe(2)
+    expect(schema.sections[0].fields.map(field => field.name)).toEqual(['threshold', 'method'])
+
+    const threshold = schema.sections[0].fields[0]
+    expect(threshold.type).toBe('slider')
+    expect(threshold.defaultValue).toBe(0.05)
+    expect(threshold.props).toMatchObject({ min: 0, max: 1, step: 0.01 })
+
+    const method = schema.sections[0].fields[1]
+    expect(method.type).toBe('select')
+    expect(method.validation?.required).toBe(true)
+    expect(method.props?.options).toEqual([
+      { label: 'Linear', value: 'linear' },
+      { label: 'Logistic', value: 'logistic' },
+    ])
+  })
+
+  it('converts controls to AppSidebar panels', () => {
+    const panels = controlsToSidebarPanels(controls)
+
+    expect(Object.keys(panels)).toEqual(['analysis'])
+    expect(panels.analysis).toEqual([
+      {
+        id: 'parameters',
+        label: 'Analysis Parameters',
+        subtitle: 'Analysis controls',
+        icon: 'settings',
+        iconColor: '#6366f1',
+        iconBg: '#e0e7ff',
+        defaultOpen: undefined,
+        showToggle: undefined,
+      },
+      {
+        id: 'output',
+        label: 'Output',
+        subtitle: undefined,
+        icon: undefined,
+        iconColor: undefined,
+        iconBg: undefined,
+        defaultOpen: false,
+        showToggle: true,
+      },
+    ])
+  })
+
+  it('returns view helpers that can drive AppTopBar pillNav and AppSidebar together', () => {
+    expect(controlsToViewIds(controls)).toEqual(['analysis'])
+    expect(controlsToViewItems(controls)).toEqual([{ id: 'analysis', label: 'Analysis' }])
+    expect(getDefaultControlView(controls)).toBe('analysis')
+  })
+
+  it('uses shared view metadata for AppTopBar pill navigation', () => {
+    const runIcon = 'M8 5v14l11-7z'
+    const options = {
+      views: {
+        analysis: {
+          label: 'Run',
+          icon: runIcon,
+          disabled: false,
+        },
+      },
+    }
+
+    expect(controlsToViewItems(controls, options)).toEqual([
+      {
+        id: 'analysis',
+        label: 'Run',
+        icon: runIcon,
+        disabled: false,
+      },
+    ])
+  })
+
+  it('flattens nested control models into workspace bindings', () => {
+    const model = defineControlModel({
+      initialValues: { replicates: 4 },
+      topBarSettings: { title: 'Design settings', showAppearance: false },
+      views: {
+        design: {
+          label: 'Design',
+          icon: 'flask',
+          sections: {
+            dose: {
+              label: 'Dose design',
+              description: 'Dose and layout controls',
+              icon: 'settings',
+              columns: 2,
+              defaultOpen: false,
+              controls: {
+                concentrationUnit: ['uM', 'nM'],
+                replicates: { type: 'number', default: 3, min: 1 },
+              },
+            },
+            display: {
+              label: 'Display',
+              sidebar: false,
+              controls: {
+                showHeatmap: true,
+              },
+            },
+          },
+        },
+        results: {
+          label: 'Results',
+          section: 'plots',
+          sectionLabel: 'Plots',
+          controls: {
+            chartScale: ['linear', 'log'],
+          },
+        },
+      },
+      componentProps: {
+        mode: 'concentrationUnit',
+        targetWells: values => values.showHeatmap ? ['A1', 'A2'] : [],
+        disabled: values => !values.showHeatmap,
+      },
+      componentPropsById: {
+        dose: {
+          mode: 'concentrationUnit',
+          targetWells: values => values.showHeatmap ? ['A1', 'A2'] : [],
+          disabled: values => !values.showHeatmap,
+        },
+        plate: {
+          selectedWells: values => values.showHeatmap ? ['A1', 'A2'] : [],
+          disabled: values => !values.showHeatmap,
+        },
+      },
+      components: defineControlComponentBindings({
+        dose: {
+          component: 'DoseCalculator',
+          props: {
+            mode: 'concentrationUnit',
+            targetWells: values => values.showHeatmap ? ['A1', 'A2'] : [],
+            disabled: values => !values.showHeatmap,
+          },
+        },
+        plate: {
+          component: 'WellPlate',
+          props: {
+            modelValue: values => values.showHeatmap ? ['A1', 'A2'] : [],
+            disabled: values => !values.showHeatmap,
+          },
+        },
+      }),
+    })
+
+    expect(model.controls.concentrationUnit).toMatchObject({
+      default: 'uM',
+      section: 'design-dose',
+      view: 'design',
+    })
+    expect(model.controls.showHeatmap).toMatchObject({
+      default: true,
+      section: 'design-display',
+      view: 'design',
+      sidebar: false,
+    })
+    expect(model.controlOptions.sections?.['design-dose']).toMatchObject({
+      id: 'design-dose',
+      label: 'Dose design',
+      description: 'Dose and layout controls',
+      icon: 'settings',
+      columns: 2,
+      defaultOpen: false,
+    })
+    expect(model.controlOptions.views?.design).toMatchObject({
+      label: 'Design',
+      icon: 'flask',
+    })
+    expect(model.componentProps).toBeDefined()
+    expect(model.componentPropsById).toBeDefined()
+    expect(model.componentBindings).toBeDefined()
+
+    const workspace = useControlWorkspace(model.controls, model.controlOptions)
+
+    expect(workspace.values.replicates).toBe(4)
+    expect(workspace.topBar.value.pillNav.map(item => [item.id, item.label])).toEqual([
+      ['design', 'Design'],
+      ['results', 'Results'],
+    ])
+    expect(workspace.sidebarPanels.design.map(panel => panel.id)).toEqual(['design-dose'])
+    expect(workspace.sidebarPanels.results.map(panel => panel.id)).toEqual(['plots'])
+    expect(workspace.formSchema.sections.map(section => section.id)).toEqual([
+      'design-dose',
+      'design-display',
+      'plots',
+    ])
+    expect(workspace.topBarSettings.settingsConfig.title).toBe('Design settings')
+    expect(workspace.topBarSettings.settingsConfig.showAppearance).toBe(false)
+    expect(workspace.getComponentProps(model.componentProps)).toEqual({
+      mode: 'uM',
+      targetWells: ['A1', 'A2'],
+      disabled: false,
+    })
+    expect(workspace.getComponentPropsById(model.componentPropsById)).toEqual({
+      dose: {
+        mode: 'uM',
+        targetWells: ['A1', 'A2'],
+        disabled: false,
+      },
+      plate: {
+        selectedWells: ['A1', 'A2'],
+        disabled: false,
+      },
+    })
+    expect(workspace.getComponentBindings(model.componentBindings)).toEqual([
+      {
+        id: 'dose',
+        component: 'DoseCalculator',
+        props: {
+          mode: 'uM',
+          targetWells: ['A1', 'A2'],
+          disabled: false,
+        },
+      },
+      {
+        id: 'plate',
+        component: 'WellPlate',
+        props: {
+          modelValue: ['A1', 'A2'],
+          disabled: false,
+        },
+      },
+    ])
+    expect(workspace.getComponentBindingsById(model.componentBindings).plate.props.modelValue).toEqual(['A1', 'A2'])
+  })
+
+  it('normalizes raw and complete control models through one resolver', () => {
+    const rawModel = {
+      initialValues: { threshold: 0.1 },
+      controls: {
+        threshold: { type: 'number' as const, label: 'Threshold', default: 0.05 },
+      },
+    }
+
+    const binding = resolveControlModel(rawModel)
+
+    expect(isControlModelBinding(rawModel)).toBe(false)
+    expect(isControlModelBinding(binding)).toBe(true)
+    expect(binding?.controls.threshold).toMatchObject({
+      label: 'Threshold',
+      default: 0.05,
+    })
+    expect(binding?.controlOptions.initialValues).toEqual({ threshold: 0.1 })
+    expect(resolveControlModel(binding)).toBe(binding)
+    expect(resolveControlModel(undefined)).toBeUndefined()
+  })
+
+  it('maps control values into named SDK component bindings', () => {
+    const values = {
+      threshold: 0.05,
+      selectedWells: ['A1'],
+      enabled: true,
+    }
+    const bindings = defineControlComponentBindings([
+      {
+        component: 'ResultChart',
+        props: {
+          score: 'threshold',
+          disabled: values => !values.enabled,
+        },
+      },
+      {
+        component: 'ResultChart',
+        props: ['selectedWells'],
+      },
+      {
+        id: 'plate',
+        component: 'WellPlate',
+        props: {
+          modelValue: 'selectedWells',
+        },
+      },
+    ])
+
+    expect(controlValuesToComponentBindings(values, bindings)).toEqual([
+      {
+        id: 'ResultChart',
+        component: 'ResultChart',
+        props: {
+          score: 0.05,
+          disabled: false,
+        },
+      },
+      {
+        id: 'ResultChart-2',
+        component: 'ResultChart',
+        props: {
+          selectedWells: ['A1'],
+        },
+      },
+      {
+        id: 'plate',
+        component: 'WellPlate',
+        props: {
+          modelValue: ['A1'],
+        },
+      },
+    ])
+    expect(controlValuesToComponentBindingsById(values, bindings).plate.component).toBe('WellPlate')
+  })
+
+  it('keeps direct view controls in separate generated sections', () => {
+    const model = defineControlModel({
+      views: {
+        run: {
+          label: 'Run',
+          controls: { threshold: 0.05 },
+        },
+        results: {
+          label: 'Results',
+          controls: { chartScale: ['linear', 'log'] },
+        },
+      },
+    })
+    const workspace = useControlWorkspace(model.controls, model.controlOptions)
+
+    expect(model.controls.threshold).toMatchObject({ section: 'run-controls', view: 'run' })
+    expect(model.controls.chartScale).toMatchObject({ section: 'results-controls', view: 'results' })
+    expect(workspace.sectionSchemas['run-controls'].sections[0].fields.map(field => field.name)).toEqual([
+      'threshold',
+    ])
+    expect(workspace.sectionSchemas['results-controls'].sections[0].fields.map(field => field.name)).toEqual([
+      'chartScale',
+    ])
+    expect(workspace.sidebarPanels.run.map(panel => panel.id)).toEqual(['run-controls'])
+    expect(workspace.sidebarPanels.results.map(panel => panel.id)).toEqual(['results-controls'])
+  })
+
+  it('rejects duplicate control names in nested control models', () => {
+    expect(() =>
+      defineControlModel({
+        sections: {
+          first: { controls: { threshold: 0.05 } },
+          second: { controls: { threshold: 0.1 } },
+        },
+      }),
+    ).toThrow('Duplicate control "threshold"')
+  })
+
+  it('converts controls to a SettingsModal schema', () => {
+    const condition = { field: 'method', eq: 'linear' } as const
+    const schema = controlsToSettingsSchema(controls, {
+      sections: {
+        parameters: {
+          label: 'Analysis Settings',
+          description: 'Controls used by the analysis run',
+          icon: '<svg viewBox="0 0 24 24"></svg>',
+          columns: 2,
+          condition,
+          visibleFor: 'admin',
+          permissions: ['plugins.configure'],
+        },
+      },
+    })
+
+    expect(schema.groups.map(group => group.id)).toEqual(['parameters', 'output', 'diagnostics'])
+    expect(schema.groups[0]).toMatchObject({
+      id: 'parameters',
+      label: 'Analysis Settings',
+      description: 'Controls used by the analysis run',
+      icon: '<svg viewBox="0 0 24 24"></svg>',
+      columns: 2,
+      condition,
+      visibleFor: 'admin',
+      permissions: ['plugins.configure'],
+    })
+    expect(schema.groups[0].fields.map(field => field.name)).toEqual(['threshold', 'method'])
+    expect(schema.groups[1].label).toBe('Output')
+    expect(schema.groups[1].description).toBeUndefined()
+  })
+
+  it('converts controls to an AppTopBar settings config', () => {
+    const options = {
+      sections: {
+        parameters: { label: 'Analysis Settings' },
+      },
+    }
+    const config = controlsToTopBarSettingsConfig(controls, options, {
+      title: 'Analysis controls',
+      showAppearance: false,
+      layout: 'vertical',
+    })
+
+    expect(config.title).toBe('Analysis controls')
+    expect(config.showAppearance).toBe(false)
+    expect(config.layout).toBe('vertical')
+    expect(config.controls).toBe(controls)
+    expect(config.controlOptions).toBe(options)
+    expect(config.schema).toBeUndefined()
+  })
+
+  it('returns section-only schemas for sidebar slots', () => {
+    const schema = controlsToSectionFormSchema(controls, 'output')
+
+    expect(schema.sections).toHaveLength(1)
+    expect(schema.sections[0].id).toBe('output')
+    expect(schema.sections[0].title).toBe('')
+    expect(schema.sections[0].fields.map(field => field.name)).toEqual(['saveResults', 'notes'])
+  })
+
+  it('returns section-only schemas keyed by section for AppSidebar forms', () => {
+    const schemas = controlsToSectionFormSchemas(controls)
+
+    expect(Object.keys(schemas)).toEqual(['parameters', 'output', 'diagnostics'])
+    expect(schemas.parameters.sections[0].title).toBe('')
+    expect(schemas.parameters.sections[0].fields.map(field => field.name)).toEqual(['threshold', 'method'])
+    expect(schemas.output.sections[0].fields.map(field => field.name)).toEqual(['saveResults', 'notes'])
+  })
+
+  it('packages form schema, sidebar panels, defaults, and section helpers', () => {
+    const toolkit = useControlSchema(controls)
+
+    expect(toolkit.initialValues.saveResults).toBe(true)
+    expect(toolkit.formSchema.sections[0].id).toBe('parameters')
+    expect(toolkit.form.schema).toBe(toolkit.formSchema)
+    expect(toolkit.settingsSchema.groups[0].id).toBe('parameters')
+    expect(toolkit.settings.schema).toBe(toolkit.settingsSchema)
+    expect(toolkit.topBarSettingsConfig.controls).toBe(toolkit.controls)
+    expect(toolkit.topBarSettingsConfig.controlOptions).toEqual({})
+    expect(toolkit.topBarSettingsConfig.schema).toBeUndefined()
+    expect(toolkit.topBarSettings).toEqual({
+      showSettings: true,
+      settingsConfig: toolkit.topBarSettingsConfig,
+    })
+    expect(toolkit.sidebarPanels.analysis).toHaveLength(2)
+    expect(toolkit.viewIds).toEqual(['analysis'])
+    expect(toolkit.viewItems).toEqual([{ id: 'analysis', label: 'Analysis' }])
+    expect(toolkit.defaultView).toBe('analysis')
+    expect(toolkit.sidebar.panels).toBe(toolkit.sidebarPanels)
+    expect(toolkit.sidebar.forms).toBe(toolkit.sectionSchemas)
+    expect(toolkit.sidebar.viewIds).toBe(toolkit.viewIds)
+    expect(toolkit.sidebar.viewItems).toBe(toolkit.viewItems)
+    expect(toolkit.sidebar.defaultView).toBe('analysis')
+    expect(toolkit.fields.map(field => field.name)).toEqual([
+      'threshold',
+      'method',
+      'saveResults',
+      'notes',
+      'diagnostics',
+    ])
+    expect(toolkit.sectionSchema('parameters').sections[0].fields).toHaveLength(2)
+    expect(toolkit.sectionSchemas.parameters.sections[0].fields).toHaveLength(2)
+  })
+
+  it('packages shared values and direct component bindings for control workspaces', () => {
+    const workspace = useControlWorkspace(shorthandControls, {
+      initialValues: { threshold: 0.2 },
+      topBarSettings: { title: 'Controls', showAppearance: false },
+    })
+
+    expect(workspace.schema.controls).toBe(workspace.controls)
+    expect(workspace.values).toMatchObject({
+      threshold: 0.2,
+      model: 'linear',
+      enabled: true,
+      title: 'Drug screen',
+      mode: 'fast',
+    })
+    expect(workspace.form.modelValue).toBe(workspace.values)
+    expect(workspace.sidebar.modelValue).toBe(workspace.values)
+    expect(workspace.sidebar.values).toBe(workspace.values)
+    expect(workspace.sidebar.activeView).toBe('default')
+    expect(workspace.topBar.value.pillNav).toEqual([{ id: 'default', label: 'Default' }])
+    expect(workspace.topBar.value.currentPillId).toBe('default')
+    expect(workspace.pillNav.items).toEqual([{ id: 'default', label: 'Default' }])
+    expect(workspace.pillNav.currentItemId).toBe('default')
+    expect(workspace.topBarSettings.settingsConfig.values).toBe(workspace.values)
+    expect(workspace.topBarSettings.settingsConfig.title).toBe('Controls')
+    expect(workspace.topBarSettings.settingsConfig.showAppearance).toBe(false)
+    expect(workspace.topBarSettings.settingsConfig.controls).toBe(workspace.controls)
+    expect(workspace.topBarSettings.settingsConfig.controlOptions).toEqual({})
+    expect(workspace.topBarSettings.settingsConfig.schema).toBeUndefined()
+    expect(workspace.bindings.form).toBe(workspace.form)
+    expect(workspace.bindings.sidebar).toBe(workspace.sidebar)
+    expect(workspace.bindings.topBar).toBe(workspace.topBar)
+    expect(workspace.bindings.topBarSettings).toBe(workspace.topBarSettings)
+    expect(workspace.bindings.pillNav).toBe(workspace.pillNav)
+    expect(workspace.bindings.componentBindings).toBe(workspace.componentBindings)
+    expect(workspace.bindings.componentBindingsById).toBe(workspace.componentBindingsById)
+    expect(workspace.bindings.componentProps).toBe(workspace.componentProps)
+    expect(workspace.bindings.componentPropsById).toBe(workspace.componentPropsById)
+    expect(workspace.bindings.topBar.value).toMatchObject({
+      pillNav: workspace.pillNav.items,
+      currentPillId: 'default',
+      showSettings: true,
+      settingsConfig: workspace.topBarSettingsConfig,
+    })
+
+    workspace.form['onUpdate:modelValue']({ threshold: 0.5, model: 'logistic' })
+    expect(workspace.values.threshold).toBe(0.5)
+    expect(workspace.values.model).toBe('logistic')
+
+    workspace.sidebar['onUpdate:values']({ enabled: false })
+    expect(workspace.values.enabled).toBe(false)
+
+    workspace.sidebar['onUpdate:modelValue']({ enabled: true, title: 'Updated screen' })
+    expect(workspace.values.enabled).toBe(true)
+    expect(workspace.values.title).toBe('Updated screen')
+
+    workspace.topBarSettings.onSettingsValuesChange({ mode: 'careful' })
+    expect(workspace.values.mode).toBe('careful')
+
+    workspace.topBar.value.onPillSelect({ id: 'missing', label: 'Missing' })
+    expect(workspace.activeView.value).toBe('default')
+
+    workspace.resetValues()
+    expect(workspace.values).toMatchObject({
+      threshold: 0.05,
+      model: 'linear',
+      enabled: true,
+      title: 'Drug screen',
+      mode: 'fast',
+    })
+  })
+
+  it('maps workspace values into direct component props', () => {
+    const workspace = useControlWorkspace(defineControls({
+      sampleNames: {
+        default: ['Control', 'Treatment'],
+        type: 'tags',
+      },
+      unit: 'uM',
+      enabled: true,
+    }))
+
+    expect(workspace.getComponentProps(['sampleNames', 'unit'])).toEqual({
+      sampleNames: ['Control', 'Treatment'],
+      unit: 'uM',
+    })
+    expect(workspace.getComponentProps({
+      samples: 'sampleNames',
+      concentrationUnit: 'unit',
+      disabled: values => !values.enabled,
+    })).toEqual({
+      samples: ['Control', 'Treatment'],
+      concentrationUnit: 'uM',
+      disabled: false,
+    })
+    expect(workspace.getComponentPropsById({
+      plate: {
+        modelValue: 'sampleNames',
+        disabled: values => !values.enabled,
+      },
+      dose: {
+        unit: 'unit',
+        readonly: values => !values.enabled,
+      },
+    })).toEqual({
+      plate: {
+        modelValue: ['Control', 'Treatment'],
+        disabled: false,
+      },
+      dose: {
+        unit: 'uM',
+        readonly: false,
+      },
+    })
+    expect(workspace.getComponentPropsById()).toEqual({})
+
+    workspace.setValues({ enabled: false, unit: 'nM' })
+
+    expect(controlValuesToComponentProps(workspace.values, {
+      unit: 'unit',
+      disabled: values => !values.enabled,
+    })).toEqual({
+      unit: 'nM',
+      disabled: true,
+    })
+  })
+
+  it('provides built-in WellPlate and DoseCalculator component prop mappings', () => {
+    const model = defineControlModel({
+      controls: {
+        selectedWells: { type: 'tags', default: ['A1', 'A2'] },
+        plateFormat: [96, 384],
+        doseMode: ['serial', 'dilution'],
+        disabled: false,
+      },
+      componentPropsById: defineWellPlateDoseControlProps(),
+    })
+    const workspace = useControlWorkspace(model.controls, model.controlOptions)
+    const componentPropsById = workspace.getComponentPropsById(model.componentPropsById)
+
+    expect(componentPropsById.plate.modelValue).toEqual(['A1', 'A2'])
+    expect(componentPropsById.plate.format).toBe(96)
+    expect(componentPropsById.plate.wells).toBeUndefined()
+    expect(componentPropsById.plate.disabled).toBe(false)
+    expect(componentPropsById.plate.readonly).toBeUndefined()
+    expect(componentPropsById.dose.mode).toBe('serial')
+    expect(componentPropsById.dose.targetWells).toEqual(['A1', 'A2'])
+    expect(componentPropsById.dose.disabled).toBe(false)
+
+    const updatePlateSelection = componentPropsById.plate['onUpdate:modelValue']
+    expect(typeof updatePlateSelection).toBe('function')
+    if (typeof updatePlateSelection !== 'function') throw new Error('Expected WellPlate update handler')
+    updatePlateSelection(['B1', 'B2'])
+
+    expect(workspace.values.selectedWells).toEqual(['B1', 'B2'])
+    const syncedPropsById = workspace.getComponentPropsById(model.componentPropsById)
+    expect(syncedPropsById.dose.targetWells).toEqual(['B1', 'B2'])
+
+    const applyToWells = syncedPropsById.dose.onApplyToWells
+    expect(typeof applyToWells).toBe('function')
+    if (typeof applyToWells !== 'function') throw new Error('Expected DoseCalculator apply handler')
+    applyToWells([
+      {
+        wellId: 'B1',
+        concentration: { value: 100, unit: 'µM' },
+        volume: { value: 50, unit: 'µL' },
+      },
+      {
+        wellId: 'B2',
+        concentration: { value: 50, unit: 'µM' },
+      },
+    ])
+
+    expect(workspace.values.wells).toMatchObject({
+      B1: {
+        state: 'filled',
+        value: 100,
+        metadata: {
+          concentration: { value: 100, unit: 'µM' },
+          volume: { value: 50, unit: 'µL' },
+        },
+      },
+      B2: {
+        state: 'filled',
+        value: 50,
+        metadata: {
+          concentration: { value: 50, unit: 'µM' },
+        },
+      },
+    })
+    expect(workspace.getComponentPropsById(model.componentPropsById).plate.wells).toBe(workspace.values.wells)
+  })
+
+  it('accepts a complete control model binding directly', () => {
+    const model = defineDoseDesignControlModel({
+      selectedWells: ['E1'],
+      plateFormat: 384,
+    })
+    const workspace = useControlWorkspace(model, {
+      initialValues: {
+        disabled: true,
+      },
+    })
+
+    expect(workspace.values.selectedWells).toEqual(['E1'])
+    expect(workspace.values.plateFormat).toBe(384)
+    expect(workspace.values.doseMode).toBe('serial')
+    expect(workspace.values.disabled).toBe(true)
+    expect(workspace.sidebar.panels.design.map(panel => panel.id)).toEqual(['design-dose'])
+    expect(workspace.componentProps.value).toEqual({})
+    expect(workspace.componentPropsById.value.plate.modelValue).toEqual(['E1'])
+    expect(workspace.componentPropsById.value.plate.format).toBe(384)
+    expect(workspace.componentPropsById.value.plate.disabled).toBe(true)
+    expect(workspace.componentPropsById.value.dose.mode).toBe('serial')
+    expect(workspace.componentPropsById.value.dose.targetWells).toEqual(['E1'])
+    expect(workspace.componentPropsById.value.dose.disabled).toBe(true)
+    expect(workspace.componentBindings.value.map(binding => [binding.id, binding.component])).toEqual([
+      ['plate', 'WellPlate'],
+      ['dose', 'DoseCalculator'],
+    ])
+    expect(workspace.componentBindingsById.value.plate.props.modelValue).toEqual(['E1'])
+    expect(workspace.componentBindingsById.value.dose.props.disabled).toBe(true)
+
+    const updatePlateSelection = workspace.componentPropsById.value.plate['onUpdate:modelValue']
+    expect(typeof updatePlateSelection).toBe('function')
+    if (typeof updatePlateSelection !== 'function') throw new Error('Expected WellPlate update handler')
+    updatePlateSelection(['F1', 'F2'])
+
+    expect(workspace.values.selectedWells).toEqual(['F1', 'F2'])
+    expect(workspace.componentPropsById.value.dose.targetWells).toEqual(['F1', 'F2'])
+  })
+
+  it('allows biology component prop mapping field overrides', () => {
+    const workspace = useControlWorkspace(defineControls({
+      wells: { type: 'tags', default: ['B1'] },
+      format: [384, 96],
+      mode: ['dilution', 'serial'],
+      locked: true,
+      molecularWeight: 300.44,
+    }))
+    const plateProps = workspace.getComponentProps(defineWellPlateControlProps({
+      selectedWells: 'wells',
+      format: 'format',
+      wells: () => undefined,
+      disabled: 'locked',
+      showSampleTypeIndicator: () => true,
+    }))
+
+    expect(plateProps.modelValue).toEqual(['B1'])
+    expect(plateProps.format).toBe(384)
+    expect(plateProps.wells).toBeUndefined()
+    expect(plateProps.disabled).toBe(true)
+    expect(plateProps.readonly).toBeUndefined()
+    expect(plateProps.showSampleTypeIndicator).toBe(true)
+    const updatePlateSelection = plateProps['onUpdate:modelValue']
+    expect(typeof updatePlateSelection).toBe('function')
+    if (typeof updatePlateSelection !== 'function') throw new Error('Expected WellPlate update handler')
+    updatePlateSelection(['C1', 'C2'])
+    expect(workspace.values.wells).toEqual(['C1', 'C2'])
+    const doseProps = workspace.getComponentProps(defineDoseCalculatorControlProps({
+      mode: 'mode',
+      targetWells: 'wells',
+      disabled: 'locked',
+      molecularWeight: 'molecularWeight',
+    }))
+
+    expect(doseProps.mode).toBe('dilution')
+    expect(doseProps.targetWells).toEqual(['C1', 'C2'])
+    expect(doseProps.disabled).toBe(true)
+    expect(doseProps.molecularWeight).toBe(300.44)
+    expect(doseProps.onApplyToWells).toBeUndefined()
+  })
+
+  it('creates WellPlate and DoseCalculator component bindings for dose controls', () => {
+    const workspace = useControlWorkspace(defineControls({
+      selectedWells: { type: 'tags', default: ['B1'] },
+      plateFormat: 384,
+      doseMode: ['serial', 'dilution'],
+      disabled: false,
+    }))
+    const bindings = workspace.getComponentBindings(defineWellPlateDoseComponentBindings())
+
+    expect(bindings.map(binding => [binding.id, binding.component])).toEqual([
+      ['plate', 'WellPlate'],
+      ['dose', 'DoseCalculator'],
+    ])
+    expect(bindings[0].props.modelValue).toEqual(['B1'])
+    expect(bindings[0].props.format).toBe(384)
+    expect(bindings[1].props.mode).toBe('serial')
+    expect(bindings[1].props.targetWells).toEqual(['B1'])
+  })
+
+  it('creates a complete dose design control model from one helper', () => {
+    const model = defineDoseDesignControlModel({
+      selectedWells: ['C1', 'C2'],
+      plateFormat: 384,
+      includeMolecularWeight: true,
+      molecularWeight: 300.44,
+    })
+    const workspace = useControlWorkspace(model.controls, model.controlOptions)
+
+    expect(model.controlOptions.views?.design).toMatchObject({ label: 'Design' })
+    expect(model.controlOptions.sections?.['design-dose']).toMatchObject({
+      label: 'Dose design',
+      description: 'Well selection and dose calculator controls',
+    })
+    expect(workspace.values.selectedWells).toEqual(['C1', 'C2'])
+    expect(workspace.values.plateFormat).toBe(384)
+    expect(workspace.values.doseMode).toBe('serial')
+    expect(workspace.values.disabled).toBe(false)
+    expect(workspace.values.molecularWeight).toBe(300.44)
+    expect(workspace.sidebar.panels.design.map(panel => panel.id)).toEqual(['design-dose'])
+    const componentPropsById = workspace.getComponentPropsById(model.componentPropsById)
+    expect(componentPropsById.plate.modelValue).toEqual(['C1', 'C2'])
+    expect(componentPropsById.plate.format).toBe(384)
+    expect(componentPropsById.plate.wells).toBeUndefined()
+    expect(componentPropsById.plate.disabled).toBe(false)
+    expect(componentPropsById.plate.readonly).toBeUndefined()
+    expect(componentPropsById.dose.mode).toBe('serial')
+    expect(componentPropsById.dose.targetWells).toEqual(['C1', 'C2'])
+    expect(componentPropsById.dose.disabled).toBe(false)
+    expect(componentPropsById.dose.molecularWeight).toBe(300.44)
+    expect(workspace.getComponentBindings(model.componentBindings).map(binding => [binding.id, binding.component])).toEqual([
+      ['plate', 'WellPlate'],
+      ['dose', 'DoseCalculator'],
+    ])
+
+    const updatePlateSelection = componentPropsById.plate['onUpdate:modelValue']
+    expect(typeof updatePlateSelection).toBe('function')
+    if (typeof updatePlateSelection !== 'function') throw new Error('Expected WellPlate update handler')
+    updatePlateSelection(['D1'])
+
+    expect(workspace.values.selectedWells).toEqual(['D1'])
+    expect(workspace.getComponentPropsById(model.componentPropsById).dose.targetWells).toEqual(['D1'])
+  })
+
+  it('customizes the generated dose design control model ids and component mappings', () => {
+    const model = defineDoseDesignControlModel({
+      viewId: 'setup',
+      viewLabel: 'Setup',
+      sectionId: 'plate',
+      sectionLabel: 'Plate setup',
+      componentProps: {
+        plateId: 'wellPlate',
+        doseId: 'doseCalculator',
+        plate: { showLegend: () => true },
+      },
+    })
+    const workspace = useControlWorkspace(model.controls, model.controlOptions)
+
+    expect(model.controlOptions.views?.setup).toMatchObject({ label: 'Setup' })
+    expect(model.controlOptions.sections?.['setup-plate']).toMatchObject({ label: 'Plate setup' })
+    const componentPropsById = workspace.getComponentPropsById(model.componentPropsById)
+    expect(componentPropsById.wellPlate.modelValue).toEqual(['A1', 'A2'])
+    expect(componentPropsById.wellPlate.showLegend).toBe(true)
+    expect(componentPropsById.doseCalculator.mode).toBe('serial')
+    expect(componentPropsById.doseCalculator.targetWells).toEqual(['A1', 'A2'])
+    expect(workspace.getComponentBindings(model.componentBindings).map(binding => [binding.id, binding.component])).toEqual([
+      ['wellPlate', 'WellPlate'],
+      ['doseCalculator', 'DoseCalculator'],
+    ])
+  })
+
+  it('keeps AppTopBar pill navigation and AppSidebar active view on the same workspace state', async () => {
+    const workspace = useControlWorkspace({
+      threshold: {
+        default: 0.05,
+        section: 'parameters',
+        view: 'analysis',
+      },
+      chartScale: {
+        default: 'linear',
+        section: 'display',
+        view: 'results',
+      },
+    }, {
+      views: {
+        analysis: { label: 'Run' },
+        results: { label: 'Results' },
+      },
+    })
+
+    expect(workspace.activeView.value).toBe('analysis')
+    expect(workspace.sidebar.activeView).toBe('analysis')
+    expect(workspace.topBar.value.currentPillId).toBe('analysis')
+    expect(workspace.pillNav.currentItemId).toBe('analysis')
+    expect(workspace.bindings.topBar.value.currentPillId).toBe('analysis')
+    expect(workspace.topBar.value.pillNav.map(item => item.label)).toEqual(['Run', 'Results'])
+    expect(workspace.pillNav.items.map(item => item.label)).toEqual(['Run', 'Results'])
+
+    workspace.topBar.value.onPillSelect({ id: 'results', label: 'Results' })
+    expect(workspace.activeView.value).toBe('results')
+    expect(workspace.sidebar.activeView).toBe('results')
+    expect(workspace.topBar.value.currentPillId).toBe('results')
+    expect(workspace.pillNav.currentItemId).toBe('results')
+    expect(workspace.bindings.topBar.value.currentPillId).toBe('results')
+
+    workspace.setActiveView('analysis')
+    expect(workspace.activeView.value).toBe('analysis')
+    expect(workspace.sidebar.activeView).toBe('analysis')
+    expect(workspace.topBar.value.currentPillId).toBe('analysis')
+    expect(workspace.pillNav.currentItemId).toBe('analysis')
+    workspace.bindings.topBar.value.onPillSelect({ id: 'results', label: 'Results' })
+    expect(workspace.activeView.value).toBe('results')
+    expect(workspace.bindings.topBar.value.currentPillId).toBe('results')
+
+    workspace.pillNav.onSelect({ id: 'analysis', label: 'Run' })
+    expect(workspace.activeView.value).toBe('analysis')
+    expect(workspace.bindings.topBar.value.currentPillId).toBe('analysis')
+
+    workspace.pillNav.onSelect({ id: 'results', label: 'Results' })
+    expect(workspace.activeView.value).toBe('results')
+    expect(workspace.sidebar.activeView).toBe('results')
+    expect(workspace.topBar.value.currentPillId).toBe('results')
+    expect(workspace.pillNav.currentItemId).toBe('results')
+
+    workspace.activeView.value = 'analysis'
+    await nextTick()
+
+    expect(workspace.sidebar.activeView).toBe('analysis')
+    expect(workspace.topBar.value.currentPillId).toBe('analysis')
+    expect(workspace.pillNav.currentItemId).toBe('analysis')
+
+    workspace.pillNav.currentItemId = 'results'
+    await nextTick()
+
+    expect(workspace.activeView.value).toBe('results')
+    expect(workspace.sidebar.activeView).toBe('results')
+    expect(workspace.topBar.value.currentPillId).toBe('results')
+  })
+
+  it('builds controls and component bindings for biology templates', () => {
+    const controlsToolkit = useBioTemplateControls('wellplate-screen')
+    const collection = createWellPlateScreenCollection({
+      samples: ['Control', 'Treatment'],
+      compounds: { 'Drug A': [10, 1] },
+    })
+    const componentsToolkit = useBioTemplateComponents(collection)
+
+    expect(controlsToolkit.initialValues.plateFormat).toBe(96)
+    expect(controlsToolkit.sidebarPanels.design.map(panel => panel.id)).toContain('dose')
+    expect(componentsToolkit.bindings.map(binding => binding.component)).toContain('WellPlate')
+    expect(componentsToolkit.imports[0].statement).toContain('DoseCalculator')
+    expect(componentsToolkit.componentBindingsById['dose-response:DoseCalculator'].component).toBe('DoseCalculator')
+    expect(componentsToolkit.componentBindingsById['dose-response:DoseCalculator'].props.mode).toBe('serial')
+    expect(componentsToolkit.componentProps.map(binding => binding.component)).toContain('DoseCalculator')
+    expect(componentsToolkit.componentPropsById['dose-response:DoseCalculator'].mode).toBe('serial')
+    expect(componentsToolkit.componentPropsByComponent.WellPlate).toHaveLength(2)
+    expect(componentsToolkit.getComponentProps('DoseCalculator')?.mode).toBe('serial')
+    expect(componentsToolkit.snippets.map(snippet => snippet.component)).toContain('DoseCalculator')
+    expect(componentsToolkit.usage?.template).toContain('<DoseCalculator')
+
+    const presetOnlyToolkit = useBioTemplateComponents('wellplate-screen')
+    expect(presetOnlyToolkit.imports[0].statement).toContain('PlateMapEditor')
+    expect(presetOnlyToolkit.componentProps).toEqual([])
+    expect(presetOnlyToolkit.componentBindingsById).toEqual({})
+    expect(presetOnlyToolkit.componentPropsById).toEqual({})
+    expect(presetOnlyToolkit.componentPropsByComponent).toEqual({})
+    expect(presetOnlyToolkit.getComponentProps('WellPlate')).toBeUndefined()
+    expect(presetOnlyToolkit.snippets).toEqual([])
+    expect(presetOnlyToolkit.usage).toBeNull()
+  })
+})