@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/DoseDesignWorkspaceView.story.vue

@@ -0,0 +1,77 @@
+<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

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+/** Complete ControlWorkspaceView page shell for WellPlate + DoseCalculator 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 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
+  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
+  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)
+)
+
+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
+    :model="resolvedModel"
+    :workspace="workspace"
+    :control-options="controlOptions"
+    :initial-values="initialValues"
+    :model-value="modelValue"
+    :values="values"
+    :title="title"
+    :subtitle="subtitle"
+    :top-bar-variant="topBarVariant"
+    :sidebar-width="sidebarWidth"
+    :sidebar-variant="sidebarVariant"
+    :responsive-sidebar="responsiveSidebar"
+    :sidebar-position="sidebarPosition"
+    :sidebar-title="sidebarTitle"
+    :sidebar-subtitle="sidebarSubtitle"
+    :sidebar-badge="sidebarBadge"
+    :floating="floating"
+    :dense="dense"
+    :show-settings="showSettings"
+    :show-form-actions="showFormActions"
+    :form-enhancements="formEnhancements"
+    :form-loading="formLoading"
+    :form-disabled="formDisabled"
+    :form-readonly="formReadonly"
+    :form-size="formSize"
+    @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>

package/src/components/DropdownButton.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /** Button that opens a dropdown menu for selecting one option from a list. */
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import type { SelectOption, ButtonVariant, ButtonSize } from '../types'
+import { computed } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import type { SelectOption, SelectOptionInput, ButtonVariant, ButtonSize } from '../types'
+import { normalizeOptionInput } from '../utils/options'
 
 /**
  * DropdownButton - Button-style select with dropdown menu for option selection.
@@ -22,7 +24,7 @@ interface Props {
   /** Selected option value */
   modelValue?: string | number
   /** Available options */
-  options: SelectOption<string | number>[]
+  options: SelectOptionInput<string | number>[]
   /** Placeholder text when no option is selected */
   placeholder?: string
   /** Button style variant */
@@ -51,52 +53,32 @@ const emit = defineEmits<{
   select: [option: SelectOption<string | number>]
 }>()
 
-const isOpen = ref(false)
-const containerRef = ref<HTMLDivElement>()
+const { isOpen, rootRef, close, toggle: toggleDropdown } = useDropdownState()
+const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
+  props.options.map(normalizeOptionInput)
+)
 
 const selectedLabel = computed(() => {
   if (props.modelValue === undefined) return props.placeholder ?? 'Select...'
-  const found = props.options.find(o => o.value === props.modelValue)
+  const found = normalizedOptions.value.find(o => o.value === props.modelValue)
   return found?.label ?? String(props.modelValue)
 })
 
 function toggle() {
   if (props.disabled || props.loading) return
-  isOpen.value = !isOpen.value
+  toggleDropdown()
 }
 
 function selectOption(option: SelectOption<string | number>) {
   if (option.disabled) return
   emit('update:modelValue', option.value)
   emit('select', option)
-  isOpen.value = false
+  close()
 }
-
-function handleClickOutside(event: MouseEvent) {
-  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-  }
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('keydown', handleKeydown)
-})
 </script>
 
 <template>
-  <div ref="containerRef" class="mint-dropdown-button">
+  <div ref="rootRef" class="mint-dropdown-button">
     <button
       type="button"
       :disabled="disabled || loading"
