@morscherlab/mint-sdk 1.4.0-beta.11 → 1.4.0-beta.13

package/src/components/AppTopBar.story.vue

@@ -4,14 +4,26 @@ import Avatar from './Avatar.vue'
 import PluginIcon from './PluginIcon.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
 import { providePluginIdentity } from '../composables/pluginIdentity'
-import type { App } from 'vue'
+import { ref, type App } from 'vue'
 import type {
   TopBarVariant,
   PillNavItem,
   PageSelectorItem,
   PluginInfo,
+  TopBarJob,
 } from '../types'
 
+const runSlotJobs: { label: string; job: TopBarJob | null }[] = [
+  { label: 'Idle', job: null },
+  { label: 'Running', job: { status: 'running', label: 'Extracting', percent: 40 } },
+  { label: 'Needs input', job: { status: 'awaiting_input', label: 'Decoding', percent: 62 } },
+  { label: 'Saved', job: { status: 'completed', label: 'Saved to EXP-0142' } },
+  { label: 'Failed', job: { status: 'failed', label: '1 failed' } },
+]
+
+// An index, not the job object: Histoire merges object state across updates.
+const liveRow = ref(0)
+
 const variants: TopBarVariant[] = ['card', 'default']
 
 const samplePillNav: PillNavItem[] = [
@@ -43,10 +55,12 @@ const samplePageSelector: PageSelectorItem[] = [
   { id: 'admin', label: 'Admin' },
 ]
 
+// The menu shows each hint as a second line; a page without one stays a single line.
 const samplePluginPages: PageSelectorItem[] = [
-  { id: 'peaks', label: 'Peak integration' },
-  { id: 'calibration', label: 'Calibration' },
-  { id: 'report', label: 'Report' },
+  { id: 'peaks', label: 'Peak integration', hint: 'Integrate peaks and review the fits per sample' },
+  { id: 'calibration', label: 'Calibration', hint: 'Fit standard curves and check their residuals' },
+  { id: 'report', label: 'Report', hint: 'Export concentrations for the experiment' },
+  { id: 'settings', label: 'Settings' },
 ]
 
 const samplePlugin: PluginInfo = {
@@ -147,6 +161,47 @@ function seedIdentity({ app }: { app: App }) {
       </div>
     </Variant>
 
+    <Variant title="Run slot · Experiment and job">
+      <!-- The plugin picks the viewer's own job; the bar joins it to the experiment chip. Like LEAF Extract: no Save. -->
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            v-for="row in runSlotJobs"
+            :key="row.label"
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="row.job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Run slot · Animation">
+      <div style="padding: 2rem; background: var(--bg-primary); display: grid; gap: 0.75rem;">
+        <div style="display: flex; gap: 0.5rem;">
+          <button
+            v-for="(row, index) in runSlotJobs"
+            :key="row.label"
+            type="button"
+            data-run-slot-state
+            style="padding: 0.25rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer;"
+            @click="liveRow = index"
+          >
+            {{ row.label }}
+          </button>
+        </div>
+        <ExperimentProvider :plugin="samplePlugin" :save="false">
+          <AppTopBar
+            :spec="{ themeToggle: true, homePath: '' }"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
+            :job="runSlotJobs[liveRow].job"
+          />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
     <Variant title="Refresh · Admin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
         <AppTopBar

package/src/components/AppTopBar.vue

@@ -4,7 +4,7 @@
  *
  * The `#icon` slot applies in standalone mode only; integrated branding comes from `Metadata.icon`.
  */
-import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount, toValue, useSlots, watch } from 'vue'
+import { ref, computed, inject, defineAsyncComponent, onMounted, onBeforeUnmount, toValue, useSlots, watch, type Component } from 'vue'
 import type {
   PillNavOption,
   PillNavItem,
@@ -25,6 +25,9 @@ import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
 import { pluginIdentity } from '../composables/pluginIdentity'
 import { integrationHost } from '../utils/integrationHost'
 import { trackTopBarForToasts } from './AppTopBar.toastOffset'
+import { CircleAlert, CircleCheck, CircleX, ListChecks, LoaderCircle } from 'lucide-vue-next'
+import type { JobStatus, TopBarJob } from '../types/jobs'
+import type { Tone } from '../types/components'
 
 interface Props {
   /** App or plugin title shown in the left title group when no page selector is present. */
@@ -39,6 +42,11 @@ interface Props {
   pageSelector?: PageSelectorItemInput[]
   /** Active id of the platform page selector. */
   currentPageSelectorId?: string
+  /**
+   * The viewer's own job, joined to the experiment chip. Omit it for no jobs control;
+   * `null` shows the idle Jobs button. Both emit `job-click`.
+   */
+  job?: TopBarJob | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -66,6 +74,7 @@ const emit = defineEmits<{
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
   'settings-values-change': [data: Record<string, unknown>]
+  'job-click': []
 }>()
 
 const settingsOpen = ref(false)
@@ -79,6 +88,44 @@ const { integrated: isIntegrated, plugin } = usePlatform()
 const isStandalone = computed(() => !isIntegrated.value)
 const appExperiment = inject(APP_EXPERIMENT_KEY, null)
 const canBindExperiment = computed(() => plugin.value?.plugin_type !== 'static')
+const showExperiment = computed(() => !!appExperiment && !isStandalone.value && canBindExperiment.value)
+// The border joins only once the job is on screen and stays until it has left,
+// so the name and the job never show at the same time.
+const runSlotJoined = ref(!!props.job)
+const JOB_STATUS_TEXT: Record<JobStatus, string> = {
+  queued: 'Job queued',
+  running: 'Job running',
+  awaiting_input: 'Job needs input',
+  completed: 'Job completed',
+  failed: 'Job failed',
+  cancelled: 'Job cancelled',
+}
+const jobPercent = computed(() =>
+  props.job?.percent == null ? null : Math.min(100, Math.max(0, Math.round(props.job.percent))),
+)
+const jobName = computed(() => props.job
+  ? (jobPercent.value != null ? `${props.job.label} ${jobPercent.value}%` : props.job.label)
+  : undefined)
+function syncRunSlotJoined() {
+  runSlotJoined.value = !!props.job
+}
+
+const JOB_TONES: Record<JobStatus, Tone> = {
+  queued: 'primary',
+  running: 'primary',
+  awaiting_input: 'warning',
+  completed: 'success',
+  failed: 'error',
+  cancelled: 'neutral',
+}
+const JOB_ICONS: Record<JobStatus, Component> = {
+  queued: LoaderCircle,
+  running: LoaderCircle,
+  awaiting_input: CircleAlert,
+  completed: CircleCheck,
+  failed: CircleX,
+  cancelled: CircleX,
+}
 
 const slots = useSlots()
 // Standalone: the seeded identity (providePluginIdentity) stands in for a missing icon and title.
@@ -103,6 +150,10 @@ watch(platformPageSelectorEl, (element, _previous, onCleanup) => {
 const identityName = computed(() =>
   isIntegrated.value && !hasPageSelector.value ? plugin.value?.display_name || plugin.value?.name : undefined,
 )
+/** The page selector crumb reads "<plugin> / <page>". */
+const pageSelectorPluginName = computed(() =>
+  isIntegrated.value ? plugin.value?.display_name || plugin.value?.name : props.title || pluginIdentity.name,
+)
 // Platforms before 1.4 send no subtitle; the description fills line 2.
 const identitySubtitle = computed(() => plugin.value?.subtitle || plugin.value?.description)
 const hasPillNav = computed(() => !!config.value.pills?.length)
@@ -249,6 +300,7 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
           v-else-if="hasPropPageSelector"
           :pages="normalizedPageSelector"
           :current-page-id="currentPageSelectorId"
+          :plugin-name="pageSelectorPluginName"
           @select="emit('page-selector-select', $event)"
         >
           <template v-if="$slots['page-selector-icon']" #icon="slotProps">
@@ -290,13 +342,60 @@ const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
           {{ config.standaloneLabel }}
         </span>
 
-        <ExperimentPopover
-          v-if="appExperiment && !isStandalone && canBindExperiment"
-          v-bind="appExperiment.popover.value"
-          @select="appExperiment.openModal()"
-          @save="appExperiment.handleSave()"
-          @detach="appExperiment.handleDetach()"
-        />
+        <!-- Run slot: while a job shows, its progress takes the place of the experiment name and Save:
+             [ EXP-0142 ▾ | job ]. The idle Jobs button stands apart. -->
+        <div
+          v-if="showExperiment || job !== undefined || runSlotJoined"
+          :class="['mint-topbar__run-slot', { 'mint-topbar__run-slot--joined': runSlotJoined }]"
+        >
+          <ExperimentPopover
+            v-if="showExperiment && appExperiment"
+            v-bind="job ? { ...appExperiment.popover.value, showSave: false } : appExperiment.popover.value"
+            @select="appExperiment.openModal()"
+            @save="appExperiment.handleSave()"
+            @detach="appExperiment.handleDetach()"
+          />
+          <!-- Status words only, so a moving percent does not repeat. -->
+          <span class="mint-topbar__job-status" aria-live="polite">{{ job ? JOB_STATUS_TEXT[job.status] : '' }}</span>
+          <!-- appear: the slot can mount together with its first job; before-enter then joins it. -->
+          <Transition
+            name="mint-topbar-job"
+            mode="out-in"
+            appear
+            @before-enter="syncRunSlotJoined"
+            @after-leave="syncRunSlotJoined"
+          >
+            <button
+              v-if="job"
+              key="run"
+              type="button"
+              :class="['mint-topbar__job', `mint-topbar__job--${JOB_TONES[job.status]}`]"
+              :title="jobName"
+              :aria-label="jobName"
+              @click="emit('job-click')"
+            >
+              <component
+                :is="JOB_ICONS[job.status]"
+                :class="['mint-topbar__job-icon', { 'mint-topbar__job-icon--spin': job.status === 'running' || job.status === 'queued' }]"
+                :size="14"
+                aria-hidden="true"
+              />
+              <span v-if="jobPercent != null" class="mint-topbar__job-bar" aria-hidden="true">
+                <span :style="{ width: `${jobPercent}%` }" />
+              </span>
+            </button>
+            <button
+              v-else-if="job === null"
+              key="idle"
+              type="button"
+              class="mint-topbar__job mint-topbar__job--idle"
+              @click="emit('job-click')"
+            >
+              <ListChecks class="mint-topbar__job-icon" :size="14" aria-hidden="true" />
+              <span class="mint-topbar__job-label">Jobs</span>
+            </button>
+          </Transition>
+        </div>
 
         <slot name="actions" />
 

package/src/components/ExperimentSelectorModal.story.vue

@@ -268,6 +268,7 @@ onMounted(async () => {
 
 // -- Story state --
 const isOpen = ref(false)
+const isOpenRun = ref(false)
 const isOpenEmpty = ref(false)
 const isOpenWithSelection = ref(false)
 const isOpenFilters = ref(false)
@@ -363,6 +364,43 @@ const selectedExperiment = computed(() => experimentStore.current)
       </div>
     </Variant>
 
+    <Variant title="Run Destination (slots)">
+      <div style="padding: 2rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+          A plugin asks where to save a run: the description slot explains why, and the footer slot adds Skip with close().
+        </p>
+        <button
+          style="padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 0.875rem;"
+          @click="isOpenRun = true"
+        >
+          Run extraction
+        </button>
+
+        <ExperimentSelectorModal
+          v-model:open="isOpenRun"
+          title="Save the result to an experiment?"
+        >
+          <template #description>
+            Pick an experiment to save this run as a new artifact in it, next to the samples it belongs to.
+          </template>
+          <template #footer="{ close }">
+            <div style="display: flex; align-items: center; gap: 0.75rem;">
+              <span style="flex: 1; font-size: 0.75rem; color: var(--text-secondary);">
+                Skip: the result stays in the plugin. You can save it to an experiment later.
+              </span>
+              <button
+                type="button"
+                style="height: 2rem; padding: 0 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); cursor: pointer;"
+                @click="close"
+              >
+                Skip
+              </button>
+            </div>
+          </template>
+        </ExperimentSelectorModal>
+      </div>
+    </Variant>
+
     <Variant title="Empty State">
       <div style="padding: 2rem;">
         <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">

package/src/components/ExperimentSelectorModal.vue

@@ -40,6 +40,17 @@ const emit = defineEmits<{
   'update:open': [value: boolean]
 }>()
 
+defineSlots<{
+  /** Text above the experiment list: why the caller asks for an experiment. */
+  description?: () => unknown
+  /** Extra footer content, before Clear selection. `close()` closes the modal without a selection. */
+  footer?: (props: { close: () => void }) => unknown
+}>()
+
+function close() {
+  emit('update:open', false)
+}
+
 const experimentStore = useExperimentStore()
 
 const {
@@ -188,6 +199,10 @@ watch(
     :size="size"
     @update:open="emit('update:open', $event)"
   >
+    <div v-if="$slots.description" class="mint-experiment-selector__description">
+      <slot name="description" />
+    </div>
+
     <ResourcePickerListInternal
       :key="openCount"
       :search="filters.search ?? ''"
@@ -257,8 +272,12 @@ watch(
       </template>
     </ResourcePickerListInternal>
 
-    <div v-if="currentExperimentId != null" class="mint-experiment-selector__footer">
+    <div v-if="$slots.footer || currentExperimentId != null" class="mint-experiment-selector__footer">
+      <div v-if="$slots.footer" class="mint-experiment-selector__footer-slot">
+        <slot name="footer" :close="close" />
+      </div>
       <button
+        v-if="currentExperimentId != null"
         type="button"
         class="mint-experiment-selector__clear-btn"
         @click="handleDeselect"

package/src/components/SettingsModal.vue

@@ -358,13 +358,8 @@ const themeOptions: { value: ThemeMode; label: string; halves: ('light' | 'dark'
   { value: 'system', label: 'System', halves: ['light', 'dark'] },
 ]
 
-/** Five stops along the palette's primary → accent hue arc (shortest way round), as in the board. */
-function paletteSwatches(key: ColorPalette): string[] {
-  const [from, to] = colorPalettes[key].hues
-  const span = ((to - from + 540) % 360) - 180
-  const tone = key === 'pastel' ? '60% 72%' : '65% 48%'
-  return Array.from({ length: 5 }, (_, i) => `hsl(${Math.round(from + (span * i) / 4)} ${tone})`)
-}
+/** Accent tokens a palette swatch shows; `data-palette` on the strip resolves them per palette. */
+const paletteSwatchTokens = ['--color-primary', '--color-primary-hover', '--color-primary-soft', '--color-primary-border']
 
 const densityPreviewRows = [
   ['S-0012', '2.41', '12.5'],
@@ -562,7 +557,7 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
         <div class="mint-settings-modal__setting">
           <div class="mint-settings-modal__setting-text">
             <span class="mint-settings-modal__setting-label">Color palette</span>
-            <span class="mint-settings-modal__setting-hint">Primary and accent hues across the interface</span>
+            <span class="mint-settings-modal__setting-hint">Accent colour across the interface</span>
           </div>
           <div class="mint-settings-modal__palettes">
             <button
@@ -573,12 +568,12 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
               :class="['mint-settings-modal__palette', { 'mint-settings-modal__palette--active': settings.colorPalette === key }]"
               @click="settings.colorPalette = key as ColorPalette"
             >
-              <span class="mint-settings-modal__swatches" aria-hidden="true">
+              <span class="mint-settings-modal__swatches" :data-palette="key" aria-hidden="true">
                 <span
-                  v-for="color in paletteSwatches(key as ColorPalette)"
-                  :key="color"
+                  v-for="token in paletteSwatchTokens"
+                  :key="token"
                   class="mint-settings-modal__swatch"
-                  :style="{ backgroundColor: color }"
+                  :style="{ backgroundColor: `var(${token})` }"
                 />
               </span>
               <span class="mint-settings-modal__palette-name">{{ palette.name }}</span>

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-/** Dropdown trigger that switches between named pages, closing on outside click or Escape. */
-import { computed, useTemplateRef } from 'vue'
+/** "Plugin / page" switcher: the plugin name, then a trigger that opens the page menu (hints, number keys 1-9). */
+import { computed, nextTick, useTemplateRef } from 'vue'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useMenuKeyboard } from '../../composables/useMenuKeyboard'
 import type { PageSelectorItem, PageSelectorItemInput } from '../../types/components'
 import { normalizeItemInput } from '../../utils/items'
 import { isPluginIconFormat } from '../../utils/pluginIcon'
@@ -13,27 +14,74 @@ interface Props {
   currentPageId?: string
   placeholder?: string
   minWidth?: string
+  /** Plugin name shown before the trigger and in the menu title. */
+  pluginName?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Go to…',
-  minWidth: '11.25rem',
 })
 
 const emit = defineEmits<{
   select: [page: PageSelectorItem]
 }>()
 
-const { isOpen, close, toggle } = useDropdownState({
+const triggerEl = useTemplateRef<HTMLElement>('trigger')
+const menuEl = useTemplateRef<HTMLElement>('menu')
+const { isOpen, open, close, toggle } = useDropdownState({
   rootRef: useTemplateRef<HTMLElement>('root'),
-  triggerRef: useTemplateRef<HTMLElement>('trigger'),
+  triggerRef: triggerEl,
 })
 const normalizedPages = computed<PageSelectorItem[]>(() => props.pages.map(normalizeItemInput))
+const menuTitle = computed(() => (props.pluginName ? `${props.pluginName} pages` : 'Pages'))
 
 const current = computed<PageSelectorItem | undefined>(() =>
   normalizedPages.value.find((p) => p.id === props.currentPageId) ?? normalizedPages.value[0],
 )
 
+const rows = () => Array.from(menuEl.value?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])
+const isEnabled = (row: HTMLElement) => !row.hasAttribute('disabled') && row.getAttribute('aria-disabled') !== 'true'
+const enabledRows = () => rows().filter(isEnabled)
+
+const { handlePanelKeydown } = useMenuKeyboard({
+  items: enabledRows,
+  isOpen: () => isOpen.value,
+  open,
+  close,
+})
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (isOpen.value || !['ArrowDown', 'Enter', ' '].includes(event.key)) return
+  event.preventDefault()
+  open()
+  void nextTick(() => {
+    const items = enabledRows()
+    ;(items.find((row) => row.getAttribute('aria-current') === 'page') ?? items[0])?.focus()
+  })
+}
+
+// A click routes through ActionItemInternal, so links, router links and disabled rows act as on a pointer click.
+function activate(row: HTMLElement) {
+  row.click()
+  if (!isOpen.value) triggerEl.value?.focus()
+}
+
+function handleMenuKeydown(event: KeyboardEvent) {
+  if (/^[1-9]$/.test(event.key)) {
+    event.preventDefault()
+    const row = rows()[Number(event.key) - 1]
+    if (row && isEnabled(row)) activate(row)
+    return
+  }
+  const focused = document.activeElement as HTMLElement | null
+  if ((event.key === 'Enter' || event.key === ' ') && focused && enabledRows().includes(focused)) {
+    event.preventDefault()
+    activate(focused)
+    return
+  }
+  handlePanelKeydown(event)
+}
+
 function handleSelect(page: PageSelectorItem) {
   if (page.disabled) return
   if (page.href || page.to) {
@@ -46,82 +94,102 @@ function handleSelect(page: PageSelectorItem) {
 </script>
 
 <template>
-  <div ref="root" class="mint-page-selector" :style="{ minWidth }">
-    <button
-      ref="trigger"
-      type="button"
-      class="mint-page-selector__trigger"
-      :class="{ 'mint-page-selector__trigger--open': isOpen }"
-      :aria-expanded="isOpen"
-      aria-haspopup="menu"
-      @click.stop="toggle"
-    >
-      <span
-        v-if="current"
-        class="mint-page-selector__icon"
-        :class="{ 'mint-page-selector__icon--metadata': isPluginIconFormat(current.icon) }"
-      >
-        <slot name="icon" :page="current">
-          <PluginIcon
-            v-if="isPluginIconFormat(current.icon)"
-            class="mint-page-selector__trigger-metadata-icon"
-            :icon="current.icon"
-            size="sm"
-            variant="solid"
-          />
-          <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
-        </slot>
-      </span>
-      <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
-      <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
-        <svg
-          class="mint-page-selector__chevron"
-          :class="{ 'mint-page-selector__chevron--open': isOpen }"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </span>
-    </button>
-
-    <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
-      <div class="mint-page-selector__menu-title">Go to</div>
-      <ActionItemInternal
-        v-for="page in normalizedPages"
-        :key="page.id"
-        :href="page.href"
-        :to="page.to"
-        :disabled="page.disabled"
-        :class="[
-          'mint-page-selector__item',
-          { 'mint-page-selector__item--active': page.id === current?.id },
-          { 'mint-page-selector__item--disabled': page.disabled },
-        ]"
-        role="menuitem"
-        @click="handleSelect(page)"
+  <div ref="root" class="mint-page-selector__crumb">
+    <template v-if="pluginName">
+      <span class="mint-page-selector__plugin">{{ pluginName }}</span>
+      <span class="mint-page-selector__slash" aria-hidden="true">/</span>
+    </template>
+    <div class="mint-page-selector" :style="minWidth ? { minWidth } : undefined">
+      <button
+        ref="trigger"
+        type="button"
+        class="mint-page-selector__trigger"
+        :class="{ 'mint-page-selector__trigger--open': isOpen }"
+        :aria-expanded="isOpen"
+        aria-haspopup="menu"
+        @click.stop="toggle"
+        @keydown="handleTriggerKeydown"
       >
         <span
-          class="mint-page-selector__item-icon"
-          :class="{ 'mint-page-selector__item-icon--metadata': isPluginIconFormat(page.icon) }"
+          v-if="current"
+          class="mint-page-selector__icon"
+          :class="{ 'mint-page-selector__icon--metadata': isPluginIconFormat(current.icon) }"
         >
-          <slot name="item-icon" :page="page">
+          <slot name="icon" :page="current">
             <PluginIcon
-              v-if="isPluginIconFormat(page.icon)"
-              class="mint-page-selector__metadata-icon"
-              :icon="page.icon"
+              v-if="isPluginIconFormat(current.icon)"
+              class="mint-page-selector__trigger-metadata-icon"
+              :icon="current.icon"
               size="sm"
               variant="solid"
             />
-            <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
           </slot>
         </span>
-        <span class="mint-page-selector__item-label">{{ page.label }}</span>
-      </ActionItemInternal>
+        <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
+        <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
+          <svg
+            class="mint-page-selector__chevron"
+            :class="{ 'mint-page-selector__chevron--open': isOpen }"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </span>
+      </button>
+
+      <div
+        v-if="isOpen"
+        ref="menu"
+        class="mint-page-selector__menu"
+        role="menu"
+        :aria-label="menuTitle"
+        @keydown="handleMenuKeydown"
+      >
+        <div class="mint-page-selector__menu-title" aria-hidden="true">{{ menuTitle }}</div>
+        <ActionItemInternal
+          v-for="(page, index) in normalizedPages"
+          :key="page.id"
+          :href="page.href"
+          :to="page.to"
+          :disabled="page.disabled"
+          :class="[
+            'mint-page-selector__item',
+            { 'mint-page-selector__item--active': page.id === current?.id },
+            { 'mint-page-selector__item--disabled': page.disabled },
+          ]"
+          role="menuitem"
+          :aria-current="page.id === current?.id ? 'page' : undefined"
+          :aria-keyshortcuts="index < 9 ? String(index + 1) : undefined"
+          @click="handleSelect(page)"
+        >
+          <span
+            class="mint-page-selector__item-icon"
+            :class="{ 'mint-page-selector__item-icon--metadata': isPluginIconFormat(page.icon) }"
+          >
+            <slot name="item-icon" :page="page">
+              <PluginIcon
+                v-if="isPluginIconFormat(page.icon)"
+                class="mint-page-selector__metadata-icon"
+                :icon="page.icon"
+                size="sm"
+                variant="solid"
+              />
+              <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+            </slot>
+          </span>
+          <span class="mint-page-selector__item-text">
+            <span class="mint-page-selector__item-label">{{ page.label }}</span>
+            <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
+          </span>
+          <span v-if="index < 9" class="mint-page-selector__item-key" aria-hidden="true">{{ index + 1 }}</span>
+        </ActionItemInternal>
+      </div>
     </div>
   </div>
 </template>

package/src/stores/index.ts

@@ -3,9 +3,7 @@ export {
   useSettingsStore,
   tryUseSettingsStore,
   colorPalettes,
-  paletteCssVariables,
   tableDensityToSize,
-  PALETTE_CSS_VARIABLES,
   type SettingsState,
 } from './settings'
 export { useExperimentStore } from './experiment'