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

package/src/components/LayoutResizeHandle.story.vue

@@ -3,15 +3,20 @@ import { ref } from 'vue'
 import LayoutResizeHandle from './LayoutResizeHandle.vue'
 
 const width = ref(320)
+const gapWidth = ref(320)
+const edgeWidth = ref(280)
+const height = ref(50)
+
+const panel = 'background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 0.75rem;'
+const caption = 'margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);'
 </script>
 
 <template>
   <Story title="Layout/LayoutResizeHandle">
     <Variant title="Keyboard splitter">
+      <!-- Directly between two panels, the handle is the gutter. -->
       <div style="display: flex; height: 16rem; padding: 2rem;">
-        <div :style="{ width: `${width}px`, background: 'var(--bg-secondary)', border: '1px solid var(--border-color)' }">
-          Panel width: {{ width }}px
-        </div>
+        <div :style="`${panel} width: ${width}px;`">Panel width: {{ width }}px</div>
         <LayoutResizeHandle
           v-model="width"
           orientation="vertical"
@@ -19,7 +24,63 @@ const width = ref(320)
           :min="240"
           :max="480"
         />
-        <div style="flex: 1; background: var(--bg-tertiary);" />
+        <div :style="`${panel} flex: 1;`" />
+      </div>
+    </Variant>
+
+    <Variant title="Gaps and edge">
+      <div style="display: grid; gap: 1.5rem; padding: 2rem;">
+        <div data-gap="flex-8">
+          <p :style="caption">flex, 8px gutter (compact), handle between the panels</p>
+          <div style="display: flex; height: 8rem; --mint-gutter: 0.5rem;">
+            <div :style="`${panel} width: ${gapWidth}px;`">Left panel</div>
+            <LayoutResizeHandle v-model="gapWidth" orientation="vertical" label="Resize left panel (8px)" :min="200" :max="480" />
+            <div :style="`${panel} flex: 1;`">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="wrapper-12">
+          <p :style="caption">flex, 12px gutter, handle in a gutter-wide wrapper</p>
+          <div style="display: flex; height: 8rem; --mint-gutter: 0.75rem;">
+            <div :style="`${panel} width: ${gapWidth}px;`">Left panel</div>
+            <div style="display: flex; justify-content: center; flex-shrink: 0; width: var(--mint-gutter);">
+              <LayoutResizeHandle v-model="gapWidth" orientation="vertical" label="Resize left panel (12px)" :min="200" :max="480" />
+            </div>
+            <div :style="`${panel} flex: 1;`">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="grid-8">
+          <p :style="caption">grid, 8px track</p>
+          <div :style="`display: grid; grid-template-columns: ${gapWidth}px 0.5rem 1fr; height: 8rem;`">
+            <div :style="panel">Left panel</div>
+            <LayoutResizeHandle
+              v-model="gapWidth"
+              orientation="vertical"
+              label="Resize left panel (grid)"
+              :min="200"
+              :max="480"
+              style="--mint-layout-resize-gap: 0.5rem;"
+            />
+            <div :style="panel">Right panel</div>
+          </div>
+        </div>
+        <div data-gap="edge">
+          <p :style="caption">edge="right", 12px gutter</p>
+          <div style="display: flex; gap: var(--mint-gutter); height: 8rem; --mint-gutter: 0.75rem;">
+            <aside :style="`${panel} position: relative; width: ${edgeWidth}px;`">
+              Sidebar
+              <LayoutResizeHandle v-model="edgeWidth" orientation="vertical" edge="right" label="Resize sidebar" :min="200" :max="480" />
+            </aside>
+            <div :style="`${panel} flex: 1;`">Main</div>
+          </div>
+        </div>
+        <div data-gap="horizontal">
+          <p :style="caption">horizontal, 8px gutter</p>
+          <div style="display: flex; flex-direction: column; height: 14rem; --mint-gutter: 0.5rem;">
+            <div :style="`${panel} flex: 0 0 ${height}%;`">Top panel</div>
+            <LayoutResizeHandle v-model="height" orientation="horizontal" label="Resize top panel" :min="20" :max="80" :step="1" />
+            <div :style="`${panel} flex: 1;`">Bottom panel</div>
+          </div>
+        </div>
       </div>
     </Variant>
   </Story>

package/src/components/PluginWorkspaceView.props.ts

@@ -4,6 +4,7 @@ import type {
   PillNavOption,
   PluginWorkspaceViewSpec,
 } from '../types'
