@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/DropdownButton.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+/** Button that opens a dropdown menu for selecting one option from a list. */
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import type { SelectOption, ButtonVariant, ButtonSize } from '../types'
+
+/**
+ * DropdownButton - Button-style select with dropdown menu for option selection.
+ *
+ * @example
+ * ```vue
+ * <DropdownButton
+ *   v-model="selectedValue"
+ *   :options="[
+ *     { value: 'a', label: 'Option A' },
+ *     { value: 'b', label: 'Option B', description: 'Additional info' }
+ *   ]"
+ *   variant="secondary"
+ * />
+ * ```
+ */
+interface Props {
+  /** Selected option value */
+  modelValue?: string | number
+  /** Available options */
+  options: SelectOption<string | number>[]
+  /** Placeholder text when no option is selected */
+  placeholder?: string
+  /** Button style variant */
+  variant?: ButtonVariant
+  /** Button size */
+  size?: ButtonSize
+  /** Disable interaction */
+  disabled?: boolean
+  /** Show loading spinner */
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'secondary',
+  size: 'md',
+  disabled: false,
+  loading: false,
+})
+
+/**
+ * @event update:modelValue - Emitted when an option is selected (v-model support)
+ * @event select - Emitted when an option is selected, includes full option object
+ */
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+  select: [option: SelectOption<string | number>]
+}>()
+
+const isOpen = ref(false)
+const containerRef = ref<HTMLDivElement>()
+
+const selectedLabel = computed(() => {
+  if (props.modelValue === undefined) return props.placeholder ?? 'Select...'
+  const found = props.options.find(o => o.value === props.modelValue)
+  return found?.label ?? String(props.modelValue)
+})
+
+function toggle() {
+  if (props.disabled || props.loading) return
+  isOpen.value = !isOpen.value
+}
+
+function selectOption(option: SelectOption<string | number>) {
+  if (option.disabled) return
+  emit('update:modelValue', option.value)
+  emit('select', option)
+  isOpen.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="mld-dropdown-button">
+    <button
+      type="button"
+      :disabled="disabled || loading"
+      :class="[
+        'mld-dropdown-button__trigger',
+        `mld-dropdown-button__trigger--${variant}`,
+        `mld-dropdown-button__trigger--${size}`,
+        {
+          'mld-dropdown-button__trigger--disabled': disabled || loading,
+          'mld-dropdown-button__trigger--open': isOpen,
+        },
+      ]"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      @click="toggle"
+    >
+      <svg v-if="loading" class="mld-dropdown-button__spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
+        <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+      </svg>
+      <span class="mld-dropdown-button__label">{{ selectedLabel }}</span>
+      <svg
+        :class="['mld-dropdown-button__chevron', { 'mld-dropdown-button__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>
+    </button>
+
+    <Transition name="mld-dropdown-button-menu">
+      <ul
+        v-if="isOpen"
+        class="mld-dropdown-button__menu"
+        role="listbox"
+        :aria-activedescendant="modelValue !== undefined ? `mld-dropdown-option-${modelValue}` : undefined"
+      >
+        <li
+          v-for="option in options"
+          :id="`mld-dropdown-option-${option.value}`"
+          :key="String(option.value)"
+          role="option"
+          :aria-selected="option.value === modelValue"
+          :aria-disabled="option.disabled"
+          :class="[
+            'mld-dropdown-button__option',
+            {
+              'mld-dropdown-button__option--selected': option.value === modelValue,
+              'mld-dropdown-button__option--disabled': option.disabled,
+            },
+          ]"
+          @click="selectOption(option)"
+        >
+          <span class="mld-dropdown-button__option-label">{{ option.label }}</span>
+          <span v-if="option.description" class="mld-dropdown-button__option-description">
+            {{ option.description }}
+          </span>
+          <svg
+            v-if="option.value === modelValue"
+            class="mld-dropdown-button__option-check"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        </li>
+      </ul>
+    </Transition>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/dropdown-button.css';
+</style>

