@morscherlab/mint-sdk 1.0.0-rc.4 → 1.0.0-rc.5

package/src/components/ControlWorkspaceView.vue

@@ -13,7 +13,7 @@ import type {
   ControlWorkspaceOptions,
   UseControlWorkspaceReturn,
 } from '../composables/useControlSchema'
-import { defineControlModel, mergeControlWorkspaceOptions, useControlWorkspace } from '../composables/useControlSchema'
+import { mergeControlWorkspaceOptions, resolveControlModel, useControlWorkspace } from '../composables/useControlSchema'
 import AppLayout from './AppLayout.vue'
 import AppSidebar from './AppSidebar.vue'
 import AppTopBar from './AppTopBar.vue'
@@ -156,8 +156,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const externalValues = computed(() => props.modelValue ?? props.values)
 const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  if (props.model === undefined) return undefined
-  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+  return resolveControlModel(props.model)
 })
 const resolvedControls = computed<ControlSchema>(() => props.controls ?? resolvedModel.value?.controls ?? {})
 const baseControlOptions = computed<ControlWorkspaceOptions>(() =>
@@ -282,9 +281,6 @@ function isPlainRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value)
 }
 
-function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
-  return 'controlOptions' in model
-}
 </script>
 
 <template>

package/src/components/DoseCalculator.vue

@@ -9,11 +9,11 @@ import {
 import {
   useDoseCalculator,
   type VolumeValue,
-  type VolumeUnit,
   type DilutionResult,
   type SerialDilutionResult,
   type WellConcentration,
 } from '../composables/useDoseCalculator'
+import DoseCalculatorVolumeField from './DoseCalculatorVolumeField.vue'
 
 type CalculatorMode = 'dilution' | 'serial' | 'conversion'
 
@@ -140,30 +140,6 @@ function handleApplyToWells() {
   }
 }
 