@@ -139,7 +121,7 @@ onUnmounted(() => {
         :aria-activedescendant="modelValue !== undefined ? `mint-dropdown-option-${modelValue}` : undefined"
       >
         <li
-          v-for="option in options"
+          v-for="option in normalizedOptions"
           :id="`mint-dropdown-option-${option.value}`"
           :key="String(option.value)"
           role="option"

package/src/components/EmptyState.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 /** Empty-state placeholder with icon badge, headline, description, default slot, and optional CTA button. */
+import BaseButton from './BaseButton.vue'
+
 interface Props {
   title?: string
   description?: string
@@ -57,9 +59,9 @@ const defaultIconPaths = [
       <slot />
     </div>
     <div v-if="actionLabel" class="mint-empty-state__action">
-      <button class="mint-empty-state__button" @click="emit('action')">
+      <BaseButton @click="emit('action')">
         {{ actionLabel }}
-      </button>
+      </BaseButton>
     </div>
   </div>
 </template>

package/src/components/ExperimentPopover.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 /** Floating popover showing the active experiment with save, detach, and select actions. */
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
+import { useDropdownState } from '../composables/useDropdownState'
+import { formatExperimentStatus } from '../composables/experiment-utils'
 import ConfirmDialog from './ConfirmDialog.vue'
 
 interface Props {
@@ -32,19 +34,12 @@ const emit = defineEmits<{
   detach: []
 }>()
 
-const isOpen = ref(false)
-const popoverRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef: popoverRef, close, toggle } = useDropdownState({
+  closeOnEscape: false,
+})
 const showSuccess = ref(false)
 const showConfirm = ref(false)
 
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-
-function close() {
-  isOpen.value = false
-}
-
 function handleSelect() {
   emit('select')
   close()
@@ -69,12 +64,6 @@ function handleDetach() {
   close()
 }
 
-function handleClickOutside(event: MouseEvent) {
-  if (popoverRef.value && !popoverRef.value.contains(event.target as Node)) {
-    close()
-  }
-}
-
 let successTimer: ReturnType<typeof setTimeout> | null = null
 
 // Show success state when saveSuccessMessage changes from empty to a value
@@ -89,19 +78,9 @@ watch(() => props.saveSuccessMessage, (msg) => {
   }
 })
 
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
   if (successTimer) clearTimeout(successTimer)
 })
-
-// Format status for display (e.g., "ready_to_extract" -> "Ready to extract")
-function formatStatus(status: string): string {
-  return status.replace(/_/g, ' ').replace(/^\w/, c => c.toUpperCase())
-}
 </script>
 
 <template>
@@ -208,7 +187,7 @@ function formatStatus(status: string): string {
             <span v-if="experimentCode" class="mint-experiment-popover__card-code">{{ experimentCode }}</span>
             <div class="mint-experiment-popover__card-name">{{ experimentName }}</div>
             <div v-if="experimentStatus" class="mint-experiment-popover__card-status">
-              {{ formatStatus(experimentStatus) }}
+              {{ formatExperimentStatus(experimentStatus) }}
             </div>
           </div>
         </div>

package/src/components/ExperimentSelectorModal.vue

@@ -5,8 +5,9 @@ import type { ModalSize, ExperimentSummary, ExperimentFilters } from '../types'
 import { useExperimentSelector } from '../composables/useExperimentSelector'
 import {
   formatExperimentDate,
+  formatExperimentStatus,
+  getExperimentStatusVariant,
   EXPERIMENT_STATUS_OPTIONS,
-  EXPERIMENT_STATUS_VARIANT_MAP,
   DATE_PRESET_OPTIONS,
   SORT_OPTIONS,
 } from '../composables/experiment-utils'
@@ -326,8 +327,8 @@ watch(
                   <span>{{ formatExperimentDate(exp.created_at) }}</span>
                 </div>
               </div>
-              <BasePill :variant="EXPERIMENT_STATUS_VARIANT_MAP[exp.status]" size="sm">
-                {{ exp.status }}
+              <BasePill :variant="getExperimentStatusVariant(exp.status)" size="sm">
+                {{ formatExperimentStatus(exp.status) }}
               </BasePill>
             </div>
           </template>
@@ -362,8 +363,8 @@ watch(
               <span>{{ formatExperimentDate(exp.created_at) }}</span>
             </div>
           </div>
-          <BasePill :variant="EXPERIMENT_STATUS_VARIANT_MAP[exp.status]" size="sm">
-            {{ exp.status }}
+          <BasePill :variant="getExperimentStatusVariant(exp.status)" size="sm">
+            {{ formatExperimentStatus(exp.status) }}
           </BasePill>
         </div>
       </div>