+import type { JobState } from '../types/jobs'
 import type {
   ControlComponentBinding,
   ControlComponentBindingsById,
@@ -46,6 +47,8 @@ export interface PluginWorkspaceViewEmits {
   'section-action': [sectionId: string, actionId: string]
   'form-submit': [sectionId: string, values: Record<string, unknown>]
   'form-cancel': [sectionId: string]
+  /** A job row in the jobs tray, or the just-completed job on the top-bar chip, was chosen. */
+  'job-select': [job: JobState]
 }
 
 /** Typed `emit` function shape produced by `defineEmits<PluginWorkspaceViewEmits>()`. */

package/src/components/PluginWorkspaceView.vue

@@ -20,9 +20,12 @@ import type {
   PillNavItem,
   PillNavOption,
 } from '../types'
+import type { JobState } from '../types/jobs'
 import { useAppExperiment } from '../composables/useAppExperiment'
+import { useJobCenter } from '../composables/useJobCenter'
 import { usePluginWorkspace } from '../composables/usePluginWorkspace'
 import AppToastContainer from './AppToastContainer.vue'
+import JobsStatusTray from './JobsStatusTray.vue'
 import WorkspaceControlsInternal from './internal/WorkspaceControlsInternal.vue'
 import WorkspaceShellInternal from './internal/WorkspaceShellInternal.vue'
 import WorkspaceSidebarInternal from './internal/WorkspaceSidebarInternal.vue'
@@ -76,6 +79,14 @@ if (props.spec.experiment) {
   })
 }
 
