@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

package/src/components/ArtifactSaveDialog.vue

@@ -3,17 +3,13 @@
 import { computed, ref, shallowRef, watch } from 'vue'
 import BaseModal from './BaseModal.vue'
 import BaseInput from './BaseInput.vue'
-import BaseTextarea from './BaseTextarea.vue'
 import BaseButton from './BaseButton.vue'
 import AlertBox from './AlertBox.vue'
 import FormField from './FormField.vue'
 import FileUploader from './FileUploader.vue'
 import SegmentedControl from './SegmentedControl.vue'
-import { useRequestSyncState } from '../composables/useRequestSyncState'
-import {
-  getInjectedPlatformContext,
-  resolveCurrentExperimentId,
-} from '../composables/platformContextHelpers'
+import { useRequest } from '../composables/useRequest'
+import { useExperimentStore } from '../stores/experiment'
 import {
   ANALYSIS_FILE_ARTIFACT_SCHEMA,
   type AnalysisArtifactDetail,
@@ -27,7 +23,7 @@ import {
 import type { ModalSize } from '../types'
 
 interface Props {
-  modelValue: boolean
+  open: boolean
   /** Performs the backend write; the dialog never calls the platform itself. */
   saveHandler: ArtifactSaveDialogHandler
   /** Which artifact kinds the form offers. */
@@ -36,7 +32,7 @@ interface Props {
   fileSource?: ArtifactFileSource
   /** JSON result payload supplied programmatically by the host. */
   result?: Record<string, unknown>
-  /** Experiment id override; defaults to platform injection or URL. */
+  /** Experiment id override; defaults to the current experiment (`useExperimentStore`). */
   experimentId?: number | null
   /** Existing artifact detail; when set the dialog updates instead of creating. */
   existingArtifact?: AnalysisArtifactDetail | null
@@ -71,7 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   saved: [result: ArtifactSaveResult & { payload: ArtifactSaveDialogPayload }]
   error: [message: string]
   cancel: []
@@ -79,8 +75,8 @@ const emit = defineEmits<{
 
 const ARTIFACT_KEY_PATTERN = /^[a-z0-9][a-z0-9._-]*$/
 
-const injectedContext = getInjectedPlatformContext()
-const request = useRequestSyncState('Failed to save analysis artifact.')
+const experimentStore = useExperimentStore()
+const request = useRequest('Failed to save analysis artifact.')
 
 const isUpdate = computed(() => props.existingArtifact !== null)
 const existingResult = computed(
@@ -121,7 +117,7 @@ function resetForm(): void {
 }
 
 resetForm()
-watch(() => props.modelValue, (open) => {
+watch(() => props.open, (open) => {
   if (open) resetForm()
 })
 // Key off identity, not object reference: re-fetching the same artifact must not
@@ -160,7 +156,7 @@ const keyError = computed(() => {
 })
 
 const canSubmit = computed(() => {
-  if (request.loading.value || !keyValid.value || keyBlocked.value) return false
+  if (request.isLoading.value || !keyValid.value || keyBlocked.value) return false
   if (activeKind.value === 'file') {
     return props.fileSource === 'handler' || selectedFile.value !== null
   }
@@ -168,7 +164,7 @@ const canSubmit = computed(() => {
 })
 
 function resolveExperimentId(): number | undefined {
-  return props.experimentId ?? resolveCurrentExperimentId(injectedContext)
+  return props.experimentId ?? experimentStore.currentId ?? undefined
 }
 
 /** Set-only note for creates and JSON upserts: an empty field just sends nothing. */
@@ -302,10 +298,10 @@ async function handleSubmit(): Promise<void> {
   try {
     const result = await request.run(
       () => runSaveHandler(payload),
-      { success: 'save', errorMessage: 'Failed to save analysis artifact.' },
+      { kind: 'save', errorMessage: 'Failed to save analysis artifact.' },
     )
     emit('saved', { ...(result ?? {}), payload })
-    emit('update:modelValue', false)
+    emit('update:open', false)
     resetForm()
   } catch {
     emit('error', request.error.value ?? 'Failed to save analysis artifact.')
@@ -314,17 +310,17 @@ async function handleSubmit(): Promise<void> {
 
 function handleCancel(): void {
   emit('cancel')
-  emit('update:modelValue', false)
+  emit('update:open', false)
 }
 </script>
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="resolvedTitle"
     :size="size"
-    :closable="!request.loading.value"
-    @update:model-value="emit('update:modelValue', $event)"
+    :closable="!request.isLoading.value"
+    @update:open="emit('update:open', $event)"
     @close="emit('cancel')"
   >
     <div class="mint-artifact-save-dialog">
@@ -341,7 +337,7 @@ function handleCancel(): void {
 
       <AlertBox
         v-if="keyExists && !keyBlocked"
-        type="warning"
+        tone="warning"
         class="mint-artifact-save-dialog__warning"
       >
         An artifact with key "{{ effectiveKey }}" already exists. Its results will be
@@ -357,7 +353,7 @@ function handleCancel(): void {
         <BaseInput
           v-model="keyInput"
           :readonly="isUpdate"
-          :error="Boolean(keyError)"
+          :invalid="Boolean(keyError)"
           :placeholder="defaultArtifactKey"
         />
       </FormField>
@@ -378,7 +374,8 @@ function handleCancel(): void {
         label="Note"
         class="mint-artifact-save-dialog__note"
       >
-        <BaseTextarea
+        <BaseInput
+          type="textarea"
           v-model="noteInput"
           placeholder="Optional context for this artifact"
         />
@@ -405,7 +402,7 @@ function handleCancel(): void {
 
       <AlertBox
         v-if="request.error.value"
-        type="error"
+        tone="error"
         class="mint-artifact-save-dialog__error"
         role="alert"
       >
@@ -414,12 +411,12 @@ function handleCancel(): void {
     </div>
 
     <template #footer>
-      <BaseButton variant="secondary" :disabled="request.loading.value" @click="handleCancel">
+      <BaseButton variant="secondary" :disabled="request.isLoading.value" @click="handleCancel">
         Cancel
       </BaseButton>
       <BaseButton
         class="mint-artifact-save-dialog__submit"
-        :loading="request.loading.value"
+        :loading="request.isLoading.value"
         :disabled="!canSubmit"
         @click="handleSubmit"
       >

package/src/components/ArtifactSelectorModal.story.vue

@@ -209,7 +209,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
           </div>
 
           <ArtifactSelectorModal
-            v-model="isOpen"
+            v-model:open="isOpen"
             :experiment-id="42"
             :title="state.title"
             :include-archived="state.includeArchived"
@@ -241,7 +241,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
         </button>
 
         <ArtifactSelectorModal
-          v-model="isOpenArchived"
+          v-model:open="isOpenArchived"
           :experiment-id="42"
           :include-archived="true"
           @select="handleSelect"
@@ -262,7 +262,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
         </button>
 
         <ArtifactSelectorModal
-          v-model="isOpenScoped"
+          v-model:open="isOpenScoped"
           :experiment-id="42"
           plugin-id="ms-uploader"
           title="Select Peak Data"
@@ -284,7 +284,7 @@ function handleSelect(artifact: AnalysisArtifactSummary) {
         </button>
 
         <ArtifactSelectorModal
-          v-model="isOpenEmpty"
+          v-model:open="isOpenEmpty"
           :experiment-id="42"
           plugin-id="nonexistent-plugin"
           @select="handleSelect"

package/src/components/ArtifactSelectorModal.vue

@@ -4,7 +4,7 @@
  *
  * @example Recommended
  * ```vue
- * <ArtifactSelectorModal v-model="open" :experiment-id="experimentId" @select="selectArtifact" />
+ * <ArtifactSelectorModal v-model:open="open" :experiment-id="experimentId" @select="selectArtifact" />
  * ```
  */
 import { computed, ref, watch } from 'vue'
@@ -14,7 +14,7 @@ import type {
   AnalysisArtifactStatusFilter,
   AnalysisArtifactSummary,
 } from '../types/analysisArtifactTypes'
-import { useAnalysisArtifacts } from '../composables/useAnalysisArtifacts'
+import { useArtifacts } from '../composables/useArtifacts'
 import { formatExperimentDate } from '../composables/experiment-utils'
 import { getInjectedPlatformContext } from '../composables/platformContextHelpers'
 import { hasAllPermissions } from '../permissions'
@@ -24,8 +24,8 @@ import BaseSelect from './BaseSelect.vue'
 import ResourcePickerListInternal from './internal/ResourcePickerListInternal.vue'
 
 interface Props {
-  modelValue: boolean
-  /** Experiment id override; defaults to platform injection or URL. */
+  open: boolean
+  /** Experiment id override; defaults to the current experiment (`useExperimentStore`). */
   experimentId?: number | null
   /** Scope to a single owning plugin; omit to show all plugins. */
   pluginId?: string | null
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   select: [artifact: AnalysisArtifactSummary]
   selectDetail: [detail: AnalysisArtifactDetail]
   archive: [artifact: AnalysisArtifactSummary]
@@ -70,7 +70,7 @@ const {
   getDetail,
   archive,
   restore,
-} = useAnalysisArtifacts({
+} = useArtifacts({
   experimentId: () => props.experimentId ?? undefined,
   pluginId: () => props.pluginId,
   includeArchived: () => props.includeArchived,
@@ -130,7 +130,7 @@ async function handleSelect(artifact: AnalysisArtifactSummary): Promise<void> {
     emit('selectDetail', detail)
   }
   emit('select', artifact)
-  emit('update:modelValue', false)
+  emit('update:open', false)
 }
 
 // Emit what the backend returned, not the row we started from: the pre-mutation
@@ -146,7 +146,7 @@ async function handleRestore(artifact: AnalysisArtifactSummary): Promise<void> {
 }
 
 watch(
-  () => props.modelValue,
+  () => props.open,
   (isOpen) => {
     if (isOpen) {
       openCount.value++
@@ -160,10 +160,10 @@ watch(
 
 <template>
   <BaseModal
-    :model-value="modelValue"
+    :open="open"
     :title="title"
     :size="size"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
   >
     <ResourcePickerListInternal
       :key="openCount"

package/src/components/AuditTrail.story.vue

@@ -82,7 +82,7 @@ function initState() {
     error: '',
     entries: mockEntries,
     showFilters: false,
-    emptyMessage: 'No activity yet',
+    emptyText: 'No activity yet',
     order: 'newest' as const,
     size: 'md' as const,
   }
@@ -99,7 +99,7 @@ function initState() {
             :error="state.error || null"
             :entries="state.entries"
             :show-filters="state.showFilters"
-            :empty-message="state.emptyMessage"
+            :empty-text="state.emptyText"
             :order="state.order"
             :size="state.size"
           />
@@ -109,7 +109,7 @@ function initState() {
         <HstCheckbox v-model="state.loading" title="Loading" />
         <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.showFilters" title="Show Filters" />
-        <HstText v-model="state.emptyMessage" title="Empty Message" />
+        <HstText v-model="state.emptyText" title="Empty Message" />
         <HstSelect
           v-model="state.order"
           title="Order"
@@ -161,7 +161,7 @@ function initState() {
       <div style="padding: 2rem; max-width: 600px;">
         <AuditTrail
           :entries="[]"
-          empty-message="No audit events recorded"
+          empty-text="No audit events recorded"
         />
       </div>
     </Variant>

package/src/components/AuditTrail.vue

@@ -9,7 +9,7 @@ interface Props {
   entries: AuditEntry[]
   maxHeight?: string
   showFilters?: boolean
-  emptyMessage?: string
+  emptyText?: string
   order?: 'newest' | 'oldest'
   size?: 'sm' | 'md' | 'lg'
   /** Replace the timeline with a loading placeholder. */
@@ -23,7 +23,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   showFilters: false,
-  emptyMessage: 'No activity yet',
+  emptyText: 'No activity yet',
   order: 'newest',
   size: 'md',
   loading: false,
@@ -178,7 +178,7 @@ function handleEntryClick(entry: AuditEntry) {
 
     <div v-else-if="!sortedEntries.length" class="mint-audit-trail__state">
       <slot name="empty">
-        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+        <DataStateInternal state="empty" size="sm" :title="emptyText" />
       </slot>
     </div>
   </div>

package/src/components/Avatar.story.vue

@@ -61,9 +61,8 @@ const users = [
     </Variant>
 
     <Variant title="Default vs explicit initials">
-      <!-- Default: single letter from `name` (matches the platform's
-           getAvatarInitial helper). Pass `:initials="'XX'"` to override
-           with two letters or any other label. -->
+      <!-- Default: single letter from `name`. Pass `:initials="'XX'"` to
+           override with two letters or any other label. -->
       <div style="padding: 2rem; display: flex; gap: 2rem; align-items: center; justify-content: center;">
         <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
           <Avatar name="Estrella Pan" size="lg" />

package/src/components/Avatar.vue

@@ -19,8 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const PALETTE = ['#3B82F6', '#8B5CF6', '#EC4899', '#F97316', '#10B981', '#F59E0B', '#06B6D4', '#6366F1']
 
-// Default: first letter of `name`, uppercased — matches the platform's
-// canonical `getAvatarInitial(user)` helper. Consumers wanting two letters
+// 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() || ''

package/src/components/BaseButton.story.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Plus, Trash2 } from 'lucide-vue-next'
 import BaseButton from './BaseButton.vue'
 import type { ButtonVariant, ButtonSize } from '../types'
 
@@ -92,5 +93,29 @@ function handleClick() {
         </BaseButton>
       </div>
     </Variant>
+
+    <Variant title="With Icon">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        <BaseButton v-for="size in sizes" :key="size" :size="size" :icon="Plus">
+          Add sample
+        </BaseButton>
+      </div>
+    </Variant>
+
+    <Variant title="Icon Only">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+          <BaseButton
+            v-for="variant in variants"
+            :key="variant"
+            :variant="variant"
+            :size="size"
+            :icon="Trash2"
+            :label="`Delete (${variant})`"
+          />
+          <BaseButton variant="ghost" :size="size" :icon="Trash2" label="Deleting" loading />
+        </div>
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/BaseButton.vue

@@ -1,5 +1,16 @@
 <script setup lang="ts">
-/** Renders a styled `<button>` with variant, size, loading spinner, and full-width options. */
+/**
+ * Renders a styled `<button>` with variant, size, loading spinner, and full-width options.
+ * With `icon` and no default slot it is a square icon-only button; `label` is then its accessible name.
+ *
+ * @example
+ * ```vue
+ * <BaseButton variant="primary" :loading="busy">Save</BaseButton>
+ * <BaseButton :icon="Plus">Add sample</BaseButton>
+ * <BaseButton variant="ghost" :icon="Trash2" label="Delete" />
+ * ```
+ */
+import { computed, useSlots, type Component } from 'vue'
 import type { ButtonVariant, ButtonSize } from '../types'
 
 interface Props {
@@ -9,6 +20,10 @@ interface Props {
   loading?: boolean
   type?: 'button' | 'submit' | 'reset'
   fullWidth?: boolean
+  /** Icon component (for example a lucide icon) rendered before the label, or alone when there is no default slot. */
+  icon?: Component
+  /** Accessible name and tooltip of an icon-only button. */
+  label?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,12 +33,18 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   type: 'button',
   fullWidth: false,
+  icon: undefined,
+  label: undefined,
 })
 
 const emit = defineEmits<{
   click: [event: MouseEvent]
 }>()
 
+const slots = useSlots()
+const iconOnly = computed(() => Boolean(props.icon) && !slots.default)
+const block = computed(() => (iconOnly.value ? 'mint-icon-button' : 'mint-button'))
+
 function handleClick(event: MouseEvent) {
   if (!props.disabled && !props.loading) {
     emit('click', event)
@@ -35,18 +56,20 @@ function handleClick(event: MouseEvent) {
   <button
     :type="type"
     :disabled="disabled || loading"
+    :aria-label="iconOnly ? label : undefined"
+    :title="iconOnly ? label : undefined"
     :class="[
-      'mint-button',
-      `mint-button--${variant}`,
-      `mint-button--${size}`,
-      fullWidth ? 'mint-button--full-width' : '',
-      (disabled || loading) ? 'mint-button--disabled' : '',
+      block,
+      `${block}--${variant}`,
+      `${block}--${size}`,
+      fullWidth && !iconOnly ? 'mint-button--full-width' : '',
+      (disabled || loading) ? `${block}--disabled` : '',
     ]"
     @click="handleClick"
   >
     <svg
       v-if="loading"
-      class="mint-button__spinner"
+      :class="iconOnly ? ['mint-icon-button__spinner', `mint-icon-button__icon--${size}`] : 'mint-button__spinner'"
       fill="none"
       viewBox="0 0 24 24"
     >
@@ -64,8 +87,14 @@ function handleClick(event: MouseEvent) {
         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>
-    <slot name="icon-left" />
-    <slot />
-    <slot name="icon-right" />
+    <span v-if="iconOnly && !loading" :class="`mint-icon-button__icon--${size}`">
+      <component :is="icon" aria-hidden="true" />
+    </span>
+    <template v-if="!iconOnly">
+      <component :is="icon" v-if="icon" class="mint-button__icon" aria-hidden="true" />
+      <slot name="icon-left" />
+      <slot />
+      <slot name="icon-right" />
+    </template>
   </button>
 </template>

package/src/components/BaseCheckbox.story.vue

@@ -81,7 +81,7 @@ function toggleOne(state: ReturnType<typeof initTriState>, sample: string) {
       <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.5rem;">
         <BaseCheckbox
           v-model="checked"
-          variant="row"
+          layout="row"
           label="Include metadata"
           description="Add method and sample context"
           :icon="icons.database"
@@ -90,7 +90,7 @@ function toggleOne(state: ReturnType<typeof initTriState>, sample: string) {
         />
         <BaseCheckbox
           :model-value="false"
-          variant="row"
+          layout="row"
           label="Attach report"
           description="Include the rendered summary PDF"
           :icon="icons.file"

package/src/components/{BaseToggle.story.vue → BaseCheckbox.switch.story.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import BaseToggle from './BaseToggle.vue'
+import BaseCheckbox from './BaseCheckbox.vue'
 
 const sizes = ['sm', 'md', 'lg'] as const
 const toggleOn = ref(true)
@@ -12,11 +12,12 @@ const icons = {
 </script>
 
 <template>
-  <Story title="Base Inputs/BaseToggle">
+  <Story title="Base Inputs/BaseCheckbox · switch">
     <Variant title="Playground">
       <template #default="{ state }">
         <div style="padding: 2rem;">
-          <BaseToggle
+          <BaseCheckbox
+            type="switch"
             v-model="state.value"
             :label="state.label"
             :disabled="state.disabled"
@@ -46,32 +47,34 @@ const icons = {
           <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>
-          <BaseToggle v-model="toggleOn" :label="`${size} toggle`" :size="size" />
+          <BaseCheckbox type="switch" v-model="toggleOn" :label="`${size} toggle`" :size="size" />
         </div>
       </div>
     </Variant>
 
     <Variant title="On and Off States">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
-        <BaseToggle v-model="toggleOn" label="Toggle is ON" />
-        <BaseToggle v-model="toggleOff" label="Toggle is OFF" />
+        <BaseCheckbox type="switch" v-model="toggleOn" label="Toggle is ON" />
+        <BaseCheckbox type="switch" v-model="toggleOff" label="Toggle is OFF" />
       </div>
     </Variant>
 
     <Variant title="Choice Rows">
       <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.5rem;">
-        <BaseToggle
+        <BaseCheckbox
+          type="switch"
           v-model="toggleOn"
-          variant="row"
+          layout="row"
           label="Show outliers"
           description="Keep flagged peaks visible"
           :icon="icons.eye"
           icon-color="#0ea5e9"
           icon-bg="#e0f2fe"
         />
-        <BaseToggle
+        <BaseCheckbox
+          type="switch"
           v-model="toggleOff"
-          variant="row"
+          layout="row"
           label="Log scale"
           description="Compress high-intensity spread"
           :icon="icons.chart"
@@ -83,25 +86,25 @@ const icons = {
 
     <Variant title="Without Label">
       <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center;">
-        <BaseToggle v-model="toggleOn" size="sm" />
-        <BaseToggle v-model="toggleOn" size="md" />
-        <BaseToggle v-model="toggleOn" size="lg" />
+        <BaseCheckbox type="switch" v-model="toggleOn" size="sm" />
+        <BaseCheckbox type="switch" v-model="toggleOn" size="md" />
+        <BaseCheckbox type="switch" v-model="toggleOn" size="lg" />
       </div>
     </Variant>
 
     <Variant title="Disabled States">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
-        <BaseToggle :model-value="false" label="Disabled (off)" disabled />
-        <BaseToggle :model-value="true" label="Disabled (on)" disabled />
+        <BaseCheckbox type="switch" :model-value="false" label="Disabled (off)" disabled />
+        <BaseCheckbox type="switch" :model-value="true" label="Disabled (on)" disabled />
       </div>
     </Variant>
 
     <Variant title="Settings Example">
       <div style="padding: 2rem; max-width: 400px; display: flex; flex-direction: column; gap: 1rem;">
-        <BaseToggle :model-value="true" label="Dark mode" />
-        <BaseToggle :model-value="true" label="Auto-save results" />
-        <BaseToggle :model-value="false" label="Show advanced options" />
-        <BaseToggle :model-value="false" label="Beta features" disabled />
+        <BaseCheckbox type="switch" :model-value="true" label="Dark mode" />
+        <BaseCheckbox type="switch" :model-value="true" label="Auto-save results" />
+        <BaseCheckbox type="switch" :model-value="false" label="Show advanced options" />
+        <BaseCheckbox type="switch" :model-value="false" label="Beta features" disabled />
       </div>
     </Variant>
   </Story>