@morscherlab/mint-sdk 1.0.0-beta.3 → 1.0.0-beta.5

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/ExperimentPopover.story.vue

@@ -283,7 +283,7 @@ const STATUSES = ['planned', 'ongoing', 'completed', 'ready_to_extract', 'proces
           </div>
         </div>
         <p style="margin-top: 1rem; font-size: 0.75rem; color: var(--text-muted); text-align: center;">
-          Same 2.375rem height and refresh-design motion as AppPluginSwitcher, AppPageSelector, AppAvatarMenu.
+          Same 2.375rem height and refresh-design motion as AppPluginSwitcher, AppTopBar page selector, AppAvatarMenu.
         </p>
       </div>
     </Variant>
@@ -363,7 +363,7 @@ optionally pairs with an inline Save button as a split unit.
 
 ### Refresh-design alignment
 
-- **Height** `2.375rem` — matches `AppPluginSwitcher` / `AppPageSelector` so the
+- **Height** `2.375rem` — matches `AppPluginSwitcher` / `AppTopBar page selector` so the
   topbar's right cluster reads at one optical baseline.
 - **Surface** `--bg-card` + `--border-color` — consistent with the white-card +
   border language.

package/src/components/ExperimentPopover.vue

@@ -2,6 +2,7 @@
 /** Floating popover showing the active experiment with save, detach, and select actions. */
 import { ref, watch, onUnmounted } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { formatExperimentStatus } from '../composables/experiment-utils'
 import ConfirmDialog from './ConfirmDialog.vue'
 
 interface Props {
@@ -80,11 +81,6 @@ watch(() => props.saveSuccessMessage, (msg) => {
 onUnmounted(() => {
   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>
@@ -191,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>

package/src/components/FormBuilder.story.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import FormBuilder from './FormBuilder.vue'
+import { defineControlModel, defineControls } from '../composables/useControlSchema'
+
+type FormSize = 'sm' | 'md' | 'lg'
+
+const analysisModel = defineControlModel({
+  views: {
+    analysis: {
+      label: 'Analysis',
+      sections: {
+        parameters: {
+          label: 'Parameters',
+          description: 'Model and threshold controls',
+          columns: 2,
+          controls: {
+            threshold: {
+              type: 'number',
+              label: 'Threshold',
+              default: 0.05,
+              min: 0,
+              max: 1,
+              props: { step: 0.01 },
+            },
+            method: {
+              label: 'Method',
+              default: 'logistic',
+              options: ['linear', 'logistic', 'spline'],
+            },
+            normalize: {
+              label: 'Normalize intensities',
+              default: true,
+              type: 'toggle',
+            },
+          },
+        },
+        quality: {
+          label: 'Quality Control',
+          description: 'Result filters',
+          columns: 2,
+          controls: {
+            minPeakArea: {
+              type: 'number',
+              label: 'Min peak area',
+              default: 1000,
+              min: 0,
+            },
+            excludeOutliers: {
+              label: 'Exclude outliers',
+              default: true,
+              type: 'checkbox',
+            },
+          },
+        },
+      },
+    },
+  },
+})
+
+const compactControls = defineControls({
+  sampleName: {
+    label: 'Sample name',
+    default: 'Vehicle',
+    required: true,
+    section: 'sample',
+    sectionLabel: 'Sample',
+  },
+  concentration: {
+    type: 'number',
+    label: 'Concentration',
+    default: 10,
+    min: 0,
+    section: 'sample',
+  },
+  unit: {
+    label: 'Unit',
+    default: 'uM',
+    options: ['nM', 'uM', 'mM'],
+    section: 'sample',
+  },
+})
+
+const modelValues = ref<Record<string, unknown>>({})
+const controlValues = ref<Record<string, unknown>>({})
+
+function initState() {
+  return {
+    size: 'md' as FormSize,
+    showActions: true,
+    readonly: false,
+    disabled: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Forms/FormBuilder" :init-state="initState">
+    <Variant title="Model Driven">
+      <template #default="{ state }">
+        <div class="form-builder-story">
+          <div class="form-builder-story__surface">
+            <FormBuilder
+              v-model="modelValues"
+              :model="analysisModel"
+              :size="state.size"
+              :show-actions="state.showActions"
+              :readonly="state.readonly"
+              :disabled="state.disabled"
+            />
+          </div>
+          <pre class="form-builder-story__values">{{ JSON.stringify(modelValues, null, 2) }}</pre>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { label: 'Small', value: 'sm' },
+            { label: 'Medium', value: 'md' },
+            { label: 'Large', value: 'lg' },
+          ]"
+        />
+        <HstCheckbox v-model="state.showActions" title="Actions" />
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Compact Controls">
+      <div class="form-builder-story">
+        <div class="form-builder-story__surface form-builder-story__surface--narrow">
+          <FormBuilder
+            v-model="controlValues"
+            :controls="compactControls"
+            :show-actions="false"
+          />
+        </div>
+        <pre class="form-builder-story__values">{{ JSON.stringify(controlValues, null, 2) }}</pre>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.form-builder-story {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
+  gap: 1rem;
+  align-items: start;
+  padding: 2rem;
+  min-height: 640px;
+  background: var(--bg-secondary, #f8fafc);
+}
+
+.form-builder-story__surface {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--bg-primary, #fff);
+}
+
+.form-builder-story__surface--narrow {
+  max-width: 34rem;
+}
+
+.form-builder-story__values {
+  min-width: 0;
+  margin: 0;
+  padding: 0.875rem;
+  border: 1px solid var(--border-color, #e2e8f0);
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--bg-tertiary, #f1f5f9);
+  color: var(--text-secondary, #475569);
+  font-family: var(--font-mono, monospace);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow: auto;
+}
+
+@media (max-width: 900px) {
+  .form-builder-story {
+    grid-template-columns: 1fr;
+    padding: 1rem;
+  }
+}
+</style>