@next-buildr/editor 2.0.1 → 3.0.0-rc.0

package/dist/ui/primitives.test.js

@@ -6,7 +6,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { axe } from 'vitest-axe';
 import * as matchers from 'vitest-axe/matchers';
 import { MessagesProvider } from '../messages/index.js';
-import { Button, ColorInput, ColorSwatch, Dialog, hexOf, IconButton, Input, NumberUnitInput, Popover, PortalContainerProvider, SegmentedControl, Select, stepNumberText, Tabs, Toggle, } from './index.js';
+import { Button, ColorInput, ColorSwatch, ContextMenu, Dialog, hexOf, IconButton, Input, Kbd, MenuCheckboxItem, MenuLabel, MenuSeparator, NumberUnitInput, Popover, PortalContainerProvider, SearchField, SegmentedControl, Select, stepNumberText, Tabs, Toggle, } from './index.js';
 expect.extend(matchers);
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 let container;
@@ -111,7 +111,7 @@ describe('UI primitives', () => {
         const close = document.body.querySelector('header button[aria-label="Close"]');
         await act(async () => close?.click());
         expect(document.body.querySelector('[role=dialog]')).toBeNull();
-        expect(document.activeElement).toBe(opener);
+        await vi.waitFor(() => expect(document.activeElement).toBe(opener));
     });
     it('Dialog has a header, a scrollable body and a footer for actions, and passes axe', async () => {
         await show(_jsx(Dialog, { open: true, onOpenChange: () => { }, title: "Rename", footer: _jsx(Button, { variant: "primary", children: "Save" }), children: _jsx("p", { children: "body" }) }));
@@ -196,15 +196,46 @@ describe('UI primitives', () => {
         await show(_jsx(NumberUnitInput, { value: "auto", onValueChange: onValueChange, units: ['px', 'rem'], unitLabel: "Unit", ariaLabel: "Gap" }));
         expect(container.querySelector('select.bd-unit-select').disabled).toBe(true);
     });
+    it('NumberUnitInput: unitLabels change the shown unit text, not the stored value', async () => {
+        const onValueChange = vi.fn();
+        await show(_jsx(NumberUnitInput, { value: "45deg", onValueChange: onValueChange, units: ['deg', 'turn'], unitLabels: { deg: '°' }, unitLabel: "Unit", ariaLabel: "Angle" }));
+        const options = [...container.querySelectorAll('select.bd-unit-select option')].map((option) => [option.value, option.textContent]);
+        expect(options).toEqual([
+            ['deg', '°'],
+            ['turn', 'turn'],
+        ]);
+    });
     it('hexOf and ColorInput: the native picker returns a hex colour', async () => {
         expect(hexOf('#abc')).toBe('#aabbcc');
         expect(hexOf('$color.primary')).toBeUndefined();
         const onColorChange = vi.fn();
         await show(_jsx(ColorInput, { color: "#3f5ae0", label: "Colour", onColorChange: onColorChange }));
-        const native = container.querySelector('input[type=color]');
+        await act(async () => container.querySelector('[aria-label=Colour]')?.click());
+        const native = document.querySelector('input[type=color]');
         expect(native.value).toBe('#3f5ae0');
         expect(await axe(container)).toHaveNoViolations();
     });
+    it('keeps colour alpha when a palette or native picker changes hue, and returns focus on Escape', async () => {
+        const onColorChange = vi.fn();
+        await show(_jsx(ColorInput, { color: "#1234567f", label: "Colour", palette: [{ label: 'Brand', color: '#654321' }], onColorChange: onColorChange }));
+        const trigger = container.querySelector('[aria-label=Colour]');
+        await act(async () => trigger?.click());
+        await act(async () => document.querySelector('[aria-label=Brand]')?.click());
+        expect(onColorChange).toHaveBeenLastCalledWith('#6543217f');
+        const native = document.querySelector('input[type=color]');
+        if (native === null)
+            throw new Error('native colour picker missing');
+        await act(async () => {
+            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(native, '#abcdef');
+            native.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        expect(onColorChange).toHaveBeenLastCalledWith('#abcdef7f');
+        await act(async () => {
+            native.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        });
+        expect(document.querySelector('.bd-color-popover')).toBeNull();
+        await vi.waitFor(() => expect(document.activeElement).toBe(trigger));
+    });
     it('ColorSwatch paints only colour notations, never raw CSS', async () => {
         await show(_jsxs(_Fragment, { children: [_jsx(ColorSwatch, { color: "#3f5ae0" }), _jsx(ColorSwatch, { color: "url(https://x.test/a.png)" }), _jsx(ColorSwatch, { color: undefined })] }));
         const [ok, bad, none] = [...container.querySelectorAll('.bd-swatch')];
@@ -213,3 +244,173 @@ describe('UI primitives', () => {
         expect(none?.hasAttribute('data-empty')).toBe(true);
     });
 });
+describe('PB-157 primitives', () => {
+    it('Dialog alert: role alertdialog, tone icon well, footer start, focus returns', async () => {
+        function Host() {
+            const [open, setOpen] = useState(false);
+            return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", id: "opener", onClick: () => setOpen(true), children: "Open" }), _jsx(Dialog, { open: open, onOpenChange: setOpen, title: "Delete section", alert: true, description: "Removes the section", icon: "triangle-alert", tone: "danger", footerStart: _jsx(Button, { variant: "text", children: "History" }), footer: _jsx(Button, { variant: "danger", children: "Delete" }), children: _jsx("p", { children: "body" }) })] }));
+        }
+        await show(_jsx(Host, {}));
+        const opener = container.querySelector('#opener');
+        await act(async () => opener?.focus());
+        await act(async () => opener?.click());
+        const dialog = document.body.querySelector('[role=alertdialog]');
+        expect(dialog).not.toBeNull();
+        expect(document.body.querySelector('[role=dialog]')).toBeNull();
+        expect(dialog?.querySelector('.bd-dialog-icon')?.getAttribute('data-tone')).toBe('danger');
+        expect(dialog?.querySelector('.bd-dialog-footer-start button')?.textContent).toBe('History');
+        await act(async () => document.body.querySelector('header button[aria-label="Close"]')?.click());
+        expect(document.body.querySelector('[role=alertdialog]')).toBeNull();
+        await vi.waitFor(() => expect(document.activeElement).toBe(opener));
+    });
+    it('Dialog without the new props renders as before', async () => {
+        await show(_jsx(Dialog, { open: true, onOpenChange: () => { }, title: "Plain", footer: _jsx(Button, { children: "OK" }), children: _jsx("p", { children: "body" }) }));
+        const dialog = document.body.querySelector('[role=dialog]');
+        expect(dialog).not.toBeNull();
+        expect(document.body.querySelector('[role=alertdialog]')).toBeNull();
+        expect(dialog?.className).toBe('bd-dialog bd-dialog-in');
+        expect(dialog?.hasAttribute('aria-describedby')).toBe(false);
+        const header = dialog?.querySelector(':scope > header.bd-dialog-header');
+        expect([...(header?.children ?? [])].map((child) => child.className)).toEqual([
+            'bd-dialog-heading',
+            'bd-button bd-icon-button',
+        ]);
+        expect(header?.querySelector('.bd-dialog-title')?.textContent).toBe('Plain');
+        expect(dialog?.querySelector(':scope > .bd-dialog-body')?.textContent).toBe('body');
+        expect(dialog?.querySelector(':scope > footer.bd-dialog-footer > button')?.textContent).toBe('OK');
+        expect(dialog?.querySelector('.bd-dialog-icon, .bd-dialog-footer-start')).toBeNull();
+    });
+    it('alert Dialog is described by its description', async () => {
+        await show(_jsx(Dialog, { open: true, onOpenChange: () => { }, title: "Delete", description: "This cannot be undone", alert: true }));
+        const dialog = document.body.querySelector('[role=alertdialog]');
+        const id = dialog?.getAttribute('aria-describedby');
+        expect(id).toBeTruthy();
+        expect(document.getElementById(id)?.textContent).toBe('This cannot be undone');
+    });
+    it('MenuCheckboxItem: aria-checked before and after, by pointer and by Enter and Space', async () => {
+        const seen = [];
+        function Host() {
+            const [on, setOn] = useState(false);
+            return (_jsx(ContextMenu, { label: "Actions", items: [
+                    {
+                        id: 'copy',
+                        label: 'Copy',
+                        kbd: 'Ctrl+C',
+                        shortcut: 'Control+C',
+                        icon: 'copy',
+                        onSelect: () => { },
+                    },
+                    {
+                        id: 'wide',
+                        label: 'Wide',
+                        checked: true,
+                        danger: true,
+                        icon: 'eye',
+                        onSelect: () => { },
+                    },
+                ], content: _jsxs(_Fragment, { children: [_jsx(MenuSeparator, {}), _jsx(MenuLabel, { children: "View" }), _jsx(MenuCheckboxItem, { checked: on, onCheckedChange: (next) => {
+                                seen.push(next);
+                                setOn(next);
+                            }, children: "Grid" })] }), children: _jsx("div", { id: "area", children: "area" }) }));
+        }
+        await show(_jsx(Host, {}));
+        const openMenu = () => act(async () => {
+            container.querySelector('#area')?.dispatchEvent(new MouseEvent('contextmenu', {
+                bubbles: true,
+                cancelable: true,
+                clientX: 5,
+                clientY: 5,
+            }));
+        });
+        const grid = () => [...document.body.querySelectorAll('[role=menuitemcheckbox]')].find((el) => el.textContent?.includes('Grid'));
+        await openMenu();
+        expect(grid().getAttribute('aria-checked')).toBe('false');
+        const copy = document.body.querySelector('[role=menuitem]');
+        expect(copy?.getAttribute('aria-keyshortcuts')).toBe('Control+C');
+        expect(copy?.querySelector('.bd-kbd')?.getAttribute('aria-hidden')).toBe('true');
+        const wide = [...document.body.querySelectorAll('[role=menuitemcheckbox]')].find((el) => el.textContent?.includes('Wide'));
+        expect(wide?.getAttribute('aria-checked')).toBe('true');
+        expect(wide?.hasAttribute('data-danger')).toBe(true);
+        expect(wide?.querySelector('[data-icon="eye"]')).not.toBeNull();
+        expect(document.body.querySelector('.bd-menu-caption')?.textContent).toBe('View');
+        expect(document.body.querySelector('[role=separator]')).not.toBeNull();
+        await act(async () => {
+            grid().dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+        });
+        expect(seen).toEqual([true]);
+        await openMenu();
+        expect(grid().getAttribute('aria-checked')).toBe('true');
+        for (const key of ['Enter', ' ']) {
+            await act(async () => {
+                grid().focus();
+                grid().dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+            });
+            await openMenu();
+        }
+        expect(seen).toEqual([true, false, true]);
+        expect(grid().getAttribute('aria-checked')).toBe('true');
+    });
+    it('Kbd renders a kbd element', async () => {
+        await show(_jsx(Kbd, { children: "Ctrl+K" }));
+        const kbd = container.querySelector('kbd');
+        expect(kbd?.className).toContain('bd-kbd');
+        expect(kbd?.textContent).toBe('Ctrl+K');
+    });
+    const typeInto = (input, text) => act(async () => {
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, text);
+        input?.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    const pressEscape = (target) => act(async () => {
+        target?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
+    });
+    function Search({ disabled }) {
+        const [value, setValue] = useState('');
+        return (_jsx(SearchField, { value: value, onChange: setValue, label: "Search blocks", clearLabel: "Clear search", hint: "/", ...(disabled === true ? { disabled } : {}) }));
+    }
+    it('SearchField: hint while empty, clear button once typed in, which empties and refocuses', async () => {
+        await show(_jsx(Search, {}));
+        const input = container.querySelector('input[aria-label="Search blocks"]');
+        expect(container.querySelector('kbd')?.textContent).toBe('/');
+        expect(container.querySelector('[aria-label="Clear search"]')).toBeNull();
+        await typeInto(input, 'hero');
+        expect(input?.value).toBe('hero');
+        expect(container.querySelector('kbd')).toBeNull();
+        await act(async () => container.querySelector('[aria-label="Clear search"]')?.click());
+        expect(input?.value).toBe('');
+        expect(document.activeElement).toBe(input);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('SearchField: Escape clears a non-empty field', async () => {
+        await show(_jsx(Search, {}));
+        const input = container.querySelector('input');
+        await typeInto(input, 'hero');
+        await pressEscape(input);
+        expect(input?.value).toBe('');
+    });
+    it('SearchField in a Dialog: Escape clears first and closes the dialog only when empty', async () => {
+        const onOpenChange = vi.fn();
+        function Host() {
+            const [value, setValue] = useState('');
+            return (_jsx(Dialog, { open: true, onOpenChange: onOpenChange, title: "Find", children: _jsx(SearchField, { value: value, onChange: setValue, label: "Find", clearLabel: "Clear" }) }));
+        }
+        await show(_jsx(Host, {}));
+        const input = document.body.querySelector('input[aria-label=Find]');
+        input?.focus();
+        await typeInto(input, 'hero');
+        await pressEscape(input);
+        expect(input?.value).toBe('');
+        expect(onOpenChange).not.toHaveBeenCalled();
+        expect(document.body.querySelector('[role=dialog]')).not.toBeNull();
+        await pressEscape(input);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+    it('SearchField: disabled blocks input and the clear button', async () => {
+        await show(_jsx(SearchField, { value: "hero", onChange: () => { }, label: "Search blocks", clearLabel: "Clear search", disabled: true }));
+        expect(container.querySelector('input')?.disabled).toBe(true);
+        expect(container.querySelector('[aria-label="Clear search"]')?.disabled).toBe(true);
+    });
+    it('IconButton has a sm size', async () => {
+        await show(_jsx(IconButton, { label: "More", icon: "ellipsis", size: "sm" }));
+        expect(container.querySelector('button')?.className).toContain('bd-icon-button--sm');
+    });
+});

package/dist/ui/structure-locked.d.ts

@@ -0,0 +1,9 @@
+import type { NodeId } from '@next-buildr/core';
+/**
+ * Returns the function that tells the person why a locked block was not removed, moved, cut or
+ * duplicated (an info toast; nothing happens outside a `<ToastProvider>`). It points to the
+ * Structure panel only when the host lets the person unlock (`canUnlock`). Given the refused ids it
+ * names the right reason: the block itself, or a block it sits in.
+ */
+export declare function useStructureLockedNotice(): (ids?: readonly NodeId[]) => void;
+//# sourceMappingURL=structure-locked.d.ts.map

package/dist/ui/structure-locked.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"structure-locked.d.ts","sourceRoot":"","sources":["../../src/ui/structure-locked.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAOhD;;;;;GAKG;AACH,wBAAgB,wBAAwB,IAAI,CAAC,GAAG,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAoB5E"}

package/dist/ui/structure-locked.js

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import { useT } from '../messages/index.js';
+import { useOptionalEditor } from '../store/react.js';
+import { structureLockReason } from '../store/structure-lock.js';
+import { useOptionalToast } from './toast.js';
+/**
+ * Returns the function that tells the person why a locked block was not removed, moved, cut or
+ * duplicated (an info toast; nothing happens outside a `<ToastProvider>`). It points to the
+ * Structure panel only when the host lets the person unlock (`canUnlock`). Given the refused ids it
+ * names the right reason: the block itself, or a block it sits in.
+ */
+export function useStructureLockedNotice() {
+    const t = useT();
+    const toast = useOptionalToast();
+    const editor = useOptionalEditor();
+    const canUnlock = editor?.canUnlock ?? false;
+    return useCallback((ids) => {
+        const reason = ids === undefined || editor === undefined
+            ? 'self'
+            : (structureLockReason(editor.getState().doc, ids) ?? 'self');
+        const key = reason === 'inherited' ? 'toast.structureLockedParent' : 'toast.structureLocked';
+        toast?.show({
+            id: 'structure-locked',
+            variant: 'info',
+            message: t(canUnlock ? key : `${key}Fixed`),
+        });
+    }, [toast, t, canUnlock, editor]);
+}

package/dist/ui/toast.d.ts

@@ -24,9 +24,11 @@ export interface ToastApi {
     readonly dismiss: (id: string) => void;
 }
 /** How long a toast stays on screen by default. */
-export declare const TOAST_MS = 6000;
+export declare const TOAST_MS = 5000;
 /** Shows short, non-blocking messages in the one toast region. */
 export declare function useToast(): ToastApi;
+/** `useToast` for code that may run outside a `<ToastProvider>`: `undefined` there. */
+export declare function useOptionalToast(): ToastApi | undefined;
 /**
  * Mount once, above everything that reports. It renders the single toast region of the editor: a
  * polite `role="status"` list for success, info and warning, and a `role="alert"` list for errors

package/dist/ui/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/ui/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,6FAA6F;IAC7F,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C,2GAA2G;IAC3G,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,SAAS,CAAC;CACzF;AAED,MAAM,WAAW,QAAQ;IACvB,qCAAqC;IACrC,QAAQ,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACjD,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,mDAAmD;AACnD,eAAO,MAAM,QAAQ,OAAO,CAAC;AAkB7B,kEAAkE;AAClE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAmC3E"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/ui/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,6FAA6F;IAC7F,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C,2GAA2G;IAC3G,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,SAAS,CAAC;CACzF;AAED,MAAM,WAAW,QAAQ;IACvB,qCAAqC;IACrC,QAAQ,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IACjD,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,mDAAmD;AACnD,eAAO,MAAM,QAAQ,OAAO,CAAC;AAkB7B,kEAAkE;AAClE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC;AAED,uFAAuF;AACvF,wBAAgB,gBAAgB,IAAI,QAAQ,GAAG,SAAS,CAEvD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BA+C3E"}

package/dist/ui/toast.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { useStageSlots } from '../app/stage-slots.js';
 import { useT } from '../messages/index.js';
 import { Icon } from './icon.js';
 import { Button, IconButton } from './primitives.js';
 /** How long a toast stays on screen by default. */
-export const TOAST_MS = 6000;
+export const TOAST_MS = 5000;
 const ICONS = {
     success: 'circle-check',
     info: 'info',
@@ -19,6 +21,10 @@ export function useToast() {
         throw new Error('useToast must be used inside <ToastProvider>');
     return api;
 }
+/** `useToast` for code that may run outside a `<ToastProvider>`: `undefined` there. */
+export function useOptionalToast() {
+    return useContext(ToastContext);
+}
 /**
  * Mount once, above everything that reports. It renders the single toast region of the editor: a
  * polite `role="status"` list for success, info and warning, and a `role="alert"` list for errors
@@ -26,6 +32,7 @@ export function useToast() {
  * editor that positions a message with `position: fixed`.
  */
 export function ToastProvider({ children }) {
+    const stage = useStageSlots()?.stage;
     const [entries, setEntries] = useState([]);
     const counter = useRef(0);
     const dismiss = useCallback((id) => {
@@ -36,19 +43,28 @@ export function ToastProvider({ children }) {
         const serial = counter.current;
         const id = options.id ?? `toast-${serial}`;
         const entry = { ...options, id, variant: options.variant ?? 'info', serial };
-        setEntries((current) => [...current.filter((other) => other.id !== id), entry]);
+        setEntries((current) => {
+            const next = [...current.filter((other) => other.id !== id), entry];
+            // Over the limit: drop the oldest non-error toast first; an error goes only if all are errors.
+            while (next.length > 3) {
+                const at = next.findIndex((other) => other.variant !== 'error');
+                next.splice(at < 0 ? 0 : at, 1);
+            }
+            return next;
+        });
         return id;
     }, []);
     const api = useMemo(() => ({ show, dismiss }), [show, dismiss]);
     const list = (errors) => entries
         .filter((entry) => (entry.variant === 'error') === errors)
         .map((entry) => _jsx(ToastItem, { entry: entry, onDismiss: dismiss }, entry.id));
-    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsxs("div", { className: "bd-toast-region", children: [_jsx("div", { className: "bd-toast-list", role: "status", "aria-live": "polite", children: list(false) }), _jsx("div", { className: "bd-toast-list", role: "alert", children: list(true) })] })] }));
+    const region = (_jsxs("div", { className: "bd-toast-region", "data-stage": stage ? 'true' : undefined, children: [_jsx("div", { className: "bd-toast-list", role: "status", "aria-live": "polite", children: list(false) }), _jsx("div", { className: "bd-toast-list", role: "alert", children: list(true) })] }));
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, stage ? createPortal(region, stage) : region] }));
 }
 function ToastItem({ entry, onDismiss, }) {
     const t = useT();
     const { id, serial, variant, action } = entry;
-    const duration = entry.duration === undefined ? TOAST_MS : entry.duration;
+    const duration = variant === 'error' ? null : entry.duration === undefined ? TOAST_MS : entry.duration;
     const [paused, setPaused] = useState(false);
     const remaining = useRef(duration);
     // A replacement (a new serial) starts the countdown again.
@@ -69,7 +85,7 @@ function ToastItem({ entry, onDismiss, }) {
             }
         };
     }, [paused, id, serial, onDismiss]);
-    return (_jsxs("div", { className: "bd-toast", "data-variant": variant, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: (event) => {
+    return (_jsxs("div", { className: "bd-toast", style: { order: serial }, "data-variant": variant, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: (event) => {
             if (!event.currentTarget.contains(event.relatedTarget))
                 setPaused(false);
         }, children: [_jsx(Icon, { name: ICONS[variant], className: "bd-toast-icon" }), _jsxs("span", { className: "bd-toast-text", children: [entry.message, entry.detail !== undefined && _jsxs("span", { className: "bd-toast-detail", children: [" ", entry.detail] })] }), action !== undefined && (_jsx(Button, { className: "bd-toast-action", onClick: action.onSelect, children: action.label })), _jsx(IconButton, { label: t('toast.dismiss'), icon: "x", className: "bd-toast-close", onClick: () => onDismiss(id) })] }));

package/dist/ui/toast.test.js

@@ -5,6 +5,7 @@ import { createRoot } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { axe } from 'vitest-axe';
 import * as matchers from 'vitest-axe/matchers';
+import { StageSlotsContext } from '../app/stage-slots.js';
 import { MessagesProvider } from '../messages/index.js';
 import { TOAST_MS, ToastProvider, useToast } from './toast.js';
 expect.extend(matchers);
@@ -33,6 +34,39 @@ const alert = () => container.querySelector('.bd-toast-region [role=alert]');
 const show = (options) => act(() => void api.show(options));
 const advance = (ms) => act(() => void vi.advanceTimersByTime(ms));
 describe('toast region', () => {
+    it('portals into the stage when a stage is provided', async () => {
+        const stage = document.createElement('main');
+        document.body.append(stage);
+        await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(StageSlotsContext.Provider, { value: { stage, issuesOpen: false, setIssuesOpen: () => undefined }, children: _jsx(ToastProvider, { children: _jsx(Probe, {}) }) }) })));
+        show({ message: 'In the stage' });
+        expect(stage.querySelector('.bd-toast-region[data-stage="true"]')?.textContent).toContain('In the stage');
+        expect(container.querySelector('.bd-toast-region')).toBeNull();
+        stage.remove();
+    });
+    it('keeps only the three newest toasts and leaves errors visible', () => {
+        show({ message: 'First' });
+        show({ message: 'Second' });
+        show({ message: 'Third' });
+        show({ message: 'Error', variant: 'error' });
+        expect(container.querySelectorAll('.bd-toast')).toHaveLength(3);
+        expect(container.textContent).not.toContain('First');
+        advance(TOAST_MS + 1);
+        expect(alert().textContent).toContain('Error');
+    });
+    it('evicts the oldest non-error toast first, and an error only when all are errors', () => {
+        show({ message: 'Err one', variant: 'error' });
+        show({ message: 'Second' });
+        show({ message: 'Third' });
+        show({ message: 'Fourth' });
+        expect(container.textContent).toContain('Err one');
+        expect(container.textContent).not.toContain('Second');
+        show({ message: 'Err two', variant: 'error' });
+        show({ message: 'Err three', variant: 'error' });
+        show({ message: 'Err four', variant: 'error' });
+        expect(container.querySelectorAll('.bd-toast')).toHaveLength(3);
+        expect(container.textContent).not.toContain('Err one');
+        expect(container.textContent).toContain('Err four');
+    });
     it('announces success, info and warning politely and errors as alerts', () => {
         expect(status().getAttribute('aria-live')).toBe('polite');
         show({ message: 'Saved', variant: 'success' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-buildr/editor",
-  "version": "2.0.1",
+  "version": "3.0.0-rc.0",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -19,10 +19,11 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "UPGRADING.md"
   ],
   "dependencies": {
-    "@next-buildr/core": "2.0.1",
+    "@next-buildr/core": "3.0.0-rc.0",
     "@lexical/history": "^0.51.0",
     "@lexical/link": "^0.51.0",
     "@lexical/list": "^0.51.0",
@@ -45,7 +46,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@next-buildr/tsconfig": "2.0.1",
+    "@next-buildr/tsconfig": "3.0.0-rc.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",