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

package/src/components/SegmentedControl.vue

@@ -1,94 +0,0 @@
-<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

@@ -1,119 +0,0 @@
-<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

@@ -1,209 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-<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

@@ -1,74 +0,0 @@
-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
-}