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

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 
 // Capture side-effect callbacks so tests can invoke them directly
 let capturedScopeDispose: (() => void) | null = null
@@ -83,6 +83,43 @@ describe('useAppExperiment', () => {
   // -------------------------------------------------------------------------
 
   describe('set', () => {
+    it('should initialize from a direct experiment option', () => {
+      const { experimentName, experimentCode, experimentId } = useAppExperiment({
+        experiment: makeExperiment({ id: 8, name: 'Initial run', experiment_code: 'EXP-008' }),
+      })
+
+      expect(experimentName.value).toBe('Initial run')
+      expect(experimentCode.value).toBe('EXP-008')
+      expect(experimentId.value).toBe(8)
+    })
+
+    it('should sync and clear a reactive experiment option', async () => {
+      const source = ref<ExperimentSummary | null>(
+        makeExperiment({ id: 8, name: 'Initial run', experiment_code: 'EXP-008' }),
+      )
+      const { experimentName, experimentCode, experimentId } = useAppExperiment({
+        experiment: source,
+      })
+
+      expect(experimentName.value).toBe('Initial run')
+      expect(experimentCode.value).toBe('EXP-008')
+      expect(experimentId.value).toBe(8)
+
+      source.value = makeExperiment({ id: 9, name: 'Updated run', experiment_code: 'EXP-009' })
+      await nextTick()
+
+      expect(experimentName.value).toBe('Updated run')
+      expect(experimentCode.value).toBe('EXP-009')
+      expect(experimentId.value).toBe(9)
+
+      source.value = null
+      await nextTick()
+
+      expect(experimentName.value).toBeUndefined()
+      expect(experimentCode.value).toBeUndefined()
+      expect(experimentId.value).toBeNull()
+    })
+
     it('should update experimentName and experimentId on set', () => {
       const { set, experimentName, experimentId } = useAppExperiment()
       const experiment = makeExperiment({ id: 7, name: 'Alpha Run' })
@@ -511,6 +548,68 @@ describe('useAppExperiment', () => {
     })
   })
 
+  // -------------------------------------------------------------------------
+  // component bindings
+  // -------------------------------------------------------------------------
+
+  describe('component bindings', () => {
+    it('exposes live ExperimentPopover props from the provided state', async () => {
+      const saveDisabled = ref(false)
+      const saveDisabledMessage = ref<string | undefined>('Ready to save')
+      const onSave = vi.fn().mockResolvedValue('Saved')
+      const { set } = useAppExperiment({ onSave, saveDisabled, saveDisabledMessage })
+      const state = getState()
+
+      set(makeExperiment({
+        id: 12,
+        name: 'Dose response',
+        status: 'ongoing',
+        experiment_code: 'EXP-012',
+      }))
+
+      expect(state.popover.value).toMatchObject({
+        experimentName: 'Dose response',
+        experimentCode: 'EXP-012',
+        experimentStatus: 'ongoing',
+        showSave: true,
+        showDetach: true,
+        saveDisabled: false,
+        saveDisabledMessage: 'Ready to save',
+        saveLoading: false,
+      })
+
+      saveDisabled.value = true
+      saveDisabledMessage.value = 'Locked'
+
+      expect(state.popover.value.saveDisabled).toBe(true)
+      expect(state.popover.value.saveDisabledMessage).toBe('Locked')
+
+      await state.handleSave()
+
+      expect(state.popover.value.saveSuccessMessage).toBe('Saved')
+    })
+
+    it('exposes live ExperimentSelectorModal props from state and return value', () => {
+      const appExperiment = useAppExperiment()
+      const state = getState()
+
+      expect(state.selectorModal.value).toEqual({
+        modelValue: false,
+        currentExperimentId: null,
+      })
+      expect(appExperiment.selectorModal.value).toEqual(state.selectorModal.value)
+
+      appExperiment.set(makeExperiment({ id: 77 }))
+      state.openModal()
+
+      expect(state.selectorModal.value).toEqual({
+        modelValue: true,
+        currentExperimentId: 77,
+      })
+      expect(appExperiment.popover.value.experimentName).toBe('Test Experiment')
+    })
+  })
+
   // -------------------------------------------------------------------------
   // Timer cleanup via onScopeDispose
   // -------------------------------------------------------------------------

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

@@ -46,7 +46,7 @@ describe('useBioTemplatePackWorkspace', () => {
     expect(workspace.sidebar.value).toBe(workspace.workspace.value.sidebar)
     expect(workspace.sidebar.value.values).toBe(workspace.workspace.value.values)
     expect(workspace.sidebar.value.activeView).toBe('design')
-    expect(workspace.topBar.value).toBe(workspace.workspace.value.topBar)
+    expect(workspace.topBar.value).toBe(workspace.workspace.value.topBar.value)
     expect(workspace.pillNav.value).toBe(workspace.workspace.value.pillNav)
     expect(workspace.pillNav.value.items.map(item => item.id)).toContain('design')
     expect(workspace.topBarSettings.value).toBe(workspace.workspace.value.topBarSettings)
@@ -56,9 +56,12 @@ describe('useBioTemplatePackWorkspace', () => {
     expect(workspace.topBarSettings.value.settingsConfig.values).toBe(workspace.workspace.value.values)
     expect(workspace.sidebar.value.panels.design.map(panel => panel.id)).toContain('dose')
     expect(workspace.componentBindings.value.map(binding => binding.component)).toContain('DoseCalculator')
+    expect(workspace.componentBindingsById.value['dose-response:DoseCalculator'].component).toBe('DoseCalculator')
+    expect(workspace.componentBindingsById.value['dose-response:DoseCalculator'].props.mode).toBe('serial')
     expect(workspace.componentProps.value.map(binding => binding.component)).toContain('PlateMapEditor')
     expect(workspace.componentPropsById.value['plate-map:WellPlate'].wells).toBeDefined()
     expect(workspace.bindings.value.componentPropsById['plate-map:WellPlate'].wells).toBeDefined()
+    expect(workspace.bindings.value.componentBindingsById['plate-map:WellPlate'].props.wells).toBeDefined()
     expect(workspace.componentPropsByComponent.value.WellPlate.length).toBeGreaterThan(0)
     expect(workspace.getComponentProps('WellPlate')?.wells).toBeDefined()
     expect(workspace.bindings.value.getComponentProps('WellPlate')?.wells).toBeDefined()
@@ -79,10 +82,10 @@ describe('useBioTemplatePackWorkspace', () => {
     workspace.pillNav.value.onSelect({ id: 'analysis', label: 'Analysis' })
     expect(inner.activeView.value).toBe('analysis')
     expect(workspace.sidebar.value.activeView).toBe('analysis')
-    expect(workspace.topBar.value.currentTabId).toBe('analysis')
+    expect(workspace.topBar.value.currentPillId).toBe('analysis')
     expect(workspace.bindings.value.topBar.value.currentPillId).toBe('analysis')
 
-    workspace.topBar.value.onTabSelect({ id: 'run', label: 'Run' })
+    workspace.topBar.value.onPillSelect({ id: 'run', label: 'Run' })
     expect(inner.activeView.value).toBe('run')
     expect(workspace.sidebar.value.activeView).toBe('run')
     expect(workspace.pillNav.value.currentItemId).toBe('run')

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

@@ -53,16 +53,18 @@ describe('useBioTemplatePresetWorkspace', () => {
     expect(workspace.bindings.topBarSettings).toBe(workspace.topBarSettings)
     expect(workspace.bindings.pillNav).toBe(workspace.pillNav)
     expect(workspace.bindings.topBar.value.currentPillId).toBe('design')
-    expect(workspace.bindings.topBarTabs.value.currentTabId).toBe('design')
     expect(workspace.controlViewIds.value).toEqual(['design'])
     expect(workspace.controlViewItems.value).toEqual([{ id: 'design', label: 'Design' }])
     expect(workspace.activeControlView.value).toBe('design')
     expect(workspace.renderer.value.target).toBe(workspace.collection.value)
     expect(workspace.bindings.renderer.value.target).toBe(workspace.collection.value)
     expect(workspace.componentBindings.value.map(binding => binding.component)).toContain('DoseCalculator')
+    expect(workspace.componentBindingsById.value['dose-response:DoseCalculator'].component).toBe('DoseCalculator')
+    expect(workspace.componentBindingsById.value['dose-response:DoseCalculator'].props.mode).toBe('serial')
     expect(workspace.componentProps.value.map(binding => binding.component)).toContain('WellPlate')
     expect(workspace.componentPropsById.value['dose-response:DoseCalculator'].mode).toBe('serial')
     expect(workspace.bindings.componentPropsById.value['dose-response:DoseCalculator'].mode).toBe('serial')
+    expect(workspace.bindings.componentBindingsById.value['dose-response:DoseCalculator'].props.mode).toBe('serial')
     expect(workspace.componentPropsByComponent.value.WellPlate).toHaveLength(2)
     expect(workspace.getComponentProps('DoseCalculator')?.mode).toBe('serial')
     expect(workspace.bindings.getComponentProps('DoseCalculator')?.mode).toBe('serial')
@@ -82,7 +84,7 @@ describe('useBioTemplatePresetWorkspace', () => {
     workspace.setActiveControlView('analysis')
     expect(workspace.activeControlView.value).toBe('analysis')
     expect(workspace.sidebar.activeView).toBe('analysis')
-    expect(workspace.topBar.currentTabId).toBe('analysis')
+    expect(workspace.topBar.value.currentPillId).toBe('analysis')
     expect(workspace.pillNav.currentItemId).toBe('analysis')
 
     workspace.setActiveControlView('missing')
@@ -104,15 +106,13 @@ describe('useBioTemplatePresetWorkspace', () => {
     workspace.pillNav.onSelect({ id: 'analysis', label: 'Analysis' })
     expect(workspace.activeControlView.value).toBe('analysis')
     expect(workspace.sidebar.activeView).toBe('analysis')
-    expect(workspace.topBar.currentTabId).toBe('analysis')
+    expect(workspace.topBar.value.currentPillId).toBe('analysis')
     expect(workspace.bindings.topBar.value.currentPillId).toBe('analysis')
-    expect(workspace.bindings.topBarTabs.value.currentTabId).toBe('analysis')
 
-    workspace.topBar.onTabSelect({ id: 'run', label: 'Run' })
+    workspace.topBar.value.onPillSelect({ id: 'run', label: 'Run' })
     expect(workspace.activeControlView.value).toBe('run')
     expect(workspace.pillNav.currentItemId).toBe('run')
     expect(workspace.bindings.topBar.value.currentPillId).toBe('run')
-    expect(workspace.bindings.topBarTabs.value.currentTabId).toBe('run')
   })
 
   it('accepts direct initial values for generated preset controls and collection data', () => {

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

@@ -36,6 +36,9 @@ describe('useBioTemplateWorkspace', () => {
     expect(workspace.sidebar.panels.design.map(panel => panel.id)).toContain('dose')
     expect(workspace.componentProps.map(binding => binding.component)).toContain('DoseCalculator')
     expect(workspace.componentProps.map(binding => binding.component)).toContain('WellPlate')
+    expect(workspace.componentBindingsById['plate-map:WellPlate'].component).toBe('WellPlate')
+    expect(workspace.componentBindingsById['plate-map:WellPlate'].props.wells).toBeDefined()
+    expect(workspace.bindings.componentBindingsById['dose-response:DoseCalculator'].props.mode).toBe('serial')
     expect(workspace.componentPropsById['plate-map:WellPlate'].wells).toBeDefined()
     expect(workspace.bindings.componentPropsById['plate-map:WellPlate'].wells).toBeDefined()
     expect(workspace.componentPropsById['dose-response:DoseCalculator'].mode).toBe('serial')
@@ -56,14 +59,16 @@ describe('useBioTemplateWorkspace', () => {
     expect(workspace.controlSchema.sampleNames).toBe(workspace.controls.controls.sampleNames)
     expect(workspace.values.sampleNames).toEqual(['Control', 'Treatment'])
     expect(workspace.activeView.value).toBe('design')
-    expect(workspace.topBar.tabs.map(tab => tab.id)).toContain('design')
+    expect(workspace.topBar.value.pillNav.map(item => item.id)).toContain('design')
     expect(workspace.pillNav.items.map(item => item.id)).toContain('design')
     expect(workspace.controls.initialValues.sampleNames).toEqual(['Control', 'Treatment'])
     expect(workspace.sidebar.panels.design.map(panel => panel.id)).toContain('layout')
     expect(workspace.componentBindings.map(binding => binding.component)).toContain('PlateMapEditor')
     expect(workspace.componentImports[0].statement).toContain('WellPlate')
     expect(workspace.componentProps).toEqual([])
+    expect(workspace.componentBindingsById).toEqual({})
     expect(workspace.componentPropsById).toEqual({})
+    expect(workspace.bindings.componentBindingsById).toEqual({})
     expect(workspace.bindings.componentPropsById).toEqual({})
     expect(workspace.componentPropsByComponent).toEqual({})
     expect(workspace.getComponentProps('WellPlate')).toBeUndefined()

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

@@ -7,15 +7,18 @@ import {
   controlsToSidebarPanels,
   controlsToSettingsSchema,
   controlsToTopBarSettingsConfig,
-  controlsToTopBarTabs,
   controlsToViewIds,
   controlsToViewItems,
+  controlValuesToComponentBindings,
+  controlValuesToComponentBindingsById,
   controlValuesToComponentProps,
+  defineControlComponentBindings,
   defineControlModel,
   defineDoseDesignControlModel,
   defineDoseCalculatorControlProps,
   defineControls,
   defineWellPlateControlProps,
+  defineWellPlateDoseComponentBindings,
   defineWellPlateDoseControlProps,
   getDefaultControlView,
   getControlDefaults,
@@ -194,11 +197,10 @@ describe('useControlSchema', () => {
   it('returns view helpers that can drive AppPillNav and AppSidebar together', () => {
     expect(controlsToViewIds(controls)).toEqual(['analysis'])
     expect(controlsToViewItems(controls)).toEqual([{ id: 'analysis', label: 'Analysis' }])
-    expect(controlsToTopBarTabs(controls)).toEqual([{ id: 'analysis', label: 'Analysis' }])
     expect(getDefaultControlView(controls)).toBe('analysis')
   })
 
-  it('uses shared view metadata for AppTopBar tabs and AppPillNav items', () => {
+  it('uses shared view metadata for AppTopBar pill navigation', () => {
     const runIcon = 'M8 5v14l11-7z'
     const options = {
       views: {
@@ -218,14 +220,6 @@ describe('useControlSchema', () => {
         disabled: false,
       },
     ])
-    expect(controlsToTopBarTabs(controls, options)).toEqual([
-      {
-        id: 'analysis',
-        label: 'Run',
-        icon: runIcon,
-        disabled: false,
-      },
-    ])
   })
 
   it('flattens nested control models into workspace bindings', () => {
@@ -282,6 +276,23 @@ describe('useControlSchema', () => {
           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({
@@ -309,11 +320,12 @@ describe('useControlSchema', () => {
     })
     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.tabs.map(tab => [tab.id, tab.label])).toEqual([
+    expect(workspace.topBar.value.pillNav.map(item => [item.id, item.label])).toEqual([
       ['design', 'Design'],
       ['results', 'Results'],
     ])
@@ -342,6 +354,80 @@ describe('useControlSchema', () => {
         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('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', () => {
@@ -466,7 +552,6 @@ describe('useControlSchema', () => {
     expect(toolkit.sidebarPanels.analysis).toHaveLength(2)
     expect(toolkit.viewIds).toEqual(['analysis'])
     expect(toolkit.viewItems).toEqual([{ id: 'analysis', label: 'Analysis' }])
-    expect(toolkit.topBarTabs).toEqual([{ id: 'analysis', label: 'Analysis' }])
     expect(toolkit.defaultView).toBe('analysis')
     expect(toolkit.sidebar.panels).toBe(toolkit.sidebarPanels)
     expect(toolkit.sidebar.forms).toBe(toolkit.sectionSchemas)
@@ -502,8 +587,8 @@ describe('useControlSchema', () => {
     expect(workspace.sidebar.modelValue).toBe(workspace.values)
     expect(workspace.sidebar.values).toBe(workspace.values)
     expect(workspace.sidebar.activeView).toBe('default')
-    expect(workspace.topBar.tabs).toEqual([{ id: 'default', label: 'Default' }])
-    expect(workspace.topBar.currentTabId).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)
@@ -514,8 +599,11 @@ describe('useControlSchema', () => {
     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({
@@ -524,12 +612,6 @@ describe('useControlSchema', () => {
       showSettings: true,
       settingsConfig: workspace.topBarSettingsConfig,
     })
-    expect(workspace.bindings.topBarTabs.value).toMatchObject({
-      tabs: workspace.topBar.tabs,
-      currentTabId: 'default',
-      showSettings: true,
-      settingsConfig: workspace.topBarSettingsConfig,
-    })
 
     workspace.form['onUpdate:modelValue']({ threshold: 0.5, model: 'logistic' })
     expect(workspace.values.threshold).toBe(0.5)
@@ -545,7 +627,7 @@ describe('useControlSchema', () => {
     workspace.topBarSettings.onSettingsValuesChange({ mode: 'careful' })
     expect(workspace.values.mode).toBe('careful')
 
-    workspace.topBar.onTabSelect({ id: 'missing', label: 'Missing' })
+    workspace.topBar.value.onPillSelect({ id: 'missing', label: 'Missing' })
     expect(workspace.activeView.value).toBe('default')
 
     workspace.resetValues()
@@ -702,6 +784,12 @@ describe('useControlSchema', () => {
     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')
@@ -753,6 +841,25 @@ describe('useControlSchema', () => {
     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'],
@@ -783,6 +890,10 @@ describe('useControlSchema', () => {
     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')
@@ -814,9 +925,13 @@ describe('useControlSchema', () => {
     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 tabs and AppSidebar active view on the same workspace state', async () => {
+  it('keeps AppTopBar pill navigation and AppSidebar active view on the same workspace state', async () => {
     const workspace = useControlWorkspace({
       threshold: {
         default: 0.05,
@@ -837,47 +952,43 @@ describe('useControlSchema', () => {
 
     expect(workspace.activeView.value).toBe('analysis')
     expect(workspace.sidebar.activeView).toBe('analysis')
-    expect(workspace.topBar.currentTabId).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.bindings.topBarTabs.value.currentTabId).toBe('analysis')
-    expect(workspace.topBar.tabs.map(tab => tab.label)).toEqual(['Run', 'Results'])
+    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.onTabSelect({ id: 'results', label: 'Results' })
+    workspace.topBar.value.onPillSelect({ id: 'results', label: 'Results' })
     expect(workspace.activeView.value).toBe('results')
     expect(workspace.sidebar.activeView).toBe('results')
-    expect(workspace.topBar.currentTabId).toBe('results')
+    expect(workspace.topBar.value.currentPillId).toBe('results')
     expect(workspace.pillNav.currentItemId).toBe('results')
     expect(workspace.bindings.topBar.value.currentPillId).toBe('results')
-    expect(workspace.bindings.topBarTabs.value.currentTabId).toBe('results')
 
     workspace.setActiveView('analysis')
     expect(workspace.activeView.value).toBe('analysis')
     expect(workspace.sidebar.activeView).toBe('analysis')
-    expect(workspace.topBar.currentTabId).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')
-    expect(workspace.bindings.topBarTabs.value.currentTabId).toBe('results')
 
-    workspace.bindings.topBarTabs.value.onTabSelect({ id: 'analysis', label: 'Run' })
+    workspace.pillNav.onSelect({ id: 'analysis', label: 'Run' })
     expect(workspace.activeView.value).toBe('analysis')
     expect(workspace.bindings.topBar.value.currentPillId).toBe('analysis')
-    expect(workspace.bindings.topBarTabs.value.currentTabId).toBe('analysis')
 
     workspace.pillNav.onSelect({ id: 'results', label: 'Results' })
     expect(workspace.activeView.value).toBe('results')
     expect(workspace.sidebar.activeView).toBe('results')
-    expect(workspace.topBar.currentTabId).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.currentTabId).toBe('analysis')
+    expect(workspace.topBar.value.currentPillId).toBe('analysis')
     expect(workspace.pillNav.currentItemId).toBe('analysis')
 
     workspace.pillNav.currentItemId = 'results'
@@ -885,7 +996,7 @@ describe('useControlSchema', () => {
 
     expect(workspace.activeView.value).toBe('results')
     expect(workspace.sidebar.activeView).toBe('results')
-    expect(workspace.topBar.currentTabId).toBe('results')
+    expect(workspace.topBar.value.currentPillId).toBe('results')
   })
 
   it('builds controls and component bindings for biology templates', () => {
@@ -900,6 +1011,8 @@ describe('useControlSchema', () => {
     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)
@@ -910,6 +1023,7 @@ describe('useControlSchema', () => {
     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()