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

package/dist/runtime.js

@@ -2,7 +2,7 @@ import { i as AuthenticationRequiredError, o as useApi } from "./experiment-DyO5
 import { c as isTerminalJobStatus, d as normalizeJobState, f as resolveJobCapabilities, l as jobStatusLabel, o as resolveCurrentPluginId, s as isActiveJobStatus, u as normalizeJobPercent } from "./records-DnK_1Q_S.js";
 import { A as createGeneratedAnalysisTransport, D as GeneratedPathInput_default, _ as getFieldRegistryEntry, j as useJobsEndpoint, v as getTypeDefault } from "./useListReorder-DPynGrCj.js";
 import { a as GeneratedPlotlyResult_default, c as downloadEndpoint, d as useEventStream, f as useSettingsEndpoint, i as GeneratedResultRenderer_default, l as pluginFormDataFromPayload, m as resolvePluginBaseUrl, o as createClient, p as buildEndpointUrl, u as uploadEndpoint } from "./useRackEditor-B2FrQA0p.js";
-import { a as ComponentBindingRenderer_default, c as generatedJobFormSchema, f as useControlWorkspace, i as RuntimeUpdateNotice_default, l as normalizeGeneratedJobInput, n as PresenceAvatars_default, o as GeneratedPluginView_default, r as usePresence, s as generatedJobDefaults } from "./runtime-pKfF_iql.js";
-import { A as getDefaultControlView, C as controlBindings, D as controlsTo, S as useControlSchema, b as defineControls, d as useForm, l as useFormBuilder, u as evaluateCondition, x as getControlDefaults, y as defineControlComponentBindings } from "./AppSidebar-DGK5i-hJ.js";
+import { a as ComponentBindingRenderer_default, c as generatedJobFormSchema, f as useControlWorkspace, i as RuntimeUpdateNotice_default, l as normalizeGeneratedJobInput, n as PresenceAvatars_default, o as GeneratedPluginView_default, r as usePresence, s as generatedJobDefaults } from "./runtime-fPb_FEZr.js";
+import { A as getDefaultControlView, C as controlBindings, D as controlsTo, S as useControlSchema, b as defineControls, d as useForm, l as useFormBuilder, u as evaluateCondition, x as getControlDefaults, y as defineControlComponentBindings } from "./AppSidebar-CIXJBzDv.js";
 import { a as combinePluginJobSources, o as useJobCenter, r as useRealtime } from "./useRealtime-yWjTTnc9.js";
 export { AuthenticationRequiredError, ComponentBindingRenderer_default as ComponentBindingRenderer, GeneratedPathInput_default as GeneratedPathInput, GeneratedPlotlyResult_default as GeneratedPlotlyResult, GeneratedPluginView_default as GeneratedPluginView, GeneratedResultRenderer_default as GeneratedResultRenderer, PresenceAvatars_default as PresenceAvatars, RuntimeUpdateNotice_default as RuntimeUpdateNotice, buildEndpointUrl, combinePluginJobSources, controlBindings, controlsTo, createClient, createGeneratedAnalysisTransport, defineControlComponentBindings, defineControls, downloadEndpoint, evaluateCondition, generatedJobDefaults, generatedJobFormSchema, getControlDefaults, getDefaultControlView, getFieldRegistryEntry, getTypeDefault, isActiveJobStatus, isTerminalJobStatus, jobStatusLabel, normalizeGeneratedJobInput, normalizeJobPercent, normalizeJobState, pluginFormDataFromPayload, resolveCurrentPluginId, resolveJobCapabilities, resolvePluginBaseUrl, uploadEndpoint, useApi, useControlSchema, useControlWorkspace, useEventStream, useForm, useFormBuilder, useJobCenter, useJobsEndpoint, usePresence, useRealtime, useSettingsEndpoint };

package/dist/{shell-BIH8Rc21.js → shell-lDf_EY-x.js}

@@ -1,7 +1,7 @@
 import { i as useEventListener, o as __exportAll, r as useFocusTrap } from "./useDropdownState-8yWMu-7_.js";
 import { E as useMenuKeyboard, H as useListSelection, R as useRovingFocus, U as useSelectionLimit } from "./records-DnK_1Q_S.js";
 import { B as compareSortValues, V as useSortedItems, i as useReorderAnnouncer, n as reorderList, r as useListReorder, t as REORDER_ANNOUNCER_STYLE } from "./useListReorder-DPynGrCj.js";
-import { _ as AppLayout_default, f as AppTopBar_default, t as AppSidebar_default, v as usePluginWorkspace } from "./AppSidebar-DGK5i-hJ.js";
+import { _ as AppLayout_default, f as AppTopBar_default, t as AppSidebar_default, v as usePluginWorkspace } from "./AppSidebar-CIXJBzDv.js";
 import { t as useDebouncedWatch } from "./useDebouncedWatch-BPwyl6eS.js";
 import { t as useExpansionSet } from "./useExpansionSet-CvoNMZJi.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, shallowRef, toValue, watch } from "vue";
