@tristan2828/ui-foundation 3.16.2 → 3.17.0

package/conventions/docs/cell-patterns.md

@@ -742,9 +742,12 @@ const price = editInPlace({
   only), Ctrl/Cmd+Shift+Enter ticks the task item the caret is in, and
   Markdown pasted as plain text arrives formatted. Ctrl/Cmd+Enter stays
   the save. A formatting toolbar sits above the text (bold to link, each
-  button naming its shortcut); it's part of the field, so moving to it
-  doesn't save. `toolbar={false}` leaves it out where a value is short
-  and the shortcuts are enough.
+  button naming its shortcut), and a smaller one floats over selected
+  words (bold, italic, strikethrough, code, link); Alt+F10 reaches the
+  floating one, else the fixed one. Both are part of the field, so moving
+  to them doesn't save, and Esc hides the floating one before it gives up
+  the edit. `toolbar={false}` leaves both out where a value is short and
+  the shortcuts are enough.
 - **The save is the single-field save** (`useRecordUpdate` with
   `optimistic: false, toastOnError: false`, the entity's
   `useEdit<Entity>Field`), `mutateAsync` of one field's PATCH.

package/dist/components/app/milkdown-editor.js

@@ -22,15 +22,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   in. Ctrl/Cmd+Enter stays the field's save.
 // - A placeholder in an empty document, and a count of the Markdown's
 //   length as it nears `maxLength`.
-// - A fixed toolbar above the text (rich-text-toolbar.tsx), unless
-//   `toolbar={false}`.
+// - A fixed toolbar above the text (rich-text-toolbar.tsx), and a
+//   floating one over selected words (rich-text-floating-toolbar.tsx),
+//   unless `toolbar={false}`. Alt+F10 reaches the floating one when it
+//   shows, else the fixed one.
 import { useEffect, useId, useRef, useState } from 'react';
 import { defaultValueCtx, Editor, editorViewCtx, editorViewOptionsCtx, parserCtx, remarkStringifyOptionsCtx, rootCtx, schemaCtx, serializerCtx, } from '@milkdown/kit/core';
 import { history } from '@milkdown/kit/plugin/history';
 import { commands, inputRules, keymap, markInputRules, plugins, remarkPreserveEmptyLinePlugin, schema, } from '@milkdown/kit/preset/commonmark';
 import { gfm } from '@milkdown/kit/preset/gfm';
 import { Fragment, Slice } from '@milkdown/kit/prose/model';
-import { Plugin } from '@milkdown/kit/prose/state';
+import { NodeSelection, Plugin } from '@milkdown/kit/prose/state';
 import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
 import { $prose, getMarkdown } from '@milkdown/kit/utils';
 import { cn } from 'cn';
@@ -40,6 +42,7 @@ import { Input } from '../ui/input.js';
 import { Popover, PopoverContent } from '../ui/popover.js';
 import { linkHref } from '../../lib/link-href.js';
 import { MarkdownMergeError, markdownStyle, mergeMarkdown } from '../../lib/markdown-merge.js';
+import { RichTextFloatingToolbar } from './rich-text-floating-toolbar.js';
 import { toggleFormat } from './rich-text-formats.js';
 import { RichTextToolbar } from './rich-text-toolbar.js';
 // The commonmark preset, minus the plugin that writes `<br />`. A $remark
@@ -189,6 +192,19 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     const [length, setLength] = useState(defaultValue.length);
     // The editor's state after each change, for the toolbar's pressed buttons.
     const [editorState, setEditorState] = useState(null);
+    const [editorView, setEditorView] = useState(null);
+    // For the floating toolbar: focus is in the text (or on the floating
+    // toolbar), the mouse is down choosing words, and the selection Esc hid
+    // it for.
+    const [focused, setFocused] = useState(false);
+    const [selecting, setSelecting] = useState(false);
+    const [dismissed, setDismissed] = useState(null);
+    const toolbarRef = useRef(null);
+    const floatingRef = useRef(null);
+    // The field's element, which the floating toolbar is placed against.
+    const [field, setField] = useState(null);
+    // Whether the floating toolbar shows, for the editor's keys (set up once).
+    const floatingOpenRef = useRef(false);
     // Opens the link box: made with the editor, used by the toolbar's Link.
     const openLinkRef = useRef(() => { });
     // The latest props, for the editor's callbacks, which are set up once.
