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

package/src/components/ProtocolStepEditor.vue

@@ -188,7 +188,7 @@ function handleCancel() {
 // Close dropdown on click outside
 function handleClickOutside(event: MouseEvent) {
   const target = event.target as HTMLElement
-  if (!target.closest('.mld-protocol-editor__template-dropdown')) {
+  if (!target.closest('.mint-protocol-editor__template-dropdown')) {
     dropdownOpen.value = false
   }
 }
@@ -229,16 +229,16 @@ watch(
 </script>
 
 <template>
-  <div class="mld-protocol-editor">
+  <div class="mint-protocol-editor">
     <!-- Header -->
-    <div class="mld-protocol-editor__header">
-      <span class="mld-protocol-editor__title">
+    <div class="mint-protocol-editor__header">
+      <span class="mint-protocol-editor__title">
         {{ mode === 'create' ? 'Create Protocol Step' : 'Edit Protocol Step' }}
       </span>
       <span
         :class="[
-          'mld-protocol-editor__mode-badge',
-          `mld-protocol-editor__mode-badge--${mode}`,
+          'mint-protocol-editor__mode-badge',
+          `mint-protocol-editor__mode-badge--${mode}`,
         ]"
       >
         {{ mode }}
@@ -246,19 +246,19 @@ watch(
     </div>
 
     <!-- Form -->
-    <div class="mld-protocol-editor__form">
+    <div class="mint-protocol-editor__form">
       <!-- Template selector -->
-      <div class="mld-protocol-editor__template-select">
-        <label class="mld-protocol-editor__template-label">Template</label>
-        <div class="mld-protocol-editor__template-dropdown">
+      <div class="mint-protocol-editor__template-select">
+        <label class="mint-protocol-editor__template-label">Template</label>
+        <div class="mint-protocol-editor__template-dropdown">
           <button
             type="button"
-            class="mld-protocol-editor__template-btn"
+            class="mint-protocol-editor__template-btn"
             @click.stop="dropdownOpen = !dropdownOpen"
           >
             <svg
               v-if="selectedTemplate"
-              class="mld-protocol-editor__template-icon"
+              class="mint-protocol-editor__template-icon"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -270,13 +270,13 @@ watch(
                 :d="stepTypeIcons[selectedTemplate.type]"
               />
             </svg>
-            <span class="mld-protocol-editor__template-text">
+            <span class="mint-protocol-editor__template-text">
               {{ selectedTemplate?.name || 'Select template...' }}
             </span>
             <svg
               :class="[
-                'mld-protocol-editor__template-arrow',
-                dropdownOpen ? 'mld-protocol-editor__template-arrow--open' : '',
+                'mint-protocol-editor__template-arrow',
+                dropdownOpen ? 'mint-protocol-editor__template-arrow--open' : '',
               ]"
               fill="none"
               stroke="currentColor"
@@ -286,19 +286,19 @@ watch(
             </svg>
           </button>
 
-          <div v-if="dropdownOpen" class="mld-protocol-editor__template-menu">
+          <div v-if="dropdownOpen" class="mint-protocol-editor__template-menu">
             <button
               v-for="template in availableTemplates"
               :key="template.id"
               type="button"
               :class="[
-                'mld-protocol-editor__template-option',
-                selectedTemplateId === template.id ? 'mld-protocol-editor__template-option--active' : '',
+                'mint-protocol-editor__template-option',
+                selectedTemplateId === template.id ? 'mint-protocol-editor__template-option--active' : '',
               ]"
               @click="selectTemplate(template)"
             >
               <svg
-                class="mld-protocol-editor__template-option-icon"
+                class="mint-protocol-editor__template-option-icon"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -310,9 +310,9 @@ watch(
                   :d="stepTypeIcons[template.type]"
                 />
               </svg>
-              <div class="mld-protocol-editor__template-option-text">
+              <div class="mint-protocol-editor__template-option-text">
                 <div>{{ template.name }}</div>
-                <div v-if="template.description" class="mld-protocol-editor__template-option-desc">
+                <div v-if="template.description" class="mint-protocol-editor__template-option-desc">
                   {{ template.description }}
                 </div>
               </div>
@@ -321,23 +321,23 @@ watch(
         </div>
       </div>
 
-      <div class="mld-protocol-editor__divider" />
+      <div class="mint-protocol-editor__divider" />
 
       <!-- Step name -->
-      <div class="mld-protocol-editor__field">
-        <label class="mld-protocol-editor__field-label mld-protocol-editor__field-label--required">
+      <div class="mint-protocol-editor__field">
+        <label class="mint-protocol-editor__field-label mint-protocol-editor__field-label--required">
           Step Name
         </label>
         <input
           v-model="stepName"
           type="text"
           :class="[
-            'mld-protocol-editor__input',
-            validationErrors.name ? 'mld-protocol-editor__input--error' : '',
+            'mint-protocol-editor__input',
+            validationErrors.name ? 'mint-protocol-editor__input--error' : '',
           ]"
           placeholder="Enter step name"
         />
-        <span v-if="validationErrors.name" class="mld-protocol-editor__field-error">
+        <span v-if="validationErrors.name" class="mint-protocol-editor__field-error">
           {{ validationErrors.name }}
         </span>
       </div>
@@ -348,7 +348,7 @@ watch(
           v-for="(param, index) in selectedTemplate.parameters"
           :key="param.key"
           :class="[
-            'mld-protocol-editor__field',
+            'mint-protocol-editor__field',
             index % 2 === 0 && selectedTemplate.parameters[index + 1]
               ? ''
               : '',
@@ -356,8 +356,8 @@ watch(
         >
           <label
             :class="[
-              'mld-protocol-editor__field-label',
-              param.required ? 'mld-protocol-editor__field-label--required' : '',
+              'mint-protocol-editor__field-label',
+              param.required ? 'mint-protocol-editor__field-label--required' : '',
             ]"
           >
             {{ param.label }}
@@ -366,7 +366,7 @@ watch(
           <!-- Number input with unit -->
           <div
             v-if="param.type === 'number' || param.type === 'temperature' || param.type === 'duration'"
-            class="mld-protocol-editor__input-unit"
+            class="mint-protocol-editor__input-unit"
           >
             <input
               type="number"
@@ -375,12 +375,12 @@ watch(
               :max="param.max"
               :placeholder="param.placeholder || `Enter ${param.label.toLowerCase()}`"
               :class="[
-                'mld-protocol-editor__input',
-                validationErrors[param.key] ? 'mld-protocol-editor__input--error' : '',
+                'mint-protocol-editor__input',
+                validationErrors[param.key] ? 'mint-protocol-editor__input--error' : '',
               ]"
               @input="handleParamChange(param.key, ($event.target as HTMLInputElement).valueAsNumber)"
             />
-            <span v-if="param.unit" class="mld-protocol-editor__unit-suffix">
+            <span v-if="param.unit" class="mint-protocol-editor__unit-suffix">
               {{ param.unit }}
             </span>
           </div>
@@ -392,8 +392,8 @@ watch(
             :value="parameters[param.key]"
             :placeholder="param.placeholder || `Enter ${param.label.toLowerCase()}`"
             :class="[
-              'mld-protocol-editor__input',
-              validationErrors[param.key] ? 'mld-protocol-editor__input--error' : '',
+              'mint-protocol-editor__input',
+              validationErrors[param.key] ? 'mint-protocol-editor__input--error' : '',
             ]"
             @input="handleParamChange(param.key, ($event.target as HTMLInputElement).value)"
           />
@@ -403,8 +403,8 @@ watch(
             v-else-if="param.type === 'select'"
             :value="parameters[param.key]"
             :class="[
-              'mld-protocol-editor__select',
-              validationErrors[param.key] ? 'mld-protocol-editor__input--error' : '',
+              'mint-protocol-editor__select',
+              validationErrors[param.key] ? 'mint-protocol-editor__input--error' : '',
             ]"
             @change="handleParamChange(param.key, ($event.target as HTMLSelectElement).value)"
           >
@@ -434,24 +434,24 @@ watch(
             :value="parameters[param.key]"
             :placeholder="param.placeholder || 'Enter reagent name'"
             :class="[
-              'mld-protocol-editor__input',
-              validationErrors[param.key] ? 'mld-protocol-editor__input--error' : '',
+              'mint-protocol-editor__input',
+              validationErrors[param.key] ? 'mint-protocol-editor__input--error' : '',
             ]"
             @input="handleParamChange(param.key, ($event.target as HTMLInputElement).value)"
           />
 
-          <span v-if="validationErrors[param.key]" class="mld-protocol-editor__field-error">
+          <span v-if="validationErrors[param.key]" class="mint-protocol-editor__field-error">
             {{ validationErrors[param.key] }}
           </span>
         </div>
       </template>
 
       <!-- Description -->
-      <div class="mld-protocol-editor__field">
-        <label class="mld-protocol-editor__field-label">Description</label>
+      <div class="mint-protocol-editor__field">
+        <label class="mint-protocol-editor__field-label">Description</label>
         <textarea
           v-model="stepDescription"
-          class="mld-protocol-editor__textarea"
+          class="mint-protocol-editor__textarea"
           placeholder="Optional step description"
           rows="2"
         />
@@ -459,10 +459,10 @@ watch(
     </div>
 
     <!-- Preview -->
-    <div v-if="showPreview && previewStep" class="mld-protocol-editor__preview">
-      <div class="mld-protocol-editor__preview-title">Preview</div>
-      <div class="mld-protocol-editor__preview-card">
-        <div class="mld-protocol-editor__preview-icon">
+    <div v-if="showPreview && previewStep" class="mint-protocol-editor__preview">
+      <div class="mint-protocol-editor__preview-title">Preview</div>
+      <div class="mint-protocol-editor__preview-card">
+        <div class="mint-protocol-editor__preview-icon">
           <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               stroke-linecap="round"
@@ -472,24 +472,24 @@ watch(
             />
           </svg>
         </div>
-        <div class="mld-protocol-editor__preview-content">
-          <div class="mld-protocol-editor__preview-name">{{ previewStep.name }}</div>
-          <div v-if="previewParams" class="mld-protocol-editor__preview-params">
+        <div class="mint-protocol-editor__preview-content">
+          <div class="mint-protocol-editor__preview-name">{{ previewStep.name }}</div>
+          <div v-if="previewParams" class="mint-protocol-editor__preview-params">
             {{ previewParams }}
           </div>
         </div>
-        <div v-if="previewStep.duration" class="mld-protocol-editor__preview-duration">
+        <div v-if="previewStep.duration" class="mint-protocol-editor__preview-duration">
           {{ formatDuration(previewStep.duration) }}
         </div>
       </div>
     </div>
 
     <!-- Actions -->
-    <div class="mld-protocol-editor__actions">
-      <div class="mld-protocol-editor__actions-left">
+    <div class="mint-protocol-editor__actions">
+      <div class="mint-protocol-editor__actions-left">
         <button
           type="button"
-          class="mld-protocol-editor__btn mld-protocol-editor__btn--ghost"
+          class="mint-protocol-editor__btn mint-protocol-editor__btn--ghost"
           @click="handleSaveTemplate"
         >
           <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -500,14 +500,14 @@ watch(
       </div>
       <button
         type="button"
-        class="mld-protocol-editor__btn mld-protocol-editor__btn--secondary"
+        class="mint-protocol-editor__btn mint-protocol-editor__btn--secondary"
         @click="handleCancel"
       >
         Cancel
       </button>
       <button
         type="button"
-        class="mld-protocol-editor__btn mld-protocol-editor__btn--primary"
+        class="mint-protocol-editor__btn mint-protocol-editor__btn--primary"
         :disabled="!selectedTemplate"
         @click="handleSave"
       >

package/src/components/RackEditor.vue

@@ -223,20 +223,20 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
 </script>
 
 <template>
-  <div :class="['mld-rack-editor', { 'mld-rack-editor--readonly': readonly }]">
+  <div :class="['mint-rack-editor', { 'mint-rack-editor--readonly': readonly }]">
     <!-- Rack tabs -->
-    <div class="mld-rack-editor__tabs">
-      <div class="mld-rack-editor__tabs-inner">
+    <div class="mint-rack-editor__tabs">
+      <div class="mint-rack-editor__tabs-inner">
         <button
           v-for="rack in editor.racks.value"
           :key="rack.id"
           :draggable="allowReorder && !readonly"
           :class="[
-            'mld-rack-editor__tab',
+            'mint-rack-editor__tab',
             {
-              'mld-rack-editor__tab--active': editor.activeRackId.value === rack.id,
-              'mld-rack-editor__tab--dragging': draggingRackId === rack.id,
-              'mld-rack-editor__tab--drag-over': dragOverRackId === rack.id,
+              'mint-rack-editor__tab--active': editor.activeRackId.value === rack.id,
+              'mint-rack-editor__tab--dragging': draggingRackId === rack.id,
+              'mint-rack-editor__tab--drag-over': dragOverRackId === rack.id,
             },
           ]"
           @click="handleTabClick(rack.id)"
@@ -247,15 +247,15 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
           @dragend="handleRackDragEnd"
         >
           <span
-            class="mld-rack-editor__slot-dot"
+            class="mint-rack-editor__slot-dot"
             :style="{ backgroundColor: SLOT_COLORS[rack.slot] }"
           />
           {{ rack.name }}
           <span
             v-if="getWellCount(rack) > 0"
             :class="[
-              'mld-rack-editor__count',
-              editor.activeRackId.value === rack.id ? 'mld-rack-editor__count--active' : 'mld-rack-editor__count--inactive',
+              'mint-rack-editor__count',
+              editor.activeRackId.value === rack.id ? 'mint-rack-editor__count--active' : 'mint-rack-editor__count--inactive',
             ]"
           >
             {{ getWellCount(rack) }}
@@ -263,7 +263,7 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
           <!-- Remove button -->
           <button
             v-if="editor.racks.value.length > minRacks && !readonly"
-            class="mld-rack-editor__tab-remove"
+            class="mint-rack-editor__tab-remove"
             @click.stop="handleRemoveRack(rack.id)"
           >
             &times;
@@ -274,7 +274,7 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
       <!-- Add rack button -->
       <button
         v-if="editor.racks.value.length < maxRacks && !readonly"
-        class="mld-rack-editor__add-btn"
+        class="mint-rack-editor__add-btn"
         @click="handleAddRack"
       >
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -285,18 +285,18 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     </div>
 
     <!-- Toolbar for active rack -->
-    <div v-if="editor.activeRack.value && !readonly" class="mld-rack-editor__toolbar">
-      <div class="mld-rack-editor__toolbar-group">
+    <div v-if="editor.activeRack.value && !readonly" class="mint-rack-editor__toolbar">
+      <div class="mint-rack-editor__toolbar-group">
         <!-- Format selector -->
-        <div class="mld-rack-editor__toolbar-section">
-          <span class="mld-rack-editor__toolbar-label">Plate</span>
-          <div class="mld-rack-editor__format-btns">
+        <div class="mint-rack-editor__toolbar-section">
+          <span class="mint-rack-editor__toolbar-label">Plate</span>
+          <div class="mint-rack-editor__format-btns">
             <button
               v-for="opt in FORMAT_OPTIONS"
               :key="opt.value"
               :class="[
-                'mld-rack-editor__format-btn',
-                editor.activeRack.value.format === opt.value ? 'mld-rack-editor__format-btn--active' : 'mld-rack-editor__format-btn--inactive',
+                'mint-rack-editor__format-btn',
+                editor.activeRack.value.format === opt.value ? 'mint-rack-editor__format-btn--active' : 'mint-rack-editor__format-btn--inactive',
               ]"
               @click="handleFormatChange(opt.value)"
             >
@@ -305,16 +305,16 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
           </div>
         </div>
 
-        <div class="mld-rack-editor__toolbar-divider" />
+        <div class="mint-rack-editor__toolbar-divider" />
 
         <!-- Slot selector -->
-        <div class="mld-rack-editor__toolbar-section">
-          <span class="mld-rack-editor__toolbar-label">Slot</span>
-          <div class="mld-rack-editor__slot-btns">
+        <div class="mint-rack-editor__toolbar-section">
+          <span class="mint-rack-editor__toolbar-label">Slot</span>
+          <div class="mint-rack-editor__slot-btns">
             <button
               v-for="s in SLOT_OPTIONS"
               :key="s"
-              class="mld-rack-editor__slot-btn"
+              class="mint-rack-editor__slot-btn"
               :style="{
                 backgroundColor: editor.activeRack.value.slot === s ? SLOT_COLORS[s] : 'var(--bg-secondary)',
                 color: editor.activeRack.value.slot === s ? 'white' : SLOT_COLORS[s],
@@ -329,16 +329,16 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
         </div>
       </div>
 
-      <div class="mld-rack-editor__toolbar-spacer" />
+      <div class="mint-rack-editor__toolbar-spacer" />
 
       <!-- Actions -->
-      <button class="mld-rack-editor__action-btn" @click="handleClearAll">
+      <button class="mint-rack-editor__action-btn" @click="handleClearAll">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
         </svg>
         Clear
       </button>
-      <button class="mld-rack-editor__action-btn" @click="handleFillSeries">
+      <button class="mint-rack-editor__action-btn" @click="handleFillSeries">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <rect width="18" height="18" x="3" y="3" rx="2" /><path d="M3 9h18" /><path d="M3 15h18" /><path d="M9 3v18" /><path d="M15 3v18" />
         </svg>
@@ -347,7 +347,7 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     </div>
 
     <!-- Plate view -->
-    <div v-if="editor.activeRack.value" class="mld-rack-editor__plate">
+    <div v-if="editor.activeRack.value" class="mint-rack-editor__plate">
       <WellPlate
         :format="editor.activeRack.value.format"
         :wells="activeRackWells"