@morscherlab/mint-sdk 1.4.0-beta.9 → 1.4.0

package/dist/{useRequest-D506eHi8.js → useRequest-BuDmW8Jc.js}

@@ -1,9 +1,8 @@
-import { a as BaseButton_default, t as useDropdownState } from "./useDropdownState-8yWMu-7_.js";
-import { r as readErrorMessage } from "./experiment-43OJtH7R.js";
-import { E as useMenuKeyboard } from "./records-B6gpM_3e.js";
-import { Fragment, Teleport, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch } from "vue";
+import { a as BaseButton_default, t as useDropdownState } from "./useDropdownState-uFIz6Yv8.js";
+import { r as readErrorMessage } from "./experiment-DyO54FQB.js";
+import { E as useMenuKeyboard, W as useFloatingPanel } from "./records-D4aQXyZu.js";
+import { Fragment, Teleport, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref } from "vue";
 import { Check, Ellipsis } from "lucide-vue-next";
-import { computePosition, flip, offset, shift } from "@floating-ui/dom";
 //#region src/components/ActionMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -44,16 +43,12 @@ var ActionMenu_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const panelRef = ref(null);
-		const panelStyle = ref({ visibility: "hidden" });
 		const { isOpen, rootRef, triggerRef, open, close } = useDropdownState({
-			closeOnScroll: true,
 			insideRefs: [panelRef],
-			onOpen: () => {
-				panelStyle.value = { visibility: "hidden" };
-				emit("open");
-			},
+			onOpen: () => emit("open"),
 			onClose: () => emit("close")
 		});
+		const { style: panelStyle } = useFloatingPanel(triggerRef, panelRef, isOpen, { placement: "bottom-end" });
 		onMounted(() => {
 			triggerRef.value = rootRef.value?.querySelector("button") ?? null;
 		});
