@morscherlab/mint-sdk 1.4.0-beta.8 → 1.4.0-beta.9

package/src/components/Avatar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Displays a user avatar as an image, a single derived initial, or a fallback icon, with a deterministic background color and optional status dot. */
+/** Displays a user avatar as an image, a single derived initial, or a fallback icon, on a quiet accent face (or an explicit `color`) with an optional status dot. */
 import { computed } from 'vue'
 
 interface Props {
@@ -17,24 +17,20 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'md',
 })
 
-const PALETTE = ['#3B82F6', '#8B5CF6', '#EC4899', '#F97316', '#10B981', '#F59E0B', '#06B6D4', '#6366F1']
-
 // Default: first letter of `name`, uppercased. Consumers wanting two letters
 // (e.g. role badges like "PI", "QC") pass `:initials="'XX'"` explicitly.
 const computedInitials = computed(() =>
   props.initials || props.name?.charAt(0).toUpperCase() || ''
 )
 
-const backgroundColor = computed(() => {
-  if (props.color) return props.color
-  if (!props.name) return undefined
-
-  let hash = 0
-  for (let i = 0; i < props.name.length; i++) {
-    hash = props.name.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  return PALETTE[Math.abs(hash) % PALETTE.length]
-})
+// The quiet accent face lives in avatar.css; an explicit `color` fills the
+// face. That fill is a fixed hue (role badges), so the ink stays white in both
+// themes instead of following the theme-dependent --text-on-accent.
+const faceStyle = computed(() =>
+  props.color
+    ? { backgroundColor: props.color, color: '#fff', boxShadow: 'none' }
+    : undefined
+)
 </script>
 
 <template>
@@ -45,7 +41,7 @@ const backgroundColor = computed(() => {
   >
     <span
       class="mint-avatar__face"
-      :style="backgroundColor ? { backgroundColor } : undefined"
+      :style="faceStyle"
     >
       <img
         v-if="src"

package/src/components/BaseSelect.multiple.story.vue

@@ -39,7 +39,7 @@ function initPlayground() {
   <Story title="Base Inputs/BaseSelect · multiple">
     <Variant title="Playground" :init-state="initPlayground">
       <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <div style="padding: 2rem; max-width: 500px; min-height: 22rem; margin: 0 auto;">
           <BaseSelect
             multiple
             v-model="state.selected"
@@ -91,7 +91,7 @@ function initPlayground() {
     </Variant>
 
     <Variant title="With Max Selections">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+      <div style="padding: 2rem; max-width: 500px; min-height: 22rem; margin: 0 auto;">
         <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">
           Maximum 3 selections allowed
         </p>
@@ -124,6 +124,17 @@ function initPlayground() {
       </div>
     </Variant>
 
+    <Variant title="Invalid">
+      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
+        <BaseSelect
+          multiple
+          :model-value="['hela']"
+          :options="sampleOptions"
+          invalid
+        />
+      </div>
+    </Variant>
+
     <Variant title="Disabled">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
         <BaseSelect

package/src/components/BaseSelect.vue

@@ -2,7 +2,7 @@
 /**
  * Select one or several options.
  * Default: a native `<select>`. `searchable`: a listbox with a search field and the `#option` / `#footer` slots.
- * `multiple`: a checkbox chip list bound to an array, capped by `max`.
+ * `multiple`: a field of removable chips with a filterable checkbox listbox, bound to an array and capped by `max`.
  *
  * @example
  * ```vue
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<{
   /** The selected value; an array with `multiple`. */
   modelValue?: (M extends true ? OptionPrimitive[] : OptionPrimitive) | null
   options: SelectOptionInput[]
-  /** Bind an array and pick several options (chip list). */
+  /** Bind an array and pick several options (chip field + checkbox listbox). */
   multiple?: M
   /** Single selection in a listbox with a search field. Ignored with `multiple`. */
   searchable?: boolean
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<{
   invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   ariaDescribedby?: string
-  /** Id of the visible label (`searchable`); the trigger is then named by the label and the selected value. */
+  /** Id of the visible label. `searchable`: the trigger is then named by the label and the selected value. */
   ariaLabelledby?: string
 }>(), {
   modelValue: null,
@@ -118,6 +118,7 @@ function handleChange(event: Event) {
     :invalid="invalid"
     :max="max"
     :size="size"
+    :aria-labelledby="ariaLabelledby"
     :aria-describedby="ariaDescribedby"
     @update:model-value="update"
   />

package/src/components/BatchProgressList.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Scrollable list tracking per-item status for a batch operation with overall progress summary. */
 import { computed, ref, watch, nextTick } from 'vue'
-import type { BatchItem, BatchSummary } from '../types'
+import { CircleCheck, CircleDashed, CircleMinus, CircleX, Loader } from 'lucide-vue-next'
+import type { BatchItem, BatchItemStatus, BatchSummary } from '../types'
 import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
@@ -34,6 +35,28 @@ const emit = defineEmits<{
   'cancel': [id: string]
 }>()
 
+const STATUS_ICONS: Record<BatchItemStatus, typeof CircleCheck> = {
+  completed: CircleCheck,
+  processing: Loader,
+  pending: CircleDashed,
+  error: CircleX,
+  skipped: CircleMinus,
+}
+
+const STATUS_TEXT: Partial<Record<BatchItemStatus, string>> = {
+  pending: 'Queued',
+  error: 'Failed',
+  skipped: 'Skipped',
+}
+
+function itemPercent(item: BatchItem): number {
+  return item.status === 'completed' ? 100 : (item.progress ?? 0)
+}
+
+function statusText(item: BatchItem): string {
+  return STATUS_TEXT[item.status] ?? `${itemPercent(item)}%`
+}
+
 const listRef = ref<HTMLElement | null>(null)
 // 6b: completed items keep full contrast but collapse behind a toggle.
 const showCompleted = ref(false)
@@ -141,34 +164,17 @@ watch(
       >
         <slot name="item" :item="item">
           <div class="mint-batch-progress__item-row">
-            <!-- Status by shape: hollow ring / progress arc / check / filled ! / dash -->
-            <span :class="['mint-batch-progress__item-icon', `mint-batch-progress__item-icon--${item.status}`]" aria-hidden="true">
-              <span v-if="item.status === 'pending'" class="mint-batch-progress__pending-ring" />
-              <svg v-else-if="item.status === 'processing'" class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
-                <circle class="mint-batch-progress__arc-track" cx="8" cy="8" r="6" />
-                <path class="mint-batch-progress__arc" d="M8 2a6 6 0 0 1 6 6" />
-              </svg>
-              <svg v-else-if="item.status === 'completed'" class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
-                <path class="mint-batch-progress__check" d="M3.5 8.5l3 3 6-7" />
-              </svg>
-              <svg v-else-if="item.status === 'error'" class="mint-batch-progress__shape" viewBox="0 0 16 16">
-                <circle class="mint-batch-progress__error-disc" cx="8" cy="8" r="7" />
-                <path class="mint-batch-progress__error-mark" d="M8 4.5v4M8 11v.01" />
-              </svg>
-              <svg v-else class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
-                <path class="mint-batch-progress__dash" d="M4 8h8" />
-              </svg>
-            </span>
+            <component
+              :is="STATUS_ICONS[item.status]"
+              :class="['mint-batch-progress__item-icon', `mint-batch-progress__item-icon--${item.status}`]"
+              :size="16"
+              aria-hidden="true"
+            />
 
             <span class="mint-batch-progress__item-label">{{ item.label }}</span>
 
             <span class="mint-batch-progress__item-meta">
-              <template v-if="item.status === 'processing' && item.progress !== undefined">
-                <span class="mint-batch-progress__item-progress">
-                  <span class="mint-batch-progress__item-progress-bar" :style="{ width: `${item.progress}%` }" />
-                </span>
-                {{ item.progress }}%
-              </template>
+              <span class="mint-batch-progress__item-status">{{ statusText(item) }}</span>
               <button
                 v-if="item.status === 'error'"
                 type="button"
@@ -186,6 +192,10 @@ watch(
                 Cancel
               </button>
             </span>
+
+            <span class="mint-batch-progress__item-progress" aria-hidden="true">
+              <span class="mint-batch-progress__item-progress-bar" :style="{ width: `${itemPercent(item)}%` }" />
+            </span>
           </div>
 
           <div v-if="item.status === 'error' && item.message" class="mint-batch-progress__item-message">

package/src/components/ChartContainer.story.vue

@@ -76,7 +76,8 @@ function initLegendState() {
         <ChartContainer
           title="Experiment Results"
           empty
-          empty-text="No results found. Run an analysis to see data here."
+          empty-text="No samples selected"
+          empty-hint="Pick samples to draw the distribution."
         />
       </div>
     </Variant>

package/src/components/ChartContainer.vue

@@ -2,7 +2,7 @@
 /** Wraps a chart with header, toolbar slot, loading overlay, empty state, and legend slot. */
 import type { ChartLegendItem } from '../types'
 import LoadingSpinner from './LoadingSpinner.vue'
-import EmptyState from './EmptyState.vue'
+import { ChartLine } from 'lucide-vue-next'
 
 interface Props {
   title?: string
@@ -10,6 +10,8 @@ interface Props {
   loading?: boolean
   empty?: boolean
   emptyText?: string
+  /** Muted line under the empty title. */
+  emptyHint?: string
   /** `frame` fills its parent and uses compact workbench chrome. */
   variant?: 'card' | 'frame'
   /** Series shown as clickable items in the header; a click emits `legend-toggle`. */
@@ -77,11 +79,11 @@ defineSlots<{
       <!-- Empty state -->
       <template v-else-if="empty">
         <slot name="empty">
-          <EmptyState
-            :title="emptyText"
-            size="sm"
-            icon-path="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
-          />
+          <div class="mint-chart__empty">
+            <ChartLine :size="22" aria-hidden="true" />
+            <span class="mint-chart__empty-title">{{ emptyText }}</span>
+            <span v-if="emptyHint" class="mint-chart__empty-hint">{{ emptyHint }}</span>
+          </div>
         </slot>
       </template>
 

package/src/components/ConfirmDialog.story.vue

@@ -49,7 +49,7 @@ function initPlayground() {
       <template #default="{ state }">
         <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
           <BaseButton variant="secondary" @click="dialogOpen = true">Open dialog</BaseButton>
-          <div v-if="lastAction" style="font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--text-muted);">
+          <div v-if="lastAction" style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);">
             Last event: <code>{{ lastAction }}</code>
           </div>
           <ConfirmDialog

package/src/components/EmptyState.vue

@@ -62,7 +62,7 @@ const defaultIconPaths = [
       </div>
     </div>
     <div v-if="actionLabel" class="mint-empty-state__action">
-      <BaseButton variant="secondary" @click="emit('action')">
+      <BaseButton variant="secondary" size="sm" @click="emit('action')">
         {{ actionLabel }}
       </BaseButton>
     </div>