@@ -220,6 +236,8 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         attributes['aria-invalid'] = 'true';
     if (placeholder)
         attributes['aria-placeholder'] = placeholder;
+    if (toolbar)
+        attributes['aria-keyshortcuts'] = 'Alt+F10';
     const attributesKey = JSON.stringify(attributes);
     // The editor is made once, from the Markdown it opened with.
     useEffect(() => {
@@ -252,6 +270,9 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                     if (cancelled)
                         return;
                     setEditorState(view.state);
+                    // Esc hides the floating toolbar for one selection only.
+                    if (view.state.selection.empty)
+                        setDismissed(null);
                     if (!view.state.doc.eq(previous.doc))
                         emit();
                 },
@@ -310,7 +331,49 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         : null;
                     return doc ? ctx.get(serializerCtx)(doc) : slice.content.textBetween(0, slice.content.size, '\n\n');
                 },
+                handleDOMEvents: {
+                    focus: () => {
+                        setFocused(true);
+                        return false;
+                    },
+                    // Moving to the floating toolbar keeps it showing.
+                    blur: (_view, event) => {
+                        if (!floatingRef.current?.contains(event.relatedTarget))
+                            setFocused(false);
+                        return false;
+                    },
+                    // The floating toolbar waits for the mouse to be up: a drag
+                    // is still choosing the words.
+                    mousedown: (_view, event) => {
+                        if (event.button !== 0)
+                            return false;
+                        setDismissed(null);
+                        setSelecting(true);
+                        window.addEventListener('mouseup', () => setSelecting(false), { once: true });
+                        return false;
+                    },
+                },
                 handleKeyDown: (view, event) => {
+                    setSelecting(false);
+                    // Alt+F10: to the floating toolbar when it shows, else the
+                    // fixed one (the convention editors share).
+                    if (event.altKey && event.key === 'F10') {
+                        const bar = floatingOpenRef.current ? floatingRef.current : toolbarRef.current;
+                        const button = bar?.querySelector('button[tabindex="0"]');
+                        if (!button)
+                            return false;
+                        event.preventDefault();
+                        button.focus();
+                        return true;
+                    }
+                    // Esc hides the floating toolbar first; only the next one
+                    // reaches the field (editing in place gives up on it).
+                    if (event.key === 'Escape' && floatingOpenRef.current) {
+                        event.preventDefault();
+                        const { from, to } = view.state.selection;
+                        setDismissed({ from, to });
+                        return true;
+                    }
                     const mod = event.metaKey || event.ctrlKey;
                     if (mod && !event.shiftKey && !event.altKey && event.key.toLowerCase() === 'k') {
                         event.preventDefault();
@@ -362,13 +425,16 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             }
             editorRef.current = editor;
             baseline = editor.action(getMarkdown());
-            setEditorState(editor.action((ctx) => ctx.get(editorViewCtx).state));
+            const view = editor.action((ctx) => ctx.get(editorViewCtx));
+            setEditorView(view);
+            setEditorState(view.state);
             if (autoFocus)
                 editor.action((ctx) => ctx.get(editorViewCtx).focus());
         });
         return () => {
             cancelled = true;
             setEditorState(null);
+            setEditorView(null);
             const editor = editorRef.current;
             editorRef.current = null;
             if (editor)
@@ -402,11 +468,29 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             view.focus();
         });
     };
