@owlmeans/web-panel 0.1.18-rc.17 → 0.1.18-rc.19

package/agent-meta/manifest.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 2,
   "package": "@owlmeans/web-panel",
-  "version": "0.1.18-rc.16",
-  "generatedAt": "2026-08-27T21:16:47.143Z",
+  "version": "0.1.18-rc.18",
+  "generatedAt": "2026-08-30T20:53:30.853Z",
   "canonicalRepo": "https://github.com/owlmeans/common",
   "entries": [
     {

package/agent-meta/skills/web-panel/SKILL.md

@@ -8,7 +8,7 @@ user-invocable: false
 # @owlmeans/web-panel
 
 **Layer:** Web (React)
-**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.16"` in `dependencies`
+**Install:** `"@owlmeans/web-panel": "^0.1.18-rc.18"` in `dependencies`
 
 ## Key Exports
 
@@ -17,6 +17,7 @@ user-invocable: false
 | `makeContext<C, T>(cfg)` | Base web context factory (shadcn/Radix + default OwlMeans router) |
 | `NavLayout` | The application shell — header, section menu, screen menu, content, footer |
 | `TopNav` / `SideNav` / `Footer` | The shell's pieces, mountable on their own |
+| `Toaster` | The application's toast surface — mounted once, in the layout |
 | `components` submodule | shadcn/Radix panel/form components |
 | Re-exports from `@owlmeans/client-panel` | Cross-platform panel primitives, incl. `usePanelNav` and the `PanelNav*` types |
 | `main`, `exports`, `context`, `modules`, `types` | Wiring helpers |
@@ -146,6 +147,33 @@ Rules that make the shell behave:
 - **Vendor `navigation-menu`.** `SideNav` builds on the existing `Button`; `TopNav` uses the shadcn
   `navigation-menu` primitive — see the `@` contract below.
 
+### Toasts — `Toaster`
+
+An action that succeeded or failed says so in a toast. The surface is `Toaster`; the messages are
+`toast.success(...)` / `toast.error(...)` imported from **`sonner`** by whatever raised them.
+
+```tsx
+import { NavLayout, Toaster } from '@owlmeans/web-panel'
+
+export const MainLayout: FC<PropsWithChildren> = ({ children }) => <>
+  <NavLayout nav={navConfig} title="My App">{children}</NavLayout>
+  <Toaster />
+</>
+```
+
+- **Mount it exactly once, in the layout.** `toast()` writes to a module-global store, so two
+  mounted `Toaster`s render every message twice and none renders any of them — both failures are
+  silent, which is why `tests/toaster.spec.ts` asserts the count rather than the presence.
+- **Colours come from the app's own tokens** — `--popover`, `--popover-foreground`, `--border` —
+  so a toast matches every other floating surface. A caller's `style` merges over them.
+- **The theme follows the `.dark` class on the document element**, not a theme provider: the
+  package reads the class an app's `next-themes`, the owl theme provider, or a hand-written
+  toggle all set, and depends on none of them. Pass `theme` explicitly to override.
+- Defaults are `richColors`, `closeButton`, `duration={5000}`, `position="top-right"`; every one
+  of them, and every other `ToasterProps` field, is overridable per app.
+- `sonner` is a dependency of this package, so nothing is required of the consumer — but an app
+  raising its own toasts should declare `sonner` too, at a range that resolves to the same copy.
+
 ## Consumer setup — the `@` contract and Tailwind
 
 `web-panel` emits `@/components/ui/*` and `@/lib/utils` verbatim; the app's bundler resolves `@` to

package/build/components/index.d.ts

@@ -13,4 +13,5 @@ export * from './text.js';
 export * from './link.js';
 export * from './helper.js';
 export * from './status.js';
+export * from './toaster.js';
 //# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AAEjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AAEjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA"}

package/build/components/index.js

@@ -12,4 +12,5 @@ export * from './text.js';
 export * from './link.js';
 export * from './helper.js';
 export * from './status.js';
+export * from './toaster.js';
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AAEjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAEA,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AAEjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA"}

package/build/components/toaster.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+import type { ToasterProps } from 'sonner';
+/**
+ * The application's toast surface — mount it ONCE, in the layout.
+ *
+ * `toast()` from `sonner` is a module-global store, so a second mounted `Toaster` renders every
+ * message twice and no mounted `Toaster` renders none of them at all with nothing reported. The
+ * layout is therefore the only place this belongs.
+ *
+ * Colours come from the app's own theme tokens rather than sonner's palette: the CSS variables
+ * below are what its stylesheet paints with, so a toast follows `--popover` the way every other
+ * floating surface in the app does. A caller's `style` is merged OVER them, so an app that has to
+ * shift or recolour the stack keeps the rest.
+ */
+export declare const Toaster: FC<ToasterProps>;
+//# sourceMappingURL=toaster.d.ts.map

package/build/components/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../src/components/toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAA;AAG9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AAkC1C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAkBpC,CAAA"}

package/build/components/toaster.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Toaster as Sonner } from 'sonner';
+import { cn } from '@/lib/utils';
+const DARK_CLASS = 'dark';
+/**
+ * Follow whatever puts `.dark` on the document element.
+ *
+ * The panel's Tailwind theme switches on that class (`@custom-variant dark (&:is(.dark *))`),
+ * and every OwlMeans app drives it from something different — `next-themes` with
+ * `attribute="class"`, the owl theme provider, or nothing at all. Reading the class rather than a
+ * provider's hook means this component follows all three and depends on none of them: a package
+ * that imported `next-themes` would force it on every consumer of `@owlmeans/web-panel`, and a
+ * second copy of a theme provider is its own class of bug.
+ *
+ * `'system'` is the answer before the first paint and whenever nothing sets the class — sonner
+ * resolves it from `prefers-color-scheme`, which is what an app with no toggle means by it.
+ */
+const useDocumentTheme = () => {
+    const [theme, setTheme] = useState('system');
+    useEffect(() => {
+        const root = document.documentElement;
+        const read = () => setTheme(root.classList.contains(DARK_CLASS) ? 'dark' : 'system');
+        read();
+        const observer = new MutationObserver(read);
+        observer.observe(root, { attributes: true, attributeFilter: ['class'] });
+        return () => observer.disconnect();
+    }, []);
+    return theme;
+};
+/**
+ * The application's toast surface — mount it ONCE, in the layout.
+ *
+ * `toast()` from `sonner` is a module-global store, so a second mounted `Toaster` renders every
+ * message twice and no mounted `Toaster` renders none of them at all with nothing reported. The
+ * layout is therefore the only place this belongs.
+ *
+ * Colours come from the app's own theme tokens rather than sonner's palette: the CSS variables
+ * below are what its stylesheet paints with, so a toast follows `--popover` the way every other
+ * floating surface in the app does. A caller's `style` is merged OVER them, so an app that has to
+ * shift or recolour the stack keeps the rest.
+ */
+export const Toaster = ({ style, theme, className, ...props }) => {
+    const detected = useDocumentTheme();
+    return _jsx(Sonner, { theme: theme ?? detected, className: cn('toaster group', className), richColors: true, closeButton: true, duration: 5000, position: "top-right", style: {
+            '--normal-bg': 'var(--popover)',
+            '--normal-text': 'var(--popover-foreground)',
+            '--normal-border': 'var(--border)',
+            ...(style ?? {})
+        }, ...props });
+};
+//# sourceMappingURL=toaster.js.map

package/build/components/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../../src/components/toaster.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAEhC,MAAM,UAAU,GAAG,MAAM,CAAA;AAEzB;;;;;;;;;;;;GAYG;AACH,MAAM,gBAAgB,GAAG,GAA0B,EAAE;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAwB,QAAQ,CAAC,CAAA;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAA;QACrC,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;QACpF,IAAI,EAAE,CAAA;QACN,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAA;QAC3C,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QAExE,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjF,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAA;IAEnC,OAAO,KAAC,MAAM,IACZ,KAAK,EAAE,KAAK,IAAI,QAAQ,EACxB,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EACzC,UAAU,QACV,WAAW,QACX,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAC,WAAW,EACpB,KAAK,EAAE;YACL,aAAa,EAAE,gBAAgB;YAC/B,eAAe,EAAE,2BAA2B;YAC5C,iBAAiB,EAAE,eAAe;YAClC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;SACA,KACd,KAAK,GACT,CAAA;AACJ,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owlmeans/web-panel",
-  "version": "0.1.18-rc.17",
+  "version": "0.1.18-rc.19",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -63,7 +63,8 @@
     "@owlmeans/web-router": "^0.1.18-rc.8",
     "i18next-browser-languagedetector": "^8.0.0",
     "qrcode.react": "^4.2.0",
-    "react-google-recaptcha": "^3.1.0"
+    "react-google-recaptcha": "^3.1.0",
+    "sonner": "^2.0.7"
   },
   "peerDependencies": {
     "@radix-ui/react-label": "*",

package/src/components/index.ts

@@ -17,3 +17,4 @@ export * from './text.js'
 export * from './link.js'
 export * from './helper.js'
 export * from './status.js'
+export * from './toaster.js'

package/src/components/toaster.tsx

@@ -0,0 +1,68 @@
+import type { CSSProperties, FC } from 'react'
+import { useEffect, useState } from 'react'
+import { Toaster as Sonner } from 'sonner'
+import type { ToasterProps } from 'sonner'
+import { cn } from '@/lib/utils'
+
+const DARK_CLASS = 'dark'
+
+/**
+ * Follow whatever puts `.dark` on the document element.
+ *
+ * The panel's Tailwind theme switches on that class (`@custom-variant dark (&:is(.dark *))`),
+ * and every OwlMeans app drives it from something different — `next-themes` with
+ * `attribute="class"`, the owl theme provider, or nothing at all. Reading the class rather than a
+ * provider's hook means this component follows all three and depends on none of them: a package
+ * that imported `next-themes` would force it on every consumer of `@owlmeans/web-panel`, and a
+ * second copy of a theme provider is its own class of bug.
+ *
+ * `'system'` is the answer before the first paint and whenever nothing sets the class — sonner
+ * resolves it from `prefers-color-scheme`, which is what an app with no toggle means by it.
+ */
+const useDocumentTheme = (): ToasterProps['theme'] => {
+  const [theme, setTheme] = useState<ToasterProps['theme']>('system')
+
+  useEffect(() => {
+    const root = document.documentElement
+    const read = () => setTheme(root.classList.contains(DARK_CLASS) ? 'dark' : 'system')
+    read()
+    const observer = new MutationObserver(read)
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] })
+
+    return () => observer.disconnect()
+  }, [])
+
+  return theme
+}
+
+/**
+ * The application's toast surface — mount it ONCE, in the layout.
+ *
+ * `toast()` from `sonner` is a module-global store, so a second mounted `Toaster` renders every
+ * message twice and no mounted `Toaster` renders none of them at all with nothing reported. The
+ * layout is therefore the only place this belongs.
+ *
+ * Colours come from the app's own theme tokens rather than sonner's palette: the CSS variables
+ * below are what its stylesheet paints with, so a toast follows `--popover` the way every other
+ * floating surface in the app does. A caller's `style` is merged OVER them, so an app that has to
+ * shift or recolour the stack keeps the rest.
+ */
+export const Toaster: FC<ToasterProps> = ({ style, theme, className, ...props }) => {
+  const detected = useDocumentTheme()
+
+  return <Sonner
+    theme={theme ?? detected}
+    className={cn('toaster group', className)}
+    richColors
+    closeButton
+    duration={5000}
+    position="top-right"
+    style={{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      ...(style ?? {})
+    } as CSSProperties}
+    {...props}
+  />
+}

