@morscherlab/mld-sdk 0.6.0

package/src/components/ScientificNumber.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+type NumberNotation = 'auto' | 'scientific' | 'engineering' | 'compact'
+
+interface Props {
+  value: number
+  precision?: number
+  notation?: NumberNotation
+  unit?: string
+  copyable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  precision: 3,
+  notation: 'auto',
+  copyable: false,
+})
+
+const copied = ref(false)
+
+const SUPERSCRIPT_DIGITS: Record<string, string> = {
+  '0': '\u2070',
+  '1': '\u00B9',
+  '2': '\u00B2',
+  '3': '\u00B3',
+  '4': '\u2074',
+  '5': '\u2075',
+  '6': '\u2076',
+  '7': '\u2077',
+  '8': '\u2078',
+  '9': '\u2079',
+  '-': '\u207B',
+}
+
+const SI_SUFFIXES: [number, string][] = [
+  [1e12, 'T'],
+  [1e9, 'G'],
+  [1e6, 'M'],
+  [1e3, 'k'],
+  [1e-3, 'm'],
+  [1e-6, '\u00B5'],
+  [1e-9, 'n'],
+  [1e-12, 'p'],
+]
+
+function toSuperscript(exp: number): string {
+  return String(exp)
+    .split('')
+    .map(ch => SUPERSCRIPT_DIGITS[ch] ?? ch)
+    .join('')
+}
+
+function roundToPrecision(n: number, digits: number): string {
+  return n.toFixed(digits).replace(/\.?0+$/, '') || '0'
+}
+
+interface FormattedNumber {
+  type: 'plain' | 'scientific' | 'compact'
+  mantissa?: string
+  exponent?: number
+  exponentStr?: string
+  plain?: string
+  suffix?: string
+}
+
+const formatted = computed<FormattedNumber>(() => {
+  const v = props.value
+
+  if (!Number.isFinite(v)) return { type: 'plain', plain: '' }
+  if (v === 0) return { type: 'plain', plain: '0' }
+
+  const absV = Math.abs(v)
+
+  if (props.notation === 'compact') {
+    for (const [threshold, suffix] of SI_SUFFIXES) {
+      if (absV >= threshold * 0.999) {
+        return {
+          type: 'compact',
+          plain: roundToPrecision(v / threshold, props.precision),
+          suffix,
+        }
+      }
+    }
+    return { type: 'plain', plain: roundToPrecision(v, props.precision) }
+  }
+
+  const useScientific =
+    props.notation === 'scientific' ||
+    props.notation === 'engineering' ||
+    (props.notation === 'auto' && (absV < 0.01 || absV >= 10000))
+
+  if (!useScientific) {
+    return { type: 'plain', plain: roundToPrecision(v, props.precision) }
+  }
+
+  let exp = Math.floor(Math.log10(absV))
+
+  if (props.notation === 'engineering') {
+    exp = Math.floor(exp / 3) * 3
+  }
+
+  const mantissa = v / Math.pow(10, exp)
+  const mantissaStr = roundToPrecision(mantissa, props.precision)
+
+  return {
+    type: 'scientific',
+    mantissa: mantissaStr,
+    exponent: exp,
+    exponentStr: toSuperscript(exp),
+  }
+})
+
+const specialDisplay = computed(() => {
+  if (Number.isNaN(props.value)) return 'NaN'
+  if (props.value === Infinity) return '\u221E'
+  if (props.value === -Infinity) return '-\u221E'
+  return null
+})
+
+const plainTextValue = computed(() => {
+  if (specialDisplay.value) return specialDisplay.value
+  const f = formatted.value
+  let text: string
+  if (f.type === 'scientific') {
+    text = `${f.mantissa}e${f.exponent}`
+  } else if (f.type === 'compact') {
+    text = `${f.plain}${f.suffix ?? ''}`
+  } else {
+    text = f.plain ?? '0'
+  }
+  if (props.unit) text += ` ${props.unit}`
+  return text
+})
+
+async function copyToClipboard() {
+  try {
+    await navigator.clipboard.writeText(plainTextValue.value)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 1500)
+  } catch {
+    // clipboard not available
+  }
+}
+</script>
+
+<template>
+  <span class="mld-sci-number">
+    <!-- Special values: NaN, Infinity -->
+    <template v-if="specialDisplay">
+      <span class="mld-sci-number__plain">{{ specialDisplay }}</span>
+    </template>
+
+    <!-- Scientific / Engineering notation -->
+    <template v-else-if="formatted.type === 'scientific'">
+      <span class="mld-sci-number__mantissa">{{ formatted.mantissa }}</span>
+      <span class="mld-sci-number__times">&times;</span>
+      <span class="mld-sci-number__base">10</span>
+      <span class="mld-sci-number__exponent">{{ formatted.exponentStr }}</span>
+    </template>
+
+    <!-- Compact notation with SI suffix -->
+    <template v-else-if="formatted.type === 'compact'">
+      <span class="mld-sci-number__plain">{{ formatted.plain }}</span>
+      <span v-if="formatted.suffix" class="mld-sci-number__suffix">{{ formatted.suffix }}</span>
+    </template>
+
+    <!-- Plain number -->
+    <template v-else>
+      <span class="mld-sci-number__plain">{{ formatted.plain }}</span>
+    </template>
+
+    <!-- Unit -->
+    <span v-if="unit" class="mld-sci-number__unit">{{ unit }}</span>
+
+    <!-- Copy button -->
+    <button
+      v-if="copyable"
+      :class="['mld-sci-number__copy-btn', { 'mld-sci-number__copy-btn--copied': copied }]"
+      type="button"
+      :title="copied ? 'Copied!' : 'Copy value'"
+      @click.stop="copyToClipboard"
+    >
+      <svg v-if="!copied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+      </svg>
+      <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    </button>
+  </span>
+</template>
+
+<style>
+@import '../styles/components/scientific-number.css';
+</style>

