@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.3

package/src/components/JobsStatusTray.vue

@@ -1,392 +0,0 @@
-<script setup lang="ts">
-/**
- * Floating, source-driven job status tray for plugin and platform workflows.
- *
- * @example Recommended
- * ```vue
- * <JobsStatusTray :source="jobs" />
- * ```
- */
-import { computed, nextTick, ref, toRef, useId } from 'vue'
-
-import {
-  jobStatusLabel,
-  normalizeJobPercent,
-} from '../jobs'
-import {
-  usePluginJobCenter,
-  type PluginJobCenterSource,
-} from '../composables/useJobsStatusTray'
-import type { JobState } from '../types/jobs'
-
-interface Props {
-  source?: PluginJobCenterSource
-  loadOnMount?: boolean
-  title?: string
-  teleportTo?: string | HTMLElement | false
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  loadOnMount: true,
-  title: 'Analysis jobs',
-  teleportTo: 'body',
-})
-
-const emit = defineEmits<{
-  select: [job: JobState]
-  error: [message: string]
-}>()
-
-defineSlots<{
-  /** Extra per-row actions, rendered before the built-in Cancel / Delete. */
-  'job-actions'?: (props: { job: JobState }) => unknown
-}>()
-
-const panelId = `mint-jobs-tray-${useId().replace(/:/g, '')}`
-const titleId = `${panelId}-title`
-const triggerRef = ref<HTMLButtonElement | null>(null)
-const panelRef = ref<HTMLElement | null>(null)
-const teleportTarget = computed(() => props.teleportTo || 'body')
-const tray = usePluginJobCenter({
-  source: toRef(props, 'source'),
-  loadOnMount: props.loadOnMount,
-})
-const canClear = computed(() => (
-  tray.deletableJobs.value.length > 0
-  && tray.canClearFinished.value
-))
-
-async function openTray(): Promise<void> {
-  tray.open()
-  await nextTick()
-  panelRef.value?.focus()
-}
-
-async function closeTray(): Promise<void> {
-  tray.close()
-  await nextTick()
-  triggerRef.value?.focus()
-}
-
-async function toggleTray(): Promise<void> {
-  if (tray.isOpen.value) await closeTray()
-  else await openTray()
-}
-
-function onPanelKeydown(event: KeyboardEvent): void {
-  if (event.key === 'Escape') {
-    void closeTray()
-    return
-  }
-  if (event.key !== 'Tab' || !panelRef.value) return
-  const focusable = Array.from(panelRef.value.querySelectorAll<HTMLElement>(
-    'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
-  ))
-  if (focusable.length === 0) {
-    event.preventDefault()
-    panelRef.value.focus()
-    return
-  }
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-  const activeElement = document.activeElement as HTMLElement | null
-  if (!activeElement || !focusable.includes(activeElement)) {
-    event.preventDefault()
-    if (event.shiftKey) last?.focus()
-    else first?.focus()
-  } else if (event.shiftKey && activeElement === first) {
-    event.preventDefault()
-    last?.focus()
-  } else if (!event.shiftKey && activeElement === last) {
-    event.preventDefault()
-    first?.focus()
-  }
-}
-
-function progressText(job: JobState): string {
-  if (job.status === 'awaiting_input') {
-    return job.progress.message || 'Waiting for external input'
-  }
-  if (job.status === 'queued' && job.queue_position > 0) {
-    return `Queue position ${job.queue_position}`
-  }
-  return job.progress.message || job.progress.stage || jobStatusLabel(job.status)
-}
-
-function formatTimestamp(value: string | null): string {
-  if (!value) return ''
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? ''
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
-
-function statusClass(job: JobState): string {
-  return `mint-jobs-tray__status--${job.status.replace('_', '-')}`
-}
-
-async function cancelJob(job: JobState): Promise<void> {
-  const succeeded = await tray.cancelJob(job)
-  if (!succeeded && tray.error.value) emit('error', tray.error.value)
-}
-
-async function deleteJob(job: JobState): Promise<void> {
-  const succeeded = await tray.deleteJob(job)
-  if (!succeeded && tray.error.value) emit('error', tray.error.value)
-}
-
-async function clearFinished(): Promise<void> {
-  const succeeded = await tray.clearFinished()
-  if (!succeeded && tray.error.value) emit('error', tray.error.value)
-}
-</script>
-
-<template>
-  <Teleport :to="teleportTarget" :disabled="teleportTo === false">
-    <div class="mint-jobs-tray">
-      <button
-        ref="triggerRef"
-        type="button"
-        class="mint-jobs-tray__trigger"
-        aria-haspopup="dialog"
-        :aria-expanded="tray.isOpen.value"
-        :aria-controls="panelId"
-        @click="toggleTray"
-      >
-        <svg
-          class="mint-jobs-tray__trigger-icon"
-          :class="{ 'mint-jobs-tray__trigger-icon--active': tray.activeJobs.value.length > 0 }"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          aria-hidden="true"
-        >
-          <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
-          <path d="M9 5a3 3 0 0 1 6 0v2H9V5Z" />
-        </svg>
-        <span class="mint-jobs-tray__trigger-label">
-          {{ tray.featuredJob.value ? jobStatusLabel(tray.featuredJob.value.status) : 'Jobs' }}
-        </span>
-        <span
-          v-if="tray.activeJobs.value.length > 0"
-          class="mint-jobs-tray__count"
-          aria-live="polite"
-        >
-          {{ tray.activeJobs.value.length }}
-        </span>
-      </button>
-
-      <Transition name="mint-jobs-tray-fade">
-        <div
-          v-if="tray.isOpen.value"
-          class="mint-jobs-tray__backdrop"
-          aria-hidden="true"
-          @click="closeTray"
-        />
-      </Transition>
-
-      <Transition name="mint-jobs-tray-slide">
-        <section
-          v-if="tray.isOpen.value"
-          :id="panelId"
-          ref="panelRef"
-          class="mint-jobs-tray__panel"
-          role="dialog"
-          aria-modal="true"
-          :aria-labelledby="titleId"
-          tabindex="-1"
-          @keydown="onPanelKeydown"
-        >
-          <header class="mint-jobs-tray__header">
-            <div>
-              <h2 :id="titleId" class="mint-jobs-tray__title">{{ title }}</h2>
-              <p class="mint-jobs-tray__subtitle">{{ tray.jobs.value.length }} total</p>
-            </div>
-            <div class="mint-jobs-tray__header-actions">
-              <button
-                v-if="tray.canRefresh.value"
-                type="button"
-                class="mint-jobs-tray__icon-button"
-                aria-label="Refresh jobs"
-                :disabled="tray.isLoading.value"
-                @click="tray.refresh"
-              >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                  <path d="M20 6v5h-5M4 18v-5h5" />
-                  <path d="M18.4 9A7 7 0 0 0 6.1 6.1L4 8m2 7a7 7 0 0 0 11.9 2.9L20 16" />
-                </svg>
-              </button>
-              <button
-                type="button"
-                class="mint-jobs-tray__icon-button"
-                aria-label="Close jobs"
-                @click="closeTray"
-              >
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                  <path d="m6 6 12 12M18 6 6 18" />
-                </svg>
-              </button>
-            </div>
-          </header>
-
-          <div class="mint-jobs-tray__tabs" role="tablist" aria-label="Job groups">
-            <button
-              type="button"
-              role="tab"
-              data-tab="active"
-              class="mint-jobs-tray__tab"
-              :class="{ 'mint-jobs-tray__tab--active': tray.activeTab.value === 'active' }"
-              :aria-selected="tray.activeTab.value === 'active'"
-              @click="tray.activeTab.value = 'active'"
-            >
-              Active
-              <span class="mint-jobs-tray__tab-count">{{ tray.activeJobs.value.length }}</span>
-            </button>
-            <button
-              type="button"
-              role="tab"
-              data-tab="history"
-              class="mint-jobs-tray__tab"
-              :class="{ 'mint-jobs-tray__tab--active': tray.activeTab.value === 'history' }"
-              :aria-selected="tray.activeTab.value === 'history'"
-              @click="tray.activeTab.value = 'history'"
-            >
-              History
-              <span class="mint-jobs-tray__tab-count">{{ tray.historyJobs.value.length }}</span>
-            </button>
-          </div>
-
-          <p v-if="tray.error.value" class="mint-jobs-tray__error" role="alert">
-            {{ tray.error.value }}
-          </p>
-
-          <div class="mint-jobs-tray__body">
-            <template v-if="tray.activeTab.value === 'active'">
-              <p v-if="tray.activeJobs.value.length === 0" class="mint-jobs-tray__empty">
-                No active jobs
-              </p>
-              <article
-                v-for="job in tray.activeJobs.value"
-                :key="job.job_id"
-                class="mint-jobs-tray__job mint-jobs-tray__job--active"
-              >
-                <div class="mint-jobs-tray__job-heading">
-                  <div class="mint-jobs-tray__job-identity">
-                    <button
-                      type="button"
-                      class="mint-jobs-tray__job-select"
-                      @click="emit('select', job)"
-                    >
-                      {{ job.name }}
-                    </button>
-                    <span class="mint-jobs-tray__kind">{{ job.kind }}</span>
-                  </div>
-                  <span class="mint-jobs-tray__status" :class="statusClass(job)">
-                    {{ jobStatusLabel(job.status) }}
-                  </span>
-                </div>
-                <div
-                  v-if="job.status === 'running'"
-                  class="mint-jobs-tray__progress"
-                  role="progressbar"
-                  aria-label="Job progress"
-                  aria-valuemin="0"
-                  aria-valuemax="100"
-                  :aria-valuenow="normalizeJobPercent(job.progress.percent)"
-                >
-                  <span :style="{ width: `${normalizeJobPercent(job.progress.percent)}%` }" />
-                </div>
-                <div class="mint-jobs-tray__job-footer">
-                  <span>{{ progressText(job) }}</span>
-                  <div class="mint-jobs-tray__job-actions">
-                    <slot name="job-actions" :job="job" />
-                    <button
-                      v-if="job.can_cancel && tray.canCancel.value"
-                      type="button"
-                      class="mint-jobs-tray__action mint-jobs-tray__action--danger"
-                      aria-label="Cancel job"
-                      :disabled="tray.isPending(job)"
-                      @click="cancelJob(job)"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      v-if="job.can_delete && tray.canDelete.value"
-                      type="button"
-                      class="mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger"
-                      aria-label="Delete job"
-                      :disabled="tray.isPending(job)"
-                      @click="deleteJob(job)"
-                    >
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                        <path d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13M10 11v5M14 11v5" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </article>
-            </template>
-
-            <template v-else>
-              <div v-if="canClear" class="mint-jobs-tray__clear-row">
-                <button
-                  type="button"
-                  class="mint-jobs-tray__action mint-jobs-tray__action--danger"
-                  @click="clearFinished"
-                >
-                  Clear finished
-                </button>
-              </div>
-              <p v-if="tray.historyJobs.value.length === 0" class="mint-jobs-tray__empty">
-                No job history
-              </p>
-              <article
-                v-for="job in tray.historyJobs.value"
-                :key="job.job_id"
-                class="mint-jobs-tray__job"
-              >
-                <div class="mint-jobs-tray__job-heading">
-                  <div class="mint-jobs-tray__job-identity">
-                    <button
-                      type="button"
-                      class="mint-jobs-tray__job-select"
-                      @click="emit('select', job)"
-                    >
-                      {{ job.name }}
-                    </button>
-                    <span class="mint-jobs-tray__kind">{{ job.kind }}</span>
-                  </div>
-                  <span class="mint-jobs-tray__status" :class="statusClass(job)">
-                    {{ jobStatusLabel(job.status) }}
-                  </span>
-                </div>
-                <div class="mint-jobs-tray__job-footer">
-                  <span>{{ formatTimestamp(job.completed_at || job.created_at) }}</span>
-                  <div class="mint-jobs-tray__job-actions">
-                    <slot name="job-actions" :job="job" />
-                    <button
-                      v-if="job.can_delete && tray.canDelete.value"
-                      type="button"
-                      class="mint-jobs-tray__icon-button mint-jobs-tray__icon-button--danger"
-                      aria-label="Delete job"
-                      :disabled="tray.isPending(job)"
-                      @click="deleteJob(job)"
-                    >
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
-                        <path d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13M10 11v5M14 11v5" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </article>
-            </template>
-          </div>
-        </section>
-      </Transition>
-    </div>
-  </Teleport>
-</template>
-
-<style>
-@import '../styles/components/jobs-status-tray.css';
-</style>

package/src/components/LcmsSequenceTable.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-/** Table for Xcalibur-compatible LCMS sequence rows with optional reorder/remove/duplicate controls. */
-import { computed, ref } from 'vue'
-import {
-  basenameFromWindowsPath,
-  DEFAULT_LCMS_SEQUENCE_COLUMNS,
-  type LcmsSequenceItem,
-  type LcmsSequenceTableColumn,
-} from '../lcms'
-
-interface Props {
-  items?: LcmsSequenceItem[]
-  columns?: LcmsSequenceTableColumn[]
-  editable?: boolean
-  maxRows?: number
-  showMoreLabel?: boolean
-  emptyMessage?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  columns: () => DEFAULT_LCMS_SEQUENCE_COLUMNS,
-  editable: false,
-  maxRows: undefined,
-  showMoreLabel: true,
-  emptyMessage: 'No sequence items to display',
-})
-
-const emit = defineEmits<{
-  reorder: [fromIndex: number, toIndex: number]
-  remove: [index: number]
-  duplicate: [index: number]
-}>()
-
-const dragIndex = ref<number | null>(null)
-const dropTargetIndex = ref<number | null>(null)
-
-const displayItems = computed(() => {
-  if (!props.maxRows) return props.items
-  return props.items.slice(0, props.maxRows)
-})
-
-const hasMore = computed(() =>
-  props.maxRows != null && props.items.length > props.maxRows
-)
-
-function sampleTypeClass(type: string): string {
-  const normalized = type.toLowerCase()
-  if (normalized === 'blank') return 'mint-lcms-sequence-table__type--blank'
-  if (normalized === 'qc' || normalized === 'iqc' || normalized === 'eqc') {
-    return 'mint-lcms-sequence-table__type--qc'
-  }
-  return 'mint-lcms-sequence-table__type--sample'
-}
-
-function cellValue(item: LcmsSequenceItem, column: LcmsSequenceTableColumn, index: number): string | number {
-  if (column.key === 'index') return index + 1
-  if (column.key === 'actions') return ''
-  if (column.key === 'instrument_method') return basenameFromWindowsPath(item.instrument_method)
-  return item[column.key] ?? ''
-}
-
-function onDragStart(event: DragEvent, index: number) {
-  if (!props.editable) return
-  dragIndex.value = index
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', String(index))
-  }
-}
-
-function onDragOver(event: DragEvent, index: number) {
-  if (!props.editable) return
-  event.preventDefault()
-  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
-  if (dragIndex.value !== null && dragIndex.value !== index) {
-    dropTargetIndex.value = index
-  }
-}
-
-function clearDragState() {
-  dragIndex.value = null
-  dropTargetIndex.value = null
-}
-
-function onDrop(event: DragEvent, toIndex: number) {
-  if (!props.editable) return
-  event.preventDefault()
-  if (dragIndex.value !== null && dragIndex.value !== toIndex) {
-    emit('reorder', dragIndex.value, toIndex)
-  }
-  clearDragState()
-}
-</script>
-
-<template>
-  <div class="mint-lcms-sequence-table">
-    <div class="mint-lcms-sequence-table__scroller">
-      <table class="mint-lcms-sequence-table__table">
-        <thead>
-          <tr>
-            <th v-if="editable" class="mint-lcms-sequence-table__drag-header" />
-            <th
-              v-for="column in columns"
-              :key="column.key"
-              :class="[
-                'mint-lcms-sequence-table__th',
-                { 'mint-lcms-sequence-table__th--right': column.align === 'right' },
-              ]"
-            >
-              {{ column.label }}
-            </th>
-            <th v-if="editable" class="mint-lcms-sequence-table__actions-header" />
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(item, index) in displayItems"
-            :key="`${item.file_name}-${item.position}-${index}`"
-            :draggable="editable"
-            class="mint-lcms-sequence-table__row"
-            :class="{
-              'mint-lcms-sequence-table__row--dragging': dragIndex === index,
-              'mint-lcms-sequence-table__row--drop-above': dropTargetIndex === index && dragIndex !== null && dragIndex > index,
-              'mint-lcms-sequence-table__row--drop-below': dropTargetIndex === index && dragIndex !== null && dragIndex < index,
-            }"
-            @dragstart="onDragStart($event, index)"
-            @dragenter.prevent
-            @dragover="onDragOver($event, index)"
-            @dragleave="dropTargetIndex = null"
-            @drop="onDrop($event, index)"
-            @dragend="clearDragState"
-          >
-            <td v-if="editable" class="mint-lcms-sequence-table__drag-cell">
-              <span class="mint-lcms-sequence-table__drag-handle" aria-hidden="true">::</span>
-            </td>
-            <td
-              v-for="column in columns"
-              :key="column.key"
-              :class="[
-                'mint-lcms-sequence-table__td',
-                `mint-lcms-sequence-table__td--${column.key}`,
-                { 'mint-lcms-sequence-table__td--right': column.align === 'right' },
-              ]"
-              :title="column.key === 'instrument_method' ? item.instrument_method : undefined"
-            >
-              <span
-                v-if="column.key === 'sample_type'"
-                class="mint-lcms-sequence-table__type"
-                :class="sampleTypeClass(item.sample_type)"
-              >
-                {{ item.sample_type }}
-              </span>
-              <template v-else>{{ cellValue(item, column, index) }}</template>
-            </td>
-            <td v-if="editable" class="mint-lcms-sequence-table__actions">
-              <button
-                type="button"
-                class="mint-lcms-sequence-table__action"
-                title="Duplicate"
-                @click="emit('duplicate', index)"
-              >
-                +
-              </button>
-              <button
-                type="button"
-                class="mint-lcms-sequence-table__action mint-lcms-sequence-table__action--danger"
-                title="Delete"
-                @click="emit('remove', index)"
-              >
-                x
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div v-if="items.length === 0" class="mint-lcms-sequence-table__empty">
-      {{ emptyMessage }}
-    </div>
-
-    <div v-if="hasMore && showMoreLabel" class="mint-lcms-sequence-table__more">
-      Showing first {{ maxRows }} of {{ items.length }} items
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/lcms-sequence-table.css';
-</style>

