@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.11

package/src/components/BaseModal.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Modal dialog with backdrop, focus trap, Escape-to-close, and configurable size/variant/layout. */
-import { computed, ref, watch, nextTick, onUnmounted, type ComponentPublicInstance } from 'vue'
+import { computed, ref, toRef, watch, onUnmounted, type ComponentPublicInstance } from 'vue'
 import type { ModalLayout, ModalSize, ModalTab, ModalVariant } from '../types'
 import { useEventListener } from '../composables/useEventListener'
+import { useFocusTrap } from '../composables/useFocusTrap'
 
 interface Props {
   modelValue: boolean
@@ -75,47 +76,16 @@ function isPathIcon(icon: ModalTab['icon']): icon is string | string[] {
 }
 
 const containerRef = ref<HTMLElement | null>(null)
-let previouslyFocused: HTMLElement | null = null
 
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-].join(', ')
+useFocusTrap({ containerRef, active: toRef(props, 'modelValue') })
 
-function getFocusableElements(): HTMLElement[] {
-  if (!containerRef.value) return []
-  return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
-    // Roving tabindex (inactive tabs/rail items) stays out of the Tab cycle.
-    .filter((el) => el.tabIndex !== -1)
-}
+watch(() => props.modelValue, (isOpen) => {
+  document.body.style.overflow = isOpen ? 'hidden' : ''
+})
 
-function handleKeydown(event: KeyboardEvent) {
+function handleEscapeKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
     close()
-    return
-  }
-
-  if (event.key !== 'Tab' || !containerRef.value) return
-
-  const focusable = getFocusableElements()
-  if (focusable.length === 0) {
-    event.preventDefault()
-    return
-  }
-
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-
-  if (event.shiftKey && document.activeElement === first) {
-    event.preventDefault()
-    last.focus()
-  } else if (!event.shiftKey && document.activeElement === last) {
-    event.preventDefault()
-    first.focus()
   }
 }
 
@@ -132,25 +102,7 @@ function handleOverlayClick(event: MouseEvent) {
   }
 }
 
