@morscherlab/mint-sdk 1.1.8 → 1.1.10

package/src/components/SmartGroupFieldRecipe.vue

@@ -64,6 +64,8 @@ const emit = defineEmits<{
   close: []
   /** Controlled mode: a field toggle was clicked (card index). */
   toggle: [index: number]
+  /** Controlled mode: a layer reorder button was clicked (card index). */
+  move: [index: number, direction: 'up' | 'down']
   /** Controlled mode: the QC routing select changed. */
   'update:route': [route: QcRoute]
   /** A CSV/TSV file was chosen (upload button) or dropped; parent parses it. */
@@ -99,6 +101,7 @@ const ICON = {
   upload: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12',
   download: 'M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3',
   chev: 'M6 9l6 6 6-6',
+  chevUp: 'M18 15l-6-6-6 6',
 }
 
 const MAX_BAR = 44
@@ -160,9 +163,12 @@ function chooseDownloadPrefilled() {
 }
 
 // Uncontrolled fallback state (used by the standalone story). In controlled
-// mode AutoGroupModal supplies `enabled` / `groups` / `route` + `qcChip` and the
-// `toggle` / `update:route` events drive the engine instead of this local state.
+// mode AutoGroupModal supplies `enabled` / `layers` / `groups` / `route` +
+// `qcChip` and the `toggle` / `move` / `update:route` events drive the engine
+// instead of this local state. `orderInner` tracks the uncontrolled layer
+// order: field indices in toggle order, first entry = hierarchy layer 1.
 const onInner = ref<boolean[]>(props.initialOn ? [...props.initialOn] : props.fields.map(field => !field.rep))
+const orderInner = ref<number[]>(onInner.value.flatMap((isOn, i) => (isOn ? [i] : [])))
 const routeInner = ref<QcRoute>(props.initialRoute)
 
 const controlledEnabled = computed(() => props.enabled !== undefined)
@@ -171,10 +177,34 @@ const controlledRoute = computed(() => props.route !== undefined)
 const on = computed(() => props.enabled ?? onInner.value)
 const currentRoute = computed(() => props.route ?? routeInner.value)
 
-const computedBase = computed(() => computeFieldGroups(props.samples, props.fields, on.value, props.palette))
+// Per-card hierarchy layer (1-based, null = not grouped by). Controlled mode
+// passes `layers` from the engine; controlled-without-layers keeps the legacy
+// field-order numbering; uncontrolled mode derives from the local toggle order.
+const layers = computed<(number | null)[]>(() => {
+  if (props.layers !== undefined) return props.layers
+  if (controlledEnabled.value) {
+    let layer = 0
+    return props.fields.map((_, i) => (on.value[i] ? ++layer : null))
+  }
+  return props.fields.map((_, i) => {
+    const pos = orderInner.value.indexOf(i)
+    return pos === -1 ? null : pos + 1
+  })
+})
+// Field indices sorted by layer — the join order for names and the summary.
+const layerOrder = computed<number[]>(() =>
+  layers.value
+    .flatMap((layer, i) => (layer === null ? [] : [{ layer, i }]))
+    .sort((a, b) => a.layer - b.layer)
+    .map(entry => entry.i),
+)
+
+const computedBase = computed(() =>
+  computeFieldGroups(props.samples, props.fields, on.value, props.palette, layerOrder.value),
+)
 const baseGroups = computed(() => props.groups ?? computedBase.value)
 const groups = computed(() => props.groups ?? appendQcGroup(computedBase.value, currentRoute.value, props.qcColor))
-const activeFactors = computed(() => props.fields.filter((_, i) => on.value[i]).map(field => field.key))
+const activeFactors = computed(() => layerOrder.value.map(i => props.fields[i].key))
 const counts = computed(() => baseGroups.value.map(group => group.count))
 const uniform = computed(() => counts.value.length > 0 && counts.value.every(count => count === counts.value[0]))
 const repField = computed(() => props.fields.find(field => field.rep))
@@ -213,7 +243,26 @@ function toggle(index: number) {
     emit('toggle', index)
     return
   }
+  const wasOn = onInner.value[index]
   onInner.value = onInner.value.map((value, i) => (i === index ? !value : value))
+  // A re-enabled field appends as the LAST layer, mirroring the engine.
+  orderInner.value = wasOn
+    ? orderInner.value.filter(i => i !== index)
+    : [...orderInner.value, index]
+}
+
+function moveLayer(index: number, direction: 'up' | 'down') {
+  if (controlledEnabled.value) {
+    emit('move', index, direction)
+    return
+  }
+  const from = orderInner.value.indexOf(index)
+  if (from === -1) return
+  const to = direction === 'up' ? from - 1 : from + 1
+  if (to < 0 || to >= orderInner.value.length) return
+  const next = [...orderInner.value]
+  ;[next[from], next[to]] = [next[to], next[from]]
+  orderInner.value = next
 }
 
 function onRouteChange(value: QcRoute) {
@@ -341,6 +390,29 @@ function onApply() {
               :aria-label="'Group by ' + field.key"
               @click="toggle(i)"
             />
+            <div v-if="on[i] && layers[i] !== null" class="sg-field__order">
+              <span class="sg-field__layer">Layer {{ layers[i] }}</span>
+              <button
+                type="button"
+                class="sg-field__order-btn"
+                :disabled="layers[i] === 1"
+                :aria-label="'Move ' + field.key + ' up a layer'"
+                title="Move up a layer"
+                @click.stop="moveLayer(i, 'up')"
+              >
+                <Icon :d="ICON.chevUp" :size="12" />
+              </button>
+              <button
+                type="button"
+                class="sg-field__order-btn"
+                :disabled="layers[i] === layerOrder.length"
+                :aria-label="'Move ' + field.key + ' down a layer'"
+                title="Move down a layer"
+                @click.stop="moveLayer(i, 'down')"
+              >
+                <Icon :d="ICON.chev" :size="12" />
+              </button>
+            </div>
             <div class="sg-field__vals">{{ field.vals }}</div>
           </div>
         </div>

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -63,7 +63,7 @@ function handleSelect(page: PageSelectorItem) {
             class="mint-page-selector__trigger-metadata-icon"
             :icon="current.icon"
             size="sm"
-            variant="tinted"
+            variant="solid"
           />
           <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
         </slot>
@@ -111,7 +111,7 @@ function handleSelect(page: PageSelectorItem) {
               class="mint-page-selector__metadata-icon"
               :icon="page.icon"
               size="sm"
-              variant="tinted"
+              variant="solid"
             />
             <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
           </slot>

package/src/composables/autoGroup/compose.ts

@@ -67,6 +67,31 @@ export function composeGroups(input: ComposeInput): AutoGroupResult {
   const metadata: MetadataRow[] = []
   let colorIdx = 0
 
+  // Class-label prefixing exists ONLY to disambiguate group names when several
+  // experimental classes could emit the same factor key (e.g. a Liver class and
+  // a Kidney class both producing "5min / High"). With a single experimental
+  // class there is nothing to disambiguate, so groups start directly at the
+  // user's first layer and the sample selector's major-group slot is not
+  // wasted on a constant root. When a prefix IS needed it should occupy ONE
+  // hierarchy layer, so prefer the short distinguishing `subKind` ("Liver")
+  // over the full label ("Biological / Liver") — falling back to the full
+  // label when two classes share a subKind (e.g. token-length splits).
+  const experimentalClasses = input.classes.filter(
+    c => c.disposition === 'group' && input.schemas[classKey(c)],
+  )
+  const classPrefix = new Map<SampleClass, string>()
+  if (input.prefixClassLabels !== false && experimentalClasses.length > 1) {
+    const shortCounts = new Map<string, number>()
+    for (const c of experimentalClasses) {
+      const short = c.subKind ?? c.label
+      shortCounts.set(short, (shortCounts.get(short) ?? 0) + 1)
+    }
+    for (const c of experimentalClasses) {
+      const short = c.subKind ?? c.label
+      classPrefix.set(c, (shortCounts.get(short) ?? 0) > 1 ? c.label : short)
+    }
+  }
+
   // Nested hierarchy (class → groupBy levels → sample leaves) built alongside
   // the flat groups. `treeIndex` lets repeated members reuse the same path node.
   // PATH_SEP is a control char so it never collides with a real token value.
@@ -125,9 +150,9 @@ export function composeGroups(input: ComposeInput): AutoGroupResult {
             })
           : [cls.label]
 
-      // Prepend the class label to the factor-key parts so group names carry
-      // class context (e.g. "Biological / Tissues / POS / 5min" instead of a
-      // bare "5min" that collides with another class's "5min").
+      // Prepend the class's short distinguishing label (see `classPrefix`
+      // above) so group names from different classes don't collide when they
+      // share a factor value (e.g. two tissue classes both emitting "5min").
       //
       // Only fires for disposition === 'group' classes with actual factor
       // keyParts: overlay/exclude classes already use cls.label AS their
@@ -137,15 +162,11 @@ export function composeGroups(input: ComposeInput): AutoGroupResult {
         input.missingGroupName &&
         cls.disposition === 'group' &&
         keyParts.some(part => part.trim().length === 0)
-      const useClassPrefix =
-        input.prefixClassLabels !== false &&
-        cls.disposition === 'group' &&
-        cls.kind !== 'unknown' &&
-        keyParts.length > 0
+      const prefix = cls.kind !== 'unknown' && keyParts.length > 0 ? classPrefix.get(cls) : undefined
       const groupKey = hasMissingGroupPart
         ? input.missingGroupName!
-        : useClassPrefix
-          ? `${cls.label} / ${keyParts.join(' / ')}`
+        : prefix
+          ? `${prefix} / ${keyParts.join(' / ')}`
           : keyParts.length > 0
             ? keyParts.join(' / ')
             : cls.label

package/src/composables/index.ts

@@ -287,6 +287,7 @@ export {
 export {
   useSampleGroups,
   type DisplaySampleSubGroup,
+  type SampleGroupNode,
   type SampleGroupSource,
   type SampleMajorGroup,
   type UseSampleGroupsOptions,

package/src/composables/useAutoGroup.ts

@@ -271,18 +271,123 @@ export function useAutoGroup() {
     if (changed) classes.value = next
   }
 
+  // `groupBy` is an ORDERED layer list: entry N is hierarchy layer N of the
+  // composed group names (layer 1 = the sample selector's major group). A
+  // column toggled back on therefore appends as the LAST layer rather than
+  // returning to its token position.
   function toggleGroupBy(key: string, idx: number) {
     const schema = schemas.value[key]
     if (!schema) return
-    const set = new Set(schema.groupBy)
-    if (set.has(idx)) set.delete(idx)
-    else set.add(idx)
+    const groupBy = schema.groupBy.includes(idx)
+      ? schema.groupBy.filter(i => i !== idx)
+      : [...schema.groupBy, idx]
     schemas.value = {
       ...schemas.value,
-      [key]: { ...schema, groupBy: [...set].sort((a, b) => a - b) },
+      [key]: { ...schema, groupBy },
     }
   }
 
+  /** Move an enabled column one step up (toward layer 1) or down in the layer order. */
+  function moveGroupBy(key: string, idx: number, direction: 'up' | 'down') {
+    const schema = schemas.value[key]
+    if (!schema) return
+    const from = schema.groupBy.indexOf(idx)
+    if (from === -1) return
+    const to = direction === 'up' ? from - 1 : from + 1
+    if (to < 0 || to >= schema.groupBy.length) return
+    const groupBy = [...schema.groupBy]
+    ;[groupBy[from], groupBy[to]] = [groupBy[to], groupBy[from]]
+    schemas.value = {
+      ...schemas.value,
+      [key]: { ...schema, groupBy },
+    }
+  }
+
+  // The Field Recipe presents ONE set of grouping fields for the whole batch,
+  // but classes each own a schema — so a field edit must reach every class that
+  // exposes that field, or a multi-class batch ends up with divergent layer
+  // orders (half the groups reordered). Fields are matched by display identity
+  // rather than column index, since a class split off by token length can carry
+  // the same field at a different position.
+  function schemasExposing(fieldKey: string): { key: string; index: number }[] {
+    return Object.entries(schemas.value).flatMap(([key, schema]) => {
+      const col = schema.columns.find(c =>
+        (c.displayName ?? c.name) === fieldKey
+        && (c.role === 'factor' || c.role === 'replicate' || schema.groupBy.includes(c.index)),
+      )
+      return col ? [{ key, index: col.index }] : []
+    })
+  }
+
+  function fieldIdentity(schema: ClassSchema, index: number): string | undefined {
+    const column = schema.columns.find(candidate => candidate.index === index)
+    return column ? (column.displayName ?? column.name) : undefined
+  }
+
+  /**
+   * Toggle a grouping field across every class exposing it. The batch card is
+   * on when any schema groups by the field, so clicking it disables all such
+   * schemas; only a fully disabled field is enabled across the batch.
+   */
+  function toggleGroupByField(fieldKey: string) {
+    const targets = schemasExposing(fieldKey)
+    if (targets.length === 0) return
+    const enable = !targets.some(({ key, index }) => schemas.value[key]?.groupBy.includes(index))
+    for (const { key, index } of targets) {
+      const schema = schemas.value[key]
+      if (!schema || schema.groupBy.includes(index) === enable) continue
+      toggleGroupBy(key, index)
+    }
+  }
+
+  /**
+   * Move a grouping field in the active schema, then project that visible field
+   * order across every class. Class-only fields keep their relative order after
+   * the shared fields because the Field Recipe has no card with which to place
+   * them explicitly.
+   */
+  function moveGroupByField(fieldKey: string, direction: 'up' | 'down') {
+    const targets = schemasExposing(fieldKey)
+    if (targets.length === 0) return
+    const active = targets.find(target =>
+      target.key === activeClassKey.value && schemas.value[target.key]?.groupBy.includes(target.index),
+    ) ?? targets.find(target => schemas.value[target.key]?.groupBy.includes(target.index)) ?? targets[0]
+    const activeSchema = schemas.value[active.key]
+    if (!activeSchema) return
+    const from = activeSchema.groupBy.indexOf(active.index)
+    if (from === -1) return
+    const to = direction === 'up' ? from - 1 : from + 1
+    if (to < 0 || to >= activeSchema.groupBy.length) return
+
+    const activeOrder = [...activeSchema.groupBy]
+    ;[activeOrder[from], activeOrder[to]] = [activeOrder[to], activeOrder[from]]
+    const desiredRank = new Map(
+      activeOrder.flatMap((index, rank) => {
+        const identity = fieldIdentity(activeSchema, index)
+        return identity === undefined ? [] : [[identity, rank] as const]
+      }),
+    )
+
+    let changed = false
+    const nextSchemas = { ...schemas.value }
+    for (const [key, schema] of Object.entries(schemas.value)) {
+      const shared: Array<{ index: number; rank: number }> = []
+      const classOnly: number[] = []
+      for (const index of schema.groupBy) {
+        const identity = fieldIdentity(schema, index)
+        const rank = identity === undefined ? undefined : desiredRank.get(identity)
+        if (rank === undefined) classOnly.push(index)
+        else shared.push({ index, rank })
+      }
+      shared.sort((left, right) => left.rank - right.rank)
+      const groupBy = [...shared.map(entry => entry.index), ...classOnly]
+      if (groupBy.every((index, position) => index === schema.groupBy[position])) continue
+      nextSchemas[key] = { ...schema, groupBy }
+      changed = true
+    }
+    if (changed) schemas.value = nextSchemas
+  }
+
   function updateColumn(key: string, idx: number, patch: Partial<ColumnInfo>) {
     const schema = schemas.value[key]
     if (!schema) return
@@ -481,7 +586,9 @@ export function useAutoGroup() {
     hasOutliers, outliers, conformingSamples, allSingletons,
     canDownloadTemplate,
     // Mutators
-    setClassDisposition, setClassDispositions, toggleGroupBy, setRole, setColumnName, setValueOps, setBinning,
+    setClassDisposition, setClassDispositions, toggleGroupBy, moveGroupBy,
+    toggleGroupByField, moveGroupByField,
+    setRole, setColumnName, setValueOps, setBinning,
     mergeColumns, loadFingerprint,
     // Actions
     parseInput, downloadTemplate, composeTemplateForTest, loadExperimentData, reset,

package/src/composables/useSampleGroups.ts

@@ -1,6 +1,7 @@
 import { computed, toValue, type ComputedRef, type Ref } from 'vue'
 import type { SampleGroup } from '../types'
 import { deriveShade } from '../utils/color'
+import { splitSampleGroupPath } from '../utils/sampleGroupPath'
 
 export type SampleGroupSource<T> =
   | T
@@ -21,6 +22,28 @@ export interface SampleMajorGroup {
   allSamples: string[]
 }
 
+/**
+ * One node of the sample-group display hierarchy. Interior nodes are path
+ * prefixes of the group names (`Liver`, `Liver / High`); leaves carry the
+ * concrete group. A group's `name` stays the full path on its leaf because
+ * every mutation — drag, delete, colour, selection — resolves groups by name.
+ */
+export interface SampleGroupNode {
+  /** Unique across the tree; use for `:key` and expansion state. */
+  key: string
+  /** This node's own path segment, not the full path. */
+  label: string
+  color: string
+  displayBg: string
+  displayBorder: string
+  /** Every sample beneath this node, in group order. */
+  allSamples: string[]
+  /** Empty for leaves. */
+  children: SampleGroupNode[]
+  /** Present only on leaves. */
+  group?: DisplaySampleSubGroup
+}
+
 export interface UseSampleGroupsOptions {
   groups: SampleGroupSource<readonly SampleGroup[]>
   samples?: SampleGroupSource<readonly string[]>
@@ -31,6 +54,10 @@ export interface UseSampleGroupsOptions {
 export interface UseSampleGroupsReturn {
   groups: ComputedRef<SampleGroup[]>
   separator: ComputedRef<string>
+  /** Full N-layer display hierarchy; one level per group-name segment. */
+  groupTree: ComputedRef<SampleGroupNode[]>
+  /** Deepest layer count across the tree (1 when groups are flat). */
+  maxDepth: ComputedRef<number>
   hierarchicalGroups: ComputedRef<SampleMajorGroup[]>
   showHierarchy: ComputedRef<boolean>
   groupedSamples: ComputedRef<Set<string>>
@@ -50,48 +77,105 @@ export function useSampleGroups(options: UseSampleGroupsOptions): UseSampleGroup
     return groups.value.some(group => group.name.includes('/')) ? '/' : '_'
   })
 
-  const hierarchicalGroups = computed<SampleMajorGroup[]>(() => {
-    if (groups.value.length === 0) return []
-    const groupedByMajor = new Map<string, SampleGroup[]>()
-
+  // Groups are bucketed by their first segment (the major/family), then each
+  // family is expanded into a full prefix tree. Shades are assigned per family
+  // across its leaves so a family keeps one hue with a light→dark gradient,
+  // exactly as the two-level model did.
+  const families = computed(() => {
+    const byMajor = new Map<string, SampleGroup[]>()
     for (const group of groups.value) {
       const majorName = getMajorGroupName(group.name, separator.value)
-      const existing = groupedByMajor.get(majorName)
-      if (existing) {
-        existing.push(group)
-      } else {
-        groupedByMajor.set(majorName, [group])
-      }
+      const existing = byMajor.get(majorName)
+      if (existing) existing.push(group)
+      else byMajor.set(majorName, [group])
     }
-
-    return [...groupedByMajor.entries()].map(([majorName, subGroups]) => {
-      const color = subGroups[0]?.color || fallbackColor.value
-      const displaySubs = subGroups.map((subGroup, index) => {
-        const displayColor = deriveShade(color, index, subGroups.length)
-        return {
-          ...subGroup,
-          displayColor,
-          displayBg: displayColor + '20',
-          displayBorder: displayColor + '40',
-        }
-      })
-
+    return [...byMajor.entries()].map(([name, members]) => {
+      const color = members[0]?.color || fallbackColor.value
       return {
-        name: majorName,
+        name,
         color,
-        subGroups: displaySubs,
-        allSamples: subGroups.flatMap(group => group.samples),
+        subGroups: members.map((group, index) => {
+          const displayColor = deriveShade(color, index, members.length)
+          return {
+            ...group,
+            displayColor,
+            displayBg: displayColor + '20',
+            displayBorder: displayColor + '40',
+          }
+        }),
       }
     })
   })
 
-  const showHierarchy = computed(() =>
-    hierarchicalGroups.value.some(major =>
-      major.subGroups.length > 1 ||
-      (major.subGroups.length === 1 && major.name !== major.subGroups[0].name)
-    )
+  const groupTree = computed<SampleGroupNode[]>(() => {
+    const roots: SampleGroupNode[] = []
+
+    for (const family of families.value) {
+      // Interior nodes are shared by path so siblings collapse into one parent;
+      // leaves are keyed separately so a group whose full path equals an
+      // interior path (e.g. "Liver" alongside "Liver / High") stays reachable
+      // instead of being swallowed by the prefix node.
+      const interior = new Map<string, SampleGroupNode>()
+
+      for (const subGroup of family.subGroups) {
+        const segments = splitSampleGroupPath(subGroup.name, separator.value)
+        const leafLabel = segments[segments.length - 1] ?? subGroup.name
+        let siblings = roots
+        let path = ''
+
+        for (const segment of segments.slice(0, -1)) {
+          path = path ? `${path}/${segment}` : segment
+          let node = interior.get(path)
+          if (!node) {
+            node = {
+              key: `node:${family.name}/${path}`,
+              label: segment,
+              color: family.color,
+              displayBg: family.color + '20',
+              displayBorder: family.color + '40',
+              allSamples: [],
+              children: [],
+            }
+            interior.set(path, node)
+            siblings.push(node)
+          }
+          node.allSamples.push(...subGroup.samples)
+          siblings = node.children
+        }
+
+        siblings.push({
+          key: `leaf:${subGroup.name}`,
+          label: leafLabel,
+          color: subGroup.displayColor,
+          displayBg: subGroup.displayBg,
+          displayBorder: subGroup.displayBorder,
+          allSamples: [...subGroup.samples],
+          children: [],
+          group: subGroup,
+        })
+      }
+    }
+
+    return roots
+  })
+
+  const maxDepth = computed(() => {
+    const depthOf = (nodes: SampleGroupNode[]): number =>
+      nodes.reduce((deepest, node) => Math.max(deepest, 1 + depthOf(node.children)), 0)
+    return depthOf(groupTree.value)
+  })
+
+  const hierarchicalGroups = computed<SampleMajorGroup[]>(() =>
+    families.value.map(family => ({
+      name: family.name,
+      color: family.color,
+      subGroups: family.subGroups,
+      allSamples: family.subGroups.flatMap(group => group.samples),
+    })),
   )
 
+  const showHierarchy = computed(() => maxDepth.value > 1)
+
   const groupedSamples = computed(() =>
     new Set(groups.value.flatMap(group => group.samples))
   )
@@ -111,6 +195,8 @@ export function useSampleGroups(options: UseSampleGroupsOptions): UseSampleGroup
   return {
     groups,
     separator,
+    groupTree,
+    maxDepth,
     hierarchicalGroups,
     showHierarchy,
     groupedSamples,
@@ -121,6 +207,5 @@ export function useSampleGroups(options: UseSampleGroupsOptions): UseSampleGroup
 }
 
 function getMajorGroupName(groupName: string, separator: string): string {
-  const parts = groupName.split(separator)
-  return parts.length > 1 ? parts[0] : groupName
+  return splitSampleGroupPath(groupName, separator)[0]
 }

package/src/styles/components/app-avatar-menu.css

@@ -6,7 +6,7 @@
 }
 
 /* Pill trigger — avatar circle + username text on the right. Matches the
-   legacy `.mint-topbar__profile-btn` convention (GitHub/Linear-style). */
+   shared TopBar account-trigger convention (GitHub/Linear-style). */
 .mint-avatar-menu__trigger {
   display: inline-flex;
   align-items: center;
@@ -39,6 +39,7 @@
   align-items: center;
   justify-content: center;
   font-size: 0.75rem;
+  line-height: 1;
   font-weight: 500;
   color: white;
   background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);

package/src/styles/components/app-plugin-switcher.css

@@ -51,19 +51,6 @@
   box-shadow: 0 0 0 3px var(--color-primary-soft);
 }
 
-.mint-plugin-switcher__swatch {
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 0.375rem;
-  color: white;
-  display: grid;
-  place-items: center;
-  font-family: var(--font-mono, ui-monospace, monospace);
-  font-weight: 700;
-  font-size: 0.65625rem;
-  flex-shrink: 0;
-}
-
 .mint-plugin-switcher__label {
   font-weight: 600;
   color: var(--text-primary);