@tristan2828/ui-foundation 4.33.0 → 4.34.0

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

@@ -100,6 +100,9 @@ const TOTALS_LABEL_CLASS = 'h-auto py-(--table-cell-py)';
 const HIDDEN_HEAD_CLASS = 'h-0 p-0';
 // A group's heading row (`groupBy`): a little air above, so the groups
 // read apart, and the page's background, never the zebra stripe.
+// A column's `meta.align` as the class its header, cells and totals take.
+const ALIGN_CLASS = { center: 'text-center', right: 'text-right' };
+const alignClass = (align) => align && ALIGN_CLASS[align];
 const GROUP_HEADING_CLASS = 'h-auto bg-background pt-4 pb-1.5 align-bottom';
 // `width="content"`: from a table area 80rem wide, as wide as the columns
 // need (`w-fit` over the table's own `w-full`), at least 36rem, or the
@@ -231,7 +234,7 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
     const visibleLeafColumns = table.getVisibleLeafColumns();
     const visibleColumnCount = visibleLeafColumns.length;
     // One body row, the same in a plain table and a grouped one.
-    const renderRow = (row) => (_jsx(TableRow, { "data-highlighted": highlightRow?.(row.original) || undefined, className: cn(pinFirstColumn && ROW_GROUP_CLASS, highlightRow?.(row.original) && HIGHLIGHTED_ROW_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: 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));
+    const renderRow = (row) => (_jsx(TableRow, { "data-highlighted": highlightRow?.(row.original) || undefined, className: cn(pinFirstColumn && ROW_GROUP_CLASS, highlightRow?.(row.original) && HIGHLIGHTED_ROW_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, alignClass(cell.column.columnDef.meta?.align)), 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));
     const content = (_jsxs("div", { ref: root, className: cn('flex flex-col gap-4', width === 'content' && CONTENT_WIDTH_CLASS), "data-width": width, style: width === 'content' && !isSuccessView && lastWidth !== null
             ? { '--data-table-last-width': `${lastWidth}px` }
             : undefined, children: [toolbar, error ? (_jsx(ErrorState, { error: error, onRetry: onRetry })) : isLoading || isPastLastPage ? (_jsx(TableSkeleton, { columnCount: table.getVisibleLeafColumns().length })) : isEmpty ? (_jsxs(Empty, { "data-state": "empty", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyTitle, { children: emptyTitle }), emptyDescription && _jsx(EmptyDescription, { children: emptyDescription })] }), emptyAction] })) : (_jsxs(_Fragment, { children: [_jsxs(Table, { "data-state": "success", containerRef: containerRef, 
@@ -250,10 +253,13 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                                         const sortDirection = header.column.getIsSorted();
                                         // Hidden, a header is its name only: a sort button no
                                         // one can see would still take focus.
-                                        const content = header.isPlaceholder ? null : canSort && showHeader ? (_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()));
+                                        const content = header.isPlaceholder ? null : canSort && showHeader ? (_jsxs("button", { type: "button", className: cn('flex items-center gap-1 text-foreground', header.column.columnDef.meta?.align === 'center' && 'w-full justify-center', 
+                                            // The arrow on the label's left, so the label's
+                                            // right edge lines up with the numbers under it.
+                                            header.column.columnDef.meta?.align === 'right' && 'ml-auto flex-row-reverse'), 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(!showHeader && HIDDEN_HEAD_CLASS, 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
+                                                PINNED_LAST_COLUMN_CLASS, alignClass(header.column.columnDef.meta?.align)), "aria-sort": !canSort
                                                 ? undefined
                                                 : sortDirection === 'asc'
                                                     ? 'ascending'
@@ -261,7 +267,7 @@ export function DataTable({ columns, data, total, page, pageSize, onPageChange,
                                                         ? 'descending'
                                                         : 'none', children: !showHeader ? (_jsx("span", { className: "sr-only", children: content })) : pinFirstColumn && index === 0 ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: content })) : (content) }, header.id));
                                     }) }, headerGroup.id))) }), groupBy ? (groupRuns(rows, (row) => groupBy(row.original)).map((run, runIndex) => (_jsxs(TableBody, { "data-slot": "table-group", children: [_jsx(TableRow, { "data-slot": "table-group-heading", className: "hover:bg-transparent", children: _jsx(TableHead, { scope: "rowgroup", colSpan: visibleColumnCount, className: GROUP_HEADING_CLASS, children: _jsxs("span", { className: "sticky left-(--table-cell-px) inline-flex items-baseline gap-2", children: [_jsx("span", { className: "type-label text-foreground", children: run.label }), groupSummary && (_jsx("span", { className: "type-caption text-muted-foreground tabular-nums", children: groupSummary(run.rows.map((row) => row.original)) }))] }) }) }), _jsx("tr", { hidden: true, "aria-hidden": "true", "data-slot": "table-group-stripe-offset" }), run.rows.map(renderRow)] }, `${runIndex}:${run.key}`)))) : (_jsx(TableBody, { children: rows.map(renderRow) })), totals && (_jsx(TableFooter, { className: TOTALS_FOOTER_CLASS, children: _jsx(TableRow, { "data-slot": "table-totals", className: "hover:bg-transparent", children: visibleLeafColumns.map((column, index) => {
-                                        const className = cn(pinFirstColumn && index === 0 && PINNED_TOTALS_LABEL_CLASS, pinLastColumn && index === visibleColumnCount - 1 && PINNED_LAST_COLUMN_CLASS, column.columnDef.meta?.align === 'center' && 'text-center');
+                                        const className = cn(pinFirstColumn && index === 0 && PINNED_TOTALS_LABEL_CLASS, pinLastColumn && index === visibleColumnCount - 1 && PINNED_LAST_COLUMN_CLASS, alignClass(column.columnDef.meta?.align));
                                         return index === 0 ? (_jsx(TableHead, { scope: "row", className: cn(TOTALS_LABEL_CLASS, className), children: pinFirstColumn ? (_jsx("div", { className: PINNED_FIRST_CONTENT_CLASS, children: totals.label })) : (totals.label) }, column.id)) : (_jsx(TableCell, { className: className, children: totals.cells?.[column.id] }, column.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, {}) })] })] })] }))] }));
     return (_jsxs(EditInPlaceContext.Provider, { value: store, children: [editing && _jsx(LeaveGuard, { store: store }), width === 'content' ? _jsx("div", { className: "@container/data-table", children: content }) : content] }));

