@tristan2828/ui-foundation 4.31.0 → 4.33.0

package/dist/components/app/markdown.js

@@ -1,11 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Long text written as Markdown, rendered to read: headings, lists, links,
+// tables (GitHub-flavoured), code and quotes, in the design language's
+// type roles and tokens. A record's notes on its view (EntityView) are the
+// first use.
+//
+// Safe by default, and kept that way on purpose:
+// - Raw HTML is never rendered. react-markdown escapes it, so `<b>` in the
+//   text shows as the characters `<b>`, never as markup, and nothing the
+//   author typed silently disappears. Never add rehype-raw.
+// - URLs go through react-markdown's default urlTransform, which drops
+//   `javascript:` and other unsafe protocols. A link left with no URL
+//   renders as its text.
+// - Links open in a new tab, so following one never leaves the record.
+//
+// Headings start at <h3> by default: the page owns the <h1> (the
+// record's title) and each section its <h2>, so a `# Heading` in the text
+// sits under them instead of competing with the page's own outline. Text
+// that sits elsewhere says so with `headingLevel`, the level `#` renders
+// as (2 straight under the page's <h1>), each level below it one deeper,
+// never past <h6>, so the page's outline never skips a level (axe's
+// heading-order). They look like what they are in the text, wherever they
+// sit: `#` and `##` on a tinted band, `###` a small uppercase label, and
+// the text under them lined up with the words in the band (prose-look.ts).
+//
+// A table wider than the text scrolls sideways, and while it does, its
+// box is a tab stop, named for its columns, that the arrow keys scroll
+// (prose-table-scroll.ts). Its cells wrap first, so that's only a table
+// with many columns, or a long word in one.
+//
+// An image (`![alt](url)`, one the rich-text editor uploaded) stays inside
+// the text's width, loads only as it nears the screen, and keeps its alt
+// text; with none (`![](url)`) it's decorative to a screen reader. Its
+// address goes through the same urlTransform: a web address or a path on
+// the site (`/api/files/7/content`), never `javascript:` or `data:`.
+//
+// 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).
+import { useEffect, useMemo, useRef } from 'react';
 import ReactMarkdown, {} from 'react-markdown';
 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';
 import { CALLOUT_KINDS, remarkCallouts } from '../../lib/markdown-callout.js';
-import { CALLOUT_BOX, CALLOUT_LOOK, headingClass, PROSE, PROSE_INSET } from './prose-look.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];
 function isCalloutKind(value) {
     return CALLOUT_KINDS.includes(value);
@@ -17,14 +56,31 @@ function omitNode(props) {
     delete rest.node;
     return rest;
 }
-// The text's colour first, so a level's own (`###`'s muted label) wins.
+// A GFM table in the package's own table, in its box that scrolls
+// sideways: a tab stop and a named region only while the table overflows
+// it. Watched again after each render, so a header row with new words
+// renames it.
+function NotesTable(props) {
+    const boxRef = useRef(null);
+    useEffect(() => {
+        const box = boxRef.current;
+        if (!box)
+            return;
+        const table = box.querySelector('table');
+        const region = watchTableScroll(box, table, headerTexts(table));
+        return () => region.destroy();
+    });
+    return (_jsx(Table, { ...props, containerRef: boxRef, containerClassName: cn('rounded-lg border border-border', TABLE_SCROLL_FOCUS) }));
+}
+// A heading by its Markdown level: the element the page's outline gives
+// it (headingTag), the look its level has. The text's colour first, so a
+// level's own (`###`'s muted label) wins.
+function heading(level, top) {
+    const Tag = headingTag(level, top);
+    return (props) => (_jsx(Tag, { ...omitNode(props), "data-band": headingBand(level) || undefined, className: cn('text-foreground', headingClass(level)) }));
+}
+// Everything but the headings, which follow `headingLevel` (componentsFor).
 const COMPONENTS = {
-    h1: (props) => _jsx("h3", { ...omitNode(props), className: cn('text-foreground', headingClass(1)) }),
-    h2: (props) => _jsx("h4", { ...omitNode(props), className: cn('text-foreground', headingClass(2)) }),
-    h3: (props) => _jsx("h5", { ...omitNode(props), className: cn('text-foreground', headingClass(3)) }),
-    h4: (props) => _jsx("h6", { ...omitNode(props), className: cn('text-foreground', headingClass(4)) }),
-    h5: (props) => _jsx("h6", { ...omitNode(props), className: cn('text-foreground', headingClass(5)) }),
-    h6: (props) => _jsx("h6", { ...omitNode(props), className: cn('text-foreground', headingClass(6)) }),
     a: (props) => {
         const { href, children, ...rest } = omitNode(props);
         if (!href)
@@ -65,7 +121,7 @@ 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), containerClassName: "rounded-lg border border-border" }),
+    table: (props) => _jsx(NotesTable, { ...omitNode(props) }),
     thead: (props) => _jsx(TableHeader, { ...omitNode(props), className: "bg-muted" }),
     tbody: (props) => _jsx(TableBody, { ...omitNode(props) }),
     tr: (props) => _jsx(TableRow, { ...omitNode(props) }),
