@tristan2828/ui-foundation 4.47.2 → 4.49.0

package/conventions/docs/cell-patterns.md

@@ -26,15 +26,15 @@
   - [A variant: a pressed icon inside another value's cell](#a-variant-a-pressed-icon-inside-another-values-cell) · lines 565–648
 - [16. Title linking to the record's view](#16-title-linking-to-the-records-view) · lines 650–685
 - [17. Quick action on the view](#17-quick-action-on-the-view) · lines 687–760
-- [18. Editable value](#18-editable-value) · lines 762–1208
-  - [A list of sub-items](#a-list-of-sub-items) · lines 1024–1109
-  - [In a table's rows](#in-a-tables-rows) · lines 1111–1196
-  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1198–1208
-- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1210–1276
-- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1278–1342
-- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1344–1412
-- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1414–1442
-- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1444–1518
+- [18. Editable value](#18-editable-value) · lines 762–1216
+  - [A list of sub-items](#a-list-of-sub-items) · lines 1032–1117
+  - [In a table's rows](#in-a-tables-rows) · lines 1119–1204
+  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1206–1216
+- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1218–1284
+- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1286–1350
+- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1352–1420
+- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1422–1450
+- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1452–1526
 
 <!-- /index -->
 
@@ -1003,7 +1003,15 @@ const price = editInPlace({
   icon a menu of kinds. In a table, Tab in the last cell adds a row,
   Enter goes down a column (and out from the last row), bars under and
   beside it add a row or a column, and the toolbar's Table menu inserts
-  rows and columns, aligns a column and deletes.
+  rows and columns, aligns a column and deletes. Selected words can be
+  highlighted in four colours (amber, yellow, green, red) from the
+  toolbars' Highlight menu or with "/highlight", and un-highlighted;
+  they're saved as `==words==` (`=={green}words==` for the others), plain
+  Markdown, and `<Markdown>` shows them. The fixed toolbar's Full screen
+  button fills the window with the field (Esc leaves; nothing is lost or
+  saved by it), and on a touch screen or under 768px it carries Indent
+  and Outdent for list items, where there is no Tab. A new checklist item
+  shows a "To-do" placeholder and the caret until you type.
   `toolbar={false}` leaves out the toolbars and the slash menu where a
   value is short and the shortcuts are enough; `toolbar="floating"` keeps
   the floating one and the slash menu without the bar above (an `inline`

package/conventions/docs/design-language.md

@@ -9,18 +9,18 @@
 - [Glyphs and icons: 3:1](#glyphs-and-icons-31) · lines 113–126
 - [Logos and brand marks](#logos-and-brand-marks) · lines 128–172
 - [Categorical colour](#categorical-colour) · lines 174–244
-- [Typography](#typography) · lines 246–328
-  - [Written text (notes)](#written-text-notes) · lines 277–328
-- [Density](#density) · lines 330–387
-- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 389–503
-- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 505–574
-- [Notices](#notices) · lines 576–604
-- [A value over time](#a-value-over-time) · lines 606–639
-- [A list as a board](#a-list-as-a-board) · lines 641–692
-- [A list as cards](#a-list-as-cards) · lines 694–740
-- [Key numbers on a record](#key-numbers-on-a-record) · lines 742–764
-- [Picking at random](#picking-at-random) · lines 766–797
-- [Filling in what's missing](#filling-in-whats-missing) · lines 799–849
+- [Typography](#typography) · lines 246–337
+  - [Written text (notes)](#written-text-notes) · lines 277–337
+- [Density](#density) · lines 339–396
+- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 398–512
+- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 514–583
+- [Notices](#notices) · lines 585–613
+- [A value over time](#a-value-over-time) · lines 615–648
+- [A list as a board](#a-list-as-a-board) · lines 650–701
+- [A list as cards](#a-list-as-cards) · lines 703–749
+- [Key numbers on a record](#key-numbers-on-a-record) · lines 751–773
+- [Picking at random](#picking-at-random) · lines 775–806
+- [Filling in what's missing](#filling-in-whats-missing) · lines 808–858
 
 <!-- /index -->
 
@@ -323,6 +323,15 @@ shade: note `info`, tip `success`, important category slot 2, warning
 `warning`, caution `destructive`. The package draws all of it; an app
 only renders `<Markdown>` or the editor.
 
+Highlighted words (`==words==` in the Markdown) have four colour tokens:
+`--highlight-amber` (the default), `--highlight-yellow`,
+`--highlight-green` and `--highlight-red` (`bg-highlight-amber`, …). Each
+is a wash behind words that keep `--foreground`, so the pair is the
+contrast that counts: light washes in the light theme and deep ones in the
+dark, each pair checked by axe in both (the Default story's four marks).
+Use them as a background behind written text only, never as a tone: a
+status is `success`, `warning`, `destructive` or `info`.
+
 `--link` is for written text only. A link in a table cell is
 `text-foreground` and underlined, never blue: a column of coloured text
 pulls the eye from every other column (cell patterns 16 and 20).

package/dist/components/app/data-table.js

@@ -179,9 +179,11 @@ const GROUP_TOGGLE_CLASS = '-mx-1 inline-flex items-baseline gap-2 rounded-sm px
 // ring inside it (a row has no outline of its own room); the picked one
 // takes the muted fill on every cell, over the zebra stripe and the pinned
 // cells' opaque backgrounds as highlightRow's wash does, with a bar in
-// --primary at its start, so it reads without colour too.
+// --primary at its start, so it reads without colour too. Muted text on that
+// fill measures 4.34:1 in light, so inside the row it takes the same darker
+// grey as a highlighted row's (theme.css).
 const SELECTABLE_ROW_CLASS = 'cursor-pointer outline-none focus-visible:[&>td]:shadow-[inset_0_2px_0_0_var(--ring),inset_0_-2px_0_0_var(--ring)]';
-const SELECTED_ROW_CLASS = '[&>td]:bg-muted [&>td:first-child]:shadow-[inset_3px_0_0_0_var(--primary)] ' +
+const SELECTED_ROW_CLASS = '[--muted-foreground:var(--table-highlight-muted-foreground)] [&>td]:bg-muted [&>td:first-child]:shadow-[inset_3px_0_0_0_var(--primary)] ' +
     'focus-visible:[&>td:first-child]:shadow-[inset_3px_0_0_0_var(--primary),inset_0_2px_0_0_var(--ring),inset_0_-2px_0_0_var(--ring)]';
 // The table and the panel side by side once one is picked on a wide
 // screen. The grid is there from the start, so opening the panel never

package/dist/components/app/markdown.js

@@ -36,6 +36,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //
 // A quote that starts `[!NOTE]` (GitHub's alert syntax) is a callout: a
 // tinted box with its kind's icon (src/lib/markdown-callout.ts).
+//
+// `==words==` is highlighted words (amber, or `=={green}words==`: yellow,
+// green, red): a <mark> on the colour's wash (src/lib/markdown-highlight.ts).
 import { useEffect, useMemo, useRef } from 'react';
 import ReactMarkdown, {} from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -43,10 +46,17 @@ import { cn } from 'cn';
 import { ExternalLinkIcon, SquareCheckIcon, SquareIcon } from 'lucide-react';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
 import { CALLOUT_KINDS, remarkCallouts } from '../../lib/markdown-callout.js';
+import { isHighlightColor, remarkHighlights } from '../../lib/markdown-highlight.js';
 import { textTopHeading } from '../../lib/markdown-top-heading.js';
 import { CALLOUT_BOX, CALLOUT_LOOK, DEFAULT_HEADING_LEVEL, headingBand, headingClass, headingTag, PROSE, PROSE_INSET, } from './prose-look.js';
 import { headerTexts, TABLE_SCROLL_FOCUS, watchTableScroll } from './prose-table-scroll.js';
-const REMARK_PLUGINS = [remarkGfm, remarkCallouts];
+const REMARK_PLUGINS = [remarkGfm, remarkCallouts, remarkHighlights];
+const HIGHLIGHT_WASH = {
+    amber: 'bg-highlight-amber',
+    yellow: 'bg-highlight-yellow',
+    green: 'bg-highlight-green',
+    red: 'bg-highlight-red',
+};
 function isCalloutKind(value) {
     return CALLOUT_KINDS.includes(value);
 }
@@ -103,6 +113,12 @@ const COMPONENTS = {
     input: ({ checked }) => checked ? (_jsx(SquareCheckIcon, { role: "img", "aria-label": "Done", className: "mr-2 inline-block size-4 align-[-0.1875rem] text-foreground" })) : (_jsx(SquareIcon, { role: "img", "aria-label": "Not done", className: "mr-2 inline-block size-4 align-[-0.1875rem] text-muted-foreground" })),
     blockquote: (props) => (_jsx("blockquote", { ...omitNode(props), className: "flex flex-col gap-3 border-l-2 border-border pl-4 text-muted-foreground" })),
     hr: () => _jsx("hr", { className: PROSE.rule }),
+    // Highlighted words (remarkHighlights marks them): the colour's wash.
+    mark: (props) => {
+        const { children, ...rest } = omitNode(props);
+        const color = rest['data-color'];
+        return (_jsx("mark", { ...rest, className: cn('rounded-sm text-foreground', isHighlightColor(color) ? HIGHLIGHT_WASH[color] : 'bg-highlight-amber'), children: children }));
+    },
     // A callout (remarkCallouts marks it): its kind's wash and icon, named
     // for screen readers by the kind ("Note: …").
     div: (props) => {

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

@@ -58,7 +58,7 @@ import { Fragment, Slice } from '@milkdown/kit/prose/model';
 import { NodeSelection, Plugin, TextSelection } from '@milkdown/kit/prose/state';
 import { isInTable, TableMap } from '@milkdown/kit/prose/tables';
 import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
-import { $nodeSchema, $prose, $remark, getMarkdown } from '@milkdown/kit/utils';
+import { $markSchema, $nodeSchema, $prose, $remark, getMarkdown } from '@milkdown/kit/utils';
 import { cn } from 'cn';
 import { toast } from 'sonner';
 import { Button } from '../ui/button.js';
@@ -69,6 +69,7 @@ import { acceptAttribute } from '../../lib/image-file.js';
 import { linkHref, linkRefusal } from '../../lib/link-href.js';
 import { passEscapeThrough } from './escape-passthrough.js';
 import { calloutHandler, remarkCalloutNodes } from '../../lib/markdown-callout.js';
+import { DEFAULT_HIGHLIGHT, highlightHandler, isHighlightColor, remarkHighlightNodes } from '../../lib/markdown-highlight.js';
 import { textTopHeading } from '../../lib/markdown-top-heading.js';
 import { MarkdownMergeError, markdownStyle, mergeMarkdown } from '../../lib/markdown-merge.js';
 import { DEFAULT_HEADING_LEVEL, headingBand, headingClass, headingTag } from './prose-look.js';
@@ -121,6 +122,36 @@ const calloutSchema = $nodeSchema('callout', () => ({
         },
     },
 }));
+// Highlighted words (`==words==`, `=={green}words==`: src/lib/markdown-highlight.ts):
+// a mark of their own, its colour an attribute.
+const highlightRemark = $remark('remarkHighlightNodes', () => remarkHighlightNodes);
+const highlightSchema = $markSchema('highlight', () => ({
+    attrs: { color: { default: DEFAULT_HIGHLIGHT } },
+    parseDOM: [
+        {
+            tag: 'mark[data-color]',
+            getAttrs: (dom) => {
+                const color = dom.dataset.color;
+                return { color: isHighlightColor(color) ? color : DEFAULT_HIGHLIGHT };
+            },
+        },
+    ],
+    toDOM: (mark) => ['mark', { 'data-color': String(mark.attrs.color) }, 0],
+    parseMarkdown: {
+        match: (node) => node.type === 'highlight',
+        runner: (state, node, type) => {
+            state.openMark(type, { color: isHighlightColor(node.color) ? node.color : DEFAULT_HIGHLIGHT });
+            state.next(node.children);
+            state.closeMark(type);
+        },
+    },
+    toMarkdown: {
+        match: (mark) => mark.type.name === 'highlight',
+        runner: (state, mark) => {
+            state.withMark(mark, 'highlight', undefined, { color: mark.attrs.color });
+        },
+    },
+}));
 function emptyImageTitles(node) {
     if (node.type === 'image' && node.title == null)
         node.title = '';
@@ -167,6 +198,8 @@ function taskItemView(node, view, getPos) {
     box.tabIndex = -1;
     box.setAttribute('aria-label', 'Done');
     const contentDOM = document.createElement('div');
+    // Takes the row's width, so an empty item's caret and placeholder show.
+    contentDOM.className = 'min-w-0 flex-1';
     dom.append(box, contentDOM);
     dom.dataset.itemType = 'task';
     let current = node;
@@ -297,6 +330,23 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     useEffect(() => {
         latest.current = { onChange, onProblem, readOnly, placeholder, upload, imageAccept, imageMaxSize };
     });
+    // Whether focus is on the floating toolbar, or in a menu opened from it
+    // (the Highlight menu's popup is in a portal).
+    const inFloating = (node) => Boolean(floatingRef.current?.contains(node) || (node instanceof Element && node.closest('[data-rich-text-menu]')));
+    // Full screen: the field fills the window, in place (the editor stays
+    // mounted, so nothing is lost).
+    const [fullScreen, setFullScreen] = useState(false);
+    const fullScreenRef = useRef(false);
+    useEffect(() => {
+        fullScreenRef.current = fullScreen;
+        if (!fullScreen)
+            return;
+        const overflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = overflow;
+        };
+    }, [fullScreen]);
     // The toolbar's Image button opens this file picker.
     const imageInputRef = useRef(null);
     // The fixed bar above the text, and the menus over it (the floating
@@ -510,7 +560,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                     },
                     // Moving to the floating toolbar keeps it showing.
                     blur: (_view, event) => {
-                        if (!floatingRef.current?.contains(event.relatedTarget))
+                        if (!inFloating(event.relatedTarget))
                             setFocused(false);
                         return false;
                     },
@@ -546,6 +596,12 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         setDismissed({ from, to });
                         return true;
                     }
+                    // Esc leaves full screen, and goes no further.
+                    if (event.key === 'Escape' && fullScreenRef.current) {
+                        event.preventDefault();
+                        setFullScreen(false);
+                        return true;
+                    }
                     // An Esc nothing over the text took: the field's to act on,
                     // though ProseMirror will mark it handled.
                     if (event.key === 'Escape')
@@ -566,6 +622,13 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                     return false;
                 },
                 decorations: (state) => {
+                    // An empty task item the caret is in says where typing goes.
+                    const { $from, empty } = state.selection;
+                    if (empty && $from.parent.type.name === 'paragraph' && $from.parent.content.size === 0 && $from.depth >= 2) {
+                        const item = $from.node($from.depth - 1);
+                        if (item.type.name === 'list_item' && item.attrs.checked != null)
+                            return DecorationSet.create(state.doc, [Decoration.node($from.before(), $from.after(), { 'data-placeholder': 'To-do' })]);
+                    }
                     const text = latest.current.placeholder;
                     const only = state.doc.childCount === 1 ? state.doc.firstChild : null;
                     if (!text || !only || only.type.name !== 'paragraph' || only.content.size > 0)
@@ -581,7 +644,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             ctx.update(remarkStringifyOptionsCtx, (options) => ({
                 ...options,
                 ...markdownStyle(original),
-                handlers: { ...options.handlers, callout: calloutHandler },
+                handlers: { ...options.handlers, callout: calloutHandler, highlight: highlightHandler },
             }));
             ctx.update(editorViewOptionsCtx, (options) => ({
                 ...options,
@@ -639,6 +702,8 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             .use(gfm)
             .use(calloutRemark)
             .use(calloutSchema)
+            .use(highlightRemark)
+            .use(highlightSchema)
             .use(imageTitles)
             .use(history)
             .use(changes)
@@ -777,6 +842,20 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         floatingOpenRef.current = floatingOpen;
     });
     const returnToText = () => editorView?.focus();
+    const toggleFullScreen = () => {
+        setFullScreen((on) => !on);
+        editorView?.focus();
+    };
+    // Esc on the toolbar leaves full screen too (a menu's own Esc, in its
+    // portal, isn't ours).
+    const leaveFullScreen = (event) => {
+        if (!fullScreen || event.key !== 'Escape' || event.defaultPrevented || !event.currentTarget.contains(event.target))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        setFullScreen(false);
+        editorView?.focus();
+    };
     useEffect(() => {
         slashMenuRef.current = slashOpen && slash ? { key: slashMenuKey, span: slash, items: slashMatches, index: slashIndex } : null;
     });
@@ -784,19 +863,21 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         setLinkBox(null);
         editorRef.current?.action((ctx) => ctx.get(editorViewCtx).focus());
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", className: cn('relative flex w-full min-w-0 flex-col bg-transparent type-body text-foreground break-words', 
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", "data-full-screen": fullScreen || undefined, onKeyDown: leaveFullScreen, className: cn(fullScreen ? 'fixed inset-0 z-50 h-dvh rounded-none! border-0! bg-background! ring-0!' : 'relative', 'flex w-full min-w-0 flex-col bg-transparent type-body text-foreground break-words', 
                 // Inline, it's the text itself: the caret shows where it's
                 // edited, and a refusal's reason under it says what's wrong.
                 !inline &&
                     'rounded-lg border border-input transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', !inline && 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [fixedToolbar && (_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, onTable: runTable, onImage: upload ? pickImages : undefined, text: textElement })), upload && (_jsx("input", { ref: imageInputRef, type: "file", accept: acceptAttribute(imageAccept), multiple: true, hidden: true, tabIndex: -1, onChange: (event) => {
+                        controls: editorState ? editableId : undefined, onFormat: runFormat, onTable: runTable, onImage: upload ? pickImages : undefined, onFullScreen: toggleFullScreen, fullScreen: fullScreen, text: textElement })), upload && (_jsx("input", { ref: imageInputRef, type: "file", accept: acceptAttribute(imageAccept), multiple: true, hidden: true, tabIndex: -1, onChange: (event) => {
                             const files = Array.from(event.target.files ?? []);
                             // Cleared, so picking the same file again still counts.
                             event.target.value = '';
                             imagesPicked(files);
                         } })), _jsx("div", { ref: rootRef, className: cn(!inline && 'min-h-24 px-2.5 py-2', 
+                        // Full screen: the text scrolls under the toolbar, in a column to read.
+                        fullScreen && 'min-h-0 flex-1 overflow-y-auto px-4 py-3 md:px-8 [&_.ProseMirror]:mx-auto [&_.ProseMirror]:w-full [&_.ProseMirror]:max-w-3xl', 
                         // Read-only text is muted; the toolbar's buttons say so by being disabled.
                         'has-[[aria-readonly=true]]:text-muted-foreground', 
                         // The same type roles <Markdown> uses, so text reads the same
@@ -807,7 +888,9 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         '[&_.ProseMirror:has(>[data-band])>:not([data-band])]:mx-3', !inline && '[&_.ProseMirror]:min-h-20', 
                         // ProseMirror's own required style (prosemirror-view's CSS): spaces
                         // as typed, so one at the end of a line isn't kept as &nbsp;.
-                        '[&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words', '[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-1 [&_ul]:pl-6', '[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-1 [&_ol]:pl-6', '[&_li[data-item-type=task]]:-ml-6 [&_li[data-item-type=task]]:flex [&_li[data-item-type=task]]:list-none [&_li[data-item-type=task]]:items-start [&_li[data-item-type=task]]:gap-2', '[&_li[data-item-type=task]>input]:mt-1 [&_li[data-item-type=task]>input]:size-4 [&_li[data-item-type=task]>input]:accent-primary', 
+                        '[&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words', '[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-1 [&_ul]:pl-6', '[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-1 [&_ol]:pl-6', '[&_li[data-item-type=task]]:-ml-6 [&_li[data-item-type=task]]:flex [&_li[data-item-type=task]]:list-none [&_li[data-item-type=task]]:items-start [&_li[data-item-type=task]]:gap-2', 
+                        // Highlighted words: the colour's wash, the text's own colour on it.
+                        '[&_mark]:rounded-sm [&_mark]:text-foreground [&_mark[data-color=amber]]:bg-highlight-amber [&_mark[data-color=yellow]]:bg-highlight-yellow [&_mark[data-color=green]]:bg-highlight-green [&_mark[data-color=red]]:bg-highlight-red', '[&_li[data-item-type=task]>input]:mt-1 [&_li[data-item-type=task]>input]:size-4 [&_li[data-item-type=task]>input]:accent-primary', 
                         // Headings, callouts and tables are drawn by their node views;
                         // these are the elements Milkdown draws itself.
                         '[&_a]:text-link [&_a]:underline [&_a]:decoration-link/40 [&_a]:underline-offset-4', '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground', '[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono', '[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:font-mono', '[&_hr]:my-2 [&_hr]:h-0.5 [&_hr]:rounded-full [&_hr]:border-0 [&_hr]:bg-rule', '[&_hr.ProseMirror-selectednode]:outline-2 [&_hr.ProseMirror-selectednode]:outline-offset-4 [&_hr.ProseMirror-selectednode]:outline-ring', 
@@ -832,7 +915,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         ];
                     }), slashOpen && slash && editorView && (_jsx(RichTextSlashMenu, { id: slashListId, view: editorView, at: slash.to, field: field, items: slashMatches, active: slashIndex, onHighlight: (index) => setSlashActive({ key: slashMenuKey, index }), onPick: (format) => applySlash(editorView, slash, format) })), 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))
+                            if (!editorView.dom.contains(next) && !inFloating(next))
                                 setFocused(false);
                         } }))] }), upload && (_jsx("p", { role: "status", className: "sr-only", children: uploading > 0 ? `Uploading ${uploading === 1 ? 'an image' : `${uploading} images`}…` : '' })), 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()}`

package/dist/components/app/rich-text-format-items.d.ts

@@ -11,6 +11,10 @@ export type FormatItem = {
     keys?: string;
     /** More for the tooltip than the shortcut. */
     hint?: string;
+    /** Does something rather than turns on and off: a plain button, never pressed. */
+    action?: boolean;
+    /** Only in a toolbar on a touch screen or a narrow one, where the keyboard has no Tab. */
+    touch?: boolean;
 };
 export declare const FORMAT_GROUPS: FormatItem[][];
 /** Every format by its id. */
@@ -20,5 +24,10 @@ export declare const FORMAT_ITEMS: Map<FormatId, FormatItem>;
  * callout". Not on the toolbar (its Callout makes a note).
  */
 export declare const CALLOUT_VARIANTS: FormatItem[];
+/**
+ * Highlight in each colour, for the slash menu: "Green highlight". Not on
+ * the toolbar (its Highlight is a menu of them).
+ */
+export declare const HIGHLIGHT_VARIANTS: FormatItem[];
 /** Notion's block keys: the digit after Ctrl+Shift (Cmd+Option on a Mac), and its format. */
 export declare const BLOCK_KEYS: Record<string, FormatId>;

package/dist/components/app/rich-text-format-items.js

@@ -7,15 +7,17 @@
 // blocks (Cmd+Option on a Mac, where Cmd+Shift+3 to 5 take screenshots),
 // written `Block+…` here; Mod+Shift+S strikes through. Milkdown's own
 // (Ctrl+Alt+1, Mod+Alt+X, Mod+Shift+B, …) still work.
-import { BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, Heading3Icon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, MinusIcon, SquareCodeIcon, StrikethroughIcon, TableIcon, TextQuoteIcon, } from 'lucide-react';
+import { BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, Heading3Icon, HighlighterIcon, IndentDecreaseIcon, IndentIncreaseIcon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, MinusIcon, SquareCodeIcon, StrikethroughIcon, TableIcon, TextQuoteIcon, } from 'lucide-react';
 import { CALLOUT_KINDS } from '../../lib/markdown-callout.js';
 import { CALLOUT_LOOK } from './prose-look.js';
+import { HIGHLIGHT_COLORS } from '../../lib/markdown-highlight.js';
 export const FORMAT_GROUPS = [
     [
         { id: 'bold', label: 'Bold', icon: BoldIcon, keys: 'Mod+B' },
         { id: 'italic', label: 'Italic', icon: ItalicIcon, keys: 'Mod+I' },
         { id: 'strike', label: 'Strikethrough', icon: StrikethroughIcon, keys: 'Mod+Shift+S' },
         { id: 'code', label: 'Code', icon: CodeIcon, keys: 'Mod+E' },
+        { id: 'highlight', label: 'Highlight', icon: HighlighterIcon },
     ],
     [
         { id: 'heading1', label: 'Heading 1', icon: Heading1Icon, keys: 'Block+1' },
@@ -26,6 +28,8 @@ export const FORMAT_GROUPS = [
         { id: 'tasks', label: 'Task list', icon: ListChecksIcon, keys: 'Block+4', hint: 'tick an item: Mod+Shift+Enter' },
         { id: 'bullets', label: 'Bulleted list', icon: ListIcon, keys: 'Block+5' },
         { id: 'numbers', label: 'Numbered list', icon: ListOrderedIcon, keys: 'Block+6' },
+        { id: 'outdent', label: 'Outdent', icon: IndentDecreaseIcon, hint: 'a list item, one level out', action: true, touch: true },
+        { id: 'indent', label: 'Indent', icon: IndentIncreaseIcon, hint: 'a list item, one level in', action: true, touch: true },
     ],
     [
         { id: 'quote', label: 'Quote', icon: TextQuoteIcon, keys: 'Mod+Shift+B' },
@@ -47,6 +51,15 @@ export const CALLOUT_VARIANTS = CALLOUT_KINDS.filter((kind) => kind !== 'note').
     label: `${CALLOUT_LOOK[kind].label} callout`,
     icon: CALLOUT_LOOK[kind].icon,
 }));
+/**
+ * Highlight in each colour, for the slash menu: "Green highlight". Not on
+ * the toolbar (its Highlight is a menu of them).
+ */
+export const HIGHLIGHT_VARIANTS = HIGHLIGHT_COLORS.map((color) => ({
+    id: `highlight-${color}`,
+    label: `${color[0].toUpperCase()}${color.slice(1)} highlight`,
+    icon: HighlighterIcon,
+}));
 /** Notion's block keys: the digit after Ctrl+Shift (Cmd+Option on a Mac), and its format. */
 export const BLOCK_KEYS = {
     '0': 'text',

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

@@ -1,12 +1,23 @@
 import { type Node as ProseNode, type Schema } from '@milkdown/kit/prose/model';
 import { type EditorState, type Transaction } from '@milkdown/kit/prose/state';
 import type { CalloutKind } from '../../lib/markdown-callout.js';
-export type FormatId = 'bold' | 'italic' | 'strike' | 'code' | 'text' | 'heading1' | 'heading2' | 'heading3' | 'bullets' | 'numbers' | 'tasks' | 'quote' | CalloutFormat | 'codeBlock' | 'divider' | 'table' | 'link';
+import { type HighlightColor } from '../../lib/markdown-highlight.js';
+export type FormatId = 'bold' | 'italic' | 'strike' | 'code' | 'highlight' | HighlightFormat | 'highlight-off' | 'indent' | 'outdent' | 'text' | 'heading1' | 'heading2' | 'heading3' | 'bullets' | 'numbers' | 'tasks' | 'quote' | CalloutFormat | 'codeBlock' | 'divider' | 'table' | 'link';
+/** Words highlighted in each colour. `highlight` is the toolbar's menu of them. */
+export type HighlightFormat = `highlight-${HighlightColor}`;
+/** The colour a highlight format puts on, or null when it isn't one. */
+export declare function highlightColorOf(id: FormatId): HighlightColor | null;
 /** A callout of each kind: `callout` is a note, the default. */
 export type CalloutFormat = 'callout' | `callout-${Exclude<CalloutKind, 'note'>}`;
 /** The kind of callout a format makes, or null when it isn't one. */
 export declare function calloutKindOf(id: FormatId): CalloutKind | null;
 type Dispatch = (tr: Transaction) => void;
+/**
+ * The colour of the highlight on the selection (the caret's own, or what
+ * is typed next, with nothing selected), or null when there is none or the
+ * words are highlighted in more than one.
+ */
+export declare function highlightColor(state: EditorState): HighlightColor | null;
 /** The table the caret is in, and its position, or null. */
 export declare function tableAt(state: EditorState): {
     node: ProseNode;

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

@@ -5,8 +5,14 @@
 // same as its keyboard shortcut.
 import { lift, setBlockType, toggleMark, wrapIn } from '@milkdown/kit/prose/commands';
 import { Fragment } from '@milkdown/kit/prose/model';
-import { liftListItem, wrapInList } from '@milkdown/kit/prose/schema-list';
+import { liftListItem, sinkListItem, wrapInList } from '@milkdown/kit/prose/schema-list';
 import { TextSelection } from '@milkdown/kit/prose/state';
+import { HIGHLIGHT_COLORS } from '../../lib/markdown-highlight.js';
+/** The colour a highlight format puts on, or null when it isn't one. */
+export function highlightColorOf(id) {
+    const color = id.startsWith('highlight-') ? id.slice('highlight-'.length) : null;
+    return HIGHLIGHT_COLORS.find((one) => one === color) ?? null;
+}
 /** The kind of callout a format makes, or null when it isn't one. */
 export function calloutKindOf(id) {
     if (id === 'callout')
@@ -21,6 +27,46 @@ const MARKS = {
     code: 'inlineCode',
     link: 'link',
 };
+/**
+ * The colour of the highlight on the selection (the caret's own, or what
+ * is typed next, with nothing selected), or null when there is none or the
+ * words are highlighted in more than one.
+ */
+export function highlightColor(state) {
+    const type = state.schema.marks.highlight;
+    if (!type)
+        return null;
+    const { from, to, empty, $from } = state.selection;
+    const colors = new Set();
+    if (empty)
+        colors.add(type.isInSet(state.storedMarks ?? $from.marks())?.attrs.color ?? null);
+    else
+        state.doc.nodesBetween(from, to, (node) => {
+            if (node.isInline)
+                colors.add(type.isInSet(node.marks)?.attrs.color ?? null);
+        });
+    if (colors.size !== 1)
+        return null;
+    const [only] = [...colors];
+    return HIGHLIGHT_COLORS.find((color) => color === only) ?? null;
+}
+// Highlights the selection in `color` (what was highlighted before, in any
+// colour, replaced), or takes the highlight off with null. With nothing
+// selected it is what is typed next.
+function setHighlight(state, dispatch, color) {
+    const type = state.schema.marks.highlight;
+    if (!type)
+        return false;
+    const { from, to, empty } = state.selection;
+    if (empty) {
+        const tr = state.tr.removeStoredMark(type);
+        dispatch(color ? tr.addStoredMark(type.create({ color })) : tr);
+        return true;
+    }
+    const tr = state.tr.removeMark(from, to, type);
+    dispatch(color ? tr.addMark(from, to, type.create({ color })) : tr);
+    return true;
+}
 function markOn(state, type) {
     const { from, to, empty, $from } = state.selection;
     if (empty)
@@ -52,6 +98,11 @@ export function formatOn(state, id) {
     const level = HEADING_LEVEL[id];
     if (level)
         return parent.type.name === 'heading' && parent.attrs.level === level;
+    if (id === 'highlight')
+        return highlightColor(state) !== null;
+    const color = highlightColorOf(id);
+    if (color)
+        return highlightColor(state) === color;
     const kind = calloutKindOf(id);
     if (kind)
         return ancestor(state, (node) => node.type.name === 'callout')?.node.attrs.kind === kind;
@@ -59,6 +110,9 @@ export function formatOn(state, id) {
         case 'text':
             return parent.type.name === 'paragraph' && !ancestor(state, (node) => isList(node) || node.type.name === 'blockquote');
         case 'divider':
+        case 'indent':
+        case 'outdent':
+        case 'highlight-off':
             return false;
         case 'table':
             return tableAt(state) !== null;
@@ -113,6 +167,15 @@ export function toggleFormat(state, dispatch, id) {
     const mark = MARKS[id];
     if (mark && id !== 'link')
         return toggleMark(schema.marks[mark])(state, dispatch);
+    const color = highlightColorOf(id);
+    if (color)
+        return setHighlight(state, dispatch, formatOn(state, id) ? null : color);
+    if (id === 'highlight-off')
+        return setHighlight(state, dispatch, null);
+    if (id === 'indent')
+        return sinkListItem(schema.nodes.list_item)(state, dispatch);
+    if (id === 'outdent')
+        return liftListItem(schema.nodes.list_item)(state, dispatch);
     const on = formatOn(state, id);
     const paragraph = schema.nodes.paragraph;
     const level = HEADING_LEVEL[id];

package/dist/components/app/rich-text-highlight-menu.d.ts

@@ -0,0 +1,18 @@
+import { type KeyboardEvent, type Ref } from 'react';
+import type { EditorState } from '@milkdown/kit/prose/state';
+import { type FormatId } from './rich-text-formats.js';
+export interface RichTextHighlightMenuProps {
+    state: EditorState | null;
+    readOnly: boolean;
+    /** The toolbar's roving tab stop: 0 for the one Tab reaches. */
+    tabIndex: number;
+    onFocus: () => void;
+    /** The toolbar's arrow keys. */
+    onKeyDown: (event: KeyboardEvent) => void;
+    /** A colour, or Remove highlight, picked. */
+    onFormat: (id: FormatId) => void;
+    /** The editable element, where focus goes once an item is picked. */
+    text: () => HTMLElement | null;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function RichTextHighlightMenu({ state, readOnly, tabIndex, onFocus, onKeyDown, onFormat, text, ref }: RichTextHighlightMenuProps): import("react").JSX.Element;

package/dist/components/app/rich-text-highlight-menu.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The toolbars' Highlight menu: the four colours (amber, yellow, green,
+// red) to put on the selected words, or on what is typed next, and "Remove
+// highlight". A menu button in the toolbar's row, moved to with the arrow
+// keys like the rest; the menu is Base UI's (ARIA's menu pattern), the
+// colour on the words its checked item. Picking gives focus back to the
+// text, the selection kept. The popup is marked `data-rich-text-menu` so
+// the floating toolbar, which this menu also sits in, knows focus in it is
+// still the field's (milkdown-editor.tsx).
+import { useRef } from 'react';
+import { ChevronDownIcon, HighlighterIcon, RemoveFormattingIcon } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
+import { toggleVariants } from '../ui/toggle.js';
+import { HIGHLIGHT_COLORS } from '../../lib/markdown-highlight.js';
+import { highlightColor } from './rich-text-formats.js';
+const SWATCH = {
+    amber: 'bg-highlight-amber',
+    yellow: 'bg-highlight-yellow',
+    green: 'bg-highlight-green',
+    red: 'bg-highlight-red',
+};
+export function RichTextHighlightMenu({ state, readOnly, tabIndex, onFocus, onKeyDown, onFormat, text, ref }) {
+    const current = state ? highlightColor(state) : null;
+    // Whether the menu is closing because an item was picked.
+    const picked = useRef(false);
+    const run = (id) => {
+        picked.current = true;
+        onFormat(id);
+    };
+    const finalFocus = () => {
+        const toText = picked.current;
+        picked.current = false;
+        return toText ? (text() ?? true) : true;
+    };
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { ref: ref, "aria-label": "Highlight", disabled: readOnly, tabIndex: tabIndex, "data-active": current !== null || undefined, 
+                // Shaped like the toolbar's toggles: on while the words are highlighted.
+                className: toggleVariants({ size: 'sm', className: 'gap-0.5 px-1.5 data-active:bg-muted data-active:text-foreground' }), 
+                // A mouse press keeps focus, and the selection, in the text.
+                onMouseDown: (event) => event.preventDefault(), onFocus: onFocus, onKeyDown: onKeyDown, children: [_jsx(HighlighterIcon, { "aria-hidden": "true" }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-3" })] }), _jsxs(DropdownMenuContent, { className: "w-44", "data-rich-text-menu": "", finalFocus: finalFocus, children: [_jsx(DropdownMenuRadioGroup, { value: current, onValueChange: (value) => {
+                            if (HIGHLIGHT_COLORS.includes(value))
+                                run(`highlight-${value}`);
+                        }, children: HIGHLIGHT_COLORS.map((color) => (_jsxs(DropdownMenuRadioItem, { value: color, closeOnClick: true, children: [_jsx("span", { "aria-hidden": "true", className: `size-4 shrink-0 rounded-sm border border-foreground/30 ${SWATCH[color]}` }), color[0].toUpperCase() + color.slice(1)] }, color))) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: current === null, onClick: () => run('highlight-off'), children: [_jsx(RemoveFormattingIcon, { "aria-hidden": "true" }), "Remove highlight"] })] })] }));
+}

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

@@ -8,7 +8,7 @@
 // `/usr/bin`) never does, and neither does a "/" mid-line or inside a
 // list, a quote or a code block.
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
-import { CALLOUT_VARIANTS, FORMAT_GROUPS } from './rich-text-format-items.js';
+import { CALLOUT_VARIANTS, FORMAT_GROUPS, HIGHLIGHT_VARIANTS } from './rich-text-format-items.js';
 import { toggleFormat } from './rich-text-formats.js';
 const slashKey = new PluginKey('rich-text-slash');
 // Longer than any item's name: past it, the person is writing, not picking.
@@ -94,19 +94,24 @@ const KEYWORDS = {
     codeBlock: ['pre'],
     divider: ['hr', 'rule', 'line', 'separator', '---'],
     table: ['grid', 'columns'],
+    'highlight-amber': ['highlight', 'mark', 'marker', 'colour', 'color'],
+    'highlight-yellow': ['highlight', 'mark', 'marker', 'colour', 'color'],
+    'highlight-green': ['highlight', 'mark', 'marker', 'colour', 'color'],
+    'highlight-red': ['highlight', 'mark', 'marker', 'colour', 'color'],
 };
 // The menu's items: the blocks, in the toolbar's order. The kinds of
-// callout past the default only once something's typed ("/warn"), so
+// callout past the default, and the highlights, only once something's
+// typed ("/warn"), so
 // the list "/" opens with stays short.
 const BLOCKS = FORMAT_GROUPS.flat().filter((item) => KEYWORDS[item.id]);
-const TYPED_ONLY = CALLOUT_VARIANTS;
 /** The blocks matching what's typed after the "/": in the name, or the start of a keyword. */
 export function slashItems(query) {
     const typed = query.trim().toLowerCase();
     if (!typed)
         return BLOCKS;
     const blocks = [...BLOCKS];
-    blocks.splice(BLOCKS.findIndex((item) => item.id === 'callout') + 1, 0, ...TYPED_ONLY);
+    blocks.splice(BLOCKS.findIndex((item) => item.id === 'callout') + 1, 0, ...CALLOUT_VARIANTS);
+    blocks.push(...HIGHLIGHT_VARIANTS);
     return blocks.filter((item) => item.label.toLowerCase().includes(typed) || KEYWORDS[item.id].some((word) => word.startsWith(typed)));
 }
 /**
@@ -122,6 +127,9 @@ export function applySlash(view, span, id) {
         for (const step of done.steps)
             tr.step(step);
         tr.setSelection(done.selection.getBookmark().resolve(tr.doc));
+        // A highlight picked here is for what is typed next.
+        if (done.storedMarks)
+            tr.setStoredMarks(done.storedMarks);
     }
     view.dispatch(tr.scrollIntoView());
 }

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

@@ -19,10 +19,14 @@ export type FormatButtonsProps = {
     onTable?: (action: TableAction) => void;
     /** The Image button pressed: pick images to upload. No button without it. */
     onImage?: () => void;
+    /** The Full screen button pressed. No button without it. */
+    onFullScreen?: () => void;
+    /** Whether the editor is full screen now (the button's state). */
+    fullScreen?: boolean;
     /** The editable element, for the Table menu to give focus back to. */
     text?: () => HTMLElement | null;
 };
-export declare function FormatButtons({ formats, state, readOnly, onFormat, onTable, onImage, text }: FormatButtonsProps): import("react").JSX.Element;
+export declare function FormatButtons({ formats, state, readOnly, onFormat, onTable, onImage, onFullScreen, fullScreen, text }: 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;
@@ -35,10 +39,14 @@ export interface RichTextToolbarProps {
     onTable: (action: TableAction) => void;
     /** The Image button pressed (only when the editor uploads images). */
     onImage?: () => void;
+    /** The Full screen button pressed. No button without it. */
+    onFullScreen?: () => void;
+    /** Whether the editor is full screen now. */
+    fullScreen?: boolean;
     /** The editable element, for the Table menu to give focus back to. */
     text: () => HTMLElement | null;
     /** The toolbar's element, for Alt+F10 to reach it from the text. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, onFullScreen, fullScreen, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
 export {};

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

@@ -14,8 +14,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // - 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 { Fragment, useRef, useState } from 'react';
-import { ImageIcon } from 'lucide-react';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { ImageIcon, Maximize2Icon, Minimize2Icon } from 'lucide-react';
 import { Button } from '../ui/button.js';
 import { Separator } from '../ui/separator.js';
 import { Toggle } from '../ui/toggle.js';
@@ -23,24 +23,41 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/
 import { FORMAT_GROUPS, FORMAT_ITEMS } from './rich-text-format-items.js';
 import { formatOn } from './rich-text-formats.js';
 import { ariaKeys, isApple, shownKeys } from './rich-text-shortcuts.js';
+import { RichTextHighlightMenu } from './rich-text-highlight-menu.js';
 import { RichTextTableMenu } from './rich-text-table-menu.js';
 // Which buttons a toolbar has: every format (the fixed one), or the ones
 // that apply to selected words (the floating one).
-const SELECTION = ['bold', 'italic', 'strike', 'code', 'link'];
+const SELECTION = ['bold', 'italic', 'strike', 'code', 'highlight', 'link'];
 const SETS = {
     all: FORMAT_GROUPS,
-    selection: [SELECTION.slice(0, 4), SELECTION.slice(4)].map((ids) => ids.map((id) => FORMAT_ITEMS.get(id))),
+    selection: [SELECTION.slice(0, 5), SELECTION.slice(5)].map((ids) => ids.map((id) => FORMAT_ITEMS.get(id))),
 };
+// A touch screen or a narrow one: where the keyboard has no Tab, so the
+// toolbar carries Indent and Outdent for list items.
+const COMPACT = '(pointer: coarse), (max-width: 767px)';
+function useCompact() {
+    const [compact, setCompact] = useState(() => typeof window !== 'undefined' && window.matchMedia(COMPACT).matches);
+    useEffect(() => {
+        const query = window.matchMedia(COMPACT);
+        const update = () => setCompact(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return compact;
+}
 // 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, onTable, onImage, text = () => null }) {
+export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onImage, onFullScreen, fullScreen = false, text = () => null }) {
     const apple = isApple();
-    const groups = SETS[formats];
+    const compact = useCompact();
+    const groups = SETS[formats].map((group) => group.filter((item) => compact || !item.touch)).filter((group) => group.length > 0);
     const items = groups.flat();
-    // The Image button, last in the row, after the formats.
+    // The Image and Full screen buttons, last in the row, after the formats.
     const imageIndex = onImage ? items.length : -1;
-    const count = items.length + (onImage ? 1 : 0);
+    const fullScreenIndex = onFullScreen ? items.length + (onImage ? 1 : 0) : -1;
+    const count = items.length + (onImage ? 1 : 0) + (onFullScreen ? 1 : 0);
     const buttons = useRef([]);
     // The one button Tab reaches: the last one used.
     const [current, setCurrent] = useState(0);
@@ -68,6 +85,10 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
                             return (_jsx(RichTextTableMenu, { ref: (element) => {
                                     buttons.current[index] = element;
                                 }, state: state, readOnly: readOnly, tabIndex: index === current ? 0 : -1, onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onInsert: () => onFormat('table'), onAction: (action) => onTable?.(action), text: text }, item.id));
+                        if (item.id === 'highlight')
+                            return (_jsx(RichTextHighlightMenu, { ref: (element) => {
+                                    buttons.current[index] = element;
+                                }, state: state, readOnly: readOnly, tabIndex: index === current ? 0 : -1, onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onFormat: onFormat, text: text }, item.id));
                         const Icon = item.icon;
                         const tip = [
                             item.label,
@@ -76,6 +97,10 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
                         ]
                             .filter(Boolean)
                             .join(' ');
+                        if (item.action)
+                            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { ref: (element) => {
+                                                buttons.current[index] = element;
+                                            }, variant: "ghost", size: "icon-sm", "aria-label": item.label, disabled: readOnly, tabIndex: index === current ? 0 : -1, onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onClick: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
                         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", 
@@ -83,8 +108,10 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
                                         onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
                     })] }, groupIndex))), onImage && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { ref: (element) => {
                                         buttons.current[imageIndex] = element;
-                                    }, variant: "ghost", size: "icon-sm", "aria-label": "Image", disabled: readOnly, tabIndex: imageIndex === current ? 0 : -1, onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(imageIndex), onKeyDown: onKeyDown, onClick: onImage }), children: _jsx(ImageIcon, {}) }), _jsx(TooltipContent, { children: "Image \u00B7 or paste or drop one" })] })] }))] }));
+                                    }, variant: "ghost", size: "icon-sm", "aria-label": "Image", disabled: readOnly, tabIndex: imageIndex === current ? 0 : -1, onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(imageIndex), onKeyDown: onKeyDown, onClick: onImage }), children: _jsx(ImageIcon, {}) }), _jsx(TooltipContent, { children: "Image \u00B7 or paste or drop one" })] })] })), onFullScreen && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Toggle, { ref: (element) => {
+                                        buttons.current[fullScreenIndex] = element;
+                                    }, size: "icon-sm", "aria-label": "Full screen", pressed: fullScreen, tabIndex: fullScreenIndex === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(fullScreenIndex), onKeyDown: onKeyDown, onPressedChange: onFullScreen }), children: fullScreen ? _jsx(Minimize2Icon, {}) : _jsx(Maximize2Icon, {}) }), _jsx(TooltipContent, { children: fullScreen ? 'Leave full screen · Esc' : 'Full screen' })] })] }))] }));
 }
-export function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, text, 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, onTable: onTable, onImage: onImage, text: text }) }));
+export function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, onFullScreen, fullScreen, text, 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, onTable: onTable, onImage: onImage, onFullScreen: onFullScreen, fullScreen: fullScreen, text: text }) }));
 }

package/dist/lib/markdown-highlight.d.ts

@@ -0,0 +1,26 @@
+export declare const HIGHLIGHT_COLORS: readonly ["amber", "yellow", "green", "red"];
+export type HighlightColor = (typeof HIGHLIGHT_COLORS)[number];
+export declare const DEFAULT_HIGHLIGHT: HighlightColor;
+export declare function isHighlightColor(value: unknown): value is HighlightColor;
+type MdNode = {
+    type: string;
+    children?: MdNode[];
+    value?: string;
+    data?: Record<string, unknown>;
+    [key: string]: unknown;
+};
+/** For react-markdown: highlighted words become `<mark data-color="amber">`. */
+export declare function remarkHighlights(): (tree: unknown) => void;
+/** For the rich-text editor: highlighted words become `highlight` nodes (`color`), which its mark schema reads and `highlightHandler` writes. */
+export declare function remarkHighlightNodes(): (tree: unknown) => void;
+type ToMarkdownState = {
+    enter: (name: string) => () => void;
+    createTracker: (info: unknown) => {
+        move: (value: string) => string;
+        current: () => unknown;
+    };
+    containerPhrasing: (node: MdNode, info: unknown) => string;
+};
+/** Writes a `highlight` node as `==words==`, `=={green}words==` for any colour but the default. */
+export declare function highlightHandler(node: MdNode, _parent: unknown, state: ToMarkdownState, info: unknown): string;
+export {};

package/dist/lib/markdown-highlight.js

@@ -0,0 +1,137 @@
+// Highlighted words in Markdown: `==words==`, the syntax Obsidian and
+// others share, with the colour in braces after the opening marks for any
+// but the default amber.
+//
+//   ==amber, the default==  =={yellow}yellow==  =={green}green==  =={red}red==
+//
+// It's plain text where nothing reads it (the marks show), and no HTML:
+// <Markdown> never renders raw HTML, and the editor never writes any.
+// remark has no highlight, so these plugins read the marks from the text
+// nodes of a parsed document: `remarkHighlights` for <Markdown> (a `mark`
+// element with `data-color`) and `remarkHighlightNodes` for the rich-text
+// editor (a `highlight` node it has a mark schema for, written back with
+// `highlightHandler`). The merge (markdown-merge.ts) needs neither: to it
+// the marks are text.
+//
+// Marks pair within one parent (a paragraph, a heading, a link's text),
+// so words can wrap bold or a link but never run across a block. An opening
+// `==` is followed by a non-space, a closing one preceded by one; a lone
+// `==` stays text.
+export const HIGHLIGHT_COLORS = ['amber', 'yellow', 'green', 'red'];
+export const DEFAULT_HIGHLIGHT = 'amber';
+export function isHighlightColor(value) {
+    return HIGHLIGHT_COLORS.includes(value);
+}
+// An opening mark (with its colour, if any) or a closing one.
+const MARK = new RegExp(`==(?:[{](${HIGHLIGHT_COLORS.join('|')})[}])?`, 'g');
+// A text node cut at its marks.
+function cut(value) {
+    const pieces = [];
+    let last = 0;
+    for (const found of value.matchAll(MARK)) {
+        const at = found.index;
+        if (at > last)
+            pieces.push({ text: value.slice(last, at) });
+        pieces.push({ mark: true, color: found[1] ?? null, start: at, end: at + found[0].length, source: found[0] });
+        last = at + found[0].length;
+    }
+    if (last < value.length)
+        pieces.push({ text: value.slice(last) });
+    return pieces;
+}
+/** The children with their `==` pairs wrapped in `wrap(color, children)`; the same array when there's none. */
+function wrapMarks(children, wrap) {
+    if (!children.some((child) => child.type === 'text' && typeof child.value === 'string' && child.value.includes('==')))
+        return children;
+    // Flat tokens: nodes, and marks with the text around them.
+    const tokens = [];
+    children.forEach((child, childIndex) => {
+        if (child.type !== 'text' || typeof child.value !== 'string' || !child.value.includes('==')) {
+            tokens.push({ node: child });
+            return;
+        }
+        const pieces = cut(child.value);
+        pieces.forEach((piece, index) => {
+            if ('text' in piece) {
+                tokens.push({ node: { type: 'text', value: piece.text } });
+            }
+            else {
+                const prev = pieces[index - 1];
+                const next = pieces[index + 1];
+                tokens.push({
+                    mark: piece,
+                    before: prev ? ('text' in prev ? prev.text.slice(-1) : 'x') : childIndex === 0 ? ' ' : 'x',
+                    after: next ? ('text' in next ? next.text.slice(0, 1) : 'x') : childIndex === children.length - 1 ? ' ' : 'x',
+                });
+            }
+        });
+    });
+    const out = [];
+    let open = null;
+    const text = (value) => ({ type: 'text', value });
+    const isMark = (token) => 'mark' in token;
+    for (const token of tokens) {
+        if (!isMark(token)) {
+            out.push(token.node);
+            continue;
+        }
+        const space = (character) => /\s/.test(character);
+        if (open && token.mark.color === null && !space(token.before) && out.length > open.at + 1) {
+            const inner = out.splice(open.at + 1);
+            out[open.at] = wrap(open.color, inner);
+            open = null;
+        }
+        else if (!open && !space(token.after)) {
+            open = { color: token.mark.color ?? DEFAULT_HIGHLIGHT, at: out.length, source: token.mark.source };
+            out.push(text(token.mark.source));
+        }
+        else {
+            out.push(text(token.mark.source));
+        }
+    }
+    return merge(out);
+}
+// Neighbouring text nodes joined, so unpaired marks leave the text as it was.
+function merge(nodes) {
+    const out = [];
+    for (const node of nodes) {
+        const last = out[out.length - 1];
+        if (last && last.type === 'text' && node.type === 'text')
+            out[out.length - 1] = { type: 'text', value: String(last.value) + String(node.value) };
+        else
+            out.push(node);
+    }
+    return out;
+}
+function visit(node, wrap) {
+    if (!node.children)
+        return;
+    for (const child of node.children)
+        visit(child, wrap);
+    if (node.type === 'code' || node.type === 'inlineCode')
+        return;
+    node.children = wrapMarks(node.children, wrap);
+}
+/** For react-markdown: highlighted words become `<mark data-color="amber">`. */
+export function remarkHighlights() {
+    return (tree) => visit(tree, (color, children) => ({
+        type: 'highlight',
+        children,
+        data: { hName: 'mark', hProperties: { dataColor: color } },
+    }));
+}
+/** For the rich-text editor: highlighted words become `highlight` nodes (`color`), which its mark schema reads and `highlightHandler` writes. */
+export function remarkHighlightNodes() {
+    return (tree) => visit(tree, (color, children) => ({ type: 'highlight', color, children }));
+}
+/** Writes a `highlight` node as `==words==`, `=={green}words==` for any colour but the default. */
+export function highlightHandler(node, _parent, state, info) {
+    const exit = state.enter('highlight');
+    const tracker = state.createTracker(info);
+    const color = isHighlightColor(node.color) ? node.color : DEFAULT_HIGHLIGHT;
+    let value = tracker.move(color === DEFAULT_HIGHLIGHT ? '==' : `=={${color}}`);
+    value += tracker.move(state.containerPhrasing(node, { before: value, after: '=', ...tracker.current() }));
+    value += tracker.move('==');
+    exit();
+    return value;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.47.2",
+  "version": "4.49.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": {

package/styles/index.css

@@ -54,6 +54,10 @@
     --color-info-foreground: var(--info-foreground);
     --color-info-text: var(--info-text);
     --color-link: var(--link);
+    --color-highlight-amber: var(--highlight-amber);
+    --color-highlight-yellow: var(--highlight-yellow);
+    --color-highlight-green: var(--highlight-green);
+    --color-highlight-red: var(--highlight-red);
     --color-rule: var(--rule);
     --color-heading-band: var(--heading-band);
     --color-heading-bar: var(--heading-bar);

package/styles/theme.css

@@ -209,6 +209,13 @@
   /* A link in written text: coloured as well as underlined, so it reads
      as a link at a glance (on white: 5.59). */
   --link: var(--blue-700);
+  /* Highlighted words in written text (the notes editor's highlight, four
+     colours): a wash behind words that keep --foreground. Light washes,
+     text on each measures 11 or more. */
+  --highlight-amber: oklch(0.9 0.1 75);
+  --highlight-yellow: oklch(0.94 0.13 100);
+  --highlight-green: oklch(0.9 0.1 150);
+  --highlight-red: oklch(0.89 0.07 25);
   /* A thematic break (`---`) in written text: a 2px line meant to be
      seen, stronger than --border's hairline (on white: 2.59). */
   --rule: var(--gray-400);
@@ -358,6 +365,11 @@
   --warning-text: var(--amber-400);
   --info-text: var(--blue-400);
   --link: var(--blue-400); /* on near-black: 8.90 */
+  /* Highlighted words: deep washes, --foreground on each measures 7 or more. */
+  --highlight-amber: oklch(0.42 0.09 75);
+  --highlight-yellow: oklch(0.44 0.09 100);
+  --highlight-green: oklch(0.4 0.08 150);
+  --highlight-red: oklch(0.4 0.1 25);
   --rule: var(--gray-600); /* on near-black: 2.54 */
   /* Stronger is lighter on the dark page: halfway from --muted to gray-700. */
   --heading-band: color-mix(in oklab, var(--gray-900), var(--gray-700));