package/dist/components/app/line-chart.d.ts

@@ -0,0 +1,26 @@
+import { type LineChartMark, type LineChartPoint } from '../../lib/line-chart-layout.js';
+export type { LineChartMark, LineChartPoint } from '../../lib/line-chart-layout.js';
+export type LineChartProps = {
+    /** The figure's name: "Price over time". */
+    label: string;
+    /** The values, oldest first. */
+    points: readonly LineChartPoint[];
+    /** A dashed line at a value to reach or stay under: `{ y: 99, label: 'Buy at' }`. */
+    target?: {
+        y: number;
+        label: string;
+    };
+    /** Which point to mark with a dot and its value: the lowest, the highest or the latest. */
+    mark?: LineChartMark;
+    /** A value as shown: `usd`. Defaults to the number as the browser writes it. */
+    formatY?: (y: number) => string;
+    /** A point's x as shown: `formatPlainDate`. Defaults to x as given. */
+    formatX?: (x: LineChartPoint['x']) => string;
+    /** The plot's height in px; the chart fills its container's width. */
+    height?: number;
+    isLoading?: boolean;
+    /** What shows with no points. */
+    emptyMessage?: string;
+    className?: string;
+};
+export declare function LineChart({ label, points, target, mark, formatY, formatX, height, isLoading, emptyMessage, className, }: LineChartProps): import("react").JSX.Element;

package/dist/components/app/line-chart.js

