@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/AppPluginSwitcher.story.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import AppPluginSwitcher from './AppPluginSwitcher.vue'
-import type { PluginSwitcherPlugin } from '../types/components'
-
-const current: PluginSwitcherPlugin = {
-  id: 'ms-designer',
-  label: 'MS Designer',
-  version: '1.4.2',
-  color: 'var(--mint-sample-1)',
-}
-
-const plugins: PluginSwitcherPlugin[] = [
-  { id: 'ms-designer', label: 'MS Designer', version: '1.4.2', color: 'var(--mint-sample-1)' },
-  { id: 'ms-uploader', label: 'MS Uploader', version: '0.9.0', color: 'var(--mint-sample-2)' },
-  { id: 'ms-planner', label: 'MS Planner', version: '2.0.1', color: 'var(--mint-sample-5)' },
-  { id: 'drp', label: 'Dose Response', version: '3.1.0', color: 'var(--mint-sample-6)' },
-]
-
-function handleSelect(plugin: PluginSwitcherPlugin) {
-  console.log('Switch to', plugin.id)
-}
-
-function handleInstall() {
-  console.log('Install plugin clicked')
-}
-
-function initState() {
-  return {
-    label: 'MS Designer',
-    version: '1.4.2',
-    installLabel: 'Install plugin…',
-  }
-}
-</script>
-
-<template>
-  <Story title="Layout/AppPluginSwitcher">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 600px; min-height: 22rem; background: var(--bg-primary);">
-          <AppPluginSwitcher
-            :current="{ id: 'active', label: state.label, version: state.version }"
-            :plugins="plugins"
-            :install-label="state.installLabel"
-            install-href="#install"
-            @select="handleSelect"
-            @install-click="handleInstall"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.label" title="Current label" />
-        <HstText v-model="state.version" title="Current version" />
-        <HstText v-model="state.installLabel" title="Install label" />
-      </template>
-    </Variant>
-
-    <Variant title="Closed (top-bar placement)">
-      <div style="padding: 2rem; max-width: 600px; background: var(--bg-primary);">
-        <AppPluginSwitcher :current="current" :plugins="plugins" @select="handleSelect" />
-      </div>
-    </Variant>
-
-    <Variant title="Single plugin (no siblings)">
-      <!-- The menu still opens so the install affordance stays reachable. -->
-      <div style="padding: 2rem; max-width: 600px; min-height: 16rem; background: var(--bg-primary);">
-        <AppPluginSwitcher
-          :current="current"
-          :plugins="[current]"
-          install-href="#install"
-          @install-click="handleInstall"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Without version badge">
-      <div style="padding: 2rem; max-width: 600px; background: var(--bg-primary);">
-        <AppPluginSwitcher
-          :current="{ id: 'hmdb', label: 'HMDB Lookup' }"
-          :plugins="plugins"
-          @select="handleSelect"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/AppPluginSwitcher.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-/** Dropdown menu for switching between installed plugins with color swatches, version badges, and an install link. */
-import { useDropdownState } from '../composables/useDropdownState'
-import type { PluginSwitcherPlugin } from '../types/components'
-import ActionItemInternal from './internal/ActionItemInternal.vue'
-
-interface Props {
-  current: PluginSwitcherPlugin
-  plugins?: PluginSwitcherPlugin[]
-  installLabel?: string
-  installTo?: string
-  installHref?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  plugins: () => [] as PluginSwitcherPlugin[],
-  installLabel: 'Install plugin…',
-})
-
-const emit = defineEmits<{
-  select: [plugin: PluginSwitcherPlugin]
-  'install-click': []
-}>()
-
-const { isOpen, rootRef, triggerRef, close, toggle } = useDropdownState()
-
-function initialsOf(plugin: PluginSwitcherPlugin) {
-  const label = plugin.label || plugin.id
-  return label.slice(0, 2).toUpperCase()
-}
-
-function handleSelect(plugin: PluginSwitcherPlugin) {
-  if (plugin.id === props.current.id) {
-    close()
-    return
-  }
-  emit('select', plugin)
-  close()
-}
-
-function handleInstall() {
-  emit('install-click')
-  close()
-}
-</script>
-
-<template>
-  <div ref="rootRef" class="mint-plugin-switcher">
-    <button
-      ref="triggerRef"
-      type="button"
-      class="mint-plugin-switcher__trigger"
-      :class="{ 'mint-plugin-switcher__trigger--open': isOpen }"
-      :aria-expanded="isOpen"
-      aria-haspopup="menu"
-      @click.stop="toggle"
-    >
-      <span class="mint-plugin-switcher__label">{{ current.label }}</span>
-      <span v-if="current.version" class="mint-plugin-switcher__version">v{{ current.version }}</span>
-      <span class="mint-plugin-switcher__chevron-wrap" aria-hidden="true">
-        <svg
-          class="mint-plugin-switcher__chevron"
-          :class="{ 'mint-plugin-switcher__chevron--open': isOpen }"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </span>
-    </button>
-
-    <div v-if="isOpen" class="mint-plugin-switcher__menu" role="menu">
-      <div class="mint-plugin-switcher__menu-title">Switch plugin</div>
-      <ActionItemInternal
-        v-for="plugin in plugins"
-        :key="plugin.id"
-        :href="plugin.href"
-        :to="plugin.to"
-        :class="[
-          'mint-plugin-switcher__item',
-          { 'mint-plugin-switcher__item--active': plugin.id === current.id },
-        ]"
-        role="menuitem"
-        @click="handleSelect(plugin)"
-      >
-        <span
-          class="mint-plugin-switcher__item-swatch"
-          :style="{ background: plugin.color ?? 'var(--color-primary)' }"
-        >
-          {{ initialsOf(plugin) }}
-        </span>
-        <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
-        <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
-        <svg
-          v-if="plugin.id === current.id"
-          class="mint-plugin-switcher__item-check"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M5 13l4 4L19 7" />
-        </svg>
-      </ActionItemInternal>
-
-      <template v-if="plugins.length && (installHref || installTo || $slots.install)">
-        <div class="mint-plugin-switcher__divider" role="separator" />
-      </template>
-      <slot name="install">
-        <ActionItemInternal
-          v-if="installHref || installTo"
-          :href="installHref"
-          :to="installTo"
-          class="mint-plugin-switcher__install"
-          role="menuitem"
-          @click="handleInstall"
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <line x1="12" y1="5" x2="12" y2="19" />
-            <line x1="5" y1="12" x2="19" y2="12" />
-          </svg>
-          <span>{{ installLabel }}</span>
-        </ActionItemInternal>
-      </slot>
-    </div>
-  </div>
-</template>

