@next-buildr/editor 0.0.0-stage → 2.0.0

package/dist/ui/primitives.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { useRef, useState } from 'react';
+import { useT } from '../messages/index.js';
+import { Icon } from './icon.js';
+import { usePortalContainer } from './portal.js';
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+export function Button({ variant = 'default', className, type = 'button', ...rest }) {
+    return (_jsx("button", { ...rest, type: type, "data-variant": variant, className: cx('bd-button', className) }));
+}
+/** A button with an icon and a required accessible name; the name is also its tooltip. */
+export function IconButton({ label, icon, hint, className, ...rest }) {
+    return (_jsx(Tooltip, { content: hint === undefined ? label : `${label} (${hint})`, children: _jsx(Button, { ...rest, "aria-label": label, className: cx('bd-icon-button', className), children: _jsx(Icon, { name: icon }) }) }));
+}
+export function Input({ className, ...rest }) {
+    return _jsx("input", { ...rest, className: cx('bd-input', className) });
+}
+export function Select({ value, onValueChange, options, label, disabled }) {
+    const portal = usePortalContainer();
+    return (_jsxs(SelectPrimitive.Root, { value: value, onValueChange: onValueChange, ...(disabled !== undefined ? { disabled } : {}), children: [_jsxs(SelectPrimitive.Trigger, { className: "bd-select-trigger", "aria-label": label, children: [_jsx(SelectPrimitive.Value, {}), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(Icon, { name: "chevron-down" }) })] }), _jsx(SelectPrimitive.Portal, { container: portal, children: _jsx(SelectPrimitive.Content, { className: "bd-select-content", position: "popper", sideOffset: 4, children: _jsx(SelectPrimitive.Viewport, { children: options.map((option) => (_jsx(SelectPrimitive.Item, { value: option.value, className: "bd-select-item", children: _jsx(SelectPrimitive.ItemText, { children: option.label }) }, option.value))) }) }) })] }));
+}
+export function Tabs({ items, label, value, defaultValue, onValueChange }) {
+    const first = items[0]?.value;
+    return (_jsxs(TabsPrimitive.Root, { ...(value !== undefined ? { value } : { defaultValue: defaultValue ?? first ?? '' }), ...(onValueChange !== undefined ? { onValueChange } : {}), children: [_jsx(TabsPrimitive.List, { className: "bd-tabs-list", "aria-label": label, children: items.map((item) => (_jsx(TabsPrimitive.Trigger, { value: item.value, className: "bd-tab", children: item.label }, item.value))) }), items.map((item) => (_jsx(TabsPrimitive.Content, { value: item.value, children: item.content }, item.value)))] }));
+}
+export function Popover({ trigger, children, open, onOpenChange, contentClassName, align, label, }) {
+    const portal = usePortalContainer();
+    return (_jsxs(PopoverPrimitive.Root, { ...(open !== undefined ? { open } : {}), ...(onOpenChange !== undefined ? { onOpenChange } : {}), children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: trigger }), _jsx(PopoverPrimitive.Portal, { container: portal, children: _jsx(PopoverPrimitive.Content, { className: cx('bd-popover', contentClassName), sideOffset: 6, ...(align !== undefined ? { align } : {}), ...(label !== undefined ? { 'aria-label': label } : {}), children: children }) })] }));
+}
+/** A modal: header (title, description, close icon button), scrollable body, right-aligned footer. */
+export function Dialog({ open, onOpenChange, title, description, children, footer, hideClose, }) {
+    const t = useT();
+    const portal = usePortalContainer();
+    // The dialogs are controlled (opened from a toolbar button, a menu item or a shortcut), so Radix has
+    // no trigger to return focus to: remember the element that had focus when the dialog opened.
+    const opener = useRef(null);
+    return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogPrimitive.Portal, { container: portal, children: [_jsx(DialogPrimitive.Overlay, { className: "bd-dialog-overlay" }), _jsxs(DialogPrimitive.Content, { className: "bd-dialog", onOpenAutoFocus: () => {
+                        const active = document.activeElement;
+                        opener.current = active instanceof HTMLElement ? active : null;
+                    }, onCloseAutoFocus: (event) => {
+                        const target = opener.current;
+                        opener.current = null;
+                        if (target?.isConnected === true) {
+                            event.preventDefault();
+                            target.focus();
+                        }
+                    }, ...(description === undefined ? { 'aria-describedby': undefined } : {}), children: [_jsxs("header", { className: "bd-dialog-header", children: [_jsxs("div", { className: "bd-dialog-heading", children: [_jsx(DialogPrimitive.Title, { className: "bd-dialog-title", children: title }), description !== undefined && (_jsx(DialogPrimitive.Description, { className: "bd-dialog-description", children: description }))] }), hideClose === true ? null : (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { variant: "ghost", className: "bd-icon-button", "aria-label": t('ui.close'), children: _jsx(Icon, { name: "x" }) }) }))] }), children !== undefined && _jsx("div", { className: "bd-dialog-body", children: children }), footer !== undefined && _jsx("footer", { className: "bd-dialog-footer", children: footer })] })] }) }));
+}
+export function Tooltip({ content, children }) {
+    const portal = usePortalContainer();
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: 400, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { container: portal, children: _jsx(TooltipPrimitive.Content, { className: "bd-tooltip", sideOffset: 6, children: content }) })] }) }));
+}
+export function Toggle({ pressed, onPressedChange, children, label, disabled }) {
+    return (_jsx(TogglePrimitive.Root, { pressed: pressed, onPressedChange: onPressedChange, className: "bd-toggle", ...(label !== undefined ? { 'aria-label': label } : {}), ...(disabled !== undefined ? { disabled } : {}), children: children }));
+}
+export function ContextMenu({ children, items, label }) {
+    const portal = usePortalContainer();
+    return (_jsxs(ContextMenuPrimitive.Root, { children: [_jsx(ContextMenuPrimitive.Trigger, { asChild: true, children: children }), _jsx(ContextMenuPrimitive.Portal, { container: portal, children: _jsx(ContextMenuPrimitive.Content, { className: "bd-menu bd-portal", "aria-label": label, children: items.map((item) => (_jsx(ContextMenuPrimitive.Item, { className: "bd-menu-item", disabled: item.disabled ?? false, "data-danger": item.danger === true ? '' : undefined, onSelect: item.onSelect, children: item.label }, item.id))) }) })] }));
+}
+/**
+ * A row of mutually exclusive toggle buttons (`aria-pressed`) for a short list of choices: value
+ * modes, direction, alignment. Icon-only segments take their name and tooltip from `label`.
+ */
+export function SegmentedControl({ options, value, onValueChange, label, disabled, className, }) {
+    return (_jsx("fieldset", { "aria-label": label, className: cx('bd-segmented', className), children: options.map((option) => {
+            const button = (_jsxs(Button, { variant: "ghost", className: "bd-segment", "aria-pressed": value === option.value, disabled: disabled === true, ...(option.iconOnly === true ? { 'aria-label': option.label } : {}), onClick: () => onValueChange(option.value), children: [option.icon !== undefined ? _jsx(Icon, { name: option.icon }) : null, option.iconOnly === true ? null : option.label] }, option.value));
+            return option.iconOnly === true ? (_jsx(Tooltip, { content: option.label, children: button }, option.value)) : (button);
+        }) }));
+}
+// --- NumberUnitInput -----------------------------------------------------------------------------
+const NUMBER_WITH_UNIT = /^(-?(?:\d+\.?\d*|\.\d+))([a-z%]*)$/;
+/** What is typed on the way to a number: digits, a sign, a lone dot ("1.", "-", ".5"). */
+const NUMBER_DRAFT = /^-?(?:\d+\.?\d*|\.\d*)?$/;
+/** Adds `delta` to a `12px` / `0.5` / `1.5rem` text; `undefined` when the text is not that. */
+export function stepNumberText(text, delta, defaultUnit) {
+    const typed = text.trim();
+    const match = typed === '' ? null : NUMBER_WITH_UNIT.exec(typed);
+    if (typed !== '' && match === null)
+        return undefined;
+    const unit = match?.[2] || defaultUnit;
+    const next = Math.round((Number(match?.[1] ?? 0) + delta) * 1e4) / 1e4;
+    return `${next === 0 ? 0 : next}${unit}`;
+}
+/** The label of the "no unit" entry of the menu. */
+const NO_UNIT = '—';
+/**
+ * A field for a number with a unit chosen from a menu: the field holds only the number, the menu
+ * the unit, so nobody has to type `px`. Typing digits keeps the unit shown; typing a keyword or a
+ * token (`auto`, `$space.4`) switches to text and disables the menu until the field is emptied;
+ * typing a whole length (`1.5rem`) still works. ArrowUp/ArrowDown step the number (Shift x10, Alt
+ * /10). It only produces text; the caller checks it against the grammar before anything is stored,
+ * so it cannot make a value the grammar refuses representable.
+ */
+export function NumberUnitInput({ id, value, onValueChange, units, unitLabel, step = 1, bareNumber, disabled, invalid, describedBy, ariaLabel, list, placeholder, compact, unit: sharedUnit, hideUnitMenu, onBlur, onFocus, }) {
+    const typed = value.trim();
+    const match = typed === '' ? null : NUMBER_WITH_UNIT.exec(typed);
+    const isText = typed !== '' && match === null;
+    const defaultUnit = bareNumber === true ? '' : (units[0] ?? '');
+    const [pending, setPending] = useState(undefined);
+    // The unit shown: the one in the value, else the one picked while the field was empty.
+    const unit = match !== null ? (match[2] ?? '') : (pending ?? sharedUnit ?? defaultUnit);
+    const options = [
+        ...(bareNumber === true ? [''] : []),
+        ...units,
+        ...(unit !== '' && !units.includes(unit) ? [unit] : []),
+    ];
+    const shown = match !== null ? match[1] : isText ? value : '';
+    const pickUnit = (next) => {
+        setPending(next);
+        if (match !== null)
+            onValueChange(`${match[1]}${next}`);
+    };
+    const change = (text) => {
+        if (units.length > 0 && text !== '' && NUMBER_DRAFT.test(text)) {
+            onValueChange(`${text}${text === '-' ? '' : unit}`);
+        }
+        else {
+            onValueChange(text);
+        }
+    };
+    return (_jsxs("div", { className: cx('bd-number-unit', compact === true && 'bd-number-unit-compact'), "data-invalid": invalid === true ? '' : undefined, children: [_jsx(Input, { ...(id !== undefined ? { id } : {}), value: shown, disabled: disabled === true, list: list, placeholder: placeholder, inputMode: isText ? 'text' : 'decimal', "aria-invalid": invalid === true, "aria-describedby": describedBy, "aria-label": ariaLabel, autoComplete: "off", spellCheck: false, onChange: (event) => change(event.target.value), ...(onBlur !== undefined ? { onBlur } : {}), ...(onFocus !== undefined ? { onFocus } : {}), onKeyDown: (event) => {
+                    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
+                        return;
+                    const size = event.shiftKey ? step * 10 : event.altKey ? step / 10 : step;
+                    const next = stepNumberText(typed, event.key === 'ArrowUp' ? size : -size, unit);
+                    if (next === undefined)
+                        return;
+                    event.preventDefault();
+                    onValueChange(next);
+                } }), units.length > 0 && hideUnitMenu !== true ? (_jsx("select", { className: "bd-unit-select", "aria-label": unitLabel, value: unit, disabled: disabled === true || isText, onChange: (event) => pickUnit(event.target.value), children: options.map((entry) => (_jsx("option", { value: entry, children: entry === '' ? NO_UNIT : entry }, entry))) })) : null] }));
+}
+// --- ColorSwatch ---------------------------------------------------------------------------------
+/** Colour notations a theme token may hold; anything else is not painted (no raw CSS from data). */
+const SAFE_COLOR = /^(#[0-9a-f]{3,8}|(rgb|hsl|oklch|oklab|lab|lch)a?\([0-9a-z%.,\s/+-]*\))$/i;
+/** A small decorative square filled with a colour. */
+export function ColorSwatch({ color, className }) {
+    const safe = color !== undefined && SAFE_COLOR.test(color.trim());
+    return (_jsx("span", { "aria-hidden": "true", className: cx('bd-swatch', className), "data-empty": safe ? undefined : '', ...(safe ? { style: { backgroundColor: color.trim() } } : {}) }));
+}
+// --- ColorInput ----------------------------------------------------------------------------------
+/** `#abc` and `#aabbcc` as the `#rrggbb` a colour input takes; `undefined` for any other notation. */
+export function hexOf(color) {
+    const text = color?.trim().toLowerCase() ?? '';
+    if (/^#[0-9a-f]{6}$/.test(text))
+        return text;
+    const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(text);
+    if (short === null)
+        return undefined;
+    return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`;
+}
+/**
+ * The colour swatch as a button that opens the browser's colour picker. The native input sits
+ * invisibly over the swatch, so it keeps the platform's keyboard and screen-reader behaviour; what
+ * it returns is a hex colour, which the caller still checks against the grammar.
+ */
+export function ColorInput({ color, label, disabled, onColorChange }) {
+    return (_jsxs("span", { className: "bd-color-input", children: [_jsx(ColorSwatch, { color: color }), _jsx("input", { type: "color", className: "bd-color-native", "aria-label": label, value: hexOf(color) ?? '#000000', disabled: disabled === true, onChange: (event) => onColorChange(event.target.value) })] }));
+}

package/dist/ui/primitives.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=primitives.test.d.ts.map

package/dist/ui/primitives.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.test.d.ts","sourceRoot":"","sources":["../../src/ui/primitives.test.tsx"],"names":[],"mappings":""}

package/dist/ui/primitives.test.js

@@ -0,0 +1,215 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { act, useState } from 'react';
+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 { MessagesProvider } from '../messages/index.js';
+import { Button, ColorInput, ColorSwatch, Dialog, hexOf, IconButton, Input, NumberUnitInput, Popover, PortalContainerProvider, SegmentedControl, Select, stepNumberText, Tabs, Toggle, } from './index.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    // Radix measures with ResizeObserver and scrolls items into view.
+    globalThis.ResizeObserver ??= class {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+    Element.prototype.scrollIntoView ??= () => { };
+    Element.prototype.hasPointerCapture ??= () => false;
+});
+afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = '';
+});
+const show = async (node) => {
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: node })));
+};
+describe('UI primitives', () => {
+    it('Button and IconButton: variants, click, and a required accessible name', async () => {
+        const onClick = vi.fn();
+        await show(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", onClick: onClick, children: "Save" }), _jsx(IconButton, { label: "Undo", icon: "undo-2", onClick: onClick })] }));
+        const [save, undo] = container.querySelectorAll('button');
+        expect(save?.getAttribute('data-variant')).toBe('primary');
+        expect(save?.getAttribute('type')).toBe('button');
+        expect(undo?.getAttribute('aria-label')).toBe('Undo');
+        await act(async () => save?.click());
+        await act(async () => undo?.click());
+        expect(onClick).toHaveBeenCalledTimes(2);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('Input passes its props through', async () => {
+        await show(_jsx(Input, { "aria-label": "Title", defaultValue: "Hi" }));
+        const input = container.querySelector('input');
+        expect(input?.value).toBe('Hi');
+        expect(input?.className).toContain('bd-input');
+    });
+    it('Tabs show the active panel', async () => {
+        await show(_jsx(Tabs, { label: "Sections", value: "b", items: [
+                { value: 'a', label: 'Alpha', content: _jsx("p", { children: "first" }) },
+                { value: 'b', label: 'Beta', content: _jsx("p", { children: "second" }) },
+            ] }));
+        expect(container.textContent).toContain('second');
+        expect(container.textContent).not.toContain('first');
+        const tabs = [...container.querySelectorAll('[role=tab]')].map((t) => [
+            t.textContent,
+            t.getAttribute('aria-selected'),
+        ]);
+        expect(tabs).toEqual([
+            ['Alpha', 'false'],
+            ['Beta', 'true'],
+        ]);
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('Toggle reports its state', async () => {
+        const seen = [];
+        function Host() {
+            const [on, setOn] = useState(false);
+            return (_jsx(Toggle, { pressed: on, onPressedChange: (v) => {
+                    seen.push(v);
+                    setOn(v);
+                }, label: "Bold", children: "B" }));
+        }
+        await show(_jsx(Host, {}));
+        const button = container.querySelector('button');
+        expect(button?.getAttribute('aria-pressed')).toBe('false');
+        await act(async () => button?.click());
+        expect(button?.getAttribute('aria-pressed')).toBe('true');
+        expect(seen).toEqual([true]);
+    });
+    it('Dialog opens with a title, and closes with its button', async () => {
+        function Host() {
+            const [open, setOpen] = useState(true);
+            return (_jsx(Dialog, { open: open, onOpenChange: setOpen, title: "Rename", description: "Pick a name", children: _jsx("p", { children: "body" }) }));
+        }
+        await show(_jsx(Host, {}));
+        const dialog = document.body.querySelector('[role=dialog]');
+        expect(dialog?.textContent).toContain('Rename');
+        expect(dialog?.getAttribute('aria-labelledby')).not.toBeNull();
+        const close = dialog?.querySelector('header button[aria-label="Close"]');
+        expect(close).not.toBeNull();
+        await act(async () => close?.click());
+        expect(document.body.querySelector('[role=dialog]')).toBeNull();
+    });
+    it('Dialog returns focus to the element that opened it', 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: "Rename", children: _jsx("p", { children: "body" }) })] }));
+        }
+        await show(_jsx(Host, {}));
+        const opener = container.querySelector('#opener');
+        await act(async () => opener?.focus());
+        await act(async () => opener?.click());
+        expect(document.body.querySelector('[role=dialog]')).not.toBeNull();
+        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);
+    });
+    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" }) }));
+        const dialog = document.body.querySelector('[role=dialog]');
+        expect(dialog.querySelector('header .bd-dialog-title')?.textContent).toBe('Rename');
+        expect(dialog.querySelector('.bd-dialog-body')?.textContent).toBe('body');
+        expect(dialog.querySelector('footer button')?.textContent).toBe('Save');
+        expect(await axe(dialog)).toHaveNoViolations();
+    });
+    it('Dialog can hide its close button', async () => {
+        await show(_jsx(Dialog, { open: true, onOpenChange: () => { }, title: "Choose", hideClose: true, children: _jsx("p", { children: "body" }) }));
+        expect(document.body.querySelector('[role=dialog] header button')).toBeNull();
+    });
+    it('Popover opens from its trigger', async () => {
+        await show(_jsx(Popover, { trigger: _jsx(Button, { children: "Open" }), children: _jsx("p", { children: "inside" }) }));
+        expect(document.body.textContent).not.toContain('inside');
+        await act(async () => container.querySelector('button')?.click());
+        expect(document.body.textContent).toContain('inside');
+    });
+    it('floating layers render inside the portal container, so they inherit its theme', async () => {
+        const themed = document.createElement('div');
+        themed.setAttribute('data-theme', 'dark');
+        document.body.append(themed);
+        await show(_jsx(PortalContainerProvider, { container: themed, children: _jsx(Popover, { trigger: _jsx(Button, { children: "Open" }), children: _jsx("p", { children: "inside" }) }) }));
+        await act(async () => container.querySelector('button')?.click());
+        expect(themed.textContent).toContain('inside');
+        expect(themed.closest('[data-theme=dark]')).toBe(themed);
+    });
+    it('Select shows the chosen option and names its control', async () => {
+        await show(_jsx(Select, { label: "Breakpoint", value: "b", onValueChange: () => { }, options: [
+                { value: 'a', label: 'Desktop' },
+                { value: 'b', label: 'Tablet' },
+            ] }));
+        const trigger = container.querySelector('button');
+        expect(trigger?.getAttribute('aria-label')).toBe('Breakpoint');
+        expect(trigger?.textContent).toContain('Tablet');
+    });
+    it('SegmentedControl: exclusive pressed state, icon-only names, axe', async () => {
+        const onValueChange = vi.fn();
+        await show(_jsx(SegmentedControl, { label: "Direction", value: "row", onValueChange: onValueChange, options: [
+                { value: 'row', label: 'Row', icon: 'arrow-right', iconOnly: true },
+                { value: 'column', label: 'Column', icon: 'arrow-down', iconOnly: true },
+            ] }));
+        const [row, column] = container.querySelectorAll('button');
+        expect(container.querySelector('fieldset')?.getAttribute('aria-label')).toBe('Direction');
+        expect(row?.getAttribute('aria-pressed')).toBe('true');
+        expect(column?.getAttribute('aria-pressed')).toBe('false');
+        expect(column?.getAttribute('aria-label')).toBe('Column');
+        await act(async () => column?.click());
+        expect(onValueChange).toHaveBeenCalledWith('column');
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('NumberUnitInput: arrows step, Shift takes ten, bare numbers stay bare', async () => {
+        const onValueChange = vi.fn();
+        await show(_jsx(NumberUnitInput, { value: "10px", onValueChange: onValueChange, units: ['px', 'rem'], unitLabel: "Unit", ariaLabel: "Gap" }));
+        const input = container.querySelector('input');
+        const key = (init) => act(async () => {
+            input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }));
+        });
+        await key({ key: 'ArrowUp' });
+        await key({ key: 'ArrowDown', shiftKey: true });
+        expect(onValueChange.mock.calls).toEqual([['11px'], ['0px']]);
+        const select = container.querySelector('select.bd-unit-select');
+        expect(select.value).toBe('px');
+        expect([...select.options].map((o) => o.value)).toEqual(['px', 'rem']);
+        expect(input.value).toBe('10');
+        expect(stepNumberText('0.5', 0.1, '')).toBe('0.6');
+        expect(stepNumberText('', 1, 'px')).toBe('1px');
+        expect(stepNumberText('auto', 1, 'px')).toBeUndefined();
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    it('NumberUnitInput: the menu picks the unit, typed digits keep it, a keyword disables the menu', async () => {
+        const onValueChange = vi.fn();
+        await show(_jsx(NumberUnitInput, { value: "10px", onValueChange: onValueChange, units: ['px', 'rem'], unitLabel: "Unit", ariaLabel: "Gap" }));
+        const select = container.querySelector('select.bd-unit-select');
+        await act(async () => {
+            const set = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set;
+            set?.call(select, 'rem');
+            select.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+        expect(onValueChange).toHaveBeenLastCalledWith('10rem');
+        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('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]');
+        expect(native.value).toBe('#3f5ae0');
+        expect(await axe(container)).toHaveNoViolations();
+    });
+    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')];
+        expect(ok?.style.backgroundColor).not.toBe('');
+        expect(bad?.getAttribute('style')).toBeNull();
+        expect(none?.hasAttribute('data-empty')).toBe(true);
+    });
+});

package/dist/ui/toast.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+export type ToastVariant = 'success' | 'info' | 'warning' | 'error';
+export interface ToastOptions {
+    readonly message: string;
+    /** Secondary text shown after the message, in a muted colour. */
+    readonly detail?: string | undefined;
+    readonly variant?: ToastVariant | undefined;
+    /**
+     * Showing a toast with the id of a visible one replaces it (and restarts its timer), so a
+     * repeated notice does not pile up.
+     */
+    readonly id?: string | undefined;
+    /** Milliseconds until it goes away; `null` keeps it until dismissed. Default: `TOAST_MS`. */
+    readonly duration?: number | null | undefined;
+    /** One optional action, rendered as a button (the toast stays until it is dismissed or the timer ends). */
+    readonly action?: {
+        readonly label: string;
+        readonly onSelect: () => void;
+    } | undefined;
+}
+export interface ToastApi {
+    /** Shows a toast; returns its id. */
+    readonly show: (options: ToastOptions) => string;
+    readonly dismiss: (id: string) => void;
+}
+/** How long a toast stays on screen by default. */
+export declare const TOAST_MS = 6000;
+/** Shows short, non-blocking messages in the one toast region. */
+export declare function useToast(): ToastApi;
+/**
+ * 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
+ * (both always mounted, so screen readers announce what is added). It is the only place in the
+ * editor that positions a message with `position: fixed`.
+ */
+export declare function ToastProvider({ children }: {
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=toast.d.ts.map

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

@@ -0,0 +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"}

package/dist/ui/toast.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+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;
+const ICONS = {
+    success: 'circle-check',
+    info: 'info',
+    warning: 'triangle-alert',
+    error: 'circle-alert',
+};
+const ToastContext = createContext(undefined);
+/** Shows short, non-blocking messages in the one toast region. */
+export function useToast() {
+    const api = useContext(ToastContext);
+    if (api === undefined)
+        throw new Error('useToast must be used inside <ToastProvider>');
+    return api;
+}
+/**
+ * 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
+ * (both always mounted, so screen readers announce what is added). It is the only place in the
+ * editor that positions a message with `position: fixed`.
+ */
+export function ToastProvider({ children }) {
+    const [entries, setEntries] = useState([]);
+    const counter = useRef(0);
+    const dismiss = useCallback((id) => {
+        setEntries((current) => current.filter((entry) => entry.id !== id));
+    }, []);
+    const show = useCallback((options) => {
+        counter.current += 1;
+        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]);
+        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) })] })] }));
+}
+function ToastItem({ entry, onDismiss, }) {
+    const t = useT();
+    const { id, serial, variant, action } = entry;
+    const duration = 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.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: serial is the restart trigger
+    useEffect(() => {
+        remaining.current = duration;
+    }, [serial, duration]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: serial is the restart trigger
+    useEffect(() => {
+        if (paused || remaining.current === null)
+            return;
+        const started = Date.now();
+        const timer = setTimeout(() => onDismiss(id), remaining.current);
+        return () => {
+            clearTimeout(timer);
+            if (remaining.current !== null) {
+                remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+            }
+        };
+    }, [paused, id, serial, onDismiss]);
+    return (_jsxs("div", { className: "bd-toast", "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.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toast.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.test.d.ts","sourceRoot":"","sources":["../../src/ui/toast.test.tsx"],"names":[],"mappings":""}

package/dist/ui/toast.test.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { act } from 'react';
+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 { MessagesProvider } from '../messages/index.js';
+import { TOAST_MS, ToastProvider, useToast } from './toast.js';
+expect.extend(matchers);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+let api;
+function Probe() {
+    api = useToast();
+    return null;
+}
+beforeEach(async () => {
+    vi.useFakeTimers();
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ToastProvider, { children: _jsx(Probe, {}) }) })));
+});
+afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+});
+const status = () => container.querySelector('.bd-toast-region [role=status]');
+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('announces success, info and warning politely and errors as alerts', () => {
+        expect(status().getAttribute('aria-live')).toBe('polite');
+        show({ message: 'Saved', variant: 'success' });
+        show({ message: 'Heads up', variant: 'warning' });
+        show({ message: 'Broke', variant: 'error' });
+        expect(status().textContent).toContain('Saved');
+        expect(status().textContent).toContain('Heads up');
+        expect(status().textContent).not.toContain('Broke');
+        expect(alert().textContent).toContain('Broke');
+        expect(container.querySelectorAll('.bd-toast')).toHaveLength(3);
+    });
+    it('dismisses after the timeout, and a persistent toast stays', () => {
+        show({ message: 'Gone soon' });
+        show({ message: 'Stays', duration: null });
+        advance(TOAST_MS + 10);
+        expect(status().textContent).not.toContain('Gone soon');
+        expect(status().textContent).toContain('Stays');
+    });
+    it('pauses the countdown while hovered or focused', () => {
+        show({ message: 'Hold on' });
+        const toast = () => container.querySelector('.bd-toast');
+        advance(TOAST_MS - 1000);
+        act(() => void toast().dispatchEvent(new MouseEvent('mouseover', { bubbles: true })));
+        advance(TOAST_MS * 3);
+        expect(status().textContent).toContain('Hold on');
+        act(() => void toast().dispatchEvent(new MouseEvent('mouseout', { bubbles: true })));
+        advance(1010);
+        expect(status().textContent).not.toContain('Hold on');
+        show({ message: 'Focus me' });
+        const close = container.querySelector('.bd-toast-close');
+        act(() => close.focus());
+        advance(TOAST_MS * 3);
+        expect(status().textContent).toContain('Focus me');
+    });
+    it('replaces a toast with the same id and restarts its timer', () => {
+        show({ id: 'n', message: 'First' });
+        advance(TOAST_MS - 100);
+        show({ id: 'n', message: 'Second' });
+        advance(1000);
+        expect(container.querySelectorAll('.bd-toast')).toHaveLength(1);
+        expect(status().textContent).toContain('Second');
+    });
+    it('dismisses with the close button and runs an action', () => {
+        const onSelect = vi.fn();
+        show({ message: 'Newer', duration: null, action: { label: 'Reload', onSelect } });
+        const reload = [...container.querySelectorAll('.bd-toast button')].find((b) => b.textContent === 'Reload');
+        act(() => reload.click());
+        expect(onSelect).toHaveBeenCalledOnce();
+        const close = container.querySelector('button[aria-label="Dismiss notification"]');
+        act(() => close.click());
+        expect(container.querySelector('.bd-toast')).toBeNull();
+    });
+    it('has no axe violations with every variant shown', async () => {
+        vi.useRealTimers();
+        for (const variant of ['success', 'info', 'warning', 'error']) {
+            show({ message: `A ${variant} message`, variant, detail: 'more', duration: null });
+        }
+        expect(await axe(container)).toHaveNoViolations();
+    });
+});