@@ -0,0 +1,59 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// A small value-over-time chart for a record's page (#238): one series (a
+// price checked daily, a weight, a balance) against an optional dashed
+// target, with its lowest, highest or latest point marked. Plain SVG, no
+// chart library: one line, a few dozen points, nothing to zoom.
+//
+// Colours are text tokens, so each clears 3:1 on the card in both themes:
+// the line in `info-text`, the target in `success-text`. Each is its own
+// <svg> drawing in currentColor, so the package's glyph check measures it
+// like any icon. The plot stretches to its box (preserveAspectRatio
+// "none", strokes that don't scale), and the dots and words on it are
+// HTML placed by percentage, so nothing is squashed at any width.
+//
+// The picture is for the eye: a screen reader gets the figure's name,
+// a summary (first, last, lowest, highest, the target) and a table of
+// every point, all visually hidden. The four states: a skeleton at
+// `height` while loading, one quiet line with no points, a dot (no line)
+// for one point, and the chart.
+import { cn } from 'cn';
+import { Skeleton } from '../ui/skeleton.js';
+import { chartLayout } from '../../lib/line-chart-layout.js';
+const defaultY = (y) => y.toLocaleString();
+const defaultX = (x) => String(x);
+const percent = (fraction) => `${fraction * 100}%`;
+// Words on the plot sit beside a point, kept inside the plot at its
+// edges, on a plate of the card's colour so a line under them doesn't
+// cross them.
+const PLATE = 'rounded-sm bg-card px-1';
+function besides(x) {
+    return x > 0.75 ? '-translate-x-full -ml-1.5' : 'ml-1.5';
+}
+export function LineChart({ label, points, target, mark, formatY = defaultY, formatX = defaultX, height = 160, isLoading = false, emptyMessage = 'No points yet', className, }) {
+    if (isLoading) {
+        return (_jsxs("div", { "data-slot": "line-chart", "data-state": "loading", "aria-busy": "true", className: cn('min-w-0', className), children: [_jsxs("span", { className: "sr-only", children: ["Loading ", label] }), _jsx(Skeleton, { style: { height }, className: "w-full" })] }));
+    }
+    if (points.length === 0) {
+        return (_jsx("figure", { "data-slot": "line-chart", "data-state": "empty", "aria-label": label, className: cn('min-w-0', className), children: _jsx("p", { style: { height }, className: "flex items-center justify-center rounded-md border border-dashed border-border type-body text-muted-foreground", children: emptyMessage }) }));
+    }
+    const layout = chartLayout(points, target?.y, mark);
+    const values = points.map((point) => point.y);
+    const lowest = values.indexOf(Math.min(...values));
+    const highest = values.indexOf(Math.max(...values));
+    const line = layout.places.map((place) => `${place.x * 100},${place.y * 100}`).join(' ');
+    const marked = layout.markIndex === undefined ? undefined : layout.places[layout.markIndex];
+    const single = points.length === 1 ? layout.places[0] : undefined;
+    const dot = marked ?? single;
+    const describe = (index) => `${formatY(points[index].y)} on ${formatX(points[index].x)}`;
+    const summary = [
+        points.length === 1 ? `One point: ${describe(0)}` : `From ${describe(0)} to ${describe(points.length - 1)}`,
+        points.length > 2 && `lowest ${describe(lowest)}`,
+        points.length > 2 && `highest ${describe(highest)}`,
+        target && `${target.label} ${formatY(target.y)}`,
+    ]
+        .filter(Boolean)
+        .join('; ');
+    return (_jsxs("figure", { "data-slot": "line-chart", "data-state": "success", "aria-label": label, className: cn('flex min-w-0 flex-col gap-1.5', className), children: [_jsxs("div", { "aria-hidden": "true", className: "relative border-b border-border", style: { height }, children: [target && layout.targetY !== undefined && (_jsxs(_Fragment, { children: [_jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 size-full overflow-visible text-success-text", children: _jsx("line", { x1: "0", x2: "100", y1: layout.targetY * 100, y2: layout.targetY * 100, strokeWidth: 1.5, strokeDasharray: "6 4", vectorEffect: "non-scaling-stroke", className: "stroke-current" }) }), _jsxs("span", { className: cn('absolute right-0 -translate-y-full type-caption text-success-text tabular-nums', PLATE), style: { top: percent(layout.targetY) }, children: [target.label, " ", formatY(target.y)] })] })), points.length > 1 && (_jsx("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 size-full overflow-visible text-info-text", children: _jsx("polyline", { points: line, fill: "none", strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: "stroke-current" }) })), dot && (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "line-chart-mark", className: "absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-info-text ring-2 ring-card", style: { left: percent(dot.x), top: percent(dot.y) } }), _jsx("span", { className: cn('absolute type-caption font-medium text-foreground tabular-nums', PLATE, besides(dot.x), 
+                                // Under the lowest point, where the line isn't; over any other.
+                                mark === 'min' ? 'mt-1' : '-translate-y-full -mt-1'), style: { left: percent(dot.x), top: percent(dot.y) }, children: formatY(points[marked ? layout.markIndex : 0].y) })] }))] }), _jsxs("div", { "aria-hidden": "true", className: "flex justify-between gap-3 type-caption text-muted-foreground tabular-nums", children: [_jsx("span", { children: formatX(points[0].x) }), points.length > 1 && _jsx("span", { children: formatX(points[points.length - 1].x) })] }), _jsx("figcaption", { className: "sr-only", children: summary }), _jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "When" }), _jsx("th", { scope: "col", children: "Value" })] }) }), _jsx("tbody", { children: points.map((point, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: formatX(point.x) }), _jsx("td", { children: formatY(point.y) })] }, index))) })] })] }));
+}

