@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.4

package/src/components/SegmentedControl.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+/** Renders a segmented button group for single-option selection, with simple or solid variants. */
+import { computed } from 'vue'
+import type { SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
+import { normalizeOptionInput } from '../utils/options'
+
+interface Props {
+  modelValue: string | number
+  options: SegmentedOptionInput[]
+  variant?: SegmentedControlVariant
+  size?: SegmentedControlSize
+  fullWidth?: boolean
+  disabled?: boolean
+  disabledValues?: Array<string | number>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'simple',
+  size: 'md',
+  fullWidth: false,
+  disabled: false,
+  disabledValues: () => [],
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const normalizedOptions = computed<SegmentedOption[]>(() => props.options.map(normalizeOptionInput))
+const disabledValueSet = computed(() => new Set(props.disabledValues))
+
+function isOptionDisabled(option: SegmentedOption) {
+  return option.disabled === true || disabledValueSet.value.has(option.value)
+}
+
+function isSelectionDisabled(option: SegmentedOption) {
+  return props.disabled || isOptionDisabled(option)
+}
+
+function handleSelect(option: SegmentedOption) {
+  if (isSelectionDisabled(option)) return
+  emit('update:modelValue', option.value)
+}
+
+function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    handleSelect(option)
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mint-segmented-control',
+      `mint-segmented-control--${variant}`,
+      `mint-segmented-control--${size}`,
+      fullWidth ? 'mint-segmented-control--full-width' : '',
+      disabled ? 'mint-segmented-control--disabled' : '',
+    ]"
+    role="radiogroup"
+  >
+    <button
+      v-for="option in normalizedOptions"
+      :key="String(option.value)"
+      type="button"
+      role="radio"
+      :aria-checked="modelValue === option.value"
+      :disabled="isSelectionDisabled(option)"
+      :class="[
+        'mint-segmented-control__option',
+        `mint-segmented-control__option--${variant}`,
+        `mint-segmented-control__option--${size}`,
+        modelValue === option.value ? 'mint-segmented-control__option--active' : '',
+        isOptionDisabled(option) ? 'mint-segmented-control__option--disabled' : '',
+      ]"
+      @click="handleSelect(option)"
+      @keydown="handleKeydown($event, option)"
+    >
+      <span class="mint-segmented-control__label">{{ option.label }}</span>
+      <span
+        v-if="option.description && variant === 'card'"
+        class="mint-segmented-control__description"
+      >
+        {{ option.description }}
+      </span>
+    </button>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/segmented-control.css';
+</style>

