@morscherlab/mint-sdk 1.0.0-beta.1 → 1.0.0-beta.3

package/src/components/GroupingModal.vue

@@ -1,422 +1,61 @@
 <!-- @deprecated Use AutoGroupModal instead -->
 <script setup lang="ts">
-/** @deprecated CSV-based sample grouping modal; use AutoGroupModal instead. */
-import { ref, computed, watch } from 'vue'
-import BaseModal from './BaseModal.vue'
-import BaseButton from './BaseButton.vue'
-import BaseSelect from './BaseSelect.vue'
-import type { SelectOption } from '../types'
+/** @deprecated Compatibility wrapper for the legacy CSV grouping API. Use AutoGroupModal instead. */
+import AutoGroupModal from './AutoGroupModal.vue'
+import type { AutoGroupResult } from '../types/auto-group'
 
 interface Props {
   open: boolean
   samples: string[]
 }
 
-interface ParsedRow {
-  [key: string]: string
-}
-
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits<{
   close: []
   apply: [mapping: Record<string, string[]>, columns: string[]]
 }>()
 
-const csvFile = ref<File | null>(null)
-const csvData = ref<ParsedRow[]>([])
-const csvColumns = ref<string[]>([])
-const sampleColumn = ref<string>('')
-const groupColumns = ref<string[]>([])
-const isDragOver = ref(false)
-const parseError = ref<string | null>(null)
-
-const columnOptions = computed<SelectOption[]>(() =>
-  csvColumns.value.map(col => ({ value: col, label: col }))
-)
-
-const availableGroupColumns = computed<SelectOption[]>(() =>
-  csvColumns.value
-    .filter(col => col !== sampleColumn.value && !groupColumns.value.includes(col))
-    .map(col => ({ value: col, label: col }))
-)
-
-const matchedSamples = computed(() => {
-  if (!sampleColumn.value || csvData.value.length === 0) return []
-  const csvSampleValues = csvData.value.map(row => row[sampleColumn.value])
-  return props.samples.filter(sample => csvSampleValues.includes(sample))
-})
-
-const unmatchedSamples = computed(() => {
-  if (!sampleColumn.value || csvData.value.length === 0) return []
-  const csvSampleValues = csvData.value.map(row => row[sampleColumn.value])
-  return props.samples.filter(sample => !csvSampleValues.includes(sample))
-})
-
-const previewData = computed(() => {
-  if (csvData.value.length === 0) return []
-  return csvData.value.slice(0, 5)
-})
-
-const canApply = computed(() =>
-  sampleColumn.value &&
-  groupColumns.value.length > 0 &&
-  matchedSamples.value.length > 0
-)
+let closeEmittedFromApply = false
 
