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

package/src/components/WellPlate.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** Interactive 96/384-well plate grid with drag-to-select, heatmap overlays, per-well editing, and sample-color mapping. */
 import { ref, computed } from 'vue'
-import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition } from '../types'
+import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser } from '../types'
 import { useEventListener } from '../composables/useEventListener'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
 
@@ -29,6 +29,8 @@ interface Props {
   legendItems?: WellLegendItem[]
   columnConditions?: ColumnCondition[]
   rowConditions?: RowCondition[]
+  allowSampleDrop?: boolean
+  sampleDropParser?: WellSampleDropParser
 }
 
 // Drag state for moving wells
@@ -59,6 +61,8 @@ const props = withDefaults(defineProps<Props>(), {
   legendItems: undefined,
   columnConditions: () => [],
   rowConditions: () => [],
+  allowSampleDrop: false,
+  sampleDropParser: undefined,
 })
 
 const emit = defineEmits<{
@@ -70,6 +74,22 @@ const emit = defineEmits<{
   'well-move': [sourceWellId: string, targetWellId: string]
   'well-edit': [wellId: string, data: WellEditData]
   'well-clear': [wellId: string]
+  'sample-drop': [wellId: string, data: WellSampleDropData, event: DragEvent]
+}>()
+
+interface WellEditorSlotProps {
+  wellId: string
+  wellData?: Partial<Well>
+  editFields: WellEditField[]
+  defaultInjectionVolume: number
+  position: { x: number; y: number }
+  save: (data: WellEditData) => void
+  clear: () => void
+  close: () => void
+}
+
+defineSlots<{
+  'well-editor'?: (props: WellEditorSlotProps) => unknown
 }>()
 
 const plateRef = ref<HTMLElement | null>(null)
@@ -164,6 +184,7 @@ const defaultLegendItems: WellLegendItem[] = [
   { type: 'sample', label: 'Sample', color: '#10b981' },
   { type: 'blank', label: 'Blank', color: '#f97316' },
   { type: 'qc', label: 'QC', color: '#8b5cf6' },
+  { type: 'iqc', label: 'IQC', color: '#ec4899' },
 ]
 
 const activeLegendItems = computed(() => props.legendItems ?? defaultLegendItems)
@@ -285,6 +306,7 @@ const defaultSampleTypeColors: Record<string, { bg: string; border: string }> =
   control: { bg: 'rgba(59, 130, 246, 0.15)', border: 'rgba(59, 130, 246, 0.4)' },
   blank: { bg: 'rgba(249, 115, 22, 0.15)', border: 'rgba(249, 115, 22, 0.4)' },
   qc: { bg: 'rgba(139, 92, 246, 0.15)', border: 'rgba(139, 92, 246, 0.4)' },
+  iqc: { bg: 'rgba(236, 72, 153, 0.15)', border: 'rgba(236, 72, 153, 0.4)' },
 }
 
 const heatmapColors: Record<string, string[]> = {
@@ -373,6 +395,7 @@ function getSampleTypeIndicator(well: Well): string | null {
     control: 'C',
     blank: 'B',
     qc: 'Q',
+    iqc: 'I',
   }
   return typeMap[well.sampleType] || well.sampleType.charAt(0).toUpperCase()
 }
@@ -511,10 +534,12 @@ function handleDragStart(well: Well, event: DragEvent) {
 }
 
 function handleDragOver(well: Well, event: DragEvent) {
-  if (props.selectionMode !== 'drag' || !dragSourceWell.value) return
+  const isMovingWell = props.selectionMode === 'drag' && !!dragSourceWell.value
+  if (!isMovingWell && !props.allowSampleDrop) return
+
   event.preventDefault()
   if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move'
+    event.dataTransfer.dropEffect = isMovingWell ? 'move' : 'copy'
   }
   dragTargetWell.value = well.id
 }
