@tristan2828/ui-foundation 3.20.1 → 3.22.0

package/conventions/docs/add-an-entity.md

@@ -189,7 +189,12 @@ is a filled-in example while the Widgets demo is still here).
    - `src/routes/widgets/widgets-table.tsx` →
      `src/routes/<entity>/<entity>-table.tsx` — thin consumer of the
      foundation's `<DataTable>`. Swap the type, columns, and toolbar
-     filters.
+     filters. More than three filters (search, saved views aside): keep
+     the most used in the toolbar and put the rest inside
+     `<SecondaryFilters>`, as the template does with Extra Categories,
+     Progress and In Stock. Pass it each filter that's on as an
+     `ActiveFilter` (its chip text and how to take it off) and an
+     `onClear` that clears them all in one `setFilters` call.
    - `src/routes/widgets/widget-view.tsx` →
      `src/routes/<entity>/<entity>-view.tsx` — thin consumer of the
      foundation's `<EntityView>`. Swap the title, badges and sections for
@@ -275,9 +280,9 @@ is a filled-in example while the Widgets demo is still here).
      `<a target="_blank" rel="noreferrer">` with an `ExternalLinkIcon`
      and a visually hidden "(opens in a new tab)".
    - **Long text the plan marks Markdown** renders through the
-     foundation's `<Markdown>`: headings, lists, tables and links, links
-     opening in a new tab; raw HTML shows as the characters typed, never
-     as markup. The app needs no Markdown dependency of its own. Plain
+     foundation's `<Markdown>`: headings, lists, tables, callouts
+     (`> [!NOTE]`) and links, links opening in a new tab; raw HTML shows
+     as the characters typed, never as markup. The app needs no Markdown dependency of its own. Plain
      long text renders as text (`whitespace-pre-line` keeps its line
      breaks).
    - **Quick actions: only the fields the plan's `Quick actions` line

package/conventions/docs/cell-patterns.md

