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

package/src/components/ControlWorkspaceView.vue

@@ -1,370 +0,0 @@
-<script setup lang="ts">
-/**
- * Complete control workspace component that turns a simple controls data model into AppTopBar, AppSidebar, and FormBuilder forms.
- *
- * @example Recommended
- * ```vue
- * <ControlWorkspaceView v-model="values" :model="workspaceModel" title="Analysis" />
- * ```
- */
-import { computed, effectScope, onScopeDispose, shallowRef, toRaw, watch, type EffectScope } from 'vue'
-import type { TopBarVariant } from '../types'
-import type { FormEnhancements } from '../types/form-builder'
-import type {
-  ControlComponentBindingsConfig,
-  ControlComponentPropsByIdMap,
-  ControlComponentPropsMap,
-  ControlModel,
-  ControlModelBinding,
-  ControlSchema,
-  ControlWorkspaceOptions,
-  UseControlWorkspaceReturn,
-} from '../composables/useControlSchema'
-import { useControlWorkspace } from '../composables/useControlSchema'
-import { controlWorkspaceProps } from '../composables/workspaceRecipes'
-import AppLayout from './AppLayout.vue'
-import AppSidebar from './AppSidebar.vue'
-import AppTopBar from './AppTopBar.vue'
-import FormBuilder from './FormBuilder.vue'
-
-type ControlWorkspaceSidebarVariant = 'default' | 'analysis'
-type ResolvedControlWorkspace = UseControlWorkspaceReturn<ControlSchema>
-
-interface ControlWorkspaceDefaultSlotProps {
-  workspace: ResolvedControlWorkspace
-  bindings: ResolvedControlWorkspace['bindings']
-  values: ResolvedControlWorkspace['values']
-  componentBindings: ReturnType<ResolvedControlWorkspace['getComponentBindings']>
-  componentBindingsById: ReturnType<ResolvedControlWorkspace['getComponentBindingsById']>
-  componentProps: ReturnType<ResolvedControlWorkspace['getComponentProps']>
-  componentPropsById: ReturnType<ResolvedControlWorkspace['getComponentPropsById']>
-}
-
-interface ControlWorkspaceTopbarSlotProps {
-  workspace: ResolvedControlWorkspace
-  bindings: ResolvedControlWorkspace['bindings']
-  topBar: ResolvedControlWorkspace['bindings']['topBar']['value']
-}
-
-interface ControlWorkspaceSidebarSlotProps {
-  workspace: ResolvedControlWorkspace
-  bindings: ResolvedControlWorkspace['bindings']
-  sidebar: ResolvedControlWorkspace['sidebar']
-}
-
-interface Props {
-  /** Model returned by defineControlModel()/defineDoseDesignControlModel(), or a raw nested ControlModel. */
-  model?: ControlModel | ControlModelBinding
-  /** Workspace returned by useControlWorkspace(). Use for full manual control. */
-  workspace?: UseControlWorkspaceReturn<ControlSchema>
-  /** Compact controls schema. When provided without workspace, the view creates the workspace internally. */
-  controls?: ControlSchema
-  /** Options passed to the internally generated useControlWorkspace() call. */
-  controlOptions?: ControlWorkspaceOptions
-  /** Initial values for the internally generated workspace. Merged over controlOptions.initialValues. */
-  initialValues?: Record<string, unknown>
-  /** External values for the internally generated workspace. Supports default v-model. */
-  modelValue?: Record<string, unknown>
-  /** External values for the internally generated workspace. Supports v-model:values. */
-  values?: Record<string, unknown>
-  /** AppTopBar title. */
-  title?: string
-  /** AppTopBar subtitle. */
-  subtitle?: string
-  /** AppTopBar visual variant. */
-  topBarVariant?: TopBarVariant
-  /** AppSidebar/AppLayout sidebar width. */
-  sidebarWidth?: string
-  /** @deprecated No-op, removed in MINT 1.4. AppSidebar has one look now; the former `analysis` preset is the default. */
-  sidebarVariant?: ControlWorkspaceSidebarVariant
-  /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
-  responsiveSidebar?: boolean
-  /** Sidebar position in AppLayout. */
-  sidebarPosition?: 'left' | 'right'
-  /** Optional AppSidebar chrome title for LEAF-style plugin workbenches. */
-  sidebarTitle?: string
-  /** Optional AppSidebar chrome subtitle for active experiment/run context. */
-  sidebarSubtitle?: string
-  /** Optional compact badge/count rendered in the AppSidebar chrome header. */
-  sidebarBadge?: string | number
-  /** Floating AppLayout style. */
-  floating?: boolean
-  /** Compact AppSidebar density. */
-  dense?: boolean
-  /** Whether AppTopBar should show generated settings. */
-  showSettings?: boolean
-  /** Render FormBuilder actions in the default content. */
-  showFormActions?: boolean
-  /** Runtime FormBuilder enhancements passed to generated forms. */
-  formEnhancements?: FormEnhancements<Record<string, unknown>>
-  /** Optional SDK component bindings exposed to the default slot with resolved props. */
-  componentBindings?: ControlComponentBindingsConfig
-  /** Optional mapping from workspace values to component props exposed to the default slot. */
-  componentProps?: ControlComponentPropsMap
-  /** Optional named mappings from workspace values to component props exposed to the default slot. */
-  componentPropsById?: ControlComponentPropsByIdMap
-  /** Loading/saving state passed to generated forms. */
-  formLoading?: boolean
-  /** Disabled state passed to generated forms. */
-  formDisabled?: boolean
-  /** Readonly state passed to generated forms. */
-  formReadonly?: boolean
-  /** FormBuilder size in the default content. */
-  formSize?: 'sm' | 'md' | 'lg'
-}
-
-const emit = defineEmits<{
-  /** Emitted when generated workspace values change through FormBuilder, AppSidebar, or AppTopBar settings. */
-  'update:modelValue': [values: Record<string, unknown>]
-  /** Emitted when generated workspace values change through FormBuilder, AppSidebar, or AppTopBar settings. */
-  'update:values': [values: Record<string, unknown>]
-  /** Forwarded from the default FormBuilder when showFormActions is enabled. */
-  submit: [values: Record<string, unknown>]
-  /** Forwarded from the default FormBuilder when showFormActions is enabled. */
-  cancel: []
-}>()
-
-defineSlots<{
-  default?: (props: ControlWorkspaceDefaultSlotProps) => unknown
-  topbar?: (props: ControlWorkspaceTopbarSlotProps) => unknown
-  sidebar?: (props: ControlWorkspaceSidebarSlotProps) => unknown
-}>()
-
-const props = withDefaults(defineProps<Props>(), {
-  model: undefined,
-  workspace: undefined,
-  controls: undefined,
-  controlOptions: () => ({}),
-  initialValues: undefined,
-  modelValue: undefined,
-  values: undefined,
-  title: 'Workspace',
-  subtitle: undefined,
-  topBarVariant: 'card',
-  sidebarWidth: '320px',
-  sidebarVariant: 'analysis',
-  responsiveSidebar: true,
-  sidebarPosition: 'left',
-  sidebarTitle: undefined,
-  sidebarSubtitle: undefined,
-  sidebarBadge: undefined,
-  floating: false,
-  dense: true,
-  showSettings: true,
-  showFormActions: false,
-  formEnhancements: undefined,
-  componentBindings: undefined,
-  componentProps: undefined,
-  componentPropsById: undefined,
-  formLoading: false,
-  formDisabled: false,
-  formReadonly: false,
-  formSize: 'md',
-})
-
-// Thin recipe over controlWorkspaceProps(): resolves model/controls/controlOptions/v-model
-// into the schema + options pair useControlWorkspace() consumes, shared with
-// DoseDesignWorkspaceView (which forwards its own props here) and
-// BioTemplatePresetWorkspaceView's equivalent options merge.
-const resolvedWorkspaceModel = computed(() => controlWorkspaceProps(props))
-const externalValues = computed(() => resolvedWorkspaceModel.value.externalValues)
-const resolvedModel = computed(() => resolvedWorkspaceModel.value.resolvedModel)
-const resolvedControls = computed(() => resolvedWorkspaceModel.value.resolvedControls)
-const resolvedControlOptions = computed(() => resolvedWorkspaceModel.value.resolvedControlOptions)
-
-let generatedWorkspaceScope: EffectScope | undefined
-
-function createGeneratedWorkspace(seedValues: Record<string, unknown> = {}) {
-  generatedWorkspaceScope?.stop()
-  generatedWorkspaceScope = effectScope()
-  return generatedWorkspaceScope.run(() =>
-    useControlWorkspace(resolvedControls.value, {
-      ...resolvedControlOptions.value,
-      initialValues: {
-        ...seedValues,
-        ...(resolvedControlOptions.value.initialValues ?? {}),
-      },
-    })
-  )!
-}
-
-const generatedWorkspace = shallowRef<UseControlWorkspaceReturn<ControlSchema>>(createGeneratedWorkspace())
-const resolvedWorkspace = computed<UseControlWorkspaceReturn<ControlSchema>>(() => props.workspace ?? generatedWorkspace.value)
-const resolvedComponentBindings = computed(() =>
-  resolvedWorkspace.value.getComponentBindings(props.componentBindings ?? resolvedModel.value?.componentBindings)
-)
-const resolvedComponentBindingsById = computed(() =>
-  resolvedWorkspace.value.getComponentBindingsById(props.componentBindings ?? resolvedModel.value?.componentBindings)
-)
-const resolvedComponentProps = computed(() =>
-  resolvedWorkspace.value.getComponentProps(props.componentProps ?? resolvedModel.value?.componentProps)
-)
-const resolvedComponentPropsById = computed(() =>
-  resolvedWorkspace.value.getComponentPropsById(props.componentPropsById ?? resolvedModel.value?.componentPropsById)
-)
-const resolvedBindings = computed<ResolvedControlWorkspace['bindings']>(() => ({
-  ...resolvedWorkspace.value.bindings,
-  componentBindings: resolvedComponentBindings,
-  componentBindingsById: resolvedComponentBindingsById,
-  componentProps: resolvedComponentProps,
-  componentPropsById: resolvedComponentPropsById,
-}))
-const resolvedTopBarSlot = computed(() => resolvedWorkspace.value.bindings.topBar.value)
-
-watch(
-  [() => props.model, () => props.controls, () => props.controlOptions, () => props.initialValues],
-  () => {
-    const previousWorkspace = generatedWorkspace.value
-    const previousActiveView = previousWorkspace.activeView.value
-    generatedWorkspace.value = createGeneratedWorkspace({ ...previousWorkspace.values })
-    generatedWorkspace.value.setActiveView(previousActiveView)
-  },
-  { deep: true },
-)
-
-onScopeDispose(() => generatedWorkspaceScope?.stop())
-
-watch(
-  externalValues,
-  (values) => {
-    if (values === undefined || props.workspace !== undefined) return
-    if (recordsEqual(generatedWorkspace.value.values, values)) return
-    generatedWorkspace.value.setValues(values)
-  },
-  { deep: true },
-)
-
-watch(
-  () => generatedWorkspace.value.values,
-  (values) => {
-    if (props.workspace !== undefined) return
-    const nextValues = { ...values }
-    if (externalValues.value !== undefined && recordsEqual(externalValues.value, nextValues)) return
-    emit('update:modelValue', nextValues)
-    emit('update:values', nextValues)
-  },
-  { deep: true },
-)
-
-function recordsEqual(left: Record<string, unknown>, right: Record<string, unknown>): boolean {
-  const leftKeys = Object.keys(left)
-  const rightKeys = Object.keys(right)
-  if (leftKeys.length !== rightKeys.length) return false
-  return leftKeys.every(key => valuesEqual(left[key], right[key]))
-}
-
-function valuesEqual(left: unknown, right: unknown): boolean {
-  const leftRaw = toRaw(left)
-  const rightRaw = toRaw(right)
-
-  if (Object.is(leftRaw, rightRaw)) return true
-
-  if (Array.isArray(leftRaw) || Array.isArray(rightRaw)) {
-    if (!Array.isArray(leftRaw) || !Array.isArray(rightRaw)) return false
-    if (leftRaw.length !== rightRaw.length) return false
-    return leftRaw.every((item, index) => valuesEqual(item, rightRaw[index]))
-  }
-
-  if (isPlainRecord(leftRaw) || isPlainRecord(rightRaw)) {
-    if (!isPlainRecord(leftRaw) || !isPlainRecord(rightRaw)) return false
-    return recordsEqual(leftRaw, rightRaw)
-  }
-
-  return false
-}
-
-function isPlainRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value)
-}
-
-</script>
-
-<template>
-  <AppLayout
-    class="mint-control-workspace-view"
-    :sidebar-position="sidebarPosition"
-    :sidebar-width="sidebarWidth"
-    :responsive-sidebar="responsiveSidebar"
-    :floating="floating"
-  >
-    <template #topbar>
-      <slot
-        name="topbar"
-        :workspace="resolvedWorkspace"
-        :bindings="resolvedBindings"
-        :top-bar="resolvedTopBarSlot"
-      >
-        <AppTopBar
-          :title="title"
-          :subtitle="subtitle"
-          :variant="topBarVariant"
-          :pill-nav="resolvedWorkspace.pillNav.items"
-          :current-pill-id="resolvedWorkspace.pillNav.currentItemId"
-          :show-settings="showSettings"
-          :settings-config="resolvedWorkspace.topBarSettings.settingsConfig"
-          @pill-select="resolvedWorkspace.pillNav.onSelect"
-          @settings-values-change="resolvedWorkspace.topBarSettings.onSettingsValuesChange"
-        />
-      </slot>
-    </template>
-
-    <template #sidebar>
-      <slot
-        name="sidebar"
-        :workspace="resolvedWorkspace"
-        :bindings="resolvedBindings"
-        :sidebar="resolvedWorkspace.sidebar"
-      >
-        <AppSidebar
-          v-bind="resolvedWorkspace.sidebar"
-          :title="sidebarTitle"
-          :subtitle="sidebarSubtitle"
-          :badge="sidebarBadge"
-          :variant="sidebarVariant"
-          :floating="false"
-          :dense="dense"
-          :width="sidebarWidth"
-          :form-enhancements="formEnhancements"
-          :form-loading="formLoading"
-          :form-disabled="formDisabled"
-          :form-readonly="formReadonly"
-        />
-      </slot>
-    </template>
-
-    <main class="mint-control-workspace-view__content">
-      <slot
-        :workspace="resolvedWorkspace"
-        :bindings="resolvedBindings"
-        :values="resolvedWorkspace.values"
-        :component-bindings="resolvedComponentBindings"
-        :component-bindings-by-id="resolvedComponentBindingsById"
-        :component-props="resolvedComponentProps"
-        :component-props-by-id="resolvedComponentPropsById"
-      >
-        <FormBuilder
-          v-bind="resolvedWorkspace.form"
-          :enhancements="formEnhancements"
-          :loading="formLoading"
-          :disabled="formDisabled"
-          :readonly="formReadonly"
-          :show-actions="showFormActions"
-          :size="formSize"
-          @submit="emit('submit', $event)"
-          @cancel="emit('cancel')"
-        />
-      </slot>
-    </main>
-  </AppLayout>
-</template>
-
-<style scoped>
-.mint-control-workspace-view {
-  min-width: 0;
-}
-
-.mint-control-workspace-view__content {
-  min-width: 0;
-  padding: 1rem;
-}
-</style>

