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

package/src/components/SecretInput.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+/** Edits one plugin secret setting: shows set / not set / provided by environment, and submits a `$secret` reference, a new value, or `null`. */
+import { computed, ref, watch } from 'vue'
+import BaseInput from './BaseInput.vue'
+import BaseButton from './BaseButton.vue'
+import {
+  clearPluginSecret,
+  isPluginSecretLocked,
+  isPluginSecretRef,
+  keepPluginSecret,
+  pluginSecretLabel,
+  pluginSecretState,
+  setPluginSecret,
+  type PluginSecretRef,
+  type PluginSecretState,
+} from '../utils/pluginSecrets'
+
+type SecretValue = PluginSecretRef | string | null
+
+interface Props {
+  /** The `$secret` marker from the settings response, a typed string, or `null`. */
+  modelValue?: SecretValue
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  /** Label on the control that starts entering a replacement value. */
+  changeLabel?: string
+  /** Label on the control that clears a stored secret. */
+  clearLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: 'Enter a new value',
+  disabled: false,
+  error: false,
+  size: 'md',
+  changeLabel: 'Change',
+  clearLabel: 'Clear',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: SecretValue]
+}>()
+
+/** The reference this field started from, so an abandoned edit can restore it. */
+const storedReference = ref<PluginSecretRef | null>(keepPluginSecret(props.modelValue))
+const isEditing = ref(typeof props.modelValue === 'string')
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (isPluginSecretRef(value)) {
+      storedReference.value = keepPluginSecret(value)
+      isEditing.value = false
+    }
+  },
+)
+
+const state = computed<PluginSecretState>(() => pluginSecretState(props.modelValue))
+const locked = computed(() => isPluginSecretLocked(props.modelValue)
+  || isPluginSecretLocked(storedReference.value))
+const statusLabel = computed(() => isEditing.value
+  ? 'New value'
+  : pluginSecretLabel(props.modelValue))
+const typedValue = computed(() => typeof props.modelValue === 'string' ? props.modelValue : '')
+const canClear = computed(() => !locked.value && (state.value === 'set' || isEditing.value))
+
+function startEditing(): void {
+  if (props.disabled || locked.value) return
+  isEditing.value = true
+  emit('update:modelValue', setPluginSecret(''))
+}
+
+function updateTyped(value: string | number | null): void {
+  emit('update:modelValue', setPluginSecret(value == null ? '' : String(value)))
+}
+
+function cancelEditing(): void {
+  isEditing.value = false
+  emit('update:modelValue', storedReference.value ? { ...storedReference.value } : null)
+}
+
+function clear(): void {
+  if (props.disabled || locked.value) return
+  isEditing.value = false
+  storedReference.value = null
+  emit('update:modelValue', clearPluginSecret())
+}
+</script>
+
+<template>
+  <div class="mint-secret-input" :class="{ 'mint-secret-input--error': error }">
+    <div class="mint-secret-input__status">
+      <span
+        class="mint-secret-input__badge"
+        :class="`mint-secret-input__badge--${isEditing ? 'pending' : state}`"
+      >{{ statusLabel }}</span>
+      <span v-if="locked" class="mint-secret-input__hint">
+        This value comes from the environment and cannot be edited here.
+      </span>
+    </div>
+
+    <BaseInput
+      v-if="isEditing"
+      type="password"
+      autocomplete="new-password"
+      :model-value="typedValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :error="error"
+      :size="size"
+      @update:model-value="updateTyped"
+    />
+
+    <div class="mint-secret-input__actions">
+      <BaseButton
+        v-if="!isEditing"
+        type="button"
+        variant="secondary"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled || locked"
+        @click="startEditing"
+      >
+        {{ changeLabel }}
+      </BaseButton>
+      <BaseButton
+        v-else
+        type="button"
+        variant="ghost"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled"
+        @click="cancelEditing"
+      >
+        Cancel
+      </BaseButton>
+      <BaseButton
+        v-if="canClear"
+        type="button"
+        variant="ghost"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled"
+        @click="clear"
+      >
+        {{ clearLabel }}
+      </BaseButton>
+    </div>
+  </div>
+</template>

package/src/components/SectionCard.vue