package/src/components/LoadingSpinner.story.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import LoadingSpinner from './LoadingSpinner.vue'
-import type { SpinnerSize, SpinnerVariant } from '../types'
-
-const sizes: SpinnerSize[] = ['xs', 'sm', 'md', 'lg']
-const variants: SpinnerVariant[] = ['primary', 'cta', 'muted']
-</script>
-
-<template>
-  <Story title="Feedback/LoadingSpinner">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <LoadingSpinner
-            :size="state.size"
-            :variant="state.variant"
-            :label="state.label"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
-        />
-        <HstText v-model="state.label" title="Label" />
-      </template>
-    </Variant>
-
-    <Variant title="All Sizes">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end; justify-content: center;">
-        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <LoadingSpinner :size="size" />
-          <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="All Variants">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center;">
-        <div v-for="variant in variants" :key="variant" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
-          <LoadingSpinner :variant="variant" size="md" />
-          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">{{ variant }}</span>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Custom Labels">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem; align-items: center;">
-        <LoadingSpinner size="md" label="Loading experiments..." />
-        <LoadingSpinner size="sm" label="Processing plates..." variant="cta" />
-        <LoadingSpinner size="lg" label="Analyzing data..." />
-      </div>
-    </Variant>
-
-    <Variant title="Inline Usage">
-      <div style="padding: 2rem; display: flex; align-items: center; gap: 0.5rem; justify-content: center;">
-        <LoadingSpinner size="xs" label="" />
-        <span style="color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Fetching results...</span>
-      </div>
-    </Variant>
-  </Story>
-</template>