@morscherlab/mint-sdk 1.2.0-beta.7 → 1.2.0-beta.9

package/src/components/GroupAssigner.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. */
-import { ref } from 'vue'
+import { nextTick, ref, type ComponentPublicInstance } from 'vue'
 import type { GroupItem } from '../types'
 import { useGroupAssignment, type GroupAssignmentState, type GroupAssignmentZone } from '../composables/useGroupAssignment'
+import { useReorderAnnouncer } from '../composables/useListReorder'
 
 interface Props {
   groups: GroupItem[]
@@ -98,6 +99,56 @@ function emitAssignment(state: GroupAssignmentState) {
   emit('update:group1', state.group1)
   emit('update:group2', state.group2)
 }
+
+// Keyboard alternative to the pointer drag. GroupAssigner moves items between
+// zones rather than reordering one list, so it shares the announcer (and the
+// Alt+Arrow idiom) with useListReorder without its index maths.
+const { announcement, announce, announcerStyle } = useReorderAnnouncer()
+const pillRefs = new Map<string, HTMLElement>()
+
+function setPillRef(name: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    pillRefs.set(name, el)
+  } else {
+    pillRefs.delete(name)
+  }
+}
+
+function zoneLabel(zone: GroupAssignmentZone | null): string {
+  if (zone === 'zone1') return props.label1
+  if (zone === 'zone2') return props.label2
+  return 'Available Groups'
+}
+
+/** Alt+Left / Alt+Right walk a group through Control → unassigned → Treatment. */
+function handlePillKeydown(event: KeyboardEvent, groupName: string) {
+  if (!event.altKey) return
+  const direction =
+    event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0
+  if (direction === 0) return
+
+  event.preventDefault()
+  const order: Array<GroupAssignmentZone | null> = ['zone1', null, 'zone2']
+  const current = order.indexOf(assignment.getZoneForGroup(groupName))
+  const next = order[current + direction]
+  if (current === -1 || next === undefined) return
+
+  if (next === null) {
+    const from = assignment.getZoneForGroup(groupName)
+    if (from) removeFromZone(groupName, from)
+  } else {
+    assignToZone(groupName, next)
+  }
+
+  announce(`${groupName} moved to ${zoneLabel(next)}.`)
+  void nextTick(() => pillRefs.get(groupName)?.focus())
+}
+
+/** Instructions read out with each pill. */
+function pillLabel(group: GroupItem): string {
+  const zone = assignment.getZoneForGroup(group.name)
+  return `${group.name}, ${zoneLabel(zone)}. Press Alt with the left or right arrow keys to move it.`
+}
 </script>
 
 <template>