package/src/components/DoseDesignWorkspaceView.story.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import DoseDesignWorkspaceView from './DoseDesignWorkspaceView.vue'
-import type { DoseDesignControlModelOptions } from '../composables/useControlSchema'
-
-type SidebarVariant = 'analysis' | 'default'
-
-const initState = () => ({
-  title: 'Dose Design Workspace',
-  includeMolecularWeight: true,
-  plateFormat: 96,
-  selectedWells: ['A1', 'A2', 'B1', 'B2'],
-  sidebarTitle: 'Dose Controls',
-  sidebarSubtitle: 'Plate setup',
-  sidebarVariant: 'analysis' as SidebarVariant,
-  responsiveSidebar: true,
-  showSettings: true,
-})
-
-const state = ref(initState())
-const values = ref<Record<string, unknown>>({})
-
-function doseOptions(): DoseDesignControlModelOptions {
-  return {
-    selectedWells: state.value.selectedWells,
-    plateFormat: state.value.plateFormat,
-    includeMolecularWeight: state.value.includeMolecularWeight,
-  }
-}
-</script>
-
-<template>
-  <Story title="Workflow/DoseDesignWorkspaceView" :init-state="initState">
-    <Variant title="Playground">
-      <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
-        <DoseDesignWorkspaceView
-          v-model="values"
-          :title="state.title"
-          :dose-design-options="doseOptions()"
-          :sidebar-title="state.sidebarTitle"
-          :sidebar-subtitle="state.sidebarSubtitle"
-          :sidebar-variant="state.sidebarVariant"
-          :responsive-sidebar="state.responsiveSidebar"
-          :show-settings="state.showSettings"
-          :well-plate-props="{
-            heatmap: { enabled: true, min: 0, max: 100, colorScale: 'viridis' },
-          }"
-        />
-      </div>
-    </Variant>
-
-    <template #controls>
-      <HstText v-model="state.title" title="Title" />
-      <HstText v-model="state.sidebarTitle" title="Sidebar title" />
-      <HstText v-model="state.sidebarSubtitle" title="Sidebar subtitle" />
-      <HstCheckbox v-model="state.includeMolecularWeight" title="Molecular weight" />
-      <HstCheckbox v-model="state.responsiveSidebar" title="Responsive sidebar" />
-      <HstCheckbox v-model="state.showSettings" title="Settings" />
-      <HstSelect
-        v-model="state.sidebarVariant"
-        title="Sidebar variant"
-        :options="[
-          { label: 'Analysis', value: 'analysis' },
-          { label: 'Default', value: 'default' },
-        ]"
-      />
-      <HstSelect
-        v-model="state.plateFormat"
-        title="Plate format"
-        :options="[
-          { label: '96 wells', value: 96 },
-          { label: '384 wells', value: 384 },
-        ]"
-      />
-    </template>
-  </Story>
-</template>

