@tristan2828/ui-foundation 4.58.0 → 4.60.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`), `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–731
   - 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–620
+  - Step 7: Register routes · lines 621–634
+  - Step 8: Add Playwright specs for all three screens · lines 635–713
+  - Step 9: Register the nav entry and route names · lines 714–728
+  - Step 10: `npm run verify`. · lines 729–731
+- [Opening a record over its list](#opening-a-record-over-its-list) · lines 733–789
+- [What not to copy](#what-not-to-copy) · lines 791–817
+- [After a commit, in the backend](#after-a-commit-in-the-backend) · lines 819–836
+- [Deleting](#deleting) · lines 838–867
+- [Fields only a script writes](#fields-only-a-script-writes) · lines 869–890
 
 <!-- /index -->
 
@@ -488,6 +488,13 @@ 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).
    - **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/markdown.d.ts

@@ -26,6 +26,24 @@ export type MarkdownProps = {
      * text is never changed.
      */
     foldKey?: string;
+    /**
+     * Set `false` to keep headings plain, with no fold buttons, even when a
+     * `foldKey` is given: a page-level switch (a print view, a short note)
+     * that leaves the key in place. Nothing is folded while it's off, and
+     * 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, className, ...rest }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, headingLevel, headingFrom, foldKey: foldKeyProp, foldable, onTasksChange, className, ...rest }: MarkdownProps): import("react").JSX.Element;

package/dist/components/app/markdown.js

@@ -44,16 +44,25 @@ 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';
+//
+// 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 { headerTexts, TABLE_SCROLL_FOCUS, watchTableScroll } from './prose-table-scroll.js';
@@ -92,6 +101,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 +166,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,11 +232,26 @@ function componentsFor(top, textTop) {
     }
     return components;
 }
-export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey, className, ...rest }) {
+export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey: foldKeyProp, foldable = true, onTasksChange, className, ...rest }) {
+    const foldKey = foldable ? 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/rich-text-editor.d.ts

@@ -80,6 +80,12 @@ export type RichTextEditorProps = {
      * when it mounts.
      */
     foldKey?: string;
+    /**
+     * `false` keeps headings plain, with no fold buttons or shortcuts, even
+     * with a `foldKey`, as on `<Markdown>`. Read once, when it mounts.
+     * Default `true`.
+     */
+    foldable?: boolean;
     className?: string;
     /** The field's label. A rich-text area must have one: this, or `aria-labelledby`. */
     'aria-label'?: string;

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

@@ -34,5 +34,5 @@ import { cn } from 'cn';
 import { Skeleton } from '../ui/skeleton.js';
 const MilkdownEditor = lazy(() => import('./milkdown-editor.js'));
 export function RichTextEditor(props) {
-    return (_jsx(Suspense, { fallback: _jsxs("div", { "data-slot": "rich-text-editor", "data-state": "loading", className: cn('flex w-full flex-col', !props.inline && 'rounded-lg border border-input', props.className), children: [(props.toolbar ?? true) === true && _jsx("div", { className: "h-9 border-b border-input" }), _jsxs("div", { className: cn('flex flex-col gap-2', props.inline ? 'py-0.5' : 'min-h-24 px-2.5 py-2'), children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2" })] })] }), children: _jsx(MilkdownEditor, { ...props }) }));
+    return (_jsx(Suspense, { fallback: _jsxs("div", { "data-slot": "rich-text-editor", "data-state": "loading", className: cn('flex w-full flex-col', !props.inline && 'rounded-lg border border-input', props.className), children: [(props.toolbar ?? true) === true && _jsx("div", { className: "h-9 border-b border-input" }), _jsxs("div", { className: cn('flex flex-col gap-2', props.inline ? 'py-0.5' : 'min-h-24 px-2.5 py-2'), children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2" })] })] }), children: _jsx(MilkdownEditor, { ...props, foldKey: props.foldable === false ? undefined : props.foldKey }) }));
 }

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

@@ -22,6 +22,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

@@ -26,6 +26,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.58.0",
+  "version": "4.60.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": {