@ahrowe/ui 0.40.0 → 0.41.0

package/docs/ThemeProvider.md

@@ -1,11 +1,11 @@
 # ThemeProvider
 
-**When to use:** Required wrapper for the entire component library. Injects all CSS custom properties as inline styles so every component inside can use theme variables. Place it at or near the root of your app.
+**When to use:** Applies a theme to its subtree, injecting its CSS custom properties as inline styles so every component inside can use them. [AhroweProvider](AhroweProvider.md) includes one and takes the same `themes` and `currentThemeId`: use that at the app root, and ThemeProvider on its own for a section with a different theme.
 
 **Keywords:** theming, dark mode, gradient
 
 **Import:** `import { ThemeProvider } from '@ahrowe/ui'`  
-**Types:** `import type { Theme, ThemeVariables } from '@ahrowe/ui'`  
+**Types:** `import type { Theme, ThemeVariables, ThemeProviderProps } from '@ahrowe/ui'`  
 **Built-in themes:** `import { defaultTheme, lightTheme } from '@ahrowe/ui'`
 
 ```tsx
@@ -58,18 +58,21 @@ no `themes` at all. `lightTheme` is its light sibling: same brand colour, invert
 both to let the user choose.
 
 ```tsx
-import { ThemeProvider, defaultTheme, lightTheme, useTheme } from '@ahrowe/ui';
+import { AhroweProvider, defaultTheme, lightTheme, useTheme } from '@ahrowe/ui';
 
