@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

package/src/components/{SearchableSelect.vue → internal/SelectSearchableInternal.vue}

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-/** Searchable single-select listbox with descriptions, disabled reasons, and custom slots. */
-import { computed, nextTick, ref, useId, watch } from 'vue'
-import type { SelectOption, SelectOptionInput } from '../types'
-import { useEventListener } from '../composables/useEventListener'
-import { normalizeOptionInput } from '../utils/options'
+/** BaseSelect with `searchable`: a single-select listbox with a search field, descriptions, disabled reasons, and custom slots. */
+import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
+import type { SelectOption, SelectOptionInput } from '../../types'
+import { useEventListener } from '../../composables/useEventListener'
+import { normalizeOptionInput } from '../../utils/options'
 
 interface Props {
-  modelValue?: string | number
+  modelValue?: string | number | null
   options: SelectOptionInput<string | number>[]
   placeholder?: string
   searchPlaceholder?: string
   noResultsText?: string
   size?: 'sm' | 'md' | 'lg'
   disabled?: boolean
+  invalid?: boolean
   /** Id of the visible label; the trigger is then named by the label and the selected value. */
   ariaLabelledby?: string
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,6 +25,16 @@ const props = withDefaults(defineProps<Props>(), {
   noResultsText: 'No matching options',
   size: 'md',
   disabled: false,
+  invalid: false,
+})
+
+defineOptions({ inheritAttrs: false })
+
+// The wrapper takes class and style; every other attribute (aria-label, data-*) names the focused trigger.
+const attrs = useAttrs()
+const triggerAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
 })
 
 const emit = defineEmits<{
@@ -141,16 +153,20 @@ useEventListener(() => document, 'pointerdown', event => {
 <template>
   <div
     ref="root"
-    :class="['mint-searchable-select', `mint-searchable-select--${size}`]"
+    :class="['mint-searchable-select', `mint-searchable-select--${size}`, $attrs.class]"
+    :style="$attrs.style"
     @focusout="!root?.contains($event.relatedTarget as Node | null) && closePanel()"
   >
     <button
+      v-bind="triggerAttrs"
       :id="triggerId"
       ref="trigger"
       type="button"
+      :aria-describedby="ariaDescribedby || undefined"
       :aria-labelledby="ariaLabelledby ? `${ariaLabelledby} ${triggerId}` : undefined"
-      class="mint-searchable-select__trigger"
+      :class="['mint-searchable-select__trigger', { 'mint-searchable-select__trigger--error': invalid }]"
       :disabled="disabled"
+      :aria-invalid="invalid || undefined"
       :aria-expanded="open"
       :aria-controls="listboxId"
       aria-haspopup="listbox"

package/src/components/internal/WellEditPopupInternal.vue

@@ -10,7 +10,6 @@ import { DEFAULT_SAMPLE_TYPE_COLORS } from '../WellPlate.colors'
 import BaseButton from '../BaseButton.vue'
 import BaseInput from '../BaseInput.vue'
 import FormField from '../FormField.vue'
-import IconButton from '../IconButton.vue'
 import NumberInput from '../NumberInput.vue'
 import SegmentedControl from '../SegmentedControl.vue'
 
@@ -232,9 +231,7 @@ onBeforeUnmount(() => {
         <span class="mint-well-edit-popup__marker" :style="marker.style" aria-hidden="true">{{ marker.glyph }}</span>
         <span class="mint-well-edit-popup__well-id">{{ wellId }}</span>
         <span class="mint-well-edit-popup__title">{{ groupLabel ?? 'Edit well' }}</span>
-        <IconButton class="mint-well-edit-popup__close" variant="ghost" size="sm" label="Close" @click="commit(); emit('close')">
-          <X :size="16" aria-hidden="true" />
-        </IconButton>
+        <BaseButton class="mint-well-edit-popup__close" variant="ghost" size="sm" :icon="X" label="Close" @click="commit(); emit('close')" />
       </div>
 
       <div class="mint-well-edit-popup__body">
@@ -274,17 +271,15 @@ onBeforeUnmount(() => {
         </FormField>
 
         <FormField v-if="hasField('injectionVolume')" label="Volume" :layout="fieldLayout" data-field="injectionVolume">
-          <BaseInput
+          <NumberInput
             v-model="formData.injectionVolume"
-            type="number"
             size="sm"
             :min="0.1"
             :max="100"
             :step="0.5"
+            unit="µL"
             aria-label="Volume"
-          >
-            <template #suffix>µL</template>
-          </BaseInput>
+          />
         </FormField>
 
         <template v-if="hasAdvanced">

package/src/components/internal/WorkspaceShellInternal.vue

@@ -6,8 +6,6 @@
  * Not part of the public SDK surface — see PluginWorkspaceView.vue for the public component.
  */
 import type {
-  AccountMenuItem,
-  PageSelectorItem,
   PillNavItem,
   PillNavOption,
 } from '../../types'
@@ -20,14 +18,9 @@ defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'page-selector-select': [page: PageSelectorItem]
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
-  'account-menu-select': [item: AccountMenuItem]
-  'sign-out': []
-  'notifications-click': []
   'settings-values-change': [data: Record<string, unknown>]
-  'admin-click': []
 }>()
 
 function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
@@ -40,13 +33,9 @@ defineSlots<{
   default?: (props: PluginWorkspaceShellModel['controls']) => unknown
   icon?: (props: Record<string, unknown>) => unknown
   logo?: (props: Record<string, unknown>) => unknown
-  'page-selector-icon'?: (props: Record<string, unknown>) => unknown
-  'page-selector-item-icon'?: (props: Record<string, unknown>) => unknown
   nav?: (props: Record<string, unknown>) => unknown
   center?: (props: Record<string, unknown>) => unknown
   actions?: (props: Record<string, unknown>) => unknown
-  'account-menu-items'?: (props: Record<string, unknown>) => unknown
-  'account-menu-item-icon'?: (props: Record<string, unknown>) => unknown
   'settings-appearance'?: (props: Record<string, unknown>) => unknown
 }>()
 </script>
@@ -64,36 +53,14 @@ defineSlots<{
     <template #topbar>
       <slot name="topbar" v-bind="shell.controls">
         <AppTopBar
+          v-if="shell.topBar"
           :title="shell.title"
           :subtitle="shell.subtitle"
-          :variant="shell.topBarVariant"
-          :home-path="shell.homePath"
-          :show-logo="shell.showLogo"
-          :page-selector="shell.pageSelector"
-          :current-page-selector-id="shell.currentPageSelectorId"
-          :pill-nav="shell.pillNav"
-          :current-pill-id="shell.currentPillId"
-          :show-theme-toggle="shell.showThemeToggle"
-          :show-settings="shell.showSettings"
-          :settings-config="shell.settingsConfig"
-          :show-standalone-label="shell.showStandaloneLabel"
-          :standalone-label="shell.standaloneLabel"
-          :account-menu="shell.accountMenu"
-          :show-notifications="shell.showNotifications"
-          :has-notification-dot="shell.hasNotificationDot"
-          :show-admin="shell.showAdmin"
-          :admin-path="shell.adminPath"
-          :user-name="shell.userName"
-          :user-initial="shell.userInitial"
-          :user-email="shell.userEmail"
-          @page-selector-select="emit('page-selector-select', $event)"
+          :spec="shell.topBar"
+          :pill="shell.pill"
           @pill-select="emit('pill-select', $event)"
           @pill-option-select="handlePillOptionSelect"
-          @account-menu-select="emit('account-menu-select', $event)"
-          @sign-out="emit('sign-out')"
-          @notifications-click="emit('notifications-click')"
           @settings-values-change="emit('settings-values-change', $event)"
-          @admin-click="emit('admin-click')"
         >
           <template
             v-for="slotName in shell.topBarSlotNames"

package/src/components/internal/WorkspaceSidebarInternal.vue

@@ -13,7 +13,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  'update:modelValue': [values: Record<string, unknown>]
+  'update:values': [values: Record<string, unknown>]
   'update:collapsed': [value: boolean]
   'update:toggle': [sectionId: string, value: boolean]
   'section-action': [sectionId: string, actionId: string]
@@ -31,35 +31,14 @@ defineSlots<{
 
 <template>
   <AppSidebar
-    :title="sidebar.title"
-    :subtitle="sidebar.subtitle"
-    :badge="sidebar.badge"
-    :panels="sidebar.panels"
+    :spec="sidebar.spec"
     :active-view="sidebar.activeView"
-    :floating="sidebar.floating"
-    :density="sidebar.dense ? 'compact' : 'comfortable'"
-    :width="sidebar.width"
-    :side="sidebar.side"
-    :forms="sidebar.forms"
-    :content-id="sidebar.contentId"
-    :show-when-empty="sidebar.showWhenEmpty"
-    :model="sidebar.model"
-    :controls="sidebar.controlSchema"
-    :control-options="sidebar.controlOptions"
     :values="sidebar.values"
-    :form-enhancements="sidebar.formEnhancements"
-    :show-form-actions="sidebar.showFormActions"
+    :collapsed="sidebar.collapsed"
     :form-loading="sidebar.formLoading"
     :form-disabled="sidebar.formDisabled"
     :form-readonly="sidebar.formReadonly"
-    :form-size="sidebar.formSize"
-    :collapsible="sidebar.collapsible"
-    :collapsed="sidebar.collapsed"
-    :default-collapsed="sidebar.defaultCollapsed"
-    :collapsed-width="sidebar.collapsedWidth"
-    :collapse-button-label="sidebar.collapseButtonLabel"
-    :expand-button-label="sidebar.expandButtonLabel"
-    @update:model-value="$emit('update:modelValue', $event)"
+    @update:values="$emit('update:values', $event)"
     @update:collapsed="$emit('update:collapsed', $event)"
     @update:toggle="(sectionId, value) => $emit('update:toggle', sectionId, value)"
     @section-action="(sectionId, actionId) => $emit('section-action', sectionId, actionId)"

package/src/{composables → components/internal}/autoGroup/classKey.ts

@@ -1,4 +1,4 @@
-import type { SampleClass } from '../../types/auto-group'
+import type { SampleClass } from '../../../types/auto-group'
 
 export function classKey(
   c: Pick<SampleClass, 'kind'> & { subKind?: string; tokenLength?: number },

package/src/{composables → components/internal}/autoGroup/classify.ts

@@ -1,4 +1,4 @@
-import type { SampleClass, SampleClassKind, ClassDisposition } from '../../types/auto-group'
+import type { SampleClass, SampleClassKind, ClassDisposition } from '../../../types/auto-group'
 import { classKey } from './classKey'
 import vocabData from './vocab.json'
 

package/src/{composables → components/internal}/autoGroup/columns.ts

@@ -4,7 +4,7 @@ import type {
   ClassSchema,
   NumericParse,
   SampleClassKind,
-} from '../../types/auto-group'
+} from '../../../types/auto-group'
 import vocabData from './vocab.json'
 
 const NUMERIC_VALUE_UNIT = /^(\d+(?:(?:dot|\.)\d+)?)([A-Za-z%/μ]+)$/

package/src/{composables → components/internal}/autoGroup/compose.ts

@@ -5,9 +5,9 @@ import type {
   MetadataRow,
   NumericBinning,
   SampleClass,
-} from '../../types/auto-group'
-import type { SampleGroup } from '../../types/components'
-import type { TreeNode } from '../../types/componentLabTypes'
+} from '../../../types/auto-group'
+import type { SampleGroup } from '../../../types/components'
+import type { TreeNode } from '../../../types/componentLabTypes'
 import { DEFAULT_COLORS, QC_OVERLAY_COLOR } from './colors'
 import { classKey } from './classKey'
 

package/src/{composables → components/internal}/autoGroup/cooccurrence.ts

@@ -1,4 +1,4 @@
-import type { ClassSchema, MergeSuggestion } from '../../types/auto-group'
+import type { ClassSchema, MergeSuggestion } from '../../../types/auto-group'
 
 const THRESHOLD = 0.95
 const MIN_CLASS_SIZE = 4

package/src/{composables → components/internal}/autoGroup/csv-shim.ts

@@ -1,4 +1,4 @@
-import type { ParsedCsvData } from '../../types/auto-group'
+import type { ParsedCsvData } from '../../../types/auto-group'
 
 function parseCSVLine(line: string, delimiter: string = ','): string[] {
   const result: string[] = []

package/src/{composables → components/internal}/autoGroup/fingerprint.ts

@@ -1,4 +1,4 @@
-import type { ClassSchema, SchemaFingerprint } from '../../types/auto-group'
+import type { ClassSchema, SchemaFingerprint } from '../../../types/auto-group'
 
 export function serializeFingerprint(schemas: ClassSchema[]): SchemaFingerprint {
   return {

package/src/{composables → components/internal}/autoGroup/index.ts

@@ -1,5 +1,4 @@
-// Internal engine for `useAutoGroup` / `AutoGroupModal`. Deprecated: scheduled
-// for removal in MINT 1.4 together with `useAutoGroup`; no SDK replacement.
+// Private engine for `useAutoGroup` / `AutoGroupModalInternal`, used only by `SampleSelector`.
 
 export { splitMulti, pickPrimaryDelimiter, tokenizeBatch } from './tokenize'
 export type { Delimiter, ExperimentHeader, TokenizedBatch } from './tokenize'

package/src/{composables → components/internal}/autoGroup/template.ts

@@ -1,4 +1,4 @@
-import type { ClassSchema, ColumnInfo, SampleClass } from '../../types/auto-group'
+import type { ClassSchema, ColumnInfo, SampleClass } from '../../../types/auto-group'
 import { classKey } from './classKey'
 
 export interface TemplateOptions {

package/src/{composables → components/internal}/autoGroup/tokenLength.ts

@@ -1,4 +1,4 @@
-import type { SampleClass } from '../../types/auto-group'
+import type { SampleClass } from '../../../types/auto-group'
 import { isExperimentalKind } from './classify'
 
 /**

package/src/components/internal/generatedJobsApi.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'
 
-import type { GeneratedAnalysisTransport } from '../../composables/useGeneratedAnalysis'
+import type { GeneratedAnalysisTransport } from '../../composables/useJobsEndpoint'
 
 /** The plugin jobs API a generated workspace talks to, for fields that need it. */
 export interface GeneratedJobsApi {

package/src/{composables → components/internal}/useAutoGroup.ts

@@ -8,13 +8,12 @@ import type {
   InputMode,
   MergeSuggestion,
   NumericBinning,
-  OutlierAction,
   OutlierInfo,
   ParsedCsvData,
   SampleClass,
   SchemaFingerprint,
   ValueOps,
-} from '../types/auto-group'
+} from '../../types/auto-group'
 import {
   GROUPING_FIELD_ROLES,
   buildClassSchema,
@@ -33,9 +32,7 @@ import {
   type ExperimentHeader,
   type TemplateOptions,
 } from './autoGroup'
-import { unwrapExperimentDesignData } from './experimentDesignData'
-
-export { DEFAULT_COLORS } from './autoGroup'
+import { unwrapExperimentDesignData } from '../../composables/experimentDesignData'
 
 const STRUCTURED_MISSING_GROUP = 'Outlier'
 
@@ -45,24 +42,11 @@ interface LoadExperimentDataOptions {
   samples?: readonly string[]
 }
 
-let deprecationWarned = false
-let outlierDeprecationWarned = false
-function warnDeprecated(api: string) {
-  if (deprecationWarned) return
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') return
-  console.warn(
-    `[useAutoGroup] ${api} is deprecated; use the new class-first API (setClassDisposition / toggleGroupBy / setValueOps).`,
-  )
-  deprecationWarned = true
-}
-
 // Re-export `parseCSV` for callers that imported it from this file.
 export { parseCSV } from './autoGroup/csv-shim'
 
 /**
- * Sample-grouping engine behind `AutoGroupModal`.
- *
- * @deprecated Scheduled for removal in MINT 1.4; no SDK replacement.
+ * Sample-grouping engine behind `AutoGroupModalInternal`. Private to `SampleSelector`.
  */
 export function useAutoGroup() {
   const inputMode = ref<InputMode>('paste')
@@ -533,40 +517,6 @@ export function useAutoGroup() {
     () => groups.value.length > 1 && groups.value.every(g => g.samples.length === 1),
   )
 
-  function setOutlierAction(_: number, __: OutlierAction) {
-    if (!outlierDeprecationWarned) {
-      if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
-        console.warn(
-          `[useAutoGroup] setOutlierAction is deprecated AND inactive in the class-first redesign. ` +
-          `Use setClassDisposition('iqc' | 'eqc' | …, 'group' | 'overlay' | 'exclude') instead.`,
-        )
-        outlierDeprecationWarned = true
-      }
-    }
-  }
-
-  function setAllOutlierActions(__: OutlierAction) {
-    if (!outlierDeprecationWarned) {
-      if (typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') {
-        console.warn(
-          `[useAutoGroup] setAllOutlierActions is deprecated AND inactive in the class-first redesign. ` +
-          `Use setClassDisposition('iqc' | 'eqc' | …, 'group' | 'overlay' | 'exclude') instead.`,
-        )
-        outlierDeprecationWarned = true
-      }
-    }
-  }
-
-  function toggleField(index: number) {
-    warnDeprecated('toggleField')
-    if (activeClassKey.value) toggleGroupBy(activeClassKey.value, index)
-  }
-
-  function renameField(index: number, name: string) {
-    warnDeprecated('renameField')
-    if (activeClassKey.value) setColumnName(activeClassKey.value, index, name)
-  }
-
   function loadExperimentData(
     rawData: Record<string, unknown>,
     options: LoadExperimentDataOptions = {},
@@ -610,15 +560,11 @@ export function useAutoGroup() {
     mergeColumns, loadFingerprint,
     // Actions
     parseInput, downloadTemplate, composeTemplateForTest, loadExperimentData, reset,
-    // Deprecated shims
-    setOutlierAction, setAllOutlierActions, toggleField, renameField,
   }
 }
 
 /**
  * Reads experiment `design_data` samples into the `useAutoGroup` CSV shape.
- *
- * @deprecated Scheduled for removal in MINT 1.4 together with `useAutoGroup`.
  */
 export function extractSamplesFromDesignData(
   rawData: Record<string, unknown>,

package/src/composables/componentSpecs.ts

@@ -0,0 +1,62 @@
+// `define<ComponentName>` spec builders (spec R14, 3.2). Each one is a typed
+// identity: the component applies the defaults, so `:spec` stays optional.
+import type { DataFrameSpec, PlateEditorSpec, PluginWorkspaceViewSpec, WellPlateSpec } from '../types'
+
+/** A spec whose defaulted keys are no longer optional. */
+export type ResolvedSpec<S, D> = Omit<S, keyof D> & { [K in keyof D]-?: K extends keyof S ? Exclude<S[K], undefined> : never }
+
+/** Spread `spec` over `defaults`, skipping keys set to `undefined` (as prop defaults do). */
+export function applySpecDefaults<S extends object, D extends { [K in keyof S]?: S[K] }>(
+  defaults: D,
+  spec: S | undefined,
+): ResolvedSpec<S, D> {
+  const result: Record<string, unknown> = { ...defaults }
+  for (const [key, value] of Object.entries(spec ?? {})) {
+    if (value !== undefined) result[key] = value
+  }
+  return result as ResolvedSpec<S, D>
+}
+
+/**
+ * Build the `:spec` of a PluginWorkspaceView: title, top bar, sidebar, experiment save.
+ *
+ * @example Recommended
+ * ```ts
+ * const workspace = definePluginWorkspaceView({
+ *   title: 'DRP Analysis',
+ *   topBar: { pills: pillNav, settings: () => (canConfigure.value ? settingsConfig : false) },
+ *   sidebar: { title: 'Parameters', controls: defineControlModel({ controls }) },
+ *   experiment: true,
+ *   save: { handler: saveDesign, disabled: saveBlocked, reason: saveBlockedReason },
+ * })
+ * ```
+ */
+export function definePluginWorkspaceView(spec: PluginWorkspaceViewSpec): PluginWorkspaceViewSpec {
+  return spec
+}
+
+/**
+ * Build the `:spec` of a DataFrame: columns, row key, paging, search, selection.
+ *
+ * @example Recommended
+ * ```ts
+ * const table = defineDataFrame({
+ *   columns: [{ key: 'sample', label: 'Sample', sortable: true }],
+ *   rowKey: 'id',
+ *   pagination: { pageSize: 25 },
+ * })
+ * ```
+ */
+export function defineDataFrame(spec: DataFrameSpec): DataFrameSpec {
+  return spec
+}
+
+/** Build the `:spec` of a WellPlate: format, selection mode, display options, heatmap, well editor. */
+export function defineWellPlate(spec: WellPlateSpec): WellPlateSpec {
+  return spec
+}
+
+/** Build the `:spec` of a PlateEditor: formats, slots, groups, inspector, import/export, clear, fill series. */
+export function definePlateEditor(spec: PlateEditorSpec): PlateEditorSpec {
+  return spec
+}

package/src/composables/controlComponentBindings.ts

@@ -73,6 +73,13 @@ function normalizeControlComponentBindingConfigs<TValues extends Record<string,
   }))
 }
 
+/** Map control values onto component props (`props`) and component bindings (`list`, `byId`). */
+export const controlBindings = {
+  props: controlValuesToComponentProps,
+  list: controlValuesToComponentBindings,
+  byId: controlValuesToComponentBindingsById,
+}
+
 function uniqueComponentBindingId(id: string, usedIds: Map<string, number>): string {
   const count = usedIds.get(id) ?? 0
   usedIds.set(id, count + 1)

package/src/composables/controlSchemaAdapters.ts

@@ -52,12 +52,15 @@ export function controlsToFormSchema(
 
   return {
     sections,
-    submitLabel: options.submitLabel,
-    cancelLabel: options.cancelLabel,
-    showCancel: options.showCancel,
+    ...controlFormActions(options.actions),
   }
 }
 
+function controlFormActions(actions: ControlSchemaOptions['actions']): Omit<ControlFormSchema, 'sections'> {
+  if (!actions) return {}
+  return { actions: true, ...(actions === true ? {} : actions) }
+}
+
 /** Convert controls into AppSidebar panels grouped by view and section. */
 export function controlsToSidebarPanels(
   controls: ControlSchema,
@@ -124,12 +127,11 @@ export function controlsToSettingsSchema(
 export function controlsToTopBarSettingsConfig(
   controls: ControlSchema,
   options: ControlSchemaOptions = {},
-  config: Omit<TopBarSettingsConfig, 'schema' | 'controls' | 'controlOptions'> = {},
+  config: Omit<TopBarSettingsConfig, 'spec'> = {},
 ): TopBarSettingsConfig {
   return {
     ...config,
-    controls,
-    controlOptions: options,
+    spec: { controls, controlOptions: options },
   }
 }
 
@@ -141,7 +143,7 @@ export function controlsToViewIds(
   return controlsToViewItems(controls, options).map(item => item.id)
 }
 
-/** Return AppTopBar pillNav-compatible view items for switching generated control sidebars. */
+/** Return AppTopBar `spec.pills` view items for switching generated control sidebars. */
 export function controlsToViewItems(
   controls: ControlSchema,
   options: ControlSchemaOptions = {},
@@ -170,6 +172,7 @@ export function controlsToSectionFormSchema(
     sections: schema.sections
       .filter(section => section.id === sectionId)
       .map(section => ({ ...section, title: '', description: undefined })),
+    actions: schema.actions,
     submitLabel: schema.submitLabel,
     cancelLabel: schema.cancelLabel,
     showCancel: schema.showCancel,
@@ -186,6 +189,7 @@ export function controlsToSectionFormSchemas(
   for (const section of schema.sections) {
     schemas[section.id] = {
       sections: [{ ...section, title: '', description: undefined }],
+      actions: schema.actions,
       submitLabel: schema.submitLabel,
       cancelLabel: schema.cancelLabel,
       showCancel: schema.showCancel,
@@ -193,3 +197,37 @@ export function controlsToSectionFormSchemas(
   }
   return schemas
 }
+
+const CONTROL_TARGETS = {
+  form: controlsToFormSchema,
+  sectionForm: controlsToSectionFormSchema,
+  sectionForms: controlsToSectionFormSchemas,
+  settings: controlsToSettingsSchema,
+  sidebarPanels: controlsToSidebarPanels,
+  topBarSettings: controlsToTopBarSettingsConfig,
+  viewIds: controlsToViewIds,
+  viewItems: controlsToViewItems,
+} as const
+
+/** What `controlsTo()` can build from a control schema. */
+export type ControlsTarget = keyof typeof CONTROL_TARGETS
+
+/**
+ * Build one target shape from a control schema: a FormBuilder schema (`form`,
+ * `sectionForm`, `sectionForms`), a settings modal schema (`settings`), sidebar
+ * panels (`sidebarPanels`), a top-bar settings config (`topBarSettings`) or the
+ * view list (`viewIds`, `viewItems`).
+ *
+ * @example
+ * ```ts
+ * const schema = controlsTo('form', controls)
+ * const section = controlsTo('sectionForm', controls, 'analysis')
+ * ```
+ */
+export function controlsTo<T extends ControlsTarget>(
+  target: T,
+  ...args: Parameters<(typeof CONTROL_TARGETS)[T]>
+): ReturnType<(typeof CONTROL_TARGETS)[T]> {
+  const build = CONTROL_TARGETS[target] as (...values: unknown[]) => ReturnType<(typeof CONTROL_TARGETS)[T]>
+  return build(...args)
+}

package/src/composables/controlSchemaDoseDesign.ts

@@ -10,7 +10,7 @@ import type {
   WellPlateControlPropsOptions,
   WellPlateDoseControlPropsOptions,
 } from './controlSchemaTypes'
-import type { WellConcentration } from './useDoseCalculator'
+import type { WellConcentration } from '../utils/dose'
 import {
   defineControlModel,
 } from './controlSchemaModel'
@@ -27,15 +27,19 @@ export function defineWellPlateControlProps<TValues extends Record<string, unkno
     ? undefined
     : options.onUpdateModelValue ?? updateControlValueSource(selectedWells)
 
+  const format = options.format ?? sourceKey<TValues>('plateFormat')
+  const showLegend = options.showLegend
+
   return compactComponentPropsMap<TValues>({
     modelValue: selectedWells,
     'onUpdate:modelValue': onUpdateModelValue,
-    format: options.format ?? sourceKey<TValues>('plateFormat'),
+    spec: (values: TValues) => ({
+      format: readSource(values, format),
+      showLegend: showLegend === undefined ? undefined : readSource(values, showLegend),
+    }),
     wells: options.wells ?? sourceKey<TValues>('wells'),
     disabled: options.disabled ?? sourceKey<TValues>('disabled'),
     readonly: options.readonly ?? sourceKey<TValues>('readonly'),
-    showLegend: options.showLegend,
-    showSampleTypeIndicator: options.showSampleTypeIndicator,
   })
 }
 
@@ -87,7 +91,7 @@ export function defineWellPlateDoseComponentBindings<TValues extends Record<stri
 }
 
 /**
- * Return a complete ControlWorkspaceView model for WellPlate + DoseCalculator dose design.
+ * Return a complete PluginWorkspaceView sidebar model for WellPlate + DoseCalculator dose design.
  *
  * @example Recommended
  * ```ts
@@ -168,6 +172,13 @@ function compactComponentPropsMap<TValues extends Record<string, unknown>>(
   )
 }
 
+function readSource<TValues extends Record<string, unknown>>(
+  values: TValues,
+  source: ControlComponentPropSource<TValues>,
+): unknown {
+  return typeof source === 'function' ? source(values) : values[source]
+}
+
 function sourceKey<TValues extends Record<string, unknown>>(key: string): keyof TValues & string {
   return key as keyof TValues & string
 }