@@ -61,25 +56,6 @@ var ActionMenu_default = /* @__PURE__ */ defineComponent({
 			if (!panelRef.value) return [];
 			return Array.from(panelRef.value.querySelectorAll(".mint-action-menu__item:not(:disabled)"));
 		}
-		async function positionPanel() {
-			const trigger = triggerRef.value;
-			const panel = panelRef.value;
-			if (!trigger || !panel) return;
-			const position = await computePosition(trigger, panel, {
-				placement: "bottom-end",
-				strategy: "fixed",
-				middleware: [
-					offset(4),
-					flip(),
-					shift({ padding: 8 })
-				]
-			});
-			panelStyle.value = {
-				left: `${position.x}px`,
-				top: `${position.y}px`,
-				visibility: "visible"
-			};
-		}
 		/** `focusFirst` is false when the keyboard composable owns the initial focus. */
 		function openMenu(focusFirst = true) {
 			if (props.disabled || isOpen.value) return;
@@ -102,11 +78,6 @@ var ActionMenu_default = /* @__PURE__ */ defineComponent({
 			emit("select", item);
 			close();
 		}
-		watch(isOpen, async (opened) => {
-			if (!opened) return;
-			await nextTick();
-			await positionPanel();
-		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
 				ref_key: "rootRef",
@@ -137,7 +108,7 @@ var ActionMenu_default = /* @__PURE__ */ defineComponent({
 				ref_key: "panelRef",
 				ref: panelRef,
 				class: "mint-popover mint-action-menu__panel",
-				style: normalizeStyle(panelStyle.value),
+				style: normalizeStyle(unref(panelStyle)),
 				role: "menu",
 				onKeydown: _cache[0] || (_cache[0] = (...args) => unref(handlePanelKeydown) && unref(handlePanelKeydown)(...args))
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
@@ -241,4 +212,4 @@ function useRequest(defaultErrorMessage = "Request failed.") {
 //#endregion
 export { ActionMenu_default as n, useRequest as t };
 
-//# sourceMappingURL=useRequest-D506eHi8.js.map
+//# sourceMappingURL=useRequest-BuDmW8Jc.js.map

package/dist/useRequest-BuDmW8Jc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequest-BuDmW8Jc.js","names":[],"sources":["../src/components/ActionMenu.vue","../src/components/ActionMenu.vue","../src/composables/useRequest.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */\nimport { Check, Ellipsis } from 'lucide-vue-next'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { useDropdownState } from '../composables/useDropdownState'\nimport { useFloatingPanel } from '../composables/useFloatingPanel'\nimport { useMenuKeyboard } from '../composables/useMenuKeyboard'\nimport type { ActionMenuItem } from '../types/components'\nimport BaseButton from './BaseButton.vue'\n\ninterface Props {\n  label: string\n  items: ActionMenuItem[]\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  select: [item: ActionMenuItem]\n  open: []\n  close: []\n}>()\n\ndefineSlots<{\n  /** Replaces the ellipsis button; `toggle` and `keydown` go on the slotted button. */\n  trigger?: (props: { open: boolean; toggle: () => void; keydown: (event: KeyboardEvent) => void }) => unknown\n}>()\n\nconst panelRef = ref<HTMLElement | null>(null)\n\n// Disclosure state (outside-click, Escape, focus return) and placement come from\n// the shared composables; the open menu follows its trigger on scroll.\nconst { isOpen, rootRef, triggerRef, open, close } = useDropdownState({\n  insideRefs: [panelRef],\n  onOpen: () => emit('open'),\n  onClose: () => emit('close'),\n})\nconst { style: panelStyle } = useFloatingPanel(triggerRef, panelRef, isOpen, { placement: 'bottom-end' })\n\n// BaseButton owns the actual <button>, so the trigger element is resolved from\n// the wrapper once mounted rather than bound with a template ref.\nonMounted(() => {\n  triggerRef.value = rootRef.value?.querySelector('button') ?? null\n})\n\nfunction menuItems(): HTMLElement[] {\n  if (!panelRef.value) return []\n  return Array.from(\n    panelRef.value.querySelectorAll<HTMLElement>('.mint-action-menu__item:not(:disabled)'),\n  )\n}\n\n/** `focusFirst` is false when the keyboard composable owns the initial focus. */\nfunction openMenu(focusFirst = true) {\n  if (props.disabled || isOpen.value) return\n  open()\n  if (focusFirst) {\n    void nextTick(() => menuItems()[0]?.focus())\n  }\n}\n\nfunction toggleMenu() {\n  if (props.disabled) return\n  if (isOpen.value) close()\n  else openMenu()\n}\n\nconst { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({\n  items: menuItems,\n  isOpen: () => isOpen.value,\n  open: () => openMenu(false),\n  close,\n})\n\nfunction handleSelect(item: ActionMenuItem) {\n  if (item.disabled) return\n  emit('select', item)\n  close()\n}\n</script>\n\n<template>\n  <span ref=\"rootRef\" class=\"mint-action-menu\">\n    <!-- A custom trigger must render one <button> and wire toggle + keydown to it. -->\n    <slot name=\"trigger\" :open=\"isOpen\" :toggle=\"toggleMenu\" :keydown=\"handleTriggerKeydown\">\n      <BaseButton\n        variant=\"secondary\"\n        size=\"sm\"\n        :icon=\"Ellipsis\"\n        :label=\"label\"\n        :disabled=\"disabled\"\n        aria-haspopup=\"menu\"\n        :aria-expanded=\"isOpen\"\n        @click=\"toggleMenu\"\n        @keydown=\"handleTriggerKeydown\"\n      />\n    </slot>\n  </span>\n\n  <Teleport to=\"body\">\n    <div\n      v-if=\"isOpen\"\n      ref=\"panelRef\"\n      class=\"mint-popover mint-action-menu__panel\"\n      :style=\"panelStyle\"\n      role=\"menu\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <template v-for=\"(item, index) in items\" :key=\"item.id\">\n        <div\n          v-if=\"item.danger && index > 0 && !items[index - 1].danger\"\n          class=\"mint-menu-separator\"\n          role=\"separator\"\n        />\n        <a\n          v-if=\"item.href !== undefined && !item.disabled\"\n          :href=\"item.href\"\n          :target=\"item.target\"\n          :rel=\"item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n          :class=\"['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]\"\n          role=\"menuitem\"\n          @click=\"handleSelect(item)\"\n        >\n          {{ item.label }}\n        </a>\n        <button\n          v-else\n          type=\"button\"\n          :class=\"['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]\"\n          :role=\"item.checked === undefined ? 'menuitem' : 'menuitemradio'\"\n          :aria-checked=\"item.checked\"\n          :disabled=\"item.disabled\"\n          @click=\"handleSelect(item)\"\n        >\n          <Check\n            v-if=\"item.checked !== undefined\"\n            class=\"mint-action-menu__check\"\n            :class=\"{ 'mint-action-menu__check--off': !item.checked }\"\n            :size=\"14\"\n            aria-hidden=\"true\"\n          />\n          {{ item.label }}\n        </button>\n      </template>\n    </div>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\n/** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */\nimport { Check, Ellipsis } from 'lucide-vue-next'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { useDropdownState } from '../composables/useDropdownState'\nimport { useFloatingPanel } from '../composables/useFloatingPanel'\nimport { useMenuKeyboard } from '../composables/useMenuKeyboard'\nimport type { ActionMenuItem } from '../types/components'\nimport BaseButton from './BaseButton.vue'\n\ninterface Props {\n  label: string\n  items: ActionMenuItem[]\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  select: [item: ActionMenuItem]\n  open: []\n  close: []\n}>()\n\ndefineSlots<{\n  /** Replaces the ellipsis button; `toggle` and `keydown` go on the slotted button. */\n  trigger?: (props: { open: boolean; toggle: () => void; keydown: (event: KeyboardEvent) => void }) => unknown\n}>()\n\nconst panelRef = ref<HTMLElement | null>(null)\n\n// Disclosure state (outside-click, Escape, focus return) and placement come from\n// the shared composables; the open menu follows its trigger on scroll.\nconst { isOpen, rootRef, triggerRef, open, close } = useDropdownState({\n  insideRefs: [panelRef],\n  onOpen: () => emit('open'),\n  onClose: () => emit('close'),\n})\nconst { style: panelStyle } = useFloatingPanel(triggerRef, panelRef, isOpen, { placement: 'bottom-end' })\n\n// BaseButton owns the actual <button>, so the trigger element is resolved from\n// the wrapper once mounted rather than bound with a template ref.\nonMounted(() => {\n  triggerRef.value = rootRef.value?.querySelector('button') ?? null\n})\n\nfunction menuItems(): HTMLElement[] {\n  if (!panelRef.value) return []\n  return Array.from(\n    panelRef.value.querySelectorAll<HTMLElement>('.mint-action-menu__item:not(:disabled)'),\n  )\n}\n\n/** `focusFirst` is false when the keyboard composable owns the initial focus. */\nfunction openMenu(focusFirst = true) {\n  if (props.disabled || isOpen.value) return\n  open()\n  if (focusFirst) {\n    void nextTick(() => menuItems()[0]?.focus())\n  }\n}\n\nfunction toggleMenu() {\n  if (props.disabled) return\n  if (isOpen.value) close()\n  else openMenu()\n}\n\nconst { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({\n  items: menuItems,\n  isOpen: () => isOpen.value,\n  open: () => openMenu(false),\n  close,\n})\n\nfunction handleSelect(item: ActionMenuItem) {\n  if (item.disabled) return\n  emit('select', item)\n  close()\n}\n</script>\n\n<template>\n  <span ref=\"rootRef\" class=\"mint-action-menu\">\n    <!-- A custom trigger must render one <button> and wire toggle + keydown to it. -->\n    <slot name=\"trigger\" :open=\"isOpen\" :toggle=\"toggleMenu\" :keydown=\"handleTriggerKeydown\">\n      <BaseButton\n        variant=\"secondary\"\n        size=\"sm\"\n        :icon=\"Ellipsis\"\n        :label=\"label\"\n        :disabled=\"disabled\"\n        aria-haspopup=\"menu\"\n        :aria-expanded=\"isOpen\"\n        @click=\"toggleMenu\"\n        @keydown=\"handleTriggerKeydown\"\n      />\n    </slot>\n  </span>\n\n  <Teleport to=\"body\">\n    <div\n      v-if=\"isOpen\"\n      ref=\"panelRef\"\n      class=\"mint-popover mint-action-menu__panel\"\n      :style=\"panelStyle\"\n      role=\"menu\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <template v-for=\"(item, index) in items\" :key=\"item.id\">\n        <div\n          v-if=\"item.danger && index > 0 && !items[index - 1].danger\"\n          class=\"mint-menu-separator\"\n          role=\"separator\"\n        />\n        <a\n          v-if=\"item.href !== undefined && !item.disabled\"\n          :href=\"item.href\"\n          :target=\"item.target\"\n          :rel=\"item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n          :class=\"['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]\"\n          role=\"menuitem\"\n          @click=\"handleSelect(item)\"\n        >\n          {{ item.label }}\n        </a>\n        <button\n          v-else\n          type=\"button\"\n          :class=\"['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]\"\n          :role=\"item.checked === undefined ? 'menuitem' : 'menuitemradio'\"\n          :aria-checked=\"item.checked\"\n          :disabled=\"item.disabled\"\n          @click=\"handleSelect(item)\"\n        >\n          <Check\n            v-if=\"item.checked !== undefined\"\n            class=\"mint-action-menu__check\"\n            :class=\"{ 'mint-action-menu__check--off': !item.checked }\"\n            :size=\"14\"\n            aria-hidden=\"true\"\n          />\n          {{ item.label }}\n        </button>\n      </template>\n    </div>\n  </Teleport>\n</template>\n","import { ref, type Ref } from 'vue'\nimport { readErrorMessage as readSharedErrorMessage } from '../utils/errors'\n\nexport type RequestKind = 'load' | 'save' | 'run'\n\n/**\n * The unit of work `run()` drives.\n *\n * It receives an `AbortSignal` that fires when the run is superseded by a\n * newer `run()` or by `cancel()`. Zero-argument operations stay valid and\n * simply ignore it.\n */\nexport type RequestOperation<T> = (signal: AbortSignal) => Promise<T>\n\nexport interface RequestRunOptions {\n  /** Which timestamp a successful run moves: `lastLoadedAt`, `lastSavedAt` or `lastRunAt`. */\n  kind?: RequestKind\n  errorMessage?: string\n  /**\n   * Abort the previously started run when this one starts. Default `true`;\n   * pass `false` to let overlapping runs finish their own work (the stale\n   * guard on shared state still applies either way).\n   */\n  abortPrevious?: boolean\n  /** Caller-owned signal; aborting it aborts this run's signal too. */\n  signal?: AbortSignal\n}\n\nexport interface UseRequestReturn {\n  /** Whether a request is in progress. */\n  isLoading: Ref<boolean>\n  /** Message from the last failed request, or null. */\n  error: Ref<string | null>\n  /** Timestamp of the last successful load operation, or null. */\n  lastLoadedAt: Ref<Date | null>\n  /** Timestamp of the last successful save operation, or null. */\n  lastSavedAt: Ref<Date | null>\n  /** Timestamp of the last successful run operation, or null. */\n  lastRunAt: Ref<Date | null>\n  /** Clear the current error without changing loading or timestamps. */\n  clearError: () => void\n  /** Convert thrown values into a developer-facing error message. */\n  readErrorMessage: (value: unknown, fallback?: string) => string\n  /** Store and return a normalized error message. */\n  setError: (value: unknown, fallback?: string) => string\n  /**\n   * Run a request with shared loading/error handling and optional sync marking.\n   *\n   * ## Stale-response semantics\n   *\n   * Every call takes a monotonically increasing token. Starting a run\n   * supersedes any run started before it, and a superseded run writes **no**\n   * shared state when it finally settles: it does not clear `isLoading`, does not\n   * set `error`, and does not move `lastLoadedAt` / `lastSavedAt` / `lastRunAt`.\n   * Only the newest run owns those.\n   *\n   * The caller's own promise is untouched by the guard — a superseded run still\n   * resolves with its value or rejects with its own error, exactly as the\n   * operation did. The guard never invents a rejection, so a caller awaiting\n   * `run()` never sees a \"superseded\" error it did not cause.\n   *\n   * The operation additionally receives an `AbortSignal` that fires when its\n   * run is superseded or `cancel()` is called, so an operation that forwards\n   * the signal (`fetch(url, { signal })`) stops work instead of racing.\n   */\n  run: <T>(operation: RequestOperation<T>, options?: RequestRunOptions) => Promise<T>\n  /**\n   * Abort the in-flight run and drop `isLoading`. The aborted run's completion\n   * is treated as stale and writes no state.\n   */\n  cancel: () => void\n}\n\n/** Loading, error and timestamp state for one request at a time; `run()` drives it. */\nexport function useRequest(\n  defaultErrorMessage = 'Request failed.',\n): UseRequestReturn {\n  const isLoading = ref(false)\n  const error = ref<string | null>(null)\n  const lastLoadedAt = ref<Date | null>(null)\n  const lastSavedAt = ref<Date | null>(null)\n  const lastRunAt = ref<Date | null>(null)\n\n  function clearError(): void {\n    error.value = null\n  }\n\n  function readErrorMessage(value: unknown, fallback = defaultErrorMessage): string {\n    return readSharedErrorMessage(value, fallback)\n  }\n\n  function setError(value: unknown, fallback?: string): string {\n    const message = readErrorMessage(value, fallback)\n    error.value = message\n    return message\n  }\n\n  // Monotonic token guarding every write to the shared loading/error/timestamp\n  // state. Overlapping runs settle in any order, and a superseded one must not\n  // clear a newer run's loading flag or overwrite its error.\n  let runToken = 0\n  let activeController: AbortController | null = null\n\n  function cancel(): void {\n    runToken += 1\n    activeController?.abort()\n    activeController = null\n    isLoading.value = false\n  }\n\n  async function run<T>(\n    operation: RequestOperation<T>,\n    options: RequestRunOptions = {},\n  ): Promise<T> {\n    if (options.abortPrevious !== false) {\n      activeController?.abort()\n    }\n\n    const token = (runToken += 1)\n    const controller = new AbortController()\n    activeController = controller\n\n    const callerSignal = options.signal\n    if (callerSignal) {\n      if (callerSignal.aborted) controller.abort(callerSignal.reason)\n      else callerSignal.addEventListener(\n        'abort',\n        () => controller.abort(callerSignal.reason),\n        { once: true },\n      )\n    }\n\n    const isCurrent = (): boolean => token === runToken\n\n    isLoading.value = true\n    clearError()\n    try {\n      const response = await operation(controller.signal)\n      if (isCurrent() && options.kind) {\n        const settledAt = new Date()\n        if (options.kind === 'load') lastLoadedAt.value = settledAt\n        else if (options.kind === 'save') lastSavedAt.value = settledAt\n        else lastRunAt.value = settledAt\n      }\n      return response\n    } catch (err) {\n      if (isCurrent()) {\n        setError(err, options.errorMessage)\n      }\n      throw err\n    } finally {\n      if (isCurrent()) {\n        isLoading.value = false\n      }\n      if (activeController === controller) {\n        activeController = null\n      }\n    }\n  }\n\n  return {\n    isLoading,\n    error,\n    lastLoadedAt,\n    lastSavedAt,\n    lastRunAt,\n    clearError,\n    readErrorMessage,\n    setError,\n    run,\n    cancel,\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.4.0-beta.9",
+  "version": "1.4.0",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",
@@ -84,7 +84,8 @@
     "@floating-ui/dom": "^1.8.0",
     "axios": "1.20.0",
     "lucide-vue-next": "1.0.0",
-    "plotly.js-dist-min": "^4.1.1"
+    "plotly.js-dist-min": "^4.1.1",
+    "read-excel-file": "9.3.14"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "1.0.0-beta.1",

package/src/__stories__/experiment-helpers.ts

@@ -65,19 +65,19 @@ export function installMockInterceptor() {
  * Props:
  *   preselect (boolean, default true) - pre-select the first mock experiment
  *   plugin (PluginInfo, optional)      - the integrated plugin, shown as AppTopBar's static identity
+ *   save (boolean, default true)       - show the Save half of the experiment chip
  */
 export const ExperimentProvider = defineComponent({
   props: {
     preselect: { type: Boolean, default: true },
     plugin: { type: Object as PropType<PluginInfo>, default: undefined },
+    save: { type: Boolean, default: true },
   },
   setup(props, { slots }) {
     ;(window as any).__MINT_PLATFORM__ = { isIntegrated: true, theme: 'system', plugin: props.plugin }
     installMockInterceptor()
     const experimentStore = useExperimentStore()
-    useAppExperiment({
-      onSave: async () => 'Saved!',
-    })
+    useAppExperiment(props.save ? { onSave: async () => 'Saved!' } : {})
     if (props.preselect && mockExperiments[0]) {
       experimentStore.select(mockExperiments[0])
     }

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

@@ -132,7 +132,7 @@ describe('ActionMenu', () => {
     expect(document.body.querySelector('.mint-menu-separator')).toBeNull()
   })
 
-  it('should close an open menu when its scroll context moves', async () => {
+  it('should keep an open menu open when its scroll context moves', async () => {
     const wrapper = mount(ActionMenu, {
       attachTo: document.body,
       props: { label: 'More user actions', items },
@@ -142,7 +142,7 @@ describe('ActionMenu', () => {
     window.dispatchEvent(new Event('scroll'))
     await wrapper.vm.$nextTick()
 
-    expect(document.body.querySelector('.mint-action-menu__panel')).toBeNull()
+    expect(document.body.querySelector('.mint-action-menu__panel')).not.toBeNull()
   })
 
   it('should open from the trigger keyboard shortcuts and focus the first item', async () => {

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

@@ -12,6 +12,7 @@ import { defineControlModel, defineControls } from '../../composables/useControl
 import ThemeToggle from '../../components/ThemeToggle.vue'
 import SettingsModal from '../../components/SettingsModal.vue'
 import type { TopBarSettingsConfig } from '../../types/components'
+import type { TopBarJob } from '../../types/jobs'
 
 // Mock the usePlatform composable
 vi.mock('../../composables/usePlatform', () => ({
@@ -908,7 +909,7 @@ describe('AppTopBar', () => {
       const imageIcons = wrapper.findAll('.mint-plugin-icon__img')
       expect(imageIcons).toHaveLength(1)
       expect(imageIcons[0].attributes('src')).toBe(pngIcon)
-      expect(wrapper.find('.mint-page-selector__item-hint').exists()).toBe(false)
+      expect(wrapper.get('.mint-page-selector__item-hint').text()).toBe('Overview')
     })
   })
 
@@ -1237,6 +1238,26 @@ describe('AppTopBar', () => {
         expect(wrapper.find('.mint-topbar__plugin-name').exists()).toBe(false)
       })
 
+      it.each([
+        { case: 'integrated with display_name', integrated: true, plugin: { ...integratedPlugin, display_name: 'LC-MS Peak Review' }, props: { title: 'Ignored' }, seed: false, expected: 'LC-MS Peak Review' },
+        { case: 'integrated without display_name', integrated: true, plugin: integratedPlugin, props: {}, seed: false, expected: 'LC-MS Analysis' },
+        { case: 'standalone with a title', integrated: false, plugin: undefined, props: { title: 'Planner Dev' }, seed: true, expected: 'Planner Dev' },
+        { case: 'standalone seeded', integrated: false, plugin: undefined, props: {}, seed: true, expected: 'MS Planner' },
+        { case: 'standalone without a name', integrated: false, plugin: undefined, props: {}, seed: false, expected: null },
+      ])('should put the plugin name in the page selector crumb when $case', ({ integrated, plugin, props, seed, expected }) => {
+        mockPlatformCtx({ isIntegrated: integrated, plugin })
+        if (seed) providePluginIdentity({ plugin: { name: 'ms-planner', displayName: 'MS Planner' } })
+
+        try {
+          const wrapper = createWrapper({ ...props, pageSelector: pages, currentPageSelectorId: 'peaks' })
+
+          const name = wrapper.find('.mint-page-selector__plugin')
+          expect(name.exists() ? name.text() : null).toBe(expected)
+        } finally {
+          providePluginIdentity({ plugin: { name: '' } })
+        }
+      })
+
       it('should hide the plugin name when a page selector is shown', () => {
         mockPlatformCtx({ isIntegrated: true, plugin: integratedPlugin })
 
@@ -1483,4 +1504,188 @@ describe('AppTopBar', () => {
       expect(removeListener).toHaveBeenCalledWith('scroll', expect.any(Function), expect.objectContaining({ capture: true }))
     })
   })
+  describe('run slot', () => {
+    function mountRunSlot(
+      job: TopBarJob | null | undefined,
+      { experiment, jobsDone, jobsOpen, jobsPanelId }: { experiment: boolean; jobsDone?: number; jobsOpen?: boolean; jobsPanelId?: string },
+    ) {
+      vi.mocked(usePlatform).mockReturnValueOnce({
+        integrated: computed(() => experiment),
+        isAdmin: computed(() => true),
+        can: () => true,
+        plugin: computed(() => undefined),
+        user: computed(() => undefined),
+        theme: computed(() => 'system' as const),
+        features: computed(() => undefined),
+      })
+      const appExperiment = {
+        popover: computed(() => ({ experimentName: 'Serine tracing', experimentCode: 'EXP-0142', showSave: true })),
+        selectorModal: computed(() => ({ open: false })),
+        openModal: vi.fn(),
+        closeModal: vi.fn(),
+        handleSave: vi.fn(),
+        handleDetach: vi.fn(),
+      } as unknown as AppExperimentState
+      return mount(AppTopBar, {
+        props: job === undefined
+          ? { title: 'LEAF', jobsDone, jobsOpen, jobsPanelId }
+          : { title: 'LEAF', job, jobsDone, jobsOpen, jobsPanelId },
+        global: {
+          plugins: [createPinia()],
+          provide: { [APP_EXPERIMENT_KEY as symbol]: appExperiment },
+          stubs: { 'router-link': { template: '<a><slot /></a>' }, BaseModal: { template: '<div><slot /></div>' }, transition: false },
+        },
+      })
+    }
+
+    const running: TopBarJob = { status: 'running', label: 'Extracting', percent: 40 }
+
+    it.each([
+      ['no job prop, experiment', undefined, true, { popover: true, chip: false, idle: false, joined: false }],
+      ['idle, experiment', null, true, { popover: true, chip: true, idle: true, joined: false }],
+      ['running, experiment', running, true, { popover: true, chip: true, idle: false, joined: true }],
+      ['idle, standalone', null, false, { popover: false, chip: true, idle: true, joined: false }],
+      ['running, standalone', running, false, { popover: false, chip: true, idle: false, joined: true }],
+    ] as const)('should render the run slot for %s', async (_case, job, experiment, expected) => {
+      const wrapper = mountRunSlot(job, { experiment })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.find('.mint-topbar__job')
+      expect({
+        popover: wrapper.findComponent(ExperimentPopover).exists(),
+        chip: chip.exists(),
+        idle: chip.exists() && chip.classes('mint-topbar__job--idle'),
+        joined: wrapper.find('.mint-topbar__run-slot--joined').exists(),
+      }).toEqual(expected)
+    })
+
+    it.each([
+      [undefined, true],
+      [null, true],
+      [running, false],
+    ])('should pass showSave to the experiment chip when the job is %s', async (job, showSave) => {
+      const wrapper = mountRunSlot(job, { experiment: true })
+      await waitForAsyncComponents(wrapper)
+
+      expect(wrapper.findComponent(ExperimentPopover).props('showSave')).toBe(showSave)
+    })
+
+    it('should keep the slot joined until the job has left, then show the idle button', async () => {
+      const wrapper = mountRunSlot(running, { experiment: true })
+      await waitForAsyncComponents(wrapper)
+      const joined = () => wrapper.find('.mint-topbar__run-slot--joined').exists()
+
+      await wrapper.setProps({ job: null })
+      expect(joined()).toBe(true)
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job--idle').exists()).toBe(true))
+      expect(joined()).toBe(false)
+
+      await wrapper.setProps({ job: running })
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job--primary').exists()).toBe(true))
+      expect(joined()).toBe(true)
+
+      await wrapper.setProps({ job: undefined })
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__job').exists()).toBe(false))
+      expect(joined()).toBe(false)
+    })
+
+    it('should join the slot when the job and the slot mount together', async () => {
+      const wrapper = mountRunSlot(undefined, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      await wrapper.setProps({ job: running })
+
+      await vi.waitFor(() => expect(wrapper.find('.mint-topbar__run-slot--joined').exists()).toBe(true))
+    })
+
+    it.each([
+      [120, '100%', 'Extracting 100%'],
+      [-5, '0%', 'Extracting 0%'],
+    ])('should clamp percent %s to %s', async (percent, width, name) => {
+      const wrapper = mountRunSlot({ ...running, percent }, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect(chip.get('.mint-topbar__job-bar > span').attributes('style')).toContain(`width: ${width}`)
+      expect(chip.attributes('aria-label')).toBe(name)
+    })
+
+    it.each([
+      [running, 'Job running'],
+      [{ status: 'awaiting_input', label: 'Decoding' } as TopBarJob, 'Job needs input'],
+      [{ status: 'failed', label: '1 failed' } as TopBarJob, 'Job failed'],
+      [null, ''],
+    ])('should announce the status of %o as %s', async (job, text) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const live = wrapper.get('.mint-topbar__job-status')
+      expect(live.attributes('aria-live')).toBe('polite')
+      expect(live.text()).toBe(text)
+    })
+
+    it.each([
+      ['queued', 'primary'],
+      ['running', 'primary'],
+      ['awaiting_input', 'warning'],
+      ['completed', 'success'],
+      ['failed', 'error'],
+      ['cancelled', 'neutral'],
+    ] as const)('should tone a %s job as %s', async (status, tone) => {
+      const wrapper = mountRunSlot({ status, label: 'Job' }, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      expect(wrapper.get('.mint-topbar__job').classes()).toContain(`mint-topbar__job--${tone}`)
+    })
+
+    it.each([
+      [running, 'Extracting 40%', true],
+      [{ status: 'completed', label: 'Saved to EXP-0142' } as TopBarJob, 'Saved to EXP-0142', false],
+    ])('should show only the status for %o and name it %s', async (job, name, bar) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect(chip.text()).toBe('')
+      expect(chip.attributes('aria-label')).toBe(name)
+      expect(chip.attributes('title')).toBe(name)
+      expect(chip.find('.mint-topbar__job-bar').exists()).toBe(bar)
+      if (bar) expect(chip.get('.mint-topbar__job-bar > span').attributes('style')).toContain('width: 40%')
+    })
+
+    it.each([
+      [null, undefined, null, undefined],
+      [null, 0, null, undefined],
+      [null, 2, '2', 'Jobs, 2 completed'],
+      [running, 2, null, 'Extracting 40%'],
+    ])('should show the completed count only on the idle button when the job is %o and jobsDone %s', async (job, jobsDone, count, name) => {
+      const wrapper = mountRunSlot(job, { experiment: false, jobsDone })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect([chip.find('.mint-topbar__job-count').exists() ? chip.get('.mint-topbar__job-count').text() : null, chip.attributes('aria-label')])
+        .toEqual([count, name])
+    })
+
+    it.each([
+      [null, undefined, undefined, [undefined, undefined]],
+      [null, true, 'jobs-panel', ['true', 'jobs-panel']],
+      [running, false, 'jobs-panel', ['false', 'jobs-panel']],
+    ])('should expose the tray state on the job control when it is %o and open is %s', async (job, jobsOpen, jobsPanelId, expected) => {
+      const wrapper = mountRunSlot(job, { experiment: false, jobsOpen, jobsPanelId })
+      await waitForAsyncComponents(wrapper)
+
+      const chip = wrapper.get('.mint-topbar__job')
+      expect([chip.attributes('aria-expanded'), chip.attributes('aria-controls')]).toEqual(expected)
+    })
+
+    it.each([null, running])('should emit job-click when the job control is %s', async (job) => {
+      const wrapper = mountRunSlot(job, { experiment: false })
+      await waitForAsyncComponents(wrapper)
+
+      await wrapper.get('.mint-topbar__job').trigger('click')
+
+      expect(wrapper.emitted('job-click')).toEqual([[]])
+    })
+  })
 })

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

@@ -0,0 +1,160 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { computed, defineComponent, h, nextTick } from 'vue'
+import { createPinia } from 'pinia'
+import AppTopBar from '../../components/AppTopBar.vue'
+import { provideOnboarding, type OnboardingDefinition } from '../../composables/useOnboarding'
+
+vi.mock('../../composables/usePlatform', () => ({
+  usePlatform: vi.fn(() => ({
+    integrated: computed(() => false),
+    isAdmin: computed(() => true),
+    can: () => true,
+    plugin: computed(() => undefined),
+    user: computed(() => undefined),
+    theme: computed(() => 'system' as const),
+    features: computed(() => undefined),
+  })),
+}))
+
+const definition: OnboardingDefinition = {
+  tours: [{
+    id: 'intro',
+    title: 'Top bar tour',
+    steps: [
+      { id: 'settings', anchor: 'topbar-settings', title: 'Settings live here', body: 'Theme and palette.' },
+      { id: 'help', anchor: 'topbar-help', title: 'Help', body: 'Replay tours.', advanceOn: 'click' },
+    ],
+  }],
+  checklist: [{ id: 'create', title: 'Create an experiment' }],
+}
+
+enableAutoUnmount(afterEach)
+
+function mountTopBar(onboarding?: OnboardingDefinition) {
+  return mount(defineComponent({
+    setup() {
+      if (onboarding) provideOnboarding(onboarding, { appId: 'test', userId: 1, autoStart: false })
+      return () => h(AppTopBar, { spec: { settings: { tabs: [] } } })
+    },
+  }), { global: { plugins: [createPinia()], stubs: { 'router-link': true } }, attachTo: document.body })
+}
+
+const card = () => document.querySelector('.mint-onboarding__card')
+
+describe('AppTopBar onboarding', () => {
+  beforeEach(() => localStorage.clear())
+
+  it.each([
+    [undefined, false],
+    [definition, true],
+  ])('should show the Help button and checklist chip when onboarding is %s', (onboarding, shown) => {
+    const wrapper = mountTopBar(onboarding)
+
+    expect(wrapper.find('[data-onboarding="topbar-help"]').exists()).toBe(shown)
+    expect(wrapper.find('.mint-onboarding-help__chip').exists()).toBe(shown)
+    if (shown) expect(wrapper.find('.mint-onboarding-help__chip').text()).toContain('0/1')
+  })
+
+  it('should run a tour picked in the Help panel and end it with Escape', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    const tour = [...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!
+    tour.click()
+    await flushPromises()
+
+    expect(document.querySelector('.mint-onboarding-help__panel')).toBeNull()
+    expect(card()?.getAttribute('role')).toBe('dialog')
+    expect(card()?.textContent).toContain('Settings live here')
+    expect(card()?.textContent).toContain('Next')
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await nextTick()
+
+    expect(card()).toBeNull()
+    expect(JSON.parse(localStorage.getItem('mint.onboarding.test.1')!)).toEqual(
+      expect.arrayContaining(['step:intro/settings', 'step:intro/help']),
+    )
+  })
+
+  it('should focus the card, not the Next button, when a step opens', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    ;[...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!.click()
+    await flushPromises()
+
+    expect(document.activeElement).toBe(card())
+  })
+
+  it.each([
+    [{ key: 'Tab', shiftKey: true }, 'Next'],
+    [{ key: 'Tab', shiftKey: false }, ''],
+  ])('should keep %o from the focused card inside the card', async (init, label) => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    ;[...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!.click()
+    await flushPromises()
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { ...init, bubbles: true, cancelable: true }))
+
+    expect(card()!.contains(document.activeElement)).toBe(true)
+    expect((document.activeElement as HTMLElement).textContent?.trim()).toBe(label)
+  })
+
+  it('should leave Escape and Tab to a control outside the tour that has focus', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    ;[...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!.click()
+    await flushPromises()
+    const input = document.body.appendChild(document.createElement('input'))
+    input.focus()
+
+    for (const key of ['Tab', 'Escape']) document.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))
+    await nextTick()
+
+    expect(document.activeElement).toBe(input)
+    expect(card()).not.toBeNull()
+    input.remove()
+  })
+
+  it('should go to the next step when Enter is pressed on the focused card', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    ;[...document.querySelectorAll<HTMLElement>('.mint-menu-item')].find((item) => item.textContent?.trim() === 'Top bar tour')!.click()
+    await flushPromises()
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }))
+    await flushPromises()
+
+    expect(card()?.textContent).toContain('Replay tours.')
+  })
+
+  it('should show no Next button on an advanceOn click step', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    document.querySelector<HTMLElement>('.mint-menu-item')!.click()
+    await flushPromises()
+    ;(document.querySelector('.mint-onboarding__card .mint-button') as HTMLElement).click()
+    await flushPromises()
+
+    expect(card()?.textContent).toContain('Click the highlighted control.')
+    expect(card()?.textContent).not.toContain('Done')
+  })
+
+  it('should keep Tab on the anchor and the card on an advanceOn click step', async () => {
+    const wrapper = mountTopBar(definition)
+    await wrapper.get('[data-onboarding="topbar-help"]').trigger('click')
+    document.querySelector<HTMLElement>('.mint-menu-item')!.click()
+    await flushPromises()
+    ;(document.querySelector('.mint-onboarding__card .mint-button') as HTMLElement).click()
+    await flushPromises()
+    const anchor = document.querySelector<HTMLElement>('[data-onboarding="topbar-help"]')!
+    expect(document.activeElement).toBe(anchor)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }))
+
+    expect(card()?.contains(document.activeElement)).toBe(true)
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }))
+    expect(document.activeElement).toBe(anchor)
+  })
+})