@@ -740,15 +740,24 @@ const price = editInPlace({
   (a count shows from 80% of it, in the destructive text tone once over).
   Its keys: Ctrl/Cmd+K adds or edits a link (web and email addresses
   only), Ctrl/Cmd+Shift+Enter ticks the task item the caret is in, and
-  Markdown pasted as plain text arrives formatted. Ctrl/Cmd+Enter stays
-  the save. A formatting toolbar sits above the text (bold to link, each
+  Markdown pasted as plain text arrives formatted. Notion's block keys
+  work: Ctrl+Shift+1 to 3 for headings, +4 tasks, +5 bullets, +6 numbers,
+  +8 a code block, +0 back to text (Cmd+Option on a Mac), and
+  Ctrl/Cmd+Shift+S strikes through. Ctrl/Cmd+Enter stays the save, in a
+  table too. A formatting toolbar sits above the text (bold to link, each
   button naming its shortcut), and a smaller one floats over selected
   words (bold, italic, strikethrough, code, link); Alt+F10 reaches the
   floating one, else the fixed one. Both are part of the field, so moving
   to them doesn't save, and Esc hides the floating one before it gives up
   the edit. "/" typed at a line's start lists the blocks the line can
-  become (headings, lists, quote, code block); typing filters, Enter or
-  Tab picks, and Esc closes the list before it gives up the edit.
+  become (three headings, lists, quote, callout, code block, divider,
+  table); typing filters ("/warn" finds a warning callout), Enter or Tab
+  picks, and Esc closes the list before it gives up the edit. A callout
+  is GitHub's `> [!NOTE]` (note, tip, important, warning, caution), its
+  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.
   `toolbar={false}` leaves out the toolbars and the slash menu where a
   value is short and the shortcuts are enough.
 - **The save is the single-field save** (`useRecordUpdate` with

package/conventions/docs/design-language.md

@@ -172,6 +172,28 @@ height and weight together, from tokens in the package's `styles/theme.css`:
 - A shadcn primitive keeps its own sizes (`CardTitle`, `Button`). Don't put
   a role on one: its built-in size classes would then compete with the role.
 
+### Written text (notes)
+
+Long text written as Markdown (`<Markdown>` and `RichTextEditor`) has its
+own three heading roles, so `#`, `##` and `###` in a note never look
+alike. They're for headings inside the text only, never a screen's own
+outline (that stays `type-page-title` and `type-section-title`):
+
+| Class | For | Size / weight |
+|---|---|---|
+| `type-heading-1` | `#` in a note, with a rule under it | 26px / 700 |
+| `type-heading-2` | `##` | 20px / 600 |
+| `type-heading-3` | `###` | 17px / 600 |
+
+The same text has two colour tokens of its own: `--link` (`text-link`), a
+link's colour, blue as well as underlined (5.59:1 on white, 8.90:1 on the
+dark page), and `--rule` (`bg-rule`), the 2px line a `---` divider draws,
+stronger than `--border`'s hairline. A callout (`> [!NOTE]`) is a 10% wash
+of its kind's tone behind ordinary text, with the icon in the tone's text
+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.
+
 ## Density
 
 Tables have three densities, set with `data-density` on **any ancestor**

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

@@ -37,20 +37,27 @@ function leafColumnIds(columns) {
 function TableSkeleton({ columnCount }) {
     return (_jsx("div", { className: "flex flex-col gap-2 p-2", "data-state": "loading", children: Array.from({ length: 5 }, (_, row) => (_jsx("div", { className: "flex gap-4", children: Array.from({ length: columnCount }, (_, col) => (_jsx(Skeleton, { className: "h-8 flex-1" }, col))) }, row))) }));
 }
-// The pinned cell gets a flat `bg-background`, not `bg-inherit`: the zebra
+// The pinned cell gets an opaque background, not `bg-inherit`: the zebra
 // stripe (table.tsx) is a *translucent* color, so inheriting it would let
 // the columns scrolling behind show through at 40% opacity — exactly the
-// bleed-through a solid background avoids. That also means the pinned
-// column shows no stripe, which is why it is the thing that carries the
-// hover highlight. --accent is only ~3% off the page background, so a
-// solid left edge marker carries the signal; an inset shadow rather than a
-// border, so nothing reflows.
-const PINNED_COLUMN_CLASS = 'sticky left-0 z-10 border-r bg-background group-hover/row:bg-accent ' +
-    'group-hover/row:shadow-[inset_3px_0_0_0_var(--primary)]';
+// bleed-through a solid background avoids. On an even row it's the stripe
+// pre-mixed onto the page (--table-stripe), so the stripe runs the whole
+// row's width (issue #92); `:where()` keeps that rule's specificity at the
+// background's, so the hover below still wins on every row. The pinned
+// cell carries the hover highlight. --accent is only ~3% off the page
+// background, so a solid left edge marker carries the signal; an inset
+// shadow rather than a border, so nothing reflows.
+const PINNED_CELL_CLASS = 'z-10 bg-background [:where(tbody>tr:nth-child(even))>&]:bg-(--table-stripe) group-hover/row:bg-accent';
+const PINNED_COLUMN_CLASS = `sticky left-0 border-r ${PINNED_CELL_CLASS} group-hover/row:shadow-[inset_3px_0_0_0_var(--primary)]`;
 // The right-edge mirror, opaque for the same reason. Its edge marker points
 // inward from the right, so the two pinned columns bracket the row.
-const PINNED_LAST_COLUMN_CLASS = 'sticky right-0 z-10 border-l bg-background group-hover/row:bg-accent ' +
-    'group-hover/row:shadow-[inset_-3px_0_0_0_var(--primary)]';
+const PINNED_LAST_COLUMN_CLASS = `sticky right-0 border-l ${PINNED_CELL_CLASS} group-hover/row:shadow-[inset_-3px_0_0_0_var(--primary)]`;
+// A pinned first column's content, capped below md at 45% of the table's
+// scroll area (`cqw`: the container is an inline-size query container)
+// and wrapping, so a long title can't widen the column past the screen
+// and leave every other column scrolling underneath it (issue #91).
+// Wider screens are unchanged: the column sizes to its content.
+const PINNED_FIRST_CONTENT_CLASS = 'max-md:max-w-[45cqw] max-md:whitespace-normal max-md:break-words';
 // Hover highlights the pinned cell, not the whole row. A row-level hover
 // cannot be made consistent against the zebra stripe: `tr:nth-child(even)`
 // is specificity (0,2,1) and `tr:hover` is (0,2,0), so the stripe wins and
@@ -169,9 +176,10 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                         // scrollable (wheel, trackpad, drag, and the sync effect); it
                         // just no longer draws a bar directly under the last row.
                         containerClassName: cn(pinFirstColumn &&
-                            '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden'), children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header, index) => {
+                            '@container [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'), children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header, index) => {
                                         const canSort = header.column.getCanSort();
                                         const sortDirection = header.column.getIsSorted();
+                                        const content = header.isPlaceholder ? null : canSort ? (_jsxs("button", { type: "button", className: cn('flex items-center gap-1 text-foreground', header.column.columnDef.meta?.align === 'center' && 'w-full justify-center'), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), sortDirection === 'asc' ? (_jsx(ArrowUpIcon, { className: "size-3.5 text-muted-foreground" })) : sortDirection === 'desc' ? (_jsx(ArrowDownIcon, { className: "size-3.5 text-muted-foreground" })) : (_jsx(ArrowUpDownIcon, { className: "size-3.5 text-muted-foreground/50" }))] })) : (flexRender(header.column.columnDef.header, header.getContext()));
                                         return (_jsx(TableHead, { className: cn(pinFirstColumn && index === 0 && PINNED_COLUMN_CLASS, pinLastColumn &&
                                                 index === headerGroup.headers.length - 1 &&
                                                 PINNED_LAST_COLUMN_CLASS, header.column.columnDef.meta?.align === 'center' && 'text-center'), "aria-sort": !canSort
@@ -180,8 +188,8 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                                                     ? 'ascending'
                                                     : sortDirection === 'desc'
                                                         ? 'descending'
-                                                        : 'none', children: header.isPlaceholder ? null : canSort ? (_jsxs("button", { type: "button", className: cn('flex items-center gap-1 text-foreground', header.column.columnDef.meta?.align === 'center' && 'w-full justify-center'), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), sortDirection === 'asc' ? (_jsx(ArrowUpIcon, { className: "size-3.5 text-muted-foreground" })) : sortDirection === 'desc' ? (_jsx(ArrowDownIcon, { className: "size-3.5 text-muted-foreground" })) : (_jsx(ArrowUpDownIcon, { className: "size-3.5 text-muted-foreground/50" }))] })) : (flexRender(header.column.columnDef.header, header.getContext())) }, header.id));
+                                                        : 'none', children: pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: content })) : (content) }, header.id));
                                     }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { className: cn((pinFirstColumn || pinLastColumn) && ROW_GROUP_CLASS), children: row.getVisibleCells().map((cell, index) => (_jsx(TableCell, { className: cn(pinFirstColumn && index === 0 && PINNED_COLUMN_CLASS, pinLastColumn &&
                                             index === row.getVisibleCells().length - 1 &&
-                                            PINNED_LAST_COLUMN_CLASS, cell.column.columnDef.meta?.align === 'center' && 'text-center'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }), pinFirstColumn && isOverflowing && (_jsx("div", { ref: barRef, "aria-hidden": "true", tabIndex: -1, "data-slot": "bottom-scrollbar", className: "sticky bottom-0 z-20 h-4 overflow-x-auto border-t border-border bg-background", children: _jsx("div", { style: { width: scrollWidth, height: 1 } }) })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "type-body text-muted-foreground", children: [total === 0 ? 0 : (page - 1) * pageSize + 1, '–', Math.min(page * pageSize, total), " of ", total] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Previous page", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "type-body text-muted-foreground", children: ["Page ", page, " of ", pageCount] }), _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Next page", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: _jsx(ChevronRightIcon, {}) })] })] })] }))] }));
+                                            PINNED_LAST_COLUMN_CLASS, cell.column.columnDef.meta?.align === 'center' && 'text-center'), children: pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }, row.id))) })] }), pinFirstColumn && isOverflowing && (_jsx("div", { ref: barRef, "aria-hidden": "true", tabIndex: -1, "data-slot": "bottom-scrollbar", className: "sticky bottom-0 z-20 h-4 overflow-x-auto border-t border-border bg-background", children: _jsx("div", { style: { width: scrollWidth, height: 1 } }) })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("p", { className: "type-body text-muted-foreground", children: [total === 0 ? 0 : (page - 1) * pageSize + 1, '–', Math.min(page * pageSize, total), " of ", total] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Previous page", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { className: "type-body text-muted-foreground", children: ["Page ", page, " of ", pageCount] }), _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Next page", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: _jsx(ChevronRightIcon, {}) })] })] })] }))] }));
 }