-watch(() => props.modelValue, async (isOpen) => {
-  if (isOpen) {
-    previouslyFocused = document.activeElement as HTMLElement | null
-    document.body.style.overflow = 'hidden'
-    await nextTick()
-    const focusable = getFocusableElements()
-    if (focusable.length > 0) {
-      focusable[0].focus()
-    } else {
-      containerRef.value?.focus()
-    }
-  } else {
-    document.body.style.overflow = ''
-    previouslyFocused?.focus()
-    previouslyFocused = null
-  }
-})
-
-useEventListener(() => document, 'keydown', handleKeydown)
+useEventListener(() => document, 'keydown', handleEscapeKeydown)
 
 onUnmounted(() => {
   document.body.style.overflow = ''
@@ -322,7 +274,3 @@ onUnmounted(() => {
     </Transition>
   </Teleport>
 </template>
-
-<style>
-@import '../styles/components/modal.css';
-</style>

package/src/components/BasePill.vue

@@ -83,7 +83,3 @@ function handleRemove(event: MouseEvent) {
     </button>
   </span>
 </template>
-
-<style>
-@import '../styles/components/pill.css';
-</style>

package/src/components/BaseRadioGroup.vue

@@ -122,7 +122,3 @@ function handleChange(value: string | number) {
     </label>
   </div>
 </template>
-
-<style>
-@import '../styles/components/radio-group.css';
-</style>

package/src/components/BaseSelect.vue

@@ -83,7 +83,3 @@ function handleChange(event: Event) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/select.css';
-</style>

package/src/components/BaseSlider.vue

@@ -120,7 +120,3 @@ function handleInput(event: Event) {
     </span>
   </div>
 </template>
-
-<style>
-@import '../styles/components/slider.css';
-</style>

package/src/components/BaseTabs.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Renders a tab bar with underline or pills variant, badges, icons, and disabled tab support. */
-import { computed } from 'vue'
+import { computed, type ComponentPublicInstance } from 'vue'
 import type { TabItem, TabItemInput } from '../types'
 import { normalizeItemInput } from '../utils/items'
+import { useRovingFocus } from '../composables/useRovingFocus'
 
 interface Props {
   modelValue: string
@@ -32,23 +33,47 @@ function selectTab(tabId: string) {
     emit('update:modelValue', tabId)
   }
 }
+
+const tabButtonRefs = new Map<string, HTMLElement>()
+
+function setTabButtonRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    tabButtonRefs.set(id, el)
+  } else {
+    tabButtonRefs.delete(id)
+  }
+}
+
+// Left/Right only — BaseTabs renders a single horizontal strip with no vertical
+// variant, so there is no Up/Down axis to support.
+const { handleKeydown } = useRovingFocus({
+  ids: () => normalizedTabs.value.filter(tab => !tab.disabled).map(tab => tab.id),
+  activeId: () => activeTab.value,
+  activate: selectTab,
+  getElement: (id) => tabButtonRefs.get(id),
+})
 </script>
 
 <template>
   <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
     <button
       v-for="tab in normalizedTabs"
+      :id="`mint-tab-${tab.id}`"
       :key="tab.id"
+      :ref="(el) => setTabButtonRef(tab.id, el)"
       type="button"
       role="tab"
       :aria-selected="activeTab === tab.id"
       :aria-disabled="tab.disabled"
+      :aria-controls="`mint-tabpanel-${tab.id}`"
+      :tabindex="activeTab === tab.id ? 0 : -1"
       :class="[
         'mint-tab',
         activeTab === tab.id ? 'mint-tab--active' : '',
         tab.disabled ? 'mint-tab--disabled' : '',
       ]"
       @click="selectTab(tab.id)"
+      @keydown="handleKeydown"
     >
       <span class="mint-tab__content">
         <svg
@@ -76,7 +101,3 @@ function selectTab(tabId: string) {
     </button>
   </div>
 </template>
-
-<style>
-@import '../styles/components/tabs.css';
-</style>

package/src/components/BaseTextarea.vue

@@ -56,7 +56,3 @@ function handleInput(event: Event) {
     @blur="emit('blur', $event)"
   />
 </template>
-
-<style>
-@import '../styles/components/textarea.css';
-</style>

package/src/components/BaseToggle.vue

@@ -137,7 +137,3 @@ function iconStyle(): Record<string, string> {
     </span>
   </div>
 </template>
-
-<style>
-@import '../styles/components/toggle.css';
-</style>

package/src/components/BatchProgressList.story.vue

@@ -21,6 +21,8 @@ const allCompleted = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     items: mixedItems,
     showSummary: true,
     title: 'Processing Raw Data Files',
@@ -35,6 +37,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 500px;">
           <BatchProgressList
+            :loading="state.loading"
+            :error="state.error || null"
             :items="state.items"
             :show-summary="state.showSummary"
             :title="state.title"
@@ -45,6 +49,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.showSummary" title="Show Summary" />
         <HstText v-model="state.title" title="Title" />
         <HstCheckbox v-model="state.autoScroll" title="Auto Scroll" />
@@ -88,5 +94,17 @@ function initState() {
         />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BatchProgressList :items="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BatchProgressList :items="[]" error="Could not load the batch." />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/BatchProgressList.vue

@@ -3,6 +3,7 @@
 import { computed, ref, watch, nextTick } from 'vue'
 import type { BatchItem, BatchSummary } from '../types'
 import { useExpansionSet } from '../composables/useExpansionSet'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   items: BatchItem[]
@@ -10,11 +11,23 @@ interface Props {
   title?: string
   maxHeight?: string
   autoScroll?: boolean
+  /** Replace the item list with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the item list is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /** Empty-state headline shown when there are no batch items. */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showSummary: true,
   autoScroll: true,
+  loading: false,
+  error: null,
+  emptyMessage: 'No items in this batch',
 })
 
 const emit = defineEmits<{
@@ -91,7 +104,26 @@ watch(
       </div>
     </slot>
 
+    <div v-if="error" class="mint-batch-progress__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-batch-progress__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading batch" />
+      </slot>
+    </div>
+
+    <div v-else-if="items.length === 0" class="mint-batch-progress__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+      </slot>
+    </div>
+
     <div
+      v-else
       ref="listRef"
       class="mint-batch-progress__list"
       :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
@@ -175,7 +207,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/batch-progress-list.css';
-</style>

package/src/components/BioTemplateExperimentWorkspaceView.vue

@@ -19,6 +19,7 @@ import {
   type BioTemplateComponentPropsLookupOptions,
   type TemplateCollectionEnvelope,
 } from '../templates'
+import { bioTemplateExperimentWorkspaceProps } from '../composables/workspaceRecipes'
 import AlertBox from './AlertBox.vue'
 import BaseButton from './BaseButton.vue'
 import BioTemplateRenderer from './BioTemplateRenderer.vue'
@@ -114,27 +115,15 @@ const statusMessage = computed(() => {
   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,
-)
+// Thin recipe over bioTemplateExperimentWorkspaceProps(): merges the grouped `status` prop
+// over the individual loading/error/experiment props (see workspaceRecipes.ts).
+const resolvedStatus = computed(() => bioTemplateExperimentWorkspaceProps(props))
+const resolvedLoading = computed(() => resolvedStatus.value.loading)
+const resolvedError = computed(() => resolvedStatus.value.error)
+const resolvedHasExperiment = computed(() => resolvedStatus.value.hasExperiment)
+const resolvedCurrentExperimentId = computed(() => resolvedStatus.value.currentExperimentId)
+const resolvedLastLoadedAt = computed(() => resolvedStatus.value.lastLoadedAt)
+const resolvedLastSavedAt = computed(() => resolvedStatus.value.lastSavedAt)
 
 const templateSummaries = computed(() =>
   Object.values(extractTemplateCollection(props.target)).map(template => ({

package/src/components/BioTemplatePackWorkspaceView.vue

@@ -14,6 +14,7 @@ import type {
   UseBioTemplatePackWorkspaceReturn,
 } from '../composables/useBioTemplatePackWorkspace'
 import { useBioTemplatePackWorkspace } from '../composables/useBioTemplatePackWorkspace'
+import { bioTemplatePackWorkspaceProps } from '../composables/workspaceRecipes'
 import BioTemplateExperimentWorkspaceView from './BioTemplateExperimentWorkspaceView.vue'
 
 interface BioTemplatePackWorkspaceSlotProps {
@@ -140,6 +141,15 @@ const resolvedActions = computed<PackWorkspaceActions>(() => ({
   save: props.actions?.save ?? (() => resolvedWorkspace.value.saveCurrent()),
 }))
 
+// Thin recipe over bioTemplatePackWorkspaceProps(): forwards this view's own display props
+// plus the pack-derived target/label/status/actions to BioTemplateExperimentWorkspaceView.
+const experimentWorkspaceRecipe = computed(() => bioTemplatePackWorkspaceProps(props, {
+  target: target.value,
+  label: label.value,
+  status: resolvedStatus.value,
+  actions: resolvedActions.value,
+}))
+
 watch(
   [() => props.pack, () => props.workspaceOptions],
   () => {
@@ -152,21 +162,7 @@ onScopeDispose(() => generatedWorkspaceScope?.stop())
 </script>
 
 <template>
-  <BioTemplateExperimentWorkspaceView
-    :target="target"
-    kind="collection"
-    :label="label"
-    :message="message"
-    :status="resolvedStatus"
-    :actions="resolvedActions"
-    :dense="dense"
-    :readonly="readonly"
-    :show-status="showStatus"
-    :show-template-summary="showTemplateSummary"
-    :load-label="loadLabel"
-    :reset-label="resetLabel"
-    :save-label="saveLabel"
-  >
+  <BioTemplateExperimentWorkspaceView v-bind="experimentWorkspaceRecipe">
     <template v-if="hasDefaultSlot" #default="slotProps">
       <slot
         v-bind="slotProps"

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -14,6 +14,7 @@ import type {
   UseBioTemplatePresetWorkspaceReturn,
 } from '../composables/useBioTemplatePresetWorkspace'
 import { useBioTemplatePresetWorkspace } from '../composables/useBioTemplatePresetWorkspace'
+import { bioTemplatePresetWorkspaceProps } from '../composables/workspaceRecipes'
 import AlertBox from './AlertBox.vue'
 import AppSidebar from './AppSidebar.vue'
 import BaseButton from './BaseButton.vue'
@@ -96,19 +97,13 @@ const props = withDefaults(defineProps<Props>(), {
   resetLabel: 'Reset defaults',
 })
 
-const externalValues = computed(() => props.modelValue ?? props.values)
-const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() => {
-  if (props.initialValues === undefined && externalValues.value === undefined) return props.workspaceOptions
-
-  return {
-    ...props.workspaceOptions,
-    initialValues: {
-      ...(props.workspaceOptions.initialValues ?? {}),
-      ...(props.initialValues ?? {}),
-      ...(externalValues.value ?? {}),
-    },
-  }
-})
+// Thin recipe over bioTemplatePresetWorkspaceProps(): merges workspaceOptions/initialValues/
+// v-model into the options useBioTemplatePresetWorkspace() consumes (see workspaceRecipes.ts).
+const resolvedPresetProps = computed(() => bioTemplatePresetWorkspaceProps(props))
+const externalValues = computed(() => resolvedPresetProps.value.externalValues)
+const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() =>
+  resolvedPresetProps.value.resolvedWorkspaceOptions
+)
 
 let generatedWorkspaceScope: EffectScope | undefined
 

package/src/components/Breadcrumb.vue

@@ -75,7 +75,3 @@ function handleClick(item: BreadcrumbItem) {
     </ol>
   </nav>
 </template>
-
-<style>
-@import '../styles/components/breadcrumb.css';
-</style>

package/src/components/Calendar.vue

@@ -361,7 +361,3 @@ function nextMonth() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/calendar.css';
-</style>

package/src/components/ChartContainer.story.vue

@@ -75,7 +75,7 @@ import ChartContainer from './ChartContainer.vue'
               <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer;">
                 Linear
               </button>
-              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--mint-primary, #3B82F6); border-radius: 0.375rem; background: var(--mint-primary, #3B82F6); color: #fff; cursor: pointer;">
+              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--color-primary); border-radius: 0.375rem; background: var(--color-primary); color: #fff; cursor: pointer;">
                 Log
               </button>
             </div>

package/src/components/ChartContainer.vue

@@ -58,7 +58,3 @@ withDefaults(defineProps<Props>(), {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/chart-container.css';
-</style>

package/src/components/ChemicalFormula.vue

@@ -33,7 +33,3 @@ function getParts(f: string): FormulaPart[] {
     </template>
   </component>
 </template>
-
-<style>
-@import '../styles/components/chemical-formula.css';
-</style>

package/src/components/CollapsibleCard.vue

@@ -239,7 +239,3 @@ function handleActionClick(action: SidebarToolSectionAction) {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/collapsible-card.css';
-</style>

package/src/components/ColorSlider.vue

@@ -158,7 +158,3 @@ function handleInput(event: Event) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/color-slider.css';
-</style>

package/src/components/ComponentBindingRenderer.vue

@@ -16,6 +16,7 @@ import ReagentList from './ReagentList.vue'
 import SampleSelector from './SampleSelector.vue'
 import ScheduleCalendar from './ScheduleCalendar.vue'
 import WellPlate from './WellPlate.vue'
+import { isRecord } from '../utils/records'
 
 export interface ComponentBindingRendererBinding {
   id?: string
@@ -173,9 +174,6 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
   }
 }
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value)
-}
 </script>
 
 <template>

package/src/components/ConcentrationInput.vue

@@ -143,7 +143,3 @@ watch(availableUnits, (units) => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/concentration-input.css';
-</style>

package/src/components/ConfirmDialog.vue

@@ -94,7 +94,3 @@ const confirmVariant = computed<ButtonVariant>(() => {
     </template>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/confirm-dialog.css';
-</style>

package/src/components/ControlWorkspaceView.vue

@@ -20,7 +20,8 @@ import type {
   ControlWorkspaceOptions,
   UseControlWorkspaceReturn,
 } from '../composables/useControlSchema'
-import { mergeControlWorkspaceOptions, resolveControlModel, useControlWorkspace } from '../composables/useControlSchema'
+import { useControlWorkspace } from '../composables/useControlSchema'
+import { controlWorkspaceProps } from '../composables/workspaceRecipes'
 import AppLayout from './AppLayout.vue'
 import AppSidebar from './AppSidebar.vue'
 import AppTopBar from './AppTopBar.vue'
@@ -161,27 +162,15 @@ const props = withDefaults(defineProps<Props>(), {
   formSize: 'md',
 })
 
-const externalValues = computed(() => props.modelValue ?? props.values)
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-const resolvedControls = computed<ControlSchema>(() => props.controls ?? resolvedModel.value?.controls ?? {})
-const baseControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
-)
-
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() => {
-  if (props.initialValues === undefined && externalValues.value === undefined) return baseControlOptions.value
-
-  return {
-    ...baseControlOptions.value,
-    initialValues: {
-      ...(baseControlOptions.value.initialValues ?? {}),
-      ...(props.initialValues ?? {}),
-      ...(externalValues.value ?? {}),
-    },
-  }
-})
+// Thin recipe over controlWorkspaceProps(): resolves model/controls/controlOptions/v-model
+// into the schema + options pair useControlWorkspace() consumes, shared with
+// DoseDesignWorkspaceView (which forwards its own props here) and
+// BioTemplatePresetWorkspaceView's equivalent options merge.
+const resolvedWorkspaceModel = computed(() => controlWorkspaceProps(props))
+const externalValues = computed(() => resolvedWorkspaceModel.value.externalValues)
+const resolvedModel = computed(() => resolvedWorkspaceModel.value.resolvedModel)
+const resolvedControls = computed(() => resolvedWorkspaceModel.value.resolvedControls)
+const resolvedControlOptions = computed(() => resolvedWorkspaceModel.value.resolvedControlOptions)
 
 let generatedWorkspaceScope: EffectScope | undefined
 

package/src/components/DataFrame.story.vue

@@ -37,6 +37,7 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
           <DataFrame
+            :error="state.error || null"
             :data="data"
             :columns="columns"
             row-key="id"
@@ -55,6 +56,8 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
       </template>
 
       <template #controls="{ state }">
+
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.size"
           title="Size"
@@ -144,5 +147,16 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
         />
       </div>
     </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :data="data"
+          :columns="columns"
+          row-key="id"
+          error="Could not load the result table."
+        />
+      </div>
+    </Variant>
   </Story>
 </template>