package/src/components/DoseDesignWorkspaceView.vue

@@ -1,243 +0,0 @@
-<script setup lang="ts">
-/**
- * Complete ControlWorkspaceView page shell for WellPlate + DoseCalculator dose design.
- *
- * @example Recommended
- * ```vue
- * <DoseDesignWorkspaceView v-model="values" title="Dose Design" />
- * ```
- */
-import { computed } from 'vue'
-import type { TopBarVariant } from '../types'
-import type { FormEnhancements } from '../types/form-builder'
-import type {
-  ControlModel,
-  ControlModelBinding,
-  ControlSchema,
-  ControlWorkspaceOptions,
-  DoseDesignControlModelOptions,
-  UseControlWorkspaceReturn,
-} from '../composables/useControlSchema'
-import { defineDoseDesignControlModel } from '../composables/useControlSchema'
-import { doseDesignWorkspaceProps } from '../composables/workspaceRecipes'
-import ControlWorkspaceView from './ControlWorkspaceView.vue'
-import DoseCalculator from './DoseCalculator.vue'
-import WellPlate from './WellPlate.vue'
-
-type DoseDesignSidebarVariant = 'default' | 'analysis'
-type ComponentProps = Record<string, unknown>
-type ComponentPropsById = Record<string, ComponentProps>
-type ComponentBinding = { id: string, component: string, props: ComponentProps }
-type ComponentBindingsById = Record<string, ComponentBinding>
-type ResolvedControlWorkspace = UseControlWorkspaceReturn<ControlSchema>
-
-interface DoseDesignWorkspaceSlotProps {
-  workspace: ResolvedControlWorkspace
-  bindings: ResolvedControlWorkspace['bindings']
-  values: ResolvedControlWorkspace['values']
-  componentBindings: ComponentBinding[]
-  componentBindingsById: ComponentBindingsById
-  componentPropsById: ComponentPropsById
-  wellPlateProps: ComponentProps
-  doseCalculatorProps: ComponentProps
-}
-
-interface Props {
-  /** Model returned by defineDoseDesignControlModel(), or a custom compatible ControlWorkspace model. */
-  model?: ControlModel | ControlModelBinding
-  /** Workspace returned by useControlWorkspace(). Use for full manual control. */
-  workspace?: UseControlWorkspaceReturn<ControlSchema>
-  /** Options used when this view creates the default dose-design model internally. */
-  doseDesignOptions?: DoseDesignControlModelOptions
-  /** Options passed to the internally generated ControlWorkspaceView workspace. */
-  controlOptions?: ControlWorkspaceOptions
-  /** Initial values for the internally generated workspace. */
-  initialValues?: Record<string, unknown>
-  /** External values for the internally generated workspace. Supports default v-model. */
-  modelValue?: Record<string, unknown>
-  /** External values for the internally generated workspace. Supports v-model:values. */
-  values?: Record<string, unknown>
-  /** Named component props id for the generated WellPlate binding. */
-  plateId?: string
-  /** Named component props id for the generated DoseCalculator binding. */
-  doseId?: string
-  /** Extra props merged into the generated WellPlate binding. */
-  wellPlateProps?: ComponentProps
-  /** Extra props merged into the generated DoseCalculator binding. */
-  doseCalculatorProps?: ComponentProps
-  /** AppTopBar title. */
-  title?: string
-  /** AppTopBar subtitle. */
-  subtitle?: string
-  /** AppTopBar visual variant. */
-  topBarVariant?: TopBarVariant
-  /** AppSidebar/AppLayout sidebar width. */
-  sidebarWidth?: string
-  /** @deprecated No-op, removed in MINT 1.4. AppSidebar has one look now; the former `analysis` preset is the default. */
-  sidebarVariant?: DoseDesignSidebarVariant
-  /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
-  responsiveSidebar?: boolean
-  /** Sidebar position in AppLayout. */
-  sidebarPosition?: 'left' | 'right'
-  /** Optional AppSidebar chrome title for LEAF-style plugin workbenches. */
-  sidebarTitle?: string
-  /** Optional AppSidebar chrome subtitle for active experiment/run context. */
-  sidebarSubtitle?: string
-  /** Optional compact badge/count rendered in the AppSidebar chrome header. */
-  sidebarBadge?: string | number
-  /** Floating AppLayout style. */
-  floating?: boolean
-  /** Compact AppSidebar density. */
-  dense?: boolean
-  /** Whether AppTopBar should show generated settings. */
-  showSettings?: boolean
-  /** Render FormBuilder actions in the default generated forms. */
-  showFormActions?: boolean
-  /** Runtime FormBuilder enhancements passed to generated forms. */
-  formEnhancements?: FormEnhancements<Record<string, unknown>>
-  /** Loading/saving state passed to generated forms. */
-  formLoading?: boolean
-  /** Disabled state passed to generated forms. */
-  formDisabled?: boolean
-  /** Readonly state passed to generated forms. */
-  formReadonly?: boolean
-  /** FormBuilder size in generated forms. */
-  formSize?: 'sm' | 'md' | 'lg'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  model: undefined,
-  workspace: undefined,
-  doseDesignOptions: () => ({}),
-  controlOptions: () => ({}),
-  initialValues: undefined,
-  modelValue: undefined,
-  values: undefined,
-  plateId: undefined,
-  doseId: undefined,
-  wellPlateProps: () => ({}),
-  doseCalculatorProps: () => ({}),
-  title: 'Dose Design Workspace',
-  subtitle: undefined,
-  topBarVariant: 'card',
-  sidebarWidth: '320px',
-  sidebarVariant: 'analysis',
-  responsiveSidebar: true,
-  sidebarPosition: 'left',
-  sidebarTitle: undefined,
-  sidebarSubtitle: undefined,
-  sidebarBadge: undefined,
-  floating: false,
-  dense: true,
-  showSettings: true,
-  showFormActions: false,
-  formEnhancements: undefined,
-  formLoading: false,
-  formDisabled: false,
-  formReadonly: false,
-  formSize: 'md',
-})
-
-const emit = defineEmits<{
-  /** Emitted when generated workspace values change through WellPlate, FormBuilder, AppSidebar, or AppTopBar settings. */
-  'update:modelValue': [values: Record<string, unknown>]
-  /** Emitted when generated workspace values change through WellPlate, FormBuilder, AppSidebar, or AppTopBar settings. */
-  'update:values': [values: Record<string, unknown>]
-  /** Forwarded from the internal ControlWorkspaceView when form actions are enabled. */
-  submit: [values: Record<string, unknown>]
-  /** Forwarded from the internal ControlWorkspaceView when form actions are enabled. */
-  cancel: []
-}>()
-
-defineSlots<{
-  default?: (props: DoseDesignWorkspaceSlotProps) => unknown
-  plate?: (props: DoseDesignWorkspaceSlotProps) => unknown
-  dose?: (props: DoseDesignWorkspaceSlotProps) => unknown
-}>()
-
-const resolvedModel = computed<ControlModel | ControlModelBinding>(() =>
-  props.model ?? defineDoseDesignControlModel(props.doseDesignOptions)
-)
-
-// Thin recipe: forwards the ~25 props this view shares verbatim with ControlWorkspaceView
-// (see workspaceRecipes.ts) instead of spelling each one out in the template.
-const controlWorkspaceRecipe = computed(() => doseDesignWorkspaceProps(props, resolvedModel.value))
-
-function resolvedPlateId(): string {
-  return props.plateId ?? props.doseDesignOptions.componentProps?.plateId ?? 'plate'
-}
-
-function resolvedDoseId(): string {
-  return props.doseId ?? props.doseDesignOptions.componentProps?.doseId ?? 'dose'
-}
-
-function wellPlateBinding(componentPropsById: ComponentPropsById): ComponentProps {
-  return {
-    size: 'fill',
-    selectionMode: 'multiple',
-    ...(componentPropsById[resolvedPlateId()] ?? {}),
-    ...props.wellPlateProps,
-  }
-}
-
-function doseCalculatorBinding(componentPropsById: ComponentPropsById): ComponentProps {
-  return {
-    ...(componentPropsById[resolvedDoseId()] ?? {}),
-    ...props.doseCalculatorProps,
-  }
-}
-
-function slotProps(slotProps: {
-  workspace: ResolvedControlWorkspace
-  bindings: ResolvedControlWorkspace['bindings']
-  values: ResolvedControlWorkspace['values']
-  componentBindings: ComponentBinding[]
-  componentBindingsById: ComponentBindingsById
-  componentPropsById: ComponentPropsById
-}): DoseDesignWorkspaceSlotProps {
-  return {
-    ...slotProps,
-    wellPlateProps: wellPlateBinding(slotProps.componentPropsById),
-    doseCalculatorProps: doseCalculatorBinding(slotProps.componentPropsById),
-  }
-}
-</script>
-
-<template>
-  <ControlWorkspaceView
-    v-bind="controlWorkspaceRecipe"
-    @update:model-value="emit('update:modelValue', $event)"
-    @update:values="emit('update:values', $event)"
-    @submit="emit('submit', $event)"
-    @cancel="emit('cancel')"
-  >
-    <template #default="workspaceSlotProps">
-      <slot v-bind="slotProps(workspaceSlotProps)">
-        <div class="mint-dose-design-workspace">
-          <slot name="plate" v-bind="slotProps(workspaceSlotProps)">
-            <WellPlate v-bind="wellPlateBinding(workspaceSlotProps.componentPropsById)" />
-          </slot>
-          <slot name="dose" v-bind="slotProps(workspaceSlotProps)">
-            <DoseCalculator v-bind="doseCalculatorBinding(workspaceSlotProps.componentPropsById)" />
-          </slot>
-        </div>
-      </slot>
-    </template>
-  </ControlWorkspaceView>
-</template>
-
-<style scoped>
-.mint-dose-design-workspace {
-  display: grid;
-  grid-template-columns: minmax(360px, 1fr) minmax(300px, 420px);
-  gap: 1rem;
-  align-items: start;
-  min-width: 0;
-}
-
-@media (max-width: 900px) {
-  .mint-dose-design-workspace {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-</style>