package/dist/components/app/markdown.js

@@ -4,7 +4,12 @@ import remarkGfm from 'remark-gfm';
 import { cn } from 'cn';
 import { ExternalLinkIcon, SquareCheckIcon, SquareIcon } from 'lucide-react';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
-const REMARK_PLUGINS = [remarkGfm];
+import { CALLOUT_KINDS, remarkCallouts } from '../../lib/markdown-callout.js';
+import { CALLOUT_BOX, CALLOUT_LOOK, headingClass, PROSE } from './prose-look.js';
+const REMARK_PLUGINS = [remarkGfm, remarkCallouts];
+function isCalloutKind(value) {
+    return CALLOUT_KINDS.includes(value);
+}
 // Every element react-markdown hands over carries `node` (the syntax tree
 // node). It isn't a DOM attribute, so it's dropped before spreading.
 function omitNode(props) {
@@ -13,33 +18,44 @@ function omitNode(props) {
     return rest;
 }
 const COMPONENTS = {
-    h1: (props) => _jsx("h3", { ...omitNode(props), className: "type-section-title mt-2 text-foreground" }),
-    h2: (props) => _jsx("h4", { ...omitNode(props), className: "type-section-title mt-2 text-foreground" }),
-    h3: (props) => _jsx("h5", { ...omitNode(props), className: "type-label mt-1 text-foreground" }),
-    h4: (props) => _jsx("h6", { ...omitNode(props), className: "type-label mt-1 text-foreground" }),
-    h5: (props) => _jsx("h6", { ...omitNode(props), className: "type-label mt-1 text-foreground" }),
-    h6: (props) => _jsx("h6", { ...omitNode(props), className: "type-label mt-1 text-foreground" }),
+    h1: (props) => _jsx("h3", { ...omitNode(props), className: cn(headingClass(1), 'text-foreground') }),
+    h2: (props) => _jsx("h4", { ...omitNode(props), className: cn(headingClass(2), 'text-foreground') }),
+    h3: (props) => _jsx("h5", { ...omitNode(props), className: cn(headingClass(3), 'text-foreground') }),
+    h4: (props) => _jsx("h6", { ...omitNode(props), className: cn(headingClass(4), 'text-foreground') }),
+    h5: (props) => _jsx("h6", { ...omitNode(props), className: cn(headingClass(5), 'text-foreground') }),
+    h6: (props) => _jsx("h6", { ...omitNode(props), className: cn(headingClass(6), 'text-foreground') }),
     a: (props) => {
         const { href, children, ...rest } = omitNode(props);
         if (!href)
             return _jsx("span", { children: children });
-        return (_jsxs("a", { ...rest, href: href, target: "_blank", rel: "noreferrer", className: "text-primary underline underline-offset-4 hover:text-primary/80", children: [children, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "ml-0.5 inline size-3 align-baseline" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] }));
-    },
-    ul: (props) => {
-        const { className, ...rest } = omitNode(props);
-        const isTaskList = className?.includes('contains-task-list');
-        return _jsx("ul", { ...rest, className: cn('flex flex-col gap-1', isTaskList ? 'list-none' : 'list-disc pl-6') });
+        return (_jsxs("a", { ...rest, href: href, target: "_blank", rel: "noreferrer", className: PROSE.link, children: [children, _jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "ml-0.5 inline size-3 align-baseline" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] }));
     },
+    // A list can mix plain and task items (`- a` then `- [ ] b` is one
+    // list): each task item drops its own bullet, the rest keep theirs. Its
+    // box is inline, so a loose list's item (its text in a <p>) lays out
+    // the same as a tight one's.
+    ul: (props) => _jsx("ul", { ...omitNode(props), className: "flex list-disc flex-col gap-1 pl-6" }),
     ol: (props) => _jsx("ol", { ...omitNode(props), className: "flex list-decimal flex-col gap-1 pl-6" }),
     li: (props) => {
         const { className, ...rest } = omitNode(props);
-        return _jsx("li", { ...rest, className: cn(className?.includes('task-list-item') && 'flex items-start gap-2') });
+        return _jsx("li", { ...rest, className: cn(className?.includes('task-list-item') && '-ml-6 list-none') });
     },
     // A GitHub task-list box (`- [x] done`). Read-only, so a glyph with its
     // state in words, never a checkbox someone will try to tick.
-    input: ({ checked }) => checked ? (_jsx(SquareCheckIcon, { role: "img", "aria-label": "Done", className: "mt-0.5 size-4 shrink-0 text-foreground" })) : (_jsx(SquareIcon, { role: "img", "aria-label": "Not done", className: "mt-0.5 size-4 shrink-0 text-muted-foreground" })),
+    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: "border-border" }),
+    hr: () => _jsx("hr", { className: PROSE.rule }),
+    // A callout (remarkCallouts marks it): its kind's wash and icon, named
+    // for screen readers by the kind ("Note: …").
+    div: (props) => {
+        const { children, ...rest } = omitNode(props);
+        const kind = rest['data-callout'];
+        if (!isCalloutKind(kind))
+            return _jsx("div", { ...rest, children: children });
+        const look = CALLOUT_LOOK[kind];
+        const Icon = look.icon;
+        return (_jsxs("div", { role: "note", "data-callout": kind, className: cn(CALLOUT_BOX, look.box), children: [_jsx(Icon, { "aria-hidden": "true", className: cn('mt-0.5 size-4 shrink-0', look.tint) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsxs("span", { className: "sr-only", children: [look.label, ": "] }), children] })] }));
+    },
     pre: (props) => (_jsx("pre", { ...omitNode(props), className: "overflow-x-auto rounded-lg bg-muted p-3 font-mono text-foreground [&_code]:bg-transparent [&_code]:p-0" })),
     code: (props) => _jsx("code", { ...omitNode(props), className: "rounded bg-muted px-1 py-0.5 font-mono text-foreground" }),
     img: (props) => {
@@ -48,12 +64,14 @@ const COMPONENTS = {
     },
     // GFM tables use the package's own table, zebra stripes and density
     // tokens included, so a table in the notes reads like every other table.
-    table: (props) => _jsx(Table, { ...omitNode(props) }),
-    thead: (props) => _jsx(TableHeader, { ...omitNode(props) }),
+    table: (props) => _jsx(Table, { ...omitNode(props), containerClassName: "rounded-lg border border-border" }),
+    thead: (props) => _jsx(TableHeader, { ...omitNode(props), className: "bg-muted" }),
     tbody: (props) => _jsx(TableBody, { ...omitNode(props) }),
     tr: (props) => _jsx(TableRow, { ...omitNode(props) }),
-    th: (props) => _jsx(TableHead, { ...omitNode(props) }),
-    td: (props) => _jsx(TableCell, { ...omitNode(props) }),
+    // Notes' cells wrap (a cell can hold a sentence) and have a line
+    // between columns, so a wide table still reads column by column.
+    th: (props) => _jsx(TableHead, { ...omitNode(props), className: "border-r border-border whitespace-normal last:border-r-0" }),
+    td: (props) => _jsx(TableCell, { ...omitNode(props), className: "border-r border-border whitespace-normal last:border-r-0" }),
 };
 export function Markdown({ children, className, ...rest }) {
     return (_jsx("div", { "data-slot": "markdown", ...rest, className: cn('flex min-w-0 flex-col gap-3 type-body text-foreground break-words', className), children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, components: COMPONENTS, children: children }) }));

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

