@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.20

package/dist/useRequest-CDkrXNU7.js

@@ -0,0 +1,244 @@
+import { a as BaseButton_default, t as useDropdownState } from "./useDropdownState-Bb2N4m40.js";
+import { r as readErrorMessage } from "./experiment-DyO54FQB.js";
+import { E as useMenuKeyboard } from "./records-CR_pYzIP.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 { 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,
+	class: "mint-menu-separator",
+	role: "separator"
+};
+var _hoisted_2 = [
+	"href",
+	"target",
+	"rel",
+	"onClick"
+];
+var _hoisted_3 = [
+	"role",
+	"aria-checked",
+	"disabled",
+	"onClick"
+];
+//#endregion
+//#region src/components/ActionMenu.vue
+var ActionMenu_default = /* @__PURE__ */ defineComponent({
+	__name: "ActionMenu",
+	props: {
+		label: {},
+		items: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"select",
+		"open",
+		"close"
+	],
+	setup(__props, { emit: __emit }) {
+		/** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */
+		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");
+			},
+			onClose: () => emit("close")
+		});
+		onMounted(() => {
+			triggerRef.value = rootRef.value?.querySelector("button") ?? null;
+		});
+		function menuItems() {
+			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;
+			open();
+			if (focusFirst) nextTick(() => menuItems()[0]?.focus());
+		}
+		function toggleMenu() {
+			if (props.disabled) return;
+			if (isOpen.value) close();
+			else openMenu();
+		}
+		const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
+			items: menuItems,
+			isOpen: () => isOpen.value,
+			open: () => openMenu(false),
+			close
+		});
+		function handleSelect(item) {
+			if (item.disabled) return;
+			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",
+				ref: rootRef,
+				class: "mint-action-menu"
+			}, [renderSlot(_ctx.$slots, "trigger", {
+				open: unref(isOpen),
+				toggle: toggleMenu,
+				keydown: unref(handleTriggerKeydown)
+			}, () => [createVNode(BaseButton_default, {
+				variant: "secondary",
+				size: "sm",
+				icon: unref(Ellipsis),
+				label: __props.label,
+				disabled: __props.disabled,
+				"aria-haspopup": "menu",
+				"aria-expanded": unref(isOpen),
+				onClick: toggleMenu,
+				onKeydown: unref(handleTriggerKeydown)
+			}, null, 8, [
+				"icon",
+				"label",
+				"disabled",
+				"aria-expanded",
+				"onKeydown"
+			])])], 512), (openBlock(), createBlock(Teleport, { to: "body" }, [unref(isOpen) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "panelRef",
+				ref: panelRef,
+				class: "mint-popover mint-action-menu__panel",
+				style: normalizeStyle(panelStyle.value),
+				role: "menu",
+				onKeydown: _cache[0] || (_cache[0] = (...args) => unref(handlePanelKeydown) && unref(handlePanelKeydown)(...args))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: item.id }, [item.danger && index > 0 && !__props.items[index - 1].danger ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true), item.href !== void 0 && !item.disabled ? (openBlock(), createElementBlock("a", {
+					key: 1,
+					href: item.href,
+					target: item.target,
+					rel: item.target === "_blank" ? "noopener noreferrer" : void 0,
+					class: normalizeClass(["mint-menu-item mint-action-menu__item", { "mint-menu-item--danger mint-action-menu__item--danger": item.danger }]),
+					role: "menuitem",
+					onClick: ($event) => handleSelect(item)
+				}, toDisplayString(item.label), 11, _hoisted_2)) : (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					class: normalizeClass(["mint-menu-item mint-action-menu__item", { "mint-menu-item--danger mint-action-menu__item--danger": item.danger }]),
+					role: item.checked === void 0 ? "menuitem" : "menuitemradio",
+					"aria-checked": item.checked,
+					disabled: item.disabled,
+					onClick: ($event) => handleSelect(item)
+				}, [item.checked !== void 0 ? (openBlock(), createBlock(unref(Check), {
+					key: 0,
+					class: normalizeClass(["mint-action-menu__check", { "mint-action-menu__check--off": !item.checked }]),
+					size: 14,
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(item.label), 1)], 10, _hoisted_3))], 64);
+			}), 128))], 36)) : createCommentVNode("", true)]))], 64);
+		};
+	}
+});
+//#endregion
+//#region src/composables/useRequest.ts
+/** Loading, error and timestamp state for one request at a time; `run()` drives it. */
+function useRequest(defaultErrorMessage = "Request failed.") {
+	const isLoading = ref(false);
+	const error = ref(null);
+	const lastLoadedAt = ref(null);
+	const lastSavedAt = ref(null);
+	const lastRunAt = ref(null);
+	function clearError() {
+		error.value = null;
+	}
+	function readErrorMessage$1(value, fallback = defaultErrorMessage) {
+		return readErrorMessage(value, fallback);
+	}
+	function setError(value, fallback) {
+		const message = readErrorMessage$1(value, fallback);
+		error.value = message;
+		return message;
+	}
+	let runToken = 0;
+	let activeController = null;
+	function cancel() {
+		runToken += 1;
+		activeController?.abort();
+		activeController = null;
+		isLoading.value = false;
+	}
+	async function run(operation, options = {}) {
+		if (options.abortPrevious !== false) activeController?.abort();
+		const token = runToken += 1;
+		const controller = new AbortController();
+		activeController = controller;
+		const callerSignal = options.signal;
+		if (callerSignal) {
+			if (callerSignal.aborted) controller.abort(callerSignal.reason);
+			else callerSignal.addEventListener("abort", () => controller.abort(callerSignal.reason), { once: true });
+		}
+		const isCurrent = () => token === runToken;
+		isLoading.value = true;
+		clearError();
+		try {
+			const response = await operation(controller.signal);
+			if (isCurrent() && options.kind) {
+				const settledAt = /* @__PURE__ */ new Date();
+				if (options.kind === "load") lastLoadedAt.value = settledAt;
+				else if (options.kind === "save") lastSavedAt.value = settledAt;
+				else lastRunAt.value = settledAt;
+			}
+			return response;
+		} catch (err) {
+			if (isCurrent()) setError(err, options.errorMessage);
+			throw err;
+		} finally {
+			if (isCurrent()) isLoading.value = false;
+			if (activeController === controller) activeController = null;
+		}
+	}
+	return {
+		isLoading,
+		error,
+		lastLoadedAt,
+		lastSavedAt,
+		lastRunAt,
+		clearError,
+		readErrorMessage: readErrorMessage$1,
+		setError,
+		run,
+		cancel
+	};
+}
+//#endregion
+export { ActionMenu_default as n, useRequest as t };
+
+//# sourceMappingURL=useRequest-CDkrXNU7.js.map

