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

package/src/components/SampleSelector.vue

@@ -346,7 +346,7 @@ function handleGroupDragStart(name: string, kind: GroupDragKind, event: DragEven
   draggingGroupKind.value = kind
   if (event.dataTransfer) {
     event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', `mld-group:${name}`)
+    event.dataTransfer.setData('text/plain', `mint-group:${name}`)
   }
 }
 
@@ -503,32 +503,32 @@ function addNewGroup() {
 </script>
 
 <template>
-  <div class="mld-sample-selector">
+  <div class="mint-sample-selector">
     <!-- Select All Row -->
-    <label class="mld-sample-selector__select-all">
+    <label class="mint-sample-selector__select-all">
       <input
         type="checkbox"
         :checked="isAllSelected"
         @change="toggleSelectAll"
-        class="mld-sample-selector__checkbox"
+        class="mint-sample-selector__checkbox"
       />
-      <span class="mld-sample-selector__select-all-label">Select All</span>
-      <span class="mld-sample-selector__select-all-count">{{ samples.length }} samples</span>
+      <span class="mint-sample-selector__select-all-label">Select All</span>
+      <span class="mint-sample-selector__select-all-count">{{ samples.length }} samples</span>
     </label>
 
     <!-- Action Buttons Row -->
-    <div v-if="enableGrouping" class="mld-sample-selector__actions">
-      <div class="mld-sample-selector__actions-row">
+    <div v-if="enableGrouping" class="mint-sample-selector__actions">
+      <div class="mint-sample-selector__actions-row">
         <!-- Smart Group Button -->
         <BaseButton
           v-if="enableSmartGroup"
           :variant="groupingEnabled ? 'primary' : 'secondary'"
           size="sm"
           :disabled="samples.length === 0"
-          class="mld-sample-selector__action-btn"
+          class="mint-sample-selector__action-btn"
           @click="showSmartGroupModal = true"
         >
-          <svg class="mld-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
           </svg>
           <span>Smart Group</span>
@@ -539,11 +539,11 @@ function addNewGroup() {
           variant="ghost"
           size="sm"
           :disabled="internalGroups.length === 0"
-          class="mld-sample-selector__action-btn mld-sample-selector__action-btn--reset"
+          class="mint-sample-selector__action-btn mint-sample-selector__action-btn--reset"
           @click="clearGroups"
           title="Clear all groups"
         >
-          <svg class="mld-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
           </svg>
         </BaseButton>
@@ -551,18 +551,18 @@ function addNewGroup() {
     </div>
 
     <!-- Grouped View -->
-    <div v-if="groupingEnabled" class="mld-sample-selector__grouped">
+    <div v-if="groupingEnabled" class="mint-sample-selector__grouped">
       <!-- Groups Header -->
-      <div class="mld-sample-selector__groups-header">
-        <span class="mld-sample-selector__groups-title">Groups ({{ internalGroups.length }})</span>
-        <div class="mld-sample-selector__groups-controls">
-          <button type="button" class="mld-sample-selector__expand-btn" @click="expandAllGroups" title="Expand all">
-            <svg class="mld-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div class="mint-sample-selector__groups-header">
+        <span class="mint-sample-selector__groups-title">Groups ({{ internalGroups.length }})</span>
+        <div class="mint-sample-selector__groups-controls">
+          <button type="button" class="mint-sample-selector__expand-btn" @click="expandAllGroups" title="Expand all">
+            <svg class="mint-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
             </svg>
           </button>
-          <button type="button" class="mld-sample-selector__expand-btn" @click="collapseAllGroups" title="Collapse all">
-            <svg class="mld-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <button type="button" class="mint-sample-selector__expand-btn" @click="collapseAllGroups" title="Collapse all">
+            <svg class="mint-sample-selector__expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
             </svg>
           </button>
@@ -570,21 +570,21 @@ function addNewGroup() {
       </div>
 
       <!-- Hierarchical Tree -->
-      <div class="mld-sample-selector__tree">
+      <div class="mint-sample-selector__tree">
         <!-- Major Groups (when hierarchy is meaningful) -->
         <template v-if="showHierarchy">
           <div
             v-for="majorGroup in hierarchicalGroups"
             :key="majorGroup.name"
-            class="mld-sample-selector__major-group"
+            class="mint-sample-selector__major-group"
           >
             <!-- Major Group Header -->
             <div
               :class="[
-                'mld-sample-selector__major-header',
-                draggingGroup === majorGroup.name && draggingGroupKind === 'major' ? 'mld-sample-selector__header--dragging' : '',
-                reorderTarget === majorGroup.name && draggingGroupKind === 'major' && reorderPosition === 'before' ? 'mld-sample-selector__header--drag-over-before' : '',
-                reorderTarget === majorGroup.name && draggingGroupKind === 'major' && reorderPosition === 'after' ? 'mld-sample-selector__header--drag-over-after' : '',
+                'mint-sample-selector__major-header',
+                draggingGroup === majorGroup.name && draggingGroupKind === 'major' ? 'mint-sample-selector__header--dragging' : '',
+                reorderTarget === majorGroup.name && draggingGroupKind === 'major' && reorderPosition === 'before' ? 'mint-sample-selector__header--drag-over-before' : '',
+                reorderTarget === majorGroup.name && draggingGroupKind === 'major' && reorderPosition === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
               ]"
               draggable="true"
               @click="toggleGroupExpanded(`major:${majorGroup.name}`)"
@@ -596,8 +596,8 @@ function addNewGroup() {
             >
               <svg
                 :class="[
-                  'mld-sample-selector__chevron',
-                  isGroupExpanded(`major:${majorGroup.name}`) ? 'mld-sample-selector__chevron--open' : '',
+                  'mint-sample-selector__chevron',
+                  isGroupExpanded(`major:${majorGroup.name}`) ? 'mint-sample-selector__chevron--open' : '',
                 ]"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24"
               >
@@ -608,7 +608,7 @@ function addNewGroup() {
                 type="checkbox"
                 :checked="isMajorGroupFullySelected(majorGroup)"
                 :indeterminate="isMajorGroupPartiallySelected(majorGroup)"
-                class="mld-sample-selector__checkbox"
+                class="mint-sample-selector__checkbox"
                 :style="{ accentColor: majorGroup.color }"
                 @click.stop
                 @change="toggleMajorGroupSamples(majorGroup)"
@@ -616,16 +616,16 @@ function addNewGroup() {
 
               <button
                 type="button"
-                class="mld-sample-selector__color-dot mld-sample-selector__color-dot--large mld-sample-selector__color-dot--clickable"
+                class="mint-sample-selector__color-dot mint-sample-selector__color-dot--large mint-sample-selector__color-dot--clickable"
                 :style="{ backgroundColor: majorGroup.color }"
                 @click.stop="openMajorGroupColorPicker(majorGroup, $event)"
                 title="Click to change color family"
               />
 
-              <span class="mld-sample-selector__major-name">{{ majorGroup.name }}</span>
+              <span class="mint-sample-selector__major-name">{{ majorGroup.name }}</span>
 
               <span
-                class="mld-sample-selector__count-badge"
+                class="mint-sample-selector__count-badge"
                 :style="{ backgroundColor: majorGroup.color + '20', color: majorGroup.color }"
               >
                 {{ majorGroup.allSamples.length }}
@@ -633,7 +633,7 @@ function addNewGroup() {
 
               <button
                 type="button"
-                class="mld-sample-selector__delete-btn mld-sample-selector__delete-btn--hidden"
+                class="mint-sample-selector__delete-btn mint-sample-selector__delete-btn--hidden"
                 @click.stop="deleteMajorGroup(majorGroup)"
                 title="Remove major group"
               >
@@ -644,18 +644,18 @@ function addNewGroup() {
             </div>
 
             <!-- Sub Groups (collapsible) -->
-            <Transition name="mld-collapse">
+            <Transition name="mint-collapse">
               <div
                 v-if="isGroupExpanded(`major:${majorGroup.name}`)"
-                class="mld-sample-selector__sub-groups"
+                class="mint-sample-selector__sub-groups"
                 :style="{ borderColor: majorGroup.color + '30' }"
               >
               <div
                 v-for="subGroup in majorGroup.subGroups"
                 :key="subGroup.name"
                 :class="[
-                  'mld-sample-selector__sub-group',
-                  dragOverGroup === subGroup.name ? 'mld-sample-selector__sub-group--drag-over' : '',
+                  'mint-sample-selector__sub-group',
+                  dragOverGroup === subGroup.name ? 'mint-sample-selector__sub-group--drag-over' : '',
                 ]"
                 @dragover="handleDragOver(subGroup.name, $event)"
                 @dragleave="handleDragLeave"
@@ -664,10 +664,10 @@ function addNewGroup() {
                 <!-- Sub Group Header -->
                 <div
                   :class="[
-                    'mld-sample-selector__sub-header',
-                    draggingGroup === subGroup.name && draggingGroupKind === 'sub' ? 'mld-sample-selector__header--dragging' : '',
-                    reorderTarget === subGroup.name && draggingGroupKind === 'sub' && reorderPosition === 'before' ? 'mld-sample-selector__header--drag-over-before' : '',
-                    reorderTarget === subGroup.name && draggingGroupKind === 'sub' && reorderPosition === 'after' ? 'mld-sample-selector__header--drag-over-after' : '',
+                    'mint-sample-selector__sub-header',
+                    draggingGroup === subGroup.name && draggingGroupKind === 'sub' ? 'mint-sample-selector__header--dragging' : '',
+                    reorderTarget === subGroup.name && draggingGroupKind === 'sub' && reorderPosition === 'before' ? 'mint-sample-selector__header--drag-over-before' : '',
+                    reorderTarget === subGroup.name && draggingGroupKind === 'sub' && reorderPosition === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
                   ]"
                   draggable="true"
                   @click="toggleGroupExpanded(subGroup.name)"
@@ -679,8 +679,8 @@ function addNewGroup() {
                 >
                   <svg
                     :class="[
-                      'mld-sample-selector__chevron mld-sample-selector__chevron--small',
-                      isGroupExpanded(subGroup.name) ? 'mld-sample-selector__chevron--open' : '',
+                      'mint-sample-selector__chevron mint-sample-selector__chevron--small',
+                      isGroupExpanded(subGroup.name) ? 'mint-sample-selector__chevron--open' : '',
                     ]"
                     fill="none" stroke="currentColor" viewBox="0 0 24 24"
                   >
@@ -691,22 +691,22 @@ function addNewGroup() {
                     type="checkbox"
                     :checked="isGroupFullySelected(subGroup.name)"
                     :indeterminate="isGroupPartiallySelected(subGroup.name)"
-                    class="mld-sample-selector__checkbox mld-sample-selector__checkbox--small"
+                    class="mint-sample-selector__checkbox mint-sample-selector__checkbox--small"
                     :style="{ accentColor: subGroup.displayColor }"
                     @click.stop
                     @change="toggleGroupSamples(subGroup.name)"
                   />
 
                   <div
-                    class="mld-sample-selector__color-dot"
+                    class="mint-sample-selector__color-dot"
                     :style="{ backgroundColor: subGroup.displayColor }"
                     aria-hidden="true"
                   />
 
-                  <span class="mld-sample-selector__sub-name">{{ subGroup.name }}</span>
+                  <span class="mint-sample-selector__sub-name">{{ subGroup.name }}</span>
 
                   <span
-                    class="mld-sample-selector__count-badge mld-sample-selector__count-badge--small"
+                    class="mint-sample-selector__count-badge mint-sample-selector__count-badge--small"
                     :style="{ backgroundColor: subGroup.displayBg, color: subGroup.displayColor }"
                   >
                     {{ subGroup.samples.length }}
@@ -714,7 +714,7 @@ function addNewGroup() {
 
                   <button
                     type="button"
-                    class="mld-sample-selector__delete-btn mld-sample-selector__delete-btn--hidden"
+                    class="mint-sample-selector__delete-btn mint-sample-selector__delete-btn--hidden"
                     @click.stop="deleteGroup(subGroup.name)"
                     title="Remove sub group"
                   >
@@ -725,37 +725,37 @@ function addNewGroup() {
                 </div>
 
                 <!-- Samples (collapsible) -->
-                <Transition name="mld-collapse">
+                <Transition name="mint-collapse">
                   <div
                     v-if="isGroupExpanded(subGroup.name)"
-                    class="mld-sample-selector__samples"
+                    class="mint-sample-selector__samples"
                     :style="{ borderColor: subGroup.displayBorder }"
                   >
                     <div
                       v-for="sample in subGroup.samples"
                       :key="sample"
                       :class="[
-                        'mld-sample-selector__sample',
-                        draggingSample === sample ? 'mld-sample-selector__sample--dragging' : '',
+                        'mint-sample-selector__sample',
+                        draggingSample === sample ? 'mint-sample-selector__sample--dragging' : '',
                       ]"
                       draggable="true"
                       @dragstart="handleDragStart(sample, subGroup.name, $event)"
                       @dragend="handleDragEnd"
                     >
-                      <svg class="mld-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <svg class="mint-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
                       </svg>
                       <input
                         type="checkbox"
                         :checked="modelValue.includes(sample)"
-                        class="mld-sample-selector__checkbox mld-sample-selector__checkbox--tiny"
+                        class="mint-sample-selector__checkbox mint-sample-selector__checkbox--tiny"
                         :style="{ accentColor: subGroup.displayColor }"
                         @change="toggleSample(sample)"
                       />
-                      <span class="mld-sample-selector__sample-name">{{ sample }}</span>
+                      <span class="mint-sample-selector__sample-name">{{ sample }}</span>
                       <button
                         type="button"
-                        class="mld-sample-selector__remove-btn"
+                        class="mint-sample-selector__remove-btn"
                         @click="removeSampleFromGroup(sample, subGroup.name)"
                         title="Remove from group"
                       >
@@ -778,8 +778,8 @@ function addNewGroup() {
             v-for="group in internalGroups"
             :key="group.name"
             :class="[
-              'mld-sample-selector__sub-group',
-              dragOverGroup === group.name ? 'mld-sample-selector__sub-group--drag-over' : '',
+              'mint-sample-selector__sub-group',
+              dragOverGroup === group.name ? 'mint-sample-selector__sub-group--drag-over' : '',
             ]"
             @dragover="handleDragOver(group.name, $event)"
             @dragleave="handleDragLeave"
@@ -788,10 +788,10 @@ function addNewGroup() {
             <!-- Group Header -->
             <div
               :class="[
-                'mld-sample-selector__major-header',
-                draggingGroup === group.name && draggingGroupKind === 'flat' ? 'mld-sample-selector__header--dragging' : '',
-                reorderTarget === group.name && draggingGroupKind === 'flat' && reorderPosition === 'before' ? 'mld-sample-selector__header--drag-over-before' : '',
-                reorderTarget === group.name && draggingGroupKind === 'flat' && reorderPosition === 'after' ? 'mld-sample-selector__header--drag-over-after' : '',
+                'mint-sample-selector__major-header',
+                draggingGroup === group.name && draggingGroupKind === 'flat' ? 'mint-sample-selector__header--dragging' : '',
+                reorderTarget === group.name && draggingGroupKind === 'flat' && reorderPosition === 'before' ? 'mint-sample-selector__header--drag-over-before' : '',
+                reorderTarget === group.name && draggingGroupKind === 'flat' && reorderPosition === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
               ]"
               draggable="true"
               @click="toggleGroupExpanded(group.name)"
@@ -803,8 +803,8 @@ function addNewGroup() {
             >
               <svg
                 :class="[
-                  'mld-sample-selector__chevron',
-                  isGroupExpanded(group.name) ? 'mld-sample-selector__chevron--open' : '',
+                  'mint-sample-selector__chevron',
+                  isGroupExpanded(group.name) ? 'mint-sample-selector__chevron--open' : '',
                 ]"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24"
               >
@@ -815,7 +815,7 @@ function addNewGroup() {
                 type="checkbox"
                 :checked="isGroupFullySelected(group.name)"
                 :indeterminate="isGroupPartiallySelected(group.name)"
-                class="mld-sample-selector__checkbox"
+                class="mint-sample-selector__checkbox"
                 :style="{ accentColor: group.color }"
                 @click.stop
                 @change="toggleGroupSamples(group.name)"
@@ -823,16 +823,16 @@ function addNewGroup() {
 
               <button
                 type="button"
-                class="mld-sample-selector__color-dot mld-sample-selector__color-dot--large mld-sample-selector__color-dot--clickable"
+                class="mint-sample-selector__color-dot mint-sample-selector__color-dot--large mint-sample-selector__color-dot--clickable"
                 :style="{ backgroundColor: group.color }"
                 @click.stop="openColorPicker(group.name, $event)"
                 title="Click to change color"
               />
 
-              <span class="mld-sample-selector__major-name">{{ group.name }}</span>
+              <span class="mint-sample-selector__major-name">{{ group.name }}</span>
 
               <span
-                class="mld-sample-selector__count-badge"
+                class="mint-sample-selector__count-badge"
                 :style="{ backgroundColor: group.color + '20', color: group.color }"
               >
                 {{ group.samples.length }}
@@ -840,7 +840,7 @@ function addNewGroup() {
 
               <button
                 type="button"
-                class="mld-sample-selector__delete-btn mld-sample-selector__delete-btn--hidden"
+                class="mint-sample-selector__delete-btn mint-sample-selector__delete-btn--hidden"
                 @click.stop="deleteGroup(group.name)"
                 title="Remove group"
               >
@@ -851,37 +851,37 @@ function addNewGroup() {
             </div>
 
             <!-- Samples (collapsible) -->
-            <Transition name="mld-collapse">
+            <Transition name="mint-collapse">
               <div
                 v-if="isGroupExpanded(group.name)"
-                class="mld-sample-selector__samples"
+                class="mint-sample-selector__samples"
                 :style="{ borderColor: group.color + '40' }"
               >
                 <div
                   v-for="sample in group.samples"
                   :key="sample"
                   :class="[
-                    'mld-sample-selector__sample',
-                    draggingSample === sample ? 'mld-sample-selector__sample--dragging' : '',
+                    'mint-sample-selector__sample',
+                    draggingSample === sample ? 'mint-sample-selector__sample--dragging' : '',
                   ]"
                   draggable="true"
                   @dragstart="handleDragStart(sample, group.name, $event)"
                   @dragend="handleDragEnd"
                 >
-                  <svg class="mld-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg class="mint-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
                   </svg>
                   <input
                     type="checkbox"
                     :checked="modelValue.includes(sample)"
-                    class="mld-sample-selector__checkbox mld-sample-selector__checkbox--tiny"
+                    class="mint-sample-selector__checkbox mint-sample-selector__checkbox--tiny"
                     :style="{ accentColor: group.color }"
                     @change="toggleSample(sample)"
                   />
-                  <span class="mld-sample-selector__sample-name">{{ sample }}</span>
+                  <span class="mint-sample-selector__sample-name">{{ sample }}</span>
                   <button
                     type="button"
-                    class="mld-sample-selector__remove-btn"
+                    class="mint-sample-selector__remove-btn"
                     @click="removeSampleFromGroup(sample, group.name)"
                     title="Remove from group"
                   >
@@ -896,74 +896,74 @@ function addNewGroup() {
         </template>
 
         <!-- Empty state -->
-        <div v-if="internalGroups.length === 0" class="mld-sample-selector__empty">
+        <div v-if="internalGroups.length === 0" class="mint-sample-selector__empty">
           Click Smart Group to auto-group samples
         </div>
       </div>
 
       <!-- Ungrouped Samples Section -->
-      <div v-if="ungroupedSamples.length > 0" class="mld-sample-selector__ungrouped">
+      <div v-if="ungroupedSamples.length > 0" class="mint-sample-selector__ungrouped">
         <div
-          class="mld-sample-selector__ungrouped-header"
+          class="mint-sample-selector__ungrouped-header"
           @click="toggleGroupExpanded('__ungrouped__')"
         >
           <svg
             :class="[
-              'mld-sample-selector__chevron',
-              isGroupExpanded('__ungrouped__') ? 'mld-sample-selector__chevron--open' : '',
+              'mint-sample-selector__chevron',
+              isGroupExpanded('__ungrouped__') ? 'mint-sample-selector__chevron--open' : '',
             ]"
             fill="none" stroke="currentColor" viewBox="0 0 24 24"
           >
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
           </svg>
-          <span class="mld-sample-selector__ungrouped-label">Ungrouped</span>
-          <span class="mld-sample-selector__ungrouped-count">{{ ungroupedSamples.length }}</span>
+          <span class="mint-sample-selector__ungrouped-label">Ungrouped</span>
+          <span class="mint-sample-selector__ungrouped-count">{{ ungroupedSamples.length }}</span>
         </div>
 
-        <Transition name="mld-collapse">
+        <Transition name="mint-collapse">
           <div
             v-if="isGroupExpanded('__ungrouped__')"
-            class="mld-sample-selector__ungrouped-list"
+            class="mint-sample-selector__ungrouped-list"
           >
             <div
               v-for="sample in ungroupedSamples"
               :key="sample"
               :class="[
-                'mld-sample-selector__sample',
-                draggingSample === sample ? 'mld-sample-selector__sample--dragging' : '',
+                'mint-sample-selector__sample',
+                draggingSample === sample ? 'mint-sample-selector__sample--dragging' : '',
               ]"
               draggable="true"
               @dragstart="handleDragStart(sample, null, $event)"
               @dragend="handleDragEnd"
             >
-              <svg class="mld-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="mint-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
               </svg>
               <input
                 type="checkbox"
                 :checked="modelValue.includes(sample)"
-                class="mld-sample-selector__checkbox mld-sample-selector__checkbox--small"
+                class="mint-sample-selector__checkbox mint-sample-selector__checkbox--small"
                 @change="toggleSample(sample)"
               />
-              <span class="mld-sample-selector__sample-name">{{ sample }}</span>
+              <span class="mint-sample-selector__sample-name">{{ sample }}</span>
             </div>
           </div>
         </Transition>
       </div>
 
       <!-- New Group Input -->
-      <div class="mld-sample-selector__new-group">
+      <div class="mint-sample-selector__new-group">
         <BaseInput
           v-model="newGroupName"
           placeholder="New group name..."
-          class="mld-sample-selector__new-group-input"
+          class="mint-sample-selector__new-group-input"
           @keyup.enter="addNewGroup"
         />
         <BaseButton
           variant="ghost"
           size="sm"
           :disabled="!newGroupName.trim()"
-          class="mld-sample-selector__new-group-btn"
+          class="mint-sample-selector__new-group-btn"
           @click="addNewGroup"
         >
           Add
@@ -974,44 +974,44 @@ function addNewGroup() {
       <input
         ref="colorPickerInput"
         type="color"
-        class="mld-sample-selector__color-input"
+        class="mint-sample-selector__color-input"
         :value="colorPickerSeed"
         @change="handleColorChange"
       />
     </div>
 
     <!-- Flat View (when no groups) -->
-    <div v-if="!groupingEnabled" class="mld-sample-selector__flat">
+    <div v-if="!groupingEnabled" class="mint-sample-selector__flat">
       <!-- Search -->
-      <div class="mld-sample-selector__search">
-        <svg class="mld-sample-selector__search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div class="mint-sample-selector__search">
+        <svg class="mint-sample-selector__search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
         </svg>
         <input
           v-model="searchQuery"
           type="text"
           placeholder="Search samples..."
-          class="mld-sample-selector__search-input"
+          class="mint-sample-selector__search-input"
         />
       </div>
 
       <!-- Flat samples list -->
-      <div class="mld-sample-selector__flat-list">
+      <div class="mint-sample-selector__flat-list">
         <div
           v-for="sample in filteredSamples"
           :key="sample"
-          class="mld-sample-selector__flat-item"
+          class="mint-sample-selector__flat-item"
         >
           <input
             type="checkbox"
             :checked="modelValue.includes(sample)"
-            class="mld-sample-selector__checkbox"
+            class="mint-sample-selector__checkbox"
             @change="toggleSample(sample)"
           />
-          <span class="mld-sample-selector__flat-name">{{ sample }}</span>
+          <span class="mint-sample-selector__flat-name">{{ sample }}</span>
         </div>
 
-        <div v-if="filteredSamples.length === 0 && searchQuery.trim()" class="mld-sample-selector__empty">
+        <div v-if="filteredSamples.length === 0 && searchQuery.trim()" class="mint-sample-selector__empty">
           No samples match "{{ searchQuery }}"
         </div>
       </div>