@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/tests/nav.spec.ts

@@ -1,17 +1,25 @@
 import { afterAll, describe, expect, test } from 'bun:test'
-import { closeBrowser, mountComponent } from '@owlmeans/test-ui'
+import { mountComponent, browserHelper } from '@owlmeans/test-ui'
 import { HARNESS_URL } from './context.js'
 
 // Browser work does not fit the 5s default: a cold harness compiles the app on first request.
 const TIMEOUT = 30_000
 
 afterAll(async () => {
-  await closeBrowser()
+  await browserHelper.closeBrowser()
 })
 
 const open = async (path: string) => mountComponent({ url: `${HARNESS_URL.replace(/\/$/, '')}${path}` })
 
 describe('@owlmeans/web-panel — two-layer navigation', () => {
+  test('a sibling detail route keeps the section selected through its pathname', async () => {
+    const { page, close } = await open('/reports')
+    try {
+      await page.locator('#to-sibling').click()
+      await page.waitForSelector('#sibling-detail')
+      expect(await page.locator('[data-slot="navigation-menu-link"][data-active]').textContent()).toBe('Work')
+    } finally { await close() }
+  }, TIMEOUT)
   test('a deep link resolves the active section with no history state', async () => {
     // The hard-load case: `location.state` is null here, so the section can only come from
     // the pathname. A menu that highlights nothing on a deep link is the bug this pins.
@@ -84,7 +92,7 @@ describe('@owlmeans/web-panel — two-layer navigation', () => {
     const { page, close } = await open('/dash')
     try {
       await page.waitForSelector('#dash')
-      const links = page.locator('footer a')
+      const links = page.locator('footer a:not([data-login-powered])')
       expect(await links.count()).toBe(2)
       expect(await links.nth(0).getAttribute('href')).toBe('/dash')
       expect(await links.nth(1).getAttribute('href')).toBe('https://owlmeans.com')
@@ -97,3 +105,441 @@ describe('@owlmeans/web-panel — two-layer navigation', () => {
     }
   }, TIMEOUT)
 })
+
+/**
+ * Perceptual lightness of a computed colour, 0 (black) to 1 (white).
+ *
+ * The theme is authored in `oklch(L C H)` and Chromium hands that back from
+ * `getComputedStyle` unchanged — it does not convert to `rgb()`, and neither does a canvas
+ * `fillStyle` round-trip — so L is read straight off. `rgb()` still turns up for the
+ * transparent case, and is approximated through its luminance.
+ *
+ * Comparing lightness rather than colour strings is the point: the failure being pinned is
+ * not a wrong colour, it is two colours too CLOSE to tell apart, which equality never sees.
+ */
+const lightness = (value: string): number => {
+  const oklch = /^oklch\(\s*([\d.]+%?)/i.exec(value.trim())
+  if (oklch != null) {
+    const raw = oklch[1]
+
+    return raw.endsWith('%') ? parseFloat(raw) / 100 : parseFloat(raw)
+  }
+
+  const [r, g, b] = (value.match(/[\d.]+/g) ?? []).slice(0, 3).map(Number)
+  const channel = (c: number): number => {
+    const v = c / 255
+
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+  }
+
+  // The cube root maps luminance onto roughly the same perceptual scale as OKLab's L.
+  return (0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)) ** (1 / 3)
+}
+
+/** The gap below which text stops being readable on its surface — as `ensureReadableTheme`. */
+const READABLE = 0.35
+
+describe('@owlmeans/web-panel — the header is its own surface', () => {
+  // The harness root carries `bg-primary text-primary-foreground`: a dark application shell,
+  // both halves of the pair correct. The header paints `bg-background` over it and is
+  // therefore a DIFFERENT surface — a near-white foreground inherited from the root lands on
+  // a near-white bar, and every child stating no colour of its own goes invisible. Nothing
+  // fails at build or at run time, so this is pinned from outside, on rendered pixels.
+  test('header content stays legible when the shell around it is dark', async () => {
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const style = async (selector: string, property: 'color' | 'backgroundColor') =>
+        page.locator(selector).first().evaluate(
+          (el, prop) => window.getComputedStyle(el)[prop as 'color'], property
+        )
+
+      const surface = lightness(await style('header', 'backgroundColor'))
+      const legible = async (selector: string) =>
+        Math.abs(lightness(await style(selector, 'color')) - surface) >= READABLE
+
+      // The brand and the action slot state no colour of their own, so they are exactly the
+      // elements that inherit across the boundary. The action slot is the reported case: a
+      // ghost-variant button rendered white on a white bar.
+      expect({
+        brand: await legible('a.brand'),
+        actions: await legible('#action-slot'),
+        section: await legible('[data-slot="navigation-menu-link"]'),
+      }).toEqual({ brand: true, actions: true, section: true })
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the header keeps an opaque background of its own', async () => {
+    // This is what makes it a separate surface, and therefore what makes the pairing above
+    // mandatory rather than redundant: it is sticky, so content scrolls beneath it and a
+    // transparent bar would show that content through the menu.
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const background = await page.locator('header').first()
+        .evaluate(el => window.getComputedStyle(el).backgroundColor)
+
+      expect(background).not.toMatch(/rgba\(0, 0, 0, 0\)|transparent/)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a broken headerClassName still leaves the backdrop layer opaque', async () => {
+    // `?header=broken` hands the header a Tailwind v3 arbitrary-value class v4 never emits, plus
+    // a bare `bg-transparent` — exactly what a layout-restyle pass produced once. tailwind-merge
+    // drops the header's own `bg-background` for both, so `header` itself legitimately reports a
+    // transparent computed background — that is `headerClassName` doing exactly what it says.
+    // What must NOT be transparent is the backdrop layer painted behind it: that is the element
+    // actually responsible for keeping content from showing through the bar.
+    const { page, close } = await open('/dash?header=broken')
+    try {
+      await page.waitForSelector('#dash')
+      const background = await page.locator('[data-nav-backdrop]').first()
+        .evaluate(el => window.getComputedStyle(el).backgroundColor)
+
+      expect(background).not.toMatch(/rgba\(0, 0, 0, 0\)|transparent/)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the backdrop layer never changes which div the shared-rhythm query finds first', async () => {
+    // `data-nav-backdrop` sits last in `header`'s DOM but paints behind everything via negative
+    // z-index — this pins that a position-based query for the header's own content div
+    // (`header > div`, `.first()`) still finds the rhythm div, not the backdrop.
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const first = await page.locator('header > div').first().getAttribute('data-nav-backdrop')
+      expect(first).toBeNull()
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})
+
+describe('@owlmeans/web-panel — the shell footer credit', () => {
+  test('the platform credit and the owner notice render, owner notice first', async () => {
+    // The harness configures `credit: { poweredBy: true, product: 'Harness', organization: 'Acme' }`
+    // with no explicit `line`, so `resolveCredit` composes one from product/organization — the
+    // same resolver the sign-in screen uses. Order here is the opposite of the sign-in screen's:
+    // the owner's own notice leads, the platform credit follows.
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const credit = page.locator('footer [data-shell-credit]')
+      await credit.waitFor()
+      const text = await credit.textContent()
+      expect(text).toContain('Acme')
+      expect(text).toContain('Powered by OwlMeans')
+      expect(text?.indexOf('Acme')).toBeLessThan(text!.indexOf('Powered by OwlMeans'))
+      const powered = page.locator('footer [data-shell-credit] a[data-login-powered]')
+      expect(await powered.getAttribute('href')).toBe('https://owlmeans.com')
+      expect(await powered.getAttribute('target')).toBe('_blank')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the footer links and the credit are centred, not left-aligned', async () => {
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const justify = await page.locator('footer > div').first()
+        .evaluate(el => window.getComputedStyle(el).alignItems)
+      expect(justify).toBe('center')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a layout with no footer prop still shows the credit', async () => {
+    // `NavLayout` used to skip `Footer` entirely when no `footer` prop was passed, which made the
+    // credit disappear from any area layout that never wired footer links. `?footer=none` omits
+    // the prop from the harness's own `NavLayout` call.
+    const { page, close } = await open('/dash?footer=none')
+    try {
+      await page.waitForSelector('#dash')
+      expect(await page.locator('footer a:not([data-login-powered])').count()).toBe(0)
+      expect(await page.locator('footer [data-shell-credit]').count()).toBe(1)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})
+
+describe('@owlmeans/web-panel — layout rhythm and link styling', () => {
+  test('header, content and footer share one horizontal rhythm', async () => {
+    // A content area with a width of its own sits visibly inset from a full-width header, which
+    // is what "the screen padding is much narrower than the header" looks like from outside.
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      const box = async (sel: string) => {
+        const b = await page.locator(sel).first().boundingBox()
+        if (b == null) throw new Error(`no box for ${sel}`)
+        return { x: Math.round(b.x), w: Math.round(b.width) }
+      }
+      const header = await box('header > div')
+      const content = await box('main > div')
+      const footer = await box('footer > div')
+
+      expect({ ...content, of: 'content' }).toEqual({ ...header, of: 'content' })
+      expect({ ...footer, of: 'footer' }).toEqual({ ...header, of: 'footer' })
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a width-only rhythm override keeps the side padding', async () => {
+    // The harness passes `containerClassName="max-w-[1280px]"` — a width and nothing else.
+    // `containerClassName` is merged over the shell's default rhythm rather than substituted
+    // for it, so `px-4` and `mx-auto` survive an override that never mentioned them. Replacing
+    // instead produced a header, content and footer all flush to the window edge.
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      const padding = async (selector: string) => page.locator(selector).first().evaluate(el => {
+        const style = window.getComputedStyle(el)
+
+        return [parseFloat(style.paddingLeft), parseFloat(style.paddingRight)]
+      })
+
+      const [header, content, footer] = await Promise.all([
+        padding('header > div'), padding('main > div'), padding('footer > div'),
+      ])
+
+      expect({
+        header: header.every(value => value > 0),
+        content: content.every(value => value > 0),
+        footer: footer.every(value => value > 0),
+      }).toEqual({ header: true, content: true, footer: true })
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('section entries render as links, not buttons', async () => {
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const active = page.locator('[data-slot="navigation-menu-link"][data-active]')
+      const style = await active.evaluate(el => {
+        const s = window.getComputedStyle(el)
+        return { bg: s.backgroundColor, radius: s.borderTopLeftRadius, deco: s.textDecorationLine }
+      })
+      // A filled background plus a radius is the tile look the shadcn primitive ships; a link
+      // carries neither, and marks the current section with an underline instead.
+      expect(style.bg).toMatch(/rgba\(0, 0, 0, 0\)|transparent/)
+      expect(style.radius).toBe('0px')
+      expect(style.deco).toBe('underline')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})
+
+describe('@owlmeans/web-panel — a node footer', () => {
+  test('a node footer spans the container, which stays centred, and the credit follows it', async () => {
+    // `?footer=node` hands `NavLayout` an application's own footer layout. It used to land inside
+    // the centred link row, shrink-wrapped to its content in the middle of the page; it is a
+    // full-width block of the container now, while the container itself keeps `items-center`
+    // for the link row and the credit.
+    const { page, close } = await open('/prefs?footer=node')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('footer [data-shell-credit]').waitFor()
+      const container = page.locator('footer > div').first()
+      const layout = await container.evaluate(el => {
+        const style = window.getComputedStyle(el)
+        const box = el.getBoundingClientRect()
+        const block = el.querySelector(':scope > [data-footer-content]')
+        const inner = block?.getBoundingClientRect()
+
+        return {
+          align: style.alignItems,
+          inner: {
+            x: Math.round(box.x + parseFloat(style.paddingLeft)),
+            w: Math.round(box.width - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)),
+          },
+          block: inner == null ? null : { x: Math.round(inner.x), w: Math.round(inner.width) },
+          hasHarnessBlock: block?.querySelector('#footer-block') != null,
+          last: el.lastElementChild?.hasAttribute('data-shell-credit') ?? false,
+          creditAfterBlock: block != null && el.querySelector(':scope > [data-shell-credit]') != null
+            && (block.compareDocumentPosition(el.querySelector(':scope > [data-shell-credit]')!)
+              & Node.DOCUMENT_POSITION_FOLLOWING) !== 0,
+        }
+      })
+
+      expect(layout.align).toBe('center')
+      expect(layout.block).toEqual(layout.inner)
+      expect(layout.hasHarnessBlock).toBe(true)
+      expect({ last: layout.last, creditAfterBlock: layout.creditAfterBlock })
+        .toEqual({ last: true, creditAfterBlock: true })
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a node footer keeps the shared rhythm', async () => {
+    const { page, close } = await open('/prefs?footer=node')
+    try {
+      await page.waitForSelector('#prefs')
+      const box = async (sel: string) => {
+        const b = await page.locator(sel).first().boundingBox()
+        if (b == null) throw new Error(`no box for ${sel}`)
+        return { x: Math.round(b.x), w: Math.round(b.width) }
+      }
+
+      expect(await box('footer > div')).toEqual(await box('header > div'))
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})
+
+/** The narrow viewport the menu sheet is for — below Tailwind's `md` (768px). */
+const PHONE = { width: 375, height: 800 }
+
+describe('@owlmeans/web-panel — the narrow-viewport menu', () => {
+  test('configured selectors identify a single destination in desktop and mobile navigation', async () => {
+    const { page, close } = await open('/dash?mobileMenu=1')
+    try {
+      await page.getByTestId('harness-nav').waitFor()
+      expect(await page.getByTestId('settings-nav').count()).toBe(1)
+      expect(await page.getByTestId('dashboard-nav').count()).toBe(1)
+      await page.setViewportSize(PHONE)
+      await page.getByRole('button', { name: 'Menu' }).click()
+      expect(await page.getByTestId('settings-nav').count()).toBe(1)
+      expect(await page.getByTestId('dashboard-nav').count()).toBe(1)
+      await page.getByTestId('settings-nav').click()
+      await page.waitForSelector('#prefs')
+      await page.getByRole('dialog', { name: 'Menu' }).waitFor({ state: 'detached' })
+    } finally { await close() }
+  }, TIMEOUT)
+  test('with mobileMenu, a phone gets a menu button instead of the section menu', async () => {
+    const { page, close } = await open('/dash?mobileMenu=1')
+    try {
+      await page.setViewportSize(PHONE)
+      await page.waitForSelector('#dash')
+      const trigger = page.getByRole('button', { name: 'Menu' })
+      expect(await trigger.isVisible()).toBe(true)
+      const box = await trigger.boundingBox()
+      expect((box?.width ?? 0) >= 44 && (box?.height ?? 0) >= 44).toBe(true)
+      // The section menu hides, the action slot stays, and the screen strip is not mounted at all:
+      // the sheet lists the same screens.
+      expect(await page.locator('header nav[aria-label="Sections"]').first().isVisible()).toBe(false)
+      expect(await page.locator('#action-slot').isVisible()).toBe(true)
+      expect(await page.locator('header nav[aria-label="Screens"]').count()).toBe(0)
+      expect(await page.locator('[data-nav-sheet]').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the sheet lists sections and their screens as links, and a press navigates and closes it', async () => {
+    const { page, close } = await open('/dash?mobileMenu=1')
+    try {
+      await page.setViewportSize(PHONE)
+      await page.waitForSelector('#dash')
+      await page.getByRole('button', { name: 'Menu' }).click()
+      const sheet = page.getByRole('dialog', { name: 'Menu' })
+      await sheet.waitFor()
+
+      // A multi-screen section lists its screens under its name; a single-screen section is one
+      // link carrying the section's label — no destination twice. Labels resolve as the menus'.
+      const links = sheet.getByRole('link')
+      expect(await links.allTextContents()).toEqual(['Dashboard', 'Reports', 'Settings', 'Extra'])
+      expect(await links.evaluateAll(els => els.map(el => el.getAttribute('href'))))
+        .toEqual(['/dash', '/reports', '/prefs', '/'])
+      expect(await sheet.getByRole('link', { name: 'Dashboard' }).getAttribute('aria-current')).toBe('page')
+      expect(await sheet.getByText('Work').count()).toBe(1)
+
+      await sheet.getByRole('link', { name: 'Settings' }).click()
+      await page.waitForSelector('#prefs')
+      expect(new URL(page.url()).pathname).toBe('/prefs')
+      await page.locator('[data-nav-sheet]').waitFor({ state: 'detached' })
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('with mobileMenu, a wide viewport is the ordinary shell', async () => {
+    const { page, close } = await open('/dash?mobileMenu=1')
+    try {
+      await page.waitForSelector('#dash')
+      expect(await page.locator('[data-nav-menu-trigger]').isVisible()).toBe(false)
+      expect(await page.locator('header nav[aria-label="Sections"]').first().isVisible()).toBe(true)
+      expect(await page.locator('aside nav button').count()).toBe(2)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('without mobileMenu, a phone keeps the section menu and the screen strip', async () => {
+    const { page, close } = await open('/dash')
+    try {
+      await page.setViewportSize(PHONE)
+      await page.waitForSelector('#dash')
+      expect(await page.locator('[data-nav-menu-trigger]').count()).toBe(0)
+      expect(await page.locator('header nav[aria-label="Sections"]').first().isVisible()).toBe(true)
+      const strip = page.locator('header nav[aria-label="Screens"]')
+      expect(await strip.isVisible()).toBe(true)
+      expect(await strip.locator('button').count()).toBe(2)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})
+
+describe('@owlmeans/web-panel — the skip link', () => {
+  test('Tab from the page start reaches the skip link first, and it moves focus to main#main', async () => {
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const link = page.locator('[data-skip-link]')
+      // First in the shell's root, before the header — never inside it, so `header > div` is
+      // still the shared-rhythm row.
+      expect(await link.evaluate(el => el.nextElementSibling?.tagName)).toBe('HEADER')
+      expect(await page.locator('header [data-skip-link]').count()).toBe(0)
+      expect(await link.isVisible()).toBe(true) // `sr-only` is still rendered, just clipped
+      const clipped = await link.boundingBox()
+      expect((clipped?.width ?? 0) <= 1).toBe(true)
+
+      await page.keyboard.press('Tab')
+      expect(await page.evaluate(() => document.activeElement?.hasAttribute('data-skip-link'))).toBe(true)
+      expect(await link.textContent()).toBe('Skip to content')
+      const shown = await link.evaluate(el => {
+        const style = window.getComputedStyle(el)
+        return { position: style.position, width: el.getBoundingClientRect().width }
+      })
+      expect(shown.position).toBe('fixed')
+      expect(shown.width > 1).toBe(true)
+
+      await page.keyboard.press('Enter')
+      expect(await page.evaluate(() => {
+        const active = document.activeElement
+        return active?.tagName === 'MAIN' ? active.id : null
+      })).toBe('main')
+      // In-app: the location is left alone, so the router sees no navigation.
+      expect(new URL(page.url()).hash).toBe('')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('skipLinkLabel={false} renders no link and claims no #main', async () => {
+    const { page, close } = await open('/dash?skip=off')
+    try {
+      await page.waitForSelector('#dash')
+      expect(await page.locator('[data-skip-link]').count()).toBe(0)
+      expect(await page.locator('#main').count()).toBe(0)
+      expect(await page.locator('main').count()).toBe(1)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})

package/tests/package-boundary.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'bun:test'
+import { readdirSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+const source = join(import.meta.dir, '../src')
+
+const sourceFiles = (dir: string): string[] => readdirSync(dir, { withFileTypes: true }).flatMap(entry => {
+  const path = join(dir, entry.name)
+
+  return entry.isDirectory() ? sourceFiles(path) : [path]
+})
+
+describe('@owlmeans/web-panel — package boundary', () => {
+  test('does not use consumer-project UI aliases in package source', () => {
+    for (const file of sourceFiles(source).filter(file => /\.tsx?$/.test(file))) {
+      expect(readFileSync(file, 'utf8')).not.toMatch(/from\s+['"]@\//)
+    }
+  })
+})

package/tests/picker-shots.spec.ts

@@ -0,0 +1,174 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { browserHelper } from '@owlmeans/test-ui'
+import type { Page } from '@owlmeans/test-ui'
+import { HARNESS_URL } from './context.js'
+
+/**
+ * Visual review material, not an assertion suite: every picker scenario at 1280 and 375, light
+ * and dark, written as PNGs for a person to look at. Runs only when `PICKER_SHOTS_DIR` names the
+ * directory to write to — `PICKER_SHOTS_DIR=/tmp/shots bun test tests/picker-shots.spec.ts`.
+ */
+const dir = process.env.PICKER_SHOTS_DIR
+const TIMEOUT = 120_000
+
+afterAll(async () => {
+  await browserHelper.closeBrowser()
+})
+
+interface Shot {
+  name: string
+  path: string
+  phone?: boolean
+  dark?: 'class' | 'os'
+  act?: (page: Page) => Promise<void>
+}
+
+const openMark = async (page: Page): Promise<void> => {
+  await page.locator('[data-picker-trigger]').first().click()
+  await page.locator('[data-picker-surface]').waitFor()
+  await page.waitForTimeout(250)
+}
+
+const shots: Shot[] = [
+  { name: 'desktop-closed', path: '/picker' },
+  { name: 'desktop-open', path: '/picker', act: openMark },
+  { name: 'desktop-open-dark', path: '/picker?dark=1', dark: 'class', act: openMark },
+  { name: 'desktop-open-os-dark', path: '/picker', dark: 'os', act: openMark },
+  { name: 'desktop-closed-dark', path: '/picker?dark=1', dark: 'class' },
+  {
+    name: 'desktop-search', path: '/picker', act: async page => {
+      await openMark(page)
+      await page.locator('[data-picker-search]').fill('user')
+      await page.waitForTimeout(150)
+    },
+  },
+  {
+    name: 'desktop-empty-search', path: '/picker', act: async page => {
+      await openMark(page)
+      await page.locator('[data-picker-search]').fill('zzzz')
+      await page.waitForTimeout(150)
+    },
+  },
+  {
+    name: 'desktop-category', path: '/picker', act: async page => {
+      await openMark(page)
+      await page.locator('[data-picker-category="commerce"]').click()
+      await page.waitForTimeout(150)
+    },
+  },
+  {
+    name: 'desktop-keyboard', path: '/picker', act: async page => {
+      await openMark(page)
+      await page.keyboard.press('ArrowDown')
+      await page.keyboard.press('ArrowRight')
+      await page.keyboard.press('ArrowDown')
+      await page.waitForTimeout(150)
+    },
+  },
+  {
+    name: 'desktop-custom', path: '/picker?custom=1', act: async page => {
+      await openMark(page)
+      await page.locator('[data-picker-color="custom"]').click()
+      await page.locator('[data-picker-hex]').fill('#0f766e')
+      await page.waitForTimeout(150)
+    },
+  },
+  {
+    name: 'desktop-custom-dark', path: '/picker?custom=1&dark=1', dark: 'class', act: async page => {
+      await openMark(page)
+      await page.locator('[data-picker-color="custom"]').click()
+      await page.locator('[data-picker-hex]').fill('#ff8800')
+      await page.waitForTimeout(150)
+    },
+  },
+  {
+    name: 'desktop-color-picker', path: '/picker', act: async page => {
+      await page.locator('[data-picker-trigger]').nth(1).click()
+      await page.locator('[data-picker-surface]').waitFor()
+      await page.waitForTimeout(250)
+    },
+  },
+  {
+    name: 'desktop-icon-picker', path: '/picker', act: async page => {
+      await page.locator('[data-picker-trigger]').nth(2).click()
+      await page.locator('[data-picker-surface]').waitFor()
+      await page.waitForTimeout(250)
+    },
+  },
+  { name: 'desktop-empty', path: '/picker?empty=1' },
+  { name: 'desktop-compact', path: '/picker?compact=1' },
+  { name: 'desktop-compact-open', path: '/picker?compact=1', act: openMark },
+  {
+    name: 'desktop-in-sheet', path: '/picker?inSheet=1', act: async page => {
+      await page.locator('#open-sheet').click()
+      await page.locator('[data-slot="sheet-content"]').waitFor()
+      await page.waitForTimeout(400)
+      await openMark(page)
+    },
+  },
+  { name: 'desktop-inline', path: '/picker?inline=1&custom=1' },
+  { name: 'desktop-bare', path: '/picker?bare=1' },
+  { name: 'phone-closed', path: '/picker', phone: true },
+  { name: 'phone-open', path: '/picker', phone: true, act: openMark },
+  { name: 'phone-open-dark', path: '/picker?dark=1', dark: 'class', phone: true, act: openMark },
+  {
+    name: 'phone-scrolled', path: '/picker', phone: true, act: async page => {
+      await openMark(page)
+      await page.locator('[data-picker-surface] [data-picker-scroll]').evaluate(element => { element.scrollTop = 420 })
+      await page.waitForTimeout(150)
+    },
+  },
+  {
+    name: 'phone-custom', path: '/picker?custom=1', phone: true, act: async page => {
+      await openMark(page)
+      await page.locator('[data-picker-color="custom"]').click()
+      await page.waitForTimeout(150)
+    },
+  },
+  {
+    name: 'phone-color-picker', path: '/picker', phone: true, act: async page => {
+      await page.locator('[data-picker-trigger]').nth(1).click()
+      await page.locator('[data-picker-surface]').waitFor()
+      await page.waitForTimeout(250)
+    },
+  },
+  { name: 'phone-inline', path: '/picker?inline=1', phone: true },
+  {
+    name: 'phone-in-sheet', path: '/picker?inSheet=1', phone: true, act: async page => {
+      await page.locator('#open-sheet').click()
+      await page.locator('[data-slot="sheet-content"]').waitFor()
+      await page.waitForTimeout(400)
+      await openMark(page)
+    },
+  },
+  { name: 'phone-empty', path: '/picker?empty=1', phone: true, act: openMark },
+  { name: 'phone-compact', path: '/picker?compact=1', phone: true },
+]
+
+describe.skipIf(dir == null)('@owlmeans/web-panel/picker — screenshots', () => {
+  test('every scenario', async () => {
+    const out = dir ?? ''
+    mkdirSync(out, { recursive: true })
+    const browser = await browserHelper.launchBrowser()
+    for (const shot of shots) {
+      const context = await browser.newContext(shot.phone === true
+        ? { viewport: { width: 375, height: 812 }, deviceScaleFactor: 2, hasTouch: true, isMobile: true }
+        : { viewport: { width: 1280, height: 800 } })
+      const page = await context.newPage()
+      try {
+        if (shot.dark === 'os') {
+          await page.emulateMedia({ colorScheme: 'dark' })
+        }
+        await page.goto(`${HARNESS_URL.replace(/\/$/, '')}${shot.path}`, { waitUntil: 'domcontentloaded' })
+        await page.locator('#picker').waitFor()
+        await shot.act?.(page)
+        await page.screenshot({ path: join(out, `${shot.name}.png`) })
+      } finally {
+        await context.close()
+      }
+    }
+    expect(shots.length).toBeGreaterThan(0)
+  }, TIMEOUT * 3)
+})