@@ -524,14 +549,27 @@ function handleDragLeave() {
 }
 
 function handleDrop(well: Well, event: DragEvent) {
+  const isMovingWell = props.selectionMode === 'drag' && !!dragSourceWell.value
+  if (!isMovingWell && !props.allowSampleDrop) return
+
   event.preventDefault()
-  if (props.selectionMode !== 'drag' || !dragSourceWell.value) return
 
-  const sourceId = dragSourceWell.value
-  const targetId = well.id
+  if (isMovingWell && dragSourceWell.value) {
+    const sourceId = dragSourceWell.value
+    const targetId = well.id
+
+    if (sourceId !== targetId) {
+      emit('well-move', sourceId, targetId)
+    }
 
-  if (sourceId !== targetId) {
-    emit('well-move', sourceId, targetId)
+    dragSourceWell.value = null
+    dragTargetWell.value = null
+    return
+  }
+
+  const droppedSample = parseDroppedSample(event, well.id)
+  if (droppedSample) {
+    emit('sample-drop', well.id, droppedSample, event)
   }
 
   dragSourceWell.value = null
@@ -543,6 +581,76 @@ function handleDragEnd() {
   dragTargetWell.value = null
 }
 
+function parseDroppedSample(event: DragEvent, wellId: string): WellSampleDropData | null {
+  if (props.sampleDropParser) {
+    return props.sampleDropParser(event, { wellId, event }) ?? null
+  }
+
+  const transfer = event.dataTransfer
+  if (!transfer) return null
+
+  const json = transfer.getData('application/json') || transfer.getData('text/json')
+  if (json) {
+    try {
+      return normalizeDroppedSample(JSON.parse(json))
+    } catch {
+      return null
+    }
+  }
+
+  const text = transfer.getData('text/plain')?.trim()
+  if (!text) return null
+  return {
+    sampleName: text,
+    label: text,
+    raw: text,
+  }
+}
+
+function normalizeDroppedSample(raw: unknown): WellSampleDropData | null {
+  if (!raw || typeof raw !== 'object') return null
+
+  const record = raw as Record<string, unknown>
+  const sampleName =
+    getString(record.sampleName) ??
+    getString(record.sample_name) ??
+    getString(record.name) ??
+    getString(record.label)
+  const label = getString(record.label) ?? sampleName
+  const sampleType =
+    getString(record.sampleType) ??
+    getString(record.sample_type) ??
+    (record.type === 'sample' ? 'sample' : undefined)
+
+  if (!sampleName && !label && !getString(record.id)) return null
+
+  return {
+    id: getString(record.id),
+    sampleName,
+    label,
+    sampleType,
+    injectionVolume: getNumber(record.injectionVolume ?? record.injection_volume),
+    injectionCount: getNumber(record.injectionCount ?? record.injection_count),
+    customMethod: getString(record.customMethod ?? record.custom_method) ?? null,
+    metadata: getRecord(record.metadata),
+    raw,
+  }
+}
+
+function getString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined
+}
+
+function getNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined
+}
+
+function getRecord(value: unknown): Record<string, unknown> | undefined {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : undefined
+}
+
 function handleKeyDown(event: KeyboardEvent) {
   if (props.disabled || props.readonly) return
 
@@ -726,9 +834,9 @@ const tableStyle = computed(() => ({
                 @mouseleave="handleWellMouseLeave"
                 @contextmenu="handleContextMenu(well, $event)"
                 @dragstart="handleDragStart(well, $event)"
-                @dragover.prevent="handleDragOver(well, $event)"
+                @dragover="handleDragOver(well, $event)"
                 @dragleave="handleDragLeave"
-                @drop.prevent="handleDrop(well, $event)"
+                @drop="handleDrop(well, $event)"
                 @dragend="handleDragEnd"
                 @keydown.enter="handleWellClick(well, $event as unknown as MouseEvent)"
                 @keydown.space.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
@@ -805,17 +913,30 @@ const tableStyle = computed(() => ({
     </div>
 
     <!-- Edit popup -->
-    <WellEditPopupInternal
-      v-if="editable && editingWellId"
-      :well-id="editingWellId"
-      :well-data="wells[editingWellId]"
-      :edit-fields="editFields"
-      :default-injection-volume="defaultInjectionVolume"
-      :position="editPopupPosition"
-      @save="handleEditSave"
-      @clear="handleEditClear"
-      @close="handleEditClose"
-    />
+    <template v-if="editable && editingWellId">
+      <slot
+        name="well-editor"
+        :well-id="editingWellId"
+        :well-data="wells[editingWellId]"
+        :edit-fields="editFields"
+        :default-injection-volume="defaultInjectionVolume"
+        :position="editPopupPosition"
+        :save="handleEditSave"
+        :clear="handleEditClear"
+        :close="handleEditClose"
+      >
+        <WellEditPopupInternal
+          :well-id="editingWellId"
+          :well-data="wells[editingWellId]"
+          :edit-fields="editFields"
+          :default-injection-volume="defaultInjectionVolume"
+          :position="editPopupPosition"
+          @save="handleEditSave"
+          @clear="handleEditClear"
+          @close="handleEditClose"
+        />
+      </slot>
+    </template>
   </div>
 </template>
 

package/src/components/index.ts

@@ -89,6 +89,11 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 // Scientific display components
 export { default as ScientificNumber } from './ScientificNumber.vue'
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
+export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
+export { default as InstrumentAlertLog } from './InstrumentAlertLog.vue'
+export { default as InstrumentStateBadge } from './InstrumentStateBadge.vue'
+export { default as InstrumentStatusCard } from './InstrumentStatusCard.vue'
+export { default as LcmsSequenceTable } from './LcmsSequenceTable.vue'
 
 // Scientific input components
 export { default as FormulaInput } from './FormulaInput.vue'

package/src/components/internal/WellEditPopupInternal.vue

@@ -90,6 +90,7 @@ const sampleTypeButtons = [
   { type: 'sample', label: 'S', tooltip: 'Sample' },
   { type: 'blank', label: 'B', tooltip: 'Blank' },
   { type: 'qc', label: 'Q', tooltip: 'QC' },
+  { type: 'iqc', label: 'I', tooltip: 'IQC' },
 ]
 </script>
 

package/src/composables/controlComponentBindings.ts

@@ -0,0 +1,80 @@
+import type {
+  ControlComponentBinding,
+  ControlComponentBindingConfig,
+  ControlComponentBindingRecordConfig,
+  ControlComponentBindingsById,
+  ControlComponentBindingsConfig,
+  ControlComponentPropsMap,
+  ControlComponentPropSource,
+} from './useControlSchema'
+
+/** Map control workspace values into component props for direct `v-bind` usage. */
+export function controlValuesToComponentProps<TValues extends Record<string, unknown>>(
+  values: TValues,
+  mapping?: ControlComponentPropsMap<TValues>,
+): Record<string, unknown> {
+  if (mapping === undefined) return { ...values }
+
+  if (Array.isArray(mapping)) {
+    const props: Record<string, unknown> = {}
+    for (const key of mapping) {
+      props[key] = values[key]
+    }
+    return props
+  }
+
+  const props: Record<string, unknown> = {}
+  for (const [prop, source] of Object.entries(mapping) as Array<[string, ControlComponentPropSource<TValues>]>) {
+    props[prop] = typeof source === 'function' ? source(values) : values[source]
+  }
+  return props
+}
+
+/** Map control workspace values into named SDK component bindings for direct slot rendering. */
+export function controlValuesToComponentBindings<TValues extends Record<string, unknown>>(
+  values: TValues,
+  bindings?: ControlComponentBindingsConfig<TValues>,
+): ControlComponentBinding[] {
+  if (bindings === undefined) return []
+
+  return normalizeControlComponentBindingConfigs(bindings).map(binding => ({
+    id: binding.id,
+    component: binding.component,
+    props: controlValuesToComponentProps(values, binding.props),
+  }))
+}
+
+/** Map control workspace values into SDK component bindings keyed by binding id. */
+export function controlValuesToComponentBindingsById<TValues extends Record<string, unknown>>(
+  values: TValues,
+  bindings?: ControlComponentBindingsConfig<TValues>,
+): ControlComponentBindingsById {
+  return Object.fromEntries(
+    controlValuesToComponentBindings(values, bindings).map(binding => [binding.id, binding]),
+  )
+}
+
+function normalizeControlComponentBindingConfigs<TValues extends Record<string, unknown>>(
+  bindings: ControlComponentBindingsConfig<TValues>,
+): Array<Required<Pick<ControlComponentBindingConfig<TValues>, 'id' | 'component'>> & Pick<ControlComponentBindingConfig<TValues>, 'props'>> {
+  if (Array.isArray(bindings)) {
+    const usedIds = new Map<string, number>()
+    return bindings.map(binding => ({
+      id: uniqueComponentBindingId(binding.id ?? binding.component, usedIds),
+      component: binding.component,
+      props: binding.props,
+    }))
+  }
+
+  return Object.entries(bindings).map(([id, binding]: [string, ControlComponentBindingRecordConfig<TValues>]) => ({
+    id,
+    component: binding.component,
+    props: binding.props,
+  }))
+}
+
+function uniqueComponentBindingId(id: string, usedIds: Map<string, number>): string {
+  const count = usedIds.get(id) ?? 0
+  usedIds.set(id, count + 1)
+  return count === 0 ? id : `${id}-${count + 1}`
+}

package/src/composables/controlSchemaAdapters.ts

@@ -0,0 +1,196 @@
+import type {
+  PillNavItem,
+  SidebarToolSection,
+  SettingsModalSchema,
+  TopBarSettingsConfig,
+} from '../types'
+import type {
+  FormSectionSchema,
+} from '../types/form-builder'
+import {
+  controlToFormField,
+} from './controlSchemaFormFields'
+import {
+  controlViewItem,
+  firstSidebarConfig,
+  isSidebarEnabled,
+  sectionConfig,
+} from './controlSchemaLayout'
+import {
+  normalizeControls,
+} from './controlSchemaNormalize'
+import {
+  humanize,
+  orderedUnique,
+} from './controlSchemaUtils'
+import type {
+  ControlFormSchema,
+  ControlSchema,
+  ControlSchemaOptions,
+} from './useControlSchema'
+
+/** Convert a compact control schema into a FormBuilder schema. */
+export function controlsToFormSchema(
+  controls: ControlSchema,
+  options: ControlSchemaOptions = {},
+): ControlFormSchema {
+  const normalized = normalizeControls(controls, options)
+  const sectionIds = orderedUnique(normalized.map(control => control.sectionId))
+  const sections = sectionIds.map((sectionId): FormSectionSchema => {
+    const sectionControls = normalized.filter(control => control.sectionId === sectionId)
+    const config = sectionConfig(sectionId, sectionControls, options)
+    return {
+      id: sectionId,
+      title: config.title ?? config.label ?? humanize(sectionId),
+      description: config.description,
+      columns: config.columns ?? options.columns ?? 1,
+      defaultOpen: config.defaultOpen,
+      condition: config.condition,
+      fields: sectionControls.map(controlToFormField),
+    }
+  })
+
+  return {
+    sections,
+    submitLabel: options.submitLabel,
+    cancelLabel: options.cancelLabel,
+    showCancel: options.showCancel,
+  }
+}
+
+/** Convert controls into AppSidebar panels grouped by view and section. */
+export function controlsToSidebarPanels(
+  controls: ControlSchema,
+  options: ControlSchemaOptions = {},
+): Record<string, SidebarToolSection[]> {
+  const normalized = normalizeControls(controls, options)
+    .filter(control => isSidebarEnabled(control.definition.sidebar))
+  const viewIds = orderedUnique(normalized.map(control => control.viewId))
+  const panels: Record<string, SidebarToolSection[]> = {}
+
+  for (const viewId of viewIds) {
+    const viewControls = normalized.filter(control => control.viewId === viewId)
+    const sectionIds = orderedUnique(viewControls.map(control => control.sectionId))
+    panels[viewId] = sectionIds.map((sectionId): SidebarToolSection => {
+      const sectionControls = viewControls.filter(control => control.sectionId === sectionId)
+      const config = sectionConfig(sectionId, sectionControls, options)
+      const sidebarConfig = firstSidebarConfig(sectionControls)
+      return {
+        id: sectionId,
+        label: sidebarConfig?.label ?? config.label ?? config.title ?? humanize(sectionId),
+        subtitle: sidebarConfig?.subtitle ?? config.subtitle,
+        icon: sidebarConfig?.icon ?? config.icon,
+        iconColor: sidebarConfig?.iconColor ?? config.iconColor,
+        iconBg: sidebarConfig?.iconBg ?? config.iconBg,
+        defaultOpen: sidebarConfig?.defaultOpen ?? config.defaultOpen,
+        showToggle: sidebarConfig?.showToggle ?? config.showToggle,
+      }
+    })
+  }
+
+  return panels
+}
+
+/** Convert controls into a SettingsModal schema grouped by the same sections. */
+export function controlsToSettingsSchema(
+  controls: ControlSchema,
+  options: ControlSchemaOptions = {},
+): SettingsModalSchema {
+  const normalized = normalizeControls(controls, options)
+  const sectionIds = orderedUnique(normalized.map(control => control.sectionId))
+
+  return {
+    groups: sectionIds.map((sectionId) => {
+      const sectionControls = normalized.filter(control => control.sectionId === sectionId)
+      const config = sectionConfig(sectionId, sectionControls, options)
+      return {
+        id: sectionId,
+        label: config.label ?? config.title ?? humanize(sectionId),
+        description: config.description ?? config.subtitle,
+        icon: typeof config.icon === 'string' ? config.icon : undefined,
+        fields: sectionControls.map(controlToFormField),
+        columns: config.columns ?? options.columns ?? 1,
+        condition: config.condition,
+        access: config.access,
+        visibleFor: config.visibleFor,
+        requiresAdmin: config.requiresAdmin,
+        permissions: config.permissions,
+        anyPermissions: config.anyPermissions,
+      }
+    }),
+  }
+}
+
+/** Convert controls into an AppTopBar settingsConfig object that passes compact controls through to SettingsModal. */
+export function controlsToTopBarSettingsConfig(
+  controls: ControlSchema,
+  options: ControlSchemaOptions = {},
+  config: Omit<TopBarSettingsConfig, 'schema' | 'controls' | 'controlOptions'> = {},
+): TopBarSettingsConfig {
+  return {
+    ...config,
+    controls,
+    controlOptions: options,
+  }
+}
+
+/** Return generated control view IDs that have at least one sidebar panel. */
+export function controlsToViewIds(
+  controls: ControlSchema,
+  options: ControlSchemaOptions = {},
+): string[] {
+  return controlsToViewItems(controls, options).map(item => item.id)
+}
+
+/** Return AppTopBar pillNav-compatible view items for switching generated control sidebars. */
+export function controlsToViewItems(
+  controls: ControlSchema,
+  options: ControlSchemaOptions = {},
+): PillNavItem[] {
+  return Object.entries(controlsToSidebarPanels(controls, options))
+    .filter(([, sections]) => sections.length > 0)
+    .map(([id]) => controlViewItem(id, options))
+}
+
+/** Return the first generated sidebar view ID, or an empty string when controls render no sidebar panels. */
+export function getDefaultControlView(
+  controls: ControlSchema,
+  options: ControlSchemaOptions = {},
+): string {
+  return controlsToViewIds(controls, options)[0] ?? ''
+}
+
+/** Return a headerless single-section FormBuilder schema for rendering inside an AppSidebar section slot. */
+export function controlsToSectionFormSchema(
+  controls: ControlSchema,
+  sectionId: string,
+  options: ControlSchemaOptions = {},
+): ControlFormSchema {
+  const schema = controlsToFormSchema(controls, options)
+  return {
+    sections: schema.sections
+      .filter(section => section.id === sectionId)
+      .map(section => ({ ...section, title: '', description: undefined })),
+    submitLabel: schema.submitLabel,
+    cancelLabel: schema.cancelLabel,
+    showCancel: schema.showCancel,
+  }
+}
+
+/** Return headerless FormBuilder schemas keyed by section ID for AppSidebar auto-rendering. */
+export function controlsToSectionFormSchemas(
+  controls: ControlSchema,
+  options: ControlSchemaOptions = {},
+): Record<string, ControlFormSchema> {
+  const schema = controlsToFormSchema(controls, options)
+  const schemas: Record<string, ControlFormSchema> = {}
+  for (const section of schema.sections) {
+    schemas[section.id] = {
+      sections: [{ ...section, title: '', description: undefined }],
+      submitLabel: schema.submitLabel,
+      cancelLabel: schema.cancelLabel,
+      showCancel: schema.showCancel,
+    }
+  }
+  return schemas
+}

package/src/composables/controlSchemaFormFields.ts

@@ -0,0 +1,61 @@
+import type {
+  FieldValidation,
+  FormFieldSchema,
+} from '../types/form-builder'
+import {
+  defaultValueForControl,
+  normalizeOption,
+  type NormalizedControl,
+} from './controlSchemaNormalize'
+import {
+  humanize,
+  numericValue,
+} from './controlSchemaUtils'
+import type {
+  ControlDefinition,
+} from './useControlSchema'
+
+export function controlToFormField(control: NormalizedControl): FormFieldSchema {
+  const { name, definition, type } = control
+  const props = fieldProps(definition)
+  return {
+    name,
+    label: definition.label ?? humanize(name),
+    type,
+    defaultValue: defaultValueForControl(definition, type),
+    placeholder: definition.placeholder,
+    hint: definition.hint,
+    size: definition.size,
+    disabled: definition.disabled,
+    readonly: definition.readonly,
+    validation: validationForControl(definition),
+    condition: definition.condition,
+    access: definition.access,
+    visibleFor: definition.visibleFor,
+    requiresAdmin: definition.requiresAdmin,
+    permissions: definition.permissions,
+    anyPermissions: definition.anyPermissions,
+    colSpan: definition.colSpan,
+    props,
+  }
+}
+
+function fieldProps(definition: ControlDefinition): Record<string, unknown> {
+  const props: Record<string, unknown> = {}
+  if (definition.min !== undefined) props.min = numericValue(definition.min)
+  if (definition.max !== undefined) props.max = numericValue(definition.max)
+  if (definition.options) props.options = definition.options.map(normalizeOption)
+  return { ...props, ...(definition.props ?? {}) }
+}
+
+function validationForControl(definition: ControlDefinition): FieldValidation | undefined {
+  const validation: FieldValidation = { ...(definition.validation ?? {}) }
+  if (definition.required !== undefined) validation.required = definition.required
+  if (definition.min !== undefined) validation.min = definition.min
+  if (definition.max !== undefined) validation.max = definition.max
+  if (definition.minLength !== undefined) validation.minLength = definition.minLength
+  if (definition.maxLength !== undefined) validation.maxLength = definition.maxLength
+  if (definition.email !== undefined) validation.email = definition.email
+  if (definition.pattern !== undefined) validation.pattern = definition.pattern
+  return Object.keys(validation).length > 0 ? validation : undefined
+}

package/src/composables/controlSchemaLayout.ts

@@ -0,0 +1,59 @@
+import type {
+  PillNavItem,
+} from '../types'
+import type {
+  NormalizedControl,
+} from './controlSchemaNormalize'
+import {
+  humanize,
+} from './controlSchemaUtils'
+import type {
+  ControlDefinition,
+  ControlSchemaOptions,
+  ControlSectionConfig,
+  ControlSidebarConfig,
+} from './useControlSchema'
+
+export function sectionConfig(
+  sectionId: string,
+  controls: NormalizedControl[],
+  options: ControlSchemaOptions,
+): ControlSectionConfig {
+  const configured = options.sections?.[sectionId]
+  const first = controls[0]?.definition
+  return {
+    ...configured,
+    id: sectionId,
+    label: configured?.label ?? first?.sectionLabel,
+    title: configured?.title ?? first?.sectionLabel,
+    description: configured?.description ?? first?.sectionDescription,
+    subtitle: configured?.subtitle ?? first?.sectionSubtitle,
+  }
+}
+
+export function firstSidebarConfig(controls: NormalizedControl[]): ControlSidebarConfig | undefined {
+  for (const control of controls) {
+    const sidebar = control.definition.sidebar
+    if (sidebar && typeof sidebar === 'object' && sidebar.enabled !== false) return sidebar
+  }
+  return undefined
+}
+
+export function isSidebarEnabled(sidebar: ControlDefinition['sidebar']): boolean {
+  if (sidebar === false) return false
+  if (sidebar && typeof sidebar === 'object') return sidebar.enabled !== false
+  return true
+}
+
+export function controlViewItem(viewId: string, options: ControlSchemaOptions): PillNavItem {
+  const config = options.views?.[viewId]
+  return {
+    id: viewId,
+    label: config?.label ?? humanize(viewId),
+    ...(config?.icon !== undefined ? { icon: config.icon } : {}),
+    ...(config?.to !== undefined ? { to: config.to } : {}),
+    ...(config?.href !== undefined ? { href: config.href } : {}),
+    ...(config?.disabled !== undefined ? { disabled: config.disabled } : {}),
+    ...(config?.children !== undefined ? { children: config.children } : {}),
+  }
+}