@morscherlab/mint-sdk 1.0.0 → 1.0.1

package/dist/utils/pluginIcon.d.ts

@@ -1,7 +1,34 @@
-export type PluginIconFormat = 'path' | 'data-url' | 'https-url' | 'fallback';
+export type PluginIconFormat = 'path' | 'data-url' | 'https-url' | 'structured' | 'fallback';
+export interface StructuredPluginIconStop {
+    offset: string;
+    color: string;
+    opacity?: number;
+}
+export interface StructuredPluginIconBackground {
+    fill: string;
+    radius: number;
+}
+export interface StructuredPluginIconPath {
+    d: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+}
+export interface StructuredPluginIcon {
+    type: 'mint-icon';
+    viewBox: string;
+    background?: StructuredPluginIconBackground;
+    gradient?: {
+        type: 'linear';
+        angle: number;
+        stops: StructuredPluginIconStop[];
+    };
+    paths: StructuredPluginIconPath[];
+}
 export interface DetectedPluginIcon {
     format: PluginIconFormat;
-    value: string;
+    value: string | StructuredPluginIcon;
 }
 export declare const PLUGIN_ICON_FALLBACK_PATH = "M14 7v4a1 1 0 0 0 1 1h4M5 3h9l5 5v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z";
 export declare function normalizePluginIconSource(icon?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,6 +31,10 @@
       "types": "./dist/stores/index.d.ts",
       "import": "./dist/stores/index.js"
     },
