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

package/src/components/BaseModal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Modal dialog with backdrop, focus trap, Escape-to-close, and configurable size/variant. */
-import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { ref, watch, nextTick, onUnmounted } from 'vue'
 import type { ModalSize, ModalVariant } from '../types'
+import { useEventListener } from '../composables/useEventListener'
 
 interface Props {
   modelValue: boolean
@@ -101,12 +102,9 @@ watch(() => props.modelValue, async (isOpen) => {
   }
 })
 
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
+useEventListener(() => document, 'keydown', handleKeydown)
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
   document.body.style.overflow = ''
 })
 </script>

package/src/components/BaseRadioGroup.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 /** Renders a group of radio buttons in list or tile layout, horizontal or vertical. */
-import type { RadioOption } from '../types'
+import { computed } from 'vue'
+import type { RadioOption, RadioOptionInput } from '../types'
+import { normalizeOptionInput } from '../utils/options'
 
 interface Props {
   modelValue?: string | number
-  options: RadioOption[]
+  options: RadioOptionInput[]
   name: string
   disabled?: boolean
   direction?: 'horizontal' | 'vertical'
@@ -23,6 +25,8 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | number]
 }>()
 
+const normalizedOptions = computed<RadioOption[]>(() => props.options.map(normalizeOptionInput))
+
 function handleChange(value: string | number) {
   emit('update:modelValue', value)
 }
@@ -34,7 +38,7 @@ function handleChange(value: string | number) {
     role="radiogroup"
   >
     <label
-      v-for="option in props.options"
+      v-for="option in normalizedOptions"
       :key="String(option.value)"
       :class="[
         'mint-radio-option',

package/src/components/BaseSelect.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 /** Renders a native `<select>` element with size, error, and disabled states. */
-import type { SelectOption } from '../types'
+import { computed } from 'vue'
+import type { SelectOption, SelectOptionInput } from '../types'
+import { findOptionByDomValue, normalizeOptionInput } from '../utils/options'
 
 interface Props {
   modelValue?: string | number
-  options: SelectOption<string | number>[]
+  options: SelectOptionInput<string | number>[]
   placeholder?: string
   disabled?: boolean
   error?: boolean
@@ -22,12 +24,14 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | number]
 }>()
 
+const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
+  props.options.map(normalizeOptionInput)
+)
+
 function handleChange(event: Event) {
   const target = event.target as HTMLSelectElement
-  const value = typeof props.modelValue === 'number'
-    ? Number(target.value)
-    : target.value
-  emit('update:modelValue', value)
+  const option = findOptionByDomValue(normalizedOptions.value, target.value)
+  emit('update:modelValue', option?.value ?? target.value)
 }
 </script>
 
