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

package/src/components/ArtifactSaveDialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** Save/update dialog for analysis artifacts; delegates the write to a plugin-supplied handler. */
-import { computed, ref, shallowRef, watch } from 'vue'
+import { computed, getCurrentInstance, ref, shallowRef, watch } from 'vue'
+import { CloudUpload, File as FileIcon } from 'lucide-vue-next'
 import BaseModal from './BaseModal.vue'
 import BaseInput from './BaseInput.vue'
 import BaseButton from './BaseButton.vue'
@@ -10,6 +11,7 @@ import FileUploader from './FileUploader.vue'
 import SegmentedControl from './SegmentedControl.vue'
 import { useRequest } from '../composables/useRequest'
 import { useExperimentStore } from '../stores/experiment'
+import { formatExperimentDate } from '../composables/experiment-utils'
 import {
   ANALYSIS_FILE_ARTIFACT_SCHEMA,
   type AnalysisArtifactDetail,
@@ -20,7 +22,7 @@ import {
   type ArtifactSaveResult,
   type HandlerArtifactSaveHandler,
 } from '../types/analysisArtifactTypes'
-import type { ModalSize } from '../types'
+import type { ExperimentSummary, ModalSize } from '../types'
 
 interface Props {
   open: boolean
@@ -34,6 +36,11 @@ interface Props {
   result?: Record<string, unknown>
   /** Experiment id override; defaults to the current experiment (`useExperimentStore`). */
   experimentId?: number | null
+  /**
+   * Experiment shown in the strip at the top. Defaults to the store's current
+   * experiment when it is the one being saved to; no strip when unknown.
+   */
+  experiment?: ExperimentSummary | null
   /** Existing artifact detail; when set the dialog updates instead of creating. */
   existingArtifact?: AnalysisArtifactDetail | null
   /** Known artifact keys, used to warn (json) or block (file) on collisions. */
@@ -60,6 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
   mode: 'file',
   fileSource: 'upload',
   experimentId: null,
+  experiment: null,
   existingArtifact: null,
   size: 'md',
   defaultArtifactKey: 'default',
@@ -71,14 +79,25 @@ const emit = defineEmits<{
   saved: [result: ArtifactSaveResult & { payload: ArtifactSaveDialogPayload }]
   error: [message: string]
   cancel: []
+  /** The "Change" link in the experiment strip; shown only when a listener is bound. */
+  'change-experiment': []
 }>()
 
+// Declared emits leave $attrs, so the bound listener is read off the vnode.
+const canChangeExperiment = Boolean(getCurrentInstance()?.vnode.props?.onChangeExperiment)
+
 const ARTIFACT_KEY_PATTERN = /^[a-z0-9][a-z0-9._-]*$/
 
 const experimentStore = useExperimentStore()
 const request = useRequest('Failed to save analysis artifact.')
 
-const isUpdate = computed(() => props.existingArtifact !== null)
+/** With an existing artifact the user picks: replace it, or save a separate one. */
+const saveMode = ref<'replace' | 'new'>('replace')
+const isUpdate = computed(() => props.existingArtifact !== null && saveMode.value === 'replace')
+const SAVE_MODES = [
+  { value: 'replace', label: 'Replace an existing result', description: 'Keeps the key; collaborators see the new version.' },
+  { value: 'new', label: 'Save as a new result', description: 'Adds a separate artifact next to the others.' },
+] as const
 const existingResult = computed(
   () => (props.existingArtifact?.result ?? {}) as Record<string, unknown>,
 )
@@ -104,7 +123,13 @@ const selectedFile = shallowRef<File | null>(null)
 let initialNote = ''
 
 function resetForm(): void {
-  const existing = props.existingArtifact
+  saveMode.value = 'replace'
+  syncFields()
+}
+
+/** Fills the fields for the current save mode; a mode switch calls only this. */
+function syncFields(): void {
+  const existing = isUpdate.value ? props.existingArtifact : null
   activeKind.value = existing
     ? (existingIsFile.value ? 'file' : 'json')
     : (props.mode === 'json' ? 'json' : 'file')
@@ -120,6 +145,7 @@ resetForm()
 watch(() => props.open, (open) => {
   if (open) resetForm()
 })
+watch(saveMode, syncFields)
 // Key off identity, not object reference: re-fetching the same artifact must not
 // wipe in-progress edits.
 watch(
@@ -127,8 +153,17 @@ watch(
   resetForm,
 )
 
-const resolvedTitle = computed(() =>
-  props.title ?? (isUpdate.value ? 'Update Analysis Artifact' : 'Save Analysis Artifact'))
+const resolvedTitle = computed(() => props.title ?? 'Save to experiment')
+
+const stripExperiment = computed(() => {
+  if (props.experiment) return props.experiment
+  const current = experimentStore.current
+  return current && current.id === resolveExperimentId() ? current : null
+})
+const existingUpdated = computed(() => {
+  const date = props.existingArtifact?.updated_at ?? props.existingArtifact?.created_at
+  return date ? formatExperimentDate(date) : ''
+})
 const showKindToggle = computed(() => !isUpdate.value && props.mode === 'both')
 const showFileUploader = computed(
   () => activeKind.value === 'file' && props.fileSource === 'upload',
@@ -143,12 +178,16 @@ const effectiveKey = computed(() => {
   return keyInput.value.trim() || props.defaultArtifactKey
 })
 const keyValid = computed(() => ARTIFACT_KEY_PATTERN.test(effectiveKey.value))
-const keyExists = computed(
-  () => !isUpdate.value && (props.existingArtifactKeys ?? []).includes(effectiveKey.value),
-)
+const keyExists = computed(() => {
+  if (isUpdate.value) return false
+  const known = [...(props.existingArtifactKeys ?? []), props.existingArtifact?.artifact_key]
+  return known.includes(effectiveKey.value)
+})
 // A file artifact is create-only: reusing a key always fails backend-side, and the
-// dialog has no detail to replace it safely. JSON keys upsert natively, so warn only.
-const keyBlocked = computed(() => keyExists.value && activeKind.value === 'file')
+// dialog has no detail to replace it safely. JSON keys upsert natively, so warn only,
+// unless the user explicitly chose "Save as a new result" over the replace option.
+const keyBlocked = computed(() => keyExists.value
+  && (activeKind.value === 'file' || (props.existingArtifact !== null && saveMode.value === 'new')))
 const keyError = computed(() => {
   if (!keyValid.value) return 'Use lowercase letters, digits, dots, dashes, or underscores.'
   if (keyBlocked.value) return 'This key is already used. Choose another, or replace the existing artifact.'
@@ -324,6 +363,56 @@ function handleCancel(): void {
     @close="emit('cancel')"
   >
     <div class="mint-artifact-save-dialog">
+      <div v-if="stripExperiment" class="mint-artifact-save-dialog__experiment">
+        <span
+          v-if="stripExperiment.experiment_code"
+          class="mint-exp-code mint-exp-code--sm"
+        >{{ stripExperiment.experiment_code }}</span>
+        <span class="mint-artifact-save-dialog__experiment-name">{{ stripExperiment.name }}</span>
+        <button
+          v-if="canChangeExperiment"
+          type="button"
+          class="mint-artifact-save-dialog__change"
+          @click="emit('change-experiment')"
+        >
+          Change
+        </button>
+      </div>
+
+      <div
+        v-if="existingArtifact"
+        class="mint-artifact-save-dialog__modes"
+        role="radiogroup"
+        aria-label="Save mode"
+      >
+        <button
+          v-for="option in SAVE_MODES"
+          :key="option.value"
+          type="button"
+          role="radio"
+          :aria-checked="saveMode === option.value"
+          class="mint-artifact-save-dialog__mode"
+          @click="saveMode = option.value"
+        >
+          <span class="mint-artifact-save-dialog__mode-dot" aria-hidden="true" />
+          <span class="mint-artifact-save-dialog__mode-text">
+            <b>{{ option.label }}</b>
+            <span>{{ option.description }}</span>
+          </span>
+        </button>
+      </div>
+
+      <div v-if="isUpdate && existingArtifact" class="mint-artifact-save-dialog__list">
+        <div class="mint-artifact-save-dialog__row mint-artifact-save-dialog__row--selected">
+          <FileIcon class="mint-artifact-save-dialog__row-icon" :size="15" aria-hidden="true" />
+          <span class="mint-artifact-save-dialog__row-name">
+            {{ existingArtifact.display_name }}
+            <span>{{ existingArtifact.artifact_key }}</span>
+          </span>
+          <span v-if="existingUpdated" class="mint-artifact-save-dialog__row-meta">{{ existingUpdated }}</span>
+        </div>
+      </div>
+
       <SegmentedControl
         v-if="showKindToggle"
         v-model="activeKind"
@@ -416,11 +505,12 @@ function handleCancel(): void {
       </BaseButton>
       <BaseButton
         class="mint-artifact-save-dialog__submit"
+        :icon="CloudUpload"
         :loading="request.isLoading.value"
         :disabled="!canSubmit"
         @click="handleSubmit"
       >
-        {{ isUpdate ? 'Update Artifact' : 'Save Artifact' }}
+        {{ isUpdate ? 'Replace result' : 'Save result' }}
       </BaseButton>
     </template>
   </BaseModal>

package/src/components/AuditTrail.story.vue

@@ -80,7 +80,8 @@ function initState() {
   return {
     loading: false,
     error: '',
-    entries: mockEntries,
+    // Histoire serializes state; Date objects come back unparseable, ISO strings survive.
+    entries: mockEntries.map((entry) => ({ ...entry, timestamp: entry.timestamp.toISOString() })),
     showFilters: false,
     emptyText: 'No activity yet',
     order: 'newest' as const,

package/src/components/AuditTrail.vue

@@ -2,6 +2,7 @@
 /** Filterable, sortable timeline of audit entries for tracking experiment or resource history. */
 import { computed, ref } from 'vue'
 import type { AuditEntry } from '../types'
+import { formatRelativeTime } from '../utils/time'
 import BaseSelect from './BaseSelect.vue'
 import DataStateInternal from './internal/DataStateInternal.vue'
 
@@ -79,26 +80,6 @@ function getInitials(name: string): string {
   return (words[0]?.[0] ?? '').toUpperCase()
 }
 
-const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
-
-function formatTimestamp(timestamp: Date | string): string {
-  const date = timestamp instanceof Date ? timestamp : new Date(timestamp)
-  const now = Date.now()
-  const diffMs = date.getTime() - now
-  const diffSec = Math.round(diffMs / 1000)
-  const diffMin = Math.round(diffSec / 60)
-  const diffHr = Math.round(diffMin / 60)
-  const diffDay = Math.round(diffHr / 24)
-  const diffWeek = Math.round(diffDay / 7)
-
-  if (Math.abs(diffSec) < 60) return rtf.format(diffSec, 'second')
-  if (Math.abs(diffMin) < 60) return rtf.format(diffMin, 'minute')
-  if (Math.abs(diffHr) < 24) return rtf.format(diffHr, 'hour')
-  if (Math.abs(diffDay) < 7) return rtf.format(diffDay, 'day')
-  if (Math.abs(diffWeek) < 5) return rtf.format(diffWeek, 'week')
-  return date.toLocaleDateString()
-}
-
 function handleEntryClick(entry: AuditEntry) {
   emit('entry-click', entry)
 }
@@ -146,7 +127,7 @@ function handleEntryClick(entry: AuditEntry) {
               <span class="mint-audit-trail__sentence">
                 <span v-if="entry.user" class="mint-audit-trail__user">{{ entry.user }}</span> <span class="mint-audit-trail__action">{{ entry.action }}</span>
               </span>
-              <span class="mint-audit-trail__timestamp">{{ formatTimestamp(entry.timestamp) }}</span>
+              <span class="mint-audit-trail__timestamp">{{ formatRelativeTime(entry.timestamp, { weeks: true }) }}</span>
             </div>
             <div v-if="entry.detail" class="mint-audit-trail__detail">{{ entry.detail }}</div>
             <div v-if="entry.metadata && Object.keys(entry.metadata).length" class="mint-audit-trail__metadata">

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/BaseButton.vue

@@ -10,7 +10,7 @@
  * <BaseButton variant="ghost" :icon="Trash2" label="Delete" />
  * ```
  */
-import { computed, useSlots, type Component } from 'vue'
+import { Comment, Fragment, Text, computed, useSlots, type Component, type VNode } from 'vue'
 import type { ButtonVariant, ButtonSize } from '../types'
 
 interface Props {
@@ -45,6 +45,19 @@ const slots = useSlots()
 const iconOnly = computed(() => Boolean(props.icon) && !slots.default)
 const block = computed(() => (iconOnly.value ? 'mint-icon-button' : 'mint-button'))
 
+// A text-only label gets its own span so the stylesheet can centre the cap height.
+// Element children are left as flex items, so their gap and alignment do not change.
+function isTextNode(node: VNode): boolean {
+  if (node.type === Text || node.type === Comment) return true
+  return node.type === Fragment && Array.isArray(node.children)
+    && (node.children as VNode[]).every(isTextNode)
+}
+
+function hasTextLabel(): boolean {
+  const nodes = slots.default?.()
+  return !!nodes && nodes.length > 0 && nodes.every(isTextNode)
+}
+
 function handleClick(event: MouseEvent) {
   if (!props.disabled && !props.loading) {
     emit('click', event)
@@ -93,7 +106,8 @@ function handleClick(event: MouseEvent) {
     <template v-if="!iconOnly">
       <component :is="icon" v-if="icon" class="mint-button__icon" aria-hidden="true" />
       <slot name="icon-left" />
-      <slot />
+      <span v-if="hasTextLabel()" class="mint-button__label"><slot /></span>
+      <slot v-else />
       <slot name="icon-right" />
     </template>
   </button>

package/src/components/BaseModal.vue

@@ -107,8 +107,9 @@ watch(() => props.open, (isOpen) => {
   if (!isOpen && index !== -1) openModals.splice(index, 1)
 }, { immediate: true })
 
+// A control inside the modal that handles Escape (an open select) prevents the default first.
 function handleEscapeKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && props.closeOnEscape && props.open && openModals[openModals.length - 1] === self) {
+  if (event.key === 'Escape' && !event.defaultPrevented && props.closeOnEscape && props.open && openModals[openModals.length - 1] === self) {
     close()
   }
 }

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>