@@ -74,6 +130,19 @@ const COMPONENTS = {
     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', PROSE_INSET, className), children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, components: COMPONENTS, children: children }) }));
+// The components for each `headingLevel`, made once each.
+const BY_LEVEL = new Map();
+function componentsFor(top) {
+    let components = BY_LEVEL.get(top);
+    if (!components) {
+        components = { ...COMPONENTS };
+        for (const level of [1, 2, 3, 4, 5, 6])
+            components[`h${level}`] = heading(level, top);
+        BY_LEVEL.set(top, components);
+    }
+    return components;
+}
+export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, className, ...rest }) {
+    const components = useMemo(() => componentsFor(headingLevel), [headingLevel]);
+    return (_jsx("div", { "data-slot": "markdown", ...rest, className: cn('flex min-w-0 flex-col gap-3 type-body text-foreground break-words', PROSE_INSET, className), children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, components: components, children: children }) }));
 }

package/dist/components/app/milkdown-editor.d.ts

@@ -1,2 +1,2 @@
 import type { RichTextEditorProps } from './rich-text-editor.js';
-export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, placeholder, maxLength, toolbar, inline, upload, imageAccept, imageMaxSize, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, placeholder, maxLength, toolbar, inline, upload, imageAccept, imageMaxSize, headingLevel, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;

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

@@ -13,11 +13,15 @@ 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>; they look like <Markdown>'s (prose-look.ts). A task-list item
-//   renders a real checkbox that toggles it.
+//   <h2>. `headingLevel` moves them to where the field sits in the page's
+//   outline, as it does <Markdown>'s; only the element moves, never the
+//   level the Markdown is saved with (a node view draws it, from the
+//   node's own level). 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
+// - Tables in a box that scrolls sideways (a tab stop the arrow keys
+//   scroll while it does: rich-text-node-views.ts), 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.
@@ -66,7 +70,7 @@ import { linkHref, linkRefusal } from '../../lib/link-href.js';
 import { passEscapeThrough } from './escape-passthrough.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 { DEFAULT_HEADING_LEVEL, headingBand, headingClass, headingTag } from './prose-look.js';
 import { RichTextFloatingToolbar } from './rich-text-floating-toolbar.js';
 import { tableAt, toggleFormat } from './rich-text-formats.js';
 import { calloutKind, calloutView, tableView } from './rich-text-node-views.js';
@@ -138,10 +142,14 @@ function htmlToText(fragment) {
     });
     return Fragment.fromArray(nodes);
 }
-function headingView(node) {
+// A heading: the element `headingLevel` gives its level, the look its
+// level has. Marked as a band for PROSE_INSET (`#` and `##`).
+function headingView(node, top) {
     const level = Number(node.attrs.level);
-    const dom = document.createElement(`h${Math.min(level + 2, 6)}`);
+    const dom = document.createElement(headingTag(level, top));
     dom.className = headingClass(level);
+    if (headingBand(level))
+        dom.dataset.band = '';
     return {
         dom,
         contentDOM: dom,
@@ -253,7 +261,7 @@ function applyLink(view, target, href) {
     }
     view.dispatch(tr.scrollIntoView());
 }
-export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly = false, autoFocus = false, placeholder, maxLength, toolbar = true, inline = false, upload, imageAccept, imageMaxSize, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }) {
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly = false, autoFocus = false, placeholder, maxLength, toolbar = true, inline = false, upload, imageAccept, imageMaxSize, headingLevel = DEFAULT_HEADING_LEVEL, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }) {
     const rootRef = useRef(null);
     const editorRef = useRef(null);
     const [linkBox, setLinkBox] = useState(null);
@@ -616,9 +624,10 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                     return mod && !event.shiftKey && !event.altKey && event.key === 'Enter' && isInTable(view.state);
                 },
                 nodeViews: {
-                    heading: headingView,
+                    // The level when it mounts, as with defaultValue.
+                    heading: (node) => headingView(node, headingLevel),
                     callout: (node, _view, getPos) => calloutView(node, getPos, registry),
-                    table: (_node, _view, getPos) => tableView(getPos, registry),
+                    table: (node, view, getPos) => tableView(node, view, getPos, registry),
                     list_item: (node, view, getPos) => node.attrs.checked == null ? undefined : taskItemView(node, view, getPos),
                 },
             }));
