oihana-next-ui 0.1.45 → 0.1.47

package/README.md

@@ -100,50 +100,72 @@ Open [http://localhost:3666](http://localhost:3666) to browse the component demo
 - [Day.js](https://day.js.org/) — Lightweight date library
 - [Chroma.js](https://www.vis4.net/chromajs/) — Color manipulation library
 
-### Build the library
+## Release
 
-```bash
-bun run build:lib
-```
+The package publishes the raw `src/` tree (no build step) — see the `files` and `exports` fields in [`package.json`](./package.json).
 
-### Watch mode
+### Versioning
 
-```bash
-bun run build:lib:watch
-```
+This project follows [Semantic Versioning](https://semver.org/) — `MAJOR.MINOR.PATCH` (e.g. `1.2.3`).
 
-## Release
+| Type  | Command                 | Example             | When to use                                   |
+|-------|-------------------------|---------------------|-----------------------------------------------|
+| Patch | `bun run release:patch` | `0.1.46` → `0.1.47` | Bug fix, small tweak                          |
+| Minor | `bun run release:minor` | `0.1.46` → `0.2.0`  | New component or feature, backward compatible |
+| Major | `bun run release:major` | `0.1.46` → `1.0.0`  | Breaking change                               |
 
-### Versioning
+### Prerequisites
 
-This project follows [Semantic Versioning](https://semver.org/) — `MAJOR.MINOR.PATCH` (e.g. `1.2.3`).
+- Logged in to npm — `npm whoami` should print your username (otherwise `npm login`).
+- A git remote named `origin-ssh` configured (the `release` script pushes there with `--follow-tags`).
+- A clean working tree, ideally — `release:*` will otherwise commit any pending change as `chore: prepare release` before bumping the version.
+
+### Patch release walkthrough — e.g. `0.1.46` → `0.1.47`
+
+1. **Update [`CHANGELOG.md`](./CHANGELOG.md)** — add a new section under `[Unreleased]` with the new version and date :
+
+   ~~~markdown
+   ## [0.1.47] — 2026-04-27
+
+   **Components**
+   - `XYZ` — what changed and why.
+   ~~~
 
-| Type | Command | Example | When to use |
-|------|---------|---------|-------------|
-| Patch | `bun run release:patch` | `0.1.0` → `0.1.1` | Bug fix, minor tweak |
-| Minor | `bun run release:minor` | `0.1.0` → `0.2.0` | New component or feature, backward compatible |
-| Major | `bun run release:major` | `0.1.0` → `1.0.0` | Breaking change |
+2. **Run the release script** :
 
-Each script automatically bumps the version, builds the library, publishes to npm, and pushes the commit and tag to GitHub.
+   ```bash
+   bun run release:patch
+   ```
 
-You can also set a specific version manually :
+   What happens, in order — all of this is automatic :
+
+   1. `stage` — commits any pending change as `chore: prepare release` (skipped if the working tree is clean).
+   2. `npm version patch` — bumps `0.1.46` → `0.1.47` in `package.json`.
+   3. `version` script (auto-run by `npm version`) :
+      - `inject-version` writes the new version into `src/version.js` and `public/sw.js`,
+      - `generate-exports` refreshes the `exports` field in `package.json`,
+      - then stages `src/version.js`, `public/sw.js` and `package.json` for the version commit.
+   4. `npm version` creates the release commit (`0.1.47`) and the matching git tag.
+   5. `postversion` script (auto-run by `npm version`) → `release` :
+      - `npm publish --access public` publishes to npm,
+      - `git push origin-ssh --follow-tags` pushes the commit and the tag to GitHub.
+
+### Manual / pre-release version
+
+Set a specific version manually — `version` + `postversion` still run as above :
 
 ```bash
 npm version 1.0.0
-bun run release
 ```
 
-Or a pre-release version :
+Pre-release versions :
 
 ```bash
-npm version prerelease --preid=alpha   # 0.1.0 → 0.1.1-alpha.0
-npm version prerelease --preid=beta    # 0.1.0 → 0.1.1-beta.0
-npm version prerelease --preid=rc      # 0.1.0 → 0.1.1-rc.0
-bun run release
+npm version prerelease --preid=alpha   # 0.1.46 → 0.1.47-alpha.0
+npm version prerelease --preid=beta    # 0.1.46 → 0.1.47-beta.0
+npm version prerelease --preid=rc      # 0.1.46 → 0.1.47-rc.0
 ```
 
-`npm version` automatically updates `package.json`, creates a Git commit and a Git tag.
-
 ## License
 
 [Mozilla Public License 2.0](./LICENSE) — © Marc Alcaraz

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oihana-next-ui",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "private": false,
   "description": "Oihana Next.js UI component library — reusable components, hooks and utilities built with React 19, Next.js, Tailwind CSS and DaisyUI",
   "author": {
@@ -50,29 +50,29 @@
     "./themes/*": "./src/themes/*"
   },
   "peerDependencies": {
-    "next": "^16.0.0",
+    "next": "16.2.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0",
     "daisyui": "^5.0.0"
   },
   "dependencies": {
-    "@maskito/core": "^5.1.1",
-    "@maskito/kit": "^5.1.1",
-    "@maskito/react": "^5.1.1",
+    "@maskito/core": "^5.2.2",
+    "@maskito/kit": "^5.2.2",
+    "@maskito/react": "^5.2.2",
     "@use-gesture/react": "^10.3.1",
     "chroma-js": "^3.2.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.19",
+    "dayjs": "^1.11.20",
     "flag-icons": "^7.5.0",
     "html-react-parser": "^5.2.17",
     "ky": "^1.14.3",
-    "motion": "^12.35.0",
-    "next": "16.1.6",
+    "motion": "^12.38.0",
+    "next": "16.2.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-icons": "^5.6.0",
-    "react-is": "^19.2.4",
+    "react-is": "^19.2.5",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "react-use": "^17.6.0",
@@ -80,24 +80,24 @@
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
-    "sanitize-html": "^2.17.1",
+    "sanitize-html": "^2.17.3",
     "tailwind-merge": "^3.5.0",
-    "validator": "^13.15.26",
+    "validator": "^13.15.35",
     "vegas-js-core": "^1.0.47"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.0",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/typography": "^0.5.19",
-    "@types/node": "^25.3.3",
+    "@types/node": "^25.6.0",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/sanitize-html": "^2.16.0",
+    "@types/sanitize-html": "^2.16.1",
     "babel-plugin-react-compiler": "1.0.0",
     "daisyui": "^5.5.19",
     "raw-loader": "^4.0.2",
     "sharp": "^0.34.5",
     "tailwind-scrollbar": "^4.0.2",
-    "tailwindcss": "^4.2.1",
+    "tailwindcss": "^4.2.4",
     "tailwindcss-animated": "^2.0.0",
     "tailwindcss-opentype": "^1.2.0"
   },

package/src/app/lab/@tabs/modals/page.js

@@ -1,10 +1,11 @@
 'use client' ;
 
-import CRUDDemo       from '@/demo/modals/CRUDModalDemo';
-import InputModalDemo from '@/demo/modals/InputModalDemo';
-import ModalDemo      from '@/demo/modals/ModalDemo';
-import Container from '@/display/Container';
-import Page           from '@/display/Page' ;
+import CRUDDemo           from '@/demo/modals/CRUDModalDemo';
+import InputModalDemo     from '@/demo/modals/InputModalDemo';
+import ModalDemo          from '@/demo/modals/ModalDemo';
+import ToastOverModalDemo from '@/demo/modals/ToastOverModalDemo';
+import Container          from '@/display/Container';
+import Page               from '@/display/Page' ;
 
 /**
  * Modal showcase page.
@@ -26,6 +27,8 @@ const ModalShowcase = ({ path = 'app.test' }) =>
 
             <ModalDemo />
 
+            <ToastOverModalDemo />
+
             <CRUDDemo />
 
             <InputModalDemo />

package/src/components/inputs/InputHexColor.jsx

@@ -17,6 +17,7 @@ import { MdColorLens as ColorIcon } from 'react-icons/md' ;
  *
  * @param {Object} props
  * @param {boolean} [props.alpha=false] - Allow alpha channel (8 chars: #RRGGBBAA)
+ * @param {number} [props.length] - Explicit hex length (3, 4, 6 or 8). Overrides the default derived from `alpha`. When set, validation requires exactly this length.
  * @param {boolean} [props.prefixed=true] - Display "#" prefix
  * @param {boolean} [props.showColorPreview=true] - Show color preview in icon background
  * @param {boolean} [props.showValidationError=false] - Show error message for invalid colors
@@ -71,6 +72,7 @@ const InputHexColor =
     error: externalError,
     icon,
     iconClassName = 'aspect-square',
+    length,
     onChange: onChangeFromProps,
     prefixed = true,
     showColorPreview = true,
@@ -85,6 +87,10 @@ const InputHexColor =
     const [ currentColor , setCurrentColor ] = useState( externalValue || defaultValue || '' ) ;
     const [ internalError, setInternalError ] = useState( '' ) ;
 
+    // --------- Resolve max length (explicit length wins over alpha default)
+
+    const maxLength = length ?? ( alpha ? 8 : 6 ) ;
+
     // --------- Transformations
 
     const transform = value =>
@@ -94,8 +100,7 @@ const InputHexColor =
             return '' ;
         }
 
-        const cleaned   = value.replace( /([^0-9A-F]+)/gi, '' ) ;
-        const maxLength = alpha ? 8 : 6 ;
+        const cleaned = value.replace( /([^0-9A-F]+)/gi, '' ) ;
 
         return cleaned.substring( 0, maxLength ).toUpperCase() ;
     } ;
@@ -108,19 +113,21 @@ const InputHexColor =
             return true ;
         }
 
-        const isValid = validateHexColor( value , alpha ) ;
+        // When length is explicit, require exact length; otherwise accept any valid hex form.
+        const isValid = length !== undefined
+            ? ( value.length === length && validateHexColor( value, alpha ) )
+            : validateHexColor( value, alpha ) ;
 
         if ( showValidationError )
         {
             if ( !isValid )
             {
-                const expectedLength = alpha ? 8 : 6 ;
                 const defaultPattern = 'Invalid hex color (expected {0} characters: 0-9, A-F)' ;
 
                 setInternalError( fastFormat
                 (
                     validationError ?? defaultPattern,
-                    String( expectedLength )
+                    String( maxLength )
                 ) ) ;
             }
             else
@@ -134,12 +141,14 @@ const InputHexColor =
 
     const format = prefixed ? value =>
     {
-        return value ? `#${value}` : '' ;
+        if ( !value ) return '' ;
+        return value.startsWith( '#' ) ? value : `#${value}` ;
     } : undefined ;
 
     const process = ( value ) =>
     {
-        return value ? `#${value}` : '' ;
+        if ( !value ) return '' ;
+        return value.startsWith( '#' ) ? value : `#${value}` ;
     } ;
 
     // --------- Intercept onChange to update currentColor

package/src/contexts/toasts/provider.js

@@ -6,7 +6,9 @@
  * @module contexts/toasts/ToastProvider
  */
 
-import { useState } from 'react' ;
+import { useEffect , useRef , useState } from 'react' ;
+
+import { createPortal } from 'react-dom' ;
 
 import { AnimatePresence , motion } from 'motion/react' ;
 
@@ -19,6 +21,11 @@ import ToastContext from './context' ;
 /**
  * Provides toast notification management.
  *
+ * Toasts are rendered through a React portal whose target dynamically
+ * follows the topmost open `<dialog>` (if any), so they paint above modal
+ * backdrops via the dialog's own top-layer entry. When no dialog is open,
+ * the portal target falls back to `document.body`.
+ *
  * @param {Object} props
  * @param {React.ReactNode} props.children - Child components.
  * @param {string} [props.hAlign='end'] - Horizontal alignment.
@@ -58,6 +65,133 @@ const ToastProvider =
         setToasts( [] ) ;
     } ;
 
+    // We own a single, stable <div> in the DOM that hosts the toast UI via
+    // a React portal. React only ever sees this div as the portal target —
+    // it never moves from React's perspective, so the toast subtree is never
+    // unmounted and framer-motion animations don't restart.
+    //
+    // We physically *move* this div between document.body and the topmost
+    // open <dialog> via DOM appendChild. When the div is a child of a
+    // modal <dialog>, it inherits the dialog's top-layer entry and paints
+    // above the dialog's backdrop / contents — no popover trickery needed,
+    // and the toast stays interactive (children of a modal aren't inert).
+    const [ container , setContainer ] = useState( null ) ;
+
+    // Tracks dialogs in promotion order (topmost = last). We can't query
+    // the browser's top-layer order from JS, so we maintain it ourselves
+    // by listening for `open`-attribute mutations on every <dialog>.
+    const dialogStackRef = useRef( [] ) ;
+
+    useEffect( () =>
+    {
+        if ( typeof document === 'undefined' ) { return ; }
+
+        const div = document.createElement( 'div' ) ;
+        div.setAttribute( 'data-toast-portal' , '' ) ;
+        // Take the container out of normal flow so it doesn't become a grid
+        // item when living inside a <dialog> with `display: grid` (DaisyUI's
+        // .modal layout) — that would push the modal-box off-center. We
+        // give it no size and no `inset`, so it's effectively a zero-area
+        // anchor; the inner `.toast` div is itself `position: fixed` and
+        // positions on the viewport regardless of where this anchor sits.
+        div.style.position = 'fixed' ;
+        div.style.top      = '0' ;
+        div.style.left     = '0' ;
+        div.style.width    = '0' ;
+        div.style.height   = '0' ;
+        div.style.margin   = '0' ;
+        div.style.padding  = '0' ;
+        if ( zIndex > 0 ) { div.style.zIndex = String( zIndex ) ; }
+        document.body.appendChild( div ) ;
+        setContainer( div ) ;
+
+        const moveContainer = () =>
+        {
+            const stack   = dialogStackRef.current ;
+            const topmost = stack[ stack.length - 1 ] ;
+            const target  = topmost && topmost.isConnected && topmost.hasAttribute( 'open' )
+                ? topmost
+                : document.body ;
+
+            if ( div.parentNode !== target )
+            {
+                target.appendChild( div ) ;
+            }
+        } ;
+
+        // Initial sync (any dialog already open at mount time?).
+        const initialOpen = document.body.querySelectorAll( 'dialog[open]' ) ;
+        for ( const d of initialOpen ) { dialogStackRef.current.push( d ) ; }
+        moveContainer() ;
+
+        const handleOpened = dialog =>
+        {
+            const stack = dialogStackRef.current ;
+            const idx   = stack.indexOf( dialog ) ;
+            if ( idx >= 0 ) { stack.splice( idx , 1 ) ; }
+            stack.push( dialog ) ;
+        } ;
+
+        const handleClosed = dialog =>
+        {
+            const stack = dialogStackRef.current ;
+            const idx   = stack.indexOf( dialog ) ;
+            if ( idx >= 0 ) { stack.splice( idx , 1 ) ; }
+        } ;
+
+        const observer = new MutationObserver( mutations =>
+        {
+            let changed = false ;
+
+            for ( const m of mutations )
+            {
+                if ( m.type === 'attributes' && m.attributeName === 'open' && m.target?.tagName === 'DIALOG' )
+                {
+                    if ( m.target.hasAttribute( 'open' ) ) { handleOpened( m.target ) ; }
+                    else                                   { handleClosed( m.target ) ; }
+                    changed = true ;
+                }
+
+                if ( m.type === 'childList' )
+                {
+                    for ( const n of m.removedNodes )
+                    {
+                        if ( n?.nodeType === 1 && n.tagName === 'DIALOG' )
+                        {
+                            handleClosed( n ) ;
+                            changed = true ;
+                        }
+                        else if ( n?.nodeType === 1 && n.querySelectorAll )
+                        {
+                            for ( const d of n.querySelectorAll( 'dialog' ) )
+                            {
+                                handleClosed( d ) ;
+                                changed = true ;
+                            }
+                        }
+                    }
+                }
+            }
+
+            if ( changed ) { moveContainer() ; }
+        }) ;
+
+        observer.observe( document.body ,
+        {
+            childList       : true ,
+            subtree         : true ,
+            attributes      : true ,
+            attributeFilter : [ 'open' ] ,
+        }) ;
+
+        return () =>
+        {
+            observer.disconnect() ;
+            div.remove() ;
+            dialogStackRef.current = [] ;
+        } ;
+    } , [ zIndex ]) ;
+
     const toastClasses = getToastClasses(
     {
         beforeClassName : 'pointer-events-none' ,
@@ -67,47 +201,45 @@ const ToastProvider =
 
     const contextValue = { toasts , clearAllToasts , closeToast , openToast } ;
 
+    const toastNode = (
+        <div className={ toastClasses }>
+            <AnimatePresence mode="popLayout">
+            {
+                toasts.map( ({ id , message , level , options }) =>
+                (
+                    <motion.div
+                        key        = { id }
+                        className  = "w-80 min-w-80 pointer-events-auto"
+                        initial    = {{ opacity: 0 , scale: 0.8 , y: -20 }}
+                        animate    = {{ opacity: 1 , scale: 1 , y: 0 }}
+                        exit       = {{ opacity: 0 , scale: 0.8 , x: 100 }}
+                        transition = {{ duration: 0.2 , ease: 'easeOut' }}
+                        layout
+                    >
+                        <Alert
+                            level           = { level }
+                            onClose         = { closeToast( id ) }
+                            showIcon
+                            showCloseButton
+                            { ...options }
+                        >
+                            { message }
+                        </Alert>
+                    </motion.div>
+                ) )
+            }
+            </AnimatePresence>
+        </div>
+    ) ;
+
     return (
         <ToastContext value={ contextValue }>
-
             { children }
-
-            <div
-                className = { toastClasses }
-                style     = { zIndex > 0 ? { zIndex } : undefined }
-            >
-                <AnimatePresence mode="popLayout">
-                {
-                    toasts.map( ({ id , message , level , options }) =>
-                    (
-                        <motion.div
-                            key        = { id }
-                            className  = "w-80 min-w-80 pointer-events-auto"
-                            initial    = {{ opacity: 0 , scale: 0.8 , y: -20 }}
-                            animate    = {{ opacity: 1 , scale: 1 , y: 0 }}
-                            exit       = {{ opacity: 0 , scale: 0.8 , x: 100 }}
-                            transition = {{ duration: 0.2 , ease: 'easeOut' }}
-                            layout
-                        >
-                            <Alert
-                                level           = { level }
-                                onClose         = { closeToast( id ) }
-                                showIcon
-                                showCloseButton
-                                { ...options }
-                            >
-                                { message }
-                            </Alert>
-                        </motion.div>
-                    ) )
-                }
-                </AnimatePresence>
-            </div>
-
+            { container ? createPortal( toastNode , container ) : null }
         </ToastContext>
     ) ;
 } ;
 
 ToastProvider.displayName = 'ToastProvider' ;
 
-export default ToastProvider ;
+export default ToastProvider ;

package/src/demo/inputs/InputHexColorDemo.jsx

@@ -60,11 +60,12 @@ const InputHexColorDemo = () =>
 
             {/* Short format (3 chars) */}
             <InputHexColor
-                label       = "Short Format (3 chars)"
+                length       = { 3 }
+                label        = "Short Format (3 chars)"
                 defaultValue = "F53"
-                icon        = { <ColorIcon /> }
-                placeholder = "FFF"
-                helper      = "Short format: #rgb"
+                icon         = { <ColorIcon /> }
+                placeholder  = "FFF"
+                helper       = "Short format: #rgb"
             />
 
             {/* With validation error */}

package/src/demo/modals/ToastOverModalDemo.jsx

@@ -0,0 +1,260 @@
+'use client' ;
+
+import { useState } from 'react' ;
+
+import Badge        from '@/components/Badge' ;
+import Button       from '@/components/Button' ;
+import Modal        from '@/components/modals/Modal' ;
+import useModal     from '@/components/modals/hooks/useModal' ;
+import Container    from '@/display/Container' ;
+import ToastProvider from '@/contexts/toasts/provider' ;
+import useToast , { ERROR , SUCCESS , WARNING } from '@/contexts/toasts/useToast' ;
+
+import
+{
+    BOTTOM ,
+    END ,
+    horizontalAlignments ,
+    verticalAlignments ,
+}
+from '@/themes/components/toast' ;
+
+/**
+ * Inner content of the demo, sitting under a local ToastProvider so that
+ * `useToast()` resolves to the demo provider (with its switchable alignment).
+ */
+const ToastOverModalInner = () =>
+{
+    const { modalRef , open } = useModal() ;
+    const { toast }           = useToast() ;
+
+    return (
+        <>
+            <Button onClick={ open }>
+                Open modal with toast trigger
+            </Button>
+
+            <Modal
+                ref          = { modalRef }
+                title        = "Toast over Modal"
+                agree        = "Close"
+                showDisagree = { false }
+            >
+                <div className="flex flex-col gap-4 py-4">
+                    <p>
+                        Click any of the buttons below. Each toast must appear <strong>above</strong> the modal backdrop, fully clickable (the close ✕ should work).
+                    </p>
+
+                    <div className="flex flex-wrap gap-2">
+                        <Button color="success" onClick={ () => toast( 'Saved successfully!' , SUCCESS ) }>
+                            Trigger success toast
+                        </Button>
+
+                        <Button color="warning" onClick={ () => toast( 'Heads up — please review your input.' , WARNING ) }>
+                            Trigger warning toast
+                        </Button>
+
+                        <Button color="error" onClick={ () => toast( 'Something went wrong.' , ERROR ) }>
+                            Trigger error toast
+                        </Button>
+                    </div>
+                </div>
+            </Modal>
+        </>
+    ) ;
+} ;
+
+ToastOverModalInner.displayName = 'ToastOverModalInner' ;
+
+/**
+ * Stress-test inner: validates the MutationObserver re-promotion when a
+ * <dialog> is opened *after* a toast is already visible (the case the
+ * basic re-promote-on-new-toast effect cannot cover).
+ */
+const ToastStressInner = () =>
+{
+    const { modalRef: l1Ref , open: openL1 } = useModal() ;
+    const { modalRef: l2Ref , open: openL2 } = useModal() ;
+    const { modalRef: l3Ref , open: openL3 } = useModal() ;
+
+    const { toast } = useToast({ delay: 8000 }) ;
+
+    const fireToastThenOpen = ( fn , delay = 250 ) => () =>
+    {
+        toast( 'Toast fired before opening modal — should stay on top!' , SUCCESS ) ;
+        setTimeout( fn , delay ) ;
+    } ;
+
+    const fireToastThenStack = () =>
+    {
+        toast( 'Watch me survive 3 stacked modals.' , WARNING ) ;
+        setTimeout( openL1 , 200 ) ;
+        setTimeout( openL2 , 500 ) ;
+        setTimeout( openL3 , 800 ) ;
+    } ;
+
+    return (
+        <div className="flex flex-col gap-3">
+
+            <div className="flex flex-wrap gap-2">
+                <Button color="primary" onClick={ fireToastThenOpen( openL1 ) }>
+                    Toast → then open Level 1
+                </Button>
+
+                <Button color="secondary" onClick={ fireToastThenStack }>
+                    Toast → then auto-stack 3 modals
+                </Button>
+            </div>
+
+            <Modal
+                ref          = { l1Ref }
+                title        = "Level 1 (opened after toast)"
+                maxWidth     = "max-w-2xl"
+                agree        = "Close"
+                showDisagree = { false }
+            >
+                <div className="flex flex-col gap-3 py-4">
+                    <p>
+                        This modal was opened <strong>after</strong> the toast was already visible.
+                        The <code className="badge badge-sm">MutationObserver</code> in the provider should have
+                        re-promoted the toast popover to the top of the top-layer stack.
+                    </p>
+                    <Button color="primary" onClick={ openL2 }>
+                        Open Level 2
+                    </Button>
+                    <Button color="error" onClick={ () => toast( 'Toast fired from Level 1!' , ERROR ) }>
+                        Trigger error toast from here
+                    </Button>
+                </div>
+            </Modal>
+
+            <Modal
+                ref          = { l2Ref }
+                title        = "Level 2"
+                maxWidth     = "max-w-xl"
+                agree        = "Close"
+                showDisagree = { false }
+            >
+                <div className="flex flex-col gap-3 py-4">
+                    <p>Level 2 is open. The toast should still be visible above the backdrop.</p>
+                    <Button color="primary" onClick={ openL3 }>
+                        Open Level 3
+                    </Button>
+                </div>
+            </Modal>
+
+            <Modal
+                ref          = { l3Ref }
+                title        = "Level 3"
+                maxWidth     = "max-w-md"
+                agree        = "Close"
+                showDisagree = { false }
+            >
+                <div className="py-4">
+                    <p>Level 3 — deepest stack. Toast should still be on top.</p>
+                </div>
+            </Modal>
+
+        </div>
+    ) ;
+} ;
+
+ToastStressInner.displayName = 'ToastStressInner' ;
+
+/**
+ * Demo: prove that toasts can stack above a native &lt;dialog&gt; modal,
+ * and let the user switch the toast alignment to verify positioning.
+ *
+ * @returns {React.JSX.Element}
+ */
+const ToastOverModalDemo = () =>
+{
+    const [ hAlign , setHAlign ] = useState( END ) ;
+    const [ vAlign , setVAlign ] = useState( BOTTOM ) ;
+
+    return (
+        <Container className="flex flex-col gap-6 bg-base-200/60 p-8 rounded-box" maxWidth="max-w-7xl">
+
+            <h2 className="text-3xl font-bold">Toast over Modal</h2>
+
+            <p className="text-sm text-base-content/70">
+                Click to verify that toasts appear above the modal backdrop. Test case:
+                native <code className="badge badge-sm">&lt;dialog&gt;</code> top layer vs <code className="badge badge-sm">ToastProvider</code> popover.
+            </p>
+
+            <div className="flex flex-col gap-3 p-4 rounded-box bg-base-100">
+
+                <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-sm font-semibold w-24">Vertical</span>
+                    { verticalAlignments.map( v =>
+                    (
+                        <Button
+                            key     = { v }
+                            size    = "sm"
+                            color   = { vAlign === v ? 'primary' : 'neutral' }
+                            style   = { vAlign === v ? undefined : 'outline' }
+                            onClick = { () => setVAlign( v ) }
+                        >
+                            { v }
+                        </Button>
+                    ) ) }
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-sm font-semibold w-24">Horizontal</span>
+                    { horizontalAlignments.map( h =>
+                    (
+                        <Button
+                            key     = { h }
+                            size    = "sm"
+                            color   = { hAlign === h ? 'primary' : 'neutral' }
+                            style   = { hAlign === h ? undefined : 'outline' }
+                            onClick = { () => setHAlign( h ) }
+                        >
+                            { h }
+                        </Button>
+                    ) ) }
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-sm font-semibold w-24">Current</span>
+                    <Badge color="primary">vAlign = { vAlign }</Badge>
+                    <Badge color="secondary">hAlign = { hAlign }</Badge>
+                </div>
+
+            </div>
+
+            <ToastProvider hAlign={ hAlign } vAlign={ vAlign }>
+
+                <ToastOverModalInner />
+
+                <div className="divider mt-4">Stress test : toast under stacked modals</div>
+
+                <div className="flex flex-col gap-3">
+                    <p className="text-sm text-base-content/70">
+                        These buttons fire a toast <strong>first</strong>, then open a modal a few hundred
+                        milliseconds later. Without the <code className="badge badge-sm">MutationObserver</code> in
+                        the provider, the modal would steal the top of the top-layer stack and hide the toast.
+                        With it, the toast popover is re-promoted as soon as the new <code className="badge badge-sm">&lt;dialog&gt;</code> opens.
+                    </p>
+
+                    <ToastStressInner />
+                </div>
+
+            </ToastProvider>
+
+            <div className="text-xs text-base-content/60 leading-relaxed">
+                <p>
+                    Try every combination ({ verticalAlignments.length } × { horizontalAlignments.length } = 9 positions):
+                    top / middle / bottom × start / center / end. Each toast should anchor at the chosen
+                    corner, edge or center — independently of where the modal sits.
+                </p>
+            </div>
+
+        </Container>
+    ) ;
+} ;
+
+ToastOverModalDemo.displayName = 'ToastOverModalDemo' ;
+
+export default ToastOverModalDemo ;

package/src/display/Application.jsx

@@ -47,7 +47,7 @@ const Application = ( { children , initialLang } ) =>
             { !ready && (
                 <motion.div
                     key        = "splash"
-                    className  = "fixed inset-0 z-50 bg-base-100"
+                    className  = "fixed inset-0 z-50 bg-base-100 pointer-events-none"
                     initial    = { { opacity : 0 } }
                     animate    = { { opacity : 1 } }
                     exit       = { { opacity : 0 } }

package/src/version.js

@@ -1,3 +1,3 @@
-const version = "0.1.45" ;
+const version = "0.1.47" ;
 
 export default version ;