@tristan2828/ui-foundation 4.59.0 → 4.61.0

package/README.md

@@ -18,7 +18,7 @@ than installing this by hand:
 
 | Import | What |
 |---|---|
-| `@tristan2828/ui-foundation` | `AppShell`, `DataTable`, `EntityView` (with `EditableValue`, `editInPlace`), `EntityForm`, `Markdown`, `RichTextEditor`, `ErrorState`, `MultiChoice`, `MultiReference`, `ListEditor`, `PasswordInput`, `RouteErrorBoundary`, `FoundationProviders`, `DataEnvironmentBanner`, `LoginRoute`, `RegisterRoute`, `useAuth`, `useTableUrlState`, `useRecordUpdate`, `useDebouncedValue`, `createQueryClient`, `cn`; types `Page`, `AppError`, `QuerySpec`. For timed screens (`docs/foundation/timed-screens.md`): `SessionView`, `useSessionClock`, `useWakeLock`, `useMuted`, `usePrefersReducedMotion`, and the audio cues `unlockAudio`, `chime`, `sequence`, `cancelCues`, `onCuesRecovered`, `cuesInSync`, `keepAudioAlive`, `say`, `hush`, `vibrate`, `canVibrate`. For reminders (`docs/foundation/reminders.md`): `AllowReminders`, `usePushPermission`. For a record opened in a dialog over its list (`docs/foundation/add-an-entity.md`): `RecordDialogRoute`, `RecordLink`, `useOpenRecord`, `useRecordDialog`, `recordDialogState` |
+| `@tristan2828/ui-foundation` | `AppShell`, `DataTable`, `EntityView` (with `EditableValue`, `editInPlace`, printing its notes and `usePrinting`), `EntityForm`, `Markdown` (with `countTasks`, `toggleTaskAt`), `RichTextEditor`, `ErrorState`, `MultiChoice`, `MultiReference`, `ListEditor`, `PasswordInput`, `RouteErrorBoundary`, `FoundationProviders`, `DataEnvironmentBanner`, `LoginRoute`, `RegisterRoute`, `useAuth`, `useTableUrlState`, `useRecordUpdate`, `useDebouncedValue`, `createQueryClient`, `cn`; types `Page`, `AppError`, `QuerySpec`. For timed screens (`docs/foundation/timed-screens.md`): `SessionView`, `useSessionClock`, `useWakeLock`, `useMuted`, `usePrefersReducedMotion`, and the audio cues `unlockAudio`, `chime`, `sequence`, `cancelCues`, `onCuesRecovered`, `cuesInSync`, `keepAudioAlive`, `say`, `hush`, `vibrate`, `canVibrate`. For reminders (`docs/foundation/reminders.md`): `AllowReminders`, `usePushPermission`. For a record opened in a dialog over its list (`docs/foundation/add-an-entity.md`): `RecordDialogRoute`, `RecordLink`, `useOpenRecord`, `useRecordDialog`, `recordDialogState` |
 | `@tristan2828/ui-foundation/ui/<name>` | shadcn primitives: badge, button, calendar, card, checkbox, combobox, dialog, empty, field, input, input-group, label, popover, select, separator, sheet, sidebar, skeleton, sonner, spinner, switch, table, textarea, tooltip |
 | `@tristan2828/ui-foundation/gateway` | `safeFetch`, `toAppError`, `networkError` — for an app's `src/api/gateway/` only |
 | `@tristan2828/ui-foundation/mocks` | MSW: `authHandlers`, `environmentHandlers`, `resetMockAuth`, `getMockCurrentUser`, `MOCK_USER`, `exposeMswForE2E` |

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

