@tristan2828/ui-foundation 4.49.0 → 4.50.1

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–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
+- [18. Editable value](#18-editable-value) · lines 762–1218
+  - [A list of sub-items](#a-list-of-sub-items) · lines 1034–1119
+  - [In a table's rows](#in-a-tables-rows) · lines 1121–1206
+  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1208–1218
+- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1220–1286
+- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1288–1352
+- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1354–1422
+- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1424–1452
+- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1454–1528
 
 <!-- /index -->
 
@@ -1010,7 +1010,9 @@ const price = editInPlace({
   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
+  and Outdent for list items, where there is no Tab. A field with only the
+  floating toolbar (`inline` notes) gets the same two in a small "Editor
+  tools" strip over its corner while it has focus. 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

package/dist/components/app/board.js

@@ -76,7 +76,7 @@ export function Board({ 'aria-label': ariaLabel, columns, items, getId, getColum
         return (_jsx("div", { "data-slot": "board", "data-state": "error", children: _jsx(ErrorState, { error: error, onRetry: onRetry }) }));
     }
     if (isLoading) {
-        return (_jsx("div", { "data-slot": "board", "data-state": "loading", role: "group", "aria-busy": "true", "aria-label": ariaLabel, className: "flex gap-3 overflow-x-auto pb-2", children: columns.map((column) => (_jsxs("div", { className: cn('flex flex-col gap-2 rounded-lg bg-muted p-2', COLUMN_WIDTH), children: [_jsx(Skeleton, { className: "h-5 w-24" }), _jsx(Skeleton, { className: "h-20 w-full" }), _jsx(Skeleton, { className: "h-20 w-full" })] }, column.value))) }));
+        return (_jsx("div", { "data-slot": "board", "data-state": "loading", role: "group", "aria-busy": "true", "aria-label": ariaLabel, className: "flex gap-3 overflow-x-auto pb-2", children: columns.map((column) => (_jsxs("div", { className: cn('flex flex-col gap-2 rounded-lg bg-muted p-2 [--muted-foreground:var(--table-highlight-muted-foreground)]', COLUMN_WIDTH), children: [_jsx(Skeleton, { className: "h-5 w-24" }), _jsx(Skeleton, { className: "h-20 w-full" }), _jsx(Skeleton, { className: "h-20 w-full" })] }, column.value))) }));
     }
     const shown = items.filter((item) => columns.some((column) => column.value === getColumn(item)));
     if (shown.length === 0) {
@@ -109,7 +109,7 @@ function BoardColumnView({ column, count, headingLevel, onDrop, children, }) {
     const headingId = useId();
     const Heading = `h${headingLevel}`;
     const accepts = (event) => onDrop !== undefined && event.dataTransfer.types.includes(DRAG_TYPE);
-    return (_jsxs("section", { "aria-labelledby": headingId, "data-slot": "board-column", "data-over": over || undefined, className: cn('flex snap-start flex-col gap-2 rounded-lg bg-muted p-2 outline-2 outline-offset-2 outline-transparent data-over:outline-ring', COLUMN_WIDTH), onDragOver: (event) => {
+    return (_jsxs("section", { "aria-labelledby": headingId, "data-slot": "board-column", "data-over": over || undefined, className: cn('flex snap-start flex-col gap-2 rounded-lg bg-muted p-2 [--muted-foreground:var(--table-highlight-muted-foreground)] outline-2 outline-offset-2 outline-transparent data-over:outline-ring', COLUMN_WIDTH), onDragOver: (event) => {
             if (!accepts(event))
                 return;
             event.preventDefault();

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

@@ -82,6 +82,7 @@ import { addRowAtEnd, handleTableKey, runTableAction } from './rich-text-table.j
 import { applySlash, closeSlash, slashItems, slashOptionId, slashPlugin, slashQuery, } from './rich-text-slash.js';
 import { RichTextSlashMenu } from './rich-text-slash-menu.js';
 import { RichTextToolbar } from './rich-text-toolbar.js';
+import { RichTextToolsBar } from './rich-text-tools-bar.js';
 import { CalloutKindMenu, TableBar } from './rich-text-widgets.js';
 // The commonmark preset, minus the plugin that writes `<br />`. A $remark
 // plugin is a pair (its options and the plugin), spread into `plugins`.
@@ -311,6 +312,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     const [dismissed, setDismissed] = useState(null);
     const toolbarRef = useRef(null);
     const floatingRef = useRef(null);
+    const toolsRef = 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).
@@ -332,7 +334,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     });
     // 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]')));
+    const inFloating = (node) => Boolean(floatingRef.current?.contains(node) || toolsRef.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);
@@ -580,7 +582,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                     // 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 bar = floatingOpenRef.current ? floatingRef.current : (toolbarRef.current ?? toolsRef.current);
                         const button = bar?.querySelector('button[tabindex="0"]');
                         if (!button)
                             return false;
@@ -842,6 +844,8 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         floatingOpenRef.current = floatingOpen;
     });
     const returnToText = () => editorView?.focus();
+    // The tools strip of a field with only the floating toolbar.
+    const toolsOpen = Boolean(toolbar === 'floating' && editorView && (focused || fullScreen));
     const toggleFullScreen = () => {
         setFullScreen((on) => !on);
         editorView?.focus();
@@ -913,7 +917,11 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                             createPortal(_jsx(TableBar, { side: "row", active: active, readOnly: readOnly, onAdd: () => addToTable(widget.getPos, 'row') }), widget.slot, `${widget.key}-row`),
                             createPortal(_jsx(TableBar, { side: "column", active: active, readOnly: readOnly, onAdd: () => addToTable(widget.getPos, 'column') }), widget.column, `${widget.key}-column`),
                         ];
-                    }), 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) => {
+                    }), 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) })), toolsOpen && (_jsx(RichTextToolsBar, { ref: toolsRef, state: editorState, readOnly: readOnly, fullScreen: fullScreen, controls: editableId, onFormat: runFormat, onFullScreen: toggleFullScreen, onReturn: returnToText, onBlur: (event) => {
+                            const next = event.relatedTarget;
+                            if (editorView && !editorView.dom.contains(next) && !inFloating(next))
+                                setFocused(false);
+                        } })), 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) && !inFloating(next))
                                 setFocused(false);

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

@@ -5,6 +5,7 @@ import { type FormatId } from './rich-text-formats.js';
 import type { TableAction } from './rich-text-table.js';
 declare const SETS: {
     all: FormatItem[][];
+    tools: FormatItem[][];
     selection: FormatItem[][];
 };
 export type FormatButtonsProps = {

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

@@ -30,6 +30,8 @@ import { RichTextTableMenu } from './rich-text-table-menu.js';
 const SELECTION = ['bold', 'italic', 'strike', 'code', 'highlight', 'link'];
 const SETS = {
     all: FORMAT_GROUPS,
+    // Outdent and Indent, for a field with no bar above the text (rich-text-tools-bar.tsx).
+    tools: [[FORMAT_ITEMS.get('outdent'), FORMAT_ITEMS.get('indent')]],
     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

package/dist/components/app/rich-text-tools-bar.d.ts

@@ -0,0 +1,18 @@
+import type { FocusEvent, Ref } from 'react';
+import type { EditorState } from '@milkdown/kit/prose/state';
+import type { FormatId } from './rich-text-formats.js';
+export interface RichTextToolsBarProps {
+    state: EditorState | null;
+    readOnly: boolean;
+    fullScreen: boolean;
+    /** The editable element's id, for `aria-controls`. */
+    controls: string;
+    onFormat: (id: FormatId) => void;
+    onFullScreen: () => void;
+    /** Esc: 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;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function RichTextToolsBar({ state, readOnly, fullScreen, controls, onFormat, onFullScreen, onReturn, onBlur, ref }: RichTextToolsBarProps): import("react").JSX.Element;

package/dist/components/app/rich-text-tools-bar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from 'cn';
+import { FormatButtons } from './rich-text-toolbar.js';
+export function RichTextToolsBar({ state, readOnly, fullScreen, controls, onFormat, onFullScreen, onReturn, onBlur, ref }) {
+    const onKeyDown = (event) => {
+        // Full screen's Esc is the field's (milkdown-editor.tsx); otherwise it
+        // gives focus back to the text.
+        if (event.key === 'Escape' && !fullScreen) {
+            event.preventDefault();
+            event.stopPropagation();
+            onReturn();
+        }
+    };
+    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Editor tools", "aria-controls": controls, "data-slot": "rich-text-tools-bar", className: cn('absolute right-0 z-40 flex items-center gap-0.5 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10', 
+        // Above the field, or inside its corner once it fills the window.
+        fullScreen ? 'top-2 right-2' : 'bottom-full mb-1'), onKeyDown: onKeyDown, onBlur: onBlur, children: _jsx(FormatButtons, { formats: "tools", state: state, readOnly: readOnly, onFormat: onFormat, onFullScreen: onFullScreen, fullScreen: fullScreen }) }));
+}

package/package.json

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