+// The job center is setup-time structure too: no `jobs`, no jobs control.
+const jobs = props.spec.jobs
+const jobCenter = jobs ? useJobCenter({ source: jobs }) : null
+
+function handleJobSelect(job: JobState) {
+  emit('job-select', job)
+}
+
 const {
   shell,
   sidebar,
@@ -105,6 +116,11 @@ function handleFormCancel(sectionId: string) {
 <template>
   <WorkspaceShellInternal
     :shell="shell"
+    :job="jobCenter ? jobCenter.topBarJob.value : undefined"
+    :jobs-done="jobCenter?.completedCount.value"
+    :jobs-open="jobCenter?.isOpen.value"
+    :jobs-panel-id="jobCenter?.panelId"
+    @job-click="jobCenter?.handleTopBarClick(handleJobSelect)"
     @pill-select="handlePillSelect"
     @pill-option-select="(option: PillNavOption, item: PillNavItem) => emit('pill-option-select', option, item)"
     @settings-values-change="emit('settings-values-change', $event)"
@@ -158,6 +174,7 @@ function handleFormCancel(sectionId: string) {
         </template>
       </WorkspaceControlsInternal>
       <AppToastContainer v-if="spec.toasts !== false" />
+      <JobsStatusTray v-if="jobCenter" :center="jobCenter" @select="handleJobSelect" />
     </template>
   </WorkspaceShellInternal>
 </template>

package/src/components/SampleSelector.story.vue

@@ -21,6 +21,13 @@ const mockGroups: SampleGroup[] = [
   { name: 'Vehicle', color: '#F59E0B', samples: ['Vehicle_Rep1', 'Vehicle_Rep2', 'Vehicle_Rep3'] },
 ]
 
+// 1024 selected runs in two groups: the long count must not push the actions out.
+const manyRuns = Array.from({ length: 1024 }, (_, i) => `Run_${String(i + 1).padStart(4, '0')}`)
+const manyGroups: SampleGroup[] = [
+  { name: 'Batch A', color: '#3B82F6', samples: manyRuns.slice(0, 512) },
+  { name: 'Batch B', color: '#10B981', samples: manyRuns.slice(512) },
+]
+
 const manualSamples = [
   'Pt001_TumorA_d7_rep1',
   'Pt001_TumorA_d7_rep1_reseq2024',
@@ -136,12 +143,20 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
     </Variant>
 
     <Variant title="Narrow Header">
-      <div style="padding: 2rem; width: 320px;">
-        <SampleSelector
-          :model-value="['Control_Rep1']"
-          :samples="mockSamples"
-          :groups="mockGroups"
-        />
+      <!-- At 17.625rem of header content width and below, the grouping button shows only its icon and the count shortens. -->
+      <div style="display: flex; align-items: flex-start; gap: 2rem; padding: 2rem;">
+        <div v-for="width in [220, 300, 340]" :key="width" :data-width="width" :style="{ width: `${width}px` }">
+          <p style="margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);">{{ width }}px</p>
+          <SampleSelector
+            :model-value="['Control_Rep1']"
+            :samples="mockSamples"
+            :groups="mockGroups"
+          />
+        </div>
+        <div data-width="320-long" style="width: 320px; height: 22rem;">
+          <p style="margin: 0 0 0.5rem; font: 0.75rem var(--font-mono); color: var(--text-secondary);">320px, 1024 selected</p>
+          <SampleSelector :model-value="manyRuns" :samples="manyRuns" :groups="manyGroups" />
+        </div>
       </div>
     </Variant>
 

package/src/components/SampleSelector.vue

@@ -256,6 +256,8 @@ function addNewGroup() {
   newGroupName.value = ''
 }
 
+const groupingLabel = computed(() => (props.enableSmartGroup ? 'Smart group' : 'Group'))
+
 /** Selected samples among the resolved list, for the select-all header. */
 const selectedCount = computed(() => resolvedSamples.value.filter(s => props.modelValue.includes(s)).length)
 
@@ -271,16 +273,21 @@ defineExpose({ handleSmartGroupApply })
   <div class="mint-sample-selector">
     <div class="mint-sample-selector__header">
       <span class="mint-sample-selector__title">Samples</span>
-      <span class="mint-sample-selector__selected">{{ selectedCount }} selected</span>
+      <!-- A narrow selector shows "N sel."; screen readers keep "N selected". -->
+      <span class="mint-sample-selector__selected">
+        <span class="mint-sample-selector__selected-full">{{ selectedCount }} selected</span>
+        <span class="mint-sample-selector__selected-short" aria-hidden="true">{{ selectedCount }} sel.</span>
+      </span>
       <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__header-actions">
         <BaseButton
           variant="ghost"
           size="sm"
           :icon="enableSmartGroup ? WandSparkles : Layers"
-          class="mint-sample-selector__action-btn"
+          :title="groupingLabel"
+          class="mint-sample-selector__action-btn mint-sample-selector__group-btn"
           @click="openGroupingModal(groupingActionMode)"
         >
-          {{ enableSmartGroup ? 'Smart group' : 'Group' }}
+          {{ groupingLabel }}
         </BaseButton>
         <BaseButton
           v-if="internalGroups.length > 0"

package/src/components/SectionCard.story.vue

@@ -107,6 +107,39 @@ function initPlayground() {
       </div>
     </Variant>
 
+    <Variant title="Rows with lead">
+      <div style="padding: 2rem; max-width: 600px; display: grid; gap: 1rem;">
+        <SectionCard title="Experiments" count="3 total" :icon="flaskIcon" accent="experiment" uppercase>
+          <div class="mint-section-card__rows">
+            <a v-for="e in experiments" :key="e.code" href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead">
+                <span style="width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--mint-success)" />
+              </span>
+              <span style="flex: 1; min-width: 0">
+                <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
+                <span style="display: block; font-family: var(--font-mono); font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
+              </span>
+              <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
+            </a>
+          </div>
+        </SectionCard>
+        <SectionCard title="Projects" count="2 active" :icon="folderIcon" accent="project" uppercase>
+          <div class="mint-section-card__rows">
+            <a href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead" aria-hidden="true" />
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Hypoxia metabolic rewiring</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">12 experiments</span>
+            </a>
+            <a href="#" class="mint-section-card__row">
+              <span class="mint-section-card__row-lead" aria-hidden="true" />
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Serine one-carbon flux</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">7 experiments</span>
+            </a>
+          </div>
+        </SectionCard>
+      </div>
+    </Variant>
+
     <Variant title="Detail card with footer">
       <div style="padding: 2rem; max-width: 600px;">
         <SectionCard title="Analysis artifacts" :count="4" divider="light">

package/src/components/SettingsModal.vue

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

package/src/components/Tooltip.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 /** Floating tooltip using @floating-ui with auto-flip, delay, optional keyboard shortcut badge, and body Teleport. */
-import { ref, onBeforeUnmount, nextTick } from 'vue'
-import { computePosition, flip, offset, shift, type Placement } from '@floating-ui/dom'
-import { useEventListener } from '../composables/useEventListener'
+import { ref, onBeforeUnmount } from 'vue'
+import { useFloatingPanel } from '../composables/useFloatingPanel'
 
 interface Props {
   text: string
@@ -21,40 +20,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 const tooltipId = `mint-tooltip-${Math.random().toString(36).slice(2, 9)}`
 const visible = ref(false)
-const actualPlacement = ref<Placement>(props.position)
 const triggerRef = ref<HTMLElement | null>(null)
 const contentRef = ref<HTMLElement | null>(null)
-const coords = ref({ top: '0px', left: '0px' })
 let timeoutId: ReturnType<typeof setTimeout> | undefined
 
-async function updatePosition() {
-  if (!triggerRef.value || !contentRef.value) return
-
-  const { x, y, placement } = await computePosition(triggerRef.value, contentRef.value, {
-    placement: props.position,
-    middleware: [
-      offset(6),
-      flip(),
-      shift({ padding: 8 }),
-    ],
-  })
-
-  coords.value = { top: `${y}px`, left: `${x}px` }
-  actualPlacement.value = placement
-}
-
-useEventListener(() => window, 'scroll', updatePosition, {
-  passive: true,
-  capture: true,
-  enabled: visible,
+// Follows the trigger while visible; the placement after flip picks the arrow side.
+const { style: coords, placement: actualPlacement } = useFloatingPanel(triggerRef, contentRef, visible, {
+  placement: () => props.position,
+  offset: 6,
 })
-useEventListener(() => window, 'resize', updatePosition, { enabled: visible })
 
-async function show() {
-  timeoutId = setTimeout(async () => {
+function show() {
+  timeoutId = setTimeout(() => {
     visible.value = true
-    await nextTick()
-    await updatePosition()
   }, props.delay)
 }
 
@@ -96,8 +74,7 @@ function resolvedMaxWidth(value: string | number | undefined): string | undefine
           maxWidth ? 'mint-tooltip__content--multiline' : '',
         ]"
         :style="{
-          top: coords.top,
-          left: coords.left,
+          ...coords,
           maxWidth: resolvedMaxWidth(maxWidth),
         }"
         role="tooltip"

package/src/components/internal/AppTopBarOnboardingInternal.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+/**
+ * The top-bar onboarding controls: the "Getting started n/m" chip while the
+ * checklist is open, and the Help button with the checklist, tours and news.
+ */
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { autoUpdate, computePosition, offset, shift } from '@floating-ui/dom'
+import { Check, CircleHelp, Play } from 'lucide-vue-next'
+import { useEventListener } from '../../composables/useEventListener'
+import type { OnboardingState } from '../../composables/useOnboarding'
+import OnboardingLayerInternal from './OnboardingLayerInternal.vue'
+
+const props = defineProps<{ state: OnboardingState }>()
+
+const root = ref<HTMLElement | null>(null)
+const helpButton = ref<HTMLElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
+const panelPosition = ref({ x: 0, y: 0 })
+const open = ref(false)
+const hasContent = computed(() =>
+  props.state.tasks.value.length > 0 || props.state.tours.value.length > 0 || props.state.news.value.length > 0)
+const progress = computed(() => {
+  const total = props.state.tasks.value.length
+  return total ? Math.round((props.state.tasksDone.value / total) * 100) : 0
+})
+
+function toggle() {
+  open.value = !open.value
+  if (open.value) props.state.refresh()
+}
+
+// The panel goes to the body, as the top bar clips its overflow; it follows the button.
+let stopAutoUpdate: (() => void) | undefined
+watch(open, async (isOpen) => {
+  stopAutoUpdate?.()
+  stopAutoUpdate = undefined
+  if (!isOpen) return
+  await nextTick()
+  const button = helpButton.value
+  const floating = panel.value
+  if (!button || !floating || !open.value) return
+  stopAutoUpdate = autoUpdate(button, floating, async () => {
+    const { x, y } = await computePosition(button, floating, {
+      strategy: 'fixed',
+      placement: 'bottom-end',
+      middleware: [offset(8), shift({ padding: 8 })],
+    })
+    panelPosition.value = { x, y }
+  })
+})
+onBeforeUnmount(() => stopAutoUpdate?.())
+
+function run(action: () => void) {
+  open.value = false
+  action()
+}
+
+useEventListener(document, 'pointerdown', (event) => {
+  const target = event.target as Node
+  if (open.value && !root.value?.contains(target) && !panel.value?.contains(target)) open.value = false
+})
+useEventListener(document, 'keydown', (event) => {
+  if (open.value && event.key === 'Escape') open.value = false
+})
+</script>
+
+<template>
+  <div v-if="hasContent" ref="root" class="mint-onboarding-help">
+    <button
+      v-if="state.checklistVisible.value"
+      type="button"
+      class="mint-onboarding-help__chip"
+      :class="{ 'mint-onboarding-help__chip--open': open }"
+      data-onboarding="topbar-checklist"
+      :aria-expanded="open"
+      @click="toggle"
+    >
+      Getting started
+      <span class="mint-onboarding-help__count">{{ state.tasksDone.value }}/{{ state.tasks.value.length }}</span>
+      <span class="mint-onboarding-help__bar" aria-hidden="true"><span :style="{ width: `${progress}%` }" /></span>
+    </button>
+    <button
+      ref="helpButton"
+      type="button"
+      class="mint-topbar__settings-btn"
+      :class="{ 'mint-topbar__settings-btn--open': open }"
+      data-onboarding="topbar-help"
+      :aria-label="state.unseenNews.value ? `Help, ${state.unseenNews.value} new` : 'Help'"
+      :aria-expanded="open"
+      @click="toggle"
+    >
+      <CircleHelp class="mint-topbar__settings-icon" aria-hidden="true" />
+      <span v-if="state.unseenNews.value" class="mint-onboarding-help__badge" aria-hidden="true">{{ state.unseenNews.value }}</span>
+    </button>
+
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="panel"
+        class="mint-popover mint-onboarding-help__panel"
+        role="dialog"
+        aria-label="Help"
+        :style="{ left: `${panelPosition.x}px`, top: `${panelPosition.y}px` }"
+      >
+        <template v-if="state.tasks.value.length">
+          <div class="mint-onboarding-help__header">
+            <span class="mint-onboarding-help__heading">Getting started</span>
+            <span class="mint-onboarding-help__count">{{ state.tasksDone.value }}/{{ state.tasks.value.length }}</span>
+          </div>
+          <div class="mint-onboarding-help__progress" aria-hidden="true"><span :style="{ width: `${progress}%` }" /></div>
+          <ul class="mint-onboarding-help__todos">
+            <li
+              v-for="task in state.tasks.value"
+              :key="task.id"
+              :class="['mint-onboarding-help__todo', { 'mint-onboarding-help__todo--done': task.done }]"
+            >
+              <span class="mint-onboarding-help__check" role="img" :aria-label="task.done ? 'Done' : 'Not done'">
+                <Check v-if="task.done" :size="10" :stroke-width="3" aria-hidden="true" />
+              </span>
+              <span class="mint-onboarding-help__todo-title">{{ task.title }}</span>
+              <button
+                v-if="task.action && !task.done"
+                type="button"
+                class="mint-onboarding-help__link"
+                @click="run(task.action.run)"
+              >
+                {{ task.action.label }}
+              </button>
+            </li>
+          </ul>
+          <button
+            v-if="state.tasksDone.value < state.tasks.value.length"
+            type="button"
+            class="mint-onboarding-help__link mint-onboarding-help__hide"
+            @click="state.setChecklistHidden(!state.checklistHidden.value)"
+          >
+            {{ state.checklistHidden.value ? 'Show checklist in the top bar' : 'Hide checklist from the top bar' }}
+          </button>
+        </template>
+
+        <template v-if="state.tours.value.length">
+          <div class="mint-onboarding-help__section">Tours</div>
+          <button
+            v-for="tour in state.tours.value"
+            :key="tour.id"
+            type="button"
+            class="mint-menu-item"
+            @click="run(() => state.startTour(tour.id))"
+          >
+            <Play class="mint-onboarding-help__icon" aria-hidden="true" />
+            {{ tour.title }}
+          </button>
+        </template>
+
+        <template v-if="state.news.value.length">
+          <div class="mint-onboarding-help__section">What's new</div>
+          <button
+            v-for="item in state.news.value"
+            :key="item.id"
+            type="button"
+            class="mint-menu-item"
+            @click="run(() => state.showNews(item.id))"
+          >
+            {{ item.title }}
+            <span v-if="item.unseen" class="mint-onboarding-help__new">New</span>
+          </button>
+        </template>
+      </div>
+    </Teleport>
+  </div>
+  <OnboardingLayerInternal :state="state" />
+</template>