package/dist/useRequest-CDkrXNU7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequest-CDkrXNU7.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 { computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { Check, Ellipsis } from 'lucide-vue-next'\nimport { nextTick, onMounted, ref, watch } from 'vue'\nimport { useDropdownState } from '../composables/useDropdownState'\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)\nconst panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })\n\n// Disclosure state (outside-click, Escape, scroll/resize closing, focus return)\n// comes from the shared composable; only floating-ui placement stays local.\nconst { isOpen, rootRef, triggerRef, open, close } = useDropdownState({\n  closeOnScroll: true,\n  insideRefs: [panelRef],\n  onOpen: () => {\n    panelStyle.value = { visibility: 'hidden' }\n    emit('open')\n  },\n  onClose: () => emit('close'),\n})\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\nasync function positionPanel() {\n  const trigger = triggerRef.value\n  const panel = panelRef.value\n  if (!trigger || !panel) return\n\n  const position = await computePosition(trigger, panel, {\n    placement: 'bottom-end',\n    strategy: 'fixed',\n    middleware: [\n      offset(4),\n      flip(),\n      shift({ padding: 8 }),\n    ],\n  })\n  panelStyle.value = {\n    left: `${position.x}px`,\n    top: `${position.y}px`,\n    visibility: 'visible',\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\nwatch(isOpen, async (opened) => {\n  if (!opened) return\n  await nextTick()\n  await positionPanel()\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 { computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { Check, Ellipsis } from 'lucide-vue-next'\nimport { nextTick, onMounted, ref, watch } from 'vue'\nimport { useDropdownState } from '../composables/useDropdownState'\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)\nconst panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })\n\n// Disclosure state (outside-click, Escape, scroll/resize closing, focus return)\n// comes from the shared composable; only floating-ui placement stays local.\nconst { isOpen, rootRef, triggerRef, open, close } = useDropdownState({\n  closeOnScroll: true,\n  insideRefs: [panelRef],\n  onOpen: () => {\n    panelStyle.value = { visibility: 'hidden' }\n    emit('open')\n  },\n  onClose: () => emit('close'),\n})\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\nasync function positionPanel() {\n  const trigger = triggerRef.value\n  const panel = panelRef.value\n  if (!trigger || !panel) return\n\n  const position = await computePosition(trigger, panel, {\n    placement: 'bottom-end',\n    strategy: 'fixed',\n    middleware: [\n      offset(4),\n      flip(),\n      shift({ padding: 8 }),\n    ],\n  })\n  panelStyle.value = {\n    left: `${position.x}px`,\n    top: `${position.y}px`,\n    visibility: 'visible',\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\nwatch(isOpen, async (opened) => {\n  if (!opened) return\n  await nextTick()\n  await positionPanel()\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/dist/utils/time.d.ts

