@morscherlab/mld-sdk 0.6.0

package/src/components/CollapsibleCard.story.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import CollapsibleCard from './CollapsibleCard.vue'
+</script>
+
+<template>
+  <Story title="Layout/CollapsibleCard">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+          <CollapsibleCard
+            :title="state.title"
+            :subtitle="state.subtitle || undefined"
+            :default-open="state.defaultOpen"
+            :disabled="state.disabled"
+            :show-toggle="state.showToggle"
+            :toggle-value="state.toggleValue"
+          >
+            <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+              This is the collapsible content area. It can contain any child elements.
+            </p>
+          </CollapsibleCard>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.subtitle" title="Subtitle" />
+        <HstCheckbox v-model="state.defaultOpen" title="Default Open" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.showToggle" title="Show Toggle" />
+        <HstCheckbox v-model="state.toggleValue" title="Toggle Value" />
+      </template>
+    </Variant>
+
+    <Variant title="Open by Default">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <CollapsibleCard title="Open Section" :default-open="true">
+          <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+            This card starts in the open state by default.
+          </p>
+        </CollapsibleCard>
+      </div>
+    </Variant>
+
+    <Variant title="Closed by Default">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <CollapsibleCard title="Closed Section" :default-open="false">
+          <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+            Click the header to reveal this content.
+          </p>
+        </CollapsibleCard>
+      </div>
+    </Variant>
+
+    <Variant title="With Subtitle">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <CollapsibleCard
+          title="Analysis Parameters"
+          subtitle="Configure settings for dose-response curve fitting"
+          :default-open="true"
+        >
+          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Model: 4-parameter logistic</p>
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Weighting: 1/Y^2</p>
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Iterations: 1000</p>
+          </div>
+        </CollapsibleCard>
+      </div>
+    </Variant>
+
+    <Variant title="With Icon">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <CollapsibleCard
+          title="Quality Control"
+          subtitle="Plate QC metrics and thresholds"
+          icon="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+          :default-open="true"
+        >
+          <p style="margin: 0; color: var(--text-muted, #94a3b8);">QC parameters and results appear here.</p>
+        </CollapsibleCard>
+      </div>
+    </Variant>
+
+    <Variant title="With Toggle Switch">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <CollapsibleCard
+          title="Notifications"
+          subtitle="Enable or disable notifications"
+          :default-open="true"
+          :show-toggle="true"
+          :toggle-value="true"
+        >
+          <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+            Notification preferences and settings.
+          </p>
+        </CollapsibleCard>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <CollapsibleCard title="Locked Section" :disabled="true" :default-open="false">
+          <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+            This content cannot be accessed.
+          </p>
+        </CollapsibleCard>
+      </div>
+    </Variant>
+
+    <Variant title="Multiple Cards">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem;">
+        <CollapsibleCard title="General Settings" :default-open="true">
+          <p style="margin: 0; color: var(--text-muted, #94a3b8);">General configuration options.</p>
+        </CollapsibleCard>
+        <CollapsibleCard title="Advanced Settings" :default-open="false">
+          <p style="margin: 0; color: var(--text-muted, #94a3b8);">Advanced configuration for power users.</p>
+        </CollapsibleCard>
+        <CollapsibleCard title="Export Options" :default-open="false">
+          <p style="margin: 0; color: var(--text-muted, #94a3b8);">Configure export format and destination.</p>
+        </CollapsibleCard>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/CollapsibleCard.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  title: string
+  subtitle?: string
+  defaultOpen?: boolean
+  disabled?: boolean
+  icon?: string | string[]
+  iconColor?: string
+  iconBg?: string
+  showToggle?: boolean
+  toggleValue?: boolean
+  toggleColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultOpen: false,
+  disabled: false,
+  showToggle: false,
+  toggleValue: false,
+  toggleColor: '',
+})
+
+const emit = defineEmits<{
+  'update:toggleValue': [value: boolean]
+}>()
+
+const isOpen = ref(props.defaultOpen)
+
+const toggle = () => {
+  if (!props.disabled) {
+    isOpen.value = !isOpen.value
+  }
+}
+
+const handleToggleClick = (event: Event) => {
+  event.stopPropagation()
+  emit('update:toggleValue', !props.toggleValue)
+}
+
+const headerClasses = computed(() => [
+  'mld-collapsible-card__header',
+  props.disabled ? 'mld-collapsible-card__header--disabled' : '',
+])
+
+const iconBgStyle = computed(() => ({
+  backgroundColor: props.iconBg || 'var(--color-primary-soft)',
+}))
+
+const iconColorStyle = computed(() => ({
+  color: props.iconColor || 'var(--color-primary)',
+}))
+
+const isSvgIcon = computed(() => {
+  if (!props.icon) return false
+  return Array.isArray(props.icon) || props.icon.startsWith('M') || props.icon.startsWith('m')
+})
+
+const toggleTrackStyle = computed(() => {
+  if (!props.toggleValue || !props.toggleColor) return {}
+  return {
+    backgroundColor: props.toggleColor,
+    borderColor: props.toggleColor,
+  }
+})
+</script>
+
+<template>
+  <div class="mld-collapsible-card">
+    <button
+      type="button"
+      :class="headerClasses"
+      :disabled="disabled"
+      :aria-expanded="isOpen"
+      @click="toggle"
+    >
+      <div class="mld-collapsible-card__title-section">
+        <!-- Icon badge -->
+        <div v-if="icon" class="mld-collapsible-card__icon-badge" :style="iconBgStyle">
+          <svg
+            v-if="isSvgIcon"
+            class="mld-collapsible-card__icon"
+            :style="iconColorStyle"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <template v-if="Array.isArray(icon)">
+              <path v-for="(d, i) in icon" :key="i" :d="d" />
+            </template>
+            <path v-else :d="icon" />
+          </svg>
+          <span v-else class="mld-collapsible-card__icon-text" :style="iconColorStyle">{{ icon }}</span>
+        </div>
+
+        <div class="mld-collapsible-card__titles">
+          <h3 class="mld-collapsible-card__title">{{ title }}</h3>
+          <p v-if="subtitle" class="mld-collapsible-card__subtitle">{{ subtitle }}</p>
+        </div>
+      </div>
+
+      <div class="mld-collapsible-card__actions">
+        <!-- Toggle switch -->
+        <div
+          v-if="showToggle"
+          class="mld-collapsible-card__toggle"
+          @click="handleToggleClick"
+        >
+          <div
+            role="switch"
+            tabindex="0"
+            :aria-checked="toggleValue"
+            :class="[
+              'mld-collapsible-card__toggle-track',
+              toggleValue ? 'mld-collapsible-card__toggle-track--on' : '',
+            ]"
+            :style="toggleTrackStyle"
+            @keydown.enter.prevent="handleToggleClick"
+            @keydown.space.prevent="handleToggleClick"
+          >
+            <span
+              :class="[
+                'mld-collapsible-card__toggle-knob',
+                toggleValue ? 'mld-collapsible-card__toggle-knob--on' : '',
+              ]"
+            />
+          </div>
+        </div>
+
+        <!-- Chevron -->
+        <svg
+          :class="[
+            'mld-collapsible-card__chevron',
+            isOpen ? 'mld-collapsible-card__chevron--open' : '',
+          ]"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </div>
+    </button>
+
+    <Transition name="collapse">
+      <div v-show="isOpen" class="mld-collapsible-card__body">
+        <div class="mld-collapsible-card__content">
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/collapsible-card.css';
+</style>