-function App() {
+// A new array on every render reads as a theme change, so keep it at module scope.
+const THEMES = [defaultTheme, lightTheme];
+
+function Root() {
   const { currentThemeId, setCurrentThemeId } = useTheme(defaultTheme.id);
 
   return (
-    <ThemeProvider themes={[defaultTheme, lightTheme]} currentThemeId={currentThemeId}>
+    <AhroweProvider themes={THEMES} currentThemeId={currentThemeId}>
       <button onClick={() => setCurrentThemeId(currentThemeId === 'light' ? 'default' : 'light')}>
         Toggle theme
       </button>
       <App />
-    </ThemeProvider>
+    </AhroweProvider>
   );
 }
 ```
@@ -116,9 +119,9 @@ interface Theme {
 | `themes` | `Theme[]` | Theme definitions — defaults to built-in default theme |
 | `currentThemeId` | `string` | Active theme id — must match one of the `themes[].id` values |
 
-**Note:** Without `ThemeProvider`, all CSS variables are undefined and components will be unstyled.
+**Note:** Without a `ThemeProvider` or `AhroweProvider` above them, all CSS variables are undefined and components will be unstyled.
 
-**Base typography:** The wrapper also sets `font-family`, `font-size`, `font-weight`, and `color` from the theme's `--default-font`, `--default-font-size`, `--default-font-weight`, and `--text-color`, so everything inside — including content portaled into a `#bodyEnd` placed within the provider — inherits the theme's base text style without each component having to set it.
+**Base typography:** The wrapper also sets `font-family`, `font-size`, `font-weight`, and `color` from the theme's `--default-font`, `--default-font-size`, `--default-font-weight`, and `--text-color`, so everything inside — including what `AhroweProvider` portals — inherits the theme's base text style without each component having to set it.
 
 ## Gradient primary
 
@@ -202,7 +205,7 @@ through its own variable (`--slider-range-color`, `--pagination-active-backgroun
 
 ## Nested providers and portals
 
-Providers nest: an inner one overrides the variables it declares and inherits the rest, so a differently-themed panel inside a themed app works without restating the whole theme.
+Providers nest: an inner one overrides the variables it declares and inherits the rest, so a differently-themed panel inside a themed app works without restating the whole theme. Only the outermost one sets the page's `<meta name="theme-color">` to its `--primary-color`; an inner one themes its section, not the browser.
 
-A portal breaks that by default, because theme variables travel by CSS inheritance and a portal escapes the subtree. Anything rendered through `BodyEnd` — `Tooltip`, `Dropdown`, `InputDropdown`, `ColorPicker`, `Menu`, `Popover`, `Modal`, `Toast` — therefore carries the nearest provider's variables with it, so an open panel matches the panel that opened it rather than whatever wraps `#bodyEnd`.
+A portal breaks that by default, because theme variables travel by CSS inheritance and a portal escapes the subtree. Anything rendered through `BodyEnd` — `Tooltip`, `Dropdown`, `InputDropdown`, `ColorPicker`, `Menu`, `Popover`, `Modal`, `Toast` — therefore carries the nearest provider's variables with it, so an open panel matches the panel that opened it rather than whatever wraps the element it portals into.
 

package/docs/Toast.md

@@ -4,21 +4,21 @@
 
 **Keywords:** snackbar, notification popup
 
-**Import:** `import { ToastProvider, showToast } from '@ahrowe/ui'`  
-**Types:** `import type { ToastOptions, ToastType, ToastPosition } from '@ahrowe/ui'`
+**Import:** `import { showToast } from '@ahrowe/ui'`  
+**Types:** `import type { ToastOptions, ToastContextConfig, ToastLabels, ToastType, ToastPosition } from '@ahrowe/ui'`
 
-**Setup:** Wrap your app with `ToastProvider` (inside `ThemeProvider`):
+**Setup:** [AhroweProvider](AhroweProvider.md) shows the toasts. Its `toast` prop sets the defaults for all of them:
 
 ```tsx
-import { ThemeProvider, ToastProvider } from '@ahrowe/ui';
+import { AhroweProvider } from '@ahrowe/ui';
 
-<ThemeProvider>
-  <ToastProvider position="bottom-right" duration={3000}>
-    <App />
-  </ToastProvider>
-</ThemeProvider>
+<AhroweProvider toast={{ position: 'bottom-right', duration: 3000 }}>
+  <App />
+</AhroweProvider>
 ```
 
+`ToastProvider` was removed in 0.41. It took the same settings as props: move them into `toast`.
+
 **Usage:** Call `showToast` anywhere — no component hierarchy required:
 
 ```tsx
@@ -56,16 +56,17 @@ showToast('Done', {
 });
 ```
 
-**ToastProviderProps** (default config for all toasts):
+**ToastContextConfig**, the `toast` prop. Every key but `allowStacking` can also be passed to a single `showToast`:
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `position` | `ToastPosition` | `'bottom-right'` | Screen position |
-| `duration` | `number` | `3000` | Auto-dismiss delay in ms; `0` = persistent |
-| `showRemainingTime` | `boolean` | `false` | Show a progress bar draining to zero |
-| `showCloseButton` | `boolean` | `false` | Show × button |
+| Key | Type | Default | Description |
+|-----|------|---------|-------------|
+| `position` | `ToastPosition` | `'top-right'` | Screen position |
+| `duration` | `number` | `4000` | Auto-dismiss delay in ms; `0` = persistent |
+| `showRemainingTime` | `boolean` | `true` | Show a progress bar draining to zero |
+| `showCloseButton` | `boolean` | `true` | Show × button |
 | `allowStacking` | `boolean` | `true` | Allow multiple toasts simultaneously |
 | `pauseOnHover` | `boolean` | `true` | Pause the auto-dismiss timer while the toast is hovered or focused |
+| `labels` | `ToastLabels` | | See **Labels** |
 
 **Swipe to dismiss:** on touch devices, every toast can be dragged away to dismiss it, on top of the close button and auto-dismiss timer. A fast flick dismisses even without dragging far; dragging pauses the auto-dismiss timer for the duration of the gesture (regardless of `pauseOnHover`) and a vertical drag is left alone so it doesn't fight the page's own scrolling. It's gated to coarse (touch) pointers only — on mouse/trackpad devices the close button and auto-dismiss already cover it, and a drag there is more likely to be a text selection than an intentional dismiss.
 
@@ -75,7 +76,7 @@ showToast('Done', {
 
 **Slots:** `root` `icon` `content` `closeButton` `progressBar`
 
-**Labels:** `close` — the dismiss button's screen-reader name. Set it on `ToastProvider` for the whole app (`labels={{ close: 'Schließen' }}`), or per toast through the `showToast` options. Type: `ToastLabels`.
+**Labels:** `close`, the dismiss button's screen-reader name. Set it for the whole app in `AhroweProvider`'s `toast={{ labels: { close: 'Schließen' } }}`, or per toast with `showToast('Saved', { labels: { close: 'Schließen' } })`. Type: `ToastLabels`.
 
 ## Sizing
 

package/docs/Tooltip.md

@@ -77,4 +77,4 @@ The default bubble is an **inverse of the page** rather than a fixed colour: it
 
 The bubble, its arrow, the `details` badge and the error variant all scale with the theme's text. The bubble's `max-width` is `em`, so it bounds a line measure rather than a pixel count as the text grows.
 
-The badge derives its size from `--default-font-size` directly rather than from `em`. It renders inline wherever you put it, so an `em` would measure the surrounding text instead of the theme; the bubble can use `em` because it is portaled to `#bodyEnd` and always lands on the theme's own size.
+The badge derives its size from `--default-font-size` directly rather than from `em`. It renders inline wherever you put it, so an `em` would measure the surrounding text instead of the theme; the bubble can use `em` because it is portalled to the end of the app and always lands on the theme's own size.

package/docs/VirtualList.md

@@ -7,8 +7,6 @@
 **Import:** `import { VirtualList } from '@ahrowe/ui'`  
 **Types:** `import type { VirtualListProps, VirtualListColumn, VirtualListHandle, VirtualListSort } from '@ahrowe/ui'`
 
-**Requires:** `<div id="bodyEnd"></div>` in your app **only if** you use the column-visibility toggle (the gear menu) — its popover is a `Popover` that renders via portal. Lists without columns, or with `showColumnToggle={false}`, don't need it.
-
 ```tsx
 import { VirtualList } from '@ahrowe/ui';
 import type { VirtualListColumn } from '@ahrowe/ui';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",

package/dist/cjs-types/common/toast/toastProvider.d.ts

@@ -1,8 +0,0 @@
-import { default as React, ReactNode } from 'react';
-import { ToastContextConfig } from './toast.types.js';
-interface ToastProviderProps extends ToastContextConfig {
-    children: ReactNode;
-}
-declare function ToastProvider({ children, position, duration, showRemainingTime, showCloseButton, allowStacking, pauseOnHover, labels, }: ToastProviderProps): React.JSX.Element;
-export default ToastProvider;
-export type { ToastProviderProps };

package/dist/esm/common/toast/toastProvider.mjs

@@ -1,2 +0,0 @@
-"use client";import e from"../bodyEnd/bodyEnd.mjs";import t from"./toast.module.mjs";import n from"./toast.mjs";import{_registerToastHandler as r,_unregisterToastHandler as i}from"./toastService.mjs";import{useCallback as a,useEffect as o,useRef as s,useState as c}from"react";import l from"classnames";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";var p={position:`top-right`,duration:4e3,showRemainingTime:!0,showCloseButton:!0,allowStacking:!0,pauseOnHover:!0,labels:{close:`Close`}},m=220;function h(e){return t[`container-${e}`]}function g({children:g,position:_=p.position,duration:v=p.duration,showRemainingTime:y=p.showRemainingTime,showCloseButton:b=p.showCloseButton,allowStacking:x=p.allowStacking,pauseOnHover:S=p.pauseOnHover,labels:C}){let[w,T]=c([]),E=s(0),D=a(e=>{T(t=>t.map(t=>t.id===e?{...t,dismissing:!0}:t)),setTimeout(()=>{T(t=>t.filter(t=>t.id!==e))},m)},[]),O=a((e,t)=>{let n={position:t?.position??_,duration:t?.duration??v,showRemainingTime:t?.showRemainingTime??y,showCloseButton:t?.showCloseButton??b,pauseOnHover:t?.pauseOnHover??S,type:t?.type??`default`,classNames:t?.classNames,styles:t?.styles};E.current+=1;let r={id:`toast-${E.current}`,content:e,options:n,dismissing:!1};T(e=>!x&&e.length>0?(setTimeout(()=>{T([r])},m),e.map(e=>({...e,dismissing:!0}))):[...e,r])},[_,v,y,b,x,S]);o(()=>(r(O),()=>i()),[O]);let k=w.reduce((e,t)=>{let n=t.options.position;return e[n]||(e[n]=[]),e[n].push(t),e},{});return f(u,{children:[g,d(e,{children:Object.entries(k).map(([e,r])=>d(`div`,{className:l(t.container,h(e)),children:r.map(t=>d(n,{item:t,isBottom:e.startsWith(`bottom`),onDismiss:D,labels:{...p.labels,...C,...t.labels}},t.id))},e))})]})}export{g as default};
-//# sourceMappingURL=toastProvider.mjs.map

package/dist/esm/common/toast/toastProvider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"toastProvider.mjs","names":[],"sources":["../../../../package/common/toast/toastProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './toast.module.pcss';\nimport Toast from './toast';\nimport { _registerToastHandler, _unregisterToastHandler } from './toastService';\nimport type {\n  ToastContextConfig,\n  ToastItem,\n  ToastOptions,\n  ResolvedToastOptions,\n  ToastPosition,\n  ToastLabels,\n} from './toast.types';\nimport type { ReactNode } from 'react';\n\nconst DEFAULTS: Required<ToastContextConfig> = {\n  position: 'top-right',\n  duration: 4000,\n  showRemainingTime: true,\n  showCloseButton: true,\n  allowStacking: true,\n  pauseOnHover: true,\n  labels: { close: 'Close' },\n};\n\nconst DISMISS_ANIMATION_MS = 220;\n\nfunction positionToClass(position: ToastPosition): string {\n  return styles[`container-${position}`];\n}\n\ninterface ToastProviderProps extends ToastContextConfig {\n  children: ReactNode;\n}\n\nfunction ToastProvider({\n  children,\n  position = DEFAULTS.position,\n  duration = DEFAULTS.duration,\n  showRemainingTime = DEFAULTS.showRemainingTime,\n  showCloseButton = DEFAULTS.showCloseButton,\n  allowStacking = DEFAULTS.allowStacking,\n  pauseOnHover = DEFAULTS.pauseOnHover,\n  labels,\n}: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n  const counterRef = useRef(0);\n\n  const dismiss = useCallback((id: string) => {\n    setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, dismissing: true } : t)));\n    setTimeout(() => {\n      setToasts((prev) => prev.filter((t) => t.id !== id));\n    }, DISMISS_ANIMATION_MS);\n  }, []);\n\n  const addToast = useCallback(\n    (content: ReactNode, options?: ToastOptions) => {\n      const resolved: ResolvedToastOptions = {\n        position: options?.position ?? position,\n        duration: options?.duration ?? duration,\n        showRemainingTime: options?.showRemainingTime ?? showRemainingTime,\n        showCloseButton: options?.showCloseButton ?? showCloseButton,\n        pauseOnHover: options?.pauseOnHover ?? pauseOnHover,\n        type: options?.type ?? 'default',\n        classNames: options?.classNames,\n        styles: options?.styles,\n      };\n\n      counterRef.current += 1;\n      const id = `toast-${counterRef.current}`;\n      const newToast: ToastItem = { id, content, options: resolved, dismissing: false };\n\n      setToasts((prev) => {\n        if (!allowStacking && prev.length > 0) {\n          // Mark all existing as dismissing, then replace\n          setTimeout(() => {\n            setToasts([newToast]);\n          }, DISMISS_ANIMATION_MS);\n          return prev.map((t) => ({ ...t, dismissing: true }));\n        }\n        return [...prev, newToast];\n      });\n    },\n    [position, duration, showRemainingTime, showCloseButton, allowStacking, pauseOnHover],\n  );\n\n  useEffect(() => {\n    _registerToastHandler(addToast);\n    return () => _unregisterToastHandler();\n  }, [addToast]);\n\n  // Group toasts by position so per-toast position overrides work correctly\n  const byPosition = toasts.reduce<Record<string, ToastItem[]>>((acc, t) => {\n    const pos = t.options.position;\n    if (!acc[pos]) acc[pos] = [];\n    acc[pos].push(t);\n    return acc;\n  }, {});\n\n  return (\n    <>\n      {children}\n      <BodyEnd>\n        {Object.entries(byPosition).map(([pos, items]) => (\n          <div key={pos} className={cx(styles.container, positionToClass(pos as typeof position))}>\n            {items.map((item) => (\n              <Toast\n                key={item.id}\n                item={item}\n                isBottom={pos.startsWith('bottom')}\n                onDismiss={dismiss}\n                labels={{ ...DEFAULTS.labels, ...labels, ...item.labels } as Required<ToastLabels>}\n              />\n            ))}\n          </div>\n        ))}\n      </BodyEnd>\n    </>\n  );\n}\n\nexport default ToastProvider;\nexport type { ToastProviderProps };\n"],"mappings":"+WAiBA,IAAM,EAAyC,CAC7C,SAAU,YACV,SAAU,IACV,kBAAmB,GACnB,gBAAiB,GACjB,cAAe,GACf,aAAc,GACd,OAAQ,CAAE,MAAO,OAAQ,CAC3B,EAEM,EAAuB,IAE7B,SAAS,EAAgB,EAAiC,CACxD,OAAO,EAAO,aAAa,IAC7B,CAMA,SAAS,EAAc,CACrB,WACA,WAAW,EAAS,SACpB,WAAW,EAAS,SACpB,oBAAoB,EAAS,kBAC7B,kBAAkB,EAAS,gBAC3B,gBAAgB,EAAS,cACzB,eAAe,EAAS,aACxB,UACqB,CACrB,GAAM,CAAC,EAAQ,GAAa,EAAsB,CAAC,CAAC,EAC9C,EAAa,EAAO,CAAC,EAErB,EAAU,EAAa,GAAe,CAC1C,EAAW,GAAS,EAAK,IAAK,GAAO,EAAE,KAAO,EAAK,CAAE,GAAG,EAAG,WAAY,EAAK,EAAI,CAAE,CAAC,EACnF,eAAiB,CACf,EAAW,GAAS,EAAK,OAAQ,GAAM,EAAE,KAAO,CAAE,CAAC,CACrD,EAAG,CAAoB,CACzB,EAAG,CAAC,CAAC,EAEC,EAAW,GACd,EAAoB,IAA2B,CAC9C,IAAM,EAAiC,CACrC,SAAU,GAAS,UAAY,EAC/B,SAAU,GAAS,UAAY,EAC/B,kBAAmB,GAAS,mBAAqB,EACjD,gBAAiB,GAAS,iBAAmB,EAC7C,aAAc,GAAS,cAAgB,EACvC,KAAM,GAAS,MAAQ,UACvB,WAAY,GAAS,WACrB,OAAQ,GAAS,MACnB,EAEA,EAAW,SAAW,EAEtB,IAAM,EAAsB,CAAE,GAAA,SADV,EAAW,UACG,UAAS,QAAS,EAAU,WAAY,EAAM,EAEhF,EAAW,GACL,CAAC,GAAiB,EAAK,OAAS,GAElC,eAAiB,CACf,EAAU,CAAC,CAAQ,CAAC,CACtB,EAAG,CAAoB,EAChB,EAAK,IAAK,IAAO,CAAE,GAAG,EAAG,WAAY,EAAK,EAAE,GAE9C,CAAC,GAAG,EAAM,CAAQ,CAC1B,CACH,EACA,CAAC,EAAU,EAAU,EAAmB,EAAiB,EAAe,CAAY,CACtF,EAEA,OACE,EAAsB,CAAQ,MACjB,EAAwB,GACpC,CAAC,CAAQ,CAAC,EAGb,IAAM,EAAa,EAAO,QAAqC,EAAK,IAAM,CACxE,IAAM,EAAM,EAAE,QAAQ,SAGtB,OAFK,EAAI,KAAM,EAAI,GAAO,CAAC,GAC3B,EAAI,EAAI,CAAC,KAAK,CAAC,EACR,CACT,EAAG,CAAC,CAAC,EAEL,OACE,EAAA,EAAA,CAAA,SAAA,CACG,EACD,EAAC,EAAD,CAAA,SACG,OAAO,QAAQ,CAAU,CAAC,CAAC,KAAK,CAAC,EAAK,KACrC,EAAC,MAAD,CAAe,UAAW,EAAG,EAAO,UAAW,EAAgB,CAAsB,CAAC,EACnF,SAAA,EAAM,IAAK,GACV,EAAC,EAAD,CAEQ,OACN,SAAU,EAAI,WAAW,QAAQ,EACjC,UAAW,EACX,OAAQ,CAAE,GAAG,EAAS,OAAQ,GAAG,EAAQ,GAAG,EAAK,MAAO,CACzD,EALM,EAAK,EAKX,CACF,CACE,EAVK,CAUL,CACN,CACM,CAAA,CACT,CAAA,CAAA,CAEN"}

package/dist/types/common/toast/toastProvider.d.ts

@@ -1,8 +0,0 @@
-import { default as React, ReactNode } from 'react';
-import { ToastContextConfig } from './toast.types.js';
-interface ToastProviderProps extends ToastContextConfig {
-    children: ReactNode;
-}
-declare function ToastProvider({ children, position, duration, showRemainingTime, showCloseButton, allowStacking, pauseOnHover, labels, }: ToastProviderProps): React.JSX.Element;
-export default ToastProvider;
-export type { ToastProviderProps };