@owlmeans/web-panel 0.1.18-rc.2 → 0.1.18-rc.21

package/tests/harness/mount.tsx

@@ -0,0 +1,183 @@
+import '../../src/@/globals.css'
+
+import type { FC, PropsWithChildren } from 'react'
+import { createRoot } from 'react-dom/client'
+import { config } from '@owlmeans/client-context'
+import { AppType, service } from '@owlmeans/config'
+import { BASE, HOME } from '@owlmeans/context'
+import { entrypoint } from '@owlmeans/client-entrypoint'
+import { frontend, route } from '@owlmeans/route'
+import { handler, useNavigate } from '@owlmeans/client'
+import { toast } from 'sonner'
+import type { PanelNavConfig, PanelNavLink } from '../../src/index.js'
+import { makeContext, modules as baseModules, NavLayout, PanelApp, Toaster } from '../../src/index.js'
+import { LoginScreen } from '../../src/components/login/index.js'
+import { LoginOutcome, ensureLoginService } from '@owlmeans/client-auth/login'
+import type { LoginMethod } from '@owlmeans/client-auth/login'
+
+// A real app: a context, a layout entrypoint rendering NavLayout, and screens under it.
+// The nav model resolves the active screen from the router, so nothing here may be faked.
+
+const SERVICE = 'web-panel-test'
+const API = `${SERVICE}-api`
+
+const alias = {
+  dash: `${SERVICE}:web:dash`,
+  reports: `${SERVICE}:web:reports`,
+  reportsIndex: `${SERVICE}:web:reports-index`,
+  reportDetail: `${SERVICE}:web:report-detail`,
+  prefs: `${SERVICE}:web:prefs`,
+  login: `${SERVICE}:web:login`,
+}
+
+const navConfig: PanelNavConfig = {
+  sections: [
+    // Two screens — the side menu shows.
+    {
+      name: 'work', label: 'Work', items: [
+        { alias: alias.dash, label: 'Dashboard' },
+        { alias: alias.reports, label: 'Reports' },
+      ]
+    },
+    // One screen — the side menu must not render at all.
+    { name: 'settings', label: 'Settings', items: [{ alias: alias.prefs, label: 'Preferences' }] },
+    // No literal labels: exercises the humanized-alias fallback with no i18n present.
+    { name: 'extra', items: [{ alias: HOME }] },
+  ],
+}
+
+const footerLinks: PanelNavLink[] = [
+  { alias: alias.dash, label: 'Dashboard' },
+  { href: 'https://owlmeans.com', label: 'OwlMeans', open: true },
+]
+
+const screen = (id: string, text: string): FC => () => <div id={id}>{text}</div>
+
+/**
+ * What the sign-in screen offers in the harness.
+ *
+ * Real methods, with real `start` handlers that record they were called — the one thing the
+ * screen must never do is start one on its own, and a method that only pretended to start could
+ * not prove it.
+ */
+const started: string[] = []
+;(globalThis as unknown as { __loginStarted: string[] }).__loginStarted = started
+
+const method = (id: string, over?: Partial<LoginMethod>): LoginMethod => ({
+  id,
+  order: 10,
+  start: async () => { started.push(id); return LoginOutcome.Handled },
+  ...over,
+})
+
+/** The sign-in screen, with the terms confirmation the configuration requires. */
+const LoginHarness: FC = () => <LoginScreen
+  Logo={() => <span id="login-logo">logo</span>}
+  translate={(_key, defaultValue) => defaultValue}
+/>
+
+const Layout: FC<PropsWithChildren> = ({ children }) => <>
+  <NavLayout
+    nav={navConfig}
+    title="Harness"
+    actions={<button id="action-slot">action</button>}
+    footer={footerLinks}
+    // A DARK APPLICATION SHELL, which is what a themed app does to the root: a contrasting
+    // surface pair, both halves correct. The header paints its own opaque background, so it is
+    // a different surface, and everything in it must stay legible against `--background`
+    // rather than against this. The harness carries it permanently so every navigation test
+    // runs against the hostile case instead of a default-coloured page.
+    className="bg-primary text-primary-foreground"
+    // A WIDTH-ONLY rhythm override, which is what a design pass writes when it wants a wider
+    // page. It names the width and nothing else, so the centring and the side padding must
+    // survive it — substituting this for the default is a page running flush to the window edge.
+    containerClassName="max-w-[1280px]"
+  >{children}</NavLayout>
+  {/* Mounted ONCE, in the layout — exactly where an application mounts it. */}
+  <Toaster />
+</>
+
+/** The toast surface's exercise: a screen action that reports its outcome. */
+const PrefsScreen: FC = () => <div id="prefs">
+  prefs-screen
+  <button id="fire-toast" onClick={() => toast.success('preferences saved')}>save</button>
+  {/* Outlives any assertion — a theme check must not race the 5s default dismissal. */}
+  <button id="fire-sticky" onClick={() => toast.error('sticky failure', { duration: 600_000 })}>fail</button>
+</div>
+
+/** A grouping screen — it renders whichever child the router matched. */
+const ReportsGroup: FC<PropsWithChildren> = ({ children }) => <div id="reports-group">{children}</div>
+
+/**
+ * The section's landing screen. Its button navigates to a screen the MENU DOES NOT LIST,
+ * which is the only way to exercise the parent-chain walk: an in-app navigation puts the
+ * unlisted alias into the router state, and the active section has to be found from it.
+ */
+const ReportsIndex: FC = () => {
+  const nav = useNavigate()
+
+  return <div id="reports">
+    reports-screen
+    <button id="to-detail" onClick={nav.press(alias.reportDetail)}>detail</button>
+  </div>
+}
+
+// The panel context registers the api-config middleware, which resolves the advertise
+// entrypoint during init — that entrypoint needs a declared backend service route, so both
+// sides are declared here exactly as a real app declares them.
+const base = service({ type: AppType.Frontend, service: SERVICE, host: 'localhost', port: 5173 })
+service({ type: AppType.Backend, service: API, host: 'localhost', port: 5174, base: 'api' }, base)
+base.security = {
+  unsecure: true,
+  auth: {
+    login: {
+      // Confirmation required, which is the case that matters: a method must be blocked until it
+      // is given, and blocking must SAY so rather than swallow the click.
+      terms: { required: true, terms: 'https://example.test/terms', privacy: 'https://example.test/privacy' },
+      credit: { poweredBy: true, product: 'Harness', organization: 'Acme' },
+    },
+  },
+}
+
+// `ready` stays false: the Router compiles the entrypoint tree into routes ONLY while the
+// context is un-initialized, so a pre-readied context renders a blank page.
+const cfg = config(SERVICE, base as never)
+const context = makeContext(cfg as never)
+context.serviceRoute(SERVICE, true)
+context.serviceRoute(API, true)
+
+ensureLoginService(context as never).registerMethodSource({
+  alias: 'harness',
+  list: () => [
+    method('primary', { emphasis: 'primary', icon: 'google', label: 'Continue with Google' }),
+    method('secondary', { order: 20, label: 'Sign in with a key' }),
+    method('operator', { order: 900, restricted: true, label: 'Secret key' }),
+  ],
+})
+
+const modules = [
+  // The framework's own entrypoints come first — the api-config middleware the panel context
+  // registers resolves one of them during init, and without them init throws before any route
+  // is compiled.
+  ...baseModules,
+  entrypoint(route(BASE, '/', frontend()), handler(Layout)),
+  entrypoint(route(HOME, '/', frontend({ default: true, parent: BASE })), handler(screen('home', 'home-screen'))),
+  entrypoint(route(alias.dash, '/dash', frontend({ parent: BASE })), handler(screen('dash', 'dash-screen'))),
+  // A screen that has children needs a `default: true` child of its own — without one its own
+  // path matches nothing and the page renders blank.
+  entrypoint(route(alias.reports, '/reports', frontend({ parent: BASE })), handler(ReportsGroup)),
+  entrypoint(
+    route(alias.reportsIndex, '/', frontend({ default: true, parent: alias.reports })),
+    handler(ReportsIndex)
+  ),
+  entrypoint(
+    route(alias.reportDetail, '/detail', frontend({ parent: alias.reports })),
+    handler(screen('detail', 'detail-screen'))
+  ),
+  entrypoint(route(alias.prefs, '/prefs', frontend({ parent: BASE })), handler(PrefsScreen)),
+  entrypoint(route(alias.login, '/login', frontend({ parent: BASE })), handler(LoginHarness)),
+]
+
+context.registerEntrypoints(modules)
+
+createRoot(document.getElementById('root')!).render(<PanelApp context={context as never} />)