@@ -125,10 +176,14 @@ function emitAssignment(state: GroupAssignmentState) {
           <div
             v-for="group in zone1Groups"
             :key="group.name"
+            :ref="(el) => setPillRef(group.name, el)"
             class="mint-group-assigner__pill"
             draggable="true"
+            tabindex="0"
+            :aria-label="pillLabel(group)"
             @dragstart="handleDragStart($event, group.name)"
             @dragend="handleDragEnd"
+            @keydown="handlePillKeydown($event, group.name)"
           >
             <span
               class="mint-group-assigner__pill-color"
@@ -174,10 +229,14 @@ function emitAssignment(state: GroupAssignmentState) {
           <div
             v-for="group in zone2Groups"
             :key="group.name"
+            :ref="(el) => setPillRef(group.name, el)"
             class="mint-group-assigner__pill"
             draggable="true"
+            tabindex="0"
+            :aria-label="pillLabel(group)"
             @dragstart="handleDragStart($event, group.name)"
             @dragend="handleDragEnd"
+            @keydown="handlePillKeydown($event, group.name)"
           >
             <span
               class="mint-group-assigner__pill-color"
@@ -221,14 +280,18 @@ function emitAssignment(state: GroupAssignmentState) {
         <div
           v-for="group in unassignedGroups"
           :key="group.name"
+          :ref="(el) => setPillRef(group.name, el)"
           :class="[
             'mint-group-assigner__pill',
             'mint-group-assigner__pill--unassigned',
             draggingGroup === group.name ? 'mint-group-assigner__pill--dragging' : '',
           ]"
           draggable="true"
+          tabindex="0"
+          :aria-label="pillLabel(group)"
           @dragstart="handleDragStart($event, group.name)"
           @dragend="handleDragEnd"
+          @keydown="handlePillKeydown($event, group.name)"
         >
           <span
             class="mint-group-assigner__pill-color"
@@ -240,6 +303,9 @@ function emitAssignment(state: GroupAssignmentState) {
       </div>
     </div>
 
+    <!-- Assignment announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ announcement }}</div>
+
     <!-- Validation message -->
     <div v-if="validationMessage" class="mint-group-assigner__validation">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -251,7 +317,3 @@ function emitAssignment(state: GroupAssignmentState) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/group-assigner.css';
-</style>

package/src/components/IconButton.vue

@@ -67,7 +67,3 @@ function handleClick(event: MouseEvent) {
     </span>
   </button>
 </template>
-
-<style>
-@import '../styles/components/icon-button.css';
-</style>

package/src/components/InstrumentAlertLog.vue

@@ -185,7 +185,3 @@ function alertDetail(alert: InstrumentAlert): string {
     </TransitionGroup>
   </div>
 </template>
-
-<style>
-@import '../styles/components/instrument-monitor.css';
-</style>

package/src/components/InstrumentStateBadge.vue

@@ -44,7 +44,3 @@ const shouldPulse = computed(() => props.pulseWhenRunning && normalizedState.val
     {{ label ?? config.label }}
   </span>
 </template>
-
-<style>
-@import '../styles/components/instrument-monitor.css';
-</style>

package/src/components/InstrumentStatusCard.vue

@@ -182,7 +182,3 @@ function hasRemaining(progress: SequenceProgress | null | undefined): boolean {
     </template>
   </div>
 </template>
-
-<style>
-@import '../styles/components/instrument-monitor.css';
-</style>

package/src/components/JobsStatusTray.vue

@@ -401,7 +401,3 @@ async function clearFinished(): Promise<void> {
     </div>
   </Teleport>
 </template>
-
-<style>
-@import '../styles/components/jobs-status-tray.css';
-</style>

package/src/components/LcmsSequenceTable.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 /** Table for Xcalibur-compatible LCMS sequence rows with optional reorder/remove/duplicate controls. */
-import { computed, ref } from 'vue'
+import { computed, type ComponentPublicInstance } from 'vue'
+import { useListReorder } from '../composables/useListReorder'
 import {
   basenameFromWindowsPath,
   DEFAULT_LCMS_SEQUENCE_COLUMNS,
   type LcmsSequenceItem,
   type LcmsSequenceTableColumn,
 } from '../lcms'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   items?: LcmsSequenceItem[]
@@ -15,6 +17,13 @@ interface Props {
   maxRows?: number
   showMoreLabel?: boolean
   emptyMessage?: string
+  /** Replace the table with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the table is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -24,6 +33,8 @@ const props = withDefaults(defineProps<Props>(), {
   maxRows: undefined,
   showMoreLabel: true,
   emptyMessage: 'No sequence items to display',
+  loading: false,
+  error: null,
 })
 
 const emit = defineEmits<{
@@ -32,8 +43,38 @@ const emit = defineEmits<{
   duplicate: [index: number]
 }>()
 
-const dragIndex = ref<number | null>(null)
-const dropTargetIndex = ref<number | null>(null)
+// Rows are a plain ordered list: pointer drag plus an Alt+Arrow keyboard
+// alternative, both from the shared reorder composable.
+const handleRefs = new Map<string, HTMLElement>()
+
+const {
+  draggingId,
+  dragOverId,
+  announcement: reorderAnnouncement,
+  announcerStyle,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onDragEnd,
+  onKeydown: onReorderKeydown,
+} = useListReorder<LcmsSequenceItem>({
+  items: () => props.items,
+  getId: (_item, index) => String(index),
+  getLabel: (item) => item.file_name,
+  disabled: () => !props.editable,
+  getElement: (id) => handleRefs.get(id),
+  itemNoun: 'Row',
+  onReorder: ({ fromIndex, toIndex }) => emit('reorder', fromIndex, toIndex),
+})
+
+function setHandleRef(index: number, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    handleRefs.set(String(index), el)
+  } else {
+    handleRefs.delete(String(index))
+  }
+}
 
 const displayItems = computed(() => {
   if (!props.maxRows) return props.items
@@ -60,42 +101,11 @@ function cellValue(item: LcmsSequenceItem, column: LcmsSequenceTableColumn, inde
   return item[column.key] ?? ''
 }
 
-function onDragStart(event: DragEvent, index: number) {
-  if (!props.editable) return
-  dragIndex.value = index
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', String(index))
-  }
-}
-
-function onDragOver(event: DragEvent, index: number) {
-  if (!props.editable) return
-  event.preventDefault()
-  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
-  if (dragIndex.value !== null && dragIndex.value !== index) {
-    dropTargetIndex.value = index
-  }
-}
-
-function clearDragState() {
-  dragIndex.value = null
-  dropTargetIndex.value = null
-}
-
-function onDrop(event: DragEvent, toIndex: number) {
-  if (!props.editable) return
-  event.preventDefault()
-  if (dragIndex.value !== null && dragIndex.value !== toIndex) {
-    emit('reorder', dragIndex.value, toIndex)
-  }
-  clearDragState()
-}
 </script>
 
 <template>
   <div class="mint-lcms-sequence-table">
-    <div class="mint-lcms-sequence-table__scroller">
+    <div v-if="!loading && !error && items.length > 0" class="mint-lcms-sequence-table__scroller">
       <table class="mint-lcms-sequence-table__table">
         <thead>
           <tr>
@@ -120,19 +130,27 @@ function onDrop(event: DragEvent, toIndex: number) {
             :draggable="editable"
             class="mint-lcms-sequence-table__row"
             :class="{
-              'mint-lcms-sequence-table__row--dragging': dragIndex === index,
-              'mint-lcms-sequence-table__row--drop-above': dropTargetIndex === index && dragIndex !== null && dragIndex > index,
-              'mint-lcms-sequence-table__row--drop-below': dropTargetIndex === index && dragIndex !== null && dragIndex < index,
+              'mint-lcms-sequence-table__row--dragging': draggingId === String(index),
+              'mint-lcms-sequence-table__row--drop-above': dragOverId === String(index) && draggingId !== null && Number(draggingId) > index,
+              'mint-lcms-sequence-table__row--drop-below': dragOverId === String(index) && draggingId !== null && Number(draggingId) < index,
             }"
-            @dragstart="onDragStart($event, index)"
+            @dragstart="onDragStart($event, item, index)"
             @dragenter.prevent
-            @dragover="onDragOver($event, index)"
-            @dragleave="dropTargetIndex = null"
-            @drop="onDrop($event, index)"
-            @dragend="clearDragState"
+            @dragover="onDragOver($event, item, index)"
+            @dragleave="onDragLeave"
+            @drop="onDrop($event, item, index)"
+            @dragend="onDragEnd"
           >
             <td v-if="editable" class="mint-lcms-sequence-table__drag-cell">
-              <span class="mint-lcms-sequence-table__drag-handle" aria-hidden="true">::</span>
+              <button
+                :ref="(el) => setHandleRef(index, el)"
+                type="button"
+                class="mint-lcms-sequence-table__drag-handle"
+                :aria-label="`Reorder ${item.file_name}. Press Alt with the arrow keys to move it.`"
+                @keydown="onReorderKeydown($event, item, index)"
+              >
+                ::
+              </button>
             </td>
             <td
               v-for="column in columns"
@@ -176,16 +194,29 @@ function onDrop(event: DragEvent, toIndex: number) {
       </table>
     </div>
 
-    <div v-if="items.length === 0" class="mint-lcms-sequence-table__empty">
-      {{ emptyMessage }}
+    <div v-else-if="error" class="mint-lcms-sequence-table__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-lcms-sequence-table__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading sequence" />
+      </slot>
+    </div>
+
+    <div v-else class="mint-lcms-sequence-table__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+      </slot>
     </div>
 
     <div v-if="hasMore && showMoreLabel" class="mint-lcms-sequence-table__more">
       Showing first {{ maxRows }} of {{ items.length }} items
     </div>
+
+    <!-- Reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/lcms-sequence-table.css';
-</style>

package/src/components/LoadingSpinner.vue

@@ -44,7 +44,3 @@ withDefaults(defineProps<Props>(), {
     <span class="mint-spinner__label">{{ label }}</span>
   </div>
 </template>
-
-<style>
-@import '../styles/components/loading-spinner.css';
-</style>

package/src/components/MobileSupportGate.vue

@@ -109,7 +109,3 @@ const {
     :is-supported="isSupported"
   />
 </template>
-
-<style>
-@import '../styles/components/mobile-support-gate.css';
-</style>

package/src/components/MoleculeInput.vue

@@ -420,7 +420,3 @@ onUnmounted(() => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/molecule-input.css';
-</style>

package/src/components/MultiSelect.vue

@@ -117,7 +117,3 @@ const selectedLabels = computed(() => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/multi-select.css';
-</style>

package/src/components/NumberInput.vue

@@ -156,7 +156,3 @@ function increment() {
     />
   </div>
 </template>
-
-<style>
-@import '../styles/components/number-input.css';
-</style>

package/src/components/PlateMapEditor.vue

@@ -1,22 +1,15 @@
 <script setup lang="ts">
 /** Full plate-map design environment for 96/384-well plates with sample assignment, slot-color coding, undo/redo, and CSV/JSON import-export. */
 import { ref, computed, watch } from 'vue'
-import type { PlateMapEditorState, WellPlateFormat, SampleType, Well, PlateMap } from '../types'
+import type { PlateMapEditorState, WellPlateFormat, SampleType, Well, PlateMap, SlotPosition } from '../types'
+// Slot colors matching MSExpDesigner — shared with RackEditor.
+import { SLOT_COLORS, SLOT_ORDER } from '../utils/color'
 import { useWellPlateEditor } from '../composables/useWellPlateEditor'
 import { useEventListener } from '../composables/useEventListener'
 import WellPlate from './WellPlate.vue'
 import SampleLegend from './SampleLegend.vue'
 import PlateMapEditorToolbarInternal from './internal/PlateMapEditorToolbarInternal.vue'
 
-// Slot colors matching MSExpDesigner
-type SlotPosition = 'R' | 'G' | 'B' | 'Y'
-const SLOT_COLORS: Record<SlotPosition, string> = {
-  R: '#ef4444', // red
-  G: '#22c55e', // green
-  B: '#3b82f6', // blue
-  Y: '#eab308', // yellow
-}
-const SLOT_ORDER: SlotPosition[] = ['R', 'G', 'B', 'Y']
 
 interface Props {
   modelValue?: PlateMapEditorState
@@ -428,7 +421,3 @@ useEventListener(() => document, 'keydown', handleKeyDown)
     </Teleport>
   </div>
 </template>
-
-<style>
-@import '../styles/components/plate-map-editor.css';
-</style>

package/src/components/PluginIcon.vue

@@ -152,7 +152,3 @@ const rootStyle = computed(() =>
     />
   </span>
 </template>
-
-<style>
-@import '../styles/components/plugin-icon.css';
-</style>

package/src/components/ProgressBar.vue

@@ -111,7 +111,3 @@ const segmentCount = computed(() => props.steps.length || 0)
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/progress-bar.css';
-</style>

package/src/components/ProtocolStepEditor.vue

@@ -53,6 +53,7 @@ const selectedTemplateId = ref<string | null>(null)
 const {
   isOpen: templateDropdownOpen,
   rootRef: templateDropdownRef,
+  triggerRef: templateTriggerRef,
   close: closeTemplateDropdown,
   toggle: toggleTemplateDropdown,
 } = useDropdownState()
@@ -204,6 +205,7 @@ watch(
         <label class="mint-protocol-editor__template-label">Template</label>
         <div ref="templateDropdownRef" class="mint-protocol-editor__template-dropdown">
           <button
+            ref="templateTriggerRef"
             type="button"
             class="mint-protocol-editor__template-btn"
             @click="toggleTemplateDropdown"
@@ -376,7 +378,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/protocol-step-editor.css';
-</style>

package/src/components/RackEditor.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /** Multi-rack editor for managing collections of well-plate racks with add/remove/reorder controls and per-well editing. */
-import { ref, computed, watch } from 'vue'
+import { computed, watch, type ComponentPublicInstance } from 'vue'
+import { SLOT_COLORS, SLOT_ORDER } from '../utils/color'
 import type { Rack, SlotPosition, WellPlateFormat, WellPlateSize, WellEditData, Well, WellEditField, WellSampleDropData, RackSampleDropMapper } from '../types'
+import { useListReorder } from '../composables/useListReorder'
 import { useRackEditor } from '../composables/useRackEditor'
 import WellPlate from './WellPlate.vue'
 
@@ -104,23 +106,48 @@ watch(
   },
 )
 
-const SLOT_COLORS: Record<SlotPosition, string> = {
-  R: '#ef4444',
-  G: '#22c55e',
-  B: '#3b82f6',
-  Y: '#eab308',
-}
-
-const SLOT_OPTIONS: SlotPosition[] = ['R', 'G', 'B', 'Y']
+const SLOT_OPTIONS: readonly SlotPosition[] = SLOT_ORDER
 
 const FORMAT_OPTIONS: { value: WellPlateFormat; label: string }[] = [
   { value: 54, label: '54' },
   { value: 96, label: '96' },
 ]
 
-// Drag state for rack reordering
-const draggingRackId = ref<string | null>(null)
-const dragOverRackId = ref<string | null>(null)
+// Rack tab reordering: HTML5 drag for pointers, Alt+Arrow for the keyboard,
+// both owned by the shared reorder composable.
+const tabRefs = new Map<string, HTMLElement>()
+
+const {
+  draggingId: draggingRackId,
+  dragOverId: dragOverRackId,
+  announcement: reorderAnnouncement,
+  announcerStyle,
+  onDragStart: onRackDragStart,
+  onDragOver: onRackDragOver,
+  onDragLeave: onRackDragLeave,
+  onDrop: onRackDrop,
+  onDragEnd: onRackDragEnd,
+  onKeydown: onRackReorderKeydown,
+} = useListReorder<Rack>({
+  items: () => editor.racks.value,
+  getId: (rack) => rack.id,
+  getLabel: (rack) => rack.name,
+  disabled: () => !props.allowReorder || props.readonly,
+  getElement: (id) => tabRefs.get(id),
+  itemNoun: 'Rack',
+  onReorder: ({ fromIndex, toIndex }) => {
+    editor.reorderRacks(fromIndex, toIndex)
+    emit('rack-reorder', editor.racks.value.map(r => r.id))
+  },
+})
+
+function setTabRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    tabRefs.set(id, el)
+  } else {
+    tabRefs.delete(id)
+  }
+}
 
 function handleAddRack() {
   const rack = editor.addRack()
@@ -136,54 +163,6 @@ function handleTabClick(rackId: string) {
   editor.setActiveRack(rackId)
 }
 
-// Rack drag handlers
-function handleRackDragStart(event: DragEvent, rackId: string) {
-  if (!props.allowReorder) return
-  draggingRackId.value = rackId
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', rackId)
-  }
-}
-
-function handleRackDragOver(event: DragEvent, rackId: string) {
-  event.preventDefault()
-  if (draggingRackId.value && draggingRackId.value !== rackId) {
-    dragOverRackId.value = rackId
-  }
-}
-
-function handleRackDragLeave() {
-  dragOverRackId.value = null
-}
-
-function handleRackDrop(event: DragEvent, targetRackId: string) {
-  event.preventDefault()
-  if (!draggingRackId.value || draggingRackId.value === targetRackId) {
-    clearDragState()
-    return
-  }
-
-  const fromIndex = editor.racks.value.findIndex(r => r.id === draggingRackId.value)
-  const toIndex = editor.racks.value.findIndex(r => r.id === targetRackId)
-
-  if (fromIndex !== -1 && toIndex !== -1) {
-    editor.reorderRacks(fromIndex, toIndex)
-    emit('rack-reorder', editor.racks.value.map(r => r.id))
-  }
-
-  clearDragState()
-}
-
-function handleRackDragEnd() {
-  clearDragState()
-}
-
-function clearDragState() {
-  draggingRackId.value = null
-  dragOverRackId.value = null
-}
-
 // Toolbar actions
 function handleFormatChange(format: WellPlateFormat) {
   if (!editor.activeRack.value) return
@@ -281,9 +260,11 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     <div class="mint-rack-editor__tabs">
       <div class="mint-rack-editor__tabs-inner">
         <button
-          v-for="rack in editor.racks.value"
+          v-for="(rack, rackIndex) in editor.racks.value"
           :key="rack.id"
+          :ref="(el) => setTabRef(rack.id, el)"
           :draggable="allowReorder && !readonly"
+          :title="allowReorder && !readonly ? `${rack.name} — press Alt with the arrow keys to reorder` : undefined"
           :class="[
             'mint-rack-editor__tab',
             {
@@ -293,11 +274,12 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
             },
           ]"
           @click="handleTabClick(rack.id)"
-          @dragstart="handleRackDragStart($event, rack.id)"
-          @dragover="handleRackDragOver($event, rack.id)"
-          @dragleave="handleRackDragLeave"
-          @drop="handleRackDrop($event, rack.id)"
-          @dragend="handleRackDragEnd"
+          @keydown="onRackReorderKeydown($event, rack, rackIndex)"
+          @dragstart="onRackDragStart($event, rack, rackIndex)"
+          @dragover="onRackDragOver($event, rack, rackIndex)"
+          @dragleave="onRackDragLeave"
+          @drop="onRackDrop($event, rack, rackIndex)"
+          @dragend="onRackDragEnd"
         >
           <span
             class="mint-rack-editor__slot-dot"
@@ -434,9 +416,8 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
         </template>
       </WellPlate>
     </div>
+
+    <!-- Reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/rack-editor.css';
-</style>

package/src/components/ReagentEditor.vue

@@ -412,7 +412,3 @@ function formatLevel(value: number): string {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/reagent-editor.css';
-</style>