@@ -792,7 +801,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         '[&_.ProseMirror]:flex [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', 
                         // PROSE_INSET, on the editable element: with a heading's band
                         // in the text, the rest lines up with the words in it.
-                        '[&_.ProseMirror:has(>:is(h3,h4))>:not(h3,h4)]:mx-3', !inline && '[&_.ProseMirror]:min-h-20', 
+                        '[&_.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', 

package/dist/components/app/module-card.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type To } from 'react-router';
+import type { AppError } from '../../api/contracts.js';
+import type { IconComponent } from './icon-component.js';
+/** One of the twelve categorical slots (design-language.md "Categorical colour"). */
+export type CategorySlot = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Where a module card's band goes: a route in the app, or another site. */
+export type ModuleCardPlace = {
+    to: To;
+    href?: never;
+} | {
+    href: string;
+    to?: never;
+};
+/** A link on a module card: a route in the app (`to`), or another site (`href`, opens in a new tab). */
+export type ModuleCardLink = {
+    label: string;
+} & ModuleCardPlace;
+export type ModuleCardProps = ModuleCardPlace & {
+    /** The place's name, on the band. */
+    title: string;
+    /**
+     * The place's icon: a Lucide icon, or a brand mark for another site.
+     * Decorative: the title names the place.
+     */
+    icon: IconComponent;
+    /** The slot the icon and the band's wash take. Without one, the icon is muted and the band plain. */
+    category?: CategorySlot;
+    /** The live number: `5`, or a short string (`'1–10 m'`). Omitted: no number. */
+    value?: number | string;
+    /** A few words under the number: "open", "due today", "Opens its own app". */
+    note?: string;
+    /** One link at the foot of the card (hidden on a phone, where the tile is the link). */
+    action?: ModuleCardLink;
+    /** True while the number loads. */
+    isLoading?: boolean;
+    error?: AppError | null;
+    onRetry?: () => void;
+    className?: string;
+};
+export declare function ModuleCard({ title, icon: Icon, category, to, href, value, note, action, isLoading, error, onRetry, className, }: ModuleCardProps): import("react").JSX.Element;
+export interface ModuleStripProps {
+    /** Names the strip's navigation landmark: "Places". */
+    'aria-label': string;
+    /** ModuleCards, one per place. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A hub's places, a ModuleCard each: equal columns of 170px or more that
+ * wrap, and three columns of tiles on a phone.
+ */
+export declare function ModuleStrip({ 'aria-label': label, children, className }: ModuleStripProps): import("react").JSX.Element;

package/dist/components/app/module-card.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// A place on a hub page (issue #224): one of the app's modules, or a site
+// outside it, as a small card in a strip across the top of the page.
+//
+// - The band: the place's icon, tinted with its categorical slot, and its
+//   name, on a 10% wash of the same slot over the card. The band is the
+//   link to the place (`to`, or `href` for another site, which opens in a
+//   new tab with the external-link mark).
+// - The body: one live number (`value`, in type-numeric's tabular figures)
+//   and a short `note` under it ("open", "due today"). No `value` means no
+//   number, not an empty state: a place outside the app has none.
+// - The foot: one `action` link ("Today", "Start").
+//
+// States work like WidgetCard's, for the number only: a skeleton the
+// number's size while loading, and on an error a short line and Retry
+// inside the card, so one failing place never hides the others. The band
+// and the action stay usable in every state.
+//
+// ModuleStrip lays the cards out: equal columns of 170px or more that
+// wrap (six to eight across a desktop), and on a phone three columns of
+// smaller tiles with no action, each tile a whole link (the band link's
+// target stretched over the card) at least 44px tall. Retry sits above
+// that target. data-density="compact" tightens the band and the body.
+import { Children, useId } from 'react';
+import { Link } from 'react-router';
+import { AlertCircleIcon, ExternalLinkIcon } from 'lucide-react';
+import { cn } from 'cn';
+import { Button } from '../ui/button.js';
+import { Card } from '../ui/card.js';
+import { Skeleton } from '../ui/skeleton.js';
+// Whole class names per slot, so Tailwind generates them.
+const ICON_CLASS = {
+    1: 'text-category-1',
+    2: 'text-category-2',
+    3: 'text-category-3',
+    4: 'text-category-4',
+    5: 'text-category-5',
+    6: 'text-category-6',
+    7: 'text-category-7',
+    8: 'text-category-8',
+    9: 'text-category-9',
+    10: 'text-category-10',
+    11: 'text-category-11',
+    12: 'text-category-12',
+};
+// The band's wash: the slot at 10% over the card, so foreground text on
+// it keeps its contrast (axe measures it in both themes).
+const BAND_CLASS = {
+    1: 'bg-category-1/10',
+    2: 'bg-category-2/10',
+    3: 'bg-category-3/10',
+    4: 'bg-category-4/10',
+    5: 'bg-category-5/10',
+    6: 'bg-category-6/10',
+    7: 'bg-category-7/10',
+    8: 'bg-category-8/10',
+    9: 'bg-category-9/10',
+    10: 'bg-category-10/10',
+    11: 'bg-category-11/10',
+    12: 'bg-category-12/10',
+};
+// The band link. On a phone its ::after covers the whole card, so the tile
+// is one target; the focus ring moves to that ::after with it.
+const BAND_LINK_CLASS = 'group/band flex min-h-9 items-center gap-2 px-3 py-1.5 type-label text-foreground outline-none ' +
+    'focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/50 ' +
+    'density-compact:min-h-8 density-compact:py-1 ' +
+    'max-sm:gap-1.5 max-sm:px-2 max-sm:after:absolute max-sm:after:inset-0 max-sm:after:rounded-xl ' +
+    'max-sm:focus-visible:ring-0 max-sm:focus-visible:after:ring-3 max-sm:focus-visible:after:ring-inset ' +
+    'max-sm:focus-visible:after:ring-ring/50';
+const ACTION_CLASS = 'flex items-center gap-1 border-t border-border px-3 py-2 type-label text-foreground underline ' +
+    'underline-offset-4 outline-none hover:decoration-2 focus-visible:ring-3 focus-visible:ring-inset ' +
+    'focus-visible:ring-ring/50 density-compact:py-1.5 max-sm:hidden';
+function NewTabMark() {
+    return (_jsxs(_Fragment, { children: [_jsx(ExternalLinkIcon, { "aria-hidden": "true", className: "size-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "sr-only", children: " (opens in a new tab)" })] }));
+}
+export function ModuleCard({ title, icon: Icon, category, to, href, value, note, action, isLoading = false, error, onRetry, className, }) {
+    const titleId = useId();
+    const bodyId = useId();
+    const state = error ? 'error' : isLoading ? 'loading' : 'success';
+    const band = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", className: cn('size-4 shrink-0', category ? ICON_CLASS[category] : 'text-muted-foreground') }), _jsx("span", { id: titleId, className: "min-w-0 flex-1 truncate underline-offset-4 group-hover/band:underline", children: title })] }));
+    const bandProps = {
+        'aria-describedby': bodyId,
+        'data-slot': 'module-card-band',
+        className: cn(BAND_LINK_CLASS, category && BAND_CLASS[category]),
+    };
+    return (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('relative h-full min-w-0 gap-0 py-0', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
+                (action.href !== undefined ? (_jsxs("a", { href: action.href, target: "_blank", rel: "noreferrer", "aria-describedby": titleId, className: ACTION_CLASS, children: [_jsx("span", { className: "truncate", children: action.label }), _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: action.to, "aria-describedby": titleId, className: ACTION_CLASS, children: _jsx("span", { className: "truncate", children: action.label }) })))] }));
+}
+/**
+ * A hub's places, a ModuleCard each: equal columns of 170px or more that
+ * wrap, and three columns of tiles on a phone.
+ */
+export function ModuleStrip({ 'aria-label': label, children, className }) {
+    return (_jsx("nav", { "aria-label": label, "data-slot": "module-strip", className: className, children: _jsx("ul", { className: "grid grid-cols-3 gap-2 sm:grid-cols-[repeat(auto-fill,minmax(--spacing(42.5),1fr))]", children: Children.map(children, (child) => child && _jsx("li", { className: "min-w-0", children: child })) }) }));
+}

package/dist/components/app/prose-look.d.ts

@@ -27,13 +27,33 @@ export declare const PROSE: {
     readonly rule: "my-2 h-0.5 rounded-full border-0 bg-rule";
 };
 /**
- * On the text's container: when it has a band (the `<h3>` or `<h4>` a `#`
- * or `##` renders as), everything else is inset by the band's 12px
- * padding, so the text lines up with the words in the band. Text with no
- * band stays flush, where the section's own text starts. A margin, so a
- * list's own indent and a table's or callout's box keep theirs.
+ * On the text's container: when it has a band (a `#` or `##`, marked
+ * `data-band`, whatever element its `headingLevel` makes it), everything
+ * else is inset by the band's 12px padding, so the text lines up with the
+ * words in the band. Text with no band stays flush, where the section's
+ * own text starts. A margin, so a list's own indent and a table's or
+ * callout's box keep theirs.
  */
-export declare const PROSE_INSET = "[&:has(>:is(h3,h4))>:not(h3,h4)]:mx-3";
+export declare const PROSE_INSET = "[&:has(>[data-band])>:not([data-band])]:mx-3";
+/**
+ * The HTML level a heading in the text can render as. `headingLevel` on
+ * <Markdown> and the editor is the one `#` renders as: where the text
+ * sits in the page's outline (2 straight under the page's <h1>, 3 under a
+ * section's <h2>, the default).
+ */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** `#` renders as an <h3>: the page owns the <h1> and each section its <h2>. */
+export declare const DEFAULT_HEADING_LEVEL: HeadingLevel;
+/**
+ * The element a heading renders as, by its Markdown level (1 for `#`) and
+ * the level `#` renders as: `##` one below it, `###` two below, and so on,
+ * never past <h6>. Only the element follows the page; the look (the band,
+ * the label) stays the Markdown level's (headingClass), so a `#` looks
+ * like a `#` wherever it sits.
+ */
+export declare function headingTag(level: number, top?: HeadingLevel): `h${HeadingLevel}`;
+/** Whether a heading sits on a band (`#` and `##`): the text beside it is inset (PROSE_INSET). */
+export declare function headingBand(level: number): boolean;
 /** A heading's classes by its Markdown level (1 for `#`). */
 export declare function headingClass(level: number): string;
 export type CalloutLook = {

package/dist/components/app/prose-look.js

@@ -33,13 +33,31 @@ export const PROSE = {
     rule: 'my-2 h-0.5 rounded-full border-0 bg-rule',
 };
 /**
- * On the text's container: when it has a band (the `<h3>` or `<h4>` a `#`
- * or `##` renders as), everything else is inset by the band's 12px
- * padding, so the text lines up with the words in the band. Text with no
- * band stays flush, where the section's own text starts. A margin, so a
- * list's own indent and a table's or callout's box keep theirs.
+ * On the text's container: when it has a band (a `#` or `##`, marked
+ * `data-band`, whatever element its `headingLevel` makes it), everything
+ * else is inset by the band's 12px padding, so the text lines up with the
+ * words in the band. Text with no band stays flush, where the section's
+ * own text starts. A margin, so a list's own indent and a table's or
+ * callout's box keep theirs.
  */
-export const PROSE_INSET = '[&:has(>:is(h3,h4))>:not(h3,h4)]:mx-3';
+export const PROSE_INSET = '[&:has(>[data-band])>:not([data-band])]:mx-3';
+/** `#` renders as an <h3>: the page owns the <h1> and each section its <h2>. */
+export const DEFAULT_HEADING_LEVEL = 3;
+/**
+ * The element a heading renders as, by its Markdown level (1 for `#`) and
+ * the level `#` renders as: `##` one below it, `###` two below, and so on,
+ * never past <h6>. Only the element follows the page; the look (the band,
+ * the label) stays the Markdown level's (headingClass), so a `#` looks
+ * like a `#` wherever it sits.
+ */
+export function headingTag(level, top = DEFAULT_HEADING_LEVEL) {
+    const markdown = Math.max(1, Math.floor(level) || 1);
+    return `h${Math.min(top + markdown - 1, 6)}`;
+}
+/** Whether a heading sits on a band (`#` and `##`): the text beside it is inset (PROSE_INSET). */
+export function headingBand(level) {
+    return level <= 2;
+}
 /** A heading's classes by its Markdown level (1 for `#`). */
 export function headingClass(level) {
     return level === 1 ? PROSE.heading1 : level === 2 ? PROSE.heading2 : level === 3 ? PROSE.heading3 : PROSE.heading4;

package/dist/components/app/prose-table-scroll.d.ts

@@ -0,0 +1,33 @@
+/** The box's focus ring, from the semantic tokens: on the box's own classes. */
+export declare const TABLE_SCROLL_FOCUS = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50";
+/**
+ * The region's accessible name: "Table, scrolls sideways", then the
+ * header row's first few columns ("…: Part, Width, Depth"). Empty
+ * headers are skipped; with none, the phrase alone.
+ */
+export declare function tableScrollName(columns: readonly string[]): string;
+/** What the box needs of its element: as much as tests can fake. */
+type ScrollBox = Pick<HTMLElement, 'scrollWidth' | 'clientWidth' | 'setAttribute' | 'removeAttribute' | 'getAttribute'>;
+export type TableScrollRegion = {
+    /** The header row's texts, for the name: called again when they change (the editor's edits). */
+    setColumns: (columns: readonly string[]) => void;
+    /** Checks again whether the table overflows. The observers call it; a test can too. */
+    check: () => void;
+    /**
+     * Takes the tab stop off until `resume`, the rest kept: for a press in
+     * the editor's box, whose focus belongs to the text, not the box.
+     */
+    suspend: () => void;
+    resume: () => void;
+    /** Stops watching. The box keeps whatever it last was. */
+    destroy: () => void;
+};
+/**
+ * Watches a table's scroll box: a tab stop and a named region while the
+ * table is wider than the box, nothing while it fits. `table` is what
+ * scrolls in it (observed for its size; the box alone when absent).
+ */
+export declare function watchTableScroll(box: ScrollBox, table?: Element | null, columns?: readonly string[]): TableScrollRegion;
+/** A rendered table's header row, as texts: the header cells of its first row. */
+export declare function headerTexts(table: Element | null | undefined): string[];
+export {};

package/dist/components/app/prose-table-scroll.js

@@ -0,0 +1,87 @@
+// A table in written text, <Markdown>'s or the editor's, sits in a box
+// that scrolls sideways when the table is wider than the text. A box that
+// scrolls has to be reachable from the keyboard (axe's
+// scrollable-region-focusable), or someone without a mouse can never see
+// its right-hand columns. So, only while the table overflows, the box is
+// a tab stop and a named region: "Table, scrolls sideways", then its
+// columns, which tell two tables on a page apart (two regions with one
+// name are axe's landmark-unique) and say which table it is. With the
+// arrow keys it then scrolls. A table that fits is left alone: no tab
+// stop and no region, nothing to reach that does nothing.
+//
+// It follows the table: a ResizeObserver on the box (the text's width
+// changing) and on the table (a column added, a cell's text growing)
+// checks again each time either changes size.
+/** The box's focus ring, from the semantic tokens: on the box's own classes. */
+export const TABLE_SCROLL_FOCUS = 'outline-none focus-visible:ring-3 focus-visible:ring-ring/50';
+// The columns named in the region's name; past them, an ellipsis.
+const NAMED_COLUMNS = 3;
+/**
+ * The region's accessible name: "Table, scrolls sideways", then the
+ * header row's first few columns ("…: Part, Width, Depth"). Empty
+ * headers are skipped; with none, the phrase alone.
+ */
+export function tableScrollName(columns) {
+    const named = columns.map((column) => column.replace(/\s+/g, ' ').trim()).filter(Boolean);
+    if (named.length === 0)
+        return 'Table, scrolls sideways';
+    const shown = named.slice(0, NAMED_COLUMNS).join(', ');
+    return `Table, scrolls sideways: ${shown}${named.length > NAMED_COLUMNS ? ', …' : ''}`;
+}
+// Set only when it differs, so a check that finds nothing new writes
+// nothing (the editor reads its own DOM's mutations).
+function set(box, name, value) {
+    if (box.getAttribute(name) === value)
+        return;
+    if (value === null)
+        box.removeAttribute(name);
+    else
+        box.setAttribute(name, value);
+}
+/**
+ * Watches a table's scroll box: a tab stop and a named region while the
+ * table is wider than the box, nothing while it fits. `table` is what
+ * scrolls in it (observed for its size; the box alone when absent).
+ */
+export function watchTableScroll(box, table, columns = []) {
+    let name = tableScrollName(columns);
+    let suspended = false;
+    const check = () => {
+        // scrollWidth counts what's hidden past the right edge; the two are
+        // whole pixels, so a table that just fits measures equal.
+        const overflows = box.scrollWidth > box.clientWidth;
+        set(box, 'tabindex', overflows && !suspended ? '0' : null);
+        set(box, 'role', overflows ? 'region' : null);
+        set(box, 'aria-label', overflows ? name : null);
+    };
+    // Server rendering and tests have no ResizeObserver: one check, then
+    // whatever the box was.
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(check);
+    if (observer) {
+        observer.observe(box);
+        if (table)
+            observer.observe(table);
+    }
+    check();
+    return {
+        setColumns: (next) => {
+            name = tableScrollName(next);
+            check();
+        },
+        check,
+        suspend: () => {
+            suspended = true;
+            check();
+        },
+        resume: () => {
+            suspended = false;
+            check();
+        },
+        destroy: () => observer?.disconnect(),
+    };
+}
+/** A rendered table's header row, as texts: the header cells of its first row. */
+export function headerTexts(table) {
+    const row = table?.querySelector('tr');
+    return row ? Array.from(row.querySelectorAll('th'), (cell) => cell.textContent ?? '') : [];
+}

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

@@ -1,4 +1,5 @@
 import type { ImageUpload } from '../../lib/image-file.js';
+import type { HeadingLevel } from './prose-look.js';
 export type RichTextEditorProps = {
     /** The editable element's id, for a label's `htmlFor` or a test. */
     id?: string;
@@ -52,6 +53,15 @@ export type RichTextEditorProps = {
     imageAccept?: readonly string[];
     /** The largest image `upload` takes, in bytes: a bigger one is refused before it's sent, with its size and the limit. */
     imageMaxSize?: number;
+    /**
+     * The HTML level the text's `#` renders as, where the field sits in the
+     * page's outline: 2 straight under the page's <h1> (a form), 3 (the
+     * default) under a section's <h2>. `##` is one below it, `###` two
+     * below, never past <h6>, as in `<Markdown>`. Only the element changes:
+     * the look, and the Markdown saved (`#` stays `#`), don't. Read once,
+     * when it mounts.
+     */
+    headingLevel?: HeadingLevel;
     className?: string;
     /** The field's label. A rich-text area must have one: this, or `aria-labelledby`. */
     'aria-label'?: string;

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

@@ -13,6 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Raw HTML in the text shows as its characters, as <Markdown> shows it,
 // and nothing pasted or typed can add markup.
 //
+// Headings in the text sit under the page's outline (`headingLevel`, from
+// <h3> by default), as <Markdown>'s do. A table wider than the field
+// scrolls sideways, and while it does, its box is a tab stop the arrow
+// keys scroll.
+//
 // Images in the text (`![alt](url)`) show, at most the field's width.
 // With `upload`, an image pasted, dropped or picked with the toolbar's
 // Image button is uploaded through the app's own storage and goes in as

package/dist/components/app/rich-text-node-views.d.ts

@@ -1,5 +1,5 @@
 import type { Node as ProseNode } from '@milkdown/kit/prose/model';
-import type { NodeView } from '@milkdown/kit/prose/view';
+import type { EditorView, NodeView } from '@milkdown/kit/prose/view';
 import { type CalloutKind } from '../../lib/markdown-callout.js';
 /** A slot a node view has, for the editor to render its widget into. */
 export type Widget = {
@@ -26,6 +26,9 @@ export declare function calloutView(node: ProseNode, getPos: () => number | unde
 /**
  * A table: in a box that scrolls sideways when it's wider than the text,
  * with an "add a column" bar along its right and an "add a row" bar under
- * it (widgets), Notion's way.
+ * it (widgets), Notion's way. While it scrolls, the box is a tab stop and
+ * a region named for its columns (prose-table-scroll.ts), which the arrow
+ * keys, Home and End scroll; a click in it still puts the caret in the
+ * cell clicked.
  */
-export declare function tableView(getPos: () => number | undefined, registry: WidgetRegistry): NodeView;
+export declare function tableView(node: ProseNode, view: EditorView, getPos: () => number | undefined, registry: WidgetRegistry): NodeView;