@@ -15,5 +15,12 @@ export declare function snapToSlot(time: string, stepMinutes: number): string;
 export declare function addMinutes(time: string, minutes: number): string;
 export declare function compareTime(a: string, b: string): number;
 export declare function findNearestTimeSlotIndex(time: string, slots: readonly string[]): number;
+/**
+ * "in 5 minutes" / "2 hours ago" up to a week, then a locale date.
+ * With `weeks`, times up to five weeks away read as a week count first.
+ */
+export declare function formatRelativeTime(value: Date | string, { weeks }?: {
+    weeks?: boolean;
+}): string;
 export declare function toMinutes(time: string): number;
 export declare function fromMinutes(total: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.0-beta.20",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

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/AppTopBar.test.ts

@@ -6,11 +6,13 @@ import AppTopBar from '../../components/AppTopBar.vue'
 import ExperimentPopover from '../../components/ExperimentPopover.vue'
 import ExperimentSelectorModal from '../../components/ExperimentSelectorModal.vue'
 import { usePlatform } from '../../composables/usePlatform'
+import { providePluginIdentity } from '../../composables/pluginIdentity'
 import { APP_EXPERIMENT_KEY, type AppExperimentState } from '../../composables/useAppExperiment'
 import { defineControlModel, defineControls } from '../../composables/useControlSchema'
 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', () => ({
@@ -907,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')
     })
   })
 
@@ -1058,7 +1060,7 @@ describe('AppTopBar', () => {
       expect(wrapper.find('.mint-topbar__identity').exists()).toBe(true)
     })
 
-    it('should pass plugin.color to PluginIcon as color', () => {
+    it('should not pass the manifest color to PluginIcon when the plugin declares one', () => {
       const iconPath = 'M13 10V3L4 14h7v7l9-11h-7z'
       mockPlatformCtx({
         isIntegrated: true,
@@ -1071,7 +1073,7 @@ describe('AppTopBar', () => {
 
       const wrapper = createWrapper({ title: 'Test App' })
 
-      expect(wrapper.findComponent({ name: 'PluginIcon' }).props('color')).toBe('#22C55E')
+      expect(wrapper.findComponent({ name: 'PluginIcon' }).props('color')).toBeUndefined()
     })
 
     it('should ignore the custom icon slot when integrated', () => {
@@ -1236,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 })
 
@@ -1268,6 +1290,54 @@ describe('AppTopBar', () => {
 
         expect(wrapper.find('.mint-topbar__title-only').exists()).toBe(false)
       })
+
+      it.each([
+        { fields: { subtitle: 'Peak Review', description: 'Reviews LC-MS peaks' }, expected: 'Peak Review' },
+        { fields: { description: 'Reviews LC-MS peaks' }, expected: 'Reviews LC-MS peaks' },
+        { fields: {}, expected: null },
+      ])('should show $expected under the integrated name when the plugin has $fields', ({ fields, expected }) => {
+        mockPlatformCtx({ isIntegrated: true, plugin: { ...integratedPlugin, ...fields } })
+
+        const wrapper = createWrapper()
+
+        const subtitle = wrapper.find('.mint-topbar__plugin-subtitle')
+        expect(subtitle.exists() ? subtitle.text() : null).toBe(expected)
+      })
+    })
+
+    describe('seeded standalone identity', () => {
+      const seedIcon = 'M13 10V3L4 14h7v7l9-11h-7z'
+
+      beforeEach(() => {
+        providePluginIdentity({
+          plugin: { name: 'ms-planner', displayName: 'MS Planner', subtitle: 'Experiment Scheduler', icon: seedIcon },
+        })
+      })
+
+      afterEach(() => providePluginIdentity({ plugin: { name: '' } }))
+
+      it('should show the seeded name, subtitle and icon when standalone', () => {
+        const wrapper = createWrapper()
+
+        expect(wrapper.get('.mint-topbar-title').text()).toBe('MS Planner')
+        expect(wrapper.get('.mint-topbar-subtitle').text()).toBe('Experiment Scheduler')
+        expect(wrapper.findComponent({ name: 'PluginIcon' }).props('icon')).toBe(seedIcon)
+      })
+
+      it.each([
+        { slot: 'icon' },
+        { slot: 'logo' },
+      ])('should keep the title props and the #$slot slot over the seed', ({ slot }) => {
+        const wrapper = createWrapper(
+          { title: 'Planner Dev', subtitle: 'Local build' },
+          { [slot]: '<span class="custom-brand">P</span>' },
+        )
+
+        expect(wrapper.get('.mint-topbar-title').text()).toBe('Planner Dev')
+        expect(wrapper.get('.mint-topbar-subtitle').text()).toBe('Local build')
+        expect(wrapper.find('.custom-brand').exists()).toBe(true)
+        expect(wrapper.findComponent({ name: 'PluginIcon' }).exists()).toBe(false)
+      })
     })
   })
 
@@ -1434,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([[]])
+    })
+  })
 })