package/dist/components/app/markdown.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from 'react';
-import { type HeadingLevel } from './prose-look.js';
+import { type HeadingFrom, type HeadingLevel } from './prose-look.js';
 export type MarkdownProps = {
     /** The Markdown source. Raw HTML in it is shown as text, never rendered. */
     children: string;
@@ -10,6 +10,13 @@ export type MarkdownProps = {
      * past <h6>. Only the element changes: each level looks the same.
      */
     headingLevel?: HeadingLevel;
+    /**
+     * Which heading takes `headingLevel`: `'hash'` (the default), `#`;
+     * `'text'`, the text's own highest, for notes that start at `##` (an
+     * import, a paste). The rest keep their distance from it. The text
+     * itself is never rewritten.
+     */
+    headingFrom?: HeadingFrom;
     className?: string;
 } & Omit<ComponentProps<'div'>, 'children'>;
-export declare function Markdown({ children, headingLevel, className, ...rest }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, headingLevel, headingFrom, className, ...rest }: MarkdownProps): import("react").JSX.Element;

package/dist/components/app/markdown.js

@@ -43,6 +43,7 @@ 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 { textTopHeading } from '../../lib/markdown-top-heading.js';
 import { CALLOUT_BOX, CALLOUT_LOOK, DEFAULT_HEADING_LEVEL, headingBand, headingClass, headingTag, PROSE, PROSE_INSET, } from './prose-look.js';
 import { headerTexts, TABLE_SCROLL_FOCUS, watchTableScroll } from './prose-table-scroll.js';
 const REMARK_PLUGINS = [remarkGfm, remarkCallouts];
@@ -75,8 +76,8 @@ function NotesTable(props) {
 // 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);
+function heading(level, top, textTop) {
+    const Tag = headingTag(level, top, textTop);
     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).
@@ -130,19 +131,22 @@ 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" }),
 };
-// The components for each `headingLevel`, made once each.
+// The components for each `headingLevel` and level that takes it (`#`,
+// or the text's highest with `headingFrom="text"`), made once each.
 const BY_LEVEL = new Map();
-function componentsFor(top) {
-    let components = BY_LEVEL.get(top);
+function componentsFor(top, textTop) {
+    const key = `${top}:${textTop}`;
+    let components = BY_LEVEL.get(key);
     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);
+            components[`h${level}`] = heading(level, top, textTop);
+        BY_LEVEL.set(key, components);
     }
     return components;
 }