package/src/components/SegmentedControl.story.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import SegmentedControl from './SegmentedControl.vue'
+import type { SegmentedOption } from '../types'
+
+const sizes = ['sm', 'md', 'lg'] as const
+const variants = ['simple', 'card'] as const
+
+const basicOptions: SegmentedOption[] = [
+  { value: 'day', label: 'Day' },
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+]
+
+const plateOptions: SegmentedOption[] = [
+  { value: 6, label: '6-well' },
+  { value: 12, label: '12-well' },
+  { value: 24, label: '24-well' },
+  { value: 48, label: '48-well' },
+  { value: 96, label: '96-well' },
+  { value: 384, label: '384-well' },
+]
+
+const cardOptions: SegmentedOption[] = [
+  { value: 'basic', label: 'Basic', description: 'Simple endpoint analysis' },
+  { value: 'standard', label: 'Standard', description: 'Dose-response curves' },
+  { value: 'advanced', label: 'Advanced', description: 'Full kinetic modeling' },
+]
+
+const withDisabledOptions: SegmentedOption[] = [
+  { value: 'active', label: 'Active' },
+  { value: 'archived', label: 'Archived' },
+  { value: 'deleted', label: 'Deleted', disabled: true },
+]
+</script>
+
+<template>
+  <Story title="Base Inputs/SegmentedControl">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <SegmentedControl
+            v-model="state.value"
+            :options="basicOptions"
+            :variant="state.variant"
+            :size="state.size"
+            :full-width="state.fullWidth"
+            :disabled="state.disabled"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Value: <code>{{ JSON.stringify(state.value) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.fullWidth" title="Full Width" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes (Simple)">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div v-for="size in sizes" :key="size">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </p>
+          <SegmentedControl :model-value="'week'" :options="basicOptions" :size="size" variant="simple" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Card Variant">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <SegmentedControl :model-value="'standard'" :options="cardOptions" variant="card" />
+      </div>
+    </Variant>
+
+    <Variant title="Many Options">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto;">
+        <SegmentedControl :model-value="96" :options="plateOptions" variant="simple" />
+      </div>
+    </Variant>
+
+    <Variant title="With Disabled Option">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <SegmentedControl :model-value="'active'" :options="withDisabledOptions" variant="simple" />
+      </div>
+    </Variant>
+
+    <Variant title="Not Full Width">
+      <div style="padding: 2rem;">
+        <SegmentedControl :model-value="'day'" :options="basicOptions" :full-width="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <SegmentedControl :model-value="'week'" :options="basicOptions" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SegmentedControl.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { SegmentedOption, SegmentedControlVariant, SegmentedControlSize } from '../types'
+
+interface Props {
+  modelValue: string | number
+  options: SegmentedOption[]
+  variant?: SegmentedControlVariant
+  size?: SegmentedControlSize
+  fullWidth?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'simple',
+  size: 'md',
+  fullWidth: true,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+function handleSelect(option: SegmentedOption) {
+  if (props.disabled || option.disabled) 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="[
+      'mld-segmented-control',
+      `mld-segmented-control--${variant}`,
+      `mld-segmented-control--${size}`,
+      fullWidth ? 'mld-segmented-control--full-width' : '',
+      disabled ? 'mld-segmented-control--disabled' : '',
+    ]"
+    role="radiogroup"
+  >
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      type="button"
+      role="radio"
+      :aria-checked="modelValue === option.value"
+      :disabled="disabled || option.disabled"
+      :class="[
+        'mld-segmented-control__option',
+        `mld-segmented-control__option--${variant}`,
+        `mld-segmented-control__option--${size}`,
+        modelValue === option.value ? 'mld-segmented-control__option--active' : '',
+        option.disabled ? 'mld-segmented-control__option--disabled' : '',
+      ]"
+      @click="handleSelect(option)"
+      @keydown="handleKeydown($event, option)"
+    >
+      <span class="mld-segmented-control__label">{{ option.label }}</span>
+      <span
+        v-if="option.description && variant === 'card'"
+        class="mld-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>