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

package/src/components/PlateMapEditor.vue

@@ -0,0 +1,434 @@
+<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

@@ -0,0 +1,103 @@
+<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

@@ -0,0 +1,158 @@
+<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>