@morscherlab/mint-sdk 1.0.0-alpha.7 → 1.0.0-alpha.9

package/src/components/ExperimentCodeBadge.vue

@@ -45,9 +45,9 @@ function handleKeydown(event: KeyboardEvent) {
 <template>
   <span
     :class="[
-      'mld-exp-code',
-      `mld-exp-code--${size}`,
-      { 'mld-exp-code--copyable': copyable, 'mld-exp-code--copied': copied },
+      'mint-exp-code',
+      `mint-exp-code--${size}`,
+      { 'mint-exp-code--copyable': copyable, 'mint-exp-code--copied': copied },
     ]"
     :role="copyable ? 'button' : undefined"
     :tabindex="copyable ? 0 : undefined"

package/src/components/ExperimentDataViewer.vue

@@ -137,9 +137,9 @@ function handleDownloadCsv() {
 </script>
 
 <template>
-  <div class="mld-data-viewer">
-    <div class="mld-data-viewer__header">
-      <div class="mld-data-viewer__controls">
+  <div class="mint-data-viewer">
+    <div class="mint-data-viewer__header">
+      <div class="mint-data-viewer__controls">
         <SegmentedControl
           v-model="viewMode"
           :options="viewOptions"
@@ -148,7 +148,7 @@ function handleDownloadCsv() {
           :full-width="false"
         />
       </div>
-      <div class="mld-data-viewer__actions">
+      <div class="mint-data-viewer__actions">
         <BaseButton
           v-if="pluginRoutePrefix && experimentId"
           variant="secondary"
@@ -174,9 +174,9 @@ function handleDownloadCsv() {
       </div>
     </div>
 
-    <div class="mld-data-viewer__content">
-      <div v-if="isLoading" class="mld-data-viewer__loading">
-        <div class="mld-data-viewer__skeleton">
+    <div class="mint-data-viewer__content">
+      <div v-if="isLoading" class="mint-data-viewer__loading">
+        <div class="mint-data-viewer__skeleton">
           <Skeleton width="40%" height="16px" />
           <Skeleton width="100%" height="12px" />
           <Skeleton width="100%" height="12px" />
@@ -185,16 +185,16 @@ function handleDownloadCsv() {
       </div>
       <template v-else>
         <!-- Summary View -->
-        <div v-if="viewMode === 'summary' && mergedSummaryData" class="mld-summary">
+        <div v-if="viewMode === 'summary' && mergedSummaryData" class="mint-summary">
           <!-- Metadata pills -->
-          <div v-if="metadataEntries.length" class="mld-summary__metadata">
+          <div v-if="metadataEntries.length" class="mint-summary__metadata">
             <span
               v-for="entry in metadataEntries"
               :key="entry.key"
-              class="mld-summary__pill"
+              class="mint-summary__pill"
             >
-              <span class="mld-summary__pill-key">{{ entry.key }}</span>
-              <span class="mld-summary__pill-value">{{ entry.value }}</span>
+              <span class="mint-summary__pill-key">{{ entry.key }}</span>
+              <span class="mint-summary__pill-value">{{ entry.value }}</span>
             </span>
           </div>
 
@@ -202,29 +202,29 @@ function handleDownloadCsv() {
           <div
             v-for="section in mergedSummaryData.sections"
             :key="section.key"
-            class="mld-summary__section"
+            class="mint-summary__section"
           >
             <!-- Group section: cards with embedded tables -->
             <template v-if="section.type === 'group' && section.items">
               <div
                 v-for="(item, idx) in section.items"
                 :key="idx"
-                class="mld-summary__group-card"
+                class="mint-summary__group-card"
               >
-                <div class="mld-summary__group-header">
-                  <span class="mld-summary__group-label">{{ item.label }}</span>
-                  <span class="mld-summary__group-count">
+                <div class="mint-summary__group-header">
+                  <span class="mint-summary__group-label">{{ item.label }}</span>
+                  <span class="mint-summary__group-count">
                     {{ item.item_count }} {{ item.item_key }}
                   </span>
                 </div>
-                <div v-if="item.metadata && Object.keys(item.metadata).length" class="mld-summary__group-meta">
+                <div v-if="item.metadata && Object.keys(item.metadata).length" class="mint-summary__group-meta">
                   <span
                     v-for="(val, key) in item.metadata"
                     :key="String(key)"
-                    class="mld-summary__pill mld-summary__pill--sm"
+                    class="mint-summary__pill mint-summary__pill--sm"
                   >
-                    <span class="mld-summary__pill-key">{{ String(key).replace(/_/g, ' ') }}</span>
-                    <span class="mld-summary__pill-value">{{ val }}</span>
+                    <span class="mint-summary__pill-key">{{ String(key).replace(/_/g, ' ') }}</span>
+                    <span class="mint-summary__pill-value">{{ val }}</span>
                   </span>
                 </div>
                 <DataFrame
@@ -241,9 +241,9 @@ function handleDownloadCsv() {
 
             <!-- Table section: flat table -->
             <template v-else-if="section.type === 'table' && section.rows">
-              <div class="mld-summary__table-header">
-                <span class="mld-summary__section-label">{{ section.label }}</span>
-                <span class="mld-summary__section-count">{{ section.row_count }} rows</span>
+              <div class="mint-summary__table-header">
+                <span class="mint-summary__section-label">{{ section.label }}</span>
+                <span class="mint-summary__section-count">{{ section.row_count }} rows</span>
               </div>
               <DataFrame
                 :data="section.rows"
@@ -275,7 +275,7 @@ function handleDownloadCsv() {
           :searchable="true"
           :sortable="true"
         />
-        <div v-else-if="viewMode === 'table'" class="mld-data-viewer__empty">
+        <div v-else-if="viewMode === 'table'" class="mint-data-viewer__empty">
           No tabular data available. Use tree view.
         </div>
       </template>

package/src/components/ExperimentPopover.vue

@@ -105,12 +105,12 @@ function formatStatus(status: string): string {
 </script>
 
 <template>
-  <div ref="popoverRef" class="mld-experiment-popover">
+  <div ref="popoverRef" class="mint-experiment-popover">
     <!-- Split trigger: experiment pill + inline save -->
     <div
       :class="[
-        'mld-experiment-popover__split',
-        { 'mld-experiment-popover__split--with-save': showSave && experimentName },
+        'mint-experiment-popover__split',
+        { 'mint-experiment-popover__split--with-save': showSave && experimentName },
       ]"
     >
       <!-- Left: experiment trigger (opens popover) — shows only the code for
@@ -118,15 +118,15 @@ function formatStatus(status: string): string {
       <button
         type="button"
         :class="[
-          'mld-experiment-popover__trigger',
-          { 'mld-experiment-popover__trigger--active': isOpen },
-          { 'mld-experiment-popover__trigger--empty': !experimentCode && !experimentName },
+          'mint-experiment-popover__trigger',
+          { 'mint-experiment-popover__trigger--active': isOpen },
+          { 'mint-experiment-popover__trigger--empty': !experimentCode && !experimentName },
         ]"
         :title="experimentName || undefined"
         @click.stop="toggle"
       >
         <!-- Flask icon -->
-        <svg class="mld-experiment-popover__trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="mint-experiment-popover__trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
             stroke-linecap="round"
             stroke-linejoin="round"
@@ -135,11 +135,11 @@ function formatStatus(status: string): string {
           />
         </svg>
         <!-- Code preferred, name as fallback, "No experiment" as empty state -->
-        <span v-if="experimentCode" class="mld-experiment-popover__trigger-code">{{ experimentCode }}</span>
-        <span v-else-if="experimentName" class="mld-experiment-popover__trigger-text">{{ experimentName }}</span>
-        <span v-else class="mld-experiment-popover__trigger-text">No experiment</span>
+        <span v-if="experimentCode" class="mint-experiment-popover__trigger-code">{{ experimentCode }}</span>
+        <span v-else-if="experimentName" class="mint-experiment-popover__trigger-text">{{ experimentName }}</span>
+        <span v-else class="mint-experiment-popover__trigger-text">No experiment</span>
         <!-- Chevron -->
-        <svg class="mld-experiment-popover__trigger-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg class="mint-experiment-popover__trigger-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="m6 9 6 6 6-6" />
         </svg>
       </button>
@@ -149,41 +149,41 @@ function formatStatus(status: string): string {
         v-if="showSave && experimentName"
         type="button"
         :class="[
-          'mld-experiment-popover__save-trigger',
-          { 'mld-experiment-popover__save-trigger--loading': saveLoading },
-          { 'mld-experiment-popover__save-trigger--success': showSuccess },
-          { 'mld-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },
+          'mint-experiment-popover__save-trigger',
+          { 'mint-experiment-popover__save-trigger--loading': saveLoading },
+          { 'mint-experiment-popover__save-trigger--success': showSuccess },
+          { 'mint-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },
         ]"
         :disabled="saveDisabled && !showSuccess"
         :title="saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'"
         @click.stop="handleSave"
       >
         <!-- Loading spinner -->
-        <span v-if="saveLoading" class="mld-experiment-popover__spinner--inline" />
+        <span v-if="saveLoading" class="mint-experiment-popover__spinner--inline" />
         <!-- Success check -->
-        <svg v-else-if="showSuccess" class="mld-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg v-else-if="showSuccess" class="mint-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
         </svg>
         <!-- Save icon -->
-        <svg v-else class="mld-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg v-else class="mint-experiment-popover__save-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
         </svg>
       </button>
     </div>
 
     <!-- Popover panel -->
-    <div v-if="isOpen" class="mld-experiment-popover__panel">
+    <div v-if="isOpen" class="mint-experiment-popover__panel">
       <!-- Header -->
-      <div class="mld-experiment-popover__header">
-        <div class="mld-experiment-popover__title">Experiment</div>
-        <div class="mld-experiment-popover__subtitle">
-          {{ experimentName ? 'Linked experiment context' : 'Link to an MLD experiment' }}
+      <div class="mint-experiment-popover__header">
+        <div class="mint-experiment-popover__title">Experiment</div>
+        <div class="mint-experiment-popover__subtitle">
+          {{ experimentName ? 'Linked experiment context' : 'Link to an MINT experiment' }}
         </div>
       </div>
 
       <!-- No experiment selected -->
-      <div v-if="!experimentName" class="mld-experiment-popover__body">
-        <button type="button" class="mld-experiment-popover__select-btn" @click="handleSelect">
+      <div v-if="!experimentName" class="mint-experiment-popover__body">
+        <button type="button" class="mint-experiment-popover__select-btn" @click="handleSelect">
           <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
           </svg>
@@ -192,9 +192,9 @@ function formatStatus(status: string): string {
       </div>
 
       <!-- Experiment selected -->
-      <div v-else class="mld-experiment-popover__body">
-        <div class="mld-experiment-popover__card">
-          <div class="mld-experiment-popover__card-icon">
+      <div v-else class="mint-experiment-popover__body">
+        <div class="mint-experiment-popover__card">
+          <div class="mint-experiment-popover__card-icon">
             <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 stroke-linecap="round"
@@ -204,19 +204,19 @@ function formatStatus(status: string): string {
               />
             </svg>
           </div>
-          <div class="mld-experiment-popover__card-info">
-            <span v-if="experimentCode" class="mld-experiment-popover__card-code">{{ experimentCode }}</span>
-            <div class="mld-experiment-popover__card-name">{{ experimentName }}</div>
-            <div v-if="experimentStatus" class="mld-experiment-popover__card-status">
+          <div class="mint-experiment-popover__card-info">
+            <span v-if="experimentCode" class="mint-experiment-popover__card-code">{{ experimentCode }}</span>
+            <div class="mint-experiment-popover__card-name">{{ experimentName }}</div>
+            <div v-if="experimentStatus" class="mint-experiment-popover__card-status">
               {{ formatStatus(experimentStatus) }}
             </div>
           </div>
         </div>
-        <div class="mld-experiment-popover__card-actions">
-          <button type="button" class="mld-experiment-popover__change-btn" @click="handleSelect">
+        <div class="mint-experiment-popover__card-actions">
+          <button type="button" class="mint-experiment-popover__change-btn" @click="handleSelect">
             Change
           </button>
-          <button v-if="showDetach" type="button" class="mld-experiment-popover__detach-btn" @click="handleDetach">
+          <button v-if="showDetach" type="button" class="mint-experiment-popover__detach-btn" @click="handleDetach">
             Detach
           </button>
         </div>

package/src/components/ExperimentSelectorModal.vue

@@ -129,7 +129,7 @@ function handleKeydown(event: KeyboardEvent) {
 
 function scrollActiveIntoView() {
   nextTick(() => {
-    const row = listRef.value?.querySelector('.mld-experiment-selector__row--focused')
+    const row = listRef.value?.querySelector('.mint-experiment-selector__row--focused')
     row?.scrollIntoView({ block: 'nearest' })
   })
 }
@@ -180,10 +180,10 @@ watch(
     :size="size"
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <div class="mld-experiment-selector" @keydown="handleKeydown">
+    <div class="mint-experiment-selector" @keydown="handleKeydown">
       <!-- Filter bar row 1 -->
-      <div class="mld-experiment-selector__filters-row">
-        <div class="mld-experiment-selector__search">
+      <div class="mint-experiment-selector__filters-row">
+        <div class="mint-experiment-selector__search">
           <BaseInput
             v-model="filters.search"
             placeholder="Search experiments..."
@@ -191,7 +191,7 @@ watch(
             type="search"
           />
         </div>
-        <div class="mld-experiment-selector__filter-select">
+        <div class="mint-experiment-selector__filter-select">
           <BaseSelect
             :model-value="filters.status ?? ''"
             :options="EXPERIMENT_STATUS_OPTIONS"
@@ -199,7 +199,7 @@ watch(
             @update:model-value="v => setFilter('status', v)"
           />
         </div>
-        <div v-if="typeFilterOptions.length > 1" class="mld-experiment-selector__filter-select">
+        <div v-if="typeFilterOptions.length > 1" class="mint-experiment-selector__filter-select">
           <BaseSelect
             :model-value="filters.experimentType ?? ''"
             :options="typeFilterOptions"
@@ -208,8 +208,8 @@ watch(
           />
         </div>
         <button
-          class="mld-experiment-selector__filters-toggle"
-          :class="{ 'mld-experiment-selector__filters-toggle--active': hasActiveAdvancedFilters }"
+          class="mint-experiment-selector__filters-toggle"
+          :class="{ 'mint-experiment-selector__filters-toggle--active': hasActiveAdvancedFilters }"
           type="button"
           @click="showAdvanced = !showAdvanced"
         >
@@ -218,13 +218,13 @@ watch(
             <circle cx="6" cy="12" r="2" /><circle cx="10" cy="18" r="2" /><circle cx="6" cy="6" r="2" />
           </svg>
           Filters
-          <span v-if="hasActiveAdvancedFilters" class="mld-experiment-selector__filters-dot" />
+          <span v-if="hasActiveAdvancedFilters" class="mint-experiment-selector__filters-dot" />
         </button>
       </div>
 
       <!-- Filter bar row 2 (advanced, collapsible) -->
-      <div v-if="showAdvanced" class="mld-experiment-selector__filters-advanced">
-        <div v-if="projectFilterOptions.length > 1" class="mld-experiment-selector__filter-select">
+      <div v-if="showAdvanced" class="mint-experiment-selector__filters-advanced">
+        <div v-if="projectFilterOptions.length > 1" class="mint-experiment-selector__filter-select">
           <BaseSelect
             :model-value="filters.project ?? ''"
             :options="projectFilterOptions"
@@ -232,7 +232,7 @@ watch(
             @update:model-value="v => setFilter('project', v)"
           />
         </div>
-        <div class="mld-experiment-selector__filter-select">
+        <div class="mint-experiment-selector__filter-select">
           <BaseSelect
             :model-value="filters.datePreset ?? ''"
             :options="DATE_PRESET_OPTIONS"
@@ -240,7 +240,7 @@ watch(
             @update:model-value="v => setFilter('datePreset', v)"
           />
         </div>
-        <div class="mld-experiment-selector__filter-select">
+        <div class="mint-experiment-selector__filter-select">
           <BaseSelect
             :model-value="sortKey"
             :options="SORT_OPTIONS"
@@ -248,20 +248,20 @@ watch(
             @update:model-value="handleSortChange"
           />
         </div>
-        <label class="mld-experiment-selector__group-toggle">
+        <label class="mint-experiment-selector__group-toggle">
           <input
             v-model="groupToggle"
             type="checkbox"
-            class="mld-experiment-selector__group-checkbox"
+            class="mint-experiment-selector__group-checkbox"
           />
           Group by project
         </label>
       </div>
 
       <!-- Loading skeleton -->
-      <div v-if="isLoading" class="mld-experiment-selector__skeleton">
-        <div v-for="n in 4" :key="n" class="mld-experiment-selector__skeleton-row">
-          <div class="mld-experiment-selector__skeleton-content">
+      <div v-if="isLoading" class="mint-experiment-selector__skeleton">
+        <div v-for="n in 4" :key="n" class="mint-experiment-selector__skeleton-row">
+          <div class="mint-experiment-selector__skeleton-content">
             <Skeleton :width="120 + n * 20" height="14px" />
             <Skeleton width="80px" height="10px" />
           </div>
@@ -270,7 +270,7 @@ watch(
       </div>
 
       <!-- Error -->
-      <div v-else-if="error" class="mld-experiment-selector__error">
+      <div v-else-if="error" class="mint-experiment-selector__error">
         {{ error }}
       </div>
 
@@ -283,37 +283,37 @@ watch(
       />
 
       <!-- Experiment list: grouped mode -->
-      <div v-else-if="groupToggle" ref="listRef" class="mld-experiment-selector__list">
+      <div v-else-if="groupToggle" ref="listRef" class="mint-experiment-selector__list">
         <template v-for="([groupName, groupExps]) in groupedByProject" :key="groupName">
           <button
             type="button"
-            class="mld-experiment-selector__group-header"
+            class="mint-experiment-selector__group-header"
             @click="toggleGroup(groupName)"
           >
             <svg
-              class="mld-experiment-selector__group-chevron"
-              :class="{ 'mld-experiment-selector__group-chevron--collapsed': collapsedGroups.has(groupName) }"
+              class="mint-experiment-selector__group-chevron"
+              :class="{ 'mint-experiment-selector__group-chevron--collapsed': collapsedGroups.has(groupName) }"
               width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
             >
               <polyline points="6 9 12 15 18 9" />
             </svg>
-            <span class="mld-experiment-selector__group-name">{{ groupName }}</span>
-            <span class="mld-experiment-selector__group-count">{{ groupExps.length }}</span>
+            <span class="mint-experiment-selector__group-name">{{ groupName }}</span>
+            <span class="mint-experiment-selector__group-count">{{ groupExps.length }}</span>
           </button>
           <template v-if="!collapsedGroups.has(groupName)">
             <div
               v-for="exp in groupExps"
               :key="exp.id"
-              class="mld-experiment-selector__row"
+              class="mint-experiment-selector__row"
               :class="{
-                'mld-experiment-selector__row--active': exp.id === currentExperimentId,
-                'mld-experiment-selector__row--focused': getFlatIndex(exp) === activeIndex,
+                'mint-experiment-selector__row--active': exp.id === currentExperimentId,
+                'mint-experiment-selector__row--focused': getFlatIndex(exp) === activeIndex,
               }"
               @click="handleSelect(exp)"
               @mouseenter="activeIndex = getFlatIndex(exp)"
             >
-              <div class="mld-experiment-selector__row-content">
-                <div class="mld-experiment-selector__name">
+              <div class="mint-experiment-selector__row-content">
+                <div class="mint-experiment-selector__name">
                   {{ exp.name }}
                   <ExperimentCodeBadge
                     v-if="exp.experiment_code"
@@ -322,7 +322,7 @@ watch(
                     :copyable="false"
                   />
                 </div>
-                <div class="mld-experiment-selector__meta">
+                <div class="mint-experiment-selector__meta">
                   <span>{{ formatExperimentDate(exp.created_at) }}</span>
                 </div>
               </div>
@@ -335,20 +335,20 @@ watch(
       </div>
 
       <!-- Experiment list: flat mode -->
-      <div v-else ref="listRef" class="mld-experiment-selector__list">
+      <div v-else ref="listRef" class="mint-experiment-selector__list">
         <div
           v-for="(exp, idx) in experiments"
           :key="exp.id"
-          class="mld-experiment-selector__row"
+          class="mint-experiment-selector__row"
           :class="{
-            'mld-experiment-selector__row--active': exp.id === currentExperimentId,
-            'mld-experiment-selector__row--focused': idx === activeIndex,
+            'mint-experiment-selector__row--active': exp.id === currentExperimentId,
+            'mint-experiment-selector__row--focused': idx === activeIndex,
           }"
           @click="handleSelect(exp)"
           @mouseenter="activeIndex = idx"
         >
-          <div class="mld-experiment-selector__row-content">
-            <div class="mld-experiment-selector__name">
+          <div class="mint-experiment-selector__row-content">
+            <div class="mint-experiment-selector__name">
               {{ exp.name }}
               <ExperimentCodeBadge
                 v-if="exp.experiment_code"
@@ -357,7 +357,7 @@ watch(
                 :copyable="false"
               />
             </div>
-            <div class="mld-experiment-selector__meta">
+            <div class="mint-experiment-selector__meta">
               <span v-if="exp.project_name || exp.project">{{ exp.project_name || exp.project }}</span>
               <span>{{ formatExperimentDate(exp.created_at) }}</span>
             </div>
@@ -369,10 +369,10 @@ watch(
       </div>
 
       <!-- Footer: clear selection -->
-      <div v-if="currentExperimentId != null" class="mld-experiment-selector__footer">
+      <div v-if="currentExperimentId != null" class="mint-experiment-selector__footer">
         <button
           type="button"
-          class="mld-experiment-selector__clear-btn"
+          class="mint-experiment-selector__clear-btn"
           @click="handleDeselect"
         >
           Clear selection