@@ -4,22 +4,22 @@
 ## Index
 
 - [The reference files](#the-reference-files) · lines 38–60
-- [Before anything: the entity plan](#before-anything-the-entity-plan) · lines 62–724
+- [Before anything: the entity plan](#before-anything-the-entity-plan) · lines 62–743
   - Step 1: Add `<Entity>` to `openapi.yaml` · lines 100–107
   - Step 2: `npm run gen:api` · lines 108–109
   - Step 3: Add gateway tests in `tests/gateway/<entity>.test.ts`, derived from the spec · lines 110–121
   - Step 4: Add MSW handlers in `src/mocks/<entity>.ts` · lines 122–131
   - Step 5: Add a gateway module in `src/api/gateway/<entity>.ts` · lines 132–136
-  - Step 6: Copy the reference files, one for one, not just the two screens · lines 137–613
-  - Step 7: Register routes · lines 614–627
-  - Step 8: Add Playwright specs for all three screens · lines 628–706
-  - Step 9: Register the nav entry and route names · lines 707–721
-  - Step 10: `npm run verify`. · lines 722–724
-- [Opening a record over its list](#opening-a-record-over-its-list) · lines 726–782
-- [What not to copy](#what-not-to-copy) · lines 784–810
-- [After a commit, in the backend](#after-a-commit-in-the-backend) · lines 812–829
-- [Deleting](#deleting) · lines 831–860
-- [Fields only a script writes](#fields-only-a-script-writes) · lines 862–883
+  - Step 6: Copy the reference files, one for one, not just the two screens · lines 137–632
+  - Step 7: Register routes · lines 633–646
+  - Step 8: Add Playwright specs for all three screens · lines 647–725
+  - Step 9: Register the nav entry and route names · lines 726–740
+  - Step 10: `npm run verify`. · lines 741–743
+- [Opening a record over its list](#opening-a-record-over-its-list) · lines 745–801
+- [What not to copy](#what-not-to-copy) · lines 803–829
+- [After a commit, in the backend](#after-a-commit-in-the-backend) · lines 831–848
+- [Deleting](#deleting) · lines 850–879
+- [Fields only a script writes](#fields-only-a-script-writes) · lines 881–902
 
 <!-- /index -->
 
@@ -488,6 +488,25 @@ is a filled-in example while the Widgets demo is still here).
      `headingLevel={2}` for a `RichTextEditor` on a form straight under
      the page's `<h1>`. Text that's imported or pasted from another
      tool (often starting at `##`) also gets `headingFrom="text"`.
+   - **A checklist kept in the text** (`- [ ] item`, `- [x] done`) is
+     ticked where it's read with `<Markdown onTasksChange={save}>`: each
+     box a checkbox named for its item, and a tick hands over the whole
+     text with only that box flipped, for the field's save
+     (`useEdit<Entity>Field`). Without the prop the boxes are pictures
+     and the text stays read-only. A list's "2/5" column counts them
+     with `countTasks(text)` (`{ done, total }`; `total` 0 for none).
+   - **Notes worth taking on paper** (a visit's prep and questions, a
+     guide, a checklist to tick by hand): mark each of those sections
+     `print: true`. The header gets a Print notes button (`printLabel`
+     renames it) that prints the marked sections alone, under the title
+     and subtitle: no rail, no shell, no buttons, light paper in either
+     theme, headings and bullets as written, nothing folded, tables
+     ruled with room in their empty cells. `print: { answerSpace: true }`
+     also leaves space under each item of the section's numbered lists,
+     for questions answered by hand. A section's own content that should
+     print differently (a list of sub-items as plain text) reads
+     `usePrinting()`, true in the printed copy. The browser's own print
+     (Ctrl+P) still prints the whole page.
    - **Quick actions: only the fields the plan's `Quick actions` line
      names**, each a control that saves on its own (cell pattern 17,
      `widget-quick-actions.tsx`). A `yes/no` is a

package/conventions/docs/cell-patterns.md

@@ -26,15 +26,15 @@
   - [A variant: a pressed icon inside another value's cell](#a-variant-a-pressed-icon-inside-another-values-cell) · lines 565–648
 - [16. Title linking to the record's view](#16-title-linking-to-the-records-view) · lines 650–685
 - [17. Quick action on the view](#17-quick-action-on-the-view) · lines 687–760
-- [18. Editable value](#18-editable-value) · lines 762–1218
-  - [A list of sub-items](#a-list-of-sub-items) · lines 1034–1119
-  - [In a table's rows](#in-a-tables-rows) · lines 1121–1206
-  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1208–1218
-- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1220–1286
-- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1288–1352
-- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1354–1422
-- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1424–1452
-- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1454–1530
+- [18. Editable value](#18-editable-value) · lines 762–1221
+  - [A list of sub-items](#a-list-of-sub-items) · lines 1037–1122
+  - [In a table's rows](#in-a-tables-rows) · lines 1124–1209
+  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1211–1221
+- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1223–1289
+- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1291–1355
+- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1357–1425
+- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1427–1455
+- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1457–1533
 
 <!-- /index -->
 
@@ -1013,7 +1013,10 @@ const price = editInPlace({
   and Outdent for list items, where there is no Tab. A field with only the
   floating toolbar (`inline` notes) gets the same two in a small "Editor
   tools" strip over its corner while it has focus. A new checklist item
-  shows a "To-do" placeholder and the caret until you type.
+  shows a "To-do" placeholder and the caret until you type. `[] ` (or
+  `[x] `) at a line's start makes it a checklist item, a bulleted item
+  too; Enter in one makes the next, its box unticked, and Enter in an
+  empty one ends the list, as in a bulleted list.
   `toolbar={false}` leaves out the toolbars and the slash menu where a
   value is short and the shortcuts are enough; `toolbar="floating"` keeps
   the floating one and the slash menu without the bar above (an `inline`

package/dist/components/app/entity-view-print.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+/** What a section marked to print gives the printed copy. */
+export type EntityViewPrintSection = {
+    title: string;
+    /** The section's content, or its fields as label/value rows. */
+    content?: ReactNode;
+    fields?: {
+        label: string;
+        value: ReactNode;
+    }[];
+    emptyLabel?: string;
+    answerSpace: boolean;
+};
+/**
+ * The header's Print notes button and, while it prints, the printed copy.
+ * The copy mounts, then the browser's print dialog opens on it; it goes
+ * when the dialog closes (`afterprint`).
+ */
+export declare function PrintNotes({ label, title, subtitle, sections, }: {
+    label: string;
+    title?: string;
+    subtitle?: ReactNode;
+    sections: EntityViewPrintSection[];
+}): import("react").JSX.Element;

package/dist/components/app/entity-view-print.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// A record's notes on paper: EntityView's Print notes button and the copy
+// it prints. Sections marked `print` (the long text: details, prep,
+// questions) are printed under the record's title and subtitle, and
+// nothing else: no sidebar, no header bar, no rail, no buttons.
+//
+// The copy is rendered only while printing, into <body> (a portal, so it
+// sits beside the app rather than inside its layout), and styles/index.css
+// "Printed notes" hides everything else on paper and keeps it light even
+// in the dark theme. On screen it never shows. Its content is each
+// section's own markup, read-only (PrintingContext): <Markdown> prints
+// whole, unfolded, with tables ruled and room in their empty cells to
+// write. A section marked `print: { answerSpace: true }` leaves space
+// under each item of its numbered lists, for questions answered by hand.
+//
+// The browser's own print (Ctrl+P) still prints the page as it is; only
+// the button prints the notes alone.
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { PrinterIcon } from 'lucide-react';
+import { Button } from '../ui/button.js';
+import { PrintingContext } from './print-context.js';
+function isEmpty(value) {
+    return value === null || value === undefined || value === false || value === '' || (Array.isArray(value) && value.length === 0);
+}
+function PrintedSection({ section }) {
+    return (_jsxs("section", { "data-answer-space": section.answerSpace ? '' : undefined, className: "flex flex-col gap-3", children: [_jsx("h2", { className: "border-b border-border pb-1 type-label tracking-[0.08em] text-muted-foreground uppercase", children: section.title }), section.fields ? (_jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-6 gap-y-1 type-body", children: section.fields.map((field) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "type-label text-muted-foreground", children: field.label }), _jsx("dd", { className: "min-w-0 break-words text-foreground", children: isEmpty(field.value) ? '—' : field.value })] }, field.label))) })) : (_jsx("div", { className: "min-w-0 type-body break-words text-foreground", children: isEmpty(section.content) ? _jsx("span", { className: "text-muted-foreground", children: section.emptyLabel ?? 'Not set' }) : section.content }))] }));
+}
+function PrintedNotes({ title, subtitle, sections }) {
+    return createPortal(_jsx(PrintingContext.Provider, { value: true, children: _jsxs("article", { "data-print-notes": "", "data-slot": "entity-view-print", className: "hidden flex-col gap-6 bg-background text-foreground print:flex", children: [_jsxs("header", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "type-heading-1 break-words", children: title }), subtitle && _jsx("div", { className: "type-body break-words text-muted-foreground", children: subtitle })] }), sections.map((section) => (_jsx(PrintedSection, { section: section }, section.title)))] }) }), document.body);
+}
+/**
+ * The header's Print notes button and, while it prints, the printed copy.
+ * The copy mounts, then the browser's print dialog opens on it; it goes
+ * when the dialog closes (`afterprint`).
+ */
+export function PrintNotes({ label, title, subtitle, sections, }) {
+    // How many times it's been pressed since the copy last went: a press
+    // while one is up (a browser that never said the dialog closed) prints
+    // it again rather than doing nothing.
+    const [printing, setPrinting] = useState(0);
+    useEffect(() => {
+        if (printing === 0)
+            return;
+        const done = () => setPrinting(0);
+        window.addEventListener('afterprint', done);
+        window.print();
+        return () => window.removeEventListener('afterprint', done);
+    }, [printing]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", onClick: () => setPrinting((count) => count + 1), children: [_jsx(PrinterIcon, {}), label] }), printing > 0 && _jsx(PrintedNotes, { title: title, subtitle: subtitle, sections: sections })] }));
+}

package/dist/components/app/entity-view.d.ts

@@ -44,6 +44,17 @@ export type EntityViewSection = ({
      * long text and long lists. The `column` layout ignores it.
      */
     placement?: EntityViewPlacement;
+    /**
+     * The section is part of the record's printed notes: marking any one
+     * adds a Print notes button to the header, which prints the marked
+     * sections alone (their content as shown, read-only, nothing folded)
+     * under the title and subtitle. `{ answerSpace: true }` also leaves
+     * room under each item of the section's numbered lists, to write an
+     * answer by hand (a visit's questions).
+     */
+    print?: boolean | {
+        answerSpace?: boolean;
+    };
 };
 export type EntityViewPlacement = 'main' | 'rail';
 /**
@@ -115,6 +126,8 @@ export type EntityViewProps = {
      * ignores it.
      */
     mobileOrder?: EntityViewMobileOrder;
+    /** The Print notes button's words, when a section is marked `print`. Defaults to "Print notes". */
+    printLabel?: string;
     /** The rail's landmark name (its `<aside>`). Defaults to the title + " details". */
     railLabel?: string;
     isLoading: boolean;
@@ -127,4 +140,4 @@ export type EntityViewProps = {
         label: string;
     };
 };
-export declare function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout, mobileOrder, railLabel, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;
+export declare function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout, mobileOrder, railLabel, printLabel, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;

package/dist/components/app/entity-view.js

@@ -40,6 +40,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // to the dialog's bar (Open full page, Close), and not found's way out
 // closes the dialog.
 //
+// Printing the notes (entity-view-print.tsx): sections marked `print`
+// (the long text: details, prep, questions) give the header a Print notes
+// button, which prints those sections alone under the title and
+// subtitle, with no rail, shell or buttons, on light paper.
+//
 // Two layouts. `column` (the default): every section in one column capped
 // at max-w-4xl. `rail`, for a record with long content: the page takes the
 // content area's whole width, sections placed `rail` go in a narrow column
@@ -60,6 +65,7 @@ import { Card, CardContent, CardHeader } from '../ui/card.js';
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '../ui/empty.js';
 import { Skeleton } from '../ui/skeleton.js';
 import { useDocumentTitle } from '../../hooks/use-document-title.js';
+import { PrintNotes } from './entity-view-print.js';
 import { EditInPlaceContext } from './edit-in-place.js';
 import { EditInPlaceStore } from './edit-in-place-store.js';
 import { EditableList } from './editable-list.js';
@@ -153,7 +159,7 @@ function Rail({ label, sections }) {
     const [ref, fits] = useFitsWindow();
     return (_jsx("aside", { ref: ref, "aria-label": label, "data-fits": fits ? '' : undefined, className: cn(RAIL_LAYOUT.rail, RAIL_LAYOUT.sticky, 'flex min-w-0 flex-col gap-6'), children: sections.map((section) => (_jsx(ViewSection, { section: section, inRail: true }, section.title))) }));
 }
-export function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout = 'column', mobileOrder = 'rail-first', railLabel, isLoading, error, onRetry, back, }) {
+export function EntityView({ title, documentTitle, titleEdit, subtitle, badges, actions, notice, strip, sections, footer, layout = 'column', mobileOrder = 'rail-first', railLabel, printLabel = 'Print notes', isLoading, error, onRetry, back, }) {
     // Editing in place: one store per view, and the leave-page prompt only
     // while a field is open (or one is always editable).
     const [store] = useState(() => new EditInPlaceStore());
@@ -171,8 +177,16 @@ export function EntityView({ title, documentTitle, titleEdit, subtitle, badges,
         return _jsx(ErrorState, { error: error, onRetry: onRetry });
     if (isLoading)
         return _jsx(EntityViewSkeleton, { layout: layout, mobileOrder: mobileOrder });
+    const printSections = sections
+        .filter((section) => section.print)
+        .map((section) => ({
+        title: section.title,
+        ...('fields' in section ? { fields: section.fields } : { content: section.content, emptyLabel: section.emptyLabel }),
+        answerSpace: typeof section.print === 'object' && section.print.answerSpace === true,
+    }));
+    const printButton = printSections.length > 0 && (_jsx(PrintNotes, { label: printLabel, title: title, subtitle: subtitle, sections: printSections }));
     const railSections = sections.filter((section) => section.placement === 'rail');
     const mainSections = sections.filter((section) => section.placement !== 'rail');
     const main = (_jsx("div", { className: cn(RAIL_LAYOUT.main, railSections.length === 0 && RAIL_LAYOUT.mainAlone), children: mainSections.map((section) => (_jsx(ViewSection, { section: section }, section.title))) }));
-    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: layout === 'rail' ? RAIL_LAYOUT.page : 'flex max-w-4xl flex-col gap-6', "data-state": "success", "data-layout": layout, children: [editing && _jsx(LeaveGuard, { store: store }), !dialog && _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h1", { id: dialog?.titleId, className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), subtitle && (_jsx("div", { "data-slot": "entity-view-subtitle", className: "type-body break-words text-muted-foreground", children: subtitle })), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), _jsx("div", { role: "status", "data-slot": "entity-view-notice", className: "empty:hidden", children: notice }), strip && _jsx("div", { "data-slot": "entity-view-strip", children: strip }), layout === 'rail' ? (_jsxs("div", { className: RAIL_LAYOUT.columns, children: [mobileOrder === 'main-first' && main, railSections.length > 0 && (_jsx(Rail, { label: railLabel ?? `${title ?? 'Record'} details`, sections: railSections })), mobileOrder === 'rail-first' && main] })) : (sections.map((section) => _jsx(ViewSection, { section: section }, section.title))), footer && (_jsx("footer", { "data-slot": "entity-view-footer", className: "type-caption text-muted-foreground", children: footer }))] }) }));
+    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: layout === 'rail' ? RAIL_LAYOUT.page : 'flex max-w-4xl flex-col gap-6', "data-state": "success", "data-layout": layout, children: [editing && _jsx(LeaveGuard, { store: store }), !dialog && _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h1", { id: dialog?.titleId, className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), subtitle && (_jsx("div", { "data-slot": "entity-view-subtitle", className: "type-body break-words text-muted-foreground", children: subtitle })), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), (actions || printButton) && (_jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [printButton, actions] }))] }), _jsx("div", { role: "status", "data-slot": "entity-view-notice", className: "empty:hidden", children: notice }), strip && _jsx("div", { "data-slot": "entity-view-strip", children: strip }), layout === 'rail' ? (_jsxs("div", { className: RAIL_LAYOUT.columns, children: [mobileOrder === 'main-first' && main, railSections.length > 0 && (_jsx(Rail, { label: railLabel ?? `${title ?? 'Record'} details`, sections: railSections })), mobileOrder === 'rail-first' && main] })) : (sections.map((section) => _jsx(ViewSection, { section: section }, section.title))), footer && (_jsx("footer", { "data-slot": "entity-view-footer", className: "type-caption text-muted-foreground", children: footer }))] }) }));
 }

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

@@ -33,6 +33,17 @@ export type MarkdownProps = {
      * what was folded is remembered for when it's on again. Default `true`.
      */
     foldable?: boolean;
+    /**
+     * Lets the text's task items be ticked where they're read: each
+     * `- [ ]` and `- [x]` box becomes a checkbox, named for its item, and
+     * ticking one calls this with the whole text, that item's box flipped
+     * and nothing else changed, for the app to save. The tick shows at
+     * once and a second one builds on it, until `children` changes (pass
+     * the saved text back in). Return the save's promise: if it rejects,
+     * the boxes go back to `children`. Without it (the default) the boxes
+     * are pictures and the text stays read-only.
+     */
+    onTasksChange?: (markdown: string) => void | Promise<unknown>;
     className?: string;
 } & Omit<ComponentProps<'div'>, 'children'>;
-export declare function Markdown({ children, headingLevel, headingFrom, foldKey: foldKeyProp, foldable, className, ...rest }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, headingLevel, headingFrom, foldKey: foldKeyProp, foldable, onTasksChange: onTasksChangeProp, className, ...rest }: MarkdownProps): import("react").JSX.Element;

package/dist/components/app/markdown.js

@@ -44,18 +44,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // it that folds its section away (src/lib/markdown-fold.ts), remembered on
 // this device under the key and shared with an editor or NotesOutline
 // given the same one. The text itself is never changed.
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+//
+// Printed (EntityView's Print notes, PrintingContext), it's the whole
+// text: nothing folded, no fold buttons, task boxes as glyphs.
+//
+// A task item (`- [ ] to do`, `- [x] done`) shows its box as a glyph
+// with its state in words: read-only text has nothing to tick. With
+// `onTasksChange`, each box is a real checkbox, named for its item's
+// words, that ticks or unticks the item in the text and hands the whole
+// new text over to save (src/lib/markdown-tasks.ts): only that item's
+// `[ ]` or `[x]` changes, the rest stays exactly as written.
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ReactMarkdown, {} from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { cn } from 'cn';
 import { ChevronDownIcon, ExternalLinkIcon, SquareCheckIcon, SquareIcon } from 'lucide-react';
+import { Checkbox } from '../ui/checkbox.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
 import { useFolds } from '../../hooks/fold-store.js';
 import { CALLOUT_KINDS, remarkCallouts } from '../../lib/markdown-callout.js';
 import { rehypeFold, toggleFold } from '../../lib/markdown-fold.js';
 import { isHighlightColor, remarkHighlights } from '../../lib/markdown-highlight.js';
+import { toggleTaskAt } from '../../lib/markdown-tasks.js';
 import { textTopHeading } from '../../lib/markdown-top-heading.js';
 import { CALLOUT_BOX, CALLOUT_LOOK, DEFAULT_HEADING_LEVEL, FOLD_BUTTON, FOLD_HEADING, headingBand, headingClass, headingTag, PROSE, PROSE_INSET, } from './prose-look.js';
+import { usePrinting } from './print-context.js';
 import { headerTexts, TABLE_SCROLL_FOCUS, watchTableScroll } from './prose-table-scroll.js';
 const REMARK_PLUGINS = [remarkGfm, remarkCallouts, remarkHighlights];
 const HIGHLIGHT_WASH = {
@@ -92,6 +105,34 @@ function NotesTable({ hidden, ...props }) {
         // Folded away, the box goes with the table.
         containerClassName: cn('rounded-lg border border-border', TABLE_SCROLL_FOCUS, hidden && 'hidden') }));
 }
+// Ticks a task item by where it starts in the text: given only with
+// `onTasksChange`. Each task item hands its box its own start and words.
+const TaskToggleContext = createContext(null);
+const TaskItemContext = createContext(null);
+// An item's own words, for its checkbox's name: its nested lists left
+// out, so a parent is named for itself and not its children too.
+function itemText(node) {
+    if (!node)
+        return '';
+    if (node.type === 'text')
+        return node.value ?? '';
+    if (node.tagName === 'ul' || node.tagName === 'ol')
+        return '';
+    return (node.children ?? []).map(itemText).join('');
+}
+// A task item's box: a real checkbox when ticking is on (named for its
+// item, so a screen reader hears "Buy milk, checkbox, checked"), the
+// glyph otherwise.
+function TaskBox({ checked }) {
+    const toggle = useContext(TaskToggleContext);
+    const item = useContext(TaskItemContext);
+    if (toggle && item)
+        return (_jsx(Checkbox, { checked: checked, onCheckedChange: () => toggle(item.offset), 
+            // Ticking is all it does: a click never reaches whatever the text
+            // sits in (a card that opens the record, a field that edits).
+            onClick: (event) => event.stopPropagation(), "aria-label": item.name || (checked ? 'Done' : 'Not done'), "data-slot": "task-box", className: "mr-2 inline-flex align-[-0.1875rem]" }));
+    return 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" }));
+}
 // Folds a section by its heading's id: given only with `foldKey`.
 const FoldContext = createContext(null);
 // A heading by its Markdown level: the element the page's outline gives
@@ -129,11 +170,22 @@ const COMPONENTS = {
     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') && '-ml-6 list-none') });
+        const task = className?.includes('task-list-item');
+        // A task item's box hangs where a bullet would; a list under it starts
+        // at its words, and so does a loose item's next paragraph.
+        const item = (_jsx("li", { ...rest, className: cn(task && '-ml-6 list-none [&>ol]:pl-12 [&>p:not(:first-child)]:pl-6 [&>ul]:pl-12') }));
+        const node = props.node;
+        const offset = node?.position?.start.offset;
+        if (!task || offset === undefined)
+            return item;
+        // A loose item's words are its first paragraph; what's under it isn't its name.
+        const first = node?.children?.find((child) => child.tagName === 'p');
+        const name = itemText(first ?? node).replace(/\s+/g, ' ').trim();
+        return _jsx(TaskItemContext.Provider, { value: { offset, name }, children: item });
     },
-    // 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: "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" })),
+    // A GitHub task-list box (`- [x] done`): a glyph, or a checkbox with
+    // `onTasksChange` (TaskBox).
+    input: ({ checked }) => _jsx(TaskBox, { checked: Boolean(checked) }),
     blockquote: (props) => (_jsx("blockquote", { ...omitNode(props), className: "flex flex-col gap-3 border-l-2 border-border pl-4 text-muted-foreground" })),
     hr: ({ hidden }) => _jsx("hr", { hidden: hidden, className: PROSE.rule }),
     // Highlighted words (remarkHighlights marks them): the colour's wash.
@@ -184,12 +236,30 @@ function componentsFor(top, textTop) {
     }
     return components;
 }
-export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey: foldKeyProp, foldable = true, className, ...rest }) {
-    const foldKey = foldable ? foldKeyProp : undefined;
+export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey: foldKeyProp, foldable = true, onTasksChange: onTasksChangeProp, className, ...rest }) {
+    // On paper (EntityView's Print notes): every heading plain and open,
+    // every task box a picture.
+    const printing = usePrinting();
+    const onTasksChange = printing ? undefined : onTasksChangeProp;
+    const foldKey = foldable && !printing ? foldKeyProp : undefined;
     const textTop = useMemo(() => (headingFrom === 'text' ? textTopHeading(children) : 1), [headingFrom, children]);
     const components = useMemo(() => componentsFor(headingLevel, textTop), [headingLevel, textTop]);
     const [folded, setFolded] = useFolds(foldKey);
     const rehypePlugins = useMemo(() => (foldKey === undefined ? [] : [[rehypeFold, { folded }]]), [foldKey, folded]);
     const toggle = useCallback((id) => setFolded(toggleFold(folded, id)), [folded, setFolded]);
-    return (_jsx("div", { "data-slot": "markdown", "data-fold-scope": foldKey, ...rest, className: cn('flex min-w-0 flex-col gap-3 type-body text-foreground break-words', PROSE_INSET, className), children: _jsx(FoldContext.Provider, { value: foldKey === undefined ? null : toggle, children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, rehypePlugins: rehypePlugins, components: components, children: children }) }) }));
+    // Ticks not yet back as `children`: shown, and built on by the next
+    // tick, so two quick ticks on a slow save both land. Kept while
+    // `children` is the text they started from or one of their own saves
+    // coming back; dropped when it's anything else, or a save fails.
+    const [pending, setPending] = useState(null);
+    const live = pending && (pending.base === children || pending.sent.includes(children)) ? pending : null;
+    const shown = live ? live.text : children;
+    const tickTask = useCallback((offset) => {
+        const next = toggleTaskAt(shown, offset);
+        setPending({ base: live ? live.base : children, text: next, sent: [...(live ? live.sent : []), next] });
+        const saving = onTasksChange?.(next);
+        if (saving && typeof saving.then === 'function')
+            saving.then(undefined, () => setPending((current) => (current?.sent.includes(next) ? null : current)));
+    }, [onTasksChange, children, shown, live]);
+    return (_jsx("div", { "data-slot": "markdown", "data-fold-scope": foldKey, ...rest, className: cn('flex min-w-0 flex-col gap-3 type-body text-foreground break-words', PROSE_INSET, className), children: _jsx(FoldContext.Provider, { value: foldKey === undefined ? null : toggle, children: _jsx(TaskToggleContext.Provider, { value: onTasksChange ? tickTask : null, children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, rehypePlugins: rehypePlugins, components: components, children: onTasksChange ? shown : children }) }) }) }));
 }

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

@@ -30,9 +30,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   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 a table too. Notion's
-//   block keys (Ctrl+Shift+1 for a heading, +5 for bullets, …:
-//   rich-text-shortcuts.ts).
+//   in. `[] ` at a line's start makes a task item, and Enter in one the
+//   next, unticked (rich-text-tasks.ts). 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
@@ -84,6 +85,7 @@ import { tableAt, toggleFormat } from './rich-text-formats.js';
 import { calloutKind, calloutView, tableView } from './rich-text-node-views.js';
 import { droppedFiles, imageUploadPlugin, pastedImages, uploadImages, uploadPlaceholders } from './rich-text-image-upload.js';
 import { handleShortcut } from './rich-text-shortcuts.js';
+import { splitTaskItem, taskInputRule } from './rich-text-tasks.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';
@@ -751,6 +753,9 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         return true;
                     if (handleTableKey(view.state, view.dispatch, event))
                         return true;
+                    // Enter in a task item: the next one, unticked (rich-text-tasks.ts).
+                    if (event.key === 'Enter' && plain && !event.isComposing && splitTaskItem(view.state, view.dispatch))
+                        return true;
                     // 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.
@@ -768,6 +773,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         })
             .use(COMMONMARK)
             .use(gfm)
+            .use(taskInputRule)
             .use(calloutRemark)
             .use(calloutSchema)
             .use(highlightRemark)

package/dist/components/app/print-context.d.ts

@@ -0,0 +1,3 @@
+export declare const PrintingContext: import("react").Context<boolean>;
+/** True inside a printed copy of a record's notes. */
+export declare function usePrinting(): boolean;

package/dist/components/app/print-context.js

@@ -0,0 +1,10 @@
+// Whether what's rendering is a printed copy (EntityView's Print notes,
+// entity-view-print.tsx). Content that has a screen-only side reads it:
+// <Markdown> keeps its headings plain and unfolded and its task boxes as
+// pictures, since paper has nothing to click.
+import { createContext, useContext } from 'react';
+export const PrintingContext = createContext(false);
+/** True inside a printed copy of a record's notes. */
+export function usePrinting() {
+    return useContext(PrintingContext);
+}

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

@@ -0,0 +1,8 @@
+import type { EditorState, Transaction } from '@milkdown/kit/prose/state';
+export declare const taskInputRule: import("@milkdown/utils").$InputRule;
+/**
+ * Enter in a task item with words in it: the item split there, and the
+ * new one's box unticked. False anywhere else (an empty task item
+ * included), for the editor's own Enter.
+ */
+export declare function splitTaskItem(state: EditorState, dispatch: (tr: Transaction) => void): boolean;

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

@@ -0,0 +1,72 @@
+// Task lists in the rich-text editor, typed rather than picked:
+// - `[] ` (or `[ ] `, `[x] `) at a line's start makes it a task item: a
+//   plain line becomes a new task list, a list item becomes a task item.
+//   GFM's own rule only knows `[ ] ` already inside a list item.
+// - Enter in a task item makes the next one, its box unticked, whatever
+//   the item it came from. (ProseMirror's split copies the item, ticked
+//   box and all.) Enter in an empty one ends the list, as in a bulleted
+//   one: that's ProseMirror's own, left as it is.
+import { InputRule } from '@milkdown/kit/prose/inputrules';
+import { findWrapping } from '@milkdown/kit/prose/transform';
+import { splitListItem } from '@milkdown/kit/prose/schema-list';
+import { $inputRule } from '@milkdown/kit/utils';
+const TASK_START = /^\[([ xX]?)\]\s$/;
+export const taskInputRule = $inputRule(() => new InputRule(TASK_START, (state, match, start, end) => {
+    const { list_item: item, bullet_list: list } = state.schema.nodes;
+    const $start = state.doc.resolve(start);
+    const paragraph = $start.parent;
+    if (paragraph.type.name !== 'paragraph')
+        return null;
+    const checked = match[1].toLowerCase() === 'x';
+    // A list item's first line: the item becomes a task item.
+    if ($start.depth >= 2 && $start.node(-1).type === item && $start.index(-1) === 0) {
+        const node = $start.node(-1);
+        if (node.attrs.checked != null)
+            return null;
+        return state.tr.delete(start, end).setNodeMarkup($start.before(-1), undefined, { ...node.attrs, checked });
+    }
+    // A plain line: wrapped in a new list, its item a task item.
+    const tr = state.tr.delete(start, end);
+    const range = tr.doc.resolve(start).blockRange();
+    const wrapping = range && findWrapping(range, list);
+    if (!range || !wrapping)
+        return null;
+    tr.wrap(range, wrapping);
+    const itemPos = range.start + 1;
+    const made = tr.doc.nodeAt(itemPos);
+    if (made?.type !== item)
+        return null;
+    return tr.setNodeMarkup(itemPos, undefined, { ...made.attrs, checked });
+}));
+/**
+ * Enter in a task item with words in it: the item split there, and the
+ * new one's box unticked. False anywhere else (an empty task item
+ * included), for the editor's own Enter.
+ */
+export function splitTaskItem(state, dispatch) {
+    const { $from, empty } = state.selection;
+    if (!empty || $from.depth < 2 || $from.parent.type.name !== 'paragraph')
+        return false;
+    const node = $from.node(-1);
+    if (node.type.name !== 'list_item' || node.attrs.checked == null)
+        return false;
+    if ($from.parent.content.size === 0)
+        return false;
+    let split = null;
+    if (!splitListItem(node.type)(state, (tr) => (split = tr)))
+        return false;
+    const tr = split;
+    if (!tr)
+        return false;
+    const $to = tr.selection.$from;
+    for (let depth = $to.depth; depth > 0; depth--) {
+        const made = $to.node(depth);
+        if (made.type.name !== 'list_item')
+            continue;
+        if (made.attrs.checked)
+            tr.setNodeMarkup($to.before(depth), undefined, { ...made.attrs, checked: false });
+        break;
+    }
+    dispatch(tr.scrollIntoView());
+    return true;
+}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { byDay, type ByDayOptions } from './lib/group-by-day.js';
 export { EntityForm, type EntityFormProps } from './components/app/entity-form.js';
 export { KeyStats, type KeyStat, type KeyStatsProps } from './components/app/key-stats.js';
 export { EntityView, type EntityViewField, type EntityViewLayout, type EntityViewMobileOrder, type EntityViewPlacement, type EntityViewProps, type EntityViewSection, } from './components/app/entity-view.js';
+export { usePrinting } from './components/app/print-context.js';
 export { RecordDialogRoute, RecordLink, type RecordDialogRouteProps, type RecordLinkProps, } from './components/app/record-dialog.js';
 export { recordDialogState, useOpenRecord, useRecordDialog, type RecordDialogBackground, type RecordDialogContextValue, type RecordDialogState, } from './components/app/record-dialog-context.js';
 export { editInPlace, type EditControlProps, type EditInPlace, type EditInPlaceList, type EditInPlaceListOptions, type EditInPlaceOptions, type EditKind, type EditListAddProps, type EditListItemProps, } from './components/app/edit-in-place.js';
@@ -22,6 +23,7 @@ export { ErrorState } from './components/app/error-state.js';
 export { InlineCreate, type InlineCreateProps } from './components/app/inline-create.js';
 export { FoundationProviders } from './components/app/foundation-providers.js';
 export { Markdown, type MarkdownProps } from './components/app/markdown.js';
+export { countTasks, toggleTaskAt, type TaskCount } from './lib/markdown-tasks.js';
 export { NotesOutline, type NotesOutlineProps } from './components/app/notes-outline.js';
 export type { HeadingFrom, HeadingLevel } from './components/app/prose-look.js';
 export { MockModeBanner } from './components/app/mock-mode-banner.js';

package/dist/index.js

@@ -17,6 +17,7 @@ export { byDay } from './lib/group-by-day.js';
 export { EntityForm } from './components/app/entity-form.js';
 export { KeyStats } from './components/app/key-stats.js';
 export { EntityView, } from './components/app/entity-view.js';
+export { usePrinting } from './components/app/print-context.js';
 export { RecordDialogRoute, RecordLink, } from './components/app/record-dialog.js';
 export { recordDialogState, useOpenRecord, useRecordDialog, } from './components/app/record-dialog-context.js';
 export { editInPlace, } from './components/app/edit-in-place.js';
@@ -26,6 +27,7 @@ export { ErrorState } from './components/app/error-state.js';
 export { InlineCreate } from './components/app/inline-create.js';
 export { FoundationProviders } from './components/app/foundation-providers.js';
 export { Markdown } from './components/app/markdown.js';
+export { countTasks, toggleTaskAt } from './lib/markdown-tasks.js';
 export { NotesOutline } from './components/app/notes-outline.js';
 export { MockModeBanner } from './components/app/mock-mode-banner.js';
 export { MultiChoice } from './components/app/multi-choice.js';

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

@@ -0,0 +1,19 @@
+export type TaskCount = {
+    /** Task items ticked (`- [x]`). */
+    done: number;
+    /** Every task item, ticked or not, nested ones included. */
+    total: number;
+};
+/**
+ * How many task items the text has, and how many are ticked: nested
+ * items count, plain list items don't. `{ done: 0, total: 0 }` for text
+ * with none (or none at all), so a column can show nothing.
+ */
+export declare function countTasks(markdown: string | null | undefined): TaskCount;
+/**
+ * The text with the task item that starts at `offset` (its list marker's
+ * place in the text, as the parser gives it) ticked when it wasn't and
+ * unticked when it was. Everything else is left exactly as written. The
+ * text unchanged when no task item starts there.
+ */
+export declare function toggleTaskAt(markdown: string, offset: number): string;

package/dist/lib/markdown-tasks.js

@@ -0,0 +1,48 @@
+// A Markdown text's task items (GitHub's `- [ ] to do`, `- [x] done`):
+// counted, for a table's "2/5" column (countTasks), and one ticked or
+// unticked in the source, for <Markdown>'s `onTasksChange` (toggleTaskAt).
+// Parsed as <Markdown> and the rich-text editor parse it (remark, GFM), so
+// a `- [ ]` inside a code block, or a `[ ]` that isn't at an item's start,
+// is never a task.
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
+const parser = unified().use(remarkParse).use(remarkGfm);
+/**
+ * How many task items the text has, and how many are ticked: nested
+ * items count, plain list items don't. `{ done: 0, total: 0 }` for text
+ * with none (or none at all), so a column can show nothing.
+ */
+export function countTasks(markdown) {
+    const count = { done: 0, total: 0 };
+    if (!markdown)
+        return count;
+    const visit = (node) => {
+        if (node.type === 'listItem' && typeof node.checked === 'boolean') {
+            count.total += 1;
+            if (node.checked)
+                count.done += 1;
+        }
+        for (const child of node.children ?? [])
+            visit(child);
+    };
+    visit(parser.parse(markdown));
+    return count;
+}
+// An item's marker and its box, from where the item starts: `- [ ]`,
+// `1. [x]`, `* [X]`.
+const TASK_MARKER = /^([*+-]|\d{1,9}[.)])([ \t]+)\[([ xX])\]/;
+/**
+ * The text with the task item that starts at `offset` (its list marker's
+ * place in the text, as the parser gives it) ticked when it wasn't and
+ * unticked when it was. Everything else is left exactly as written. The
+ * text unchanged when no task item starts there.
+ */
+export function toggleTaskAt(markdown, offset) {
+    const match = TASK_MARKER.exec(markdown.slice(offset));
+    if (!match)
+        return markdown;
+    const box = offset + match[1].length + match[2].length + 1;
+    const next = match[3] === ' ' ? 'x' : ' ';
+    return markdown.slice(0, box) + next + markdown.slice(box + 1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.59.0",
+  "version": "4.61.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {

package/styles/index.css

@@ -158,3 +158,84 @@
     @apply font-sans;
     }
 }
+
+/* Printed notes (EntityView's Print notes, src/components/app/entity-view-print.tsx).
+   While its copy is in <body>, paper shows that copy alone: the app beside
+   it (shell, header, rail, dialogs) is left off, and the copy is in the
+   light theme's colours even when the screen is dark. Its buttons (edit
+   pencils, move and remove) are left off too: paper has nothing to press.
+   Tables are ruled all round, never cut off at the scroll box's edge, and
+   their cells tall enough to write in; a heading stays with what follows
+   it; a section marked answerSpace leaves room under each numbered item. */
+@media print {
+  body:has(> [data-print-notes]) > :not([data-print-notes]) {
+    display: none !important;
+  }
+  :root:has(> body > [data-print-notes]) {
+    --background: var(--white);
+    --foreground: var(--black);
+    --card: var(--white);
+    --card-foreground: var(--black);
+    --popover: var(--white);
+    --popover-foreground: var(--black);
+    --primary: var(--gray-950);
+    --primary-foreground: var(--gray-50);
+    --secondary: var(--gray-100);
+    --secondary-foreground: var(--gray-950);
+    --muted: var(--gray-100);
+    --muted-foreground: var(--gray-500);
+    --accent: var(--gray-100);
+    --accent-foreground: var(--gray-950);
+    --destructive-text: var(--red-700);
+    --success-text: var(--green-800);
+    --warning-text: var(--amber-800);
+    --info-text: var(--blue-800);
+    --link: var(--blue-700);
+    --highlight-amber: oklch(0.9 0.1 75);
+    --highlight-yellow: oklch(0.94 0.13 100);
+    --highlight-green: oklch(0.9 0.1 150);
+    --highlight-red: oklch(0.89 0.07 25);
+    --rule: var(--gray-400);
+    --heading-band: var(--gray-200);
+    --heading-bar: var(--blue-700);
+    --table-stripe: var(--white);
+    --border: var(--gray-400);
+    --input: var(--gray-200);
+    color-scheme: light;
+    background: var(--white);
+  }
+  [data-print-notes] button {
+    display: none !important;
+  }
+  [data-print-notes] :is(h1, h2, h3, h4, h5, h6) {
+    break-after: avoid;
+  }
+  [data-print-notes] [data-slot="table-container"] {
+    /* Not w-full: the text's inset margins would push its right edge
+       off the paper. */
+    width: auto;
+    overflow: visible;
+    border: 0;
+    border-radius: 0;
+  }
+  [data-print-notes] table {
+    border-collapse: collapse;
+  }
+  [data-print-notes] tr {
+    break-inside: avoid;
+  }
+  [data-print-notes] :is(th, td) {
+    border: 1px solid var(--border);
+    background: var(--white);
+  }
+  [data-print-notes] td {
+    height: 2.5rem;
+  }
+  [data-print-notes] [data-answer-space] ol > li {
+    padding-bottom: 5rem;
+    break-inside: avoid;
+  }
+  [data-print-notes] [data-answer-space] li ol > li {
+    padding-bottom: 0;
+  }
+}