-// Volume unit change handler
-function handleVolumeChange(event: Event, target: 'final' | 'serial') {
-  const input = event.target as HTMLInputElement
-  const value = parseFloat(input.value)
-  if (isNaN(value)) return
-
-  if (target === 'final') {
-    finalVolume.value = { ...finalVolume.value, value }
-  } else {
-    serialVolumePerWell.value = { ...serialVolumePerWell.value, value }
-  }
-}
-
-function handleVolumeUnitChange(event: Event, target: 'final' | 'serial') {
-  const select = event.target as HTMLSelectElement
-  const unit = select.value as VolumeUnit
-
-  if (target === 'final') {
-    finalVolume.value = { ...finalVolume.value, unit }
-  } else {
-    serialVolumePerWell.value = { ...serialVolumePerWell.value, unit }
-  }
-}
-
 // Watch for changes and recalculate
 watch(
   [stockConcentration, finalConcentration, finalVolume],
@@ -267,30 +243,12 @@ watch(activeMode, (mode) => {
         />
       </div>
 
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Final Volume</label>
-        <div class="mint-dose-calculator__field-row">
-          <input
-            type="number"
-            :value="finalVolume.value"
-            :disabled="disabled"
-            class="mint-dose-calculator__input"
-            min="0"
-            step="any"
-            @input="handleVolumeChange($event, 'final')"
-          />
-          <select
-            :value="finalVolume.unit"
-            :disabled="disabled"
-            class="mint-dose-calculator__select"
-            @change="handleVolumeUnitChange($event, 'final')"
-          >
-            <option v-for="unit in volumeUnits" :key="unit" :value="unit">
-              {{ unit }}
-            </option>
-          </select>
-        </div>
-      </div>
+      <DoseCalculatorVolumeField
+        v-model="finalVolume"
+        label="Final Volume"
+        :units="volumeUnits"
+        :disabled="disabled"
+      />
 
       <div class="mint-dose-calculator__divider" />
 
@@ -367,30 +325,12 @@ watch(activeMode, (mode) => {
         </div>
       </div>
 
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Volume per Well</label>
-        <div class="mint-dose-calculator__field-row">
-          <input
-            type="number"
-            :value="serialVolumePerWell.value"
-            :disabled="disabled"
-            class="mint-dose-calculator__input"
-            min="0"
-            step="any"
-            @input="handleVolumeChange($event, 'serial')"
-          />
-          <select
-            :value="serialVolumePerWell.unit"
-            :disabled="disabled"
-            class="mint-dose-calculator__select"
-            @change="handleVolumeUnitChange($event, 'serial')"
-          >
-            <option v-for="unit in volumeUnits" :key="unit" :value="unit">
-              {{ unit }}
-            </option>
-          </select>
-        </div>
-      </div>
+      <DoseCalculatorVolumeField
+        v-model="serialVolumePerWell"
+        label="Volume per Well"
+        :units="volumeUnits"
+        :disabled="disabled"
+      />
 
       <div class="mint-dose-calculator__divider" />
 

package/src/components/DoseCalculatorVolumeField.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/** Number + unit control used by DoseCalculator volume fields. */
+import type { VolumeUnit, VolumeValue } from '../composables/useDoseCalculator'
+
+interface Props {
+  label: string
+  modelValue: VolumeValue
+  units: VolumeUnit[]
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: VolumeValue]
+}>()
+
+function handleValueInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  const value = parseFloat(input.value)
+  if (Number.isNaN(value)) return
+  emit('update:modelValue', { ...props.modelValue, value })
+}
+
+function handleUnitChange(event: Event) {
+  const select = event.target as HTMLSelectElement
+  emit('update:modelValue', {
+    ...props.modelValue,
+    unit: select.value as VolumeUnit,
+  })
+}
+</script>
+
+<template>
+  <div class="mint-dose-calculator__field">
+    <label class="mint-dose-calculator__field-label">{{ label }}</label>
+    <div class="mint-dose-calculator__field-row">
+      <input
+        type="number"
+        :value="modelValue.value"
+        :disabled="disabled"
+        class="mint-dose-calculator__input"
+        min="0"
+        step="any"
+        @input="handleValueInput"
+      />
+      <select
+        :value="modelValue.unit"
+        :disabled="disabled"
+        class="mint-dose-calculator__select"
+        @change="handleUnitChange"
+      >
+        <option v-for="unit in units" :key="unit" :value="unit">
+          {{ unit }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>

package/src/components/ExperimentTimeline.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 /** Horizontal or vertical timeline of ordered protocol steps with status indicators, drag-to-reorder, and step-type iconography. */
 import { ref, computed } from 'vue'
-import type { ProtocolStep, ProtocolStepType, ProtocolStepStatus } from '../types'
+import type { ProtocolStep, ProtocolStepStatus } from '../types'
+import {
+  PROTOCOL_STEP_TYPE_COLORS as stepTypeColors,
+  PROTOCOL_STEP_TYPE_ICONS as stepTypeIcons,
+  formatProtocolDuration as formatDuration,
+} from './ProtocolStep.presentation'
 
 interface Props {
   modelValue?: ProtocolStep[]
@@ -59,28 +64,6 @@ const sortedSteps = computed(() => {
   return [...props.modelValue].sort((a, b) => a.order - b.order)
 })
 
-const stepTypeIcons: Record<ProtocolStepType, string> = {
-  incubation: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z',
-  wash: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z',
-  addition: 'M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z',
-  measurement: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
-  transfer: 'M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4',
-  centrifuge: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
-  mix: 'M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z',
-  custom: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
-}
-
-const stepTypeColors: Record<ProtocolStepType, string> = {
-  incubation: '#F59E0B',
-  wash: '#06B6D4',
-  addition: '#10B981',
-  measurement: '#8B5CF6',
-  transfer: '#3B82F6',
-  centrifuge: '#6B7280',
-  mix: '#F97316',
-  custom: '#EC4899',
-}
-
 const statusClasses: Record<ProtocolStepStatus, string> = {
   pending: 'mint-timeline__card--pending',
   in_progress: 'mint-timeline__card--in-progress',
@@ -97,14 +80,6 @@ const iconStatusClasses: Record<ProtocolStepStatus, string> = {
   skipped: 'mint-timeline__icon--skipped',
 }
 
-function formatDuration(minutes: number | undefined): string {
-  if (minutes === undefined) return ''
-  if (minutes < 60) return `${minutes}m`
-  const hours = Math.floor(minutes / 60)
-  const mins = minutes % 60
-  return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`
-}
-
 function getStepColor(step: ProtocolStep): string {
   return props.colorByType && !props.colorByStatus ? stepTypeColors[step.type] : ''
 }

package/src/components/FormBuilder.vue

@@ -27,9 +27,9 @@ import type { FormSchema, FormEnhancements, UseFormBuilderReturn } from '../type
 import type { WizardStep } from '../types'
 import {
   controlsToFormSchema,
-  defineControlModel,
   getControlDefaults,
   mergeControlWorkspaceOptions,
+  resolveControlModel,
   type ControlModel,
   type ControlModelBinding,
   type ControlSchema,
@@ -80,8 +80,7 @@ const emit = defineEmits<{
 }>()
 
 const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  if (props.model === undefined) return undefined
-  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+  return resolveControlModel(props.model)
 })
 
 const resolvedControls = computed<ControlSchema | undefined>(() =>
@@ -197,10 +196,6 @@ function builderFieldNames(): string[] {
   return builder.fields.map(field => field.name)
 }
 
-function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
-  return 'controls' in model && 'controlOptions' in model
-}
-
 defineExpose({
   form: builder.form,
   validate: builder.validate,

package/src/components/PlateMapEditor.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 /** Full plate-map design environment for 96/384-well plates with sample assignment, slot-color coding, undo/redo, and CSV/JSON import-export. */
 import { ref, computed, watch } from 'vue'
-import type { PlateMapEditorState, WellPlateFormat, SampleType, Well } from '../types'
+import type { PlateMapEditorState, WellPlateFormat, SampleType, Well, PlateMap } from '../types'
 import { useWellPlateEditor } from '../composables/useWellPlateEditor'
 import { useEventListener } from '../composables/useEventListener'
 import WellPlate from './WellPlate.vue'
 import SampleLegend from './SampleLegend.vue'
+import PlateMapEditorToolbarInternal from './internal/PlateMapEditorToolbarInternal.vue'
 
 // Slot colors matching MSExpDesigner
 type SlotPosition = 'R' | 'G' | 'B' | 'Y'
@@ -73,6 +74,10 @@ function getPlateSlot(plateId: string, plateIndex: number): SlotPosition {
   return plateSlots.value.get(plateId)!
 }
 
+function getPlateSlotColor(plateId: string, plateIndex: number): string {
+  return SLOT_COLORS[getPlateSlot(plateId, plateIndex)]
+}
+
 const sampleColors = computed(() => {
   const colors: Record<string, string> = {}
   for (const sample of editor.samples.value) {
@@ -98,13 +103,18 @@ const wellsData = computed(() => {
   return wells
 })
 
-// Count samples in a plate
-function getPlateWellCount(plateId: string): number {
-  const plate = editor.plates.value.find(p => p.id === plateId)
-  if (!plate) return 0
+function countPlateAssignedWells(plate: PlateMap): number {
   return Object.values(plate.wells).filter(w => w.sampleType).length
 }
 
+const plateWellCounts = computed<Record<string, number>>(() => {
+  const counts: Record<string, number> = {}
+  for (const plate of editor.plates.value) {
+    counts[plate.id] = countPlateAssignedWells(plate)
+  }
+  return counts
+})
+
 watch(
   () => editor.state.value,
   (newState) => emit('update:modelValue', { ...newState }),
@@ -230,107 +240,23 @@ useEventListener(() => document, 'keydown', handleKeyDown)
     <!-- Main plate area -->
     <div class="mint-plate-editor__main">
       <!-- Toolbar -->
-      <div v-if="showToolbar" class="mint-plate-editor__toolbar">
-        <!-- Plate tabs -->
-        <div class="mint-plate-editor__tabs">
-          <button
-            v-for="(plate, index) in editor.plates.value"
-            :key="plate.id"
-            type="button"
-            :class="['mint-plate-editor__tab', { 'mint-plate-editor__tab--active': plate.id === editor.activePlate.value?.id }]"
-            @click="editor.setActivePlate(plate.id)"
-          >
-            <span
-              class="mint-plate-editor__tab-slot"
-              :style="{ backgroundColor: SLOT_COLORS[getPlateSlot(plate.id, index)] }"
-            />
-            <span class="mint-plate-editor__tab-name">{{ plate.name }}</span>
-            <span
-              v-if="getPlateWellCount(plate.id) > 0"
-              class="mint-plate-editor__tab-count"
-            >
-              {{ getPlateWellCount(plate.id) }}
-            </span>
-            <button
-              v-if="editor.plates.value.length > 1"
-              type="button"
-              class="mint-plate-editor__tab-remove"
-              :aria-label="`Remove ${plate.name}`"
-              @click.stop="handleRemovePlate(plate.id)"
-            >
-              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M18 6 6 18" /><path d="m6 6 12 12" />
-              </svg>
-            </button>
-          </button>
-
-          <button
-            v-if="allowAddPlates && editor.plates.value.length < maxPlates"
-            type="button"
-            class="mint-plate-editor__add-plate"
-            aria-label="Add plate"
-            @click="handleAddPlate"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M5 12h14" /><path d="M12 5v14" />
-            </svg>
-            <span>Add</span>
-          </button>
-        </div>
-
-        <div class="mint-plate-editor__spacer" />
-
-        <!-- Actions -->
-        <div class="mint-plate-editor__actions">
-          <button
-            type="button"
-            :disabled="!editor.canUndo.value"
-            class="mint-plate-editor__action-btn"
-            title="Undo (Ctrl+Z)"
-            @click="handleUndo"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" />
-            </svg>
-          </button>
-
-          <button
-            type="button"
-            :disabled="!editor.canRedo.value"
-            class="mint-plate-editor__action-btn"
-            title="Redo (Ctrl+Shift+Z)"
-            @click="handleRedo"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="m15 14 5-5-5-5" /><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13" />
-            </svg>
-          </button>
-
-          <div class="mint-plate-editor__divider" />
-
-          <button
-            type="button"
-            class="mint-plate-editor__action-btn"
-            title="Import"
-            @click="showImportModal = true"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 3v12" /><path d="m17 8-5-5-5 5" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            </svg>
-          </button>
-
-          <button
-            type="button"
-            class="mint-plate-editor__action-btn"
-            title="Export JSON"
-            @click="handleExport('json')"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 15V3" /><path d="m7 10 5 5 5-5" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            </svg>
-          </button>
-        </div>
-      </div>
+      <PlateMapEditorToolbarInternal
+        v-if="showToolbar"
+        :plates="editor.plates.value"
+        :active-plate-id="editor.activePlate.value?.id"
+        :plate-well-counts="plateWellCounts"
+        :can-add-plate="allowAddPlates && editor.plates.value.length < maxPlates"
+        :can-undo="editor.canUndo.value"
+        :can-redo="editor.canRedo.value"
+        :slot-color-for-plate="getPlateSlotColor"
+        @select-plate="editor.setActivePlate"
+        @remove-plate="handleRemovePlate"
+        @add-plate="handleAddPlate"
+        @undo="handleUndo"
+        @redo="handleRedo"
+        @import="showImportModal = true"
+        @export-json="handleExport('json')"
+      />
 
       <!-- Well plate -->
       <WellPlate

package/src/components/PluginWorkspaceView.controls.ts

@@ -0,0 +1,182 @@
+import { computed, reactive, watch } from 'vue'
+import type { ComputedRef } from 'vue'
+import type { PillNavItem } from '../types'
+import type {
+  ControlComponentBinding,
+  ControlComponentBindingsById,
+  ControlComponentBindingsConfig,
+  ControlComponentPropsByIdMap,
+  ControlComponentPropsMap,
+  ControlModel,
+  ControlModelBinding,
+  ControlSchema,
+  ControlWorkspaceOptions,
+} from '../composables/useControlSchema'
+import {
+  controlValuesToComponentBindings,
+  controlValuesToComponentBindingsById,
+  controlValuesToComponentProps,
+  controlsToViewItems,
+  getControlDefaults,
+  getDefaultControlView,
+  mergeControlWorkspaceOptions,
+  resolveControlModel,
+} from '../composables/useControlSchema'
+
+export interface PluginWorkspaceControlsOptions {
+  model: () => ControlModel | ControlModelBinding | undefined
+  controls: () => ControlSchema | undefined
+  controlOptions: () => ControlWorkspaceOptions
+  modelValue: () => Record<string, unknown> | undefined
+  values: () => Record<string, unknown> | undefined
+  componentBindings: () => ControlComponentBindingsConfig | undefined
+  componentProps: () => ControlComponentPropsMap | undefined
+  componentPropsById: () => ControlComponentPropsByIdMap | undefined
+  emitValues: (values: Record<string, unknown>) => void
+}
+
+export interface PluginWorkspaceControls {
+  resolvedModel: ComputedRef<ControlModelBinding | undefined>
+  resolvedControls: ComputedRef<ControlSchema | undefined>
+  resolvedControlOptions: ComputedRef<ControlWorkspaceOptions>
+  generatedPillNav: ComputedRef<PillNavItem[]>
+  generatedDefaultView: ComputedRef<string>
+  internalControlValues: Record<string, unknown>
+  resolvedComponentBindings: ComputedRef<ControlComponentBinding[]>
+  resolvedComponentBindingsById: ComputedRef<ControlComponentBindingsById>
+  resolvedComponentProps: ComputedRef<Record<string, unknown>>
+  resolvedComponentPropsById: ComputedRef<Record<string, Record<string, unknown>>>
+  handleControlValuesUpdate: (values: Record<string, unknown>) => void
+}
+
+export function usePluginWorkspaceControls(
+  options: PluginWorkspaceControlsOptions,
+): PluginWorkspaceControls {
+  const resolvedModel = computed<ControlModelBinding | undefined>(() =>
+    resolveControlModel(options.model()),
+  )
+
+  const resolvedControls = computed<ControlSchema | undefined>(() =>
+    options.controls() ?? resolvedModel.value?.controls,
+  )
+
+  const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
+    mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, options.controlOptions()),
+  )
+
+  const externalControlValues = computed(() => options.modelValue() ?? options.values())
+  const internalControlValues = reactive<Record<string, unknown>>({})
+  let syncingControlValues = false
+
+  const generatedControlDefaults = computed<Record<string, unknown>>(() => {
+    if (!resolvedControls.value) return {}
+    return {
+      ...getControlDefaults(resolvedControls.value),
+      ...(resolvedControlOptions.value.initialValues ?? {}),
+    }
+  })
+
+  function replaceControlValues(values: Record<string, unknown>) {
+    for (const key of Object.keys(internalControlValues)) {
+      if (!(key in values)) {
+        delete internalControlValues[key]
+      }
+    }
+    Object.assign(internalControlValues, values)
+  }
+
+  function emitControlValues() {
+    options.emitValues({ ...internalControlValues })
+  }
+
+  function syncResolvedControlValues() {
+    syncingControlValues = true
+    replaceControlValues({
+      ...generatedControlDefaults.value,
+      ...(externalControlValues.value === undefined ? internalControlValues : externalControlValues.value),
+    })
+    syncingControlValues = false
+  }
+
+  function handleControlValuesUpdate(values: Record<string, unknown>) {
+    syncingControlValues = true
+    replaceControlValues({
+      ...generatedControlDefaults.value,
+      ...values,
+    })
+    syncingControlValues = false
+    emitControlValues()
+  }
+
+  const resolvedComponentBindings = computed(() =>
+    controlValuesToComponentBindings(
+      internalControlValues,
+      options.componentBindings() ?? resolvedModel.value?.componentBindings,
+    ),
+  )
+
+  const resolvedComponentBindingsById = computed(() =>
+    controlValuesToComponentBindingsById(
+      internalControlValues,
+      options.componentBindings() ?? resolvedModel.value?.componentBindings,
+    ),
+  )
+
+  const resolvedComponentProps = computed(() => {
+    const mapping = options.componentProps() ?? resolvedModel.value?.componentProps
+    return mapping === undefined ? {} : controlValuesToComponentProps(internalControlValues, mapping)
+  })
+
+  const resolvedComponentPropsById = computed(() => {
+    const mappings = options.componentPropsById() ?? resolvedModel.value?.componentPropsById
+    if (mappings === undefined) return {}
+
+    return Object.fromEntries(
+      Object.entries(mappings).map(([id, mapping]) => [
+        id,
+        controlValuesToComponentProps(internalControlValues, mapping),
+      ]),
+    )
+  })
+
+  const generatedPillNav = computed<PillNavItem[]>(() => {
+    if (!resolvedControls.value) return []
+    return controlsToViewItems(resolvedControls.value, resolvedControlOptions.value)
+  })
+
+  const generatedDefaultView = computed(() => {
+    if (!resolvedControls.value) return ''
+    return getDefaultControlView(resolvedControls.value, resolvedControlOptions.value)
+  })
+
+  syncResolvedControlValues()
+
+  watch(
+    [generatedControlDefaults, externalControlValues],
+    syncResolvedControlValues,
+    { deep: true },
+  )
+
+  watch(
+    internalControlValues,
+    () => {
+      if (syncingControlValues) return
+      emitControlValues()
+    },
+    { deep: true, flush: 'sync' },
+  )
+
+  return {
+    resolvedModel,
+    resolvedControls,
+    resolvedControlOptions,
+    generatedPillNav,
+    generatedDefaultView,
+    internalControlValues,
+    resolvedComponentBindings,
+    resolvedComponentBindingsById,
+    resolvedComponentProps,
+    resolvedComponentPropsById,
+    handleControlValuesUpdate,
+  }
+}