package/src/components/SequenceInput.story.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SequenceInput from './SequenceInput.vue'
+
+type SequenceType = 'auto' | 'dna' | 'rna' | 'protein'
+const sequenceTypes: SequenceType[] = ['auto', 'dna', 'rna', 'protein']
+
+const sequence = ref('')
+
+const sampleDNA = 'ATGCGATCGATCGATCGATCGATCGATCGATCGATCGATCGATCGCTAGCTAGCTAGCTAGCTAGCTAGCTGAATTCGATATCAAGCTTATCGATACCGTCGACCTCGAGGGGGGGCCCGGTACCCAATTCGCCCTATAGTGAGTCGTATTACAATTCACTG'
+const sampleRNA = 'AUGCGAUCGAUCGAUCGAUCGAUCGAUCGAUCGAUCGAUCGCUAGCUAGCUAGCUAGCUAGCUAGCUGAAUUCGAUAUCAAGCUUAUCGAU'
+const sampleProtein = 'MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHGKKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTPAVHASLDKFLASVSTVLTSKYR'
+</script>
+
+<template>
+  <Story title="Scientific/SequenceInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+          <SequenceInput
+            v-model="sequence"
+            :type="state.type"
+            :readonly="state.readonly"
+            :show-stats="state.showStats"
+            :show-tools="state.showTools"
+            :rows="state.rows"
+            :placeholder="state.placeholder"
+            :error="state.error"
+            :disabled="state.disabled"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.type"
+          title="Sequence Type"
+          :options="sequenceTypes.map(t => ({ label: t, value: t }))"
+        />
+        <HstSlider v-model="state.rows" title="Rows" :min="2" :max="20" :step="1" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+        <HstCheckbox v-model="state.showStats" title="Show Stats" />
+        <HstCheckbox v-model="state.showTools" title="Show Tools" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="DNA Sequence">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          GFP coding sequence fragment (auto-detected as DNA)
+        </p>
+        <SequenceInput :model-value="sampleDNA" type="dna" />
+      </div>
+    </Variant>
+
+    <Variant title="RNA Sequence">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          mRNA sequence fragment
+        </p>
+        <SequenceInput :model-value="sampleRNA" type="rna" />
+      </div>
+    </Variant>
+
+    <Variant title="Protein Sequence">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Human hemoglobin alpha subunit
+        </p>
+        <SequenceInput :model-value="sampleProtein" type="protein" />
+      </div>
+    </Variant>
+
+    <Variant title="Readonly Viewer">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Read-only mode with colored bases and line numbers
+        </p>
+        <SequenceInput :model-value="sampleDNA" type="dna" readonly />
+      </div>
+    </Variant>
+
+    <Variant title="Without Tools">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <SequenceInput :model-value="sampleDNA" :show-tools="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Without Stats">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <SequenceInput :model-value="sampleDNA" :show-stats="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <SequenceInput model-value="ATGCGATCG" error />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled State">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <SequenceInput :model-value="sampleDNA" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="With Max Length">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          Limited to 50 characters
+        </p>
+        <SequenceInput v-model="sequence" :max-length="50" placeholder="Enter up to 50 bases..." />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SequenceInput.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+/** Textarea for DNA/RNA/protein sequences with auto-detection, validation, GC-content stats, reverse-complement, and FASTA formatting tools. */
+import { computed } from 'vue'
+import { useSequenceUtils, type SequenceType, type SequenceStats } from '../composables/useSequenceUtils'
+
+interface Props {
+  modelValue?: string
+  type?: SequenceType
+  readonly?: boolean
+  showStats?: boolean
+  showTools?: boolean
+  maxLength?: number
+  placeholder?: string
+  rows?: number
+  error?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  type: 'auto',
+  readonly: false,
+  showStats: true,
+  showTools: true,
+  rows: 6,
+  placeholder: 'Paste or type sequence...',
+  error: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+defineSlots<{
+  tools?(props: { sequence: string; type: 'dna' | 'rna' | 'protein'; stats: SequenceStats }): unknown
+}>()
+
+const { detectSequenceType, validateSequence, reverseComplement, calculateStats, formatFasta } = useSequenceUtils()
+
+const resolvedType = computed<'dna' | 'rna' | 'protein'>(() => {
+  if (props.type !== 'auto') return props.type as 'dna' | 'rna' | 'protein'
+  if (!props.modelValue) return 'dna'
+  return detectSequenceType(props.modelValue)
+})
+
+const stats = computed<SequenceStats>(() => {
+  if (!props.modelValue) return { length: 0 }
+  return calculateStats(props.modelValue, resolvedType.value)
+})
+
+const viewerLines = computed(() => {
+  if (!props.modelValue) return []
+  const formatted = formatFasta(props.modelValue, 60)
+  return formatted.split('\n').filter(l => l.length > 0)
+})
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement
+  let value = target.value
+
+  if (props.maxLength && value.length > props.maxLength) {
+    value = value.slice(0, props.maxLength)
+  }
+
+  // Validate characters
+  value = validateSequence(value, resolvedType.value)
+  emit('update:modelValue', value)
+}
+
+function doReverseComplement() {
+  if (!props.modelValue || resolvedType.value === 'protein') return
+  emit('update:modelValue', reverseComplement(props.modelValue, resolvedType.value as 'dna' | 'rna'))
+}
+
+function doUppercase() {
+  if (!props.modelValue) return
+  emit('update:modelValue', props.modelValue.toUpperCase())
+}
+
+function doClear() {
+  emit('update:modelValue', '')
+}
+
+function doCopy() {
+  if (!props.modelValue) return
+  navigator.clipboard.writeText(props.modelValue)
+}
+
+function getBaseClass(char: string): string {
+  const c = char.toLowerCase()
+  if (c === 'a') return 'mint-sequence-input__base--a'
+  if (c === 't') return 'mint-sequence-input__base--t'
+  if (c === 'u') return 'mint-sequence-input__base--u'
+  if (c === 'g') return 'mint-sequence-input__base--g'
+  if (c === 'c') return 'mint-sequence-input__base--c'
+  if (c === 'n') return 'mint-sequence-input__base--n'
+  return ''
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mint-sequence-input',
+      error ? 'mint-sequence-input--error' : '',
+      disabled ? 'mint-sequence-input--disabled' : '',
+    ]"
+  >
+    <!-- Toolbar -->
+    <div v-if="showTools && !readonly" class="mint-sequence-input__toolbar">
+      <slot name="tools" :sequence="modelValue || ''" :type="resolvedType" :stats="stats">
+        <button
+          v-if="resolvedType !== 'protein'"
+          type="button"
+          class="mint-sequence-input__tool-btn"
+          :disabled="!modelValue || disabled"
+          @click="doReverseComplement"
+        >
+          Rev Comp
+        </button>
+        <button
+          type="button"
+          class="mint-sequence-input__tool-btn"
+          :disabled="!modelValue || disabled"
+          @click="doUppercase"
+        >
+          Uppercase
+        </button>
+        <div class="mint-sequence-input__tool-sep" />
+        <button
+          type="button"
+          class="mint-sequence-input__tool-btn"
+          :disabled="!modelValue || disabled"
+          @click="doCopy"
+        >
+          Copy
+        </button>
+        <button
+          type="button"
+          class="mint-sequence-input__tool-btn"
+          :disabled="!modelValue || disabled"
+          @click="doClear"
+        >
+          Clear
+        </button>
+      </slot>
+
+      <span class="mint-sequence-input__type-badge">{{ resolvedType }}</span>
+    </div>
+
+    <!-- Editor (input mode) -->
+    <div v-if="!readonly" class="mint-sequence-input__editor">
+      <textarea
+        :value="modelValue"
+        :rows="rows"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :maxlength="maxLength"
+        class="mint-sequence-input__textarea"
+        spellcheck="false"
+        autocomplete="off"
+        @input="handleInput"
+      />
+    </div>
+
+    <!-- Viewer (readonly mode) -->
+    <div v-else class="mint-sequence-input__viewer">
+      <div
+        v-for="(line, lineIdx) in viewerLines"
+        :key="lineIdx"
+        class="mint-sequence-input__viewer-line"
+      >
+        <span class="mint-sequence-input__line-number">{{ lineIdx * 60 + 1 }}</span>
+        <span class="mint-sequence-input__line-content">
+          <span
+            v-for="(char, charIdx) in line.split('')"
+            :key="charIdx"
+            :class="getBaseClass(char)"
+          >{{ char }}</span>
+        </span>
+      </div>
+      <div v-if="!modelValue" class="mint-sequence-input__viewer-line">
+        <span class="mint-sequence-input__line-number" />
+        <span class="mint-sequence-input__line-content" style="color: var(--text-muted);">No sequence</span>
+      </div>
+    </div>
+
+    <!-- Stats -->
+    <div v-if="showStats && modelValue" class="mint-sequence-input__stats">
+      <span>
+        <span class="mint-sequence-input__stat-label">Length:</span>
+        <span class="mint-sequence-input__stat-value">{{ stats.length }}</span>
+      </span>
+      <span v-if="stats.gcPercent !== undefined">
+        <span class="mint-sequence-input__stat-label">GC:</span>
+        <span class="mint-sequence-input__stat-value">{{ stats.gcPercent.toFixed(1) }}%</span>
+      </span>
+      <span v-if="stats.molecularWeight !== undefined">
+        <span class="mint-sequence-input__stat-label">MW:</span>
+        <span class="mint-sequence-input__stat-value">~{{ (stats.molecularWeight / 1000).toFixed(1) }} kDa</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/sequence-input.css';
+</style>