package/tests/context.ts

@@ -25,6 +25,10 @@ export const getHarnessUrl = async (): Promise<string> => {
       alias: { '@': resolve(here, '../src/@') },
       dedupe: ['react', 'react-dom'],
     },
+    // Pre-bundled at server start rather than discovered while the first request is being
+    // served: a dependency found mid-transform re-optimizes and reloads the page underneath
+    // the navigation, which the first `goto` of a cold run pays for as a timeout.
+    optimizeDeps: { include: ['sonner'] },
     server: { port: 0 },
     logLevel: 'warn'
   })

package/tests/harness/mount.tsx

@@ -8,8 +8,9 @@ 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 } from '../../src/index.js'
+import { makeContext, modules as baseModules, NavLayout, PanelApp, Toaster } from '../../src/index.js'
 
 // 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.
@@ -48,22 +49,34 @@ const footerLinks: PanelNavLink[] = [
 
 const screen = (id: string, text: string): FC => () => <div id={id}>{text}</div>
 
-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>
+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>
@@ -115,7 +128,7 @@ const modules = [
     route(alias.reportDetail, '/detail', frontend({ parent: alias.reports })),
     handler(screen('detail', 'detail-screen'))
   ),
-  entrypoint(route(alias.prefs, '/prefs', frontend({ parent: BASE })), handler(screen('prefs', 'prefs-screen'))),
+  entrypoint(route(alias.prefs, '/prefs', frontend({ parent: BASE })), handler(PrefsScreen)),
 ]
 
 context.registerEntrypoints(modules)

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)
+})