package/src/components/ColorSlider.story.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import ColorSlider from './ColorSlider.vue'
-
-const sizes = ['sm', 'md', 'lg'] as const
-</script>
-
-<template>
-  <Story title="Base Inputs/ColorSlider">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-          <ColorSlider
-            v-model="state.value"
-            :min="state.min"
-            :max="state.max"
-            :step="state.step"
-            :disabled="state.disabled"
-            :show-value="state.showValue"
-            :show-labels="state.showLabels"
-            :min-label="state.minLabel || undefined"
-            :max-label="state.maxLabel || undefined"
-            :size="state.size"
-          />
-          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-            Value: <code>{{ state.value }}</code>
-          </p>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" />
-        <HstSlider v-model="state.min" title="Min" :min="0" :max="50" />
-        <HstSlider v-model="state.max" title="Max" :min="50" :max="200" />
-        <HstSlider v-model="state.step" title="Step" :min="1" :max="25" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstCheckbox v-model="state.showValue" title="Show Value" />
-        <HstCheckbox v-model="state.showLabels" title="Show Labels" />
-        <HstText v-model="state.minLabel" title="Min Label" />
-        <HstText v-model="state.maxLabel" title="Max Label" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-      </template>
-    </Variant>
-
-    <Variant title="Sizes">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;">
-        <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>
-          <ColorSlider :model-value="50" :size="size" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="With Labels">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;">
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Default labels (min/max values)</p>
-          <ColorSlider :model-value="30" show-labels />
-        </div>
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Custom labels</p>
-          <ColorSlider :model-value="60" show-labels min-label="Low" max-label="High" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Custom Color Stops">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;">
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Blue to Red (cold to hot)</p>
-          <ColorSlider
-            :model-value="50"
-            :color-stops="[
-              { value: 0, color: '#3b82f6' },
-              { value: 50, color: '#a855f7' },
-              { value: 100, color: '#ef4444' },
-            ]"
-            show-labels
-            min-label="Cold"
-            max-label="Hot"
-          />
-        </div>
-        <div>
-          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Single color intensity</p>
-          <ColorSlider
-            :model-value="70"
-            :color-stops="[
-              { value: 0, color: '#dbeafe' },
-              { value: 100, color: '#1d4ed8' },
-            ]"
-          />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Custom Thresholds">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">
-          Green below 25%, yellow below 75%, red above
-        </p>
-        <ColorSlider
-          :model-value="50"
-          :thresholds="[25, 75]"
-          show-labels
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled">
-      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
-        <ColorSlider :model-value="65" disabled />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/ColorSlider.vue