package/src/components/SequenceProgressBar.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/** Displays LC/MS or GC/MS acquisition sequence progress with ETA and remaining-time labels. */
+import { computed } from 'vue'
+import {
+  formatSequenceEta,
+  formatSequenceRemaining,
+  sequenceProgressPercent,
+} from '../instrument'
+import type { SequenceProgress } from '../types'
+import ProgressBar from './ProgressBar.vue'
+
+interface Props {
+  progress: SequenceProgress
+  compact?: boolean
+  label?: string
+  showEta?: boolean
+  showRemaining?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  compact: false,
+  label: 'samples',
+  showEta: true,
+  showRemaining: true,
+})
+
+const percent = computed(() => sequenceProgressPercent(props.progress))
+const remainingLabel = computed(() => formatSequenceRemaining(props.progress))
+const etaLabel = computed(() => formatSequenceEta(props.progress))
+const hasFooter = computed(() => {
+  if (props.compact) return false
+  return (props.showRemaining && remainingLabel.value) || (props.showEta && etaLabel.value)
+})
+</script>
+
+<template>
+  <div class="mint-sequence-progress">
+    <div class="mint-sequence-progress__header">
+      <span class="mint-sequence-progress__label">
+        {{ progress.current_sample }} / {{ progress.total_samples }} {{ label }}
+      </span>
+      <span class="mint-sequence-progress__percent">{{ percent }}%</span>
+    </div>
+
+    <ProgressBar
+      :value="percent"
+      color="info"
+      size="sm"
+      aria-label="Sequence progress"
+    />
+
+    <div v-if="hasFooter" class="mint-sequence-progress__footer">
+      <span
+        v-if="showRemaining && remainingLabel"
+        class="mint-sequence-progress__remaining"
+      >
+        {{ remainingLabel }}
+      </span>
+      <span
+        v-if="showEta && etaLabel"
+        class="mint-sequence-progress__eta"
+      >
+        ETA {{ etaLabel }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/sequence-progress-bar.css';
+</style>

package/src/components/SettingsModal.schema.ts

@@ -0,0 +1,74 @@
+import type {
+  FormSchema,
+  FormSectionSchema,
+  SettingsGroup,
+  SettingsModalSchema,
+  SettingsTab,
+  SettingsTabInput,
+} from '../types'
+import type { AccessControlled } from '../permissions'
+import { normalizeItemInput } from '../utils/items'
+
+export const APPEARANCE_TAB_ID = 'appearance'
+
+export const APPEARANCE_TAB: SettingsTab = {
+  id: APPEARANCE_TAB_ID,
+  label: 'Appearance',
+  // Heroicons "swatch" — the built-in tab sits beside plugin tabs that all
+  // carry icons, so it needs one of its own to keep the rail consistent.
+  icon: '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"></path></svg>',
+  description: 'Theme, color palette, and table density',
+}
+
+// Map settings groups onto the form-builder's flat-section shape.
+// `title: ''` because the rail/pane header already shows the group name.
+export function buildFlatSettingsSchema(schema: SettingsModalSchema): FormSchema {
+  return {
+    sections: schema.groups.map<FormSectionSchema>((group) => ({
+      id: group.id,
+      title: '',
+      fields: group.fields,
+      columns: group.columns,
+      condition: group.condition,
+    })),
+  }
+}
+
+export function filterSettingsSchemaByAccess(
+  schema: SettingsModalSchema,
+  canShow: (item: AccessControlled) => boolean
+): SettingsModalSchema {
+  const groups = schema.groups.flatMap((group) => {
+    if (!canShow(group)) return []
+
+    const fields = group.fields.filter(canShow)
+    if (fields.length === 0) return []
+
+    return [{ ...group, fields }]
+  })
+
+  return { groups }
+}
+
+export function settingsGroupToTab(group: SettingsGroup): SettingsTab {
+  return {
+    id: group.id,
+    label: group.label,
+    icon: group.icon,
+    description: group.description,
+  }
+}
+
+export function normalizeVisibleSettingsTabs(
+  tabs: SettingsTabInput[],
+  canShow: (item: AccessControlled) => boolean
+): SettingsTab[] {
+  return tabs.map(normalizeItemInput).filter(canShow)
+}
+
+export function buildSettingsTabs(
+  baseTabs: SettingsTab[],
+  showAppearance: boolean
+): SettingsTab[] {
+  return showAppearance ? [...baseTabs, APPEARANCE_TAB] : baseTabs
+}