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

package/src/components/GroupAssigner.vue

@@ -1,257 +0,0 @@
-<script setup lang="ts">
-/** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. */
-import { ref } from 'vue'
-import type { GroupItem } from '../types'
-import { useGroupAssignment, type GroupAssignmentState, type GroupAssignmentZone } from '../composables/useGroupAssignment'
-
-interface Props {
-  groups: GroupItem[]
-  group1: string[]
-  group2: string[]
-  label1?: string
-  label2?: string
-  color1?: string
-  color2?: string
-  minPerGroup?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label1: 'Control',
-  label2: 'Treatment',
-  color1: '#3B82F6',
-  color2: '#F43F5E',
-  minPerGroup: 1,
-})
-
-const emit = defineEmits<{
-  'update:group1': [names: string[]]
-  'update:group2': [names: string[]]
-}>()
-
-const dragOverZone = ref<'zone1' | 'zone2' | null>(null)
-const draggingGroup = ref<string | null>(null)
-
-const assignment = useGroupAssignment({
-  groups: () => props.groups,
-  group1: () => props.group1,
-  group2: () => props.group2,
-  label1: () => props.label1,
-  label2: () => props.label2,
-  minPerGroup: () => props.minPerGroup,
-})
-const { unassignedGroups, zone1Groups, zone2Groups, zone1Count, zone2Count, validationMessage } = assignment
-
-function handleDragStart(event: DragEvent, groupName: string) {
-  const transfer = event.dataTransfer
-  if (!transfer) return
-
-  draggingGroup.value = groupName
-  transfer.setData('groupName', groupName)
-  transfer.effectAllowed = 'move'
-}
-
-function handleDragEnd() {
-  draggingGroup.value = null
-  dragOverZone.value = null
-}
-
-function handleDragOver(event: DragEvent, zone: GroupAssignmentZone) {
-  event.preventDefault()
-  if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move'
-  }
-  dragOverZone.value = zone
-}
-
-function handleDragLeave() {
-  dragOverZone.value = null
-}
-
-function handleDrop(event: DragEvent, zone: GroupAssignmentZone) {
-  event.preventDefault()
-  dragOverZone.value = null
-
-  const groupName = event.dataTransfer?.getData('groupName')
-  if (!groupName) return
-
-  assignToZone(groupName, zone)
-}
-
-function assignToZone(groupName: string, zone: GroupAssignmentZone) {
-  emitAssignment(assignment.assignToZone(groupName, zone))
-}
-
-function removeFromZone(groupName: string, zone: GroupAssignmentZone) {
-  const state = assignment.removeFromZone(groupName, zone)
-  if (zone === 'zone1') {
-    emit('update:group1', state.group1)
-  } else {
-    emit('update:group2', state.group2)
-  }
-}
-
-function clearAll() {
-  emitAssignment(assignment.clearAll())
-}
-
-function emitAssignment(state: GroupAssignmentState) {
-  emit('update:group1', state.group1)
-  emit('update:group2', state.group2)
-}
-</script>
-
-<template>
-  <div class="mint-group-assigner">
-    <!-- Drop zones -->
-    <div class="mint-group-assigner__zones">
-      <!-- Zone 1 (Control) -->
-      <div
-        :class="[
-          'mint-group-assigner__zone',
-          'mint-group-assigner__zone--1',
-          dragOverZone === 'zone1' ? 'mint-group-assigner__zone--dragover' : '',
-        ]"
-        :style="{ '--zone-color': color1 }"
-        @dragover="handleDragOver($event, 'zone1')"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop($event, 'zone1')"
-      >
-        <div class="mint-group-assigner__zone-header">
-          <span class="mint-group-assigner__zone-label">{{ label1 }}</span>
-          <span class="mint-group-assigner__zone-count">{{ zone1Count }} samples</span>
-        </div>
-
-        <div class="mint-group-assigner__zone-content">
-          <div
-            v-for="group in zone1Groups"
-            :key="group.name"
-            class="mint-group-assigner__pill"
-            draggable="true"
-            @dragstart="handleDragStart($event, group.name)"
-            @dragend="handleDragEnd"
-          >
-            <span
-              class="mint-group-assigner__pill-color"
-              :style="{ backgroundColor: group.color }"
-            />
-            <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
-            <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
-            <button
-              type="button"
-              class="mint-group-assigner__pill-remove"
-              @click="removeFromZone(group.name, 'zone1')"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-
-          <div v-if="zone1Groups.length === 0" class="mint-group-assigner__zone-empty">
-            Drag groups here
-          </div>
-        </div>
-      </div>
-
-      <!-- Zone 2 (Treatment) -->
-      <div
-        :class="[
-          'mint-group-assigner__zone',
-          'mint-group-assigner__zone--2',
-          dragOverZone === 'zone2' ? 'mint-group-assigner__zone--dragover' : '',
-        ]"
-        :style="{ '--zone-color': color2 }"
-        @dragover="handleDragOver($event, 'zone2')"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop($event, 'zone2')"
-      >
-        <div class="mint-group-assigner__zone-header">
-          <span class="mint-group-assigner__zone-label">{{ label2 }}</span>
-          <span class="mint-group-assigner__zone-count">{{ zone2Count }} samples</span>
-        </div>
-
-        <div class="mint-group-assigner__zone-content">
-          <div
-            v-for="group in zone2Groups"
-            :key="group.name"
-            class="mint-group-assigner__pill"
-            draggable="true"
-            @dragstart="handleDragStart($event, group.name)"
-            @dragend="handleDragEnd"
-          >
-            <span
-              class="mint-group-assigner__pill-color"
-              :style="{ backgroundColor: group.color }"
-            />
-            <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
-            <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
-            <button
-              type="button"
-              class="mint-group-assigner__pill-remove"
-              @click="removeFromZone(group.name, 'zone2')"
-            >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-
-          <div v-if="zone2Groups.length === 0" class="mint-group-assigner__zone-empty">
-            Drag groups here
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Unassigned groups -->
-    <div v-if="unassignedGroups.length > 0" class="mint-group-assigner__unassigned">
-      <div class="mint-group-assigner__unassigned-header">
-        <span class="mint-group-assigner__unassigned-title">Available Groups</span>
-        <button
-          v-if="group1.length > 0 || group2.length > 0"
-          type="button"
-          class="mint-group-assigner__clear-btn"
-          @click="clearAll"
-        >
-          Clear all
-        </button>
-      </div>
-
-      <div class="mint-group-assigner__unassigned-list">
-        <div
-          v-for="group in unassignedGroups"
-          :key="group.name"
-          :class="[
-            'mint-group-assigner__pill',
-            'mint-group-assigner__pill--unassigned',
-            draggingGroup === group.name ? 'mint-group-assigner__pill--dragging' : '',
-          ]"
-          draggable="true"
-          @dragstart="handleDragStart($event, group.name)"
-          @dragend="handleDragEnd"
-        >
-          <span
-            class="mint-group-assigner__pill-color"
-            :style="{ backgroundColor: group.color }"
-          />
-          <span class="mint-group-assigner__pill-name">{{ group.name }}</span>
-          <span class="mint-group-assigner__pill-count">{{ group.count }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Validation message -->
-    <div v-if="validationMessage" class="mint-group-assigner__validation">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="12" cy="12" r="10" />
-        <line x1="12" y1="8" x2="12" y2="12" />
-        <line x1="12" y1="16" x2="12.01" y2="16" />
-      </svg>
-      {{ validationMessage }}
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/group-assigner.css';
-</style>

package/src/components/IconButton.story.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import IconButton from './IconButton.vue'
-import type { ButtonVariant, ButtonSize } from '../types'
-
-const variants: ButtonVariant[] = ['primary', 'secondary', 'cta', 'danger', 'success', 'ghost']
-const sizes: ButtonSize[] = ['sm', 'md', 'lg']
-
-function handleClick() {
-  console.log('IconButton clicked')
-}
-</script>
-
-<template>
-  <Story title="Action/IconButton">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-          <IconButton
-            :variant="state.variant"
-            :size="state.size"
-            :disabled="state.disabled"
-            :loading="state.loading"
-            :label="state.label"
-            @click="handleClick"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 5v14M5 12h14" />
-            </svg>
-          </IconButton>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.label" title="Label (aria)" />
-        <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-direction: column; gap: 1.5rem;">
-        <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>
-          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-            <IconButton
-              v-for="variant in variants"
-              :key="variant"
-              :variant="variant"
-              :size="size"
-              :label="variant"
-              @click="handleClick"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M12 5v14M5 12h14" />
-              </svg>
-            </IconButton>
-          </div>
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Loading States">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-        <IconButton
-          v-for="variant in variants"
-          :key="variant"
-          :variant="variant"
-          :label="`${variant} loading`"
-          loading
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 5v14M5 12h14" />
-          </svg>
-        </IconButton>
-      </div>
-    </Variant>
-
-    <Variant title="Common Icons">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;">
-        <IconButton label="Add" variant="ghost" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 5v14M5 12h14" />
-          </svg>
-        </IconButton>
-        <IconButton label="Edit" variant="ghost" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-          </svg>
-        </IconButton>
-        <IconButton label="Delete" variant="danger" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="3 6 5 6 21 6" />
-            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-          </svg>
-        </IconButton>
-        <IconButton label="Download" variant="primary" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7 10 12 15 17 10" />
-            <line x1="12" y1="15" x2="12" y2="3" />
-          </svg>
-        </IconButton>
-        <IconButton label="AI" variant="ghost" @click="handleClick">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 3 14 10 21 12 14 14 12 21 10 14 3 12 10 10Z" />
-          </svg>
-        </IconButton>
-      </div>
-    </Variant>
-
-    <Variant title="Disabled States">
-      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
-        <IconButton
-          v-for="variant in variants"
-          :key="variant"
-          :variant="variant"
-          :label="`${variant} disabled`"
-          disabled
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 5v14M5 12h14" />
-          </svg>
-        </IconButton>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/IconButton.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-/** Square icon-only button with required aria-label, loading spinner state, and ghost/primary/danger variants. */
-import type { ButtonVariant, ButtonSize } from '../types'
-
-interface Props {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  disabled?: boolean
-  loading?: boolean
-  label: string // Required for accessibility
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'ghost',
-  size: 'md',
-  disabled: false,
-  loading: false,
-})
-
-const emit = defineEmits<{
-  click: [event: MouseEvent]
-}>()
-
-function handleClick(event: MouseEvent) {
-  if (!props.disabled && !props.loading) {
-    emit('click', event)
-  }
-}
-</script>
-
-<template>
-  <button
-    type="button"
-    :disabled="disabled || loading"
-    :aria-label="label"
-    :title="label"
-    :class="[
-      'mint-icon-button',
-      `mint-icon-button--${variant}`,
-      `mint-icon-button--${size}`,
-      (disabled || loading) ? 'mint-icon-button--disabled' : '',
-    ]"
-    @click="handleClick"
-  >
-    <svg
-      v-if="loading"
-      :class="['mint-icon-button__spinner', `mint-icon-button__icon--${size}`]"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        style="opacity: 0.25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        stroke-width="4"
-      />
-      <path
-        style="opacity: 0.75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-    <span v-else :class="`mint-icon-button__icon--${size}`">
-      <slot />
-    </span>
-  </button>
-</template>
-
-<style>
-@import '../styles/components/icon-button.css';
-</style>

