@tristan2828/ui-foundation 4.61.0 → 4.62.0

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

@@ -0,0 +1,28 @@
+import { type HighlightColor } from './markdown-highlight.js';
+/** A run of a cell's text, with the highlight and bold it's in. */
+export type CellRun = {
+    text: string;
+    color: HighlightColor | null;
+    bold: boolean;
+};
+/** The cell's colour: every run with words in it highlighted, all in one colour. */
+export declare function cellColor(runs: readonly CellRun[]): HighlightColor | null;
+/** Whether a cell's words are all bold (and it has some). */
+export declare function cellBold(runs: readonly CellRun[]): boolean;
+/** Whether a table's first column is row headers: its body rows' first cells with words, all bold. */
+export declare function isHeaderColumn(firstCells: readonly (readonly CellRun[])[]): boolean;
+type HastNode = {
+    type: string;
+    tagName?: string;
+    value?: string;
+    properties?: Record<string, unknown>;
+    children?: HastNode[];
+};
+/**
+ * For <Markdown>: marks each table's coloured cells (`data-color`), and
+ * makes a header column's first cells row headers (`<th scope="row">`).
+ */
+export declare function rehypeTables(): (tree: HastNode) => void;
+/** Sorts cell texts as a person would: numbers by value ($4.99 before $12), then words, empty last. */
+export declare function compareCells(a: string, b: string): number;
+export {};

package/dist/lib/markdown-table.js

@@ -0,0 +1,106 @@
+// What a GFM table holds beyond its cells, read from the Markdown it
+// already has, so nothing new is written into the text (the developer's
+// choice A, 2026-11-04):
+//
+// - A column's alignment: GFM's own (`:---:`, `---:`).
+// - A cell's colour: its whole text in one highlight, `=={green}$4.99==`
+//   (src/lib/markdown-highlight.ts), paints the cell in that wash. Text
+//   only partly highlighted is just highlighted words. An empty cell has
+//   no colour (a highlight needs words).
+// - A header column: when the first cells of the body rows are all bold
+//   (those with words; at least one has), the first column is drawn as
+//   row headers.
+//
+// The rule is the same for <Markdown> (rehypeTables, on the HTML tree)
+// and the rich-text editor (its table decorations, rich-text-table.ts):
+// both turn a cell into runs of text with their highlight and bold, and
+// ask the functions here.
+import { isHighlightColor } from './markdown-highlight.js';
+/** The cell's colour: every run with words in it highlighted, all in one colour. */
+export function cellColor(runs) {
+    const worded = runs.filter((run) => run.text.trim() !== '');
+    if (worded.length === 0)
+        return null;
+    const color = worded[0].color;
+    return color && worded.every((run) => run.color === color) ? color : null;
+}
+/** Whether a cell's words are all bold (and it has some). */
+export function cellBold(runs) {
+    const worded = runs.filter((run) => run.text.trim() !== '');
+    return worded.length > 0 && worded.every((run) => run.bold);
+}
+/** Whether a table's first column is row headers: its body rows' first cells with words, all bold. */
+export function isHeaderColumn(firstCells) {
+    const worded = firstCells.filter((runs) => runs.some((run) => run.text.trim() !== ''));
+    return worded.length > 0 && worded.every(cellBold);
+}
+// A cell's runs, from its HTML: a <mark data-color> is a highlight
+// (remarkHighlights writes one), <strong> is bold.
+function runsOf(node, color = null, bold = false) {
+    if (node.type === 'text')
+        return [{ text: node.value ?? '', color, bold }];
+    let inner = color;
+    if (node.tagName === 'mark') {
+        const value = node.properties?.dataColor;
+        inner = isHighlightColor(value) ? value : 'amber';
+    }
+    const strong = bold || node.tagName === 'strong';
+    return (node.children ?? []).flatMap((child) => runsOf(child, inner, strong));
+}
+const elements = (node, tagName) => (node?.children ?? []).filter((child) => child.type === 'element' && child.tagName === tagName);
+function eachTable(node, visit) {
+    if (node.type === 'element' && node.tagName === 'table')
+        visit(node);
+    for (const child of node.children ?? [])
+        eachTable(child, visit);
+}
+/**
+ * For <Markdown>: marks each table's coloured cells (`data-color`), and
+ * makes a header column's first cells row headers (`<th scope="row">`).
+ */
+export function rehypeTables() {
+    return (tree) => {
+        eachTable(tree, (table) => {
+            const rows = [...elements(table, 'thead'), ...elements(table, 'tbody')].flatMap((section) => elements(section, 'tr'));
+            const body = elements(elements(table, 'tbody')[0], 'tr');
+            for (const row of rows) {
+                for (const cell of row.children ?? []) {
+                    if (cell.type !== 'element')
+                        continue;
+                    const color = cellColor(runsOf(cell));
+                    if (color)
+                        cell.properties = { ...cell.properties, dataColor: color };
+                }
+            }
+            const firsts = body.map((row) => (row.children ?? []).find((cell) => cell.type === 'element'));
+            if (!isHeaderColumn(firsts.map((cell) => (cell ? runsOf(cell) : []))))
+                return;
+            table.properties = { ...table.properties, dataHeaderColumn: '' };
+            for (const cell of firsts) {
+                if (!cell)
+                    continue;
+                cell.tagName = 'th';
+                cell.properties = { ...cell.properties, scope: 'row' };
+            }
+        });
+    };
+}
+/** Sorts cell texts as a person would: numbers by value ($4.99 before $12), then words, empty last. */
+export function compareCells(a, b) {
+    const x = numberIn(a);
+    const y = numberIn(b);
+    if (x !== null && y !== null && x !== y)
+        return x - y;
+    const left = a.trim();
+    const right = b.trim();
+    if (!left && right)
+        return 1;
+    if (left && !right)
+        return -1;
+    return left.localeCompare(right, undefined, { numeric: true, sensitivity: 'base' });
+}
+// The first number in a cell's text: "$1,299.50" is 1299.5, "-3 kg" is -3.
+function numberIn(text) {
+    const found = text.replace(/,/g, '').match(/-?\d+(?:\.\d+)?/);
+    return found ? Number(found[0]) : null;
+}

