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

package/src/components/PluginWorkspaceView.vue

@@ -1,191 +1,32 @@
 <script setup lang="ts">
 /** Standard plugin workspace shell that combines AppLayout, AppTopBar, and AppSidebar with LEAF-style defaults. */
-import { computed, reactive, ref, useSlots, watch } from 'vue'
+import { computed, useSlots } from 'vue'
 import type {
   AccountMenuItem,
   ExperimentSummary,
   PageSelectorItem,
-  PageSelectorItemInput,
   PillNavItem,
-  PillNavItemInput,
-  PluginSwitcherInfo,
   PluginSwitcherPlugin,
-  SidebarToolSection,
-  TopBarSettingsConfig,
   PillNavOption,
-  TopBarVariant,
 } from '../types'
-import type { FormEnhancements, FormSchema } from '../types/form-builder'
-import type {
-  ControlComponentBinding,
-  ControlComponentBindingsById,
-  ControlComponentBindingsConfig,
-  ControlComponentPropsByIdMap,
-  ControlComponentPropsMap,
-  ControlModel,
-  ControlModelBinding,
-  ControlSchema,
-  ControlWorkspaceOptions,
-} from '../composables/useControlSchema'
-import {
-  controlValuesToComponentBindings,
-  controlValuesToComponentBindingsById,
-  controlValuesToComponentProps,
-  controlsToViewItems,
-  defineControlModel,
-  getDefaultControlView,
-  getControlDefaults,
-  mergeControlWorkspaceOptions,
-} from '../composables/useControlSchema'
-import {
-  useAppExperiment,
-  type AppExperimentRecord,
-} from '../composables/useAppExperiment'
+import { useAppExperiment } from '../composables/useAppExperiment'
 import AppLayout from './AppLayout.vue'
 import AppSidebar from './AppSidebar.vue'
 import AppTopBar from './AppTopBar.vue'
+import { usePluginWorkspaceControls } from './PluginWorkspaceView.controls'
+import { usePluginWorkspaceNavigation } from './PluginWorkspaceView.navigation'
+import {
+  getPluginWorkspaceSidebarSlotNames,
+  getPluginWorkspaceTopBarSlotNames,
+  hasPluginWorkspaceSidebarSurface,
+} from './PluginWorkspaceView.shell'
+import type {
+  PluginWorkspaceForwardedSlotProps,
+  PluginWorkspaceSlotProps,
+  PluginWorkspaceViewProps,
+} from './PluginWorkspaceView.props'
 