package/tests/login.spec.ts

@@ -0,0 +1,115 @@
+import { afterAll, beforeEach, describe, expect, test } from 'bun:test'
+import { closeBrowser, mountComponent } from '@owlmeans/test-ui'
+import { HARNESS_URL } from './context.js'
+
+const TIMEOUT = 30_000
+
+afterAll(async () => {
+  await closeBrowser()
+})
+
+const open = async () => {
+  const mounted = await mountComponent({ url: `${HARNESS_URL}login` })
+  await mounted.page.waitForSelector('[data-login-method]')
+  // A fresh acceptance for every test: the confirmation is remembered per browser, and a test
+  // that inherited the previous one would assert the unblocked path while claiming the other.
+  await mounted.page.evaluate(() => { window.localStorage.clear() })
+  await mounted.page.reload()
+  await mounted.page.waitForSelector('[data-login-method]')
+
+  return mounted
+}
+
+describe('@owlmeans/web-panel — the sign-in screen', () => {
+  test('offers one control per method, and starts NOTHING on its own', async () => {
+    const { page, close } = await open()
+    try {
+      // `operator` is restricted and the configuration never named it, so it must not appear.
+      expect(await page.locator('[data-login-method]').count()).toBe(2)
+      expect(await page.locator('[data-login-method="primary"]').count()).toBe(1)
+      expect(await page.locator('[data-login-method="operator"]').count()).toBe(0)
+
+      // Nothing left the document. This is requirement one of the whole feature.
+      expect(await page.evaluate(() => (window as never as { __loginStarted: string[] }).__loginStarted))
+        .toEqual([])
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('renders the logo the app supplied and the credit line', async () => {
+    const { page, close } = await open()
+    try {
+      expect(await page.locator('#login-logo').count()).toBe(1)
+      const credit = await page.locator('[data-login-credit]').textContent()
+      expect(credit).toContain('Powered by OwlMeans')
+      expect(credit).toContain('Harness')
+      expect(credit).toContain('Acme')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a click while the terms are unconfirmed starts nothing AND says why', async () => {
+    const { page, close } = await open()
+    try {
+      // `force`, because the control reports itself `aria-disabled` and Playwright's actionability
+      // check honours that — which is the point: the button IS clickable (it keeps its pointer
+      // events precisely so the refusal can explain itself), it merely announces that acting on it
+      // will not proceed. A real user's click lands here too.
+      await page.locator('[data-login-method="primary"]').click({ force: true })
+
+      // Nothing started…
+      expect(await page.evaluate(() => (window as never as { __loginStarted: string[] }).__loginStarted))
+        .toEqual([])
+      // …and the reason is announced, rather than the button silently doing nothing. This is why
+      // the control carries `aria-disabled` and not `disabled`: a disabled button eats the click.
+      expect(await page.locator('[role="alert"]').count()).toBe(1)
+      expect(await page.locator('[data-login-method="primary"]').getAttribute('aria-disabled'))
+        .toBe('true')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('confirming the terms unblocks the methods', async () => {
+    const { page, close } = await open()
+    try {
+      await page.locator('[data-login-terms]').check()
+      await page.locator('[data-login-method="primary"]').click()
+
+      expect(await page.evaluate(() => (window as never as { __loginStarted: string[] }).__loginStarted))
+        .toEqual(['primary'])
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the confirmation is remembered across a reload', async () => {
+    const { page, close } = await open()
+    try {
+      await page.locator('[data-login-terms]').check()
+      await page.reload()
+      await page.waitForSelector('[data-login-method]')
+
+      expect(await page.locator('[data-login-terms]').isChecked()).toBe(true)
+      expect(await page.locator('[data-login-method="primary"]').getAttribute('aria-disabled'))
+        .toBe('false')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the terms links point where the configuration says', async () => {
+    const { page, close } = await open()
+    try {
+      const hrefs = await page.locator('a[target="_blank"]').evaluateAll(
+        nodes => nodes.map(node => (node as HTMLAnchorElement).href)
+      )
+      expect(hrefs).toContain('https://example.test/terms')
+      expect(hrefs).toContain('https://example.test/privacy')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})

package/tests/nav.spec.ts

@@ -0,0 +1,252 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { closeBrowser, mountComponent } 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()
+})
+
+const open = async (path: string) => mountComponent({ url: `${HARNESS_URL.replace(/\/$/, '')}${path}` })
+
+describe('@owlmeans/web-panel — two-layer navigation', () => {
+  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.
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      expect(await page.locator('header nav').first().isVisible()).toBe(true)
+      const active = page.locator('[data-slot="navigation-menu-link"][data-active]')
+      expect(await active.textContent()).toBe('Work')
+      // Two screens in the section — the side menu renders.
+      expect(await page.locator('aside nav button').count()).toBe(2)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('a one-screen section renders no side menu', async () => {
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      expect(await page.locator('aside').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('pressing a section navigates to its first screen', async () => {
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.getByRole('link', { name: 'Work' }).click()
+      await page.waitForSelector('#dash')
+      expect(new URL(page.url()).pathname).toBe('/dash')
+      expect(await page.locator('aside').count()).toBe(1)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the side menu navigates and marks the current screen', async () => {
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      expect(await page.locator('aside button[aria-current="page"]').textContent()).toBe('Dashboard')
+      await page.locator('aside').getByRole('button', { name: 'Reports' }).click()
+      await page.waitForSelector('#reports')
+      expect(await page.locator('aside button[aria-current="page"]').textContent()).toBe('Reports')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('an unlisted nested screen keeps its ancestor section', async () => {
+    const { page, close } = await open('/reports')
+    try {
+      await page.waitForSelector('#reports')
+      // Navigating in-app puts an alias the menu does not list into the router state; the
+      // section must still resolve, by walking up to the ancestor that IS listed.
+      await page.locator('#to-detail').click()
+      await page.waitForSelector('#detail')
+      const active = page.locator('[data-slot="navigation-menu-link"][data-active]')
+      expect(await active.textContent()).toBe('Work')
+      expect(await page.locator('aside button[aria-current="page"]').count()).toBe(0)
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the footer resolves aliases, keeps literal hrefs, and never prints a raw key', async () => {
+    const { page, close } = await open('/dash')
+    try {
+      await page.waitForSelector('#dash')
+      const links = page.locator('footer a')
+      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')
+      expect(await links.nth(1).getAttribute('target')).toBe('_blank')
+      // No i18n instance is mounted: an unlabelled section falls back to a humanized alias.
+      expect(await page.getByRole('link', { name: 'Extra' }).count()).toBe(1)
+      expect(await page.locator('footer').textContent()).not.toContain('modules.')
+    } finally {
+      await close()
+    }
+  }, 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)
+})
+
+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)
+})

package/tests/smoke.spec.ts

@@ -8,6 +8,10 @@ const harness = `data:text/html,${encodeURIComponent(`
 </body></html>
 `)}`
 
+// Browser work does not fit the 5s default — and the nav suite boots a Vite harness in the same
+// process, which the first test to run pays for.
+const TIMEOUT = 30_000
+
 afterAll(async () => {
   await closeBrowser()
 })
@@ -20,5 +24,5 @@ describe('@owlmeans/web-panel — Playwright-library smoke', () => {
     } finally {
       await close()
     }
-  })
+  }, TIMEOUT)
 })

package/tests/toaster.spec.ts

@@ -0,0 +1,59 @@
+import { afterAll, describe, expect, test } from 'bun:test'
+import { closeBrowser, mountComponent } 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()
+})
+
+const open = async (path: string) => mountComponent({ url: `${HARNESS_URL.replace(/\/$/, '')}${path}` })
+
+describe('@owlmeans/web-panel — the toast surface', () => {
+  test('an action reports its outcome, once, through the layout-mounted Toaster', async () => {
+    // The whole point of shipping the Toaster from the panel: a screen calls `toast()` from
+    // `sonner` and something the LAYOUT mounted renders it. Both failure modes are silent —
+    // no mount renders nothing at all, two mounts render every message twice — so the count
+    // is asserted rather than the mere presence.
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('#fire-toast').click()
+
+      const toast = page.locator('[data-sonner-toast]')
+      await toast.first().waitFor({ state: 'visible' })
+      expect(await page.locator('[data-sonner-toaster]').count()).toBe(1)
+      expect(await toast.count()).toBe(1)
+      expect(await toast.first().textContent()).toContain('preferences saved')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+
+  test('the toasts follow the document theme class', async () => {
+    // The panel reads `.dark` off the document element rather than a theme provider's hook, so
+    // it follows next-themes, the owl theme provider and a hand-set class alike. A toast painted
+    // in the wrong theme is the visible half; the invisible half is a package that would have
+    // forced `next-themes` on every consumer.
+    const { page, close } = await open('/prefs')
+    try {
+      await page.waitForSelector('#prefs')
+      await page.locator('#fire-sticky').click()
+      // The toast is what becomes visible; the list around it is a zero-box positioning
+      // container, so waiting on the list itself never resolves.
+      await page.locator('[data-sonner-toast]').first().waitFor({ state: 'visible' })
+      const toaster = page.locator('[data-sonner-toaster]')
+      expect(await toaster.getAttribute('data-sonner-theme')).toBe('light')
+
+      await page.evaluate(() => document.documentElement.classList.add('dark'))
+      await page.waitForFunction(
+        () => document.querySelector('[data-sonner-toaster]')?.getAttribute('data-sonner-theme') === 'dark'
+      )
+      expect(await toaster.getAttribute('data-sonner-theme')).toBe('dark')
+    } finally {
+      await close()
+    }
+  }, TIMEOUT)
+})