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

package/src/__tests__/composables/useOnboarding.test.ts

@@ -0,0 +1,317 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import {
+  ANCHOR_WAIT_MS,
+  provideOnboarding,
+  type OnboardingDefinition,
+  type OnboardingState,
+  type ProvideOnboardingOptions,
+} from '../../composables/useOnboarding'
+
+const KEY = 'mint.onboarding.app.7'
+
+const definition: OnboardingDefinition = {
+  tours: [
+    {
+      id: 'intro',
+      title: 'Intro',
+      steps: [
+        { id: 'a', anchor: 'a', title: 'A', body: '' },
+        { id: 'b', anchor: 'b', title: 'B', body: '' },
+      ],
+    },
+    { id: 'list', title: 'List', route: 'experiments', steps: [{ id: 'new', anchor: 'new', title: 'New', body: '' }] },
+  ],
+  checklist: [{ id: 'create', title: 'Create' }],
+  whatsNew: [{ id: 'jobs', anchor: 'a', title: 'Jobs', body: '' }],
+}
+
+let wrapper: VueWrapper | undefined
+
+function addAnchor(id: string) {
+  const element = document.createElement('button')
+  element.dataset.onboarding = id
+  document.body.append(element)
+  return element
+}
+
+function setup(options: Partial<ProvideOnboardingOptions> = {}, def = definition): OnboardingState {
+  let state!: OnboardingState
+  wrapper = mount(defineComponent({
+    setup() {
+      state = provideOnboarding(def, { appId: 'app', userId: 7, ...options })
+      return () => h('div')
+    },
+  }))
+  return state
+}
+
+async function flush() {
+  await vi.advanceTimersByTimeAsync(0)
+  await nextTick()
+}
+
+const stored = () => JSON.parse(localStorage.getItem(KEY) ?? 'null') as string[] | null
+
+describe('provideOnboarding', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    localStorage.clear()
+    addAnchor('a')
+    addAnchor('b')
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+    document.body.innerHTML = ''
+    vi.useRealTimers()
+  })
+
+  it('should start the first tour of the route and mark each shown step as seen', async () => {
+    const state = setup()
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('a')
+    state.next()
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('b')
+    expect(stored()).toEqual(expect.arrayContaining(['step:intro/a', 'step:intro/b']))
+  })
+
+  it('should mark the existing news as seen on the first run only', async () => {
+    const first = setup({ autoStart: false })
+    expect(first.unseenNews.value).toBe(0)
+    wrapper?.unmount()
+
+    const later = setup({ autoStart: false }, { ...definition, whatsNew: [...definition.whatsNew!, { id: 'pins', anchor: 'b', title: 'Pins', body: '' }] })
+
+    expect(later.news.value.map((item) => item.unseen)).toEqual([false, true])
+  })
+
+  it('should show a returning user only the steps with new ids', async () => {
+    localStorage.setItem(KEY, JSON.stringify(['step:intro/a']))
+    const state = setup()
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'b' }, index: 0, count: 1 })
+  })
+
+  it('should mark every step seen on dismiss and not start the tour again', async () => {
+    const state = setup()
+    await flush()
+    state.dismiss()
+    wrapper?.unmount()
+
+    const again = setup()
+    await flush()
+
+    expect(stored()).toEqual(expect.arrayContaining(['step:intro/a', 'step:intro/b']))
+    expect(again.active.value).toBeNull()
+  })
+
+  it('should skip a step whose anchor does not appear in time and keep it unseen', async () => {
+    document.querySelector('[data-onboarding="a"]')!.remove()
+    const state = setup()
+    await flush()
+    expect(state.active.value).toBeNull()
+
+    await vi.advanceTimersByTimeAsync(ANCHOR_WAIT_MS)
+    await nextTick()
+
+    expect(state.active.value?.step.id).toBe('b')
+    expect(stored()).not.toContain('step:intro/a')
+  })
+
+  it('should leave a missing anchor out of the count and skip it at once after Next', async () => {
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '' },
+      { id: 'gone', anchor: 'gone', title: 'Gone', body: '' },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+    ] }] })
+    await flush()
+    expect(state.active.value).toMatchObject({ step: { id: 'a' }, index: 0, count: 2 })
+
+    state.next()
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'b' }, index: 1, count: 2 })
+  })
+
+  it('should still show a later step whose anchor renders after the tour started', async () => {
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '' },
+      { id: 'late', anchor: 'late', title: 'Late', body: '' },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+    ] }] })
+    await flush()
+    expect(state.active.value).toMatchObject({ step: { id: 'a' }, count: 2 })
+
+    addAnchor('late')
+    state.next()
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'late' }, index: 1, count: 3 })
+  })
+
+  it('should keep the position and count in step after Back when a shown anchor went away', async () => {
+    addAnchor('c')
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '' },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+      { id: 'c', anchor: 'c', title: 'C', body: '' },
+    ] }] })
+    await flush()
+    state.next()
+    await flush()
+    state.next()
+    await flush()
+    document.querySelector('[data-onboarding="b"]')!.remove()
+
+    state.back()
+    await flush()
+    expect(state.active.value).toMatchObject({ step: { id: 'a' }, index: 0, count: 2 })
+    state.next()
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'c' }, index: 1, count: 2 })
+  })
+
+  it('should show a step whose anchor appears while it waits', async () => {
+    document.querySelector('[data-onboarding="a"]')!.remove()
+    const state = setup()
+    await flush()
+
+    addAnchor('a')
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('a')
+  })
+
+  it('should wait for an open modal to close before it starts a tour', async () => {
+    const modal = document.createElement('div')
+    modal.setAttribute('aria-modal', 'true')
+    document.body.append(modal)
+    const state = setup()
+    await flush()
+    expect(state.active.value).toBeNull()
+
+    modal.remove()
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('a')
+  })
+
+  it('should drop a pending auto-start when the user ends a tour picked by hand', async () => {
+    const modal = document.createElement('div')
+    modal.setAttribute('aria-modal', 'true')
+    document.body.append(modal)
+    const state = setup({}, { tours: [
+      definition.tours![0],
+      { id: 'more', title: 'More', steps: [{ id: 'b', anchor: 'b', title: 'B', body: '' }] },
+    ] })
+    await flush()
+    state.startTour('intro')
+    await flush()
+    state.dismiss()
+
+    modal.remove()
+    await flush()
+
+    expect(state.active.value).toBeNull()
+  })
+
+  it('should start the tour of a route when the app reaches that route', async () => {
+    localStorage.setItem(KEY, JSON.stringify(['step:intro/a', 'step:intro/b']))
+    addAnchor('new')
+    const route = ref('home')
+    const state = setup({ route })
+    await flush()
+    expect(state.tours.value.map((tour) => tour.id)).toEqual(['intro'])
+    expect(state.active.value).toBeNull()
+
+    route.value = 'experiments'
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('new')
+  })
+
+  it.each([
+    ['finishes', (state: OnboardingState) => { state.next(); return flush().then(() => state.next()) }, 'new'],
+    ['is dismissed', (state: OnboardingState) => state.dismiss(), undefined],
+  ])('should start the next tour of the page only when the first %s', async (_, end, next) => {
+    addAnchor('new')
+    const state = setup({ route: 'experiments' })
+    await flush()
+    expect(state.active.value?.step.id).toBe('a')
+
+    await end(state)
+    await flush()
+
+    expect(state.active.value?.step.id).toBe(next)
+  })
+
+  it('should leave out a step that is not available', async () => {
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '', available: () => false },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+    ] }] })
+    await flush()
+
+    expect(state.active.value).toMatchObject({ step: { id: 'b' }, count: 1 })
+  })
+
+  it('should keep the keys another tab stored when it writes', () => {
+    const state = setup({ autoStart: false })
+    localStorage.setItem(KEY, JSON.stringify([...stored()!, 'task:create']))
+
+    state.setChecklistHidden(true)
+
+    expect(stored()).toEqual(expect.arrayContaining(['task:create', 'hide:checklist']))
+  })
+
+  it('should move on when the anchor of an advanceOn click step is clicked', async () => {
+    const state = setup({}, { tours: [{ id: 't', title: 'T', steps: [
+      { id: 'a', anchor: 'a', title: 'A', body: '', advanceOn: 'click' },
+      { id: 'b', anchor: 'b', title: 'B', body: '' },
+    ] }] })
+    await flush()
+
+    document.querySelector<HTMLElement>('[data-onboarding="a"]')!.click()
+    await flush()
+
+    expect(state.active.value?.step.id).toBe('b')
+  })
+
+  it('should keep a task done after its predicate turns false', async () => {
+    const created = ref(true)
+    const state = setup({ autoStart: false }, { checklist: [{ id: 'create', title: 'Create', done: () => created.value }] })
+    created.value = false
+    state.refresh()
+    await nextTick()
+
+    expect(state.tasks.value[0].done).toBe(true)
+    expect(state.checklistVisible.value).toBe(false)
+  })
+
+  it.each([
+    ['complete', (state: OnboardingState) => state.complete('create'), false],
+    ['hide', (state: OnboardingState) => state.setChecklistHidden(true), false],
+    ['nothing', () => {}, true],
+  ])('should show the checklist chip after %s: %s', (_, act, visible) => {
+    const state = setup({ autoStart: false })
+    act(state)
+
+    expect(state.checklistVisible.value).toBe(visible)
+  })
+
+  it('should stay off without a user', async () => {
+    const state = setup({ userId: null })
+    await flush()
+
+    expect(state.enabled.value).toBe(false)
+    expect(state.active.value).toBeNull()
+    expect(localStorage.length).toBe(0)
+  })
+})

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -266,13 +266,13 @@ describe('frontend docs catalog coverage', () => {
     })
   })
 