-type SidebarVariant = 'default' | 'analysis'
-
-interface Props {
-  /** App or plugin title shown in the top bar. */
-  title?: string
-  /** Secondary copy shown under the title. */
-  subtitle?: string
-  /** Top bar visual treatment. */
-  topBarVariant?: TopBarVariant
-  /** Home link used by the top bar brand icon. */
-  homePath?: string
-  /** Show the default MINT logo when no icon/logo slot is provided. */
-  showLogo?: boolean
-  /** Preferred route-level page selector entries. */
-  pageSelector?: PageSelectorItemInput[]
-  /** Active page selector id. Defaults to activeView. */
-  currentPageSelectorId?: string
-  /** Optional plugin switcher shown in the left navigation position. */
-  pluginSwitcher?: PluginSwitcherInfo
-  /** Preferred centered navigation for local modes inside the current route. */
-  pillNav?: PillNavItemInput[]
-  /** Active centered pill id. Defaults to activeView. */
-  currentPillId?: string
-  /** Show the theme toggle button. */
-  showThemeToggle?: boolean
-  /** Show the settings button and modal. */
-  showSettings?: boolean
-  /** Built-in settings modal configuration. */
-  settingsConfig?: TopBarSettingsConfig
-  /** Show the standalone badge when not integrated into the platform. */
-  showStandaloneLabel?: boolean
-  /** Custom standalone badge label. */
-  standaloneLabel?: string
-  /** Account dropdown entries. */
-  accountMenu?: AccountMenuItem[]
-  /** Show the notifications icon button. */
-  showNotifications?: boolean
-  /** Draw a notification dot on the notifications icon. */
-  hasNotificationDot?: boolean
-  /** Show the classic admin shortcut. */
-  showAdmin?: boolean
-  /** Route used by the classic admin shortcut. */
-  adminPath?: string
-  /** Show the classic profile button when accountMenu is not provided. */
-  showProfile?: boolean
-  /** Classic profile display name. */
-  userName?: string
-  /** Explicit classic profile initial. */
-  userInitial?: string
-  /** Classic profile email. */
-  userEmail?: string
-  /** Enable the built-in AppTopBar experiment popover and selector flow. */
-  experimentShell?: boolean
-  /** Current experiment mirrored into the AppTopBar experiment chip when experimentShell is enabled. */
-  experiment?: AppExperimentRecord | null
-  /** Save handler used by the AppTopBar experiment chip. Return a message to flash success. */
-  experimentSave?: () => string | null | Promise<string | null>
-  /** Disable the experiment save action. */
-  experimentSaveDisabled?: boolean
-  /** Tooltip shown when the experiment save action is disabled. */
-  experimentSaveDisabledMessage?: string
-
-  /** Active workspace view used by top bar navigation and sidebar panels. */
-  activeView?: string
-  /** Initial active view when activeView is uncontrolled. */
-  defaultActiveView?: string
-  /** Map of view IDs to sidebar tool sections. */
-  panels?: Record<string, SidebarToolSection[]>
-  /** Optional FormBuilder schemas keyed by section ID. */
-  forms?: Record<string, FormSchema>
-  /** Sidebar chrome title. */
-  sidebarTitle?: string
-  /** Sidebar chrome subtitle. */
-  sidebarSubtitle?: string
-  /** Optional compact badge/count rendered in the sidebar header. */
-  sidebarBadge?: string | number
-  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar language. */
-  sidebarVariant?: SidebarVariant
-  /** Sidebar CSS width. Defaults to AppSidebar's variant width. */
-  sidebarWidth?: string
-  /** Sidebar position in AppLayout. */
-  sidebarPosition?: 'left' | 'right'
-  /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
-  responsiveSidebar?: boolean
-  /** Render the sidebar shell even when no panel matches the active view. */
-  showSidebarWhenEmpty?: boolean
-  /** Disable the built-in sidebar surface entirely. */
-  showSidebar?: boolean
-  /** DOM id for the AppSidebar scrollable content area. Use with route/tab-owned Teleport sidebars. */
-  sidebarContentId?: string
-  /** Compact AppSidebar density. */
-  dense?: boolean
-  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to AppSidebar's variant behavior. */
-  sidebarCollapsible?: boolean
-  /** Sidebar width when collapsed. */
-  sidebarCollapsedWidth?: string
-  /** Accessible label for the sidebar collapse action. */
-  sidebarCollapseButtonLabel?: string
-  /** Accessible label for the sidebar expand action. */
-  sidebarExpandButtonLabel?: string
-  /** Floating AppLayout style. */
-  floating?: boolean
-  /** Optional compact control model for generated sidebar forms. */
-  model?: ControlModel | ControlModelBinding
-  /** Compact control schema for generated sidebar forms. */
-  controls?: ControlSchema
-  /** Options passed to compact control schema generation. */
-  controlOptions?: ControlWorkspaceOptions
-  /** 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
-  /** Shared values for auto-rendered sidebar forms. Supports default v-model. */
-  modelValue?: Record<string, unknown>
-  /** Shared values for auto-rendered sidebar forms. */
-  values?: Record<string, unknown>
-  /** Runtime FormBuilder enhancements for auto-rendered sidebar forms. */
-  formEnhancements?: FormEnhancements<Record<string, unknown>>
-  /** Show submit/cancel actions inside auto-rendered sidebar forms. */
-  showFormActions?: boolean
-  /** Loading/saving state for auto-rendered sidebar forms. */
-  formLoading?: boolean
-  /** Disabled state for auto-rendered sidebar forms. */
-  formDisabled?: boolean
-  /** Readonly state for auto-rendered sidebar forms. */
-  formReadonly?: boolean
-  /** Size passed to auto-rendered sidebar forms. */
-  formSize?: 'sm' | 'md' | 'lg'
-  /** Controlled sidebar collapsed state. */
-  sidebarCollapsed?: boolean
-  /** Initial sidebar collapsed state when uncontrolled. */
-  defaultSidebarCollapsed?: boolean
-  /** Accessible label for the mobile sidebar toggle. */
-  sidebarToggleLabel?: string
-  /** Accessible label used when the mobile sidebar is open. */
-  sidebarCloseLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<PluginWorkspaceViewProps>(), {
   title: 'Workspace',
   subtitle: undefined,
   topBarVariant: 'card',
@@ -278,58 +119,26 @@ const emit = defineEmits<{
   'form-cancel': [sectionId: string]
 }>()
 
-interface PluginWorkspaceSlotProps {
-  activeView: string
-  setActiveView: (viewId: string) => void
-  values: Record<string, unknown>
-  componentBindings: ControlComponentBinding[]
-  componentBindingsById: ControlComponentBindingsById
-  componentProps: Record<string, unknown>
-  componentPropsById: Record<string, Record<string, unknown>>
-}
-
-type ForwardedSlotProps = Record<string, unknown>
-
 defineSlots<{
   default?: (props: PluginWorkspaceSlotProps) => unknown
   topbar?: (props: PluginWorkspaceSlotProps) => unknown
   sidebar?: (props: PluginWorkspaceSlotProps) => unknown
-  icon?: (props: ForwardedSlotProps) => unknown
-  logo?: (props: ForwardedSlotProps) => unknown
-  'page-selector-icon'?: (props: ForwardedSlotProps) => unknown
-  'page-selector-item-icon'?: (props: ForwardedSlotProps) => unknown
-  nav?: (props: ForwardedSlotProps) => unknown
-  center?: (props: ForwardedSlotProps) => unknown
-  actions?: (props: ForwardedSlotProps) => unknown
-  'account-menu-items'?: (props: ForwardedSlotProps) => unknown
-  'account-menu-item-icon'?: (props: ForwardedSlotProps) => unknown
-  'settings-appearance'?: (props: ForwardedSlotProps) => unknown
-  header?: (props: ForwardedSlotProps) => unknown
-  collapsed?: (props: ForwardedSlotProps) => unknown
-  footer?: (props: ForwardedSlotProps) => unknown
+  icon?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  logo?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  'page-selector-icon'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  'page-selector-item-icon'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  nav?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  center?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  actions?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  'account-menu-items'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  'account-menu-item-icon'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  'settings-appearance'?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  header?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  collapsed?: (props: PluginWorkspaceForwardedSlotProps) => unknown
+  footer?: (props: PluginWorkspaceForwardedSlotProps) => unknown
 }>()
 
-const topBarForwardedSlots = new Set([
-  'icon',
-  'logo',
-  'page-selector-icon',
-  'page-selector-item-icon',
-  'nav',
-  'center',
-  'actions',
-  'account-menu-items',
-  'account-menu-item-icon',
-  'settings-appearance',
-])
-
-const sidebarForwardedSlots = new Set([
-  'header',
-  'collapsed',
-  'footer',
-])
-
 const slots = useSlots()
-const internalActiveView = ref(props.defaultActiveView)
 
 if (props.experimentShell) {
   useAppExperiment({
@@ -343,171 +152,77 @@ if (props.experimentShell) {
 }
 
 const topBarSlotNames = computed<string[]>(() =>
-  Object.keys(slots).filter(name =>
-    topBarForwardedSlots.has(name) || name.startsWith('settings-tab-'),
-  ),
+  getPluginWorkspaceTopBarSlotNames(slots),
 )
 
 const sidebarSlotNames = computed<string[]>(() =>
-  Object.keys(slots).filter(name =>
-    sidebarForwardedSlots.has(name) || name.startsWith('section-'),
-  ),
+  getPluginWorkspaceSidebarSlotNames(slots),
 )
 
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  if (props.model === undefined) return undefined
-  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
-})
-
-const resolvedControls = computed<ControlSchema | undefined>(() =>
-  props.controls ?? resolvedModel.value?.controls,
-)
-
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions),
-)
-
-const externalControlValues = computed(() => props.modelValue ?? props.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 ?? {}),
-  }
-})
-
-syncResolvedControlValues()
-
-watch(
-  [generatedControlDefaults, externalControlValues],
-  syncResolvedControlValues,
-  { deep: true },
-)
-
-watch(
+const {
+  generatedPillNav,
+  generatedDefaultView,
   internalControlValues,
-  () => {
-    if (syncingControlValues) return
-    emitControlValues()
+  resolvedComponentBindings,
+  resolvedComponentBindingsById,
+  resolvedComponentProps,
+  resolvedComponentPropsById,
+  handleControlValuesUpdate,
+} = usePluginWorkspaceControls({
+  model: () => props.model,
+  controls: () => props.controls,
+  controlOptions: () => props.controlOptions,
+  modelValue: () => props.modelValue,
+  values: () => props.values,
+  componentBindings: () => props.componentBindings,
+  componentProps: () => props.componentProps,
+  componentPropsById: () => props.componentPropsById,
+  emitValues: (values) => {
+    emit('update:modelValue', values)
+    emit('update:values', values)
   },
-  { deep: true, flush: 'sync' },
-)
-
-const resolvedComponentBindings = computed(() =>
-  controlValuesToComponentBindings(
-    internalControlValues,
-    props.componentBindings ?? resolvedModel.value?.componentBindings,
-  ),
-)
-
-const resolvedComponentBindingsById = computed(() =>
-  controlValuesToComponentBindingsById(
-    internalControlValues,
-    props.componentBindings ?? resolvedModel.value?.componentBindings,
-  ),
-)
-
-const resolvedComponentProps = computed(() => {
-  const mapping = props.componentProps ?? resolvedModel.value?.componentProps
-  return mapping === undefined ? {} : controlValuesToComponentProps(internalControlValues, mapping)
-})
-
-const resolvedComponentPropsById = computed(() => {
-  const mappings = props.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 {
+  resolvedPillNav,
+  resolvedActiveView,
+  resolvedCurrentPillId,
+  resolvedCurrentPageSelectorId,
+  setActiveView,
+  handlePageSelectorSelect,
+  handlePillSelect,
+} = usePluginWorkspaceNavigation({
+  activeView: () => props.activeView,
+  defaultActiveView: () => props.defaultActiveView,
+  currentPillId: () => props.currentPillId,
+  currentPageSelectorId: () => props.currentPageSelectorId,
+  pillNav: () => props.pillNav,
+  pageSelector: () => props.pageSelector,
+  panelIds: () => Object.keys(props.panels),
+  generatedPillNav,
+  generatedDefaultView,
+  emitActiveView: (viewId) => emit('update:activeView', viewId),
+  emitPageSelectorSelect: (page) => emit('page-selector-select', page),
+  emitPillSelect: (item) => emit('pill-select', item),
 })
 
-const generatedDefaultView = computed(() => {
-  if (!resolvedControls.value) return ''
-  return getDefaultControlView(resolvedControls.value, resolvedControlOptions.value)
-})
-
-const resolvedPillNav = computed<PillNavItemInput[] | undefined>(() => {
-  if (props.pillNav !== undefined) return props.pillNav
-  return generatedPillNav.value.length > 0 ? generatedPillNav.value : undefined
-})
-
-const firstConfiguredViewId = computed(() =>
-  props.defaultActiveView
-    ?? firstItemId(props.pillNav)
-    ?? generatedDefaultView.value
-    ?? firstItemId(props.pageSelector)
-    ?? Object.keys(props.panels)[0]
-    ?? '',
-)
-
-const resolvedActiveView = computed({
-  get: () =>
-    props.activeView
-      ?? props.currentPillId
-      ?? props.currentPageSelectorId
-      ?? internalActiveView.value
-      ?? firstConfiguredViewId.value,
-  set: (value: string) => {
-    internalActiveView.value = value
-    emit('update:activeView', value)
-  },
-})
-
-const resolvedCurrentPillId = computed(() => props.currentPillId ?? resolvedActiveView.value)
-const resolvedCurrentPageSelectorId = computed(() => props.currentPageSelectorId ?? resolvedActiveView.value)
-
 const hasSidebarSurface = computed(() => {
-  if (!props.showSidebar) return false
-  return (
-    Object.keys(props.panels).length > 0
-    || Object.keys(props.forms).length > 0
-    || props.model !== undefined
-    || props.controls !== undefined
-    || props.showSidebarWhenEmpty
-    || props.sidebarContentId !== undefined
-    || props.sidebarTitle !== undefined
-    || props.sidebarSubtitle !== undefined
-    || props.sidebarBadge !== undefined
-    || Boolean(slots.sidebar)
-    || sidebarSlotNames.value.length > 0
-  )
+  return hasPluginWorkspaceSidebarSurface({
+    showSidebar: props.showSidebar,
+    panels: props.panels,
+    forms: props.forms,
+    model: props.model,
+    controls: props.controls,
+    showSidebarWhenEmpty: props.showSidebarWhenEmpty,
+    sidebarContentId: props.sidebarContentId,
+    sidebarTitle: props.sidebarTitle,
+    sidebarSubtitle: props.sidebarSubtitle,
+    sidebarBadge: props.sidebarBadge,
+    hasSidebarSlot: Boolean(slots.sidebar),
+    sidebarSlotCount: sidebarSlotNames.value.length,
+  })
 })
 
-function firstItemId(items?: readonly (string | { id: string })[]): string | undefined {
-  const item = items?.[0]
-  if (item === undefined) return undefined
-  return typeof item === 'string' ? item : item.id
-}
-
-function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
-  return 'controls' in model && 'controlOptions' in model
-}
-
-function setActiveView(viewId: string) {
-  resolvedActiveView.value = viewId
-}
-
-function handlePageSelectorSelect(page: PageSelectorItem) {
-  setActiveView(page.id)
-  emit('page-selector-select', page)
-}
-
-function handlePillSelect(item: PillNavItem) {
-  setActiveView(item.id)
-  emit('pill-select', item)
-}
-
 function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
   emit('pill-option-select', option, item)
 }
@@ -516,16 +231,6 @@ function handleToggle(sectionId: string, value: boolean) {
   emit('update:toggle', sectionId, value)
 }
 
-function handleControlValuesUpdate(values: Record<string, unknown>) {
-  syncingControlValues = true
-  replaceControlValues({
-    ...generatedControlDefaults.value,
-    ...values,
-  })
-  syncingControlValues = false
-  emitControlValues()
-}
-
 function handleFormSubmit(sectionId: string, values: Record<string, unknown>) {
   emit('form-submit', sectionId, values)
 }
@@ -534,30 +239,6 @@ function handleFormCancel(sectionId: string) {
   emit('form-cancel', sectionId)
 }
 
-function syncResolvedControlValues() {
-  syncingControlValues = true
-  replaceControlValues({
-    ...generatedControlDefaults.value,
-    ...(externalControlValues.value === undefined ? internalControlValues : externalControlValues.value),
-  })
-  syncingControlValues = false
-}
-
-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() {
-  const nextValues = { ...internalControlValues }
-  emit('update:modelValue', nextValues)
-  emit('update:values', nextValues)
-}
-
 </script>
 
 <template>

package/src/components/ProtocolStep.presentation.ts

@@ -0,0 +1,31 @@
+import type { ProtocolStepType } from '../types'
+
+export const PROTOCOL_STEP_TYPE_ICONS: 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',
+}
+
+export const PROTOCOL_STEP_TYPE_COLORS: Record<ProtocolStepType, string> = {
+  incubation: '#F59E0B',
+  wash: '#06B6D4',
+  addition: '#10B981',
+  measurement: '#8B5CF6',
+  transfer: '#3B82F6',
+  centrifuge: '#6B7280',
+  mix: '#F97316',
+  custom: '#EC4899',
+}
+
+export function formatProtocolDuration(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`
+}

package/src/components/ProtocolStepEditor.state.ts

@@ -0,0 +1,104 @@
+import type { ProtocolStep, ProtocolStepStatus } from '../types'
+import type { ParameterDefinition, StepTemplate } from '../composables/useProtocolTemplates'
+
+export interface ProtocolStepEditorFields {
+  name: string
+  description: string
+  duration?: number
+  parameters: Record<string, unknown>
+}
+
+export interface InitializedProtocolStepEditorState {
+  selectedTemplateId: string | null
+  fields: ProtocolStepEditorFields
+}
+
+export type ProtocolParameterFormatter = (
+  value: unknown,
+  parameter: ParameterDefinition
+) => string
+
+export function buildProtocolTemplateDefaults(
+  template: StepTemplate
+): ProtocolStepEditorFields {
+  const parameters: Record<string, unknown> = {}
+  for (const parameter of template.parameters) {
+    if (parameter.default !== undefined) {
+      parameters[parameter.key] = parameter.default
+    }
+  }
+
+  return {
+    name: template.name,
+    description: template.description || '',
+    duration: template.defaultDuration,
+    parameters,
+  }
+}
+
+export function buildProtocolStepEditorState(
+  step: ProtocolStep,
+  getTemplateByType: (type: ProtocolStep['type']) => StepTemplate | undefined
+): InitializedProtocolStepEditorState {
+  const template = getTemplateByType(step.type)
+
+  return {
+    selectedTemplateId: template?.id || null,
+    fields: {
+      name: step.name,
+      description: step.description || '',
+      duration: step.duration,
+      parameters: { ...(step.parameters || {}) },
+    },
+  }
+}
+
+export function buildProtocolStepPreview(
+  template: StepTemplate,
+  fields: ProtocolStepEditorFields,
+  sourceStep?: ProtocolStep
+): ProtocolStep {
+  return {
+    id: sourceStep?.id || 'preview',
+    type: template.type,
+    name: fields.name || template.name,
+    description: fields.description,
+    duration: fields.duration ?? template.defaultDuration,
+    status: (sourceStep?.status || 'pending') as ProtocolStepStatus,
+    parameters: { ...fields.parameters },
+    order: sourceStep?.order || 0,
+  }
+}
+
+export function buildProtocolPreviewParams(
+  template: StepTemplate,
+  parameters: Record<string, unknown>,
+  formatParameterValue: ProtocolParameterFormatter
+): string {
+  return template.parameters
+    .filter((parameter) => (
+      parameters[parameter.key] !== undefined
+      && parameters[parameter.key] !== ''
+    ))
+    .map((parameter) => formatParameterValue(parameters[parameter.key], parameter))
+    .join(', ')
+}
+
+export function buildCustomProtocolTemplate(
+  template: StepTemplate,
+  fields: ProtocolStepEditorFields,
+  templateId = `custom-${Date.now()}`
+): StepTemplate {
+  return {
+    id: templateId,
+    type: template.type,
+    name: fields.name || template.name,
+    description: fields.description,
+    defaultDuration: fields.duration,
+    parameters: template.parameters.map((parameter) => ({
+      ...parameter,
+      default: fields.parameters[parameter.key],
+    })),
+    isBuiltIn: false,
+  }
+}