@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-beta.1

package/src/components/ReagentEditor.vue

@@ -195,22 +195,22 @@ function formatLevel(value: number): string {
 
 <template>
   <div
-    class="mld-reagent-editor"
+    class="mint-reagent-editor"
     :style="{ '--reagent-color': modelValue.color }"
   >
     <!-- Identity -->
-    <div class="mld-reagent-editor__section">
-      <div class="mld-reagent-editor__identity">
-        <label class="mld-reagent-editor__color-wrapper">
+    <div class="mint-reagent-editor__section">
+      <div class="mint-reagent-editor__identity">
+        <label class="mint-reagent-editor__color-wrapper">
           <input
             type="color"
             :value="modelValue.color"
-            class="mld-reagent-editor__color-input"
+            class="mint-reagent-editor__color-input"
             aria-label="Reagent color"
             @input="updateColor"
           />
           <span
-            class="mld-reagent-editor__color-swatch"
+            class="mint-reagent-editor__color-swatch"
             :style="{ backgroundColor: modelValue.color }"
           />
         </label>
@@ -218,7 +218,7 @@ function formatLevel(value: number): string {
           type="text"
           :value="modelValue.name"
           placeholder="Reagent name"
-          class="mld-reagent-editor__name-input"
+          class="mint-reagent-editor__name-input"
           maxlength="64"
           aria-label="Reagent name"
           @input="updateName"
@@ -227,16 +227,16 @@ function formatLevel(value: number): string {
     </div>
 
     <!-- Position Mapping -->
-    <div class="mld-reagent-editor__section">
-      <div class="mld-reagent-editor__section-header">
-        <svg class="mld-reagent-editor__section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <div class="mint-reagent-editor__section">
+      <div class="mint-reagent-editor__section-header">
+        <svg class="mint-reagent-editor__section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" />
         </svg>
         Position
       </div>
-      <div class="mld-reagent-editor__position-row">
-        <div class="mld-reagent-editor__field mld-reagent-editor__field--flex">
-          <label class="mld-reagent-editor__label">Axis</label>
+      <div class="mint-reagent-editor__position-row">
+        <div class="mint-reagent-editor__field mint-reagent-editor__field--flex">
+          <label class="mint-reagent-editor__label">Axis</label>
           <BaseSelect
             :model-value="modelValue.axis"
             :options="axisOptions"
@@ -244,22 +244,22 @@ function formatLevel(value: number): string {
             @update:model-value="updateAxis"
           />
         </div>
-        <div class="mld-reagent-editor__field mld-reagent-editor__field--flex">
-          <label class="mld-reagent-editor__label">Start</label>
+        <div class="mint-reagent-editor__field mint-reagent-editor__field--flex">
+          <label class="mint-reagent-editor__label">Start</label>
           <input
             type="text"
             :value="modelValue.startPosition"
             :placeholder="modelValue.axis === 'row' ? 'e.g. B' : 'e.g. 2'"
             :class="[
-              'mld-reagent-editor__inline-input',
-              startPositionError ? 'mld-reagent-editor__inline-input--error' : '',
+              'mint-reagent-editor__inline-input',
+              startPositionError ? 'mint-reagent-editor__inline-input--error' : '',
             ]"
             :maxlength="modelValue.axis === 'row' ? 1 : 2"
             :aria-invalid="!!startPositionError"
             aria-label="Start position"
             @input="updateStartPosition"
           />
-          <span v-if="startPositionError" class="mld-reagent-editor__field-error">
+          <span v-if="startPositionError" class="mint-reagent-editor__field-error">
             {{ startPositionError }}
           </span>
         </div>
@@ -267,15 +267,15 @@ function formatLevel(value: number): string {
     </div>
 
     <!-- Series -->
-    <div class="mld-reagent-editor__section">
-      <div class="mld-reagent-editor__section-header">
-        <svg class="mld-reagent-editor__section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <div class="mint-reagent-editor__section">
+      <div class="mint-reagent-editor__section-header">
+        <svg class="mint-reagent-editor__section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" />
         </svg>
         Series
         <select
           :value="modelValue.unit"
-          class="mld-reagent-editor__unit-select"
+          class="mint-reagent-editor__unit-select"
           @change="updateUnit"
         >
           <option v-for="u in units" :key="u" :value="u">{{ u }}</option>
@@ -283,23 +283,23 @@ function formatLevel(value: number): string {
       </div>
 
       <!-- Dilution generator -->
-      <div class="mld-reagent-editor__generator">
-        <div class="mld-reagent-editor__generator-inputs">
-          <div class="mld-reagent-editor__field mld-reagent-editor__field--flex">
-            <label class="mld-reagent-editor__label">Start</label>
+      <div class="mint-reagent-editor__generator">
+        <div class="mint-reagent-editor__generator-inputs">
+          <div class="mint-reagent-editor__field mint-reagent-editor__field--flex">
+            <label class="mint-reagent-editor__label">Start</label>
             <NumberInput v-model="generatorStart" :min="0" :step="10" size="sm" />
           </div>
-          <div class="mld-reagent-editor__field mld-reagent-editor__field--flex">
-            <label class="mld-reagent-editor__label">Doses</label>
+          <div class="mint-reagent-editor__field mint-reagent-editor__field--flex">
+            <label class="mint-reagent-editor__label">Doses</label>
             <NumberInput v-model="generatorCount" :min="2" :max="maxLevels" :step="1" size="sm" />
           </div>
         </div>
-        <div class="mld-reagent-editor__presets">
+        <div class="mint-reagent-editor__presets">
           <button
             v-for="preset in presets"
             :key="preset.label"
             type="button"
-            class="mld-reagent-editor__preset-btn"
+            class="mint-reagent-editor__preset-btn"
             @click="applyPreset(preset)"
           >
             {{ preset.label }}
@@ -308,7 +308,7 @@ function formatLevel(value: number): string {
       </div>
 
       <!-- Manual entry -->
-      <div class="mld-reagent-editor__manual" @keydown="handleManualKeydown">
+      <div class="mint-reagent-editor__manual" @keydown="handleManualKeydown">
         <NumberInput
           v-model="manualValue"
           :min="0"
@@ -318,7 +318,7 @@ function formatLevel(value: number): string {
         />
         <button
           type="button"
-          class="mld-reagent-editor__add-btn"
+          class="mint-reagent-editor__add-btn"
           :disabled="manualValue === undefined || manualValue < 0 || modelValue.levels.length >= maxLevels"
           aria-label="Add level"
           @click="addManualLevel"
@@ -330,23 +330,23 @@ function formatLevel(value: number): string {
       </div>
 
       <!-- Level table -->
-      <div v-if="modelValue.levels.length > 0" class="mld-reagent-editor__table">
-        <div class="mld-reagent-editor__table-header">
-          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--level">Level</span>
-          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--reps">Reps</span>
-          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--action" />
+      <div v-if="modelValue.levels.length > 0" class="mint-reagent-editor__table">
+        <div class="mint-reagent-editor__table-header">
+          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--level">Level</span>
+          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--reps">Reps</span>
+          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--action" />
         </div>
-        <div class="mld-reagent-editor__table-body">
+        <div class="mint-reagent-editor__table-body">
         <div
           v-for="(level, i) in modelValue.levels"
           :key="level.value"
-          class="mld-reagent-editor__table-row"
+          class="mint-reagent-editor__table-row"
         >
-          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--level">
-            <span class="mld-reagent-editor__level-value">{{ formatLevel(level.value) }}</span>
-            <span v-if="level.value !== 0" class="mld-reagent-editor__level-unit">{{ modelValue.unit }}</span>
+          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--level">
+            <span class="mint-reagent-editor__level-value">{{ formatLevel(level.value) }}</span>
+            <span v-if="level.value !== 0" class="mint-reagent-editor__level-unit">{{ modelValue.unit }}</span>
           </span>
-          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--reps">
+          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--reps">
             <NumberInput
               :model-value="level.replicates"
               :min="1"
@@ -356,10 +356,10 @@ function formatLevel(value: number): string {
               @update:model-value="updateLevelReplicates(i, $event)"
             />
           </span>
-          <span class="mld-reagent-editor__table-col mld-reagent-editor__table-col--action">
+          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--action">
             <button
               type="button"
-              class="mld-reagent-editor__remove-level-btn"
+              class="mint-reagent-editor__remove-level-btn"
               aria-label="Remove level"
               @click="removeLevel(i)"
             >
@@ -372,7 +372,7 @@ function formatLevel(value: number): string {
         </div>
       </div>
 
-      <div v-else class="mld-reagent-editor__empty">
+      <div v-else class="mint-reagent-editor__empty">
         Use a preset above or add levels manually
       </div>
     </div>
@@ -381,31 +381,31 @@ function formatLevel(value: number): string {
     <div
       v-if="modelValue.levels.length > 0 && modelValue.startPosition && !startPositionError"
       :class="[
-        'mld-reagent-editor__summary',
-        positionOverflows ? 'mld-reagent-editor__summary--overflow' : '',
+        'mint-reagent-editor__summary',
+        positionOverflows ? 'mint-reagent-editor__summary--overflow' : '',
       ]"
     >
-      <div class="mld-reagent-editor__summary-item">
-        <span class="mld-reagent-editor__summary-value">{{ modelValue.levels.length }}</span>
-        <span class="mld-reagent-editor__summary-label">levels</span>
+      <div class="mint-reagent-editor__summary-item">
+        <span class="mint-reagent-editor__summary-value">{{ modelValue.levels.length }}</span>
+        <span class="mint-reagent-editor__summary-label">levels</span>
       </div>
-      <div class="mld-reagent-editor__summary-dot" />
-      <div class="mld-reagent-editor__summary-item">
-        <span class="mld-reagent-editor__summary-value">{{ positionCount }}</span>
-        <span class="mld-reagent-editor__summary-label">positions</span>
+      <div class="mint-reagent-editor__summary-dot" />
+      <div class="mint-reagent-editor__summary-item">
+        <span class="mint-reagent-editor__summary-value">{{ positionCount }}</span>
+        <span class="mint-reagent-editor__summary-label">positions</span>
       </div>
-      <div v-if="positionRange" class="mld-reagent-editor__summary-dot" />
-      <div v-if="positionRange" class="mld-reagent-editor__summary-item">
-        <span class="mld-reagent-editor__summary-value">{{ positionRange }}</span>
-        <span class="mld-reagent-editor__summary-label">{{ modelValue.axis === 'row' ? 'rows' : 'cols' }}</span>
+      <div v-if="positionRange" class="mint-reagent-editor__summary-dot" />
+      <div v-if="positionRange" class="mint-reagent-editor__summary-item">
+        <span class="mint-reagent-editor__summary-value">{{ positionRange }}</span>
+        <span class="mint-reagent-editor__summary-label">{{ modelValue.axis === 'row' ? 'rows' : 'cols' }}</span>
       </div>
-      <span v-if="positionOverflows" class="mld-reagent-editor__summary-warning">
+      <span v-if="positionOverflows" class="mint-reagent-editor__summary-warning">
         Exceeds plate
       </span>
     </div>
 
     <!-- Remove -->
-    <div class="mld-reagent-editor__footer">
+    <div class="mint-reagent-editor__footer">
       <BaseButton variant="danger" size="sm" @click="emit('remove')">
         Remove Reagent
       </BaseButton>

package/src/components/ReagentList.vue

@@ -142,18 +142,18 @@ function getStockLevel(reagent: Reagent): number {
 }
 
 function getStockFillClass(level: number): string {
-  if (level >= 50) return 'mld-reagent-list__stock-fill--good'
-  if (level >= 20) return 'mld-reagent-list__stock-fill--warning'
-  return 'mld-reagent-list__stock-fill--low'
+  if (level >= 50) return 'mint-reagent-list__stock-fill--good'
+  if (level >= 20) return 'mint-reagent-list__stock-fill--warning'
+  return 'mint-reagent-list__stock-fill--low'
 }
 
 function getRowClass(reagent: Reagent): string[] {
-  const classes: string[] = ['mld-reagent-list__row']
-  if (isExpired(reagent)) classes.push('mld-reagent-list__row--expired')
-  else if (isExpiringSoon(reagent)) classes.push('mld-reagent-list__row--expiring-soon')
-  if (isLowStock(reagent)) classes.push('mld-reagent-list__row--low-stock')
-  if (draggedId.value === reagent.id) classes.push('mld-reagent-list__row--dragging')
-  if (dragOverId.value === reagent.id) classes.push('mld-reagent-list__row--drag-over')
+  const classes: string[] = ['mint-reagent-list__row']
+  if (isExpired(reagent)) classes.push('mint-reagent-list__row--expired')
+  else if (isExpiringSoon(reagent)) classes.push('mint-reagent-list__row--expiring-soon')
+  if (isLowStock(reagent)) classes.push('mint-reagent-list__row--low-stock')
+  if (draggedId.value === reagent.id) classes.push('mint-reagent-list__row--dragging')
+  if (dragOverId.value === reagent.id) classes.push('mint-reagent-list__row--drag-over')
   return classes
 }
 
@@ -233,18 +233,18 @@ function handleDragEnd() {
 </script>
 
 <template>
-  <div class="mld-reagent-list">
+  <div class="mint-reagent-list">
     <!-- Header -->
-    <div class="mld-reagent-list__header">
+    <div class="mint-reagent-list__header">
       <!-- Search -->
-      <div v-if="searchable" class="mld-reagent-list__search">
-        <svg class="mld-reagent-list__search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div v-if="searchable" class="mint-reagent-list__search">
+        <svg class="mint-reagent-list__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"
-          class="mld-reagent-list__search-input"
+          class="mint-reagent-list__search-input"
           placeholder="Search reagents..."
         />
       </div>
@@ -253,7 +253,7 @@ function handleDragEnd() {
       <button
         v-if="!readonly"
         type="button"
-        class="mld-reagent-list__add-btn"
+        class="mint-reagent-list__add-btn"
         @click="handleAdd"
       >
         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -264,22 +264,22 @@ function handleDragEnd() {
     </div>
 
     <!-- Table -->
-    <table v-if="filteredReagents.length > 0" class="mld-reagent-list__table">
+    <table v-if="filteredReagents.length > 0" class="mint-reagent-list__table">
       <thead>
         <tr>
           <th v-if="sortable && !readonly" style="width: 24px" />
           <th
             v-for="col in columns"
             :key="col"
-            :class="[sortable ? 'mld-reagent-list__col--sortable' : '']"
+            :class="[sortable ? 'mint-reagent-list__col--sortable' : '']"
             @click="handleSort(col)"
           >
             {{ columnLabels[col] }}
             <svg
               v-if="sortable"
               :class="[
-                'mld-reagent-list__sort-icon',
-                sortColumn === col ? 'mld-reagent-list__sort-icon--active' : '',
+                'mint-reagent-list__sort-icon',
+                sortColumn === col ? 'mint-reagent-list__sort-icon--active' : '',
               ]"
               fill="none"
               stroke="currentColor"
@@ -318,19 +318,19 @@ function handleDragEnd() {
         >
           <!-- Drag handle -->
           <td v-if="sortable && !readonly">
-            <svg class="mld-reagent-list__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="mint-reagent-list__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>
           </td>
 
           <!-- Name -->
-          <td v-if="columns.includes('name')" class="mld-reagent-list__cell mld-reagent-list__cell--name">
+          <td v-if="columns.includes('name')" class="mint-reagent-list__cell mint-reagent-list__cell--name">
             <a
               v-if="reagent.url"
               :href="reagent.url"
               target="_blank"
               rel="noopener noreferrer"
-              class="mld-reagent-list__link"
+              class="mint-reagent-list__link"
             >
               {{ reagent.name }}
             </a>
@@ -338,21 +338,21 @@ function handleDragEnd() {
           </td>
 
           <!-- Catalog number -->
-          <td v-if="columns.includes('catalog')" class="mld-reagent-list__cell mld-reagent-list__cell--muted">
+          <td v-if="columns.includes('catalog')" class="mint-reagent-list__cell mint-reagent-list__cell--muted">
             {{ reagent.catalogNumber || '-' }}
           </td>
 
           <!-- Lot number -->
-          <td v-if="columns.includes('lot')" class="mld-reagent-list__cell mld-reagent-list__cell--muted">
+          <td v-if="columns.includes('lot')" class="mint-reagent-list__cell mint-reagent-list__cell--muted">
             {{ reagent.lotNumber || '-' }}
           </td>
 
           <!-- Expiry -->
-          <td v-if="columns.includes('expiry')" class="mld-reagent-list__cell">
-            <span v-if="isExpired(reagent)" class="mld-reagent-list__expired-text">
+          <td v-if="columns.includes('expiry')" class="mint-reagent-list__cell">
+            <span v-if="isExpired(reagent)" class="mint-reagent-list__expired-text">
               {{ formatExpiryDate(reagent.expiryDate) }}
             </span>
-            <span v-else-if="isExpiringSoon(reagent)" class="mld-reagent-list__expiring-text">
+            <span v-else-if="isExpiringSoon(reagent)" class="mint-reagent-list__expiring-text">
               {{ formatExpiryDate(reagent.expiryDate) }}
             </span>
             <span v-else>
@@ -360,14 +360,14 @@ function handleDragEnd() {
             </span>
 
             <!-- Expiry badge -->
-            <span v-if="isExpired(reagent)" class="mld-reagent-list__badge mld-reagent-list__badge--error">
-              <svg class="mld-reagent-list__badge-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <span v-if="isExpired(reagent)" class="mint-reagent-list__badge mint-reagent-list__badge--error">
+              <svg class="mint-reagent-list__badge-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
               </svg>
               Expired
             </span>
-            <span v-else-if="isExpiringSoon(reagent)" class="mld-reagent-list__badge mld-reagent-list__badge--warning">
-              <svg class="mld-reagent-list__badge-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <span v-else-if="isExpiringSoon(reagent)" class="mint-reagent-list__badge mint-reagent-list__badge--warning">
+              <svg class="mint-reagent-list__badge-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
               </svg>
               Soon
@@ -375,47 +375,47 @@ function handleDragEnd() {
           </td>
 
           <!-- Storage -->
-          <td v-if="columns.includes('storage')" class="mld-reagent-list__cell">
+          <td v-if="columns.includes('storage')" class="mint-reagent-list__cell">
             <span
               v-if="reagent.storageCondition"
-              :class="['mld-reagent-list__storage', `mld-reagent-list__storage--${reagent.storageCondition}`]"
+              :class="['mint-reagent-list__storage', `mint-reagent-list__storage--${reagent.storageCondition}`]"
             >
               {{ reagent.storageCondition }}
             </span>
-            <span v-else class="mld-reagent-list__cell--muted">-</span>
+            <span v-else class="mint-reagent-list__cell--muted">-</span>
           </td>
 
           <!-- Location -->
-          <td v-if="columns.includes('location')" class="mld-reagent-list__cell mld-reagent-list__cell--muted">
+          <td v-if="columns.includes('location')" class="mint-reagent-list__cell mint-reagent-list__cell--muted">
             {{ reagent.location || '-' }}
           </td>
 
           <!-- Stock -->
-          <td v-if="columns.includes('stock') && showStockLevel" class="mld-reagent-list__cell">
-            <div v-if="reagent.stockLevel !== undefined" class="mld-reagent-list__stock">
-              <div class="mld-reagent-list__stock-bar">
+          <td v-if="columns.includes('stock') && showStockLevel" class="mint-reagent-list__cell">
+            <div v-if="reagent.stockLevel !== undefined" class="mint-reagent-list__stock">
+              <div class="mint-reagent-list__stock-bar">
                 <div
-                  :class="['mld-reagent-list__stock-fill', getStockFillClass(getStockLevel(reagent))]"
+                  :class="['mint-reagent-list__stock-fill', getStockFillClass(getStockLevel(reagent))]"
                   :style="{ width: `${Math.min(100, getStockLevel(reagent))}%` }"
                 />
               </div>
-              <span class="mld-reagent-list__stock-text">
+              <span class="mint-reagent-list__stock-text">
                 {{ getStockLevel(reagent) }}%
               </span>
             </div>
-            <span v-else class="mld-reagent-list__cell--muted">-</span>
+            <span v-else class="mint-reagent-list__cell--muted">-</span>
           </td>
 
           <!-- Supplier -->
-          <td v-if="columns.includes('supplier')" class="mld-reagent-list__cell mld-reagent-list__cell--muted">
+          <td v-if="columns.includes('supplier')" class="mint-reagent-list__cell mint-reagent-list__cell--muted">
             {{ reagent.supplier || '-' }}
           </td>
 
           <!-- Actions -->
-          <td v-if="!readonly" class="mld-reagent-list__cell mld-reagent-list__cell--actions">
+          <td v-if="!readonly" class="mint-reagent-list__cell mint-reagent-list__cell--actions">
             <button
               type="button"
-              class="mld-reagent-list__action-btn"
+              class="mint-reagent-list__action-btn"
               aria-label="Edit"
               @click="handleEdit(reagent)"
             >
@@ -425,7 +425,7 @@ function handleDragEnd() {
             </button>
             <button
               type="button"
-              class="mld-reagent-list__action-btn mld-reagent-list__action-btn--danger"
+              class="mint-reagent-list__action-btn mint-reagent-list__action-btn--danger"
               aria-label="Remove"
               @click="handleRemove(reagent.id)"
             >
@@ -439,17 +439,17 @@ function handleDragEnd() {
     </table>
 
     <!-- Empty state -->
-    <div v-else class="mld-reagent-list__empty">
-      <svg class="mld-reagent-list__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <div v-else class="mint-reagent-list__empty">
+      <svg class="mint-reagent-list__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
       </svg>
-      <p class="mld-reagent-list__empty-text">
+      <p class="mint-reagent-list__empty-text">
         {{ searchQuery ? 'No reagents found' : 'No reagents added yet' }}
       </p>
       <button
         v-if="!readonly && !searchQuery"
         type="button"
-        class="mld-reagent-list__empty-btn"
+        class="mint-reagent-list__empty-btn"
         @click="handleAdd"
       >
         Add Reagent

package/src/components/ResourceCard.vue

@@ -43,9 +43,9 @@ const defaultStatusLabels: Record<ResourceStatus, string> = {
 const displayStatusLabel = computed(() => props.statusLabel ?? defaultStatusLabels[props.status])
 
 const cardClasses = computed(() => [
-  'mld-resource-card',
-  `mld-resource-card--${props.size}`,
-  { 'mld-resource-card--compact': props.compact },
+  'mint-resource-card',
+  `mint-resource-card--${props.size}`,
+  { 'mint-resource-card--compact': props.compact },
 ])
 
 function handleBook(event: MouseEvent) {
@@ -62,12 +62,12 @@ function handleClick() {
   <!-- Compact mode -->
   <div v-if="compact" :class="cardClasses" @click="handleClick">
     <slot name="status">
-      <span :class="['mld-resource-card__status-dot', `mld-resource-card__status-dot--${status}`]" />
+      <span :class="['mint-resource-card__status-dot', `mint-resource-card__status-dot--${status}`]" />
     </slot>
 
-    <span class="mld-resource-card__name">{{ name }}</span>
+    <span class="mint-resource-card__name">{{ name }}</span>
 
-    <span :class="['mld-resource-card__status-label', `mld-resource-card__status-label--${status}`]">
+    <span :class="['mint-resource-card__status-label', `mint-resource-card__status-label--${status}`]">
       {{ displayStatusLabel }}
     </span>
 
@@ -75,7 +75,7 @@ function handleClick() {
       <button
         v-if="showBookAction"
         type="button"
-        class="mld-resource-card__book-btn"
+        class="mint-resource-card__book-btn"
         @click="handleBook"
       >
         Book
@@ -85,13 +85,13 @@ function handleClick() {
 
   <!-- Card mode -->
   <div v-else :class="cardClasses" @click="handleClick">
-    <div class="mld-resource-card__content">
-      <div class="mld-resource-card__header">
+    <div class="mint-resource-card__content">
+      <div class="mint-resource-card__header">
         <!-- Image / fallback -->
-        <div class="mld-resource-card__image">
+        <div class="mint-resource-card__image">
           <slot name="image">
             <img v-if="image" :src="image" :alt="name" />
-            <div v-else class="mld-resource-card__image-fallback">
+            <div v-else class="mint-resource-card__image-fallback">
               <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 00-.659 1.59V21a.75.75 0 01-.75.75h-6.24a.75.75 0 01-.75-.75v-2.44a2.25 2.25 0 00-.659-1.59L5 14.5m14 0h-2.25m-10.5 0H4" />
               </svg>
@@ -100,48 +100,48 @@ function handleClick() {
         </div>
 
         <!-- Body -->
-        <div class="mld-resource-card__body">
-          <div class="mld-resource-card__title-row">
-            <h3 class="mld-resource-card__name">{{ name }}</h3>
+        <div class="mint-resource-card__body">
+          <div class="mint-resource-card__title-row">
+            <h3 class="mint-resource-card__name">{{ name }}</h3>
 
             <slot name="status">
-              <div class="mld-resource-card__status">
-                <span :class="['mld-resource-card__status-dot', `mld-resource-card__status-dot--${status}`]" />
-                <span class="mld-resource-card__status-label">{{ displayStatusLabel }}</span>
+              <div class="mint-resource-card__status">
+                <span :class="['mint-resource-card__status-dot', `mint-resource-card__status-dot--${status}`]" />
+                <span class="mint-resource-card__status-label">{{ displayStatusLabel }}</span>
               </div>
             </slot>
           </div>
 
-          <p v-if="description" class="mld-resource-card__description">{{ description }}</p>
+          <p v-if="description" class="mint-resource-card__description">{{ description }}</p>
 
-          <p v-if="location" class="mld-resource-card__location">Location: {{ location }}</p>
+          <p v-if="location" class="mint-resource-card__location">Location: {{ location }}</p>
 
-          <p v-if="nextAvailable" class="mld-resource-card__next-available">Next available: {{ nextAvailable }}</p>
+          <p v-if="nextAvailable" class="mint-resource-card__next-available">Next available: {{ nextAvailable }}</p>
         </div>
       </div>
 
       <!-- Specs -->
-      <div v-if="specs.length > 0 || $slots.specs" class="mld-resource-card__specs">
+      <div v-if="specs.length > 0 || $slots.specs" class="mint-resource-card__specs">
         <slot name="specs">
-          <div v-for="spec in specs" :key="spec.label" class="mld-resource-card__spec">
-            <span class="mld-resource-card__spec-label">{{ spec.label }}</span>
-            <span class="mld-resource-card__spec-value">{{ spec.value }}</span>
+          <div v-for="spec in specs" :key="spec.label" class="mint-resource-card__spec">
+            <span class="mint-resource-card__spec-label">{{ spec.label }}</span>
+            <span class="mint-resource-card__spec-value">{{ spec.value }}</span>
           </div>
         </slot>
       </div>
 
       <!-- Tags + action -->
-      <div v-if="tags.length > 0 || showBookAction || $slots.action" class="mld-resource-card__footer">
-        <div class="mld-resource-card__tags">
+      <div v-if="tags.length > 0 || showBookAction || $slots.action" class="mint-resource-card__footer">
+        <div class="mint-resource-card__tags">
           <BasePill v-for="tag in tags" :key="tag" size="sm">{{ tag }}</BasePill>
         </div>
 
-        <div class="mld-resource-card__action">
+        <div class="mint-resource-card__action">
           <slot name="action">
             <button
               v-if="showBookAction"
               type="button"
-              class="mld-resource-card__book-btn"
+              class="mint-resource-card__book-btn"
               @click="handleBook"
             >
               Book Now