@@ -1,160 +0,0 @@
-<script setup lang="ts">
-/** Range slider with a gradient color track and color-coded value badge for threshold visualization. */
-import { computed } from 'vue'
-
-interface ColorStop {
-  value: number
-  color: string
-}
-
-interface Props {
-  modelValue?: number
-  min?: number
-  max?: number
-  step?: number
-  disabled?: boolean
-  showValue?: boolean
-  showLabels?: boolean
-  minLabel?: string
-  maxLabel?: string
-  size?: 'sm' | 'md' | 'lg'
-  /** Color stops for the gradient. Default: green (low) → yellow (mid) → red (high) */
-  colorStops?: ColorStop[]
-  /** Thresholds for value badge color. Default: green ≤ threshold1, yellow ≤ threshold2, red above */
-  thresholds?: [number, number]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  min: 0,
-  max: 100,
-  step: 1,
-  disabled: false,
-  showValue: true,
-  showLabels: false,
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>()
-
-// Default color stops: green at start, yellow at 30%, red at end
-const defaultColorStops: ColorStop[] = [
-  { value: 0, color: '#22c55e' },
-  { value: 30, color: '#eab308' },
-  { value: 100, color: '#ef4444' },
-]
-
-// Default thresholds: green ≤ 10%, yellow ≤ 30%, red above
-const defaultThresholds: [number, number] = [10, 30]
-
-const colorStops = computed(() => props.colorStops ?? defaultColorStops)
-const thresholds = computed(() => props.thresholds ?? defaultThresholds)
-
-const sizeConfig = computed(() => {
-  switch (props.size) {
-    case 'sm': return { thumb: 16, badgeSize: '24px', fontSize: '11px', labelFontSize: '0.625rem' }
-    case 'lg': return { thumb: 22, badgeSize: '32px', fontSize: '14px', labelFontSize: '0.75rem' }
-    default: return { thumb: 18, badgeSize: '28px', fontSize: '12px', labelFontSize: '0.625rem' }
-  }
-})
-
-const currentValue = computed(() => props.modelValue ?? props.min)
-
-const percentage = computed(() => {
-  const range = props.max - props.min
-  if (range === 0) return 0
-  return ((currentValue.value - props.min) / range) * 100
-})
-
-// Generate CSS gradient from color stops
-const gradientStyle = computed(() => {
-  const stops = colorStops.value
-    .map(stop => `${stop.color} ${stop.value}%`)
-    .join(', ')
-  return `linear-gradient(to right, ${stops})`
-})
-
-// Value badge style based on thresholds
-const valueBadgeStyle = computed(() => {
-  const pct = percentage.value
-  const [t1, t2] = thresholds.value
-
-  if (pct <= t1) {
-    return {
-      backgroundColor: 'rgba(34, 197, 94, 0.15)',
-      color: '#22c55e',
-      border: '1px solid rgba(34, 197, 94, 0.3)'
-    }
-  }
-  if (pct <= t2) {
-    return {
-      backgroundColor: 'rgba(234, 179, 8, 0.15)',
-      color: '#eab308',
-      border: '1px solid rgba(234, 179, 8, 0.3)'
-    }
-  }
-  return {
-    backgroundColor: 'rgba(239, 68, 68, 0.15)',
-    color: '#ef4444',
-    border: '1px solid rgba(239, 68, 68, 0.3)'
-  }
-})
-
-function handleInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', Number(target.value))
-}
-</script>
-
-<template>
-  <div :class="['mint-color-slider', { 'mint-color-slider--disabled': disabled }]">
-    <div class="mint-color-slider__row">
-      <!-- Slider track with gradient -->
-      <div class="mint-color-slider__track">
-        <input
-          type="range"
-          :value="currentValue"
-          :min="min"
-          :max="max"
-          :step="step"
-          :disabled="disabled"
-          :aria-label="`Value: ${currentValue}`"
-          :aria-valuemin="min"
-          :aria-valuemax="max"
-          :aria-valuenow="currentValue"
-          class="color-slider mint-color-slider__input"
-          :style="{
-            '--slider-gradient': gradientStyle,
-            '--thumb-size': `${sizeConfig.thumb}px`,
-          }"
-          @input="handleInput"
-        />
-      </div>
-
-      <!-- Value badge -->
-      <div
-        v-if="showValue"
-        class="mint-color-slider__badge"
-        :style="{
-          ...valueBadgeStyle,
-          minWidth: sizeConfig.badgeSize,
-          height: sizeConfig.badgeSize,
-          fontSize: sizeConfig.fontSize,
-        }"
-      >
-        {{ currentValue }}
-      </div>
-    </div>
-
-    <!-- Min/Max labels -->
-    <div
-      v-if="showLabels"
-      class="mint-color-slider__labels"
-      :style="{ fontSize: sizeConfig.labelFontSize }"
-    >
-      <span>{{ minLabel ?? min }}</span>
-      <span>{{ maxLabel ?? max }}</span>
-    </div>
-  </div>
-</template>