package/package.json

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

@@ -159,6 +159,98 @@
     }
 }
 
+/* Tables in written text (<Markdown> and the rich-text editor; each puts
+   its table in a `.prose-table` box that scrolls sideways). Columns fit
+   their content: the table is only as wide as its words, a cell wraps at
+   18rem, and a right-aligned column (numbers) never wraps and uses
+   tabular figures. Two looks, set by `tableLook` on either renderer
+   (`data-table-look` on an ancestor):
+   - compact, the default: a full grid of hairlines, tight cells, the
+     header row on the heading band;
+   - boxed: a rounded box, roomier cells, the header row on the muted
+     fill, zebra rows (as DataTable's).
+   Row headers (a header column: src/lib/markdown-table.ts) sit on the
+   muted fill, semibold. A coloured cell (its whole text one highlight)
+   is painted in that wash, its words' own wash dropped. Unlayered, so a
+   mark's utility classes inside don't outrank it. */
+.prose-table {
+  width: fit-content;
+  /* The space it's in, less its own margins (the text's inset beside a
+     heading band): 100% would push it past the text by them. */
+  max-width: 100%;
+  max-width: -webkit-fill-available;
+  max-width: stretch;
+  overflow-x: auto;
+  /* Holds what's absolutely placed inside (a link's screen-reader text),
+     so it scrolls with the table instead of widening the page. */
+  position: relative;
+}
+.prose-table > table {
+  width: auto;
+  border-collapse: collapse;
+}
+.prose-table :is(td, th) {
+  min-width: 3rem;
+  max-width: 18rem;
+  padding: 0.25rem var(--table-cell-px);
+  vertical-align: top;
+  white-space: normal;
+  overflow-wrap: break-word;
+  border: 1px solid var(--border);
+  font-weight: var(--type-body-weight);
+}
+.prose-table th {
+  text-align: start;
+}
+.prose-table :is(td, th):is([style*="right"], [align="right"]) {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.prose-table th:not([scope="row"], [data-row-header]) {
+  background: var(--heading-band);
+  font-weight: 600;
+}
+.prose-table :is(th[scope="row"], [data-row-header]):not([data-color]) {
+  background: var(--muted);
+}
+.prose-table :is(th[scope="row"], [data-row-header]) {
+  font-weight: 600;
+}
+[data-table-look="boxed"] .prose-table {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+[data-table-look="boxed"] .prose-table :is(td, th) {
+  padding: var(--table-cell-py) 0.75rem;
+  border-width: 0 1px 1px 0;
+}
+[data-table-look="boxed"] .prose-table tr > :last-child {
+  border-right-width: 0;
+}
+[data-table-look="boxed"] .prose-table tr:last-child > * {
+  border-bottom-width: 0;
+}
+[data-table-look="boxed"] .prose-table th:not([scope="row"], [data-row-header]) {
+  background: var(--muted);
+  font-weight: var(--type-label-weight);
+}
+/* Zebra: <Markdown>'s body rows (after its <thead>), or the editor's,
+   whose header row is its only <tbody>'s first. */
+[data-table-look="boxed"] .prose-table :is(thead + tbody > tr:nth-child(even), tbody:only-child > tr:nth-child(odd):not(:first-child)) > :not([data-color], th[scope="row"], [data-row-header]) {
+  background: var(--table-stripe);
+}
+.prose-table :is(td, th)[data-color="amber"] { background: var(--highlight-amber); }
+.prose-table :is(td, th)[data-color="yellow"] { background: var(--highlight-yellow); }
+.prose-table :is(td, th)[data-color="green"] { background: var(--highlight-green); }
+.prose-table :is(td, th)[data-color="red"] { background: var(--highlight-red); }
+.prose-table [data-color] mark {
+  background: transparent;
+}
+/* Cells picked by dragging across them, in the editor. */
+.prose-table .selectedCell {
+  background: var(--table-highlight);
+}
+
 /* Printed notes (EntityView's Print notes, src/components/app/entity-view-print.tsx).
    While its copy is in <body>, paper shows that copy alone: the app beside
    it (shell, header, rail, dialogs) is left off, and the copy is in the

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

@@ -1,20 +0,0 @@
-import { type KeyboardEvent, type Ref } from 'react';
-import type { EditorState } from '@milkdown/kit/prose/state';
-import { type TableAction } from './rich-text-table.js';
-export interface RichTextTableMenuProps {
-    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;
-    /** Insert table picked. */
-    onInsert: () => void;
-    /** A row, column or alignment item picked. */
-    onAction: (action: TableAction) => void;
-    /** The editable element, where focus goes once an item is picked. */
-    text: () => HTMLElement | null;
-    ref?: Ref<HTMLButtonElement>;
-}
-export declare function RichTextTableMenu({ state, readOnly, tabIndex, onFocus, onKeyDown, onInsert, onAction, text, ref, }: RichTextTableMenuProps): import("react").JSX.Element;

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

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The fixed toolbar's Table menu: a table inserted where the caret is, or,
-// in a table, its rows, columns and alignment (rich-text-table.ts). A menu
-// button in the toolbar's row (one of its tab stops' places, moved to with
-// the arrow keys like the rest); the menu itself is Base UI's (ARIA's menu
-// pattern). Picking an item gives focus back to the text, the caret where
-// it was (the editor keeps its selection while the menu has focus); Esc
-// gives it back to the button, as a menu button's does.
-import { useRef } from 'react';
-import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BetweenHorizontalEndIcon, BetweenHorizontalStartIcon, BetweenVerticalEndIcon, BetweenVerticalStartIcon, ChevronDownIcon, TableIcon, Trash2Icon, } from 'lucide-react';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
-import { toggleVariants } from '../ui/toggle.js';
-import { tableAt } from './rich-text-formats.js';
-import { columnAlignment, tableActionEnabled } from './rich-text-table.js';
-const ROWS = [
-    { action: 'rowAbove', label: 'Insert row above', icon: BetweenHorizontalStartIcon },
-    { action: 'rowBelow', label: 'Insert row below', icon: BetweenHorizontalEndIcon },
-    { action: 'columnLeft', label: 'Insert column left', icon: BetweenVerticalStartIcon },
-    { action: 'columnRight', label: 'Insert column right', icon: BetweenVerticalEndIcon },
-];
-const ALIGNMENTS = [
-    { value: 'left', action: 'alignLeft', label: 'Left', icon: AlignLeftIcon },
-    { value: 'center', action: 'alignCenter', label: 'Center', icon: AlignCenterIcon },
-    { value: 'right', action: 'alignRight', label: 'Right', icon: AlignRightIcon },
-];
-const DELETES = [
-    { action: 'deleteRow', label: 'Delete row', icon: Trash2Icon },
-    { action: 'deleteColumn', label: 'Delete column', icon: Trash2Icon },
-    { action: 'deleteTable', label: 'Delete table', icon: Trash2Icon },
-];
-export function RichTextTableMenu({ state, readOnly, tabIndex, onFocus, onKeyDown, onInsert, onAction, text, ref, }) {
-    const inTable = state ? tableAt(state) !== null : false;
-    const enabled = (action) => (state ? tableActionEnabled(state, action) : false);
-    // Whether the menu is closing because an item was picked.
-    const picked = useRef(false);
-    const run = (action) => {
-        picked.current = true;
-        action();
-    };
-    const finalFocus = () => {
-        const toText = picked.current;
-        picked.current = false;
-        return toText ? (text() ?? true) : true;
-    };
-    const item = ({ action, label, icon: Icon }) => (_jsxs(DropdownMenuItem, { disabled: !enabled(action), onClick: () => run(() => onAction(action)), children: [_jsx(Icon, { "aria-hidden": "true" }), label] }, action));
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { ref: ref, "aria-label": "Table", disabled: readOnly, tabIndex: tabIndex, "data-active": inTable || undefined, 
-                // Shaped like the toolbar's toggles: on while the caret is in a table.
-                className: toggleVariants({ size: 'sm', className: 'gap-0.5 px-1.5 data-active:bg-muted data-active:text-foreground' }), onFocus: onFocus, onKeyDown: onKeyDown, children: [_jsx(TableIcon, { "aria-hidden": "true" }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-3" })] }), _jsxs(DropdownMenuContent, { className: "w-56", finalFocus: finalFocus, children: [_jsxs(DropdownMenuItem, { disabled: inTable, onClick: () => run(onInsert), children: [_jsx(TableIcon, { "aria-hidden": "true" }), "Insert table"] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: ROWS.map(item) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Align column" }), _jsx(DropdownMenuRadioGroup, { value: state && inTable ? columnAlignment(state) : null, onValueChange: (value) => {
-                                    const alignment = ALIGNMENTS.find((one) => one.value === value);
-                                    if (alignment)
-                                        run(() => onAction(alignment.action));
-                                }, children: ALIGNMENTS.map(({ value, label, icon: Icon }) => (_jsxs(DropdownMenuRadioItem, { value: value, disabled: !inTable, closeOnClick: true, children: [_jsx(Icon, { "aria-hidden": "true" }), label] }, value))) })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: DELETES.map(item) })] })] }));
-}