-export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, className, ...rest }) {
-    const components = useMemo(() => componentsFor(headingLevel), [headingLevel]);
+export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', className, ...rest }) {
+    const textTop = useMemo(() => (headingFrom === 'text' ? textTopHeading(children) : 1), [headingFrom, children]);
+    const components = useMemo(() => componentsFor(headingLevel, textTop), [headingLevel, textTop]);
     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, headingLevel, 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, headingFrom, 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

@@ -69,6 +69,7 @@ import { acceptAttribute } from '../../lib/image-file.js';
 import { linkHref, linkRefusal } from '../../lib/link-href.js';
 import { passEscapeThrough } from './escape-passthrough.js';
 import { calloutHandler, remarkCalloutNodes } from '../../lib/markdown-callout.js';
+import { textTopHeading } from '../../lib/markdown-top-heading.js';
 import { MarkdownMergeError, markdownStyle, mergeMarkdown } from '../../lib/markdown-merge.js';
 import { DEFAULT_HEADING_LEVEL, headingBand, headingClass, headingTag } from './prose-look.js';
 import { RichTextFloatingToolbar } from './rich-text-floating-toolbar.js';
@@ -144,9 +145,9 @@ function htmlToText(fragment) {
 }
 // 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) {
+function headingView(node, top, textTop) {
     const level = Number(node.attrs.level);
-    const dom = document.createElement(headingTag(level, top));
+    const dom = document.createElement(headingTag(level, top, textTop));
     dom.className = headingClass(level);
     if (headingBand(level))
         dom.dataset.band = '';
@@ -261,7 +262,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, headingLevel = DEFAULT_HEADING_LEVEL, 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, headingFrom = 'hash', 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);
@@ -350,6 +351,8 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         if (!root)
             return;
         const original = defaultValue;
+        // The level that takes headingLevel, read from the text it loads.
+        const textTop = headingFrom === 'text' ? textTopHeading(original) : 1;
         let baseline = null;
         let cancelled = false;
         const emit = () => {
@@ -625,7 +628,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                 },
                 nodeViews: {
                     // The level when it mounts, as with defaultValue.
-                    heading: (node) => headingView(node, headingLevel),
+                    heading: (node) => headingView(node, headingLevel, textTop),
                     callout: (node, _view, getPos) => calloutView(node, 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),

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

@@ -44,14 +44,23 @@ export declare const PROSE_INSET = "[&:has(>[data-band])>:not([data-band])]:mx-3
 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;
+/**
+ * Which heading in the text takes `headingLevel`: `'hash'` (the default),
+ * `#`, whatever the text holds; `'text'`, the text's own highest heading,
+ * so notes that start at `##` (an export from Notion, a README) put their
+ * first heading straight under the page's, not a level further down.
+ */
+export type HeadingFrom = 'hash' | 'text';
 /**
  * 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.
+ * never past <h6>. `textTop` is the level that renders at `top` instead
+ * of `#` (`headingFrom="text"`: the text's highest), and a heading above
+ * it renders at `top` too. 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}`;
+export declare function headingTag(level: number, top?: HeadingLevel, textTop?: number): `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 `#`). */

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

@@ -46,13 +46,16 @@ 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.
+ * never past <h6>. `textTop` is the level that renders at `top` instead
+ * of `#` (`headingFrom="text"`: the text's highest), and a heading above
+ * it renders at `top` too. 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) {
+export function headingTag(level, top = DEFAULT_HEADING_LEVEL, textTop = 1) {
     const markdown = Math.max(1, Math.floor(level) || 1);
-    return `h${Math.min(top + markdown - 1, 6)}`;
+    const below = Math.max(0, markdown - Math.max(1, Math.floor(textTop) || 1));
+    return `h${Math.min(top + below, 6)}`;
 }
 /** Whether a heading sits on a band (`#` and `##`): the text beside it is inset (PROSE_INSET). */
 export function headingBand(level) {

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

@@ -1,5 +1,5 @@
 import type { ImageUpload } from '../../lib/image-file.js';
-import type { HeadingLevel } from './prose-look.js';
+import type { HeadingFrom, HeadingLevel } from './prose-look.js';
 export type RichTextEditorProps = {
     /** The editable element's id, for a label's `htmlFor` or a test. */
     id?: string;
@@ -62,6 +62,13 @@ export type RichTextEditorProps = {
      * when it mounts.
      */
     headingLevel?: HeadingLevel;
+    /**
+     * Which heading takes `headingLevel`: `'hash'` (the default), `#`;
+     * `'text'`, the text's own highest when it mounts, for notes that start
+     * at `##`, as in `<Markdown>`. A heading added above it renders at
+     * `headingLevel` too. The Markdown saved is never rewritten.
+     */
+    headingFrom?: HeadingFrom;
     className?: string;
     /** The field's label. A rich-text area must have one: this, or `aria-labelledby`. */
     'aria-label'?: string;

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

@@ -31,10 +31,20 @@ export interface WidgetCardProps {
     emptyMessage: string;
     /** How many rows the loading skeleton shows: the number the widget usually holds. */
     skeletonRows?: number;
+    /** A button at the header's end that folds the card to its header, and opens it again. */
+    collapsible?: boolean;
+    /** Whether a collapsible card starts folded, until the person folds or opens it. */
+    defaultCollapsed?: boolean;
+    /**
+     * Remembers a collapsible card folded or open on this device, under this
+     * key (name it for the app and the widget: `"my-app:hub.waiting"`).
+     * Left out, it starts at `defaultCollapsed` on every visit.
+     */
+    storageKey?: string;
     children?: ReactNode;
     className?: string;
 }
-export declare function WidgetCard({ title, icon: Icon, headingLevel, link, isLoading, error, onRetry, isEmpty, emptyMessage, skeletonRows, children, className, }: WidgetCardProps): import("react").JSX.Element;
+export declare function WidgetCard({ title, icon: Icon, headingLevel, link, isLoading, error, onRetry, isEmpty, emptyMessage, skeletonRows, collapsible, defaultCollapsed, storageKey, children, className, }: WidgetCardProps): import("react").JSX.Element;
 /** The rows of a WidgetCard: a list with a divider between rows. */
 export declare function WidgetList({ children, className }: {
     children: ReactNode;

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

@@ -16,6 +16,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // outline and its landmarks. Height follows content (`self-start` in a
 // grid), so a short widget doesn't stretch to its tallest neighbour.
 //
+// `collapsible` (#233) folds a card to its header, for a hub with more
+// widgets than a phone screen holds: a chevron button at the header's end
+// (named by the title, `aria-expanded`, `aria-controls` the body), the
+// header's link still there while folded. With `storageKey` the choice is
+// remembered on this device (useRememberedFlag: localStorage, in memory
+// where that's blocked). The body is hidden, not unmounted, so whatever
+// the app keeps in it stays put.
+//
 // WidgetList and WidgetListItem are the common body: rows with dividers,
 // each a primary link (or plain text) truncated to one line, an optional
 // muted note ("2 h ago") and an optional trailing element (a badge, a
@@ -28,18 +36,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // finger's target.
 import { useId } from 'react';
 import { Link } from 'react-router';
-import { ExternalLinkIcon } from 'lucide-react';
+import { ChevronDownIcon, ExternalLinkIcon } from 'lucide-react';
 import { cn } from 'cn';
 import { ErrorState } from './error-state.js';
+import { Button } from '../ui/button.js';
 import { Card, CardContent, CardHeader } from '../ui/card.js';
 import { Skeleton } from '../ui/skeleton.js';
+import { useRememberedFlag } from '../../hooks/use-remembered-flag.js';
 const HEADER_LINK_CLASS = 'shrink-0 rounded-sm type-label text-foreground underline underline-offset-4 outline-none ' +
     'hover:decoration-2 focus-visible:ring-3 focus-visible:ring-ring/50';
-export function WidgetCard({ title, icon: Icon, headingLevel = 2, link, isLoading, error, onRetry, isEmpty, emptyMessage, skeletonRows = 3, children, className, }) {
+export function WidgetCard({ title, icon: Icon, headingLevel = 2, link, isLoading, error, onRetry, isEmpty, emptyMessage, skeletonRows = 3, collapsible = false, defaultCollapsed = false, storageKey, children, className, }) {
     const headingId = useId();
+    const contentId = useId();
     const Heading = `h${headingLevel}`;
     const state = error ? 'error' : isLoading ? 'loading' : isEmpty ? 'empty' : 'success';
-    return (_jsx("section", { "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { className: "flex items-center justify-between gap-3", children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label }))] }), _jsx(CardContent, { "aria-busy": state === 'loading' || undefined, children: error ? (_jsx(ErrorState, { error: error, onRetry: onRetry, size: "compact" })) : state === 'loading' ? (_jsx(WidgetListSkeleton, { rows: skeletonRows })) : state === 'empty' ? (_jsx("p", { "data-state": "empty", className: "py-2 type-body text-muted-foreground", children: emptyMessage })) : (children) })] }) }));
+    const [folded, setFolded] = useRememberedFlag(collapsible && storageKey !== undefined ? `${storageKey}:collapsed` : undefined, defaultCollapsed);
+    const collapsed = collapsible && folded;
+    return (_jsx("section", { "aria-labelledby": headingId, "data-slot": "widget-card", "data-state": state, "data-collapsed": collapsed || undefined, className: cn('min-w-0 self-start', className), children: _jsxs(Card, { className: "density-compact:[--card-spacing:--spacing(3)]", children: [_jsxs(CardHeader, { className: "flex items-center justify-between gap-3", children: [_jsxs(Heading, { id: headingId, className: "flex min-w-0 items-center gap-2 type-section-title text-foreground", children: [Icon && _jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: title })] }), (link || collapsible) && (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [link && (_jsx(Link, { to: link.to, "aria-describedby": headingId, className: HEADER_LINK_CLASS, children: link.label })), collapsible && (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-labelledby": headingId, "aria-expanded": !collapsed, "aria-controls": contentId, onClick: () => setFolded(!collapsed), 
+                                    // The button's own open look (a filled background) would
+                                    // read as pressed: the chevron says it.
+                                    className: "-my-1 -mr-1.5 aria-expanded:not-hover:bg-transparent", children: _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn('transition-transform', collapsed && '-rotate-90') }) }))] }))] }), _jsx(CardContent, { id: contentId, hidden: collapsed, "aria-busy": state === 'loading' || undefined, children: error ? (_jsx(ErrorState, { error: error, onRetry: onRetry, size: "compact" })) : state === 'loading' ? (_jsx(WidgetListSkeleton, { rows: skeletonRows })) : state === 'empty' ? (_jsx("p", { "data-state": "empty", className: "py-2 type-body text-muted-foreground", children: emptyMessage })) : (children) })] }) }));
 }
 // One row's height, shared by the skeleton and the list so the card doesn't
 // jump: py-2 around one line of type-body (or a small control). Compact

package/dist/hooks/use-muted.d.ts

@@ -1,15 +1,9 @@
-type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;
-export type MutedStore = {
-    get: (key: string) => boolean;
-    set: (key: string, muted: boolean) => void;
-    subscribe: (key: string, listener: () => void) => () => void;
-    /** Another tab changed `key` (a `storage` event): forget the in-memory value and re-read. */
-    changedElsewhere: (key: string) => void;
-};
-export declare function createMutedStore(getStorage: () => StorageLike | undefined): MutedStore;
+import { createFlagStore, type FlagStore } from './use-remembered-flag.js';
+export type MutedStore = FlagStore;
+/** The store under useMuted, for its unit tests (tests/use-muted.test.ts). */
+export declare const createMutedStore: typeof createFlagStore;
 /**
  * `[muted, setMuted]`, remembered on this device under `key` (name it for
  * the app and screen: `"my-app:timer:muted"`). Unmuted until set.
  */
 export declare function useMuted(key: string): readonly [boolean, (muted: boolean) => void];
-export {};

package/dist/hooks/use-muted.js

@@ -1,73 +1,10 @@
-import { useCallback, useSyncExternalStore } from 'react';
-export function createMutedStore(getStorage) {
-    // Values this page set, for when storage refuses them.
-    const memory = new Map();
-    const listeners = new Map();
-    const notify = (key) => {
-        for (const listener of listeners.get(key) ?? [])
-            listener();
-    };
-    return {
-        get(key) {
-            const kept = memory.get(key);
-            if (kept !== undefined)
-                return kept;
-            try {
-                const stored = getStorage()?.getItem(key);
-                if (stored === 'true')
-                    return true;
-                if (stored === 'false')
-                    return false;
-            }
-            catch {
-                // Storage blocked: unmuted.
-            }
-            return false;
-        },
-        set(key, muted) {
-            memory.set(key, muted);
-            try {
-                getStorage()?.setItem(key, String(muted));
-            }
-            catch {
-                // Storage blocked or full: remembered in memory for this page only.
-            }
-            notify(key);
-        },
-        subscribe(key, listener) {
-            let set = listeners.get(key);
-            if (!set)
-                listeners.set(key, (set = new Set()));
-            set.add(listener);
-            return () => set.delete(listener);
-        },
-        changedElsewhere(key) {
-            memory.delete(key);
-            notify(key);
-        },
-    };
-}
-const browserStore = createMutedStore(() => (typeof window === 'undefined' ? undefined : window.localStorage));
-let listeningForOtherTabs = false;
-function listenForOtherTabs() {
-    if (listeningForOtherTabs || typeof window === 'undefined')
-        return;
-    listeningForOtherTabs = true;
-    window.addEventListener('storage', (event) => {
-        if (event.key !== null)
-            browserStore.changedElsewhere(event.key);
-    });
-}
+import { createFlagStore, useRememberedFlag } from './use-remembered-flag.js';
+/** The store under useMuted, for its unit tests (tests/use-muted.test.ts). */
+export const createMutedStore = createFlagStore;
 /**
  * `[muted, setMuted]`, remembered on this device under `key` (name it for
  * the app and screen: `"my-app:timer:muted"`). Unmuted until set.
  */
 export function useMuted(key) {
-    const subscribe = useCallback((listener) => {
-        listenForOtherTabs();
-        return browserStore.subscribe(key, listener);
-    }, [key]);
-    const muted = useSyncExternalStore(subscribe, () => browserStore.get(key), () => false);
-    const setMuted = useCallback((next) => browserStore.set(key, next), [key]);
-    return [muted, setMuted];
+    return useRememberedFlag(key, false);
 }

package/dist/hooks/use-remembered-flag.d.ts

@@ -0,0 +1,18 @@
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;
+export type FlagStore = {
+    /** What's held for `key`, or `fallback` when nothing is (or storage is blocked). */
+    get: (key: string, fallback?: boolean) => boolean;
+    set: (key: string, value: boolean) => void;
+    subscribe: (key: string, listener: () => void) => () => void;
+    /** Another tab changed `key` (a `storage` event): forget the in-memory value and re-read. */
+    changedElsewhere: (key: string) => void;
+};
+export declare function createFlagStore(getStorage: () => StorageLike | undefined): FlagStore;
+/**
+ * `[value, setValue]`, remembered on this device under `key` (name it for
+ * the app and what it's about: `"my-app:hub.waiting:collapsed"`), and
+ * `fallback` until set. Without a key it's plain state, starting at
+ * `fallback` and forgotten with the page.
+ */
+export declare function useRememberedFlag(key: string | undefined, fallback?: boolean): readonly [boolean, (value: boolean) => void];
+export {};

package/dist/hooks/use-remembered-flag.js

@@ -0,0 +1,78 @@
+import { useCallback, useState, useSyncExternalStore } from 'react';
+export function createFlagStore(getStorage) {
+    // Values this page set, for when storage refuses them.
+    const memory = new Map();
+    const listeners = new Map();
+    const notify = (key) => {
+        for (const listener of listeners.get(key) ?? [])
+            listener();
+    };
+    return {
+        get(key, fallback = false) {
+            const kept = memory.get(key);
+            if (kept !== undefined)
+                return kept;
+            try {
+                const stored = getStorage()?.getItem(key);
+                if (stored === 'true')
+                    return true;
+                if (stored === 'false')
+                    return false;
+            }
+            catch {
+                // Storage blocked: the fallback.
+            }
+            return fallback;
+        },
+        set(key, value) {
+            memory.set(key, value);
+            try {
+                getStorage()?.setItem(key, String(value));
+            }
+            catch {
+                // Storage blocked or full: remembered in memory for this page only.
+            }
+            notify(key);
+        },
+        subscribe(key, listener) {
+            let set = listeners.get(key);
+            if (!set)
+                listeners.set(key, (set = new Set()));
+            set.add(listener);
+            return () => set.delete(listener);
+        },
+        changedElsewhere(key) {
+            memory.delete(key);
+            notify(key);
+        },
+    };
+}
+const browserStore = createFlagStore(() => (typeof window === 'undefined' ? undefined : window.localStorage));
+let listeningForOtherTabs = false;
+function listenForOtherTabs() {
+    if (listeningForOtherTabs || typeof window === 'undefined')
+        return;
+    listeningForOtherTabs = true;
+    window.addEventListener('storage', (event) => {
+        if (event.key !== null)
+            browserStore.changedElsewhere(event.key);
+    });
+}
+/**
+ * `[value, setValue]`, remembered on this device under `key` (name it for
+ * the app and what it's about: `"my-app:hub.waiting:collapsed"`), and
+ * `fallback` until set. Without a key it's plain state, starting at
+ * `fallback` and forgotten with the page.
+ */
+export function useRememberedFlag(key, fallback = false) {
+    const [local, setLocal] = useState(fallback);
+    const subscribe = useCallback((listener) => {
+        if (key === undefined)
+            return () => { };
+        listenForOtherTabs();
+        return browserStore.subscribe(key, listener);
+    }, [key]);
+    const stored = useSyncExternalStore(subscribe, () => (key === undefined ? fallback : browserStore.get(key, fallback)), () => fallback);
+    const set = useCallback((next) => (key === undefined ? setLocal(next) : browserStore.set(key, next)), [key]);
+    return [key === undefined ? local : stored, set];
+}