package/src/components/EmptyState.story.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import EmptyState from './EmptyState.vue'
+import type { EmptyStateColor, EmptyStateSize } from '../types'
+
+const colors: EmptyStateColor[] = ['primary', 'cta', 'success', 'warning', 'error', 'muted']
+const sizes: EmptyStateSize[] = ['sm', 'md', 'lg']
+</script>
+
+<template>
+  <Story title="Feedback/EmptyState">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <EmptyState
+            :title="state.title"
+            :description="state.description"
+            :color="state.color"
+            :size="state.size"
+            :action-label="state.showAction ? state.actionLabel : undefined"
+            @action="() => console.log('Action clicked')"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.description" title="Description" />
+        <HstSelect
+          v-model="state.color"
+          title="Color"
+          :options="colors.map(c => ({ label: c, value: c }))"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.showAction" title="Show Action" />
+        <HstText v-model="state.actionLabel" title="Action Label" />
+      </template>
+    </Variant>
+
+    <Variant title="No Experiments">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="No experiments yet"
+          description="Create your first experiment to get started with data analysis."
+          action-label="Create Experiment"
+          color="primary"
+          @action="() => console.log('Create experiment')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="No Results">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="No results found"
+          description="Try adjusting your search filters or broadening your query."
+          color="muted"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="Something went wrong"
+          description="We couldn't load the plate data. Please check your connection and try again."
+          color="error"
+          action-label="Retry"
+          icon-path="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+          @action="() => console.log('Retry')"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Colors">
+      <div style="padding: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;">
+        <EmptyState
+          v-for="color in colors"
+          :key="color"
+          :title="`${color.charAt(0).toUpperCase() + color.slice(1)} state`"
+          description="Example description text."
+          :color="color"
+          size="sm"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 3rem;">
+        <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>
+          <EmptyState
+            :title="`Empty state (${size})`"
+            description="This shows the different size options available."
+            :size="size"
+            color="muted"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Content">
+      <div style="padding: 2rem;">
+        <EmptyState
+          title="Upload your data"
+          description="Drag and drop CSV or Excel files, or click below to browse."
+          color="cta"
+        >
+          <div style="margin-top: 1rem; padding: 2rem; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem; text-align: center;">
+            <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">
+              Drop files here or click to upload
+            </p>
+          </div>
+        </EmptyState>
+      </div>
+    </Variant>
+    <Variant title="Inline variant — inside panels">
+      <div style="padding: 2rem; max-width: 640px;">
+        <EmptyState
+          variant="inline"
+          color="primary"
+          title="No experiments yet"
+          description="Create one to start designing your next assay."
+          action-label="New experiment"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/EmptyState.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/** Empty-state placeholder with icon badge, headline, description, default slot, and optional CTA button. */
+interface Props {
+  title?: string
+  description?: string
+  iconPath?: string
+  color?: 'primary' | 'cta' | 'success' | 'warning' | 'error' | 'muted'
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'illustrated' | 'inline'
+  actionLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  color: 'primary',
+  size: 'md',
+  variant: 'illustrated',
+})
+
+const emit = defineEmits<{
+  action: []
+}>()
+
+const defaultIconPaths = [
+  'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z',
+  'M7 11h10',
+  'M7 15h6',
+  'M7 7h8',
+]
+</script>
+
+<template>
+  <div :class="['mld-empty-state', `mld-empty-state--${variant}`, `mld-empty-state--${size}`]">
+    <div :class="['mld-empty-state__icon-wrapper', `mld-empty-state__icon-wrapper--${color}`]">
+      <slot name="icon">
+        <svg
+          class="mld-empty-state__icon"
+          :class="`mld-empty-state__icon--${color}`"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <template v-if="iconPath">
+            <path :d="iconPath" />
+          </template>
+          <template v-else>
+            <path v-for="(d, i) in defaultIconPaths" :key="i" :d="d" />
+          </template>
+        </svg>
+      </slot>
+    </div>
+    <div class="mld-empty-state__body">
+      <h3 v-if="title" class="mld-empty-state__title">{{ title }}</h3>
+      <p v-if="description" class="mld-empty-state__description">{{ description }}</p>
+      <slot />
+    </div>
+    <div v-if="actionLabel" class="mld-empty-state__action">
+      <button class="mld-empty-state__button" @click="emit('action')">
+        {{ actionLabel }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/empty-state.css';
+</style>

package/src/components/ExperimentCodeBadge.story.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import ExperimentCodeBadge from './ExperimentCodeBadge.vue'
+
+const sizes = ['sm', 'md', 'lg'] as const
+</script>
+
+<template>
+  <Story title="Experiment/ExperimentCodeBadge">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <ExperimentCodeBadge
+            :code="state.code"
+            :size="state.size"
+            :copyable="state.copyable"
+            @copy="(code) => console.log('Copied:', code)"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.code" title="Code" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.copyable" title="Copyable" />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <div v-for="size in sizes" :key="size" style="display: flex; align-items: center; gap: 1rem;">
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; width: 2rem;">
+            {{ size }}
+          </span>
+          <ExperimentCodeBadge :code="'EXP-2024-001'" :size="size" :copyable="false" />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Long Code">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start;">
+        <ExperimentCodeBadge code="EXP-2024-001" :copyable="false" />
+        <ExperimentCodeBadge code="DR-CV-HEK293T-2024-12-001" :copyable="false" />
+        <ExperimentCodeBadge code="IC50-PANC1-GEM-SERIES-A" :copyable="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Copyable Demo">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0;">
+          Click any badge to copy its code to clipboard
+        </p>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+          <ExperimentCodeBadge
+            code="EXP-2024-001"
+            @copy="(code) => console.log('Copied:', code)"
+          />
+          <ExperimentCodeBadge
+            code="DR-HeLa-DOX-003"
+            @copy="(code) => console.log('Copied:', code)"
+          />
+          <ExperimentCodeBadge
+            code="CV-MCF7-24H"
+            @copy="(code) => console.log('Copied:', code)"
+          />
+        </div>
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0;">
+          Non-copyable badge (display only)
+        </p>
+        <ExperimentCodeBadge code="EXP-2024-001" :copyable="false" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ExperimentCodeBadge.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/** Inline badge that displays an experiment code and copies it to the clipboard on click. */
+import { ref } from 'vue'
+
+interface Props {
+  code: string
+  size?: 'sm' | 'md' | 'lg'
+  copyable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  copyable: true,
+})
+
+const emit = defineEmits<{
+  copy: [code: string]
+}>()
+
+const copied = ref(false)
+let copyTimeout: ReturnType<typeof setTimeout> | null = null
+
+async function handleCopy() {
+  if (!props.copyable) return
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    emit('copy', props.code)
+    if (copyTimeout) clearTimeout(copyTimeout)
+    copyTimeout = setTimeout(() => { copied.value = false }, 1500)
+  } catch {
+    // Clipboard API not available (e.g. insecure context)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!props.copyable) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    handleCopy()
+  }
+}
+</script>
+
+<template>
+  <span
+    :class="[
+      'mld-exp-code',
+      `mld-exp-code--${size}`,
+      { 'mld-exp-code--copyable': copyable, 'mld-exp-code--copied': copied },
+    ]"
+    :role="copyable ? 'button' : undefined"
+    :tabindex="copyable ? 0 : undefined"
+    :title="copyable ? (copied ? 'Copied!' : 'Click to copy') : undefined"
+    @click="handleCopy"
+    @keydown="handleKeydown"
+  >
+    {{ copied ? 'Copied!' : code }}
+  </span>
+</template>
+
+<style>
+@import '../styles/components/experiment-code-badge.css';
+</style>