@@ -50,7 +54,7 @@ function handleChange(event: Event) {
         {{ placeholder }}
       </option>
       <option
-        v-for="option in options"
+        v-for="option in normalizedOptions"
         :key="String(option.value)"
         :value="option.value"
         :disabled="option.disabled"

package/src/components/BaseTabs.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 /** Renders a tab bar with underline or pills variant, badges, icons, and disabled tab support. */
 import { computed } from 'vue'
-import type { TabItem } from '../types'
+import type { TabItem, TabItemInput } from '../types'
+import { normalizeItemInput } from '../utils/items'
 
 interface Props {
   modelValue: string
-  tabs: TabItem[]
+  tabs: TabItemInput[]
   variant?: 'underline' | 'pills'
 }
 
@@ -18,9 +19,10 @@ const emit = defineEmits<{
 }>()
 
 const activeTab = computed(() => props.modelValue)
+const normalizedTabs = computed<TabItem[]>(() => props.tabs.map(normalizeItemInput))
 
 function selectTab(tabId: string) {
-  const tab = props.tabs.find(t => t.id === tabId)
+  const tab = normalizedTabs.value.find(t => t.id === tabId)
   if (tab && !tab.disabled) {
     emit('update:modelValue', tabId)
   }
@@ -30,7 +32,7 @@ function selectTab(tabId: string) {
 <template>
   <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
     <button
-      v-for="tab in tabs"
+      v-for="tab in normalizedTabs"
       :key="tab.id"
       type="button"
       role="tab"

package/src/components/BatchProgressList.vue

@@ -2,6 +2,7 @@
 /** Scrollable list tracking per-item status for a batch operation with overall progress summary. */
 import { computed, ref, watch, nextTick } from 'vue'
 import type { BatchItem, BatchSummary } from '../types'
+import { useExpansionSet } from '../composables/useExpansionSet'
 
 interface Props {
   items: BatchItem[]
@@ -22,7 +23,7 @@ const emit = defineEmits<{
 }>()
 
 const listRef = ref<HTMLElement | null>(null)
-const expandedErrors = ref<Set<string>>(new Set())
+const errorExpansion = useExpansionSet()
 
 const summary = computed<BatchSummary>(() => {
   const total = props.items.length
@@ -36,11 +37,7 @@ const summary = computed<BatchSummary>(() => {
 })
 
 function toggleError(id: string) {
-  if (expandedErrors.value.has(id)) {
-    expandedErrors.value.delete(id)
-  } else {
-    expandedErrors.value.add(id)
-  }
+  errorExpansion.toggle(id)
 }
 
 watch(
@@ -167,9 +164,9 @@ watch(
               class="mint-batch-progress__error-toggle"
               @click.stop="toggleError(item.id)"
             >
-              {{ expandedErrors.has(item.id) ? 'Hide error' : 'Show error' }}
+              {{ errorExpansion.isExpanded(item.id) ? 'Hide error' : 'Show error' }}
             </button>
-            <div v-if="expandedErrors.has(item.id)" class="mint-batch-progress__item-message">
+            <div v-if="errorExpansion.isExpanded(item.id)" class="mint-batch-progress__item-message">
               {{ item.message }}
             </div>
           </div>

package/src/components/BioTemplateExperimentWorkspaceView.story.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BioTemplateExperimentWorkspaceView from './BioTemplateExperimentWorkspaceView.vue'
+import DoseCalculator from './DoseCalculator.vue'
+import WellPlate from './WellPlate.vue'
+import {
+  createWellPlateScreenCollection,
+  createPlateMapTemplate,
+} from '../templates'
+
+const collection = createWellPlateScreenCollection()
+const template = createPlateMapTemplate()
+const error = ref<string | null>(null)
+
+function initState() {
+  return {
+    target: 'collection',
+    hasExperiment: true,
+    showTemplateSummary: true,
+    dense: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Templates/BioTemplateExperimentWorkspaceView" :init-state="initState">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; min-height: 680px; background: var(--bg-primary, #f8fafc);">
+          <BioTemplateExperimentWorkspaceView
+            :target="state.target === 'template' ? template : collection"
+            :kind="state.target === 'template' ? 'template' : 'collection'"
+            :label="state.target === 'template' ? 'Plate Map' : 'Wellplate Screen'"
+            :has-experiment="state.hasExperiment"
+            :current-experiment-id="state.hasExperiment ? 42 : undefined"
+            :error="error"
+            :show-template-summary="state.showTemplateSummary"
+            :dense="state.dense"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.target"
+          title="Target"
+          :options="[
+            { label: 'Collection', value: 'collection' },
+            { label: 'Template', value: 'template' },
+          ]"
+        />
+        <HstCheckbox v-model="state.hasExperiment" title="Has experiment" />
+        <HstCheckbox v-model="state.showTemplateSummary" title="Template summary" />
+        <HstCheckbox v-model="state.dense" title="Dense" />
+      </template>
+    </Variant>
+
+    <Variant title="Component Props">
+      <div style="padding: 2rem; min-height: 680px; background: var(--bg-primary, #f8fafc);">
+        <BioTemplateExperimentWorkspaceView
+          :target="collection"
+          kind="collection"
+          label="Wellplate Screen"
+          :has-experiment="true"
+          :current-experiment-id="42"
+          :show-template-summary="false"
+          v-slot="{ bindings }"
+        >
+          <div class="experiment-component-layout">
+            <div class="experiment-component-panel experiment-component-panel--plate">
+              <WellPlate
+                v-bind="bindings.componentPropsById['plate-map:WellPlate']"
+                size="sm"
+                readonly
+              />
+            </div>
+            <div class="experiment-component-panel experiment-component-panel--dose">
+              <DoseCalculator
+                v-bind="bindings.componentPropsById['dose-response:DoseCalculator']"
+              />
+            </div>
+          </div>
+        </BioTemplateExperimentWorkspaceView>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.experiment-component-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
+  gap: 1rem;
+  align-items: start;
+  min-width: 0;
+}
+
+.experiment-component-panel {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg, 0.75rem);
+  background: var(--bg-primary);
+}
+
+.experiment-component-panel--plate {
+  overflow-x: auto;
+}
+
+.experiment-component-panel--dose {
+  max-width: 24rem;
+}
+
+@media (max-width: 960px) {
+  .experiment-component-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .experiment-component-panel--dose {
+    max-width: none;
+  }
+}
+</style>

package/src/components/BioTemplateExperimentWorkspaceView.vue

@@ -0,0 +1,337 @@
+<script setup lang="ts">
+/** Current-experiment template workspace with load/save/reset controls and WellPlate/DataFrame/DoseCalculator previews. */
+import { computed } from 'vue'
+import {
+  extractTemplateCollection,
+  getBioTemplateComponentProps,
+  toBioTemplateComponentProps,
+  toBioTemplateComponentPropsByComponent,
+  toBioTemplateComponentPropsById,
+  type BioTemplateEnvelope,
+  type BioTemplateComponentPropsLookupOptions,
+  type TemplateCollectionEnvelope,
+} from '../templates'
+import AlertBox from './AlertBox.vue'
+import BaseButton from './BaseButton.vue'
+import BioTemplateRenderer from './BioTemplateRenderer.vue'
+
+type BioTemplateWorkspaceTarget = BioTemplateEnvelope<unknown> | TemplateCollectionEnvelope
+type WorkspaceKind = 'template' | 'collection'
+
+interface TemplateWorkspaceStatus {
+  loading?: boolean
+  saving?: boolean
+  error?: string | null
+  hasExperiment?: boolean
+  currentExperimentId?: number
+  lastLoadedAt?: Date | null
+  lastSavedAt?: Date | null
+}
+
+interface TemplateWorkspaceActions {
+  load?: () => unknown
+  reset?: () => unknown
+  save?: () => unknown
+}
+
+interface Props {
+  /** Template envelope or template collection shown in BioTemplateRenderer. */
+  target: BioTemplateWorkspaceTarget
+  /** Human-readable workspace label. */
+  label: string
+  /** Grouped request and current-experiment state for generated plugin pages. */
+  status?: TemplateWorkspaceStatus
+  /** Grouped load/reset/save handlers for generated plugin pages. */
+  actions?: TemplateWorkspaceActions
+  /** Copy shown in the status banner. */
+  message?: string
+  /** Whether the load/save request is active. */
+  loading?: boolean
+  /** Current request error. */
+  error?: string | null
+  /** Whether a current experiment id is available. */
+  hasExperiment?: boolean
+  /** Current experiment id displayed in the footer. */
+  currentExperimentId?: number
+  /** Last successful load timestamp. */
+  lastLoadedAt?: Date | null
+  /** Last successful save timestamp. */
+  lastSavedAt?: Date | null
+  /** Template vs collection copy defaults. */
+  kind?: WorkspaceKind
+  /** Compact preview layout. */
+  dense?: boolean
+  /** Render preview components in read-only mode. */
+  readonly?: boolean
+  /** Show load/save timestamps. */
+  showStatus?: boolean
+  /** Show template id/version cards for collection targets. */
+  showTemplateSummary?: boolean
+  loadLabel?: string
+  resetLabel?: string
+  saveLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: undefined,
+  actions: undefined,
+  message: undefined,
+  loading: false,
+  error: null,
+  hasExperiment: false,
+  currentExperimentId: undefined,
+  lastLoadedAt: null,
+  lastSavedAt: null,
+  kind: 'template',
+  dense: true,
+  readonly: true,
+  showStatus: true,
+  showTemplateSummary: false,
+  loadLabel: 'Load',
+  resetLabel: 'Reset defaults',
+  saveLabel: 'Save',
+})
+
+const emit = defineEmits<{
+  load: []
+  reset: []
+  save: []
+}>()
+
+const statusMessage = computed(() => {
+  if (props.message) return props.message
+  if (props.kind === 'collection') {
+    return `${props.label} saves the full template collection to the current experiment.`
+  }
+  return `${props.label} template data saves to experiment design_data.`
+})
+
+const resolvedLoading = computed(() => {
+  if (props.status?.loading !== undefined || props.status?.saving !== undefined) {
+    return Boolean(props.status.loading) || Boolean(props.status.saving)
+  }
+  return props.loading
+})
+const resolvedError = computed(() =>
+  props.status?.error !== undefined ? props.status.error : props.error,
+)
+const resolvedHasExperiment = computed(() =>
+  props.status?.hasExperiment ?? props.hasExperiment,
+)
+const resolvedCurrentExperimentId = computed(() =>
+  props.status?.currentExperimentId ?? props.currentExperimentId,
+)
+const resolvedLastLoadedAt = computed(() =>
+  props.status?.lastLoadedAt !== undefined ? props.status.lastLoadedAt : props.lastLoadedAt,
+)
+const resolvedLastSavedAt = computed(() =>
+  props.status?.lastSavedAt !== undefined ? props.status.lastSavedAt : props.lastSavedAt,
+)
+
+const templateSummaries = computed(() =>
+  Object.values(extractTemplateCollection(props.target)).map(template => ({
+    id: String(template.template_id),
+    version: String(template.template_version ?? 'unknown'),
+  }))
+)
+const componentProps = computed(() => toBioTemplateComponentProps(props.target))
+const componentPropsById = computed(() => toBioTemplateComponentPropsById(props.target))
+const componentPropsByComponent = computed(() => toBioTemplateComponentPropsByComponent(props.target))
+const renderer = computed(() => ({ target: props.target }))
+
+function getComponentProps(component: string, options?: BioTemplateComponentPropsLookupOptions) {
+  return getBioTemplateComponentProps(props.target, component, options)
+}
+
+interface BioTemplateExperimentWorkspaceBindings {
+  renderer: { target: BioTemplateWorkspaceTarget }
+  componentProps: ReturnType<typeof toBioTemplateComponentProps>
+  componentPropsById: ReturnType<typeof toBioTemplateComponentPropsById>
+  componentPropsByComponent: ReturnType<typeof toBioTemplateComponentPropsByComponent>
+  getComponentProps: typeof getComponentProps
+}
+
+const bindings = computed<BioTemplateExperimentWorkspaceBindings>(() => ({
+  renderer: renderer.value,
+  componentProps: componentProps.value,
+  componentPropsById: componentPropsById.value,
+  componentPropsByComponent: componentPropsByComponent.value,
+  getComponentProps,
+}))
+
+interface BioTemplateExperimentWorkspaceSlotProps {
+  target: BioTemplateWorkspaceTarget
+  bindings: BioTemplateExperimentWorkspaceBindings
+  componentProps: ReturnType<typeof toBioTemplateComponentProps>
+  componentPropsById: ReturnType<typeof toBioTemplateComponentPropsById>
+  componentPropsByComponent: ReturnType<typeof toBioTemplateComponentPropsByComponent>
+  getComponentProps: typeof getComponentProps
+}
+
+defineSlots<{
+  default?: (props: BioTemplateExperimentWorkspaceSlotProps) => unknown
+}>()
+
+function handleLoad() {
+  if (props.actions?.load) {
+    return props.actions.load()
+  }
+  emit('load')
+}
+
+function handleReset() {
+  if (props.actions?.reset) {
+    return props.actions.reset()
+  }
+  emit('reset')
+}
+
+function handleSave() {
+  if (props.actions?.save) {
+    return props.actions.save()
+  }
+  emit('save')
+}
+</script>
+
+<template>
+  <div class="mint-bio-template-experiment-workspace">
+    <div class="mint-bio-template-experiment-workspace__toolbar">
+      <AlertBox type="info" class="mint-bio-template-experiment-workspace__status">
+        {{ statusMessage }}
+      </AlertBox>
+
+      <div class="mint-bio-template-experiment-workspace__actions">
+        <BaseButton
+          variant="secondary"
+          :loading="resolvedLoading"
+          :disabled="!resolvedHasExperiment"
+          @click="handleLoad"
+        >
+          {{ loadLabel }}
+        </BaseButton>
+        <BaseButton variant="secondary" :loading="resolvedLoading" @click="handleReset">
+          {{ resetLabel }}
+        </BaseButton>
+        <BaseButton
+          variant="primary"
+          :loading="resolvedLoading"
+          :disabled="!resolvedHasExperiment"
+          @click="handleSave"
+        >
+          {{ saveLabel }}
+        </BaseButton>
+      </div>
+    </div>
+
+    <AlertBox v-if="resolvedError" type="error">
+      {{ resolvedError }}
+    </AlertBox>
+
+    <p v-if="showStatus" class="mint-bio-template-experiment-workspace__meta">
+      loaded: {{ resolvedLastLoadedAt?.toLocaleString() ?? 'not loaded' }} -
+      saved: {{ resolvedLastSavedAt?.toLocaleString() ?? 'not saved' }}
+    </p>
+
+    <div
+      v-if="showTemplateSummary"
+      class="mint-bio-template-experiment-workspace__templates"
+    >
+      <div
+        v-for="template in templateSummaries"
+        :key="template.id"
+        class="mint-bio-template-experiment-workspace__template"
+      >
+        <p class="mint-bio-template-experiment-workspace__template-id">
+          {{ template.id }}
+        </p>
+        <p class="mint-bio-template-experiment-workspace__template-version">
+          v{{ template.version }}
+        </p>
+      </div>
+    </div>
+
+    <slot
+      :target="target"
+      :bindings="bindings"
+      :component-props="componentProps"
+      :component-props-by-id="componentPropsById"
+      :component-props-by-component="componentPropsByComponent"
+      :get-component-props="getComponentProps"
+    >
+      <BioTemplateRenderer
+        :target="target"
+        :dense="dense"
+        :readonly="readonly"
+      />
+    </slot>
+
+    <p class="mint-bio-template-experiment-workspace__meta">
+      experiment: {{ resolvedCurrentExperimentId ?? 'not selected' }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.mint-bio-template-experiment-workspace {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.mint-bio-template-experiment-workspace__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.mint-bio-template-experiment-workspace__status {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mint-bio-template-experiment-workspace__actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 0.5rem;
+}
+
+.mint-bio-template-experiment-workspace__meta,
+.mint-bio-template-experiment-workspace__template-version {
+  margin: 0;
+  color: var(--text-secondary, #64748b);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.75rem;
+}
+
+.mint-bio-template-experiment-workspace__templates {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: 0.75rem;
+}
+
+.mint-bio-template-experiment-workspace__template {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 0.5rem;
+  background: var(--bg-primary, #ffffff);
+}
+
+.mint-bio-template-experiment-workspace__template-id {
+  margin: 0;
+  color: var(--text-primary, #0f172a);
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 48rem) {
+  .mint-bio-template-experiment-workspace__toolbar,
+  .mint-bio-template-experiment-workspace__actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>