package/src/components/InstrumentAlertLog.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-/** Filterable instrument alert/event list keyed by each alert's required stable event_key. */
-import { computed, ref } from 'vue'
-import type { InstrumentAlert, InstrumentAlertLevel } from '../types'
-
-interface Props {
-  alerts?: InstrumentAlert[]
-  title?: string
-  acknowledgeable?: boolean
-  emptyMessage?: string
-  filteredEmptyMessage?: string
-  locale?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  alerts: () => [],
-  title: 'Event Log',
-  acknowledgeable: true,
-  emptyMessage: 'No alerts received yet',
-  filteredEmptyMessage: 'No alerts match current filters',
-  locale: undefined,
-})
-
-const emit = defineEmits<{
-  acknowledge: [alert: InstrumentAlert]
-}>()
-
-const levelConfig: Record<InstrumentAlertLevel, { label: string; cssClass: string; color: string }> = {
-  critical: { label: 'Critical', cssClass: 'mint-instrument-alert--critical', color: '#ef4444' },
-  warning: { label: 'Warning', cssClass: 'mint-instrument-alert--warning', color: '#eab308' },
-  info: { label: 'Info', cssClass: 'mint-instrument-alert--info', color: '#3b82f6' },
-}
-
-const levels: InstrumentAlertLevel[] = ['critical', 'warning', 'info']
-const activeLevels = ref<Set<InstrumentAlertLevel>>(new Set(levels))
-const activeInstrument = ref<string | null>(null)
-
-const instruments = computed(() => {
-  const counts = new Map<string, number>()
-  for (const alert of props.alerts) {
-    const name = instrumentName(alert)
-    counts.set(name, (counts.get(name) ?? 0) + 1)
-  }
-  return [...counts.entries()].map(([name, count]) => ({ name, count }))
-})
-
-const alertCounts = computed(() => {
-  const counts: Record<InstrumentAlertLevel, number> = { critical: 0, warning: 0, info: 0 }
-  for (const alert of props.alerts) {
-    if (alert.level in counts) counts[alert.level]++
-  }
-  return counts
-})
-
-const filteredAlerts = computed(() =>
-  [...props.alerts]
-    .filter(alert => activeLevels.value.has(alert.level))
-    .filter(alert => !activeInstrument.value || instrumentName(alert) === activeInstrument.value)
-    .sort((a, b) => alertTime(b) - alertTime(a))
-)
-
-function toggleLevel(level: InstrumentAlertLevel) {
-  const next = new Set(activeLevels.value)
-  if (next.has(level)) {
-    if (next.size > 1) next.delete(level)
-  } else {
-    next.add(level)
-  }
-  activeLevels.value = next
-}
-
-function toggleInstrument(name: string) {
-  activeInstrument.value = activeInstrument.value === name ? null : name
-}
-
-function instrumentName(alert: InstrumentAlert): string {
-  return alert.instrument_name || alert.instrument_id
-}
-
-function alertTime(alert: InstrumentAlert): number {
-  if (!alert.timestamp) return 0
-  const date = alert.timestamp instanceof Date ? alert.timestamp : new Date(alert.timestamp)
-  return Number.isNaN(date.getTime()) ? 0 : date.getTime()
-}
-
-function timeAgo(value: string | Date | undefined): string {
-  if (!value) return ''
-  const date = value instanceof Date ? value : new Date(value)
-  if (Number.isNaN(date.getTime())) return ''
-  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
-  if (seconds < 60) return 'just now'
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  if (days < 7) return `${days}d ago`
-  return date.toLocaleDateString(props.locale, { month: 'short', day: 'numeric' })
-}
-
-function alertDetail(alert: InstrumentAlert): string {
-  return alert.body?.detail ?? alert.message ?? alert.rule ?? ''
-}
-</script>
-
-<template>
-  <div class="mint-instrument-alert-log">
-    <div class="mint-instrument-alert-log__header">
-      <span class="mint-instrument-alert-log__title">{{ title }}</span>
-    </div>
-
-    <div class="mint-instrument-alert-log__filters">
-      <div class="mint-instrument-alert-log__filter-row">
-        <button
-          v-for="level in levels"
-          :key="level"
-          type="button"
-          class="mint-instrument-alert-log__filter"
-          :class="{ 'mint-instrument-alert-log__filter--active': activeLevels.has(level) }"
-          :style="activeLevels.has(level) ? { '--filter-color': levelConfig[level].color } : undefined"
-          @click="toggleLevel(level)"
-        >
-          <span
-            class="mint-instrument-alert-log__filter-dot"
-            :style="{ backgroundColor: levelConfig[level].color }"
-          />
-          {{ levelConfig[level].label }}
-          <span class="mint-instrument-alert-log__filter-count">{{ alertCounts[level] }}</span>
-        </button>
-      </div>
-      <div v-if="instruments.length > 1" class="mint-instrument-alert-log__filter-row">
-        <button
-          v-for="instrument in instruments"
-          :key="instrument.name"
-          type="button"
-          class="mint-instrument-alert-log__filter"
-          :class="{ 'mint-instrument-alert-log__filter--active': activeInstrument === instrument.name }"
-          @click="toggleInstrument(instrument.name)"
-        >
-          {{ instrument.name }}
-          <span class="mint-instrument-alert-log__filter-count">{{ instrument.count }}</span>
-        </button>
-      </div>
-    </div>
-
-    <TransitionGroup name="mint-instrument-alert" tag="div" class="mint-instrument-alert-log__list">
-      <div
-        v-for="alert in filteredAlerts"
-        :key="alert.event_key"
-        class="mint-instrument-alert"
-        :class="[
-          levelConfig[alert.level]?.cssClass,
-          { 'mint-instrument-alert--acknowledged': alert.acknowledged },
-        ]"
-      >
-        <div class="mint-instrument-alert__header">
-          <span class="mint-instrument-alert__instrument">{{ instrumentName(alert) }}</span>
-          <span v-if="alert.body?.source" class="mint-instrument-alert__source">
-            {{ alert.body.source }}
-          </span>
-          <span class="mint-instrument-alert__time">{{ timeAgo(alert.timestamp) }}</span>
-        </div>
-        <div class="mint-instrument-alert__detail">{{ alertDetail(alert) }}</div>
-        <div
-          v-if="alert.body?.code != null || (acknowledgeable && !alert.acknowledged && alert.level !== 'info')"
-          class="mint-instrument-alert__footer"
-        >
-          <span v-if="alert.body?.code != null" class="mint-instrument-alert__code">
-            Code {{ alert.body.code }}
-          </span>
-          <button
-            v-if="acknowledgeable && !alert.acknowledged && alert.level !== 'info'"
-            type="button"
-            class="mint-instrument-alert__ack"
-            @click="emit('acknowledge', alert)"
-          >
-            Acknowledge
-          </button>
-        </div>
-      </div>
-
-      <div v-if="filteredAlerts.length === 0" key="empty" class="mint-instrument-alert-log__empty">
-        {{ alerts.length === 0 ? emptyMessage : filteredEmptyMessage }}
-      </div>
-    </TransitionGroup>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/instrument-monitor.css';
-</style>