+    // The floating toolbar: words selected, focus in the field, the mouse up,
+    // and nothing else open over the text.
+    const selection = editorState?.selection;
+    const floatingOpen = Boolean(toolbar &&
+        !readOnly &&
+        editorView &&
+        focused &&
+        !selecting &&
+        linkBox === null &&
+        selection &&
+        !selection.empty &&
+        !(selection instanceof NodeSelection) &&
+        !selection.$from.parent.type.spec.code &&
+        !(dismissed && dismissed.from === selection.from && dismissed.to === selection.to));
+    useEffect(() => {
+        floatingOpenRef.current = floatingOpen;
+    });
+    const returnToText = () => editorView?.focus();
     const closeLink = () => {
         setLinkBox(null);
         editorRef.current?.action((ctx) => ctx.get(editorViewCtx).focus());
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-slot": "rich-text-editor", className: cn('flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { state: editorState, readOnly: readOnly, 
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", className: cn('relative flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { ref: toolbarRef, state: editorState, readOnly: readOnly, 
                         // Only once the editor is made: until then the editable element,
                         // and its id, aren't in the page (axe: aria-valid-attr-value).
                         controls: editorState ? editableId : undefined, onFormat: runFormat })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
@@ -421,7 +505,11 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         // Raw HTML from the text: shown as its characters, never as markup.
                         '[&_span[data-type=html]]:rounded [&_span[data-type=html]]:bg-muted [&_span[data-type=html]]:px-1 [&_span[data-type=html]]:font-mono [&_span[data-type=html]]:text-foreground', 
                         // The placeholder, in an empty document only (a decoration).