+    "./permissions": {
+      "types": "./dist/permissions.d.ts",
+      "import": "./dist/permissions.js"
+    },
     "./templates": {
       "types": "./dist/templates/index.d.ts",
       "import": "./dist/templates/index.js"

package/src/__tests__/components/DataFrame.test.ts

@@ -509,6 +509,43 @@ describe('DataFrame', () => {
       expect(column.key).toBe('name')
       expect(row.name).toBe('Alice')
     })
+
+    it('should emit row-click from cell clicks when clickableRows is true', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, clickableRows: true },
+      })
+      const firstCell = wrapper.find('.mint-dataframe__td')
+      await firstCell.trigger('click')
+
+      expect(wrapper.emitted('cell-click')).toHaveLength(1)
+      expect(wrapper.emitted('row-click')).toHaveLength(1)
+      const [row, index] = wrapper.emitted('row-click')?.[0] as [Record<string, unknown>, number]
+      expect(row.name).toBe('Alice')
+      expect(index).toBe(0)
+    })
+
+    it('should make clickable rows keyboard accessible', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, clickableRows: true },
+      })
+      const firstRow = wrapper.find('.mint-dataframe__row')
+      expect(firstRow.attributes('tabindex')).toBe('0')
+      expect(firstRow.attributes('role')).toBe('button')
+
+      await firstRow.trigger('keydown', { key: 'Enter' })
+      await firstRow.trigger('keydown', { key: ' ' })
+
+      expect(wrapper.emitted('row-click')).toHaveLength(2)
+    })
+
+    it('should keep non-clickable rows out of the tab order', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns },
+      })
+      const firstRow = wrapper.find('.mint-dataframe__row')
+      expect(firstRow.attributes('tabindex')).toBeUndefined()
+      expect(firstRow.attributes('role')).toBeUndefined()
+    })
   })
 
   describe('empty state', () => {

package/src/__tests__/components/PluginIcon.test.ts

@@ -1,9 +1,30 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import PluginIcon from '../../components/PluginIcon.vue'
+import { PLUGIN_ICON_FALLBACK_PATH } from '../../utils/pluginIcon'
 
 const SAMPLE_PATH = 'M13 10V3L4 14h7v7l9-11h-7z'
 const SAMPLE_HTTPS_URL = 'https://example.com/icon.png'
+const SAMPLE_STRUCTURED_ICON = 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 10z',
+      fill: 'white',
+      opacity: 0.95,
+    },
+  ],
+})
 
 describe('PluginIcon', () => {
   describe('format detection', () => {
@@ -15,6 +36,62 @@ describe('PluginIcon', () => {
       expect(wrapper.find('img').exists()).toBe(false)
     })
 
+    it('should render structured gradient vector icons without an image tag', () => {
+      const wrapper = mount(PluginIcon, { props: { icon: SAMPLE_STRUCTURED_ICON } })
+      const svg = wrapper.find('svg.mint-plugin-icon__svg--structured')
+      const rect = wrapper.find('rect')
+      const stops = wrapper.findAll('stop')
+      const path = wrapper.find('path')
+
+      expect(svg.exists()).toBe(true)
+      expect(svg.attributes('viewBox')).toBe('0 0 24 24')
+      expect(rect.attributes('fill')).toMatch(/^url\(#mint-plugin-icon-gradient-/)
+      expect(rect.attributes('rx')).toBe('5')
+      expect(stops).toHaveLength(2)
+      expect(stops[0].attributes('stop-color')).toBe('#AAECBF')
+      expect(stops[1].attributes('stop-color')).toBe('#14A1A9')
+      expect(path.attributes('fill')).toBe('white')
+      expect(wrapper.find('img').exists()).toBe(false)
+    })
+
+    it('should reject structured icons without paths as fallback', () => {
+      const icon = JSON.stringify({
+        type: 'mint-icon',
+        background: { fill: '#14A1A9', radius: 5 },
+        paths: [],
+      })
+      const wrapper = mount(PluginIcon, { props: { icon } })
+      expect(wrapper.find('svg path').attributes('d')).toBe(PLUGIN_ICON_FALLBACK_PATH)
+      expect(wrapper.find('.mint-plugin-icon__svg--structured').exists()).toBe(false)
+    })
+
+    it('should accept structured gradient shorthand with from and to colors', () => {
+      const icon = JSON.stringify({
+        type: 'mint-icon',
+        gradient: { type: 'linear', from: '#AAECBF', to: '#14A1A9' },
+        background: { fill: 'gradient' },
+        paths: [{ d: SAMPLE_PATH, fill: 'white' }],
+      })
+      const wrapper = mount(PluginIcon, { props: { icon } })
+      const stops = wrapper.findAll('stop')
+      expect(stops).toHaveLength(2)
+      expect(stops[0].attributes('stop-color')).toBe('#AAECBF')
+      expect(stops[1].attributes('stop-color')).toBe('#14A1A9')
+    })
+
+    it('should ignore unsafe structured icon colors and still render safe paths', () => {
+      const icon = JSON.stringify({
+        type: 'mint-icon',
+        background: { fill: 'url(javascript:alert(1))', radius: 5 },
+        paths: [{ d: SAMPLE_PATH, fill: 'javascript:alert(1)', stroke: '#14A1A9' }],
+      })
+      const wrapper = mount(PluginIcon, { props: { icon } })
+      const path = wrapper.find('path')
+      expect(wrapper.find('rect').exists()).toBe(false)
+      expect(path.attributes('fill')).toBe('none')
+      expect(path.attributes('stroke')).toBe('#14A1A9')
+    })
+
     it('should render SVG path when icon starts with lowercase m and a space', () => {
       const wrapper = mount(PluginIcon, { props: { icon: 'm 5,5 l 10,10' } })
       const path = wrapper.find('svg path')

package/src/__tests__/composables/usePluginClient.test.ts

@@ -356,7 +356,7 @@ describe('usePluginClient', () => {
     expect(requestConfigs).toHaveLength(0)
   })
 
-  it('provides a dashboard page selector fallback when contract nav items are absent', () => {
+  it('does not synthesize page selector items when contract nav items are absent', () => {
     expect(getPluginPageSelectorItems({
       ...contract,
       plugin: {
@@ -366,15 +366,16 @@ describe('usePluginClient', () => {
         icon: 'PLUGIN_ICON',
         navItems: [],
       },
-    })).toEqual([
-      {
-        id: 'dashboard',
-        label: 'Dose Designer',
-        to: '/',
-        icon: 'PLUGIN_ICON',
-        hint: 'Build dose designs',
-      },
-    ])
+    })).toEqual([])
+    expect(requestConfigs).toHaveLength(0)
+  })
+
+  it('does not synthesize page selector items when contract nav items are omitted', () => {
+    const { navItems: _navItems, ...pluginWithoutNavItems } = contract.plugin
+    expect(getPluginPageSelectorItems({
+      ...contract,
+      plugin: pluginWithoutNavItems,
+    })).toEqual([])
     expect(requestConfigs).toHaveLength(0)
   })
 

package/src/components/AppTopBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Full application top bar with brand logo, page selector or plugin switcher, centered pill nav, experiment popover, and avatar menu. */
-import { ref, computed, inject } from 'vue'
+import { ref, computed, inject, defineAsyncComponent } from 'vue'
 import type {
   PillNavOption,
   TopBarSettingsConfig,
@@ -16,9 +16,6 @@ import type {
 } from '../types/components'
 import { normalizeItemInput } from '../utils/items'
 import ThemeToggle from './ThemeToggle.vue'
-import SettingsModal from './SettingsModal.vue'
-import ExperimentPopover from './ExperimentPopover.vue'
-import ExperimentSelectorModal from './ExperimentSelectorModal.vue'
 import AppTopBarPageSelectorInternal from './internal/AppTopBarPageSelectorInternal.vue'
 import AppTopBarPillNavInternal from './internal/AppTopBarPillNavInternal.vue'
 import AppAvatarMenu from './AppAvatarMenu.vue'
@@ -101,6 +98,10 @@ const props = withDefaults(defineProps<Props>(), {
   hasNotificationDot: false,
 })
 
+const SettingsModal = defineAsyncComponent(() => import('./SettingsModal.vue'))
+const ExperimentPopover = defineAsyncComponent(() => import('./ExperimentPopover.vue'))
+const ExperimentSelectorModal = defineAsyncComponent(() => import('./ExperimentSelectorModal.vue'))
+
 const emit = defineEmits<{
   'profile-click': []
   'admin-click': []
@@ -411,7 +412,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
   </header>
 
   <SettingsModal
-    v-if="showSettings"
+    v-if="showSettings && settingsOpen"
     v-model="settingsOpen"
     :title="settingsConfig?.title"
     :tabs="normalizedSettingsTabs"
@@ -436,7 +437,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
   </SettingsModal>
 
   <ExperimentSelectorModal
-    v-if="appExperiment && !isStandalone"
+    v-if="appExperiment && !isStandalone && appExperiment.selectorModal.value.modelValue"
     v-bind="appExperiment.selectorModal.value"
     @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
     @select="appExperiment.handleSelect($event)"

package/src/components/DataFrame.vue

@@ -60,6 +60,8 @@ interface Props {
   selectable?: boolean
   /** Currently selected row keys */
   selectedKeys?: (string | number)[]
+  /** Make each body row act as a click/keyboard target. */
+  clickableRows?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -75,6 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
   searchPlaceholder: 'Search...',
   selectable: false,
   selectedKeys: () => [],
+  clickableRows: false,
 })
 
 /**
@@ -181,6 +184,24 @@ function handlePageChange(page: number) {
   emit('update:pagination', { ...props.pagination, page })
 }
 
+function handleRowClick(row: Record<string, unknown>, index: number) {
+  emit('row-click', row, index)
+}
+
+function handleRowKeydown(event: KeyboardEvent, row: Record<string, unknown>, index: number) {
+  if (!props.clickableRows) return
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  handleRowClick(row, index)
+}
+
+function handleCellClick(row: Record<string, unknown>, col: DataFrameColumn, index: number) {
+  emit('cell-click', getCellValue(row, col.key), col, row)
+  if (props.clickableRows) {
+    handleRowClick(row, index)
+  }
+}
+
 function isColumnSortable(col: DataFrameColumn): boolean {
   return col.sortable === true || (props.sortable && col.sortable !== false)
 }
@@ -310,9 +331,13 @@ const wrapperStyle = computed(() => {
               {
                 'mint-dataframe__row--striped': striped && rowIndex % 2 === 1,
                 'mint-dataframe__row--selected': rowSelection.isSelected(getRowKey(row, rowIndex)),
+                'mint-dataframe__row--clickable': clickableRows,
               },
             ]"
-            @click="emit('row-click', row, rowIndex)"
+            :tabindex="clickableRows ? 0 : undefined"
+            :role="clickableRows ? 'button' : undefined"
+            @click="handleRowClick(row, rowIndex)"
+            @keydown="handleRowKeydown($event, row, rowIndex)"
           >
             <td v-if="selectable" class="mint-dataframe__td mint-dataframe__td--checkbox">
               <input
@@ -332,7 +357,7 @@ const wrapperStyle = computed(() => {
                 `mint-dataframe__td--align-${col.align ?? 'left'}`,
                 { 'mint-dataframe__td--ellipsis': col.ellipsis },
               ]"
-              @click.stop="emit('cell-click', getCellValue(row, col.key), col, row)"
+              @click.stop="handleCellClick(row, col, rowIndex)"
             >
               <slot :name="`cell-${col.key}`" :value="getCellValue(row, col.key)" :row="row" :column="col" :index="rowIndex">
                 {{ formatCell(col, row, rowIndex) }}

package/src/components/ExperimentDataViewer.vue

@@ -22,12 +22,14 @@ interface Props {
   loading?: boolean
   downloadJsonUrl?: string
   downloadCsvUrl?: string
+  autoFetch?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   title: 'Data',
   defaultView: 'summary',
   loading: false,
+  autoFetch: true,
 })
 
 // Auto-fetch when experimentId is provided and no prop data is given
@@ -39,7 +41,7 @@ const hasPropData = computed(() =>
 watch(
   () => props.experimentId,
   (id) => {
-    if (id && !hasPropData.value) {
+    if (props.autoFetch && id && !hasPropData.value) {
       expData.fetch(id)
     }
   },
@@ -158,6 +160,7 @@ function handleDownloadCsv() {
           Open in {{ pluginName || 'Plugin' }}
         </BaseButton>
         <BaseButton
+          v-if="downloadJsonUrl"
           variant="ghost"
           size="sm"
           @click="handleDownloadJson"
@@ -165,6 +168,7 @@ function handleDownloadCsv() {
           JSON
         </BaseButton>
         <BaseButton
+          v-if="downloadCsvUrl"
           variant="ghost"
           size="sm"
           @click="handleDownloadCsv"

package/src/components/PluginIcon.story.vue

@@ -3,6 +3,27 @@ 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 = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Vue.js_Logo_2.svg/64px-Vue.js_Logo_2.svg.png'
@@ -50,16 +71,25 @@ 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" />
       </div>
       <p style="padding: 0 2rem; color: var(--text-muted); font-size: 0.875rem;">
-        SVG path · data URL (PNG) · https URL · empty (fallback)
+        Structured vector · SVG path · data URL (PNG) · https URL · 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="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" />

package/src/components/PluginIcon.vue

@@ -1,5 +1,6 @@
 <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 → <img> with no-referrer + lazy loading
@@ -8,7 +9,7 @@
  *  http:// URLs and data:image/svg+xml URLs are deliberately rejected
  *  (mixed-content + XSS, see spec 2026-05-04-plugin-icon-component-design.md). */
 import { computed } from 'vue'
-import { detectPluginIcon, type DetectedPluginIcon } from '../utils/pluginIcon'
+import { detectPluginIcon, type DetectedPluginIcon, type StructuredPluginIcon } from '../utils/pluginIcon'
 
 defineOptions({ name: 'PluginIcon' })
 
@@ -25,6 +26,51 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 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',
@@ -40,7 +86,51 @@ const rootStyle = computed(() =>
 <template>
   <span :class="rootClasses" :style="rootStyle">
     <svg
-      v-if="detected.format === 'path' || detected.format === 'fallback'"
+      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"
@@ -50,12 +140,12 @@ const rootStyle = computed(() =>
       stroke-linejoin="round"
       aria-hidden="true"
     >
-      <path :d="detected.value" />
+      <path :d="iconValue" />
     </svg>
     <img
       v-else
       class="mint-plugin-icon__img"
-      :src="detected.value"
+      :src="iconValue"
       alt=""
       referrerpolicy="no-referrer"
       loading="lazy"

package/src/composables/usePluginClient.ts

@@ -63,6 +63,7 @@ export interface PluginContract {
     icon?: string
     color?: string
     navItems?: PluginNavItemContract[]
+    analysisResultReaders?: string[]
     capabilities?: Record<string, unknown>
   }
   endpoints: PluginEndpointContract[]
@@ -230,21 +231,11 @@ function pluginPageIdFromPath(path: string, fallbackIndex: number): string {
   return normalizedPath.replace(/^\/+/, '').replace(/\/+/g, '-') || `page-${fallbackIndex + 1}`
 }
 
-/** Convert PluginMetadata.nav_items into AppTopBar pageSelector items for topbar page switches, homepage PluginCards, and fallback views. */
+/** Convert PluginMetadata.nav_items into AppTopBar pageSelector items for topbar page switches and homepage PluginCards. */
 export function getPluginPageSelectorItems(contract: PluginContract): PageSelectorItem[] {
   const pluginIcon = contract.plugin.icon ?? ''
   const navItems = contract.plugin.navItems ?? []
-  const source: PluginNavItemContract[] = navItems.length > 0
-    ? navItems
-    : [{
-        path: '/',
-        label: contract.plugin.name ?? 'Dashboard',
-        id: 'dashboard',
-        icon: pluginIcon || undefined,
-        description: contract.plugin.description,
-      }]
-
-  return source.map((item, index) => ({
+  return navItems.map((item, index) => ({
     id: item.id || pluginPageIdFromPath(item.path, index),
     label: item.label,
     to: normalizePluginNavPath(item.path),

package/src/styles/components/dataframe.css

@@ -192,6 +192,7 @@
   border-right: none !important;
   border-bottom: 1px solid var(--border-color) !important;
   background: transparent !important;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
 }
 
 .mint-dataframe__td--sm {
@@ -248,6 +249,31 @@
   background-color: var(--bg-hover);
 }
 
+.mint-dataframe__row--clickable {
+  cursor: pointer;
+}
+
+.mint-dataframe__row--clickable:hover > .mint-dataframe__td,
+.mint-dataframe__row--clickable:focus-visible > .mint-dataframe__td {
+  background: var(--color-primary-soft) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(99, 102, 241, 0.18),
+    inset 0 -1px 0 rgba(99, 102, 241, 0.18);
+}
+
+.mint-dataframe__row--clickable:hover > .mint-dataframe__td:first-child,
+.mint-dataframe__row--clickable:focus-visible > .mint-dataframe__td:first-child {
+  box-shadow:
+    inset 3px 0 0 var(--color-primary),
+    inset 0 1px 0 rgba(99, 102, 241, 0.18),
+    inset 0 -1px 0 rgba(99, 102, 241, 0.18);
+}
+
+.mint-dataframe__row--clickable:focus-visible {
+  outline: 2px solid var(--focus-ring-color, var(--color-primary));
+  outline-offset: -2px;
+}
+
 .mint-dataframe__row--striped {
   background-color: var(--bg-tertiary);
 }

package/src/styles/components/plugin-icon.css

@@ -36,3 +36,8 @@
 .mint-plugin-icon__img {
   object-fit: contain;
 }
+
+.mint-plugin-icon .mint-plugin-icon__svg--structured {
+  width: 100%;
+  height: 100%;
+}