@@ -194,4 +194,4 @@ var shell_exports = /* @__PURE__ */ __exportAll({
 //#endregion
 export { useManualLayoutResize as a, resizedVerticalSplitPercent as i, resizedLeadingPanelWidth as n, LayoutResizeHandle_default as o, resizedTrailingPanelWidth as r, shell_exports as t };
 
-//# sourceMappingURL=shell-BIH8Rc21.js.map
+//# sourceMappingURL=shell-lDf_EY-x.js.map

package/dist/{shell-BIH8Rc21.js.map → shell-lDf_EY-x.js.map}

@@ -1 +1 @@
-{"version":3,"file":"shell-BIH8Rc21.js","names":[],"sources":["../src/components/LayoutResizeHandle.vue","../src/components/LayoutResizeHandle.vue","../src/composables/useManualLayoutResize.ts","../src/shell.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/** Accessible pointer and keyboard handle for resizable workbench panes. */\ninterface Props {\n  modelValue: number\n  min: number\n  max: number\n  label: string\n  orientation: 'vertical' | 'horizontal'\n  edge?: 'left' | 'right'\n  step?: number\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  edge: undefined,\n  step: 10,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: number]\n  'resize-start': [event: PointerEvent]\n}>()\n\nfunction update(value: number): void {\n  emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (props.disabled) return\n  const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'\n  const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'\n  if (event.key === decrement) update(props.modelValue - props.step)\n  else if (event.key === increment) update(props.modelValue + props.step)\n  else if (event.key === 'Home') update(props.min)\n  else if (event.key === 'End') update(props.max)\n  else return\n  event.preventDefault()\n}\n</script>\n\n<template>\n  <div\n    role=\"separator\"\n    :tabindex=\"disabled ? -1 : 0\"\n    :class=\"[\n      'mint-layout-resize-handle',\n      `mint-layout-resize-handle--${orientation}`,\n      edge ? `mint-layout-resize-handle--edge-${edge}` : '',\n    ]\"\n    :aria-label=\"label\"\n    :aria-orientation=\"orientation\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuenow=\"modelValue\"\n    :aria-disabled=\"disabled || undefined\"\n    @pointerdown=\"!disabled && emit('resize-start', $event)\"\n    @keydown=\"handleKeydown\"\n  >\n    <span class=\"mint-layout-resize-handle__bar\" aria-hidden=\"true\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** Accessible pointer and keyboard handle for resizable workbench panes. */\ninterface Props {\n  modelValue: number\n  min: number\n  max: number\n  label: string\n  orientation: 'vertical' | 'horizontal'\n  edge?: 'left' | 'right'\n  step?: number\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  edge: undefined,\n  step: 10,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: number]\n  'resize-start': [event: PointerEvent]\n}>()\n\nfunction update(value: number): void {\n  emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (props.disabled) return\n  const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'\n  const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'\n  if (event.key === decrement) update(props.modelValue - props.step)\n  else if (event.key === increment) update(props.modelValue + props.step)\n  else if (event.key === 'Home') update(props.min)\n  else if (event.key === 'End') update(props.max)\n  else return\n  event.preventDefault()\n}\n</script>\n\n<template>\n  <div\n    role=\"separator\"\n    :tabindex=\"disabled ? -1 : 0\"\n    :class=\"[\n      'mint-layout-resize-handle',\n      `mint-layout-resize-handle--${orientation}`,\n      edge ? `mint-layout-resize-handle--edge-${edge}` : '',\n    ]\"\n    :aria-label=\"label\"\n    :aria-orientation=\"orientation\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuenow=\"modelValue\"\n    :aria-disabled=\"disabled || undefined\"\n    @pointerdown=\"!disabled && emit('resize-start', $event)\"\n    @keydown=\"handleKeydown\"\n  >\n    <span class=\"mint-layout-resize-handle__bar\" aria-hidden=\"true\" />\n  </div>\n</template>\n","import { computed, onBeforeUnmount, shallowRef, toValue, watch, type MaybeRefOrGetter } from 'vue'\n\nexport interface ResizePanelWidthConstraints {\n  minWidth: number\n  maxWidth: number\n  mainMinWidth?: number\n  layoutGap?: number\n}\n\nexport interface ResizePercentConstraints {\n  minPercent: number\n  maxPercent: number\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction availablePanelWidth(\n  containerWidth: number,\n  constraints: ResizePanelWidthConstraints,\n): number {\n  return Math.min(\n    constraints.maxWidth,\n    containerWidth - (constraints.mainMinWidth ?? 0) - (constraints.layoutGap ?? 0),\n  )\n}\n\nexport function resizedLeadingPanelWidth(\n  startWidth: number,\n  deltaX: number,\n  containerWidth: number,\n  constraints: ResizePanelWidthConstraints,\n): number {\n  return Math.round(clamp(\n    startWidth + deltaX,\n    constraints.minWidth,\n    Math.max(constraints.minWidth, availablePanelWidth(containerWidth, constraints)),\n  ))\n}\n\nexport function resizedTrailingPanelWidth(\n  startWidth: number,\n  deltaX: number,\n  containerWidth: number,\n  constraints: ResizePanelWidthConstraints,\n): number {\n  return resizedLeadingPanelWidth(startWidth, -deltaX, containerWidth, constraints)\n}\n\nexport function resizedVerticalSplitPercent(\n  startPercent: number,\n  deltaY: number,\n  containerHeight: number,\n  constraints: ResizePercentConstraints,\n): number {\n  if (containerHeight <= 0) return startPercent\n  return Math.round(clamp(\n    startPercent + (deltaY / containerHeight) * 100,\n    constraints.minPercent,\n    constraints.maxPercent,\n  ))\n}\n\nexport interface ManualLayoutResizeContext<TKind extends string> {\n  kind: TKind\n  startValue: number\n  deltaX: number\n  deltaY: number\n  containerRect: DOMRectReadOnly\n  secondaryRect: DOMRectReadOnly | null\n}\n\nexport interface ManualLayoutResizeTarget<TKind extends string> {\n  cursor?: string\n  getContainerElement: () => HTMLElement | null\n  getSecondaryElement?: () => HTMLElement | null\n  getStartValue: () => number\n  onResize: (context: ManualLayoutResizeContext<TKind>) => void\n}\n\n/** Coordinates pointer-driven resizing for one or more layout splitters. */\nexport function useManualLayoutResize<TKind extends string>(options: {\n  enabled: MaybeRefOrGetter<boolean>\n  resolveTarget: (kind: TKind) => ManualLayoutResizeTarget<TKind> | null\n}) {\n  const activeResize = shallowRef<{\n    kind: TKind\n    startClientX: number\n    startClientY: number\n    startValue: number\n    containerRect: DOMRectReadOnly\n    secondaryRect: DOMRectReadOnly | null\n    cursor: string\n  } | null>(null)\n  const isResizing = computed(() => activeResize.value !== null)\n  let previousBodyCursor = ''\n  let previousBodyUserSelect = ''\n\n  function stopResize(): void {\n    if (!activeResize.value) return\n    activeResize.value = null\n    window.removeEventListener('pointermove', handlePointerMove)\n    window.removeEventListener('pointerup', stopResize)\n    window.removeEventListener('pointercancel', stopResize)\n    if (typeof document !== 'undefined') {\n      document.body.style.cursor = previousBodyCursor\n      document.body.style.userSelect = previousBodyUserSelect\n    }\n  }\n\n  function handlePointerMove(event: PointerEvent): void {\n    const state = activeResize.value\n    if (!state) return\n    options.resolveTarget(state.kind)?.onResize({\n      kind: state.kind,\n      startValue: state.startValue,\n      deltaX: event.clientX - state.startClientX,\n      deltaY: event.clientY - state.startClientY,\n      containerRect: state.containerRect,\n      secondaryRect: state.secondaryRect,\n    })\n  }\n\n  function startResize(kind: TKind, event: PointerEvent): void {\n    if (!toValue(options.enabled) || event.button !== 0) return\n    const target = options.resolveTarget(kind)\n    const containerRect = target?.getContainerElement()?.getBoundingClientRect()\n    if (!target || !containerRect) return\n\n    event.preventDefault()\n    if (event.currentTarget instanceof HTMLElement) {\n      event.currentTarget.setPointerCapture(event.pointerId)\n    }\n    const secondary = target.getSecondaryElement?.() ?? null\n    activeResize.value = {\n      kind,\n      startClientX: event.clientX,\n      startClientY: event.clientY,\n      startValue: target.getStartValue(),\n      containerRect,\n      secondaryRect: secondary?.getBoundingClientRect() ?? null,\n      cursor: target.cursor ?? 'col-resize',\n    }\n\n    if (typeof document !== 'undefined') {\n      previousBodyCursor = document.body.style.cursor\n      previousBodyUserSelect = document.body.style.userSelect\n      document.body.style.cursor = activeResize.value.cursor\n      document.body.style.userSelect = 'none'\n    }\n    window.addEventListener('pointermove', handlePointerMove)\n    window.addEventListener('pointerup', stopResize)\n    window.addEventListener('pointercancel', stopResize)\n  }\n\n  function isResizingKind(kind: TKind): boolean {\n    return activeResize.value?.kind === kind\n  }\n\n  watch(() => toValue(options.enabled), enabled => { if (!enabled) stopResize() })\n  onBeforeUnmount(stopResize)\n\n  return { activeResize, isResizing, isResizingKind, startResize, stopResize }\n}\n","// Application shell components (`@morscherlab/mint-sdk/shell`).\n\n// Layout components\nexport { default as AppTopBar } from './components/AppTopBar.vue'\nexport { default as AppSidebar } from './components/AppSidebar.vue'\nexport { default as AppLayout } from './components/AppLayout.vue'\nexport { default as LayoutResizeHandle } from './components/LayoutResizeHandle.vue'\n\n// Headless interaction composables\nexport {\n  useEventListener,\n  type EventListenerEnabled,\n  type EventFor,\n  type EventListenerStop,\n  type EventMapFor,\n  type EventTargetGetter,\n  type EventTargetLike,\n  type UseEventListenerObjectOptions,\n  type UseEventListenerOptions,\n} from './composables/useEventListener'\nexport {\n  useDebouncedWatch,\n  type DebouncedWatchCallback,\n  type DebouncedWatchCleanup,\n  type DebouncedWatchSource,\n  type UseDebouncedWatchOptions,\n  type UseDebouncedWatchReturn,\n} from './composables/useDebouncedWatch'\nexport {\n  useFocusTrap,\n  type UseFocusTrapOptions,\n  type UseFocusTrapReturn,\n} from './composables/useFocusTrap'\nexport {\n  useRovingFocus,\n  type UseRovingFocusOptions,\n  type UseRovingFocusReturn,\n} from './composables/useRovingFocus'\nexport {\n  reorderList,\n  useListReorder,\n  useReorderAnnouncer,\n  REORDER_ANNOUNCER_STYLE,\n  type ListReorderMove,\n  type UseListReorderOptions,\n  type UseListReorderReturn,\n  type UseReorderAnnouncerReturn,\n} from './composables/useListReorder'\nexport {\n  useMenuKeyboard,\n  type UseMenuKeyboardOptions,\n  type UseMenuKeyboardReturn,\n} from './composables/useMenuKeyboard'\n\n// Layout, selection, expansion and sort primitives\nexport {\n  resizedLeadingPanelWidth,\n  resizedTrailingPanelWidth,\n  resizedVerticalSplitPercent,\n  useManualLayoutResize,\n  type ManualLayoutResizeContext,\n  type ManualLayoutResizeTarget,\n  type ResizePanelWidthConstraints,\n  type ResizePercentConstraints,\n} from './composables/useManualLayoutResize'\nexport {\n  useSelectionLimit,\n  type SelectionLimitSource,\n  type UseSelectionLimitOptions,\n  type UseSelectionLimitReturn,\n} from './composables/useSelectionLimit'\nexport {\n  useListSelection,\n  type ListSelectionSource,\n  type ListSelectionValue,\n  type UseListSelectionOptions,\n  type UseListSelectionReturn,\n  type WidenListSelectionValue,\n} from './composables/useListSelection'\nexport {\n  useExpansionSet,\n  type ExpansionSetSource,\n  type UseExpansionSetOptions,\n  type UseExpansionSetReturn,\n} from './composables/useExpansionSet'\nexport {\n  compareSortValues,\n  useSortedItems,\n  type CompareSortValuesOptions,\n  type SortComparator,\n  type SortComparatorContext,\n  type SortDescriptor,\n  type SortedItemsSource,\n  type SortOrder,\n  type UseSortedItemsOptions,\n  type UseSortedItemsReturn,\n} from './composables/useSortedItems'\nexport {\n  usePluginWorkspace,\n  type PluginWorkspaceSlotsLike,\n  type UsePluginWorkspaceOptions,\n  type UsePluginWorkspaceReturn,\n} from './composables/usePluginWorkspace'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAKb,SAAS,OAAO,OAAqB;GACnC,KAAK,qBAAqB,KAAK,IAAI,MAAM,KAAK,KAAK,IAAI,MAAM,KAAK,KAAK,CAAC,CAAC;EAC3E;EAEA,SAAS,cAAc,OAA4B;GACjD,IAAI,MAAM,UAAU;GACpB,MAAM,YAAY,MAAM,gBAAgB,aAAa,cAAc;GACnE,MAAM,YAAY,MAAM,gBAAgB,aAAa,eAAe;GACpE,IAAI,MAAM,QAAQ,WAAW,OAAO,MAAM,aAAa,MAAM,IAAI;QAC5D,IAAI,MAAM,QAAQ,WAAW,OAAO,MAAM,aAAa,MAAM,IAAI;QACjE,IAAI,MAAM,QAAQ,QAAQ,OAAO,MAAM,GAAG;QAC1C,IAAI,MAAM,QAAQ,OAAO,OAAO,MAAM,GAAG;QACzC;GACL,MAAM,eAAe;EACvB;;GAIE,OAAA,UAAA,GAAA,mBAkBM,OAAA;IAjBJ,MAAK;IACJ,UAAU,QAAA,WAAQ,KAAA;IAClB,OAAK,eAAA;;KAA2E,8BAAA,QAAA;KAAqB,QAAA,OAAI,mCAAsC,QAAA,SAAI;;IAKnJ,cAAY,QAAA;IACZ,oBAAkB,QAAA;IAClB,iBAAe,QAAA;IACf,iBAAe,QAAA;IACf,iBAAe,QAAA;IACf,iBAAe,QAAA,YAAY,KAAA;IAC3B,eAAW,OAAA,OAAA,OAAA,MAAA,WAAA,CAAG,QAAA,YAAY,KAAI,gBAAiB,MAAM;IACrD,WAAS;GAEV,GAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,mBAAkE,QAAA;IAA5D,OAAM;IAAiC,eAAY;;;;;;;AE7C7D,SAAS,MAAM,OAAe,KAAa,KAAqB;CAC9D,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAEA,SAAS,oBACP,gBACA,aACQ;CACR,OAAO,KAAK,IACV,YAAY,UACZ,kBAAkB,YAAY,gBAAgB,MAAM,YAAY,aAAa,EAC/E;AACF;AAEA,SAAgB,yBACd,YACA,QACA,gBACA,aACQ;CACR,OAAO,KAAK,MAAM,MAChB,aAAa,QACb,YAAY,UACZ,KAAK,IAAI,YAAY,UAAU,oBAAoB,gBAAgB,WAAW,CAAC,CACjF,CAAC;AACH;AAEA,SAAgB,0BACd,YACA,QACA,gBACA,aACQ;CACR,OAAO,yBAAyB,YAAY,CAAC,QAAQ,gBAAgB,WAAW;AAClF;AAEA,SAAgB,4BACd,cACA,QACA,iBACA,aACQ;CACR,IAAI,mBAAmB,GAAG,OAAO;CACjC,OAAO,KAAK,MAAM,MAChB,eAAgB,SAAS,kBAAmB,KAC5C,YAAY,YACZ,YAAY,UACd,CAAC;AACH;;AAoBA,SAAgB,sBAA4C,SAGzD;CACD,MAAM,eAAe,WAQX,IAAI;CACd,MAAM,aAAa,eAAe,aAAa,UAAU,IAAI;CAC7D,IAAI,qBAAqB;CACzB,IAAI,yBAAyB;CAE7B,SAAS,aAAmB;EAC1B,IAAI,CAAC,aAAa,OAAO;EACzB,aAAa,QAAQ;EACrB,OAAO,oBAAoB,eAAe,iBAAiB;EAC3D,OAAO,oBAAoB,aAAa,UAAU;EAClD,OAAO,oBAAoB,iBAAiB,UAAU;EACtD,IAAI,OAAO,aAAa,aAAa;GACnC,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,KAAK,MAAM,aAAa;EACnC;CACF;CAEA,SAAS,kBAAkB,OAA2B;EACpD,MAAM,QAAQ,aAAa;EAC3B,IAAI,CAAC,OAAO;EACZ,QAAQ,cAAc,MAAM,IAAI,CAAC,EAAE,SAAS;GAC1C,MAAM,MAAM;GACZ,YAAY,MAAM;GAClB,QAAQ,MAAM,UAAU,MAAM;GAC9B,QAAQ,MAAM,UAAU,MAAM;GAC9B,eAAe,MAAM;GACrB,eAAe,MAAM;EACvB,CAAC;CACH;CAEA,SAAS,YAAY,MAAa,OAA2B;EAC3D,IAAI,CAAC,QAAQ,QAAQ,OAAO,KAAK,MAAM,WAAW,GAAG;EACrD,MAAM,SAAS,QAAQ,cAAc,IAAI;EACzC,MAAM,gBAAgB,QAAQ,oBAAoB,CAAC,EAAE,sBAAsB;EAC3E,IAAI,CAAC,UAAU,CAAC,eAAe;EAE/B,MAAM,eAAe;EACrB,IAAI,MAAM,yBAAyB,aACjC,MAAM,cAAc,kBAAkB,MAAM,SAAS;EAEvD,MAAM,YAAY,OAAO,sBAAsB,KAAK;EACpD,aAAa,QAAQ;GACnB;GACA,cAAc,MAAM;GACpB,cAAc,MAAM;GACpB,YAAY,OAAO,cAAc;GACjC;GACA,eAAe,WAAW,sBAAsB,KAAK;GACrD,QAAQ,OAAO,UAAU;EAC3B;EAEA,IAAI,OAAO,aAAa,aAAa;GACnC,qBAAqB,SAAS,KAAK,MAAM;GACzC,yBAAyB,SAAS,KAAK,MAAM;GAC7C,SAAS,KAAK,MAAM,SAAS,aAAa,MAAM;GAChD,SAAS,KAAK,MAAM,aAAa;EACnC;EACA,OAAO,iBAAiB,eAAe,iBAAiB;EACxD,OAAO,iBAAiB,aAAa,UAAU;EAC/C,OAAO,iBAAiB,iBAAiB,UAAU;CACrD;CAEA,SAAS,eAAe,MAAsB;EAC5C,OAAO,aAAa,OAAO,SAAS;CACtC;CAEA,YAAY,QAAQ,QAAQ,OAAO,IAAG,YAAW;EAAE,IAAI,CAAC,SAAS,WAAW;CAAE,CAAC;CAC/E,gBAAgB,UAAU;CAE1B,OAAO;EAAE;EAAc;EAAY;EAAgB;EAAa;CAAW;AAC7E"}
+{"version":3,"file":"shell-lDf_EY-x.js","names":[],"sources":["../src/components/LayoutResizeHandle.vue","../src/components/LayoutResizeHandle.vue","../src/composables/useManualLayoutResize.ts","../src/shell.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/** Accessible pointer and keyboard handle for resizable workbench panes. */\ninterface Props {\n  modelValue: number\n  min: number\n  max: number\n  label: string\n  orientation: 'vertical' | 'horizontal'\n  edge?: 'left' | 'right'\n  step?: number\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  edge: undefined,\n  step: 10,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: number]\n  'resize-start': [event: PointerEvent]\n}>()\n\nfunction update(value: number): void {\n  emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (props.disabled) return\n  const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'\n  const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'\n  if (event.key === decrement) update(props.modelValue - props.step)\n  else if (event.key === increment) update(props.modelValue + props.step)\n  else if (event.key === 'Home') update(props.min)\n  else if (event.key === 'End') update(props.max)\n  else return\n  event.preventDefault()\n}\n</script>\n\n<template>\n  <div\n    role=\"separator\"\n    :tabindex=\"disabled ? -1 : 0\"\n    :class=\"[\n      'mint-layout-resize-handle',\n      `mint-layout-resize-handle--${orientation}`,\n      edge ? `mint-layout-resize-handle--edge-${edge}` : '',\n    ]\"\n    :aria-label=\"label\"\n    :aria-orientation=\"orientation\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuenow=\"modelValue\"\n    :aria-disabled=\"disabled || undefined\"\n    @pointerdown=\"!disabled && emit('resize-start', $event)\"\n    @keydown=\"handleKeydown\"\n  >\n    <span class=\"mint-layout-resize-handle__bar\" aria-hidden=\"true\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** Accessible pointer and keyboard handle for resizable workbench panes. */\ninterface Props {\n  modelValue: number\n  min: number\n  max: number\n  label: string\n  orientation: 'vertical' | 'horizontal'\n  edge?: 'left' | 'right'\n  step?: number\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  edge: undefined,\n  step: 10,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: number]\n  'resize-start': [event: PointerEvent]\n}>()\n\nfunction update(value: number): void {\n  emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))\n}\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (props.disabled) return\n  const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'\n  const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'\n  if (event.key === decrement) update(props.modelValue - props.step)\n  else if (event.key === increment) update(props.modelValue + props.step)\n  else if (event.key === 'Home') update(props.min)\n  else if (event.key === 'End') update(props.max)\n  else return\n  event.preventDefault()\n}\n</script>\n\n<template>\n  <div\n    role=\"separator\"\n    :tabindex=\"disabled ? -1 : 0\"\n    :class=\"[\n      'mint-layout-resize-handle',\n      `mint-layout-resize-handle--${orientation}`,\n      edge ? `mint-layout-resize-handle--edge-${edge}` : '',\n    ]\"\n    :aria-label=\"label\"\n    :aria-orientation=\"orientation\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuenow=\"modelValue\"\n    :aria-disabled=\"disabled || undefined\"\n    @pointerdown=\"!disabled && emit('resize-start', $event)\"\n    @keydown=\"handleKeydown\"\n  >\n    <span class=\"mint-layout-resize-handle__bar\" aria-hidden=\"true\" />\n  </div>\n</template>\n","import { computed, onBeforeUnmount, shallowRef, toValue, watch, type MaybeRefOrGetter } from 'vue'\n\nexport interface ResizePanelWidthConstraints {\n  minWidth: number\n  maxWidth: number\n  mainMinWidth?: number\n  layoutGap?: number\n}\n\nexport interface ResizePercentConstraints {\n  minPercent: number\n  maxPercent: number\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value))\n}\n\nfunction availablePanelWidth(\n  containerWidth: number,\n  constraints: ResizePanelWidthConstraints,\n): number {\n  return Math.min(\n    constraints.maxWidth,\n    containerWidth - (constraints.mainMinWidth ?? 0) - (constraints.layoutGap ?? 0),\n  )\n}\n\nexport function resizedLeadingPanelWidth(\n  startWidth: number,\n  deltaX: number,\n  containerWidth: number,\n  constraints: ResizePanelWidthConstraints,\n): number {\n  return Math.round(clamp(\n    startWidth + deltaX,\n    constraints.minWidth,\n    Math.max(constraints.minWidth, availablePanelWidth(containerWidth, constraints)),\n  ))\n}\n\nexport function resizedTrailingPanelWidth(\n  startWidth: number,\n  deltaX: number,\n  containerWidth: number,\n  constraints: ResizePanelWidthConstraints,\n): number {\n  return resizedLeadingPanelWidth(startWidth, -deltaX, containerWidth, constraints)\n}\n\nexport function resizedVerticalSplitPercent(\n  startPercent: number,\n  deltaY: number,\n  containerHeight: number,\n  constraints: ResizePercentConstraints,\n): number {\n  if (containerHeight <= 0) return startPercent\n  return Math.round(clamp(\n    startPercent + (deltaY / containerHeight) * 100,\n    constraints.minPercent,\n    constraints.maxPercent,\n  ))\n}\n\nexport interface ManualLayoutResizeContext<TKind extends string> {\n  kind: TKind\n  startValue: number\n  deltaX: number\n  deltaY: number\n  containerRect: DOMRectReadOnly\n  secondaryRect: DOMRectReadOnly | null\n}\n\nexport interface ManualLayoutResizeTarget<TKind extends string> {\n  cursor?: string\n  getContainerElement: () => HTMLElement | null\n  getSecondaryElement?: () => HTMLElement | null\n  getStartValue: () => number\n  onResize: (context: ManualLayoutResizeContext<TKind>) => void\n}\n\n/** Coordinates pointer-driven resizing for one or more layout splitters. */\nexport function useManualLayoutResize<TKind extends string>(options: {\n  enabled: MaybeRefOrGetter<boolean>\n  resolveTarget: (kind: TKind) => ManualLayoutResizeTarget<TKind> | null\n}) {\n  const activeResize = shallowRef<{\n    kind: TKind\n    startClientX: number\n    startClientY: number\n    startValue: number\n    containerRect: DOMRectReadOnly\n    secondaryRect: DOMRectReadOnly | null\n    cursor: string\n  } | null>(null)\n  const isResizing = computed(() => activeResize.value !== null)\n  let previousBodyCursor = ''\n  let previousBodyUserSelect = ''\n\n  function stopResize(): void {\n    if (!activeResize.value) return\n    activeResize.value = null\n    window.removeEventListener('pointermove', handlePointerMove)\n    window.removeEventListener('pointerup', stopResize)\n    window.removeEventListener('pointercancel', stopResize)\n    if (typeof document !== 'undefined') {\n      document.body.style.cursor = previousBodyCursor\n      document.body.style.userSelect = previousBodyUserSelect\n    }\n  }\n\n  function handlePointerMove(event: PointerEvent): void {\n    const state = activeResize.value\n    if (!state) return\n    options.resolveTarget(state.kind)?.onResize({\n      kind: state.kind,\n      startValue: state.startValue,\n      deltaX: event.clientX - state.startClientX,\n      deltaY: event.clientY - state.startClientY,\n      containerRect: state.containerRect,\n      secondaryRect: state.secondaryRect,\n    })\n  }\n\n  function startResize(kind: TKind, event: PointerEvent): void {\n    if (!toValue(options.enabled) || event.button !== 0) return\n    const target = options.resolveTarget(kind)\n    const containerRect = target?.getContainerElement()?.getBoundingClientRect()\n    if (!target || !containerRect) return\n\n    event.preventDefault()\n    if (event.currentTarget instanceof HTMLElement) {\n      event.currentTarget.setPointerCapture(event.pointerId)\n    }\n    const secondary = target.getSecondaryElement?.() ?? null\n    activeResize.value = {\n      kind,\n      startClientX: event.clientX,\n      startClientY: event.clientY,\n      startValue: target.getStartValue(),\n      containerRect,\n      secondaryRect: secondary?.getBoundingClientRect() ?? null,\n      cursor: target.cursor ?? 'col-resize',\n    }\n\n    if (typeof document !== 'undefined') {\n      previousBodyCursor = document.body.style.cursor\n      previousBodyUserSelect = document.body.style.userSelect\n      document.body.style.cursor = activeResize.value.cursor\n      document.body.style.userSelect = 'none'\n    }\n    window.addEventListener('pointermove', handlePointerMove)\n    window.addEventListener('pointerup', stopResize)\n    window.addEventListener('pointercancel', stopResize)\n  }\n\n  function isResizingKind(kind: TKind): boolean {\n    return activeResize.value?.kind === kind\n  }\n\n  watch(() => toValue(options.enabled), enabled => { if (!enabled) stopResize() })\n  onBeforeUnmount(stopResize)\n\n  return { activeResize, isResizing, isResizingKind, startResize, stopResize }\n}\n","// Application shell components (`@morscherlab/mint-sdk/shell`).\n\n// Layout components\nexport { default as AppTopBar } from './components/AppTopBar.vue'\nexport { default as AppSidebar } from './components/AppSidebar.vue'\nexport { default as AppLayout } from './components/AppLayout.vue'\nexport { default as LayoutResizeHandle } from './components/LayoutResizeHandle.vue'\n\n// Headless interaction composables\nexport {\n  useEventListener,\n  type EventListenerEnabled,\n  type EventFor,\n  type EventListenerStop,\n  type EventMapFor,\n  type EventTargetGetter,\n  type EventTargetLike,\n  type UseEventListenerObjectOptions,\n  type UseEventListenerOptions,\n} from './composables/useEventListener'\nexport {\n  useDebouncedWatch,\n  type DebouncedWatchCallback,\n  type DebouncedWatchCleanup,\n  type DebouncedWatchSource,\n  type UseDebouncedWatchOptions,\n  type UseDebouncedWatchReturn,\n} from './composables/useDebouncedWatch'\nexport {\n  useFocusTrap,\n  type UseFocusTrapOptions,\n  type UseFocusTrapReturn,\n} from './composables/useFocusTrap'\nexport {\n  useRovingFocus,\n  type UseRovingFocusOptions,\n  type UseRovingFocusReturn,\n} from './composables/useRovingFocus'\nexport {\n  reorderList,\n  useListReorder,\n  useReorderAnnouncer,\n  REORDER_ANNOUNCER_STYLE,\n  type ListReorderMove,\n  type UseListReorderOptions,\n  type UseListReorderReturn,\n  type UseReorderAnnouncerReturn,\n} from './composables/useListReorder'\nexport {\n  useMenuKeyboard,\n  type UseMenuKeyboardOptions,\n  type UseMenuKeyboardReturn,\n} from './composables/useMenuKeyboard'\n\n// Layout, selection, expansion and sort primitives\nexport {\n  resizedLeadingPanelWidth,\n  resizedTrailingPanelWidth,\n  resizedVerticalSplitPercent,\n  useManualLayoutResize,\n  type ManualLayoutResizeContext,\n  type ManualLayoutResizeTarget,\n  type ResizePanelWidthConstraints,\n  type ResizePercentConstraints,\n} from './composables/useManualLayoutResize'\nexport {\n  useSelectionLimit,\n  type SelectionLimitSource,\n  type UseSelectionLimitOptions,\n  type UseSelectionLimitReturn,\n} from './composables/useSelectionLimit'\nexport {\n  useListSelection,\n  type ListSelectionSource,\n  type ListSelectionValue,\n  type UseListSelectionOptions,\n  type UseListSelectionReturn,\n  type WidenListSelectionValue,\n} from './composables/useListSelection'\nexport {\n  useExpansionSet,\n  type ExpansionSetSource,\n  type UseExpansionSetOptions,\n  type UseExpansionSetReturn,\n} from './composables/useExpansionSet'\nexport {\n  compareSortValues,\n  useSortedItems,\n  type CompareSortValuesOptions,\n  type SortComparator,\n  type SortComparatorContext,\n  type SortDescriptor,\n  type SortedItemsSource,\n  type SortOrder,\n  type UseSortedItemsOptions,\n  type UseSortedItemsReturn,\n} from './composables/useSortedItems'\nexport {\n  usePluginWorkspace,\n  type PluginWorkspaceSlotsLike,\n  type UsePluginWorkspaceOptions,\n  type UsePluginWorkspaceReturn,\n} from './composables/usePluginWorkspace'\n"],"mappings":"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"}

package/dist/shell.js

@@ -1,8 +1,8 @@
 import { i as useEventListener, r as useFocusTrap } from "./useDropdownState-8yWMu-7_.js";
 import { E as useMenuKeyboard, H as useListSelection, R as useRovingFocus, U as useSelectionLimit } from "./records-DnK_1Q_S.js";
 import { B as compareSortValues, V as useSortedItems, i as useReorderAnnouncer, n as reorderList, r as useListReorder, t as REORDER_ANNOUNCER_STYLE } from "./useListReorder-DPynGrCj.js";
-import { _ as AppLayout_default, f as AppTopBar_default, t as AppSidebar_default, v as usePluginWorkspace } from "./AppSidebar-DGK5i-hJ.js";
+import { _ as AppLayout_default, f as AppTopBar_default, t as AppSidebar_default, v as usePluginWorkspace } from "./AppSidebar-CIXJBzDv.js";
 import { t as useDebouncedWatch } from "./useDebouncedWatch-BPwyl6eS.js";
 import { t as useExpansionSet } from "./useExpansionSet-CvoNMZJi.js";
-import { a as useManualLayoutResize, i as resizedVerticalSplitPercent, n as resizedLeadingPanelWidth, o as LayoutResizeHandle_default, r as resizedTrailingPanelWidth } from "./shell-BIH8Rc21.js";
+import { a as useManualLayoutResize, i as resizedVerticalSplitPercent, n as resizedLeadingPanelWidth, o as LayoutResizeHandle_default, r as resizedTrailingPanelWidth } from "./shell-lDf_EY-x.js";
 export { AppLayout_default as AppLayout, AppSidebar_default as AppSidebar, AppTopBar_default as AppTopBar, LayoutResizeHandle_default as LayoutResizeHandle, REORDER_ANNOUNCER_STYLE, compareSortValues, reorderList, resizedLeadingPanelWidth, resizedTrailingPanelWidth, resizedVerticalSplitPercent, useDebouncedWatch, useEventListener, useExpansionSet, useFocusTrap, useListReorder, useListSelection, useManualLayoutResize, useMenuKeyboard, usePluginWorkspace, useReorderAnnouncer, useRovingFocus, useSelectionLimit, useSortedItems };

package/dist/styles.css

@@ -2503,6 +2503,161 @@ button, input, select, textarea {
   white-space: nowrap;
   user-select: none;
 }
+
+/* ─── Run slot: [ experiment | job ] ───
+   While a job shows, one border wraps the experiment chip and the job
+   segment, as the experiment popover does for Save. The wrapper does not
+   clip: the popover panel and the focus rings reach outside it, so each
+   segment rounds its own outer corners. The idle Jobs button stands apart
+   with its own border. */
+.mint-topbar__run-slot {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.mint-topbar__run-slot--joined {
+  gap: 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-card);
+}
+
+.mint-topbar__run-slot--joined .mint-experiment-popover,
+.mint-topbar__run-slot--joined .mint-experiment-popover__trigger {
+  border: 0;
+  border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px);
+}
+
+/* The job takes the name's place: the name folds away while the job grows in,
+   and the code badge stays. The name stays in the accessible name. A trigger
+   with no code, the empty placeholder and the error text keep their text. */
+.mint-topbar__run-slot .mint-experiment-popover__trigger-text {
+  transition:
+    max-width 200ms ease,
+    opacity 150ms ease,
+    margin 200ms ease;
+}
+
+.mint-topbar__run-slot--joined
+  .mint-experiment-popover__trigger:has(.mint-exp-code)
+  .mint-experiment-popover__trigger-text {
+  max-width: 0 !important; /* beats the inline maxNameWidth */
+  margin-inline-start: -0.5rem; /* takes back the trigger gap */
+  opacity: 0;
+}
+
+.mint-topbar__job {
+  display: inline-flex;
+  max-width: 6rem; /* close to the content (icon + bar, or "Jobs"), so the fold is even */
+  overflow: hidden;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+  height: 30px;
+  padding: 0 0.625rem;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-topbar__run-slot--joined .mint-topbar__job {
+  border-radius: calc(var(--radius-md) - 1px);
+}
+
+.mint-topbar__run-slot--joined .mint-experiment-popover + .mint-topbar__job {
+  border-left: 1px solid var(--border-color);
+  border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
+}
+
+.mint-topbar__job--idle {
+  height: 32px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-card);
+}
+
+.mint-topbar__job--idle:hover,
+.mint-topbar__job--neutral:hover {
+  background: var(--bg-hover);
+}
+
+.mint-topbar__job:focus-visible {
+  outline: none;
+  box-shadow: inset var(--focus-ring);
+}
+
+.mint-topbar__job--primary { background: var(--color-primary-soft); color: var(--_ink-primary); }
+.mint-topbar__job--warning { background: var(--mint-warning-bg); color: var(--mint-warning-text); }
+.mint-topbar__job--success { background: var(--mint-success-bg); color: color-mix(in srgb, var(--mint-success) 50%, var(--text-primary)); }
+.mint-topbar__job--error { background: var(--mint-error-bg); color: var(--_ink-error); }
+
+.mint-topbar__job--primary:hover,
+.mint-topbar__job--warning:hover,
+.mint-topbar__job--success:hover,
+.mint-topbar__job--error:hover {
+  filter: brightness(0.97);
+}
+
+.mint-topbar__job-icon {
+  flex-shrink: 0;
+}
+
+.mint-topbar__job-icon--spin {
+  animation: mint-topbar-job-spin 1s linear infinite;
+}
+
+@keyframes mint-topbar-job-spin {
+  to { transform: rotate(360deg); }
+}
+
+.mint-topbar__job-bar {
+  width: 2rem;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--border-color);
+  overflow: hidden;
+}
+
+.mint-topbar__job-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--color-primary);
+  transition: width var(--mint-transition);
+}
+
+/* Enter and leave: the job grows in from zero width and folds back out. */
+.mint-topbar-job-enter-active,
+.mint-topbar-job-leave-active {
+  transition:
+    max-width 200ms ease,
+    padding 200ms ease,
+    opacity 150ms ease;
+}
+
+.mint-topbar-job-enter-from,
+.mint-topbar-job-leave-to {
+  max-width: 0;
+  padding-inline: 0;
+  opacity: 0;
+}
+
+/* Screen-reader only: announces status changes of the shown job. */
+.mint-topbar__job-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
 /* BaseButton Component Styles */
 
 .mint-button {
@@ -16785,13 +16940,26 @@ button.mint-unit-input__unit:focus-visible {
 }
 
 /* Footer with clear selection */
+.mint-experiment-selector__description {
+  padding: 0 1.25rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
 .mint-experiment-selector__footer {
   display: flex;
+  align-items: center;
+  gap: 0.75rem;
   justify-content: flex-start;
   padding: 0.5rem 1.25rem 0.75rem;
   border-top: 1px solid var(--border-light);
 }
 
+.mint-experiment-selector__footer-slot {
+  flex: 1;
+  min-width: 0;
+}
+
 .mint-experiment-selector__clear-btn {
   padding: 0.25rem 0;
   border: none;
@@ -17332,54 +17500,79 @@ button.mint-unit-input__unit:focus-visible {
     animation: none;
   }
 }
-/* AppTopBar page selector — left-side route/page dropdown.
-   Trigger speaks the field language (5a): 36px (the identity tile height), hover changes the background
-   only, open = field focus, inline 12px chevron. The menu keeps the 1.2 panel
-   (own card, tinted active row) rather than .mint-popover + .mint-menu-item. */
+/* AppTopBar page selector — design v2 option C: "<plugin> / <page>" as one switcher.
+   The crumb holds the plugin name, a slash and the tinted 32px trigger. The menu keeps its own
+   card (not .mint-popover): a "<plugin> pages" title, then one row per page with its hint and number key. */
+
+/* Shrinks with the bar: the plugin name and the page label truncate instead of overlapping the nav. */
+.mint-page-selector__crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+.mint-page-selector__plugin {
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-/* Shrinks down to its inline min-width (11.25rem) so a crowded bar truncates the label instead of overlapping the nav. */
+.mint-page-selector__slash {
+  flex-shrink: 0;
+  font-size: 1.125rem;
+  font-weight: 300;
+  line-height: 1;
+  color: var(--text-muted);
+}
+
+/* Anchors the menu under the trigger, not under the plugin name. */
 .mint-page-selector {
   position: relative;
-  flex-shrink: 1;
+  display: flex;
+  min-width: 0;
 }
 
 .mint-page-selector__trigger {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  height: 2.25rem;
-  padding: 0 0.5rem 0 0.4375rem;
-  border: 1px solid var(--border-color);
-  background: var(--bg-card);
+  gap: 0.375rem;
+  min-width: 0;
+  max-width: 100%;
+  height: 2rem;
+  padding: 0 0.5rem 0 0.375rem;
+  border: 0;
+  background: var(--color-primary-soft);
   color: var(--text-primary);
   border-radius: var(--radius-md);
   font-size: 0.8125rem;
-  font-weight: 500;
+  font-weight: 600;
   font-family: inherit;
   cursor: pointer;
   transition:
     background-color var(--mint-transition),
-    border-color var(--mint-transition),
     box-shadow var(--mint-transition);
 }
 
-.mint-page-selector__trigger:hover:not(.mint-page-selector__trigger--open) {
-  background: var(--bg-hover);
+.mint-page-selector__trigger:hover {
+  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
 }
 
-.mint-page-selector__trigger:focus-visible,
-.mint-page-selector__trigger--open {
+.mint-page-selector__trigger:focus-visible {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: var(--focus-ring-soft);
+  box-shadow: var(--focus-ring-offset);
 }
 
 /* Page icon tile is neutral; the plugin carries the color. */
 .mint-page-selector__icon {
   width: 1.25rem;
   height: 1.25rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius);
   background: var(--bg-tertiary);
   color: var(--text-secondary-strong);
   display: grid;
@@ -17400,7 +17593,7 @@ button.mint-unit-input__unit:focus-visible {
 .mint-page-selector__trigger-metadata-icon.mint-plugin-icon--sm {
   width: 1.25rem;
   height: 1.25rem;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius);
 }
 
 .mint-page-selector__icon-fallback {
@@ -17410,7 +17603,6 @@ button.mint-unit-input__unit:focus-visible {
 }
 
 .mint-page-selector__label {
-  flex: 1;
   min-width: 0;
   text-align: left;
   white-space: nowrap;
@@ -17418,7 +17610,6 @@ button.mint-unit-input__unit:focus-visible {
   text-overflow: ellipsis;
 }
 
-/* The chevron sits inline; the wrap no longer draws a tile. */
 .mint-page-selector__chevron-wrap {
   display: inline-flex;
   color: var(--text-secondary);
@@ -17435,38 +17626,46 @@ button.mint-unit-input__unit:focus-visible {
   transform: rotate(180deg);
 }
 
+/* max-height: 8 two-line hint rows (8 x 68px) + title (~25px) + padding (8px) = ~577px; a 9th row scrolls. A short window caps it. */
 .mint-page-selector__menu {
   position: absolute;
+  box-sizing: border-box;
   top: calc(100% + 0.375rem);
   left: 0;
-  width: 16.25rem;
+  width: 18.75rem;
+  max-height: min(36.25rem, calc(100vh - 6rem));
+  overflow-y: auto;
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
-  padding: 0.375rem;
+  padding: 0.25rem;
   z-index: 50;
 }
 
+/* The mockup's 10px uppercase eyebrow breaks rules 2a (no uppercase) and 8d (UI text >= 11px): 11px, sentence case. */
 .mint-page-selector__menu-title {
-  padding: 0.375rem 0.625rem 0.5rem;
-  font-size: 0.75rem;
+  padding: 0.375rem 0.5rem 0.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
   font-weight: 500;
-  color: var(--text-secondary);
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
 }
 
 .mint-page-selector__item {
   display: flex;
-  align-items: center;
+  box-sizing: border-box;
+  align-items: flex-start;
   gap: 0.625rem;
   width: 100%;
-  padding: 0.5rem 0.625rem;
+  padding: 0.5rem;
   border: 0;
   background: transparent;
-  border-radius: 0.4375rem;
+  border-radius: var(--radius);
   color: var(--text-primary);
   font-size: 0.8125rem;
-  font-weight: 500;
+  line-height: 1.4;
   font-family: inherit;
   text-align: left;
   text-decoration: none;
@@ -17474,13 +17673,22 @@ button.mint-unit-input__unit:focus-visible {
   transition: background-color var(--mint-transition);
 }
 
-.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled) {
+/* A row without a hint has one line: centre it on the icon tile. */
+.mint-page-selector__item:not(:has(.mint-page-selector__item-hint)) {
+  align-items: center;
+}
+
+.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled):not(.mint-page-selector__item--active) {
   background: var(--bg-hover);
 }
 
+.mint-page-selector__item:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
 .mint-page-selector__item--active {
-  background: var(--bg-tertiary);
-  font-weight: 600;
+  background: var(--color-primary-soft);
 }
 
 .mint-page-selector__item--disabled {
@@ -17489,9 +17697,9 @@ button.mint-unit-input__unit:focus-visible {
 }
 
 .mint-page-selector__item-icon {
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: 0.3125rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-md);
   background: var(--bg-tertiary);
   color: var(--text-secondary);
   display: grid;
@@ -17499,6 +17707,10 @@ button.mint-unit-input__unit:focus-visible {
   flex-shrink: 0;
 }
 
+.mint-page-selector__item-icon .mint-page-selector__icon-fallback {
+  font-size: 0.8125rem;
+}
+
 .mint-page-selector__item--active .mint-page-selector__item-icon {
   background: var(--color-primary-soft);
   color: var(--color-primary);
@@ -17511,24 +17723,55 @@ button.mint-unit-input__unit:focus-visible {
 }
 
 .mint-page-selector__item-icon svg {
-  width: 0.8125rem;
-  height: 0.8125rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
 }
 
 .mint-page-selector__metadata-icon.mint-plugin-icon--sm {
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: 0.3125rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-md);
 }
 
-.mint-page-selector__item-label {
+.mint-page-selector__item-text {
   flex: 1;
   min-width: 0;
+  display: grid;
+  gap: 1px;
+}
+
+.mint-page-selector__item-label {
+  font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* --_ink-primary is --color-primary-hover in light mode and stays legible in dark mode. */
+.mint-page-selector__item--active .mint-page-selector__item-label {
+  color: var(--_ink-primary);
+}
+
+.mint-page-selector__item-hint {
+  font-size: 0.75rem;
+  line-height: 1.35;
+  color: var(--text-secondary);
+}
+
+/* 11px, the rule 8d floor (the mockup has 10.5px). */
+.mint-page-selector__item-key {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  padding: 0 0.25rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1rem;
+  color: var(--text-muted);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .mint-page-selector__trigger,
   .mint-page-selector__chevron {

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ export type * from './generated-ui';
 export type { AnalysisArtifactStatus, AnalysisArtifactStatusFilter, AnalysisArtifactSummary, AnalysisArtifactDetail, AnalysisArtifactListResponse, AnalysisArtifactTarget, AnalysisArtifactMetadataUpdate, ArtifactSaveMode, ArtifactFileSource, JsonArtifactSavePayload, FileArtifactCreatePayload, FileArtifactUpdatePayload, HandlerFileArtifactCreatePayload, HandlerFileArtifactUpdatePayload, ArtifactSavePayload, HandlerArtifactSavePayload, ArtifactSaveDialogPayload, ArtifactSaveResult, ArtifactSaveHandler, HandlerArtifactSaveHandler, ArtifactSaveDialogHandler, } from './analysisArtifactTypes';
 export { ANALYSIS_FILE_ARTIFACT_SCHEMA } from './analysisArtifactTypes';
 export type { FileBrowserLocation, FileBrowserSortKey, FileDirectoryListing, FileDirectoryTree, FileEntry, FileEntryKind, FilePathCrumb, FileSearchResult, FileSelection, ServerMount, } from './fileBrowserTypes';
-export type { JobListPayload, JobProgress, JobSnapshotPayload, JobState, JobStateInput, JobStatus, JobStreamData, } from './jobs';
+export type { JobListPayload, JobProgress, JobSnapshotPayload, JobState, JobStateInput, JobStatus, JobStreamData, TopBarJob, } from './jobs';
 export type { InjectionMetricSeries, InstrumentAlert, InstrumentAlertLevel, InstrumentAlertList, InstrumentBadgeState, InstrumentLiveProgress, InstrumentLiveStatus, InstrumentState, InstrumentStatus, InstrumentStatusReporter, SampleInfo, SampleInfo as InstrumentSampleInfo, SequenceProgress, StatusPanel, } from './instrument';
 export type { AccessAudience, AccessAudienceInput, AccessPolicy, AccessControlled, PermissionUser, RoleInfo, } from '../permissions';
 export type { FormFieldType, FieldCondition, FieldValidation, FormFieldSchema, FormOptionInput, FormSectionSchema, FormStepSchema, FormSchema, FieldEnhancement, FormEnhancements, UseFormBuilderReturn, } from './form-builder';

package/dist/types/jobs.d.ts

@@ -53,3 +53,12 @@ export interface JobSnapshotPayload {
     jobs: JobStateInput[];
 }
 export type JobStreamData = JobStateInput | JobSnapshotPayload;
+/** What the top-bar run slot shows for the viewer's own job. The plugin picks the job. */
+export interface TopBarJob {
+    /** Lifecycle of the shown job; sets the icon and the tone. */
+    status: JobStatus;
+    /** Tooltip and accessible name, e.g. "Extracting", "Saved to EXP-0142". Not shown as text. */
+    label: string;
+    /** 0-100; drawn as a small bar after the icon. */
+    percent?: number | null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.4.0-beta.12",
+  "version": "1.4.0-beta.13",
   "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])
     }