package/src/components/DropdownButton.story.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import DropdownButton from './DropdownButton.vue'
-import type { ButtonVariant, ButtonSize, SelectOption } from '../types'
-
-const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
-const sizes: ButtonSize[] = ['sm', 'md', 'lg']
-
-const selected = ref<string | undefined>(undefined)
-
-const basicOptions: SelectOption<string>[] = [
-  { value: 'csv', label: 'CSV' },
-  { value: 'xlsx', label: 'Excel (.xlsx)' },
-  { value: 'json', label: 'JSON' },
-  { value: 'tsv', label: 'TSV', disabled: true },
-]
-
-const descriptiveOptions: SelectOption<string>[] = [
-  { value: 'quick', label: 'Quick Analysis', description: 'Basic statistics and QC checks' },
-  { value: 'full', label: 'Full Analysis', description: 'Comprehensive dose-response fitting' },
-  { value: 'custom', label: 'Custom Pipeline', description: 'Configure analysis steps manually' },
-]
-</script>
-
-<template>
-  <Story title="Action/DropdownButton">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <DropdownButton
-            v-model="selected"
-            :options="basicOptions"
-            :variant="state.variant"
-            :size="state.size"
-            :disabled="state.disabled"
-            :loading="state.loading"
-            :placeholder="state.placeholder"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.placeholder" title="Placeholder" />
-        <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.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-      </template>
-    </Variant>
-
-    <Variant title="All Variants">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;">
-        <div v-for="variant in variants" :key="variant" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <DropdownButton
-            :options="basicOptions"
-            :variant="variant"
-            placeholder="Export as..."
-          />
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8);">{{ variant }}</span>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="With Descriptions">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <DropdownButton
-          :options="descriptiveOptions"
-          variant="primary"
-          placeholder="Run Analysis..."
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Pre-selected Value">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <DropdownButton
-          model-value="xlsx"
-          :options="basicOptions"
-          variant="secondary"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled Option">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <DropdownButton
-          :options="basicOptions"
-          variant="secondary"
-          placeholder="Export format"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>