-                        '[&_p[data-placeholder]]:before:pointer-events-none [&_p[data-placeholder]]:before:float-left [&_p[data-placeholder]]:before:h-0 [&_p[data-placeholder]]:before:text-muted-foreground [&_p[data-placeholder]]:before:content-[attr(data-placeholder)]') })] }), showCount && (_jsx("p", { id: counterId, "data-slot": "rich-text-editor-count", className: cn('text-right type-caption tabular-nums', length > maxLength ? 'text-destructive-text' : 'text-muted-foreground'), children: length > maxLength
+                        '[&_p[data-placeholder]]:before:pointer-events-none [&_p[data-placeholder]]:before:float-left [&_p[data-placeholder]]:before:h-0 [&_p[data-placeholder]]:before:text-muted-foreground [&_p[data-placeholder]]:before:content-[attr(data-placeholder)]') }), floatingOpen && editorView && editorState && (_jsx(RichTextFloatingToolbar, { ref: floatingRef, view: editorView, state: editorState, field: field, controls: editableId, onFormat: runFormat, onDismiss: () => setDismissed({ from: editorState.selection.from, to: editorState.selection.to }), onReturn: returnToText, onBlur: (event) => {
+                            const next = event.relatedTarget;
+                            if (!editorView.dom.contains(next) && !floatingRef.current?.contains(next))
+                                setFocused(false);
+                        } }))] }), showCount && (_jsx("p", { id: counterId, "data-slot": "rich-text-editor-count", className: cn('text-right type-caption tabular-nums', length > maxLength ? 'text-destructive-text' : 'text-muted-foreground'), children: length > maxLength
                     ? `${(length - maxLength).toLocaleString()} characters over the limit of ${maxLength.toLocaleString()}`
                     : `${length.toLocaleString()} of ${maxLength.toLocaleString()} characters` })), _jsx(Popover, { open: linkBox !== null, onOpenChange: (open) => !open && closeLink(), children: linkBox && (_jsx(LinkForm, { box: linkBox, onApply: (href) => {
                         const editor = editorRef.current;

package/dist/components/app/rich-text-editor.d.ts

@@ -19,9 +19,10 @@ export type RichTextEditorProps = {
      */
     maxLength?: number;
     /**
-     * The formatting toolbar above the text (bold, headings, lists, link, …),
-     * each button with its shortcut. On by default; `false` leaves the text
-     * alone, its shortcuts still working.
+     * The formatting toolbars: one fixed above the text (bold, headings,
+     * lists, link, …), each button with its shortcut, and one floating over
+     * selected words (bold to link). Alt+F10 reaches them from the text. On
+     * by default; `false` leaves the text alone, its shortcuts still working.
      */
     toolbar?: boolean;
     className?: string;

package/dist/components/app/rich-text-floating-toolbar.d.ts

@@ -0,0 +1,25 @@
+import { type FocusEvent, type Ref } from 'react';
+import type { EditorState } from '@milkdown/kit/prose/state';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import type { FormatId } from './rich-text-formats.js';
+export interface RichTextFloatingToolbarProps {
+    /** The editor, to measure the selection. */
+    view: EditorView;
+    /** The editor's state now: the selection, and which formats are on. */
+    state: EditorState;
+    /** The field's element it's placed against (positioned: `relative`). */
+    field: HTMLElement | null;
+    /** The editable element's id, for `aria-controls`. */
+    controls: string;
+    /** A button pressed: run the format on the editor and give it focus back. */
+    onFormat: (id: FormatId) => void;
+    /** Esc: hide it until the selection changes. */
+    onDismiss: () => void;
+    /** Esc or Tab: focus back to the text. */
+    onReturn: () => void;
+    /** Focus leaving one of its buttons, for the editor to tell whether it left the field. */
+    onBlur: (event: FocusEvent) => void;
+    /** Its element, for Alt+F10 to reach it and for the editor's own blur. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function RichTextFloatingToolbar({ view, state, field, controls, onFormat, onDismiss, onReturn, onBlur, ref, }: RichTextFloatingToolbarProps): import("react").JSX.Element;

package/dist/components/app/rich-text-floating-toolbar.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The rich-text editor's floating toolbar: the formats for selected words
+// (Bold, Italic, Strikethrough, Code · Link), over the selection. The
+// fixed toolbar (rich-text-toolbar.tsx) stays; this one saves the trip up
+// to it. The editor decides when it shows (milkdown-editor.tsx):
+//
+// - While words are selected in the text and the field has focus, once
+//   the mouse is up (not while a drag is still choosing them). Not in a
+//   code block (no formats apply there), read-only, or with the link box
+//   open.
+// - Above the selection, or below it when there's no room for it inside
+//   the text (the first line), so it never covers the fixed toolbar.
+// - A mouse press never takes focus from the text, as on the fixed one.
+// - Keyboard: Alt+F10 in the text reaches it; the arrow keys, Home and
+//   End move along it (one tab stop, as on the fixed one); Esc or Tab goes
+//   back to the text, the selection kept. Esc (here or in the text) hides
+//   it until the selection changes.
+//
+// It sits inside the field's own element, placed against it, not in a
+// portal: it scrolls with the text, is part of the field for editing in
+// place and inside a dialog, and needs none of a popover's focus guards
+// (Base UI's Popover adds tabbable `aria-hidden` guards while focus is
+// outside it, which for this toolbar is always, and axe fails them).
+import { useLayoutEffect, useState } from 'react';
+import { cn } from 'cn';
+import { FormatButtons } from './rich-text-toolbar.js';
+// Its gap from the words.
+const GAP = 8;
+// The selection's box on screen: the words themselves on one line, the
+// text's width over several.
+function selectionRect(view, from, to) {
+    const size = view.state.doc.content.size;
+    const start = view.coordsAtPos(Math.min(from, size), 1);
+    const end = view.coordsAtPos(Math.min(to, size), -1);
+    const top = Math.min(start.top, end.top);
+    const bottom = Math.max(start.bottom, end.bottom);
+    if (end.top < start.bottom)
+        return new DOMRect(Math.min(start.left, end.left), top, Math.abs(end.left - start.left), bottom - top);
+    const text = view.dom.getBoundingClientRect();
+    return new DOMRect(text.left, top, text.width, bottom - top);
+}
+// Where it goes, against `field` (its positioned parent): centred over
+// the words, below them when there's no room above inside the text, and
+// never past the field's sides.
+function place(view, from, to, field, bar) {
+    const words = selectionRect(view, from, to);
+    const box = field.getBoundingClientRect();
+    const text = view.dom.getBoundingClientRect();
+    const { offsetWidth: width, offsetHeight: height } = bar;
+    const above = words.top - height - GAP >= text.top;
+    const top = above ? words.top - height - GAP : words.bottom + GAP;
+    const centre = words.left + words.width / 2 - width / 2;
+    const left = Math.max(0, Math.min(centre - box.left, box.width - width));
+    return { top: top - box.top, left, side: above ? 'top' : 'bottom' };
+}
+export function RichTextFloatingToolbar({ view, state, field, controls, onFormat, onDismiss, onReturn, onBlur, ref, }) {
+    const [bar, setBar] = useState(null);
+    const [placement, setPlacement] = useState(null);
+    const { from, to } = state.selection;
+    // Placed after each change (a mark makes the words wider), and again
+    // when the window's width reflows the text.
+    useLayoutEffect(() => {
+        if (!bar || !field)
+            return;
+        const update = () => setPlacement(place(view, from, to, field, bar));
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [view, state, from, to, field, bar]);
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            // Its own: not the field's (editing in place would give up the edit).
+            event.preventDefault();
+            event.stopPropagation();
+            onDismiss();
+            onReturn();
+        }
+        else if (event.key === 'Tab') {
+            event.preventDefault();
+            onReturn();
+        }
+    };
+    return (_jsx("div", { ref: (element) => {
+            setBar(element);
+            if (typeof ref === 'function')
+                ref(element);
+            else if (ref)
+                ref.current = element;
+        }, role: "toolbar", "aria-label": "Format selection", "aria-controls": controls, "data-slot": "rich-text-floating-toolbar", "data-side": placement?.side, style: placement ? { top: placement.top, left: placement.left } : undefined, className: cn('absolute z-50 flex items-center gap-0.5 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10', 'animate-in fade-in-0 zoom-in-95 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2', 
+        // Measured before it's seen, so it never shows in the wrong place.
+        !placement && 'invisible'), onKeyDown: onKeyDown, onBlur: onBlur, children: _jsx(FormatButtons, { formats: "selection", state: state, readOnly: false, onFormat: onFormat }) }));
+}

package/dist/components/app/rich-text-toolbar.d.ts

@@ -1,5 +1,30 @@
+import { type LucideIcon } from 'lucide-react';
+import { type Ref } from 'react';
 import type { EditorState } from '@milkdown/kit/prose/state';
 import { type FormatId } from './rich-text-formats.js';
+type FormatItem = {
+    id: FormatId;
+    label: string;
+    icon: LucideIcon;
+    /** Milkdown's own shortcut, as `aria-keyshortcuts` writes it with Mod for Ctrl/Cmd. */
+    keys?: string;
+    /** More for the tooltip than the shortcut. */
+    hint?: string;
+};
+declare const SETS: {
+    all: FormatItem[][];
+    selection: FormatItem[][];
+};
+export type FormatButtonsProps = {
+    /** Every format, or the ones for selected words. */
+    formats: keyof typeof SETS;
+    /** The editor's state now, to show which formats are on. Null until it's made. */
+    state: EditorState | null;
+    readOnly: boolean;
+    /** A button pressed: run the format on the editor and give it focus back. */
+    onFormat: (id: FormatId) => void;
+};
+export declare function FormatButtons({ formats, state, readOnly, onFormat }: FormatButtonsProps): import("react").JSX.Element;
 export interface RichTextToolbarProps {
     /** The editor's state now, to show which formats are on. Null until it's made. */
     state: EditorState | null;
@@ -8,5 +33,8 @@ export interface RichTextToolbarProps {
     controls?: string;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
+    /** The toolbar's element, for Alt+F10 to reach it from the text. */
+    ref?: Ref<HTMLDivElement>;
 }
-export declare function RichTextToolbar({ state, readOnly, controls, onFormat }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ state, readOnly, controls, onFormat, ref }: RichTextToolbarProps): import("react").JSX.Element;
+export {};

package/dist/components/app/rich-text-toolbar.js

@@ -10,6 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //   (`aria-pressed`), and names its shortcut (`aria-keyshortcuts`, and the
 //   tooltip).
 // - Read-only (while a save is in flight), every button is disabled.
+// - Alt+F10 in the text reaches it (the floating toolbar first, when it's
+//   showing: rich-text-floating-toolbar.tsx).
 import { BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, SquareCodeIcon, StrikethroughIcon, TextQuoteIcon, } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
 import { Separator } from '../ui/separator.js';
@@ -38,7 +40,6 @@ const GROUPS = [
     ],
     [{ id: 'link', label: 'Link', icon: LinkIcon, keys: 'Mod+K' }],
 ];
-const ITEMS = GROUPS.flat();
 function isApple() {
     return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 }
@@ -56,13 +57,24 @@ function shownKeys(keys, apple) {
         .map((part) => symbols[part] ?? part)
         .join('');
 }
-export function RichTextToolbar({ state, readOnly, controls, onFormat }) {
+// Which buttons a toolbar has: every format (the fixed one), or the ones
+// that apply to selected words (the floating one).
+const SETS = {
+    all: GROUPS,
+    selection: [GROUPS[0], GROUPS[4]],
+};
+// A toolbar's row of buttons: one tab stop, the last one used (ARIA's
+// toolbar pattern); the arrow keys, Home and End move along the row. The
+// toolbar's element (`role="toolbar"`, its name) is the caller's.
+export function FormatButtons({ formats, state, readOnly, onFormat }) {
     const apple = isApple();
+    const groups = SETS[formats];
+    const items = groups.flat();
     const buttons = useRef([]);
     // The one button Tab reaches: the last one used.
     const [current, setCurrent] = useState(0);
     const move = (index) => {
-        const next = (index + ITEMS.length) % ITEMS.length;
+        const next = (index + items.length) % items.length;
         setCurrent(next);
         buttons.current[next]?.focus();
     };
@@ -71,7 +83,7 @@ export function RichTextToolbar({ state, readOnly, controls, onFormat }) {
             ArrowRight: () => move(current + 1),
             ArrowLeft: () => move(current - 1),
             Home: () => move(0),
-            End: () => move(ITEMS.length - 1),
+            End: () => move(items.length - 1),
         };
         const action = keys[event.key];
         if (!action || event.metaKey || event.ctrlKey || event.altKey)
@@ -79,20 +91,23 @@ export function RichTextToolbar({ state, readOnly, controls, onFormat }) {
         event.preventDefault();
         action();
     };
-    return (_jsx(TooltipProvider, { delay: 400, children: _jsx("div", { role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", onKeyDown: onKeyDown, children: GROUPS.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
-                        const index = ITEMS.indexOf(item);
-                        const Icon = item.icon;
-                        const tip = [
-                            item.label,
-                            item.keys && `(${shownKeys(item.keys, apple)})`,
-                            item.hint && `· ${item.hint.replace(/Mod\+Shift\+Enter/, shownKeys('Mod+Shift+Enter', apple))}`,
-                        ]
-                            .filter(Boolean)
-                            .join(' ');
-                        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Toggle, { ref: (element) => {
-                                            buttons.current[index] = element;
-                                        }, size: "icon-sm", "aria-label": item.label, "aria-keyshortcuts": item.keys ? ariaKeys(item.keys, apple) : undefined, pressed: state ? formatOn(state, item.id) : false, disabled: readOnly, tabIndex: index === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", 
-                                        // A mouse press keeps focus, and the selection, in the text.
-                                        onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
-                    })] }, groupIndex))) }) }));
+    return (_jsx(TooltipProvider, { delay: 400, children: groups.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
+                    const index = items.indexOf(item);
+                    const Icon = item.icon;
+                    const tip = [
+                        item.label,
+                        item.keys && `(${shownKeys(item.keys, apple)})`,
+                        item.hint && `· ${item.hint.replace(/Mod\+Shift\+Enter/, shownKeys('Mod+Shift+Enter', apple))}`,
+                    ]
+                        .filter(Boolean)
+                        .join(' ');
+                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Toggle, { ref: (element) => {
+                                        buttons.current[index] = element;
+                                    }, size: "icon-sm", "aria-label": item.label, "aria-keyshortcuts": item.keys ? ariaKeys(item.keys, apple) : undefined, pressed: state ? formatOn(state, item.id) : false, disabled: readOnly, tabIndex: index === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", 
+                                    // A mouse press keeps focus, and the selection, in the text.
+                                    onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
+                })] }, groupIndex))) }));
+}
+export function RichTextToolbar({ state, readOnly, controls, onFormat, ref }) {
+    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.16.2",
+  "version": "3.17.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {