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

package/src/components/NumberInput.vue

@@ -87,14 +87,14 @@ function increment() {
 <template>
   <div
     :class="[
-      'mld-number-input',
-      `mld-number-input--${size}`,
-      isSliderMode ? 'mld-number-input--slider' : 'mld-number-input--stepper',
-      error ? 'mld-number-input--error' : '',
-      disabled ? 'mld-number-input--disabled' : '',
+      'mint-number-input',
+      `mint-number-input--${size}`,
+      isSliderMode ? 'mint-number-input--slider' : 'mint-number-input--stepper',
+      error ? 'mint-number-input--error' : '',
+      disabled ? 'mint-number-input--disabled' : '',
     ]"
   >
-    <div class="mld-number-input__field">
+    <div class="mint-number-input__field">
       <input
         type="number"
         :value="modelValue"
@@ -104,21 +104,21 @@ function increment() {
         :disabled="disabled"
         :placeholder="placeholder"
         :class="[
-          'mld-number-input__input',
-          `mld-number-input__input--${size}`,
+          'mint-number-input__input',
+          `mint-number-input__input--${size}`,
         ]"
         @input="handleInput"
       />
 
-      <span v-if="unit" class="mld-number-input__unit">{{ unit }}</span>
+      <span v-if="unit" class="mint-number-input__unit">{{ unit }}</span>
 
-      <div class="mld-number-input__steppers" aria-hidden="true">
+      <div class="mint-number-input__steppers" aria-hidden="true">
         <button
           type="button"
           tabindex="-1"
           aria-label="Increase value"
           :disabled="disabled || !canIncrement"
-          class="mld-number-input__stepper mld-number-input__stepper--up"
+          class="mint-number-input__stepper mint-number-input__stepper--up"
           @click="increment"
         >
           <svg viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -130,7 +130,7 @@ function increment() {
           tabindex="-1"
           aria-label="Decrease value"
           :disabled="disabled || !canDecrement"
-          class="mld-number-input__stepper mld-number-input__stepper--down"
+          class="mint-number-input__stepper mint-number-input__stepper--down"
           @click="decrement"
         >
           <svg viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -149,7 +149,7 @@ function increment() {
       :step="step"
       :disabled="disabled"
       :style="{ '--mint-slider-fill': `${sliderPercent}%` }"
-      class="mld-number-input__slider"
+      class="mint-number-input__slider"
       @input="handleSliderInput"
     />
   </div>

package/src/components/PlateMapEditor.vue

@@ -231,35 +231,35 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div :class="['mld-plate-editor', { 'mld-plate-editor--with-sidebar': showSidebar }]">
+  <div :class="['mint-plate-editor', { 'mint-plate-editor--with-sidebar': showSidebar }]">
     <!-- Main plate area -->
-    <div class="mld-plate-editor__main">
+    <div class="mint-plate-editor__main">
       <!-- Toolbar -->
-      <div v-if="showToolbar" class="mld-plate-editor__toolbar">
+      <div v-if="showToolbar" class="mint-plate-editor__toolbar">
         <!-- Plate tabs -->
-        <div class="mld-plate-editor__tabs">
+        <div class="mint-plate-editor__tabs">
           <button
             v-for="(plate, index) in editor.plates.value"
             :key="plate.id"
             type="button"
-            :class="['mld-plate-editor__tab', { 'mld-plate-editor__tab--active': plate.id === editor.activePlate.value?.id }]"
+            :class="['mint-plate-editor__tab', { 'mint-plate-editor__tab--active': plate.id === editor.activePlate.value?.id }]"
             @click="editor.setActivePlate(plate.id)"
           >
             <span
-              class="mld-plate-editor__tab-slot"
+              class="mint-plate-editor__tab-slot"
               :style="{ backgroundColor: SLOT_COLORS[getPlateSlot(plate.id, index)] }"
             />
-            <span class="mld-plate-editor__tab-name">{{ plate.name }}</span>
+            <span class="mint-plate-editor__tab-name">{{ plate.name }}</span>
             <span
               v-if="getPlateWellCount(plate.id) > 0"
-              class="mld-plate-editor__tab-count"
+              class="mint-plate-editor__tab-count"
             >
               {{ getPlateWellCount(plate.id) }}
             </span>
             <button
               v-if="editor.plates.value.length > 1"
               type="button"
-              class="mld-plate-editor__tab-remove"
+              class="mint-plate-editor__tab-remove"
               :aria-label="`Remove ${plate.name}`"
               @click.stop="handleRemovePlate(plate.id)"
             >
@@ -272,7 +272,7 @@ onUnmounted(() => {
           <button
             v-if="allowAddPlates && editor.plates.value.length < maxPlates"
             type="button"
-            class="mld-plate-editor__add-plate"
+            class="mint-plate-editor__add-plate"
             aria-label="Add plate"
             @click="handleAddPlate"
           >
@@ -283,14 +283,14 @@ onUnmounted(() => {
           </button>
         </div>
 
-        <div class="mld-plate-editor__spacer" />
+        <div class="mint-plate-editor__spacer" />
 
         <!-- Actions -->
-        <div class="mld-plate-editor__actions">
+        <div class="mint-plate-editor__actions">
           <button
             type="button"
             :disabled="!editor.canUndo.value"
-            class="mld-plate-editor__action-btn"
+            class="mint-plate-editor__action-btn"
             title="Undo (Ctrl+Z)"
             @click="handleUndo"
           >
@@ -302,7 +302,7 @@ onUnmounted(() => {
           <button
             type="button"
             :disabled="!editor.canRedo.value"
-            class="mld-plate-editor__action-btn"
+            class="mint-plate-editor__action-btn"
             title="Redo (Ctrl+Shift+Z)"
             @click="handleRedo"
           >
@@ -311,11 +311,11 @@ onUnmounted(() => {
             </svg>
           </button>
 
-          <div class="mld-plate-editor__divider" />
+          <div class="mint-plate-editor__divider" />
 
           <button
             type="button"
-            class="mld-plate-editor__action-btn"
+            class="mint-plate-editor__action-btn"
             title="Import"
             @click="showImportModal = true"
           >
@@ -326,7 +326,7 @@ onUnmounted(() => {
 
           <button
             type="button"
-            class="mld-plate-editor__action-btn"
+            class="mint-plate-editor__action-btn"
             title="Export JSON"
             @click="handleExport('json')"
           >
@@ -353,23 +353,23 @@ onUnmounted(() => {
       <!-- Selection info bar -->
       <div
         v-if="editor.selectedWells.value.length > 0"
-        class="mld-plate-editor__selection-bar"
+        class="mint-plate-editor__selection-bar"
       >
-        <span class="mld-plate-editor__selection-count">
+        <span class="mint-plate-editor__selection-count">
           <strong>{{ editor.selectedWells.value.length }}</strong> wells selected
         </span>
-        <div class="mld-plate-editor__spacer" />
+        <div class="mint-plate-editor__spacer" />
         <button
           v-if="editor.activeSampleId.value"
           type="button"
-          class="mld-plate-editor__assign-btn"
+          class="mint-plate-editor__assign-btn"
           @click="handleAssignSample"
         >
           Assign {{ editor.samples.value.find(s => s.id === editor.activeSampleId.value)?.name }}
         </button>
         <button
           type="button"
-          class="mld-plate-editor__clear-btn"
+          class="mint-plate-editor__clear-btn"
           @click="handleClearWells"
         >
           Clear
@@ -377,26 +377,26 @@ onUnmounted(() => {
       </div>
 
       <!-- Legend -->
-      <div class="mld-plate-editor__legend">
-        <div class="mld-plate-editor__legend-items">
-          <div class="mld-plate-editor__legend-item">
-            <div class="mld-plate-editor__legend-swatch" style="background-color: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4)" />
-            <span class="mld-plate-editor__legend-label">Sample</span>
+      <div class="mint-plate-editor__legend">
+        <div class="mint-plate-editor__legend-items">
+          <div class="mint-plate-editor__legend-item">
+            <div class="mint-plate-editor__legend-swatch" style="background-color: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4)" />
+            <span class="mint-plate-editor__legend-label">Sample</span>
           </div>
-          <div class="mld-plate-editor__legend-item">
-            <div class="mld-plate-editor__legend-swatch" style="background-color: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.4)" />
-            <span class="mld-plate-editor__legend-label">Control</span>
+          <div class="mint-plate-editor__legend-item">
+            <div class="mint-plate-editor__legend-swatch" style="background-color: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.4)" />
+            <span class="mint-plate-editor__legend-label">Control</span>
           </div>
-          <div class="mld-plate-editor__legend-item">
-            <div class="mld-plate-editor__legend-swatch" style="background-color: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.4)" />
-            <span class="mld-plate-editor__legend-label">Blank</span>
+          <div class="mint-plate-editor__legend-item">
+            <div class="mint-plate-editor__legend-swatch" style="background-color: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.4)" />
+            <span class="mint-plate-editor__legend-label">Blank</span>
           </div>
-          <div class="mld-plate-editor__legend-item">
-            <div class="mld-plate-editor__legend-swatch" style="background-color: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.4)" />
-            <span class="mld-plate-editor__legend-label">QC</span>
+          <div class="mint-plate-editor__legend-item">
+            <div class="mint-plate-editor__legend-swatch" style="background-color: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.4)" />
+            <span class="mint-plate-editor__legend-label">QC</span>
           </div>
         </div>
-        <span class="mld-plate-editor__legend-hint">
+        <span class="mint-plate-editor__legend-hint">
           <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" /><path d="m14 7 3 3" /><path d="M5 6v4" /><path d="M19 14v4" /><path d="M10 2v2" /><path d="M7 8H3" /><path d="M21 16h-4" /><path d="M11 3H9" />
           </svg>
@@ -406,9 +406,9 @@ onUnmounted(() => {
     </div>
 
     <!-- Sidebar -->
-    <div v-if="showSidebar" class="mld-plate-editor__sidebar">
-      <div class="mld-plate-editor__sidebar-panel">
-        <h3 class="mld-plate-editor__sidebar-title">Sample Types</h3>
+    <div v-if="showSidebar" class="mint-plate-editor__sidebar">
+      <div class="mint-plate-editor__sidebar-panel">
+        <h3 class="mint-plate-editor__sidebar-title">Sample Types</h3>
 
         <SampleLegend
           :model-value="editor.activeSampleId.value"
@@ -421,19 +421,19 @@ onUnmounted(() => {
         />
 
         <!-- Add sample -->
-        <div v-if="allowAddSamples" class="mld-plate-editor__add-sample">
-          <div class="mld-plate-editor__add-sample-form">
+        <div v-if="allowAddSamples" class="mint-plate-editor__add-sample">
+          <div class="mint-plate-editor__add-sample-form">
             <input
               v-model="newSampleName"
               type="text"
               placeholder="New sample..."
-              class="mld-plate-editor__add-sample-input"
+              class="mint-plate-editor__add-sample-input"
               @keyup.enter="handleAddSample"
             />
             <button
               type="button"
               :disabled="!newSampleName.trim()"
-              class="mld-plate-editor__add-sample-btn"
+              class="mint-plate-editor__add-sample-btn"
               @click="handleAddSample"
             >
               Add
@@ -442,13 +442,13 @@ onUnmounted(() => {
         </div>
 
         <!-- Keyboard shortcuts -->
-        <div class="mld-plate-editor__shortcuts">
-          <h4 class="mld-plate-editor__shortcuts-title">Shortcuts</h4>
-          <div class="mld-plate-editor__shortcuts-list">
-            <div><kbd class="mld-plate-editor__shortcut-key">1-9</kbd> Quick assign</div>
-            <div><kbd class="mld-plate-editor__shortcut-key">Del</kbd> Clear wells</div>
-            <div><kbd class="mld-plate-editor__shortcut-key">Ctrl+Z</kbd> Undo</div>
-            <div><kbd class="mld-plate-editor__shortcut-key">Ctrl+A</kbd> Select all</div>
+        <div class="mint-plate-editor__shortcuts">
+          <h4 class="mint-plate-editor__shortcuts-title">Shortcuts</h4>
+          <div class="mint-plate-editor__shortcuts-list">
+            <div><kbd class="mint-plate-editor__shortcut-key">1-9</kbd> Quick assign</div>
+            <div><kbd class="mint-plate-editor__shortcut-key">Del</kbd> Clear wells</div>
+            <div><kbd class="mint-plate-editor__shortcut-key">Ctrl+Z</kbd> Undo</div>
+            <div><kbd class="mint-plate-editor__shortcut-key">Ctrl+A</kbd> Select all</div>
           </div>
         </div>
       </div>
@@ -458,37 +458,37 @@ onUnmounted(() => {
     <Teleport to="body">
       <div
         v-if="showImportModal"
-        class="mld-plate-editor__modal-overlay"
+        class="mint-plate-editor__modal-overlay"
         @click.self="showImportModal = false"
       >
-        <div class="mld-plate-editor__modal">
-          <h3 class="mld-plate-editor__modal-title">Import Plate Map</h3>
+        <div class="mint-plate-editor__modal">
+          <h3 class="mint-plate-editor__modal-title">Import Plate Map</h3>
 
-          <div class="mld-plate-editor__modal-field">
-            <label class="mld-plate-editor__modal-label">Format</label>
+          <div class="mint-plate-editor__modal-field">
+            <label class="mint-plate-editor__modal-label">Format</label>
             <select
               v-model="importFormat"
-              class="mld-plate-editor__modal-select"
+              class="mint-plate-editor__modal-select"
             >
               <option value="json">JSON</option>
               <option value="csv">CSV</option>
             </select>
           </div>
 
-          <div class="mld-plate-editor__modal-field">
-            <label class="mld-plate-editor__modal-label">Data</label>
+          <div class="mint-plate-editor__modal-field">
+            <label class="mint-plate-editor__modal-label">Data</label>
             <textarea
               v-model="importText"
               rows="8"
-              class="mld-plate-editor__modal-textarea"
+              class="mint-plate-editor__modal-textarea"
               placeholder="Paste your data here..."
             />
           </div>
 
-          <div class="mld-plate-editor__modal-actions">
+          <div class="mint-plate-editor__modal-actions">
             <button
               type="button"
-              class="mld-plate-editor__modal-cancel"
+              class="mint-plate-editor__modal-cancel"
               @click="showImportModal = false"
             >
               Cancel
@@ -496,7 +496,7 @@ onUnmounted(() => {
             <button
               type="button"
               :disabled="!importText.trim()"
-              class="mld-plate-editor__modal-submit"
+              class="mint-plate-editor__modal-submit"
               @click="handleImport"
             >
               Import

package/src/components/ProgressBar.vue

@@ -37,22 +37,22 @@ const segmentCount = computed(() => props.steps.length || 0)
 </script>
 
 <template>
-  <div class="mld-progress" :class="`mld-progress--${variant}`">
+  <div class="mint-progress" :class="`mint-progress--${variant}`">
     <div
       v-if="label || showValue"
-      class="mld-progress__header"
+      class="mint-progress__header"
     >
-      <span v-if="label" class="mld-progress__label">{{ label }}</span>
-      <span v-if="showValue && !indeterminate && variant === 'rail'" class="mld-progress__value">{{ clampedValue }}%</span>
-      <span v-if="showValue && variant === 'segmented' && segmentCount" class="mld-progress__value">{{ currentStep }} / {{ segmentCount }}</span>
+      <span v-if="label" class="mint-progress__label">{{ label }}</span>
+      <span v-if="showValue && !indeterminate && variant === 'rail'" class="mint-progress__value">{{ clampedValue }}%</span>
+      <span v-if="showValue && variant === 'segmented' && segmentCount" class="mint-progress__value">{{ currentStep }} / {{ segmentCount }}</span>
     </div>
 
     <!-- Rail variant: single filled track -->
     <div
       v-if="variant === 'rail'"
       :class="[
-        'mld-progress__track',
-        `mld-progress__track--${size}`,
+        'mint-progress__track',
+        `mint-progress__track--${size}`,
       ]"
       role="progressbar"
       :aria-valuenow="indeterminate ? undefined : clampedValue"
@@ -61,9 +61,9 @@ const segmentCount = computed(() => props.steps.length || 0)
     >
       <div
         :class="[
-          'mld-progress__bar',
-          `mld-progress__bar--${color}`,
-          indeterminate ? 'mld-progress__bar--indeterminate' : '',
+          'mint-progress__bar',
+          `mint-progress__bar--${color}`,
+          indeterminate ? 'mint-progress__bar--indeterminate' : '',
         ]"
         :style="barStyle"
       />
@@ -72,7 +72,7 @@ const segmentCount = computed(() => props.steps.length || 0)
     <!-- Segmented variant: discrete step segments -->
     <div
       v-else
-      :class="['mld-progress__segments', `mld-progress__segments--${size}`]"
+      :class="['mint-progress__segments', `mint-progress__segments--${size}`]"
       role="progressbar"
       :aria-valuenow="currentStep"
       :aria-valuemin="0"
@@ -82,9 +82,9 @@ const segmentCount = computed(() => props.steps.length || 0)
         v-for="(_step, i) in steps"
         :key="i"
         :class="[
-          'mld-progress__segment',
-          i < currentStep ? `mld-progress__segment--done mld-progress__segment--${color}` : '',
-          i === currentStep ? `mld-progress__segment--active mld-progress__segment--${color}` : '',
+          'mint-progress__segment',
+          i < currentStep ? `mint-progress__segment--done mint-progress__segment--${color}` : '',
+          i === currentStep ? `mint-progress__segment--active mint-progress__segment--${color}` : '',
         ]"
       />
     </div>
@@ -92,15 +92,15 @@ const segmentCount = computed(() => props.steps.length || 0)
     <!-- Segmented step labels -->
     <div
       v-if="variant === 'segmented' && steps.length"
-      class="mld-progress__step-labels"
+      class="mint-progress__step-labels"
     >
       <span
         v-for="(step, i) in steps"
         :key="i"
         :class="[
-          'mld-progress__step-label',
-          i === currentStep ? 'mld-progress__step-label--active' : '',
-          i < currentStep ? 'mld-progress__step-label--done' : '',
+          'mint-progress__step-label',
+          i === currentStep ? 'mint-progress__step-label--active' : '',
+          i < currentStep ? 'mint-progress__step-label--done' : '',
         ]"
       >
         {{ step }}