@morscherlab/mld-sdk 0.6.0

package/src/components/SequenceInput.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+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 'mld-sequence-input__base--a'
+  if (c === 't') return 'mld-sequence-input__base--t'
+  if (c === 'u') return 'mld-sequence-input__base--u'
+  if (c === 'g') return 'mld-sequence-input__base--g'
+  if (c === 'c') return 'mld-sequence-input__base--c'
+  if (c === 'n') return 'mld-sequence-input__base--n'
+  return ''
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-sequence-input',
+      error ? 'mld-sequence-input--error' : '',
+      disabled ? 'mld-sequence-input--disabled' : '',
+    ]"
+  >
+    <!-- Toolbar -->
+    <div v-if="showTools && !readonly" class="mld-sequence-input__toolbar">
+      <slot name="tools" :sequence="modelValue || ''" :type="resolvedType" :stats="stats">
+        <button
+          v-if="resolvedType !== 'protein'"
+          type="button"
+          class="mld-sequence-input__tool-btn"
+          :disabled="!modelValue || disabled"
+          @click="doReverseComplement"
+        >
+          Rev Comp
+        </button>
+        <button
+          type="button"
+          class="mld-sequence-input__tool-btn"
+          :disabled="!modelValue || disabled"
+          @click="doUppercase"
+        >
+          Uppercase
+        </button>
+        <div class="mld-sequence-input__tool-sep" />
+        <button
+          type="button"
+          class="mld-sequence-input__tool-btn"
+          :disabled="!modelValue || disabled"
+          @click="doCopy"
+        >
+          Copy
+        </button>
+        <button
+          type="button"
+          class="mld-sequence-input__tool-btn"
+          :disabled="!modelValue || disabled"
+          @click="doClear"
+        >
+          Clear
+        </button>
+      </slot>
+
+      <span class="mld-sequence-input__type-badge">{{ resolvedType }}</span>
+    </div>
+
+    <!-- Editor (input mode) -->
+    <div v-if="!readonly" class="mld-sequence-input__editor">
+      <textarea
+        :value="modelValue"
+        :rows="rows"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :maxlength="maxLength"
+        class="mld-sequence-input__textarea"
+        spellcheck="false"
+        autocomplete="off"
+        @input="handleInput"
+      />
+    </div>
+
+    <!-- Viewer (readonly mode) -->
+    <div v-else class="mld-sequence-input__viewer">
+      <div
+        v-for="(line, lineIdx) in viewerLines"
+        :key="lineIdx"
+        class="mld-sequence-input__viewer-line"
+      >
+        <span class="mld-sequence-input__line-number">{{ lineIdx * 60 + 1 }}</span>
+        <span class="mld-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="mld-sequence-input__viewer-line">
+        <span class="mld-sequence-input__line-number" />
+        <span class="mld-sequence-input__line-content" style="color: var(--text-muted);">No sequence</span>
+      </div>
+    </div>
+
+    <!-- Stats -->
+    <div v-if="showStats && modelValue" class="mld-sequence-input__stats">
+      <span>
+        <span class="mld-sequence-input__stat-label">Length:</span>
+        <span class="mld-sequence-input__stat-value">{{ stats.length }}</span>
+      </span>
+      <span v-if="stats.gcPercent !== undefined">
+        <span class="mld-sequence-input__stat-label">GC:</span>
+        <span class="mld-sequence-input__stat-value">{{ stats.gcPercent.toFixed(1) }}%</span>
+      </span>
+      <span v-if="stats.molecularWeight !== undefined">
+        <span class="mld-sequence-input__stat-label">MW:</span>
+        <span class="mld-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/SettingsButton.story.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import SettingsButton from './SettingsButton.vue'
+
+const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Action/SettingsButton">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <SettingsButton :size="state.size">
+            <div style="padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;">
+              <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-primary, #1e293b);">
+                <input type="checkbox" checked /> Enable notifications
+              </label>
+              <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-primary, #1e293b);">
+                <input type="checkbox" /> Auto-save results
+              </label>
+              <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-primary, #1e293b);">
+                <input type="checkbox" checked /> Show grid lines
+              </label>
+            </div>
+          </SettingsButton>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; gap: 2rem; align-items: center; justify-content: center;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <SettingsButton :size="size">
+            <div style="padding: 0.75rem; font-size: 0.875rem; color: var(--text-primary, #1e293b);">
+              Settings panel content ({{ size }})
+            </div>
+          </SettingsButton>
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+            {{ size }}
+          </span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Empty (Default Slot)">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <SettingsButton />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SettingsButton.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+interface Props {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const isOpen = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+
+function toggle(event: MouseEvent) {
+  isOpen.value = !isOpen.value
+  emit('click', event)
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node
+  if (dropdownRef.value && !dropdownRef.value.contains(target)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div ref="dropdownRef" class="mld-settings-button">
+    <button
+      type="button"
+      :class="['mld-settings-button__trigger', `mld-settings-button__trigger--${size}`]"
+      aria-label="Settings"
+      @click.stop="toggle"
+    >
+      <!-- Settings/Gear icon -->
+      <svg
+        :class="`mld-settings-button__icon--${size}`"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" />
+      </svg>
+    </button>
+
+    <!-- Dropdown panel -->
+    <div v-show="isOpen" class="mld-settings-dropdown">
+      <slot>
+        <div class="mld-settings-dropdown__empty">
+          No settings configured
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/settings-button.css';
+</style>

package/src/components/SettingsModal.story.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SettingsModal from './SettingsModal.vue'
+import type { SettingsTab } from '../types'
+
+const basicOpen = ref(false)
+const customOpen = ref(false)
+const appearanceOnlyOpen = ref(false)
+
+const customTabs: SettingsTab[] = [
+  { id: 'general', label: 'General' },
+  { id: 'notifications', label: 'Notifications' },
+  { id: 'advanced', label: 'Advanced' },
+]
+
+const sizes: Array<'md' | 'lg' | 'xl'> = ['md', 'lg', 'xl']
+</script>
+
+<template>
+  <Story title="Layout/SettingsModal">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
+            @click="basicOpen = true"
+          >
+            Open Settings
+          </button>
+          <SettingsModal
+            v-model="basicOpen"
+            :title="state.title"
+            :show-appearance="state.showAppearance"
+            :size="state.size"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstCheckbox v-model="state.showAppearance" title="Show Appearance" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Appearance Only">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
+          @click="appearanceOnlyOpen = true"
+        >
+          Appearance Settings
+        </button>
+        <SettingsModal
+          v-model="appearanceOnlyOpen"
+          title="Appearance"
+          :show-appearance="true"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Tabs">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <button
+          type="button"
+          style="padding: 0.5rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer; font-size: 0.875rem;"
+          @click="customOpen = true"
+        >
+          Open Settings (Custom Tabs)
+        </button>
+        <SettingsModal
+          v-model="customOpen"
+          title="Plugin Settings"
+          :tabs="customTabs"
+          :show-appearance="true"
+          size="lg"
+        >
+          <template #tab-general>
+            <div style="display: flex; flex-direction: column; gap: 1rem;">
+              <div>
+                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem;">Plugin Name</label>
+                <input
+                  type="text"
+                  value="IC50 Calculator"
+                  style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+                />
+              </div>
+              <div>
+                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem;">Default Model</label>
+                <select style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;">
+                  <option>4-Parameter Logistic</option>
+                  <option>3-Parameter Logistic</option>
+                  <option>Linear</option>
+                </select>
+              </div>
+            </div>
+          </template>
+          <template #tab-notifications>
+            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+              <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary, #1e293b); font-size: 0.875rem;">
+                <input type="checkbox" checked /> Email on analysis complete
+              </label>
+              <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary, #1e293b); font-size: 0.875rem;">
+                <input type="checkbox" /> Email on QC failure
+              </label>
+              <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary, #1e293b); font-size: 0.875rem;">
+                <input type="checkbox" checked /> In-app notifications
+              </label>
+            </div>
+          </template>
+          <template #tab-advanced>
+            <div style="display: flex; flex-direction: column; gap: 1rem;">
+              <p style="margin: 0; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+                Advanced settings for curve fitting and data processing.
+              </p>
+              <div>
+                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem;">Max Iterations</label>
+                <input
+                  type="number"
+                  value="1000"
+                  style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+                />
+              </div>
+              <div>
+                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem;">Convergence Threshold</label>
+                <input
+                  type="number"
+                  value="0.0001"
+                  step="0.0001"
+                  style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.875rem; background: var(--bg-primary, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box;"
+                />
+              </div>
+            </div>
+          </template>
+        </SettingsModal>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SettingsModal.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BaseModal from './BaseModal.vue'
+import { useSettingsStore, colorPalettes } from '../stores/settings'
+import type { ThemeMode, ColorPalette, TableDensity } from '../types'
+
+export interface SettingsTab {
+  id: string
+  label: string
+  icon?: string
+}
+
+interface Props {
+  modelValue: boolean
+  title?: string
+  tabs?: SettingsTab[]
+  showAppearance?: boolean
+  size?: 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Settings',
+  tabs: () => [],
+  showAppearance: true,
+  size: 'lg',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+const settings = useSettingsStore()
+
+const allTabs = computed<SettingsTab[]>(() =>
+  props.showAppearance
+    ? [...props.tabs, { id: 'appearance', label: 'Appearance' }]
+    : props.tabs
+)
+
+const activeTab = ref(allTabs.value[0]?.id || 'appearance')
+
+const themeOptions: { value: ThemeMode; label: string }[] = [
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+  { value: 'system', label: 'System' },
+]
+
+const densityOptions: { value: TableDensity; label: string }[] = [
+  { value: 'compact', label: 'Compact' },
+  { value: 'normal', label: 'Normal' },
+  { value: 'comfortable', label: 'Comfortable' },
+]
+
+function handleClose() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+</script>
+
+<template>
+  <BaseModal
+    :model-value="modelValue"
+    :title="title"
+    :size="size"
+    @update:model-value="emit('update:modelValue', $event)"
+    @close="handleClose"
+  >
+    <div class="mld-settings-modal">
+      <!-- Tabs -->
+      <div v-if="allTabs.length > 1" class="mld-settings-modal__tabs">
+        <button
+          v-for="tab in allTabs"
+          :key="tab.id"
+          type="button"
+          :class="['mld-settings-modal__tab', { 'mld-settings-modal__tab--active': activeTab === tab.id }]"
+          @click="activeTab = tab.id"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <!-- Custom tab content -->
+      <div class="mld-settings-modal__content">
+        <template v-for="tab in tabs" :key="tab.id">
+          <div v-show="activeTab === tab.id">
+            <slot :name="`tab-${tab.id}`" />
+          </div>
+        </template>
+
+        <!-- Built-in appearance tab -->
+        <div v-if="showAppearance" v-show="activeTab === 'appearance'">
+          <!-- Theme -->
+          <div class="mld-settings-modal__section">
+            <div class="mld-settings-modal__section-label">Theme</div>
+            <div class="mld-settings-modal__option-group">
+              <button
+                v-for="opt in themeOptions"
+                :key="opt.value"
+                type="button"
+                :class="['mld-settings-modal__option-btn', { 'mld-settings-modal__option-btn--active': settings.theme === opt.value }]"
+                @click="settings.theme = opt.value"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Color palette -->
+          <div class="mld-settings-modal__section">
+            <div class="mld-settings-modal__section-label">Color Palette</div>
+            <div class="mld-settings-modal__option-group">
+              <button
+                v-for="(palette, key) in colorPalettes"
+                :key="key"
+                type="button"
+                :class="['mld-settings-modal__option-btn', { 'mld-settings-modal__option-btn--active': settings.colorPalette === key }]"
+                @click="settings.colorPalette = key as ColorPalette"
+              >
+                {{ palette.name }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Table density -->
+          <div class="mld-settings-modal__section">
+            <div class="mld-settings-modal__section-label">Table Density</div>
+            <div class="mld-settings-modal__option-group">
+              <button
+                v-for="opt in densityOptions"
+                :key="opt.value"
+                type="button"
+                :class="['mld-settings-modal__option-btn', { 'mld-settings-modal__option-btn--active': settings.tableDensity === opt.value }]"
+                @click="settings.tableDensity = opt.value"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+            <p class="mld-settings-modal__note">Adjusts row height in data tables.</p>
+          </div>
+
+          <slot name="appearance" />
+        </div>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<style>
+@import '../styles/components/settings-modal.css';
+</style>