-watch(() => props.open, (isOpen) => {
-  if (!isOpen) {
-    resetState()
-  }
-})
-
-function resetState() {
-  csvFile.value = null
-  csvData.value = []
-  csvColumns.value = []
-  sampleColumn.value = ''
-  groupColumns.value = []
-  parseError.value = null
-}
-
-function handleDrop(event: DragEvent) {
-  event.preventDefault()
-  isDragOver.value = false
-  const files = event.dataTransfer?.files
-  if (files && files.length > 0) {
-    handleFile(files[0])
-  }
-}
-
-function handleFileInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files.length > 0) {
-    handleFile(target.files[0])
-  }
-}
-
-async function handleFile(file: File) {
-  if (!file.name.endsWith('.csv')) {
-    parseError.value = 'Please upload a CSV file'
-    return
-  }
-
-  csvFile.value = file
-  parseError.value = null
-
-  try {
-    const text = await file.text()
-    parseCSV(text)
-  } catch {
-    parseError.value = 'Failed to read file'
-  }
+function handleApply(result: AutoGroupResult) {
+  emit('apply', groupsToLegacyMapping(result), metadataColumns(result))
+  closeEmittedFromApply = true
+  emit('close')
 }
 
-function parseCSV(text: string) {
-  const lines = text.trim().split('\n')
-  if (lines.length < 2) {
-    parseError.value = 'CSV must have at least a header and one data row'
+function handleOpenChange(isOpen: boolean) {
+  if (isOpen) return
+  if (closeEmittedFromApply) {
+    closeEmittedFromApply = false
     return
   }
-
-  const headers = parseCSVLine(lines[0])
-  csvColumns.value = headers
-
-  const data: ParsedRow[] = []
-  for (let i = 1; i < lines.length; i++) {
-    const values = parseCSVLine(lines[i])
-    if (values.length !== headers.length) continue
-
-    const row: ParsedRow = {}
-    headers.forEach((header, idx) => {
-      row[header] = values[idx]
-    })
-    data.push(row)
-  }
-
-  csvData.value = data
-
-  // Auto-select sample column if there's a likely match
-  const sampleColGuess = headers.find(h =>
-    h.toLowerCase().includes('sample') ||
-    h.toLowerCase().includes('name') ||
-    h.toLowerCase().includes('id')
-  )
-  if (sampleColGuess) {
-    sampleColumn.value = sampleColGuess
-  }
-}
-
-function parseCSVLine(line: string): string[] {
-  const result: string[] = []
-  let current = ''
-  let inQuotes = false
-
-  for (let i = 0; i < line.length; i++) {
-    const char = line[i]
-    if (char === '"') {
-      inQuotes = !inQuotes
-    } else if (char === ',' && !inQuotes) {
-      result.push(current.trim())
-      current = ''
-    } else {
-      current += char
-    }
-  }
-  result.push(current.trim())
-
-  return result
-}
-
-function addGroupColumn(column: string) {
-  if (column && !groupColumns.value.includes(column)) {
-    groupColumns.value.push(column)
-  }
-}
-
-function removeGroupColumn(column: string) {
-  groupColumns.value = groupColumns.value.filter(c => c !== column)
+  emit('close')
 }
 
-function moveGroupColumn(index: number, direction: 'up' | 'down') {
-  const newIndex = direction === 'up' ? index - 1 : index + 1
-  if (newIndex < 0 || newIndex >= groupColumns.value.length) return
-
-  const cols = [...groupColumns.value]
-  const temp = cols[index]
-  cols[index] = cols[newIndex]
-  cols[newIndex] = temp
-  groupColumns.value = cols
+function groupsToLegacyMapping(result: AutoGroupResult): Record<string, string[]> {
+  return Object.fromEntries(result.groups.map(group => [group.name, group.samples]))
 }
 
-function applyGrouping() {
-  if (!canApply.value) return
-
-  const mapping: Record<string, string[]> = {}
-
-  for (const row of csvData.value) {
-    const sampleName = row[sampleColumn.value]
-    if (!props.samples.includes(sampleName)) continue
-
-    // Build hierarchical group key
-    const groupKey = groupColumns.value.map(col => row[col]).join(' / ')
-
-    if (!mapping[groupKey]) {
-      mapping[groupKey] = []
+function metadataColumns(result: AutoGroupResult): string[] {
+  const columns: string[] = []
+  const seen = new Set<string>()
+  for (const row of result.metadata) {
+    for (const column of Object.keys(row.fields)) {
+      if (seen.has(column)) continue
+      seen.add(column)
+      columns.push(column)
     }
-    mapping[groupKey].push(sampleName)
   }
-
-  emit('apply', mapping, groupColumns.value)
-  emit('close')
-}
-
-function close() {
-  emit('close')
+  return columns
 }
 </script>
 
 <template>
-  <BaseModal
+  <AutoGroupModal
     :model-value="open"
-    title="Group by Metadata"
-    size="lg"
-    @update:model-value="!$event && close()"
-    @close="close"
-  >
-    <div class="mint-grouping-modal">
-      <!-- File upload area -->
-      <div
-        v-if="!csvFile"
-        :class="[
-          'mint-grouping-modal__dropzone',
-          isDragOver ? 'mint-grouping-modal__dropzone--dragover' : '',
-        ]"
-        @drop="handleDrop"
-        @dragover.prevent="isDragOver = true"
-        @dragleave="isDragOver = false"
-      >
-        <input
-          type="file"
-          accept=".csv"
-          class="mint-grouping-modal__file-input"
-          @change="handleFileInput"
-        />
-        <svg class="mint-grouping-modal__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-        <p class="mint-grouping-modal__upload-text">
-          <span class="mint-grouping-modal__upload-highlight">Click to upload</span>
-          or drag and drop a CSV file
-        </p>
-        <p class="mint-grouping-modal__upload-hint">
-          CSV should contain sample names and grouping columns
-        </p>
-      </div>
-
-      <!-- Error message -->
-      <div v-if="parseError" class="mint-grouping-modal__error">
-        {{ parseError }}
-      </div>
-
-      <!-- Configuration section -->
-      <template v-if="csvFile && csvData.length > 0">
-        <div class="mint-grouping-modal__file-info">
-          <svg class="mint-grouping-modal__file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-          <span class="mint-grouping-modal__file-name">{{ csvFile.name }}</span>
-          <button
-            type="button"
-            class="mint-grouping-modal__file-clear"
-            @click="resetState"
-          >
-            Change file
-          </button>
-        </div>
-
-        <!-- Column selection -->
-        <div class="mint-grouping-modal__config">
-          <div class="mint-grouping-modal__config-row">
-            <label class="mint-grouping-modal__label">Sample Column</label>
-            <BaseSelect
-              v-model="sampleColumn"
-              :options="columnOptions"
-              placeholder="Select sample column..."
-            />
-          </div>
-
-          <div class="mint-grouping-modal__config-row">
-            <label class="mint-grouping-modal__label">Group Columns</label>
-            <div class="mint-grouping-modal__group-columns">
-              <!-- Selected group columns with reordering -->
-              <div v-if="groupColumns.length > 0" class="mint-grouping-modal__selected-columns">
-                <div
-                  v-for="(col, index) in groupColumns"
-                  :key="col"
-                  class="mint-grouping-modal__selected-column"
-                >
-                  <span class="mint-grouping-modal__column-name">{{ col }}</span>
-                  <div class="mint-grouping-modal__column-actions">
-                    <button
-                      type="button"
-                      :disabled="index === 0"
-                      class="mint-grouping-modal__column-btn"
-                      @click="moveGroupColumn(index, 'up')"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M18 15l-6-6-6 6" />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      :disabled="index === groupColumns.length - 1"
-                      class="mint-grouping-modal__column-btn"
-                      @click="moveGroupColumn(index, 'down')"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M6 9l6 6 6-6" />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      class="mint-grouping-modal__column-btn mint-grouping-modal__column-btn--remove"
-                      @click="removeGroupColumn(col)"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Add column dropdown -->
-              <BaseSelect
-                v-if="availableGroupColumns.length > 0"
-                model-value=""
-                :options="availableGroupColumns"
-                placeholder="Add group column..."
-                @update:model-value="addGroupColumn($event as string)"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Match status -->
-        <div v-if="sampleColumn" class="mint-grouping-modal__match-status">
-          <div class="mint-grouping-modal__match-stat mint-grouping-modal__match-stat--matched">
-            <span class="mint-grouping-modal__match-count">{{ matchedSamples.length }}</span>
-            <span class="mint-grouping-modal__match-label">samples matched</span>
-          </div>
-          <div
-            v-if="unmatchedSamples.length > 0"
-            class="mint-grouping-modal__match-stat mint-grouping-modal__match-stat--unmatched"
-          >
-            <span class="mint-grouping-modal__match-count">{{ unmatchedSamples.length }}</span>
-            <span class="mint-grouping-modal__match-label">samples not found in CSV</span>
-          </div>
-        </div>
-
-        <!-- Preview table -->
-        <div v-if="previewData.length > 0" class="mint-grouping-modal__preview">
-          <h4 class="mint-grouping-modal__preview-title">Data Preview</h4>
-          <div class="mint-grouping-modal__table-wrapper">
-            <table class="mint-grouping-modal__table">
-              <thead>
-                <tr>
-                  <th
-                    v-for="col in csvColumns"
-                    :key="col"
-                    :class="[
-                      'mint-grouping-modal__th',
-                      col === sampleColumn ? 'mint-grouping-modal__th--sample' : '',
-                      groupColumns.includes(col) ? 'mint-grouping-modal__th--group' : '',
-                    ]"
-                  >
-                    {{ col }}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(row, idx) in previewData" :key="idx">
-                  <td
-                    v-for="col in csvColumns"
-                    :key="col"
-                    :class="[
-                      'mint-grouping-modal__td',
-                      col === sampleColumn ? 'mint-grouping-modal__td--sample' : '',
-                      groupColumns.includes(col) ? 'mint-grouping-modal__td--group' : '',
-                    ]"
-                  >
-                    {{ row[col] }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <p v-if="csvData.length > 5" class="mint-grouping-modal__preview-note">
-            Showing 5 of {{ csvData.length }} rows
-          </p>
-        </div>
-      </template>
-    </div>
-
-    <template #footer>
-      <div class="mint-grouping-modal__footer">
-        <BaseButton variant="secondary" @click="close">Cancel</BaseButton>
-        <BaseButton
-          variant="primary"
-          :disabled="!canApply"
-          @click="applyGrouping"
-        >
-          Apply Grouping
-        </BaseButton>
-      </div>
-    </template>
-  </BaseModal>
+    :samples="samples"
+    @update:model-value="handleOpenChange"
+    @apply="handleApply"
+  />
 </template>
-
-<style>
-@import '../styles/components/grouping-modal.css';
-</style>

package/src/components/MultiSelect.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 /** Lets users select multiple options from a checkbox list with optional selection cap. */
 import { computed } from 'vue'
-import type { MultiSelectOption, MultiSelectSize } from '../types'
+import type { MultiSelectOption, MultiSelectOptionInput, MultiSelectSize } from '../types'
+import { useListSelection } from '../composables/useListSelection'
+import { normalizeOptionInput } from '../utils/options'
 
 interface Props {
   modelValue: (string | number)[]
-  options: MultiSelectOption[]
+  options: MultiSelectOptionInput[]
   placeholder?: string
   disabled?: boolean
   maxSelections?: number
@@ -22,22 +24,25 @@ const emit = defineEmits<{
   'update:modelValue': [value: (string | number)[]]
 }>()
 
-const canSelectMore = computed(() => {
-  if (props.maxSelections === undefined) return true
-  return props.modelValue.length < props.maxSelections
+const normalizedOptions = computed<MultiSelectOption[]>(() => props.options.map(normalizeOptionInput))
+const optionSelection = useListSelection({
+  selected: () => props.modelValue,
+  items: normalizedOptions,
+  getValue: option => option.value,
+  disabled: () => props.disabled,
+  max: () => props.maxSelections,
 })
+const canSelectMore = optionSelection.canAddMore
 
 function isSelected(value: string | number): boolean {
-  return props.modelValue.includes(value)
+  return optionSelection.isSelected(value)
 }
 
 function toggleOption(option: MultiSelectOption) {
   if (props.disabled || option.disabled) return
 
-  if (isSelected(option.value)) {
-    emit('update:modelValue', props.modelValue.filter(v => v !== option.value))
-  } else if (canSelectMore.value) {
-    emit('update:modelValue', [...props.modelValue, option.value])
+  if (isSelected(option.value) || canSelectMore.value) {
+    emit('update:modelValue', optionSelection.toggleValue(option.value))
   }
 }
 
@@ -50,7 +55,7 @@ function handleKeydown(event: KeyboardEvent, option: MultiSelectOption) {
 
 const selectedLabels = computed(() => {
   return props.modelValue
-    .map(v => props.options.find(o => o.value === v)?.label)
+    .map(v => normalizedOptions.value.find(o => o.value === v)?.label)
     .filter(Boolean)
 })
 </script>
@@ -72,7 +77,7 @@ const selectedLabels = computed(() => {
 
     <div class="mint-multi-select__options" role="group">
       <button
-        v-for="option in options"
+        v-for="option in normalizedOptions"
         :key="String(option.value)"
         type="button"
         role="checkbox"

package/src/components/PlateMapEditor.vue

@@ -1,8 +1,9 @@
 <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, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import type { PlateMapEditorState, WellPlateFormat, SampleType, Well } from '../types'
 import { useWellPlateEditor } from '../composables/useWellPlateEditor'
+import { useEventListener } from '../composables/useEventListener'
 import WellPlate from './WellPlate.vue'
 import SampleLegend from './SampleLegend.vue'
 
@@ -221,13 +222,7 @@ function handleKeyDown(event: KeyboardEvent) {
   }
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', handleKeyDown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeyDown)
-})
+useEventListener(() => document, 'keydown', handleKeyDown)
 </script>
 
 <template>

package/src/components/PluginIcon.story.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import PluginIcon from './PluginIcon.vue'
+
+const SAMPLE_PATH = 'M13 10V3L4 14h7v7l9-11h-7z'
+// Tiny 1x1 transparent PNG.
+const SAMPLE_PNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
+const SAMPLE_HTTPS = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Vue.js_Logo_2.svg/64px-Vue.js_Logo_2.svg.png'
+
+function initState() {
+  return reactive({
+    icon: SAMPLE_PATH,
+    size: 'md' as 'sm' | 'md' | 'lg',
+    variant: 'solid' as 'solid' | 'tinted',
+    tone: '',
+  })
+}
+</script>
+
+<template>
+  <Story title="Brand/PluginIcon" :layout="{ type: 'grid', width: 320 }">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <PluginIcon :icon="state.icon" :size="state.size" :variant="state.variant" :tone="state.tone || undefined" />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.icon" title="icon" />
+        <HstSelect v-model="state.size" title="size" :options="['sm', 'md', 'lg']" />
+        <HstSelect v-model="state.variant" title="variant" :options="['solid', 'tinted']" />
+        <HstText v-model="state.tone" title="tone (hex)" />
+      </template>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
+        <PluginIcon :icon="SAMPLE_PATH" size="sm" />
+        <PluginIcon :icon="SAMPLE_PATH" size="md" />
+        <PluginIcon :icon="SAMPLE_PATH" size="lg" />
+      </div>
+    </Variant>
+
+    <Variant title="Variants">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
+        <PluginIcon :icon="SAMPLE_PATH" variant="solid" />
+        <PluginIcon :icon="SAMPLE_PATH" variant="tinted" />
+      </div>
+    </Variant>
+
+    <Variant title="Format showcase">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
+        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="tinted" />
+        <PluginIcon :icon="SAMPLE_PNG" size="lg" variant="tinted" />
+        <PluginIcon :icon="SAMPLE_HTTPS" size="lg" variant="tinted" />
+        <PluginIcon icon="" size="lg" variant="tinted" />
+      </div>
+      <p style="padding: 0 2rem; color: var(--text-muted); font-size: 0.875rem;">
+        SVG path · data URL (PNG) · https URL · empty (fallback)
+      </p>
+    </Variant>
+
+    <Variant title="Tone overrides">
+      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
+        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" tone="#0EA5E9" />
+        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" tone="#F97316" />
+        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" tone="#22C55E" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/PluginIcon.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+/** Renders a plugin's icon as a sized chip. Auto-detects format:
+ *  - SVG path data (e.g. "M13 10V3...") → inline <svg><path>
+ *  - Raster data URL (data:image/png|jpeg|jpg|gif|webp;...) → <img>
+ *  - https:// URL → <img> with no-referrer + lazy loading
+ *  - Anything else → MINT canonical plugin placeholder path
+ *
+ *  http:// URLs and data:image/svg+xml URLs are deliberately rejected
+ *  (mixed-content + XSS, see spec 2026-05-04-plugin-icon-component-design.md). */
+import { computed } from 'vue'
+import { detectPluginIcon, type DetectedPluginIcon } from '../utils/pluginIcon'
+
+defineOptions({ name: 'PluginIcon' })
+
+interface Props {
+  icon?: string
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'solid' | 'tinted'
+  tone?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'solid',
+})
+
+const detected = computed<DetectedPluginIcon>(() => detectPluginIcon(props.icon))
+
+const rootClasses = computed(() => [
+  'mint-plugin-icon',
+  `mint-plugin-icon--${props.size}`,
+  `mint-plugin-icon--${props.variant}`,
+])
+
+const rootStyle = computed(() =>
+  props.tone ? { '--mint-plugin-icon-tone': props.tone } : undefined,
+)
+</script>
+
+<template>
+  <span :class="rootClasses" :style="rootStyle">
+    <svg
+      v-if="detected.format === 'path' || detected.format === 'fallback'"
+      class="mint-plugin-icon__svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path :d="detected.value" />
+    </svg>
+    <img
+      v-else
+      class="mint-plugin-icon__img"
+      :src="detected.value"
+      alt=""
+      referrerpolicy="no-referrer"
+      loading="lazy"
+    />
+  </span>
+</template>
+
+<style>
+@import '../styles/components/plugin-icon.css';
+</style>