@morscherlab/mint-sdk 1.1.8 → 1.1.10

package/src/components/AppTopBar.vue

@@ -52,7 +52,7 @@ interface Props {
   /** Active id for the preferred centered pill navigation. */
   currentPillId?: string
 
-  /** Account dropdown entries. Takes precedence over the classic profile button. */
+  /** Account dropdown entries. */
   accountMenu?: AccountMenuItem[]
   /** Show the notifications icon button. */
   showNotifications?: boolean
@@ -69,17 +69,15 @@ interface Props {
   showStandaloneLabel?: boolean
   /** Custom standalone badge label. */
   standaloneLabel?: string
-  /** Show the classic admin shortcut. */
+  /** Show the admin shortcut. */
   showAdmin?: boolean
-  /** Route used by the classic admin shortcut. */
+  /** Route used by the admin shortcut. */
   adminPath?: string
-  /** Show the classic profile button when accountMenu is not provided. */
-  showProfile?: boolean
-  /** Classic profile display name. */
+  /** Account display name. */
   userName?: string
-  /** Explicit classic profile initial. */
+  /** Explicit account avatar initial. */
   userInitial?: string
-  /** Classic profile email, used by avatar/account layouts. */
+  /** Account email shown in the avatar menu. */
   userEmail?: string
 }
 
@@ -93,7 +91,6 @@ const props = withDefaults(defineProps<Props>(), {
   standaloneLabel: 'Standalone',
   showAdmin: false,
   adminPath: '/admin',
-  showProfile: false,
   showNotifications: false,
   hasNotificationDot: false,
 })
@@ -103,7 +100,6 @@ const ExperimentPopover = defineAsyncComponent(() => import('./ExperimentPopover
 const ExperimentSelectorModal = defineAsyncComponent(() => import('./ExperimentSelectorModal.vue'))
 
 const emit = defineEmits<{
-  'profile-click': []
   'admin-click': []
   'page-selector-select': [page: PageSelectorItem]
   'pill-select': [item: PillNavItem]
@@ -120,6 +116,7 @@ const settingsOpen = ref(false)
 const { isIntegrated, plugin } = usePlatformContext()
 const isStandalone = computed(() => !isIntegrated.value)
 const appExperiment = inject(APP_EXPERIMENT_KEY, null)
+const canBindExperiment = computed(() => plugin.value?.plugin_type !== 'static')
 
 const pluginIcon = computed(() => {
   const currentPlugin = plugin.value
@@ -128,12 +125,6 @@ const pluginIcon = computed(() => {
     : null
 })
 
-const profileInitial = computed(() => {
-  if (props.userInitial) return props.userInitial
-  if (props.userName) return props.userName.charAt(0).toUpperCase()
-  return 'U'
-})
-
 const hasPlatformPageSelector = computed(() =>
   props.pageSelector === undefined && (plugin.value?.nav_items?.length ?? 0) > 1,
 )
@@ -201,69 +192,99 @@ const effectiveCurrentPageSelectorId = computed(() =>
           :href="homePath"
           class="mint-topbar-home-link"
         >
-          <slot name="icon">
+          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
             <PluginIcon
-              v-if="pluginIcon"
+              v-if="isIntegrated"
               class="mint-topbar__plugin-icon"
-              :icon="pluginIcon.icon"
-              :tone="pluginIcon.color"
-              size="md"
+              :icon="plugin?.icon"
+              :tone="plugin?.color"
+              size="topbar"
               variant="solid"
             />
-            <slot v-else name="logo">
-              <div v-if="showLogo" class="mint-topbar__logo">
-                <div class="mint-topbar__logo-icon">
-                  <span class="mint-topbar__logo-text">M</span>
+            <slot v-else name="icon">
+              <PluginIcon
+                v-if="pluginIcon"
+                class="mint-topbar__plugin-icon"
+                :icon="pluginIcon.icon"
+                :tone="pluginIcon.color"
+                size="topbar"
+                variant="solid"
+              />
+              <slot v-else name="logo">
+                <div v-if="showLogo" class="mint-topbar__logo">
+                  <div class="mint-topbar__logo-icon">
+                    <span class="mint-topbar__logo-text">M</span>
+                  </div>
                 </div>
-              </div>
+              </slot>
             </slot>
-          </slot>
+          </span>
         </a>
         <router-link
           v-else-if="homePath"
           :to="homePath"
           class="mint-topbar-home-link"
         >
-          <slot name="icon">
+          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
             <PluginIcon
-              v-if="pluginIcon"
+              v-if="isIntegrated"
               class="mint-topbar__plugin-icon"
-              :icon="pluginIcon.icon"
-              :tone="pluginIcon.color"
-              size="md"
+              :icon="plugin?.icon"
+              :tone="plugin?.color"
+              size="topbar"
               variant="solid"
             />
-            <slot v-else name="logo">
-              <div v-if="showLogo" class="mint-topbar__logo">
-                <div class="mint-topbar__logo-icon">
-                  <span class="mint-topbar__logo-text">M</span>
+            <slot v-else name="icon">
+              <PluginIcon
+                v-if="pluginIcon"
+                class="mint-topbar__plugin-icon"
+                :icon="pluginIcon.icon"
+                :tone="pluginIcon.color"
+                size="topbar"
+                variant="solid"
+              />
+              <slot v-else name="logo">
+                <div v-if="showLogo" class="mint-topbar__logo">
+                  <div class="mint-topbar__logo-icon">
+                    <span class="mint-topbar__logo-text">M</span>
+                  </div>
                 </div>
-              </div>
+              </slot>
             </slot>
-          </slot>
+          </span>
         </router-link>
         <template v-else>
-          <slot name="icon">
+          <span v-if="isIntegrated || $slots.icon || $slots.logo || pluginIcon || showLogo" class="mint-topbar__identity">
             <PluginIcon
-              v-if="pluginIcon"
+              v-if="isIntegrated"
               class="mint-topbar__plugin-icon"
-              :icon="pluginIcon.icon"
-              :tone="pluginIcon.color"
-              size="md"
+              :icon="plugin?.icon"
+              :tone="plugin?.color"
+              size="topbar"
               variant="solid"
             />
-            <slot v-else name="logo">
-              <div v-if="showLogo" class="mint-topbar__logo">
-                <div class="mint-topbar__logo-icon">
-                  <span class="mint-topbar__logo-text">M</span>
+            <slot v-else name="icon">
+              <PluginIcon
+                v-if="pluginIcon"
+                class="mint-topbar__plugin-icon"
+                :icon="pluginIcon.icon"
+                :tone="pluginIcon.color"
+                size="topbar"
+                variant="solid"
+              />
+              <slot v-else name="logo">
+                <div v-if="showLogo" class="mint-topbar__logo">
+                  <div class="mint-topbar__logo-icon">
+                    <span class="mint-topbar__logo-text">M</span>
+                  </div>
                 </div>
-              </div>
+              </slot>
             </slot>
-          </slot>
+          </span>
         </template>
       </div>
 
-      <!-- Left: page selector or plugin switcher (new) -->
+      <!-- Left: page selector or plugin switcher -->
       <AppPluginSwitcher
         v-if="hasPluginSwitcher && pluginSwitcher"
         :current="pluginSwitcher.current"
@@ -298,7 +319,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
       <!-- Nav slot (inline, after brand/selector) -->
       <slot name="nav" />
 
-      <!-- Center: pill nav (new) -->
+      <!-- Center: pill nav -->
       <div v-if="hasPillNav || $slots.center" class="mint-topbar__center">
         <slot name="center">
           <AppTopBarPillNavInternal
@@ -318,7 +339,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
         </span>
 
         <ExperimentPopover
-          v-if="appExperiment && !isStandalone"
+          v-if="appExperiment && !isStandalone && canBindExperiment"
           v-bind="appExperiment.popover.value"
           @select="appExperiment.openModal()"
           @save="appExperiment.handleSave()"
@@ -331,7 +352,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
 
         <slot name="actions" />
 
-        <!-- Notifications (new) -->
+        <!-- Notifications -->
         <button
           v-if="showNotifications"
           type="button"
@@ -346,10 +367,10 @@ const effectiveCurrentPageSelectorId = computed(() =>
           <span v-if="hasNotificationDot" class="mint-topbar__icon-btn-dot" aria-hidden="true" />
         </button>
 
-        <!-- Classic: theme toggle -->
+        <!-- Theme toggle -->
         <ThemeToggle v-if="showThemeToggle" size="sm" />
 
-        <!-- Classic: settings gear -->
+        <!-- Settings -->
         <button
           v-if="showSettings"
           type="button"
@@ -362,7 +383,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
           </svg>
         </button>
 
-        <!-- Classic: admin link -->
+        <!-- Admin link -->
         <router-link
           v-if="showAdmin"
           :to="adminPath"
@@ -375,7 +396,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
           </svg>
         </router-link>
 
-        <!-- New: avatar menu (takes precedence over classic profile button) -->
+        <!-- Account menu -->
         <AppAvatarMenu
           v-if="hasAccountMenu || $slots['account-menu-items']"
           :user-name="userName"
@@ -392,20 +413,6 @@ const effectiveCurrentPageSelectorId = computed(() =>
             <slot name="account-menu-item-icon" v-bind="slotProps" />
           </template>
         </AppAvatarMenu>
-
-        <!-- Classic: profile button (only when avatar menu not provided) -->
-        <button
-          v-else-if="showProfile"
-          type="button"
-          class="mint-topbar__profile-btn"
-          aria-label="Edit profile"
-          @click="emit('profile-click')"
-        >
-          <div class="mint-topbar__profile-avatar">
-            {{ profileInitial }}
-          </div>
-          <span v-if="userName" class="mint-topbar__profile-name">{{ userName }}</span>
-        </button>
       </div>
     </div>
   </header>
@@ -436,7 +443,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
   </SettingsModal>
 
   <ExperimentSelectorModal
-    v-if="appExperiment && !isStandalone && appExperiment.selectorModal.value.modelValue"
+    v-if="appExperiment && !isStandalone && canBindExperiment && appExperiment.selectorModal.value.modelValue"
     v-bind="appExperiment.selectorModal.value"
     @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
   />

package/src/components/AutoGroupModal.adapter.ts

@@ -4,7 +4,7 @@
  * `AutoGroupResult`. Framework-free so the mapping is unit-testable in isolation
  * from `AutoGroupModal.vue`.
  */
-import type { AutoGroupResult, ColumnInfo, ColumnRole } from '../types/auto-group'
+import type { AutoGroupResult, ClassSchema, ColumnInfo, ColumnRole } from '../types/auto-group'
 import type { SampleGroup } from '../types'
 import type { FieldRecipeGroup, QcRoute, SmartGroupField } from './SmartGroupFieldRecipe.groups'
 import type { ManualSample } from './SmartGroupManual.cohorts'
@@ -28,23 +28,24 @@ export function roleLabel(role?: ColumnRole): string {
 /**
  * Columns worth offering as grouping toggles: factors and replicates, plus any
  * column already enabled in `groupBy` (so a manual group-by choice still shows).
- * Preserves the engine's column order.
+ * Preserves the engine's column order. `groupBy` is the schema's ORDERED layer
+ * list — entry N is hierarchy layer N of the composed group names.
  */
-export function candidateColumns(columns: ColumnInfo[], enabled: ReadonlySet<number>): ColumnInfo[] {
+export function candidateColumns(columns: ColumnInfo[], groupBy: readonly number[]): ColumnInfo[] {
+  const enabled = new Set(groupBy)
   return columns.filter(c => c.role === 'factor' || c.role === 'replicate' || enabled.has(c.index))
 }
 
-/** The candidate column indices in display order, so card index → engine column. */
-export function candidateColumnIndices(columns: ColumnInfo[], enabled: ReadonlySet<number>): number[] {
-  return candidateColumns(columns, enabled).map(c => c.index)
-}
-
-/** Map engine columns to Field Recipe cards + their on/off state (same order). */
+/**
+ * Map engine columns to Field Recipe cards + their on/off state (same order).
+ * `layers` aligns with the cards: the column's 1-based position in the
+ * `groupBy` layer order, or `null` when the column is not grouped by.
+ */
 export function engineFieldsToCards(
   columns: ColumnInfo[],
-  enabled: ReadonlySet<number>,
-): { fields: SmartGroupField[]; enabled: boolean[] } {
-  const candidates = candidateColumns(columns, enabled)
+  groupBy: readonly number[],
+): { fields: SmartGroupField[]; enabled: boolean[]; layers: (number | null)[] } {
+  const candidates = candidateColumns(columns, groupBy)
   return {
     fields: candidates.map(c => ({
       key: c.displayName ?? c.name,
@@ -52,7 +53,62 @@ export function engineFieldsToCards(
       vals: c.uniqueValues.join(', '),
       rep: c.role === 'replicate',
     })),
-    enabled: candidates.map(c => enabled.has(c.index)),
+    enabled: candidates.map(c => groupBy.includes(c.index)),
+    layers: candidates.map(c => {
+      const pos = groupBy.indexOf(c.index)
+      return pos === -1 ? null : pos + 1
+    }),
+  }
+}
+
+/**
+ * Build the batch-wide field recipe from every class schema. The active schema
+ * stays first for a stable card order; fields and enabled hierarchy layers that
+ * only exist in another token-length/class split are appended instead of being
+ * hidden from the controlled UI.
+ */
+export function engineSchemasToCards(
+  schemas: Record<string, ClassSchema>,
+  activeClassKey: string,
+): { fields: SmartGroupField[]; enabled: boolean[]; layers: (number | null)[] } {
+  const entries = Object.entries(schemas)
+  const active = entries.find(([key]) => key === activeClassKey)
+  const ordered = active
+    ? [active, ...entries.filter(([key]) => key !== activeClassKey)]
+    : entries
+  const candidates = new Map<string, ColumnInfo>()
+  const enabledOrder: string[] = []
+  const enabled = new Set<string>()
+
+  for (const [, schema] of ordered) {
+    for (const index of schema.groupBy) {
+      const column = schema.columns.find(candidate => candidate.index === index)
+      if (!column) continue
+      const identity = column.displayName ?? column.name
+      if (!enabled.has(identity)) {
+        enabled.add(identity)
+        enabledOrder.push(identity)
+      }
+    }
+    for (const column of candidateColumns(schema.columns, schema.groupBy)) {
+      const identity = column.displayName ?? column.name
+      if (!candidates.has(identity)) candidates.set(identity, column)
+    }
+  }
+
+  const cards = [...candidates.entries()]
+  return {
+    fields: cards.map(([key, column]) => ({
+      key,
+      role: roleLabel(column.role),
+      vals: column.uniqueValues.join(', '),
+      rep: column.role === 'replicate',
+    })),
+    enabled: cards.map(([key]) => enabled.has(key)),
+    layers: cards.map(([key]) => {
+      const position = enabledOrder.indexOf(key)
+      return position === -1 ? null : position + 1
+    }),
   }
 }
 

package/src/components/AutoGroupModal.story.vue

@@ -85,6 +85,70 @@ const mockDesignData = {
   extraction_results: [],
 }
 
+function wellId(index: number): string {
+  const row = String.fromCharCode(65 + Math.floor(index / 12))
+  return `${row}${(index % 12) + 1}`
+}
+
+const complexBiologicalConditions = ['Liver', 'Kidney'].flatMap(tissue =>
+  ['WT', 'KO'].flatMap(genotype =>
+    [
+      { treatment: 'Vehicle', dose: '0 uM' },
+      { treatment: 'Drug A', dose: '10 uM' },
+      { treatment: 'Drug A', dose: '50 uM' },
+    ].flatMap(arm =>
+      ['6 h', '24 h'].flatMap(timepoint =>
+        [1, 2].map(replicate => ({ tissue, genotype, ...arm, timepoint, replicate })),
+      ),
+    ),
+  ),
+)
+
+const complexBiologicalSamples = complexBiologicalConditions.map((condition, index) => {
+  const subject = `M${String(index + 1).padStart(3, '0')}`
+  const conditionIndex = Math.floor(index / 2)
+  const batch = `Batch ${String((conditionIndex % 3) + 1).padStart(2, '0')}`
+  const polarity = conditionIndex % 2 === 0 ? 'POS' : 'NEG'
+  const sampleName = [
+    condition.tissue,
+    condition.genotype,
+    condition.treatment.replaceAll(' ', ''),
+    condition.dose.replaceAll(' ', ''),
+    condition.timepoint.replaceAll(' ', ''),
+    subject,
+    `R${condition.replicate}`,
+    polarity,
+  ].join('_')
+
+  return {
+    plate_id: 'Plate 1',
+    well_id: wellId(index),
+    sample_name: sampleName,
+    sample_type: 'sample',
+    conditions: {
+      Tissue: condition.tissue,
+      Genotype: condition.genotype,
+      Treatment: condition.treatment,
+      Dose: condition.dose,
+      Timepoint: condition.timepoint,
+      Sex: conditionIndex % 2 === 0 ? 'Female' : 'Male',
+      Cohort: index < 24 ? 'Discovery' : 'Validation',
+      Batch: batch,
+      Polarity: polarity,
+    },
+  }
+})
+
+const complexDesignData = {
+  schema_version: '2.0',
+  study_name: 'Drug A multi-factor tissue response',
+  organism: 'Mus musculus',
+  platform: 'LC-MS',
+  samples: complexBiologicalSamples,
+  plates: [{ name: 'Plate 1', layout_type: '96-well' }],
+  extraction_results: [],
+}
+
 // Hyphen-delimited samples
 const hyphenSamples = [
   'WT-Vehicle-1', 'WT-Vehicle-2', 'WT-Vehicle-3',
@@ -310,6 +374,31 @@ function initState(samples: string[] = proteomicsSamples) {
       </template>
     </Variant>
 
+    <Variant title="Complex Experiment Metadata" :init-state="() => ({ isOpen: true, lastResult: null as AutoGroupResult | null })">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <button
+            type="button"
+            style="padding: 0.5rem 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem;"
+            @click="state.isOpen = true"
+          >
+            Re-open Modal
+          </button>
+          <div v-if="state.lastResult" style="margin-top: 1rem; font-size: 0.8125rem; color: var(--text-secondary, #64748b);">
+            <strong>Last result:</strong>
+            {{ state.lastResult.groups.length }} groups,
+            {{ state.lastResult.metadata.length }} samples,
+            {{ state.lastResult.excludedSamples.length }} excluded
+          </div>
+          <AutoGroupModal
+            v-model="state.isOpen"
+            :design-data="complexDesignData"
+            @apply="(r: AutoGroupResult) => { state.lastResult = r }"
+          />
+        </div>
+      </template>
+    </Variant>
+
     <Variant title="Empty (Manual Paste)">
       <div style="padding: 2rem;">
         <button

package/src/components/AutoGroupModal.vue

@@ -17,9 +17,8 @@ import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
 import { useApi } from '../composables/useApi'
 import { readFileAsText } from '../composables/useFileImport'
 import {
-  candidateColumnIndices,
-  engineFieldsToCards,
   engineGroupsToRail,
+  engineSchemasToCards,
   engineToQcRoute,
   manualSamplesToResult,
   qcRouteToEngine,
@@ -83,9 +82,10 @@ function setQcRouting(value: QcRouting) {
 }
 
 // ── Auto mode (Field Recipe) ─────────────────────────────────────────
-const fieldCards = computed(() => engineFieldsToCards(autoGroup.fields.value, autoGroup.enabledFields.value))
-const cardColumnIndices = computed(() =>
-  candidateColumnIndices(autoGroup.fields.value, autoGroup.enabledFields.value),
+// The recipe represents the whole batch, including fields that only exist in
+// another class or token-length schema split.
+const fieldCards = computed(() =>
+  engineSchemasToCards(autoGroup.schemas.value, autoGroup.activeClassKey.value),
 )
 const railGroups = computed(() =>
   engineGroupsToRail(autoGroup.result.value.experimentalGroups ?? autoGroup.groups.value),
@@ -103,10 +103,18 @@ const qcChip = computed(() =>
 const fieldRecipeRoute = computed<QcRoute>(() => engineToQcRoute(qcRouting.value))
 const headerCount = computed(() => autoGroup.samples.value.length)
 
+// The cards describe the batch, not one class, so edits fan out to every class
+// exposing the field — otherwise a multi-class batch (e.g. a Liver class and a
+// Kidney class) ends up with only half its groups reordered.
 function onToggleField(cardIndex: number) {
-  const columnIndex = cardColumnIndices.value[cardIndex]
-  if (columnIndex === undefined) return
-  autoGroup.toggleGroupBy(autoGroup.activeClassKey.value, columnIndex)
+  const field = fieldCards.value.fields[cardIndex]
+  if (!field) return
+  autoGroup.toggleGroupByField(field.key)
+}
+function onMoveField(cardIndex: number, direction: 'up' | 'down') {
+  const field = fieldCards.value.fields[cardIndex]
+  if (!field) return
+  autoGroup.moveGroupByField(field.key, direction)
 }
 function onRouteChange(route: QcRoute) {
   setQcRouting(qcRouteToEngine(route))
@@ -247,6 +255,7 @@ watch(
       v-if="activeWorkflow === 'auto'"
       :fields="fieldCards.fields"
       :enabled="fieldCards.enabled"
+      :layers="fieldCards.layers"
       :groups="railGroups"
       :qc-chip="qcChip"
       :route="fieldRecipeRoute"
@@ -256,6 +265,7 @@ watch(
       :loading="experimentLoading"
       experiment-label=""
       @toggle="onToggleField"
+      @move="onMoveField"
       @update:route="onRouteChange"
       @csv-file="onCsvFile"
       @download-template="onDownloadTemplate"

package/src/components/PluginIcon.story.vue

@@ -26,12 +26,12 @@ const SAMPLE_STRUCTURED = JSON.stringify({
 })
 // 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'
+const SAMPLE_HTTPS_SVG = 'https://vite.dev/logo.svg'
 
 function initState() {
   return reactive({
     icon: SAMPLE_PATH,
-    size: 'md' as 'sm' | 'md' | 'lg',
+    size: 'md' as 'sm' | 'md' | 'topbar' | 'lg',
     variant: 'solid' as 'solid' | 'tinted',
     tone: '',
   })
@@ -48,7 +48,7 @@ function initState() {
       </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.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>
@@ -58,6 +58,7 @@ function initState() {
       <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>
@@ -71,14 +72,14 @@ function initState() {
 
     <Variant title="Format showcase">
       <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
-        <PluginIcon :icon="SAMPLE_STRUCTURED" size="lg" variant="tinted" />
-        <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" />
+        <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 vector · SVG path · data URL (PNG) · https URL · empty (fallback)
+        Structured gradient · SVG path · data URL (PNG) · HTTPS SVG · empty (fallback)
       </p>
     </Variant>
 
@@ -86,6 +87,7 @@ function initState() {
       <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>

package/src/components/PluginIcon.vue

@@ -3,10 +3,10 @@
  *  - 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 → <img> with no-referrer + lazy loading
+ *  - https:// URL or root-relative static image/SVG asset → <img> with no-referrer + lazy loading
  *  - Anything else → MINT canonical plugin placeholder path
  *
- *  http:// URLs and data:image/svg+xml URLs are deliberately rejected
+ *  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'
@@ -15,7 +15,7 @@ defineOptions({ name: 'PluginIcon' })
 
 interface Props {
   icon?: string
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'sm' | 'md' | 'topbar' | 'lg'
   variant?: 'solid' | 'tinted'
   tone?: string
 }

package/src/components/PluginWorkspaceView.props.ts

@@ -59,17 +59,15 @@ export interface PluginWorkspaceViewProps {
   showNotifications?: boolean
   /** Draw a notification dot on the notifications icon. */
   hasNotificationDot?: boolean
-  /** Show the classic admin shortcut. */
+  /** Show the admin shortcut. */
   showAdmin?: boolean
-  /** Route used by the classic admin shortcut. */
+  /** Route used by the admin shortcut. */
   adminPath?: string
-  /** Show the classic profile button when accountMenu is not provided. */
-  showProfile?: boolean
-  /** Classic profile display name. */
+  /** Account display name. */
   userName?: string
-  /** Explicit classic profile initial. */
+  /** Explicit account avatar initial. */
   userInitial?: string
-  /** Classic profile email. */
+  /** Account email shown in the avatar menu. */
   userEmail?: string
   /** Enable the built-in AppTopBar experiment popover and selector flow. The current experiment comes from the shared experiment store, not from a prop. Keep this comment on one line — the docs extractor drops multi-line JSDoc. */
   experimentShell?: boolean