@@ -13,13 +13,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   in the text shows as its characters (an uneditable chip, Milkdown's
 //   html node), and HTML pasted as such a chip becomes plain text.
 // - Headings render from <h3>, like <Markdown>: the page owns <h1> and
-//   <h2>. A task-list item renders a real checkbox that toggles it.
+//   <h2>; they look like <Markdown>'s (prose-look.ts). A task-list item
+//   renders a real checkbox that toggles it.
+// - Callouts (`> [!NOTE]`, src/lib/markdown-callout.ts): a node of their
+//   own, drawn as <Markdown> draws them, the icon a menu of kinds.
+// - Tables in a box that scrolls sideways, with Notion's "add a row" and
+//   "add a column" bars, Tab in the last cell adding a row and Enter going
+//   down a column (rich-text-table.ts); the toolbar's Table menu does the
+//   rest.
 // - Edited blocks are written in the document's own bullet and rule marks.
 // - Markdown pasted as plain text arrives formatted (still no HTML), and a
 //   copy out of the editor is Markdown.
 // - Ctrl/Cmd+K adds or edits a link (a box at the caret: web and email
 //   addresses only); Ctrl/Cmd+Shift+Enter ticks the task item the caret is
-//   in. Ctrl/Cmd+Enter stays the field's save.
+//   in. Ctrl/Cmd+Enter stays the field's save, in a table too. Notion's
+//   block keys (Ctrl+Shift+1 for a heading, +5 for bullets, …:
+//   rich-text-shortcuts.ts).
 // - A placeholder in an empty document, and a count of the Markdown's
 //   length as it nears `maxLength`.
 // - A fixed toolbar above the text (rich-text-toolbar.tsx), and a
@@ -30,26 +39,34 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   line's start lists the blocks it can become, also unless
 //   `toolbar={false}`.
 import { useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { defaultValueCtx, Editor, editorViewCtx, editorViewOptionsCtx, parserCtx, remarkStringifyOptionsCtx, rootCtx, schemaCtx, serializerCtx, } from '@milkdown/kit/core';
 import { history } from '@milkdown/kit/plugin/history';
 import { commands, inputRules, keymap, markInputRules, plugins, remarkPreserveEmptyLinePlugin, schema, } from '@milkdown/kit/preset/commonmark';
 import { gfm } from '@milkdown/kit/preset/gfm';
 import { Fragment, Slice } from '@milkdown/kit/prose/model';
-import { NodeSelection, Plugin } from '@milkdown/kit/prose/state';
+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 { $prose, getMarkdown } from '@milkdown/kit/utils';
+import { $nodeSchema, $prose, $remark, getMarkdown } from '@milkdown/kit/utils';
 import { cn } from 'cn';
 import { Button } from '../ui/button.js';
 import { Field, FieldError, FieldLabel } from '../ui/field.js';
 import { Input } from '../ui/input.js';
 import { Popover, PopoverContent } from '../ui/popover.js';
 import { linkHref } from '../../lib/link-href.js';
+import { calloutHandler, remarkCalloutNodes } from '../../lib/markdown-callout.js';
 import { MarkdownMergeError, markdownStyle, mergeMarkdown } from '../../lib/markdown-merge.js';
+import { headingClass } from './prose-look.js';
 import { RichTextFloatingToolbar } from './rich-text-floating-toolbar.js';
-import { toggleFormat } from './rich-text-formats.js';
+import { tableAt, toggleFormat } from './rich-text-formats.js';
+import { calloutKind, calloutView, tableView } from './rich-text-node-views.js';
+import { handleShortcut } from './rich-text-shortcuts.js';
+import { addRowAtEnd, handleTableKey, runTableAction } from './rich-text-table.js';
 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 { 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`.
 const LEFT_OUT = remarkPreserveEmptyLinePlugin;
@@ -61,6 +78,34 @@ const COMMONMARK = [
     ...keymap,
     ...plugins.filter((plugin) => !LEFT_OUT.includes(plugin)),
 ];
+// Callouts: a node of their own, read from the quote remarkCalloutNodes
+// marks and written back as one with its marker (calloutHandler).
+const calloutRemark = $remark('remarkCalloutNodes', () => remarkCalloutNodes);
+const calloutSchema = $nodeSchema('callout', () => ({
+    content: 'block+',
+    group: 'block',
+    defining: true,
+    attrs: { kind: { default: 'note' }, marker: { default: null } },
+    parseDOM: [
+        {
+            tag: 'div[data-callout]',
+            getAttrs: (dom) => ({ kind: calloutKind(dom.dataset.callout) }),
+        },
+    ],
+    toDOM: (node) => ['div', { 'data-callout': String(node.attrs.kind) }, 0],
+    parseMarkdown: {
+        match: (node) => node.type === 'callout',
+        runner: (state, node, type) => {
+            state.openNode(type, { kind: calloutKind(node.kind), marker: node.marker ?? null }).next(node.children).closeNode();
+        },
+    },
+    toMarkdown: {
+        match: (node) => node.type.name === 'callout',
+        runner: (state, node) => {
+            state.openNode('callout', undefined, { kind: node.attrs.kind, marker: node.attrs.marker }).next(node.content).closeNode();
+        },
+    },
+}));
 // Raw HTML pasted in as Milkdown's html chip becomes the plain text it
 // shows, so a paste can never add markup to the Markdown.
 function htmlToText(fragment) {
@@ -78,7 +123,9 @@ function htmlToText(fragment) {
     return Fragment.fromArray(nodes);
 }
 function headingView(node) {
-    const dom = document.createElement(`h${Math.min(Number(node.attrs.level) + 2, 6)}`);
+    const level = Number(node.attrs.level);
+    const dom = document.createElement(`h${Math.min(level + 2, 6)}`);
+    dom.className = headingClass(level);
     return {
         dom,
         contentDOM: dom,
@@ -217,6 +264,9 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     const slashMenuRef = useRef(null);
     // Opens the link box: made with the editor, used by the toolbar's Link.
     const openLinkRef = useRef(() => { });
+    // The node views' slots (a callout's icon, a table's bars), each
+    // rendered into through a portal.
+    const [widgets, setWidgets] = useState([]);
     // The latest props, for the editor's callbacks, which are set up once.
     const latest = useRef({ onChange, onProblem, readOnly, placeholder });
     useEffect(() => {
@@ -306,6 +356,33 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                 transformPasted: (slice) => new Slice(htmlToText(slice.content), slice.openStart, slice.openEnd),
             },
         }));
+        // The node views' slots, by slot; React hears of a change once per
+        // task, however many node views changed in it.
+        const slots = new Map();
+        let syncQueued = false;
+        const sync = () => {
+            if (syncQueued)
+                return;
+            syncQueued = true;
+            queueMicrotask(() => {
+                syncQueued = false;
+                if (!cancelled)
+                    setWidgets([...slots.values()]);
+            });
+        };
+        const registry = {
+            set: (widget) => {
+                const before = slots.get(widget.slot);
+                if (before && before.type === widget.type && (before.type !== 'callout' || before.kind === widget.kind))
+                    return;
+                slots.set(widget.slot, widget);
+                sync();
+            },
+            remove: (slot) => {
+                if (slots.delete(slot))
+                    sync();
+            },
+        };
         // Opens the link box at the start of what the link applies to.
         const openLink = (view) => {
             if (!view.editable)
@@ -428,47 +505,66 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             .config((ctx) => {
             ctx.set(rootCtx, root);
             ctx.set(defaultValueCtx, original);
-            ctx.update(remarkStringifyOptionsCtx, (options) => ({ ...options, ...markdownStyle(original) }));
+            ctx.update(remarkStringifyOptionsCtx, (options) => ({
+                ...options,
+                ...markdownStyle(original),
+                handlers: { ...options.handlers, callout: calloutHandler },
+            }));
             ctx.update(editorViewOptionsCtx, (options) => ({
                 ...options,
                 editable: () => !latest.current.readOnly,
                 attributes,
-                // The slash menu's keys, as view props: before Milkdown's own
-                // keymap, whose Enter would split the line.
+                // The slash menu's keys, the editor's own shortcuts and its table
+                // keys, as view props: before Milkdown's own keymap, whose Enter
+                // would split the line (or leave a table).
                 handleKeyDown: (view, event) => {
                     const menu = slashMenuRef.current;
-                    if (!menu)
-                        return false;
-                    const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
                     const plain = !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey;
-                    if (step && plain) {
-                        event.preventDefault();
-                        const count = menu.items.length;
-                        setSlashActive({ key: menu.key, index: (menu.index + step + count) % count });
-                        return true;
+                    if (menu) {
+                        const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+                        if (step && plain) {
+                            event.preventDefault();
+                            const count = menu.items.length;
+                            setSlashActive({ key: menu.key, index: (menu.index + step + count) % count });
+                            return true;
+                        }
+                        if ((event.key === 'Enter' || event.key === 'Tab') && plain) {
+                            event.preventDefault();
+                            applySlash(view, menu.span, menu.items[menu.index].id);
+                            return true;
+                        }
+                        // Esc closes the menu only: the field's own Esc (editing in
+                        // place gives up the edit) waits for the next one.
+                        if (event.key === 'Escape') {
+                            event.preventDefault();
+                            view.dispatch(closeSlash(view.state));
+                            return true;
+                        }
                     }
-                    if ((event.key === 'Enter' || event.key === 'Tab') && plain) {
-                        event.preventDefault();
-                        applySlash(view, menu.span, menu.items[menu.index].id);
+                    if (!view.editable)
+                        return false;
+                    if (handleShortcut(view.state, view.dispatch, event))
                         return true;
-                    }
-                    // Esc closes the menu only: the field's own Esc (editing in
-                    // place gives up the edit) waits for the next one.
-                    if (event.key === 'Escape') {
-                        event.preventDefault();
-                        view.dispatch(closeSlash(view.state));
+                    if (handleTableKey(view.state, view.dispatch, event))
                         return true;
-                    }
-                    return false;
+                    // Ctrl/Cmd+Enter in a table is the field's (a save), not
+                    // Milkdown's "leave the table": taken here, so its keymap never
+                    // sees it, and left to reach the field.
+                    const mod = event.metaKey || event.ctrlKey;
+                    return mod && !event.shiftKey && !event.altKey && event.key === 'Enter' && isInTable(view.state);
                 },
                 nodeViews: {
                     heading: headingView,
+                    callout: (node, _view, getPos) => calloutView(node, getPos, registry),
+                    table: (_node, _view, getPos) => tableView(getPos, registry),
                     list_item: (node, view, getPos) => node.attrs.checked == null ? undefined : taskItemView(node, view, getPos),
                 },
             }));
         })
             .use(COMMONMARK)
             .use(gfm)
+            .use(calloutRemark)
+            .use(calloutSchema)
             .use(history)
             .use(changes)
             .use(slashing)
@@ -523,6 +619,53 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             view.focus();
         });
     };
+    // The editable element: where a menu over the text gives focus back
+    // (ProseMirror puts the caret back where it was as it takes it).
+    const textElement = () => editorView?.dom ?? null;
+    // A Table menu item, on the caret's table (the menu gives focus back).
+    const runTable = (action) => {
+        if (editorView)
+            runTableAction(editorView.state, editorView.dispatch, action);
+    };
+    // A callout's menu: its kind changed, or the callout taken away (its
+    // blocks kept). The menu gives focus back to the text.
+    const changeCallout = (getPos, kind) => {
+        if (!editorView)
+            return;
+        const pos = getPos();
+        const node = pos === undefined ? null : editorView.state.doc.nodeAt(pos);
+        if (pos === undefined || node?.type.name !== 'callout')
+            return;
+        const tr = editorView.state.tr;
+        if (kind)
+            tr.setNodeMarkup(pos, undefined, { ...node.attrs, kind });
+        else
+            tr.replaceWith(pos, pos + node.nodeSize, node.content).setSelection(TextSelection.near(tr.doc.resolve(pos + 1)));
+        editorView.dispatch(tr);
+    };
+    // A table's bar: the caret into its last cell, then a row at its end
+    // (the caret into its first cell) or a column at its right (the caret
+    // into its header).
+    const addToTable = (getPos, side) => {
+        if (!editorView)
+            return;
+        const pos = getPos();
+        const table = pos === undefined ? null : editorView.state.doc.nodeAt(pos);
+        if (pos === undefined || table?.type.name !== 'table')
+            return;
+        const last = TextSelection.near(editorView.state.doc.resolve(pos + table.nodeSize - 1), -1);
+        editorView.dispatch(editorView.state.tr.setSelection(last));
+        if (side === 'row')
+            addRowAtEnd(editorView.state, editorView.dispatch);
+        else if (runTableAction(editorView.state, editorView.dispatch, 'columnRight')) {
+            const added = editorView.state.doc.nodeAt(pos);
+            const map = TableMap.get(added);
+            const header = TextSelection.near(editorView.state.doc.resolve(pos + 1 + map.map[map.width - 1] + 1));
+            editorView.dispatch(editorView.state.tr.setSelection(header).scrollIntoView());
+        }
+        editorView.focus();
+    };
+    const caretTable = editorState ? tableAt(editorState)?.pos : undefined;
     // The floating toolbar: words selected, focus in the field, the mouse up,
     // and nothing else open over the text.
     const selection = editorState?.selection;
@@ -551,7 +694,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", className: cn('relative flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { ref: toolbarRef, state: editorState, readOnly: readOnly, 
                         // Only once the editor is made: until then the editable element,
                         // and its id, aren't in the page (axe: aria-valid-attr-value).
-                        controls: editorState ? editableId : undefined, onFormat: runFormat })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
+                        controls: editorState ? editableId : undefined, onFormat: runFormat, onTable: runTable, text: textElement })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
                         // 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
@@ -559,11 +702,26 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         '[&_.ProseMirror]:flex [&_.ProseMirror]:min-h-20 [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', 
                         // 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', '[&_h3]:type-section-title [&_h4]:type-section-title [&_h5]:type-label [&_h6]:type-label', '[&_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', '[&_a]:text-primary [&_a]:underline [&_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]:border-border', '[&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:type-label', 
+                        '[&_.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', 
+                        // 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', 
+                        // A table: a header row on the muted fill, a line between every
+                        // cell, cells that wrap and never shrink to nothing; selected
+                        // cells (a drag across them) tinted.
+                        '[&_table]:w-full [&_table]:border-collapse', '[&_:is(td,th)]:min-w-28 [&_:is(td,th)]:border-r [&_:is(td,th)]:border-b [&_:is(td,th)]:border-border [&_:is(td,th)]:px-(--table-cell-px) [&_:is(td,th)]:py-(--table-cell-py) [&_:is(td,th)]:align-top', '[&_:is(td,th):last-child]:border-r-0 [&_tr:last-child>td]:border-b-0', '[&_th]:bg-muted [&_th]:text-left [&_th]:type-label', '[&_.selectedCell]:bg-info/15', 
                         // Raw HTML from the text: shown as its characters, never as markup.
                         '[&_span[data-type=html]]:rounded [&_span[data-type=html]]:bg-muted [&_span[data-type=html]]:px-1 [&_span[data-type=html]]:font-mono [&_span[data-type=html]]:text-foreground', 
                         // The placeholder, in an empty document only (a decoration).
-                        '[&_p[data-placeholder]]:before:pointer-events-none [&_p[data-placeholder]]:before:float-left [&_p[data-placeholder]]:before:h-0 [&_p[data-placeholder]]:before:text-muted-foreground [&_p[data-placeholder]]:before:content-[attr(data-placeholder)]') }), 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) => {
+                        '[&_p[data-placeholder]]:before:pointer-events-none [&_p[data-placeholder]]:before:float-left [&_p[data-placeholder]]:before:h-0 [&_p[data-placeholder]]:before:text-muted-foreground [&_p[data-placeholder]]:before:content-[attr(data-placeholder)]') }), widgets.map((widget) => {
+                        if (widget.type === 'callout')
+                            return createPortal(_jsx(CalloutKindMenu, { kind: widget.kind, readOnly: readOnly, onPick: (kind) => changeCallout(widget.getPos, kind), onRemove: () => changeCallout(widget.getPos, null), text: textElement }), widget.slot, widget.key);
+                        const active = caretTable !== undefined && caretTable === widget.getPos();
+                        return [
+                            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) => {
                             const next = event.relatedTarget;
                             if (!editorView.dom.contains(next) && !floatingRef.current?.contains(next))
                                 setFocused(false);