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

package/src/components/PlateMapEditor.vue

@@ -1,434 +0,0 @@
-<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 { 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
-  format?: WellPlateFormat
-  maxPlates?: number
-  samples?: SampleType[]
-  showToolbar?: boolean
-  showSidebar?: boolean
-  allowAddPlates?: boolean
-  allowAddSamples?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fill'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  format: 96,
-  maxPlates: 10,
-  samples: () => [],
-  showToolbar: true,
-  showSidebar: true,
-  allowAddPlates: true,
-  allowAddSamples: true,
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [state: PlateMapEditorState]
-  'plate-add': [plate: { id: string; name: string }]
-  'plate-remove': [plateId: string]
-  'sample-assign': [wellIds: string[], sampleId: string | undefined]
-  'wells-clear': [wellIds: string[]]
-  'undo': []
-  'redo': []
-  'export': [data: string, format: 'json' | 'csv']
-  'import': [success: boolean]
-}>()
-
-const editor = useWellPlateEditor(props.modelValue, {
-  defaultFormat: props.format,
-})
-
-const newSampleName = ref('')
-const showImportModal = ref(false)
-const importText = ref('')
-const importFormat = ref<'json' | 'csv'>('json')
-
-// Track slot assignment for each plate
-const plateSlots = ref<Map<string, SlotPosition>>(new Map())
-
-// Assign slots to plates on creation
-function getPlateSlot(plateId: string, plateIndex: number): SlotPosition {
-  if (!plateSlots.value.has(plateId)) {
-    plateSlots.value.set(plateId, SLOT_ORDER[plateIndex % SLOT_ORDER.length])
-  }
-  return plateSlots.value.get(plateId)!
-}
-
-function getPlateSlotColor(plateId: string, plateIndex: number): string {
-  return SLOT_COLORS[getPlateSlot(plateId, plateIndex)]
-}
-
-const sampleColors = computed(() => {
-  const colors: Record<string, string> = {}
-  for (const sample of editor.samples.value) {
-    if (sample.color) {
-      colors[sample.id] = sample.color
-    }
-  }
-  return colors
-})
-
-const wellsData = computed(() => {
-  const plate = editor.activePlate.value
-  if (!plate) return {}
-
-  const wells: Record<string, Partial<Well>> = {}
-  for (const [wellId, well] of Object.entries(plate.wells)) {
-    wells[wellId] = {
-      state: well.state,
-      sampleType: well.sampleType,
-      value: well.value,
-    }
-  }
-  return wells
-})
-
-function countPlateAssignedWells(plate: PlateMap): number {
-  return Object.values(plate.wells).filter(w => w.sampleType).length
-}
-
-const plateWellCounts = computed<Record<string, number>>(() => {
-  const counts: Record<string, number> = {}
-  for (const plate of editor.plates.value) {
-    counts[plate.id] = countPlateAssignedWells(plate)
-  }
-  return counts
-})
-
-watch(
-  () => editor.state.value,
-  (newState) => emit('update:modelValue', { ...newState }),
-  { deep: true }
-)
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (newValue) editor.loadState(newValue)
-  }
-)
-
-function handleSelectionChange(wellIds: string[]) {
-  editor.setSelectedWells(wellIds)
-}
-
-function handleSampleClick(sample: SampleType) {
-  const newSampleId = editor.activeSampleId.value === sample.id ? undefined : sample.id
-  editor.setActiveSample(newSampleId)
-}
-
-function handleAssignSample() {
-  const wells = editor.selectedWells.value
-  if (wells.length === 0) return
-
-  editor.assignSample(wells, editor.activeSampleId.value)
-  emit('sample-assign', wells, editor.activeSampleId.value)
-}
-
-function handleClearWells() {
-  const wells = editor.selectedWells.value
-  if (wells.length === 0) return
-
-  editor.clearWells(wells)
-  emit('wells-clear', wells)
-}
-
-function handleAddSample() {
-  if (!newSampleName.value.trim()) return
-  editor.addSample(newSampleName.value.trim())
-  newSampleName.value = ''
-}
-
-function handleRemoveSample(sampleId: string) {
-  editor.removeSample(sampleId)
-}
-
-function handleAddPlate() {
-  if (editor.plates.value.length >= props.maxPlates) return
-  const plate = editor.addPlate()
-  emit('plate-add', { id: plate.id, name: plate.name })
-}
-
-function handleRemovePlate(plateId: string) {
-  editor.removePlate(plateId)
-  plateSlots.value.delete(plateId)
-  emit('plate-remove', plateId)
-}
-
-function handleUndo() {
-  editor.undo()
-  emit('undo')
-}
-
-function handleRedo() {
-  editor.redo()
-  emit('redo')
-}
-
-function handleExport(format: 'json' | 'csv') {
-  const data = editor.exportData(format)
-  emit('export', data, format)
-
-  const blob = new Blob([data], { type: format === 'json' ? 'application/json' : 'text/csv' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `plate-map.${format}`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
-function handleImport() {
-  const success = editor.importData(importText.value, importFormat.value)
-  emit('import', success)
-  if (success) {
-    showImportModal.value = false
-    importText.value = ''
-  }
-}
-
-function handleKeyDown(event: KeyboardEvent) {
-  const isUndo = (event.metaKey || event.ctrlKey) && event.key === 'z'
-  if (isUndo) {
-    event.preventDefault()
-    event.shiftKey ? handleRedo() : handleUndo()
-    return
-  }
-
-  const isDelete = event.key === 'Delete' || event.key === 'Backspace'
-  if (isDelete && editor.selectedWells.value.length > 0) {
-    event.preventDefault()
-    handleClearWells()
-    return
-  }
-
-  const num = parseInt(event.key)
-  const isValidSampleKey = num >= 1 && num <= 9 && editor.samples.value.length >= num
-  if (isValidSampleKey) {
-    editor.setActiveSample(editor.samples.value[num - 1].id)
-    if (editor.selectedWells.value.length > 0) {
-      handleAssignSample()
-    }
-  }
-}
-
-useEventListener(() => document, 'keydown', handleKeyDown)
-</script>
-
-<template>
-  <div :class="['mint-plate-editor', { 'mint-plate-editor--with-sidebar': showSidebar }]">
-    <!-- Main plate area -->
-    <div class="mint-plate-editor__main">
-      <!-- Toolbar -->
-      <PlateMapEditorToolbarInternal
-        v-if="showToolbar"
-        :plates="editor.plates.value"
-        :active-plate-id="editor.activePlate.value?.id"
-        :plate-well-counts="plateWellCounts"
-        :can-add-plate="allowAddPlates && editor.plates.value.length < maxPlates"
-        :can-undo="editor.canUndo.value"
-        :can-redo="editor.canRedo.value"
-        :slot-color-for-plate="getPlateSlotColor"
-        @select-plate="editor.setActivePlate"
-        @remove-plate="handleRemovePlate"
-        @add-plate="handleAddPlate"
-        @undo="handleUndo"
-        @redo="handleRedo"
-        @import="showImportModal = true"
-        @export-json="handleExport('json')"
-      />
-
-      <!-- Well plate -->
-      <WellPlate
-        v-if="editor.activePlate.value"
-        :model-value="editor.selectedWells.value"
-        :format="editor.activePlate.value.format"
-        :wells="wellsData"
-        :sample-colors="sampleColors"
-        :size="size"
-        selection-mode="rectangle"
-        show-sample-type-indicator
-        @update:model-value="handleSelectionChange"
-      />
-
-      <!-- Selection info bar -->
-      <div
-        v-if="editor.selectedWells.value.length > 0"
-        class="mint-plate-editor__selection-bar"
-      >
-        <span class="mint-plate-editor__selection-count">
-          <strong>{{ editor.selectedWells.value.length }}</strong> wells selected
-        </span>
-        <div class="mint-plate-editor__spacer" />
-        <button
-          v-if="editor.activeSampleId.value"
-          type="button"
-          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="mint-plate-editor__clear-btn"
-          @click="handleClearWells"
-        >
-          Clear
-        </button>
-      </div>
-
-      <!-- Legend -->
-      <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="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="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="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="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>
-          Drag to select
-        </span>
-      </div>
-    </div>
-
-    <!-- Sidebar -->
-    <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"
-          :samples="editor.samples.value"
-          :editable="allowAddSamples"
-          :size="size === 'lg' ? 'md' : 'sm'"
-          @update:model-value="editor.setActiveSample($event)"
-          @sample-click="handleSampleClick"
-          @sample-remove="handleRemoveSample"
-        />
-
-        <!-- Add sample -->
-        <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="mint-plate-editor__add-sample-input"
-              @keyup.enter="handleAddSample"
-            />
-            <button
-              type="button"
-              :disabled="!newSampleName.trim()"
-              class="mint-plate-editor__add-sample-btn"
-              @click="handleAddSample"
-            >
-              Add
-            </button>
-          </div>
-        </div>
-
-        <!-- Keyboard shortcuts -->
-        <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>
-    </div>
-
-    <!-- Import modal -->
-    <Teleport to="body">
-      <div
-        v-if="showImportModal"
-        class="mint-plate-editor__modal-overlay"
-        @click.self="showImportModal = false"
-      >
-        <div class="mint-plate-editor__modal">
-          <h3 class="mint-plate-editor__modal-title">Import Plate Map</h3>
-
-          <div class="mint-plate-editor__modal-field">
-            <label class="mint-plate-editor__modal-label">Format</label>
-            <select
-              v-model="importFormat"
-              class="mint-plate-editor__modal-select"
-            >
-              <option value="json">JSON</option>
-              <option value="csv">CSV</option>
-            </select>
-          </div>
-
-          <div class="mint-plate-editor__modal-field">
-            <label class="mint-plate-editor__modal-label">Data</label>
-            <textarea
-              v-model="importText"
-              rows="8"
-              class="mint-plate-editor__modal-textarea"
-              placeholder="Paste your data here..."
-            />
-          </div>
-
-          <div class="mint-plate-editor__modal-actions">
-            <button
-              type="button"
-              class="mint-plate-editor__modal-cancel"
-              @click="showImportModal = false"
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              :disabled="!importText.trim()"
-              class="mint-plate-editor__modal-submit"
-              @click="handleImport"
-            >
-              Import
-            </button>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/plate-map-editor.css';
-</style>

package/src/components/PluginIcon.story.vue

@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-import PluginIcon from './PluginIcon.vue'
-
-const SAMPLE_PATH = 'M13 10V3L4 14h7v7l9-11h-7z'
-const SAMPLE_STRUCTURED = JSON.stringify({
-  type: 'mint-icon',
-  viewBox: '0 0 24 24',
-  gradient: {
-    type: 'linear',
-    angle: 135,
-    stops: [
-      { offset: '0%', color: '#AAECBF' },
-      { offset: '100%', color: '#14A1A9' },
-    ],
-  },
-  background: { fill: 'gradient', radius: 5 },
-  paths: [
-    {
-      d: 'M7 17c5.8-.2 9.5-3.8 10-10-5.7.5-9.3 4.2-10 10zM8.5 15.5c2.2-1.7 4.1-3.4 6-6',
-      fill: 'none',
-      stroke: 'white',
-      strokeWidth: 1.8,
-    },
-  ],
-})
-// Tiny 1x1 transparent PNG.
-const SAMPLE_PNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII='
-const SAMPLE_HTTPS_SVG = 'https://vite.dev/logo.svg'
-
-function initState() {
-  return reactive({
-    icon: SAMPLE_PATH,
-    size: 'md' as 'sm' | 'md' | 'topbar' | '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', 'topbar', '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="topbar" />
-        <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_STRUCTURED" size="lg" variant="solid" />
-        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" />
-        <PluginIcon :icon="SAMPLE_PNG" size="lg" variant="solid" />
-        <PluginIcon :icon="SAMPLE_HTTPS_SVG" size="lg" variant="solid" />
-        <PluginIcon icon="" size="lg" variant="solid" />
-      </div>
-      <p style="padding: 0 2rem; color: var(--text-muted); font-size: 0.875rem;">
-        Structured gradient · SVG path · data URL (PNG) · HTTPS SVG · empty (fallback)
-      </p>
-    </Variant>
-
-    <Variant title="Structured vector">
-      <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
-        <PluginIcon :icon="SAMPLE_STRUCTURED" size="sm" />
-        <PluginIcon :icon="SAMPLE_STRUCTURED" size="md" />
-        <PluginIcon :icon="SAMPLE_STRUCTURED" size="topbar" />
-        <PluginIcon :icon="SAMPLE_STRUCTURED" size="lg" />
-      </div>
-    </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

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-/** Renders a plugin's icon as a sized chip. Auto-detects format:
- *  - Structured MINT icon JSON ({"type":"mint-icon",...}) → controlled multi-color SVG
- *  - SVG path data (e.g. "M13 10V3...") → inline <svg><path>
- *  - Raster data URL (data:image/png|jpeg|jpg|gif|webp;...) → <img>
- *  - https:// URL or root-relative static image/SVG asset → <img> with no-referrer + lazy loading
- *  - Anything else → MINT canonical plugin placeholder path
- *
- *  http://, protocol-relative, 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, type StructuredPluginIcon } from '../utils/pluginIcon'
-
-defineOptions({ name: 'PluginIcon' })
-
-interface Props {
-  icon?: string
-  size?: 'sm' | 'md' | 'topbar' | 'lg'
-  variant?: 'solid' | 'tinted'
-  tone?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'md',
-  variant: 'solid',
-})
-
-const detected = computed<DetectedPluginIcon>(() => detectPluginIcon(props.icon))
-const structuredIcon = computed<StructuredPluginIcon | undefined>(() =>
-  detected.value.format === 'structured' ? detected.value.value as StructuredPluginIcon : undefined,
-)
-const iconValue = computed<string>(() =>
-  typeof detected.value.value === 'string' ? detected.value.value : '',
-)
-
-const gradientId = computed(() => {
-  const source = props.icon ?? ''
-  let hash = 0
-  for (let index = 0; index < source.length; index += 1) {
-    hash = ((hash << 5) - hash + source.charCodeAt(index)) | 0
-  }
-  return `mint-plugin-icon-gradient-${Math.abs(hash)}`
-})
-
-const gradientCoords = computed(() => {
-  const angle = structuredIcon.value?.gradient?.angle ?? 135
-  const radians = (angle - 90) * Math.PI / 180
-  const x = Math.cos(radians) * 50
-  const y = Math.sin(radians) * 50
-
-  return {
-    x1: `${50 - x}%`,
-    y1: `${50 - y}%`,
-    x2: `${50 + x}%`,
-    y2: `${50 + y}%`,
-  }
-})
-
-const structuredViewBox = computed(() => {
-  const parts = structuredIcon.value?.viewBox.split(/\s+/).map(Number) ?? [0, 0, 24, 24]
-  return {
-    x: parts[0],
-    y: parts[1],
-    width: parts[2],
-    height: parts[3],
-  }
-})
-
-const backgroundFill = computed(() =>
-  structuredIcon.value?.background?.fill === 'gradient'
-    ? `url(#${gradientId.value})`
-    : structuredIcon.value?.background?.fill,
-)
-
-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="structuredIcon"
-      class="mint-plugin-icon__svg mint-plugin-icon__svg--structured"
-      :viewBox="structuredIcon.viewBox"
-      aria-hidden="true"
-    >
-      <defs v-if="structuredIcon.gradient">
-        <linearGradient
-          :id="gradientId"
-          :x1="gradientCoords.x1"
-          :y1="gradientCoords.y1"
-          :x2="gradientCoords.x2"
-          :y2="gradientCoords.y2"
-        >
-          <stop
-            v-for="stop in structuredIcon.gradient.stops"
-            :key="`${stop.offset}-${stop.color}`"
-            :offset="stop.offset"
-            :stop-color="stop.color"
-            :stop-opacity="stop.opacity"
-          />
-        </linearGradient>
-      </defs>
-      <rect
-        v-if="structuredIcon.background"
-        :x="structuredViewBox.x"
-        :y="structuredViewBox.y"
-        :width="structuredViewBox.width"
-        :height="structuredViewBox.height"
-        :rx="structuredIcon.background.radius"
-        :fill="backgroundFill"
-      />
-      <path
-        v-for="(path, index) in structuredIcon.paths"
-        :key="index"
-        :d="path.d"
-        :fill="path.fill ?? 'none'"
-        :stroke="path.stroke"
-        :stroke-width="path.strokeWidth"
-        :opacity="path.opacity"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-    <svg
-      v-else-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="iconValue" />
-    </svg>
-    <img
-      v-else
-      class="mint-plugin-icon__img"
-      :src="iconValue"
-      alt=""
-      referrerpolicy="no-referrer"
-      loading="lazy"
-    />
-  </span>
-</template>
-
-<style>
-@import '../styles/components/plugin-icon.css';
-</style>