@@ -92,7 +92,3 @@ const cardClasses = computed(() => [
     </div>
   </section>
 </template>
-
-<style>
-@import '../styles/components/section-card.css';
-</style>

package/src/components/SegmentedControl.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Renders a segmented button group for single-option selection, with simple or solid variants. */
-import { computed } from 'vue'
+import { computed, type ComponentPublicInstance } from 'vue'
 import type { SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
+import { useRovingFocus } from '../composables/useRovingFocus'
 
 interface Props {
   modelValue: string | number
@@ -42,11 +43,55 @@ function handleSelect(option: SegmentedOption) {
   emit('update:modelValue', option.value)
 }
 
+// Roving tabindex over the radio group: only the checked option is tabbable and
+// Left/Right (plus Home/End) move between the selectable options, matching BaseTabs.
+const optionRefs = new Map<string, HTMLElement>()
+
+function optionId(option: SegmentedOption): string {
+  return String(option.value)
+}
+
+function setOptionRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    optionRefs.set(id, el)
+  } else {
+    optionRefs.delete(id)
+  }
+}
+
+const selectableOptions = computed(() =>
+  normalizedOptions.value.filter(option => !isSelectionDisabled(option)),
+)
+
+/** The one option carrying `tabindex="0"`: the checked one, else the first selectable. */
+const tabbableId = computed(() => {
+  const checked = selectableOptions.value.find(option => option.value === props.modelValue)
+  const target = checked ?? selectableOptions.value[0]
+  return target ? optionId(target) : ''
+})
+
+function isTabbable(option: SegmentedOption): boolean {
+  return optionId(option) === tabbableId.value
+}
+
+const { handleKeydown: handleArrowKeydown } = useRovingFocus({
+  ids: () => selectableOptions.value.map(optionId),
+  activeId: () => tabbableId.value,
+  activate: (id) => {
+    const option = selectableOptions.value.find(candidate => optionId(candidate) === id)
+    if (option) handleSelect(option)
+  },
+  getElement: (id) => optionRefs.get(id),
+  orientation: 'horizontal',
+})
+
 function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
   if (event.key === 'Enter' || event.key === ' ') {
     event.preventDefault()
     handleSelect(option)
+    return
   }
+  handleArrowKeydown(event)
 }
 </script>
 
@@ -64,9 +109,11 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
     <button
       v-for="option in normalizedOptions"
       :key="String(option.value)"
+      :ref="(el) => setOptionRef(String(option.value), el)"
       type="button"
       role="radio"
       :aria-checked="modelValue === option.value"
+      :tabindex="isTabbable(option) ? 0 : -1"
       :disabled="isSelectionDisabled(option)"
       :class="[
         'mint-segmented-control__option',
@@ -88,7 +135,3 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
     </button>
   </div>
 </template>
-
-<style>
-@import '../styles/components/segmented-control.css';
-</style>

package/src/components/SequenceInput.vue

@@ -203,7 +203,3 @@ function getBaseClass(char: string): string {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sequence-input.css';
-</style>

package/src/components/SequenceProgressBar.story.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import SequenceProgressBar from './SequenceProgressBar.vue'
+import type { SequenceProgress } from '../types'
+
+const running: SequenceProgress = {
+  sequence_name: 'HILIC-neg-2026-09-05',
+  current_sample: 37,
+  total_samples: 96,
+  elapsed_seconds: 4_260,
+  estimated_remaining_seconds: 6_780,
+  avg_sample_seconds: 115,
+  current_sample_name: 'PLASMA_QC_04',
+  current_method: 'HILIC_neg_12min',
+}
+
+const almostDone: SequenceProgress = {
+  ...running,
+  current_sample: 94,
+  estimated_remaining_seconds: 230,
+}
+
+const finished: SequenceProgress = {
+  ...running,
+  current_sample: 96,
+  estimated_remaining_seconds: 0,
+}
+
+const justStarted: SequenceProgress = {
+  sequence_name: 'RP-pos-batch-7',
+  current_sample: 1,
+  total_samples: 384,
+}
+
+function initState() {
+  return {
+    current: 37,
+    total: 96,
+    remaining: 6780,
+    compact: false,
+    showEta: true,
+    showRemaining: true,
+    label: 'samples',
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/SequenceProgressBar">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <SequenceProgressBar
+            :progress="{
+              sequence_name: 'HILIC-neg-2026-09-05',
+              current_sample: state.current,
+              total_samples: state.total,
+              estimated_remaining_seconds: state.remaining,
+            }"
+            :compact="state.compact"
+            :label="state.label"
+            :show-eta="state.showEta"
+            :show-remaining="state.showRemaining"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstNumber v-model="state.current" title="Current sample" />
+        <HstNumber v-model="state.total" title="Total samples" />
+        <HstNumber v-model="state.remaining" title="Remaining (s)" />
+        <HstText v-model="state.label" title="Unit label" />
+        <HstCheckbox v-model="state.compact" title="Compact" />
+        <HstCheckbox v-model="state.showEta" title="Show ETA" />
+        <HstCheckbox v-model="state.showRemaining" title="Show remaining" />
+      </template>
+    </Variant>
+
+    <Variant title="Mid-run">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" />
+      </div>
+    </Variant>
+
+    <Variant title="Compact (no footer)">
+      <!-- Compact drops the remaining/ETA row for dense instrument tables. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" compact />
+      </div>
+    </Variant>
+
+    <Variant title="Nearly finished">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="almostDone" />
+      </div>
+    </Variant>
+
+    <Variant title="Complete">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="finished" />
+      </div>
+    </Variant>
+
+    <Variant title="Queued — no timing yet">
+      <!-- Without timing fields the footer collapses on its own. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="justStarted" label="injections" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SequenceProgressBar.vue

@@ -65,7 +65,3 @@ const hasFooter = computed(() => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sequence-progress-bar.css';
-</style>

package/src/components/SettingsModal.vue

@@ -393,7 +393,3 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
     </template>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/settings-modal.css';
-</style>

package/src/components/Skeleton.vue

@@ -68,7 +68,3 @@ const classes = computed(() => {
 <template>
   <div :class="classes" :style="style" />
 </template>
-
-<style>
-@import '../styles/components/skeleton.css';
-</style>

package/src/components/SmartGroupFieldRecipe.vue

@@ -144,8 +144,13 @@ function onDrop(event: DragEvent) {
 // CSV action menu — reuses the SDK's dropdown state (outside-click / Escape
 // close) but renders a compact action menu in the .fr-* styling, since the
 // items are actions (upload / download), not a persistent value selection.
-const { isOpen: csvMenuOpen, rootRef: csvMenuRoot, close: closeCsvMenu, toggle: toggleCsvMenu } =
-  useDropdownState()
+const {
+  isOpen: csvMenuOpen,
+  rootRef: csvMenuRoot,
+  triggerRef: csvMenuTrigger,
+  close: closeCsvMenu,
+  toggle: toggleCsvMenu,
+} = useDropdownState()
 
 function chooseUpload() {
   closeCsvMenu()
@@ -294,6 +299,7 @@ function onApply() {
       <div class="sg-head__spacer" />
       <div ref="csvMenuRoot" class="fr-csv">
         <button
+          ref="csvMenuTrigger"
           type="button"
           class="fr-upload"
           aria-haspopup="menu"
@@ -493,7 +499,3 @@ function onApply() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/SmartGroupManual.vue

@@ -392,7 +392,3 @@ function onDone() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/StatusIndicator.vue

@@ -34,7 +34,3 @@ const dotStyle = computed(() =>
     <span v-if="label" class="mint-status__label">{{ label }}</span>
   </span>
 </template>
-
-<style>
-@import '../styles/components/status-indicator.css';
-</style>

package/src/components/StepWizard.vue

@@ -217,7 +217,3 @@ defineExpose({ setStepValid })
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/step-wizard.css';
-</style>

package/src/components/TagsInput.vue

@@ -44,11 +44,13 @@ const emit = defineEmits<{
 }>()
 
 const inputValue = ref('')
-const inputRef = ref<HTMLInputElement>()
 const highlightedIndex = ref(-1)
+// The text input doubles as the dropdown trigger, so focus restoration is the
+// composable's `triggerRef` rather than a component-local refocus helper.
 const {
   isOpen: dropdownOpen,
   rootRef,
+  triggerRef: inputRef,
   open: openDropdown,
   close: closeDropdown,
 } = useDropdownState({
@@ -129,7 +131,7 @@ function handleKeydown(event: KeyboardEvent) {
     return
   }
   if (event.key === 'Escape') {
-    closeDropdown()
+    closeDropdown(true)
     return
   }
   if (event.key === 'Backspace' && !inputValue.value && props.modelValue.length > 0) {
@@ -274,7 +276,3 @@ function onInputEvent() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/tags-input.css';
-</style>

package/src/components/ThemeToggle.vue

@@ -50,7 +50,3 @@ const { isDark, toggleTheme } = useTheme()
     </svg>
   </IconButton>
 </template>
-
-<style>
-@import '../styles/components/theme-toggle.css';
-</style>

package/src/components/TimePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range. */
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, useId } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import {
   compareTime,
@@ -38,7 +38,15 @@ const emit = defineEmits<{
 
 const listRef = ref<HTMLUListElement | null>(null)
 const highlightedIndex = ref(-1)
-const { isOpen, rootRef, open, close, toggle } = useDropdownState()
+const listboxId = `mint-time-picker-listbox-${useId().replace(/:/g, '')}`
+const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState()
+
+/** Id of the highlighted slot, published to the input as `aria-activedescendant`. */
+const activeSlotId = computed(() =>
+  isOpen.value && highlightedIndex.value >= 0
+    ? `${listboxId}-option-${highlightedIndex.value}`
+    : undefined,
+)
 
 const slots = computed(() => {
   const start = props.min ?? '00:00'
@@ -134,9 +142,29 @@ function handleKeydown(event: KeyboardEvent) {
       }
       break
     }
+    case 'Home': {
+      event.preventDefault()
+      const first = slots.value.findIndex(slot => !isSlotDisabled(slot))
+      if (first >= 0) {
+        highlightedIndex.value = first
+        scrollToHighlighted()
+      }
+      break
+    }
+    case 'End': {
+      event.preventDefault()
+      for (let index = slots.value.length - 1; index >= 0; index--) {
+        if (!isSlotDisabled(slots.value[index])) {
+          highlightedIndex.value = index
+          scrollToHighlighted()
+          break
+        }
+      }
+      break
+    }
     case 'Escape': {
       event.preventDefault()
-      close()
+      close(true)
       break
     }
   }
@@ -172,6 +200,7 @@ watch(isOpen, (open) => {
   <div ref="rootRef" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
       <input
+        ref="triggerRef"
         type="text"
         readonly
         :value="displayValue"
@@ -186,6 +215,8 @@ watch(isOpen, (open) => {
         role="combobox"
         aria-haspopup="listbox"
         :aria-expanded="isOpen"
+        :aria-controls="isOpen ? listboxId : undefined"
+        :aria-activedescendant="activeSlotId"
         @click="toggleDropdown"
       />
       <button
@@ -219,6 +250,7 @@ watch(isOpen, (open) => {
         class="mint-time-picker__dropdown"
       >
         <ul
+          :id="listboxId"
           ref="listRef"
           class="mint-time-picker__list"
           role="listbox"
@@ -226,6 +258,7 @@ watch(isOpen, (open) => {
         >
           <li
             v-for="(slot, index) in slots"
+            :id="`${listboxId}-option-${index}`"
             :key="slot"
             role="option"
             :aria-selected="slot === modelValue"
@@ -245,7 +278,3 @@ watch(isOpen, (open) => {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/time-picker.css';
-</style>

package/src/components/TimeRangeInput.vue

@@ -116,7 +116,3 @@ function onEndChange(value: string | undefined) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/time-range-input.css';
-</style>

package/src/components/Tooltip.story.vue

@@ -55,15 +55,15 @@ const positions: ('top' | 'bottom' | 'left' | 'right')[] = ['top', 'bottom', 'le
         <p style="margin: 0;">
           The experiment used
           <Tooltip text="Dimethyl sulfoxide - a polar aprotic solvent" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">DMSO</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">DMSO</span>
           </Tooltip>
           as the vehicle control. Samples were incubated at
           <Tooltip text="Standard mammalian cell culture temperature" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">37 C</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">37 C</span>
           </Tooltip>
           for 24 hours before
           <Tooltip text="3-(4,5-dimethylthiazol-2-yl)-2,5-diphenyltetrazolium bromide" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">MTT</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">MTT</span>
           </Tooltip>
           assay readout.
         </p>

package/src/components/Tooltip.vue

@@ -108,7 +108,3 @@ function resolvedMaxWidth(value: string | number | undefined): string | undefine
     </Teleport>
   </span>
 </template>
-
-<style>
-@import '../styles/components/tooltip.css';
-</style>

package/src/components/UnitInput.vue

@@ -211,7 +211,3 @@ watch(conversionHint, (hint) => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/unit-input.css';
-</style>