package/src/components/ColorSlider.story.vue

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+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="['mld-color-slider', { 'mld-color-slider--disabled': disabled }]">
+    <div class="mld-color-slider__row">
+      <!-- Slider track with gradient -->
+      <div class="mld-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 mld-color-slider__input"
+          :style="{
+            '--slider-gradient': gradientStyle,
+            '--thumb-size': `${sizeConfig.thumb}px`,
+          }"
+          @input="handleInput"
+        />
+      </div>
+
+      <!-- Value badge -->
+      <div
+        v-if="showValue"
+        class="mld-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="mld-color-slider__labels"
+      :style="{ fontSize: sizeConfig.labelFontSize }"
+    >
+      <span>{{ minLabel ?? min }}</span>
+      <span>{{ maxLabel ?? max }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/color-slider.css';
+</style>

package/src/components/ConcentrationInput.story.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import ConcentrationInput from './ConcentrationInput.vue'
+import type { ConcentrationValue, ConcentrationUnit } from '../composables/useConcentrationUnits'
+
+function initState() {
+  return {
+    modelValue: { value: 100, unit: 'uM' as ConcentrationUnit } as ConcentrationValue | undefined,
+    showConversion: true,
+    disabled: false,
+    error: false,
+    size: 'md' as const,
+    placeholder: 'Enter value',
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/ConcentrationInput">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px;">
+          <ConcentrationInput
+            v-model="state.modelValue"
+            :show-conversion="state.showConversion"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+            :placeholder="state.placeholder"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.showConversion" title="Show Conversion" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[
+            { value: 'sm', label: 'Small' },
+            { value: 'md', label: 'Medium' },
+            { value: 'lg', label: 'Large' },
+          ]"
+        />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+      </template>
+    </Variant>
+
+    <Variant title="With Min/Max">
+      <div style="padding: 2rem; max-width: 400px;">
+        <ConcentrationInput
+          :model-value="{ value: 50, unit: 'uM' as ConcentrationUnit }"
+          :min="0"
+          :max="1000"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 400px;">
+        <ConcentrationInput
+          :model-value="{ value: 10, unit: 'mM' as ConcentrationUnit }"
+          disabled
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 400px;">
+        <ConcentrationInput
+          :model-value="{ value: -5, unit: 'nM' as ConcentrationUnit }"
+          error
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>