-  it('documents only the source-driven JobsStatusTray props', () => {
+  it('documents only the center-driven JobsStatusTray props', () => {
     const manifest = extractFrontendManifest()
     const jobsStatusTray = manifest.categories.components.find(item => item.name === 'JobsStatusTray')
 
     expect(jobsStatusTray?.props?.map(prop => prop.name).sort()).toEqual([
-      'loadOnMount',
-      'source',
+      'center',
+      'confirm',
       'teleportTo',
       'title',
     ])
@@ -375,6 +375,7 @@ describe('frontend docs catalog coverage', () => {
       'usePluginJobs',
       'useGeneratedAnalysis',
       'usePluginJobCenter',
+      'JobsStatusTrayTab',
       'useRequestSyncState',
       'useAnalysisArtifacts',
       'useTimeUtils',

package/src/__tests__/stores/settings.test.ts

@@ -2,7 +2,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 import {
-  paletteCssVariables,
   tableDensityToSize,
   tryUseSettingsStore,
   useSettingsStore,
@@ -54,6 +53,7 @@ describe('useSettingsStore', () => {
     document.documentElement.classList.remove('dark')
     document.documentElement.removeAttribute('style')
     delete document.documentElement.dataset.density
+    delete document.documentElement.dataset.palette
     mockMatchMedia(false)
   })
 
@@ -72,51 +72,51 @@ describe('useSettingsStore', () => {
     expect(settings.serverHost).toBe('127.0.0.1')
     expect(settings.serverPort).toBe(8001)
     expect(settings.theme).toBe('dark')
-    expect(settings.colorPalette).toBe('viridis')
+    expect(settings.colorPalette).toBe('purple')
     expect(settings.tableDensity).toBe('compact')
     expect(localStorage.getItem('mld-settings')).toBeNull()
     expect(JSON.parse(localStorage.getItem('mint-settings') || '{}')).toEqual(expect.objectContaining({
       serverHost: '127.0.0.1',
       serverPort: 8001,
       theme: 'dark',
-      colorPalette: 'viridis',
+      colorPalette: 'purple',
       tableDensity: 'compact',
     }))
   })
 
   describe('palette and density DOM sync', () => {
-    it('writes no palette overrides for the default palette', () => {
+    it('mirrors the stored palette onto html[data-palette] without inline overrides', () => {
+      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: 'ocean' }))
+
       const settings = useSettingsStore()
       settings.initialize()
 
-      expect(paletteCssVariables('default')).toEqual({})
+      expect(document.documentElement.dataset.palette).toBe('ocean')
       expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('')
     })
 
-    it('applies the stored palette hues to html on initialize', () => {
-      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: 'viridis' }))
-
+    it('updates html[data-palette] when the palette changes', async () => {
       const settings = useSettingsStore()
       settings.initialize()
+      expect(document.documentElement.dataset.palette).toBe('default')
 
-      const style = document.documentElement.style
-      expect(style.getPropertyValue('--color-primary')).toBe('hsl(280 84% 67%)')
-      expect(style.getPropertyValue('--color-primary-hover')).toBe('hsl(280 75% 59%)')
-      expect(style.getPropertyValue('--color-cta')).toBe('hsl(80 95% 53%)')
+      settings.colorPalette = 'forest'
+      await nextTick()
+      expect(document.documentElement.dataset.palette).toBe('forest')
     })
 
-    it('re-applies the overrides when the palette changes and clears them on default', async () => {
+    it.each([
+      ['viridis', 'purple'],
+      ['pastel', 'default'],
+      ['not-a-palette', 'default'],
+    ])('maps the stored palette %s onto %s', (stored, expected) => {
+      localStorage.setItem('mint-settings', JSON.stringify({ colorPalette: stored }))
+
       const settings = useSettingsStore()
       settings.initialize()
 
-      settings.colorPalette = 'pastel'
-      await nextTick()
-      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('hsl(200 84% 67%)')
-
-      settings.colorPalette = 'default'
-      await nextTick()
-      expect(document.documentElement.style.getPropertyValue('--color-primary')).toBe('')
-      expect(document.documentElement.style.getPropertyValue('--color-primary-soft')).toBe('')
+      expect(settings.colorPalette).toBe(expected)
+      expect(document.documentElement.dataset.palette).toBe(expected)
     })
 
     it('mirrors the table density onto html[data-density]', async () => {

package/src/__tests__/styles/cssTokens.test.ts

@@ -14,7 +14,10 @@ const variablesCss = readFileSync(join(stylesDir, 'variables.css'), 'utf-8')
  * component-local knobs declared in the same stylesheet that consumes them.
  * Anything else must be a canonical token from variables.css.
  */
-const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([])
+const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([
+  // Consumer knob: the gap width an edge LayoutResizeHandle centres on (falls back to --mint-gutter).
+  '--mint-layout-resize-gap',
+])
 
 const SOURCE_EXTENSIONS = ['.vue', '.css', '.ts']
 const IGNORED_DIRS = new Set(['__tests__', 'generated-ui', 'node_modules'])

package/src/__tests__/styles/menusShellRefresh.test.ts

@@ -30,8 +30,14 @@ describe('menus and app shell styles', () => {
     expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.625rem;/)
   })
 
-  it('should size the page selector trigger to the 36px identity tile', () => {
-    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2\.25rem;/)
+  // Design v2 option C: the page switcher sits in the crumb at the 32px top-bar control height.
+  it('should size the page selector trigger to the 32px top-bar control height', () => {
+    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2rem;/)
+  })
+
+  // A content-box menu measured 310px, and the platform's <a> rows (100% + padding) overflowed it.
+  it.each(['menu', 'item'])('should size the page selector %s as border-box', (part) => {
+    expect(css('app-page-selector.css')).toMatch(new RegExp(`\\.mint-page-selector__${part}\\s*\\{[^}]*box-sizing:\\s*border-box;`))
   })
 
   // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.

package/src/__tests__/styles/paletteTokens.test.ts

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { colorPalettes } from '../../stores/settings'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const variablesCss = readFileSync(join(resolve(here, '../..'), 'styles/variables.css'), 'utf-8')
+
+const ACCENT_TOKENS = [
+  '--color-primary',
+  '--color-primary-hover',
+  '--color-primary-pressed',
+  '--color-primary-soft',
+  '--color-primary-border',
+]
+const STATUS_TOKENS = ['--mint-success', '--mint-error', '--mint-warning', '--mint-warning-text']
+
+/** Declarations of every rule whose selector list has a selector that ends in `[data-palette="<key>"]`. */
+function paletteDeclarations(key: string, dark: boolean): string {
+  const attr = `[data-palette="${key}"]`
+  return [...variablesCss.matchAll(/([^{}]+)\{([^}]*)\}/g)]
+    .filter(([, selector]) => selector.split(',').some((s) => {
+      const one = s.trim()
+      return one.endsWith(attr) && one.startsWith('html.dark') === dark
+    }))
+    .map(([, , body]) => body)
+    .join('\n')
+}
+
+describe('accent palettes', () => {
+  it.each(Object.keys(colorPalettes).flatMap((key) => [[key, 'light'], [key, 'dark']]))(
+    'should define every accent token for the %s palette in %s mode',
+    (key, theme) => {
+      const body = paletteDeclarations(key, theme === 'dark')
+      for (const token of ACCENT_TOKENS) expect(body, `${key} ${theme} ${token}`).toMatch(new RegExp(`${token}\\s*:`))
+    },
+  )
+
+  it('should give the colour-blind palette Okabe-Ito status colours', () => {
+    const body = paletteDeclarations('colorblind', false)
+    for (const token of STATUS_TOKENS) expect(body, token).toMatch(new RegExp(`${token}\\s*:`))
+  })
+})

package/src/__tests__/styles/v2AuditRules.test.ts

@@ -0,0 +1,104 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// v2 design audit (2026-10-28) fixes in the SDK stylesheets.
+
+const srcRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+const stylesDir = join(srcRoot, 'styles')
+
+function css(path: string): string {
+  return readFileSync(join(stylesDir, path), 'utf-8').replace(/\/\*[\s\S]*?\*\//g, '')
+}
+
+function rule(text: string, selector: string): string {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return new RegExp(`(?:^|\\})\\s*${escaped}\\s*\\{([^}]*)\\}`).exec(text)?.[1] ?? ''
+}
+
+const rem = (value: string): number => Number(value.replace('rem', '')) * 16
+
+describe('v2 audit style rules', () => {
+  it('should stop the page bounce in a tab vertically and in a PWA on both axes', () => {
+    const variables = css('variables.css')
+    expect(rule(variables, 'html,\nbody')).toMatch(/overscroll-behavior-y:\s*none/)
+    expect(variables).toMatch(
+      /@media \(display-mode: standalone\)\s*\{\s*html,\s*body\s*\{\s*overscroll-behavior:\s*none;\s*\}/,
+    )
+  })
+
+  it('should keep the outermost cards at least 16px from the window edge', () => {
+    const inset = /--mint-page-inset:\s*([\d.]+rem)/.exec(css('variables.css'))?.[1] ?? '0rem'
+    expect(rem(inset)).toBeGreaterThanOrEqual(16)
+    expect(rule(css('components/app-layout.css'), '.mint-layout--floating')).toMatch(/padding:\s*var\(--mint-page-inset\)/)
+    const topBarCard = rule(css('components/app-top-bar.css'), '.mint-topbar--card')
+    expect(topBarCard).toMatch(/width:\s*calc\(100% - 2 \* var\(--mint-page-inset\)\)/)
+    expect(topBarCard).toMatch(/margin:\s*var\(--mint-page-inset\) var\(--mint-page-inset\) 0/)
+  })
+
+  it('should put the SDK utility classes in the utilities layer so host variants beat them', () => {
+    const vars = css('variables.css')
+    const order = vars.indexOf('@layer theme, base, components, utilities;')
+    const layer = vars.indexOf('@layer utilities {')
+    expect(order).toBeGreaterThan(-1)
+    expect(order).toBeLessThan(vars.indexOf('@layer base {'))
+    const utilities = vars.slice(layer, vars.indexOf('@media (prefers-reduced-motion'))
+    expect(layer).toBeGreaterThan(-1)
+    for (const selector of ['.flex-col {', '.text-text-muted {', '.truncate {', '.max-w-sm {']) {
+      expect(utilities).toContain(selector)
+    }
+  })
+
+  it('should drop the last DataFrame row rule over the !important cell border', () => {
+    const body = rule(css('components/dataframe.css'), '.mint-dataframe__row:last-child .mint-dataframe__td')
+    expect(body).toMatch(/border-bottom:\s*none\s*!important/)
+  })
+
+  it('should round the modal close button with --radius-md', () => {
+    expect(rule(css('components/modal.css'), '.mint-modal__close')).toMatch(/border-radius:\s*var\(--radius-md\)/)
+  })
+
+  it('should draw no capsule on the progress rail or the sheet grab hint', () => {
+    expect(css('components/progress-bar.css')).not.toMatch(/9999px/)
+    expect(rule(css('components/modal.css'), '.mint-modal__grab-hint')).not.toMatch(/9999px/)
+  })
+
+  it('should keep a 28px header control inside the section card header strip', () => {
+    const text = css('components/section-card.css')
+    const cases: Array<[string, number]> = [
+      ['.mint-section-card__header', 28],
+      ['[data-density="comfortable"] .mint-section-card__header', 32],
+    ]
+    for (const [selector, control] of cases) {
+      const body = rule(text, selector)
+      const minHeight = rem(/min-height:\s*([\d.]+rem)/.exec(body)?.[1] ?? '0rem')
+      const padTop = rem(/padding:\s*([\d.]+rem)/.exec(body)?.[1] ?? '0rem')
+      expect(control + 2 * padTop + 1, selector).toBeLessThanOrEqual(minHeight)
+    }
+  })
+
+  it('should end the settings pane without a closing row hairline and draw no box around the density preview', () => {
+    const text = css('components/settings-modal.css')
+    const last = rule(
+      text,
+      '.mint-settings-modal__group:last-of-type > .mint-settings-modal__group-grid > .mint-settings-modal__row:last-child',
+    )
+    expect(last).toMatch(/border-bottom:\s*none/)
+    expect(rule(text, '.mint-settings-modal__density-preview')).not.toMatch(/(^|;)\s*border(-radius)?:/)
+  })
+
+  it('should set the md number input text no smaller than the sm one', () => {
+    const text = css('components/number-input.css')
+    const size = (variant: string) =>
+      rem(/font-size:\s*([\d.]+rem)/.exec(rule(text, `.mint-number-input__input--${variant}`))?.[1] ?? '0rem')
+    expect(size('md')).toBeGreaterThan(size('sm'))
+  })
+
+  it('should give the generated JSON block a token radius and no frame', () => {
+    const sfc = readFileSync(join(srcRoot, 'components/GeneratedResultRenderer.vue'), 'utf-8')
+    const body = /\.mint-generated-result__json\s*\{([^}]*overflow:[^}]*)\}/.exec(sfc)?.[1] ?? ''
+    expect(body).toMatch(/border-radius:\s*var\(--radius-md\)/)
+    expect(body).not.toMatch(/(^|;)\s*border:/)
+  })
+})