@tristan2828/ui-foundation 4.19.0 → 4.21.0

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

@@ -269,6 +269,15 @@ is a filled-in example while the Widgets demo is still here).
      Its badge fields sit beside it, each the same `Badge` and variant map
      as its table cell. Edit (a `Button` rendering a `Link` to
      `/<entity>/:id/edit`) and the delete action go in `actions`.
+   - **The browser tab** reads the record's title once it loads
+     ("Wireless Mouse · <app>"): `EntityView` sets it from `title`, and
+     puts the nav's ("Widgets · <app>") back while loading, on an error
+     and when you leave. Nothing to add. `documentTitle` names the tab
+     otherwise, when the title alone wouldn't say what the tab is (a
+     record named by a date, say: `documentTitle={`Entry ${title}`}`);
+     `false` leaves the nav's. Any other screen names its tab with
+     `useDocumentTitle('New Widget')`, which wins over the nav's while the
+     screen is mounted.
    - **Sections**, one per row of the plan's section table, in order.
      Fields are label/value rows (`fields`), labelled as on the form. A
      section that holds one long text or one sub-record list is a block
@@ -461,7 +470,12 @@ is a filled-in example while the Widgets demo is still here).
      values should stay grey, and colour is never the only signal.
 7. **Register routes** for `/<entity>`, `/<entity>/new`, `/<entity>/:id`
    (the view) and `/<entity>/:id/edit` in `src/App.tsx`, and add a nav
-   entry to `src/nav.ts`.
+   entry to `src/nav.ts`. Its label names the browser tab on the list and
+   every page under it ("Widgets · <app>"; the home entry, '/', gives the
+   app's name alone). For a list that should open on one of its saved
+   views, `to` carries that view's query string
+   (`/widgets?status=active`): the entry is still matched on its path, so
+   it stays current on the list and the records under it.
 8. **Add Playwright specs for all three screens**, one test per state
    (`loading`, `empty`, `error`, `validation`, `success`), forced through
    MSW overrides — `forceMswOverride`, `waitForMswReady` and the

package/conventions/docs/cell-patterns.md

@@ -856,6 +856,32 @@ view, so a link in the notes is edited there, not followed, and the
 editor loads on every visit. Use it where the notes are what the page is
 for; elsewhere `autosave` alone keeps the read view at rest.
 
+**Edited where it's read (`inline: true`, implies `alwaysEditable`)**,
+Notion-style, for rich text: the editor from the start, drawn as the read
+view rather than as a field (no border, no box, the text where the
+section's text would be), so there's no mode change at all: click into
+the words and type. Its control gets `inline: true` among its props;
+pass it to `RichTextEditor`'s `inline`, with `toolbar="floating"`, which
+keeps the toolbar over a selection (Alt+F10 reaches it) and the "/" menu
+but drops the bar above the text. An empty one shows the editor's
+`placeholder` (say "or type / for blocks" in it), not the view's "Not
+set". It saves like any always-editable value (a pause after typing,
+leaving the page saves first) and is otherwise the same: on the form the
+control is the boxed editor with its fixed toolbar.
+
+```tsx
+notes: editInPlace({
+  kind: 'long-text',
+  inline: true,
+  value: widget.notes,
+  schema: widgetFormSchema.shape.notes,
+  save: (notes) => editField.mutateAsync({ notes }),
+  // The form's own control, spreading what it gets onto RichTextEditor:
+  // inline={props.inline} toolbar={props.inline ? 'floating' : true}
+  control: (props) => <WidgetNotesEditor {...} />,
+}),
+```
+
 ```tsx
 description: editInPlace({
   kind: 'long-text',
@@ -919,7 +945,9 @@ const price = editInPlace({
   beside it add a row or a column, and the toolbar's Table menu inserts
   rows and columns, aligns a column and deletes.
   `toolbar={false}` leaves out the toolbars and the slash menu where a
-  value is short and the shortcuts are enough.
+  value is short and the shortcuts are enough; `toolbar="floating"` keeps
+  the floating one and the slash menu without the bar above (an `inline`
+  field's look).
 - **The save is the single-field save** (`useRecordUpdate` with
   `optimistic: false, toastOnError: false`, the entity's
   `useEdit<Entity>Field`), `mutateAsync` of one field's PATCH.

package/dist/components/app/app-shell-nav.d.ts

@@ -1,6 +1,10 @@
 import type { ComponentType } from 'react';
 export type NavItem = {
-    /** The route this entry links to. */
+    /**
+     * The route this entry links to. It may carry a query string, to open a
+     * list on a saved view ('/widgets?status=active'): the entry is matched
+     * on its path alone, so it's still current anywhere under /widgets.
+     */
     to: string;
     label: string;
     icon: ComponentType;
@@ -39,8 +43,25 @@ export type NavGroup = {
  */
 export declare function navGroups(nav: readonly NavEntry[]): NavGroup[];
 /**
- * The `to` of the one entry to mark active: the most specific that matches.
- * With '/tasks' and '/tasks/categories' both in the nav, '/tasks/categories/2'
- * marks Categories only, and '/tasks/3' marks Tasks.
+ * The path a `to` names, without its query string or hash: what an entry is
+ * matched on, and what the a11y suite compares with the rendered sidebar.
+ */
+export declare function navPathname(to: string): string;
+/** Every `to` in a nav, each once, in order: the pages its sidebar links. */
+export declare function navTargets(nav: readonly NavEntry[]): string[];
+/**
+ * The one entry to mark active: the most specific that matches, by the path
+ * of its `to` (its query string ignored). With '/tasks' and
+ * '/tasks/categories' both in the nav, '/tasks/categories/2' marks
+ * Categories only, and '/tasks/3' marks Tasks. Of two entries with the same
+ * path, the first.
  */
+export declare function activeNavItem(nav: readonly NavEntry[], pathname: string): NavItem | undefined;
+/** The `to` of the one entry to mark active (`activeNavItem`). */
 export declare function activeNavTo(nav: readonly NavEntry[], pathname: string): string | undefined;
+/**
+ * The page the nav names for `pathname`, for the browser tab: the active
+ * entry's label. None on the home entry ('/'), whose page is the app
+ * itself, or on a page no entry covers.
+ */
+export declare function navPageLabel(nav: readonly NavEntry[], pathname: string): string | undefined;

package/dist/components/app/app-shell-nav.js

@@ -30,27 +30,58 @@ export function navGroups(nav) {
         groups.push({ items: run });
     return groups;
 }
-function matches(item, pathname) {
-    if (item.end)
-        return pathname === item.to;
-    if (pathname === item.to)
+/**
+ * The path a `to` names, without its query string or hash: what an entry is
+ * matched on, and what the a11y suite compares with the rendered sidebar.
+ */
+export function navPathname(to) {
+    const end = to.search(/[?#]/);
+    return end === -1 ? to : to.slice(0, end);
+}
+/** Every `to` in a nav, each once, in order: the pages its sidebar links. */
+export function navTargets(nav) {
+    return [...new Set(nav.flatMap((entry) => (isNavSection(entry) ? entry.items : [entry]).map((item) => item.to)))];
+}
+function matches(path, end, pathname) {
+    if (end)
+        return pathname === path;
+    if (pathname === path)
         return true;
     // On a path-segment boundary: '/tasks' is active on '/tasks/3', not on
     // '/tasks-archive'.
-    return pathname.startsWith(item.to.endsWith('/') ? item.to : `${item.to}/`);
+    return pathname.startsWith(path.endsWith('/') ? path : `${path}/`);
 }
 /**
- * The `to` of the one entry to mark active: the most specific that matches.
- * With '/tasks' and '/tasks/categories' both in the nav, '/tasks/categories/2'
- * marks Categories only, and '/tasks/3' marks Tasks.
+ * The one entry to mark active: the most specific that matches, by the path
+ * of its `to` (its query string ignored). With '/tasks' and
+ * '/tasks/categories' both in the nav, '/tasks/categories/2' marks
+ * Categories only, and '/tasks/3' marks Tasks. Of two entries with the same
+ * path, the first.
  */
-export function activeNavTo(nav, pathname) {
+export function activeNavItem(nav, pathname) {
     let best;
+    let bestLength = -1;
     for (const entry of nav) {
         for (const item of isNavSection(entry) ? entry.items : [entry]) {
-            if (matches(item, pathname) && (best === undefined || item.to.length > best.length))
-                best = item.to;
+            const path = navPathname(item.to);
+            if (matches(path, item.end, pathname) && path.length > bestLength) {
+                best = item;
+                bestLength = path.length;
+            }
         }
     }
     return best;
 }
+/** The `to` of the one entry to mark active (`activeNavItem`). */
+export function activeNavTo(nav, pathname) {
+    return activeNavItem(nav, pathname)?.to;
+}
+/**
+ * The page the nav names for `pathname`, for the browser tab: the active
+ * entry's label. None on the home entry ('/'), whose page is the app
+ * itself, or on a page no entry covers.
+ */
+export function navPageLabel(nav, pathname) {
+    const item = activeNavItem(nav, pathname);
+    return item && navPathname(item.to) !== '/' ? item.label : undefined;
+}

package/dist/components/app/app-shell.d.ts

@@ -4,14 +4,21 @@ import { type AppShellVersion } from './app-shell-version.js';
 export type { NavEntry, NavItem, NavSection } from './app-shell-nav.js';
 export type { AppShellVersion } from './app-shell-version.js';
 export type AppShellProps = {
-    /** Shown at the top of the sidebar (hidden on the collapsed icon rail). */
+    /**
+     * Shown at the top of the sidebar (hidden on the collapsed icon rail), and
+     * the app's part of the browser tab's title: "<page> · <title>", the page
+     * named by the current nav entry, or the title alone on the home entry
+     * ('/'). A screen names its own page with `useDocumentTitle` (EntityView
+     * does, with its record's title).
+     */
     title: string;
     /**
      * The app's primary navigation, in order: pages, and labelled sections of
      * pages (`{ label, items }`, one per module, say). A nav with no sections
      * is the single "Navigation" group. One entry is marked active: the most
      * specific whose route matches, so '/tasks' and '/tasks/categories' can
-     * both be listed. A section marked `collapsible` folds under its label,
+     * both be listed. An entry is matched on its `to`'s path, so `to` can
+     * open a list on a saved view ('/tasks?status=open'). A section marked `collapsible` folds under its label,
      * remembered per browser (`defaultOpen` for the first visit); the one
      * holding the current page stays open, and the icon rail shows every
      * section's items.

package/dist/components/app/app-shell.js

@@ -4,11 +4,12 @@ import { useTheme } from 'next-themes';
 import { useEffect, useId, useState } from 'react';
 import { Link, Navigate, Outlet, useLocation } from 'react-router';
 import { useAuth } from '../../auth/use-auth.js';
-import { activeNavTo, navGroups } from './app-shell-nav.js';
+import { activeNavTo, navGroups, navPageLabel } from './app-shell-nav.js';
 import { versionHref, versionLabel } from './app-shell-version.js';
 import { ErrorState } from './error-state.js';
 import { useErrorReporter } from '../../error-reporting/error-reporting-context.js';
 import { ReportRoutePattern } from '../../error-reporting/error-reporting-provider.js';
+import { useShellDocumentTitle } from '../../hooks/use-document-title.js';
 import { cn } from 'cn';
 import { Button } from '../ui/button.js';
 import { Skeleton } from '../ui/skeleton.js';
@@ -118,6 +119,7 @@ export function AppShell({ title, nav, sidebarExtra, defaultSidebarOpen = true,
     // resolves: that runs before React re-renders, and the <Navigate> this
     // component then renders starts a second navigation that wins.
     const [isLoggingOut, setIsLoggingOut] = useState(false);
+    useShellDocumentTitle(title, navPageLabel(nav, location.pathname));
     if (status === 'loading') {
         return _jsx(AppShellSkeleton, {});
     }

package/dist/components/app/edit-in-place.d.ts

@@ -24,6 +24,11 @@ export type EditControlProps<TDraft> = {
     describedBy: string;
     /** For a control that can't always produce a value to save (RichTextEditor's `onProblem`). */
     onProblem: (message: string | null) => void;
+    /**
+     * The field is `inline`: always editable, drawn as the text it edits.
+     * Give it to RichTextEditor's `inline` (with `toolbar="floating"`).
+     */
+    inline?: boolean;
 };
 /**
  * How the value saves, which follows from its control:
@@ -60,6 +65,7 @@ export type EditInPlace = {
     isEqual?: (a: unknown, b: unknown) => boolean;
     autosave?: boolean;
     alwaysEditable?: boolean;
+    inline?: boolean;
 };
 export type EditInPlaceOptions<TDraft, TValue> = {
     kind: EditKind;
@@ -100,6 +106,15 @@ export type EditInPlaceOptions<TDraft, TValue> = {
      * in rich text is edited there, not followed.
      */
     alwaysEditable?: boolean;
+    /**
+     * For long text: always editable (implies `alwaysEditable`), and drawn
+     * as the read view, not as a field: no border, no box, typed into where
+     * it's read (Notion-style). The control gets `inline: true`; pass it to
+     * RichTextEditor's `inline`, with `toolbar="floating"` (the toolbar over
+     * a selection and the slash menu, no bar above the text). An empty one
+     * shows the editor's `placeholder`, not the view's "Not set".
+     */
+    inline?: boolean;
 };
 /** What a list item's fields are given while it's edited: a control's props, plus where the item is. */
 export type EditListItemProps<TItem> = EditControlProps<TItem> & {

package/dist/components/app/editable-value.js

@@ -16,6 +16,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   Ctrl/Cmd+Enter and Esc save what's left now and close it.
 // - `alwaysEditable`: the control is shown at rest, with no pencil and no
 //   click to open, and never closes. Ctrl/Cmd+Enter and Esc save now.
+// - `inline`: always editable, and the control is told to look like the
+//   value it edits (`inline` among its props).
 import { CheckIcon, PencilIcon } from 'lucide-react';
 import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { useBlocker } from 'react-router';
@@ -58,10 +60,13 @@ export function EditableField({ label, edit, children, layout = 'block', classNa
     const key = useId();
     const controlId = `${key}-control`;
     const describedBy = `${key}-status`;
-    // The latest config, read by the store whenever it needs it.
+    const always = Boolean(edit.alwaysEditable || edit.inline);
+    const autosave = always || Boolean(edit.autosave);
+    // The latest config, read by the store whenever it needs it (`inline`
+    // is always editable to it).
     const config = useRef(edit);
     useLayoutEffect(() => {
-        config.current = edit;
+        config.current = always && !edit.alwaysEditable ? { ...edit, alwaysEditable: true } : edit;
     });
     useEffect(() => store.register(key, () => config.current), [store, key]);
     const state = useSyncExternalStore(store.subscribe, () => store.state(key), () => store.state(key));
@@ -72,8 +77,6 @@ export function EditableField({ label, edit, children, layout = 'block', classNa
     // Set by a keyboard save or Esc: the caret goes back to the edit button.
     const refocus = useRef(false);
     const blurTimer = useRef(undefined);
-    const always = Boolean(edit.alwaysEditable);
-    const autosave = always || Boolean(edit.autosave);
     // An always-editable control starts over (it's uncontrolled: a rich-text
     // editor reads its value once) when the value changed elsewhere while
     // nothing of its own was unsaved and the caret wasn't in it.
@@ -209,7 +212,7 @@ export function EditableField({ label, edit, children, layout = 'block', classNa
     const open = state.status === 'closed' ? { status: 'open', draft: edit.value, error: null, autosave: undefined, revision: 0 } : state;
     const saving = open.status === 'saving';
     const autosaving = open.autosave === 'saving';
-    return (_jsxs("span", { ref: container, "data-slot": "editable-value", "data-state": saving || autosaving ? 'saving' : open.error ? 'failed' : 'editing', onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, className: cn('flex min-w-0 flex-col gap-1.5', layout === 'block' ? 'w-full' : 'w-fit max-w-full', className), children: [_jsx(Control, { render: edit.control, id: controlId, value: open.draft, onChange: (value) => store.change(key, value), commit: commit, cancel: cancel, disabled: saving, invalid: !saving && open.error !== null, label: label, describedBy: describedBy, onProblem: (problem) => store.report(key, problem) }, open.revision ?? 0), _jsx("span", { id: describedBy, className: "type-body", children: autosave ? (_jsxs(_Fragment, { children: [open.error && _jsx(FieldError, { className: "type-caption", children: open.error }), _jsx("span", { role: "status", className: "inline-flex items-center gap-1.5 type-caption text-muted-foreground", children: autosaving ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", className: "size-3.5" }), "Saving\u2026"] })) : (open.autosave === 'saved' &&
+    return (_jsxs("span", { ref: container, "data-slot": "editable-value", "data-state": saving || autosaving ? 'saving' : open.error ? 'failed' : 'editing', onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, className: cn('flex min-w-0 flex-col gap-1.5', layout === 'block' ? 'w-full' : 'w-fit max-w-full', className), children: [_jsx(Control, { render: edit.control, id: controlId, value: open.draft, onChange: (value) => store.change(key, value), commit: commit, cancel: cancel, disabled: saving, invalid: !saving && open.error !== null, label: label, describedBy: describedBy, onProblem: (problem) => store.report(key, problem), inline: Boolean(edit.inline) }, open.revision ?? 0), _jsx("span", { id: describedBy, className: "type-body", children: autosave ? (_jsxs(_Fragment, { children: [open.error && _jsx(FieldError, { className: "type-caption", children: open.error }), _jsx("span", { role: "status", className: "inline-flex items-center gap-1.5 type-caption text-muted-foreground", children: autosaving ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", className: "size-3.5" }), "Saving\u2026"] })) : (open.autosave === 'saved' &&
                                 !open.error && (_jsxs(_Fragment, { children: [_jsx(CheckIcon, { "aria-hidden": "true", className: "size-3.5" }), "Saved"] }))) })] })) : saving ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1.5 type-caption text-muted-foreground", children: [_jsx(Spinner, { "aria-hidden": "true", className: "size-3.5" }), "Saving\u2026"] })) : (open.error && _jsx(FieldError, { className: "type-caption", children: open.error })) })] }));
 }
 /**

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

@@ -53,8 +53,15 @@ export type EntityViewPlacement = 'main' | 'rail';
  */
 export type EntityViewLayout = 'column' | 'rail';
 export type EntityViewProps = {
-    /** The record's name or title, the page's <h1>. */
+    /** The record's name or title, the page's <h1>, and the browser tab's once it loads (`documentTitle`). */
     title?: string;
+    /**
+     * The browser tab's name for this record once it has loaded: `title`
+     * unless this says otherwise, read as "<this> · <app>" inside `AppShell`.
+     * `false` leaves the tab to the nav ("Widgets · <app>"). Loading, an
+     * error, and leaving the view all show the nav's title.
+     */
+    documentTitle?: string | false;
     /** The title is editable in place; `label` is the field's ("Name"). */
     titleEdit?: EditInPlace & {
         label: string;
@@ -94,4 +101,4 @@ export type EntityViewProps = {
         label: string;
     };
 };
-export declare function EntityView({ title, titleEdit, badges, actions, notice, sections, footer, layout, railLabel, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;
+export declare function EntityView({ title, documentTitle, titleEdit, badges, actions, notice, sections, footer, layout, railLabel, isLoading, error, onRetry, back, }: EntityViewProps): import("react").JSX.Element;

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

@@ -49,6 +49,7 @@ import { Button } from '../ui/button.js';
 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 { EditInPlaceContext } from './edit-in-place.js';
 import { EditInPlaceStore } from './edit-in-place-store.js';
 import { EditableList } from './editable-list.js';
@@ -140,11 +141,12 @@ 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, titleEdit, badges, actions, notice, sections, footer, layout = 'column', railLabel, isLoading, error, onRetry, back, }) {
+export function EntityView({ title, documentTitle, titleEdit, badges, actions, notice, sections, footer, layout = 'column', railLabel, 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());
     const editing = useSyncExternalStore(store.subscribe, () => store.editing, () => store.editing);
+    useDocumentTitle(isLoading || error || documentTitle === false ? undefined : (documentTitle ?? title));
     if (error?.kind === 'notfound') {
         // A record that doesn't exist and one that belongs to another user are
         // the same plain 404, so this never says which. Retrying can't help.

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, 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, 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

@@ -33,11 +33,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   length as it nears `maxLength`.
 // - A fixed toolbar above the text (rich-text-toolbar.tsx), and a
 //   floating one over selected words (rich-text-floating-toolbar.tsx),
-//   unless `toolbar={false}`. Alt+F10 reaches the floating one when it
-//   shows, else the fixed one.
+//   unless `toolbar={false}`; `toolbar="floating"` leaves out the fixed
+//   one. Alt+F10 reaches the floating one when it shows, else the fixed one.
 // - A slash menu (rich-text-slash.ts, rich-text-slash-menu.tsx): "/" at a
 //   line's start lists the blocks it can become, also unless
 //   `toolbar={false}`.
+// - `inline`: the field drawn as the text it edits (no border, no box),
+//   for notes that are always editable where they're read.
 import { useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { defaultValueCtx, Editor, editorViewCtx, editorViewOptionsCtx, parserCtx, remarkStringifyOptionsCtx, rootCtx, schemaCtx, serializerCtx, } from '@milkdown/kit/core';
@@ -238,7 +240,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, 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, 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);
@@ -273,6 +275,10 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     useEffect(() => {
         latest.current = { onChange, onProblem, readOnly, placeholder };
     });
+    // The fixed bar above the text, and the menus over it (the floating
+    // toolbar and the slash menu), which `'floating'` keeps on their own.
+    const fixedToolbar = toolbar === true;
+    const menus = toolbar !== false;
     const ids = useId();
     const counterId = `${ids}-count`;
     // The editable element's id: the app's, or one of its own, so the
@@ -297,11 +303,11 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         attributes['aria-invalid'] = 'true';
     if (placeholder)
         attributes['aria-placeholder'] = placeholder;
-    if (toolbar)
+    if (menus)
         attributes['aria-keyshortcuts'] = 'Alt+F10';
     // The slash menu: open while a "/" typed at a line's start is followed
     // by something some block answers to, and the field has focus.
-    const slash = toolbar && !readOnly && focused && editorState ? slashQuery(editorState) : null;
+    const slash = menus && !readOnly && focused && editorState ? slashQuery(editorState) : null;
     const slashMatches = slash ? slashItems(slash.query) : [];
     const slashOpen = slash !== null && slashMatches.length > 0;
     const slashMenuKey = slash ? `${slash.from}:${slash.query}` : '';
@@ -674,7 +680,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     // The floating toolbar: words selected, focus in the field, the mouse up,
     // and nothing else open over the text.
     const selection = editorState?.selection;
-    const floatingOpen = Boolean(toolbar &&
+    const floatingOpen = Boolean(menus &&
         !readOnly &&
         editorView &&
         focused &&
@@ -696,15 +702,19 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         setLinkBox(null);
         editorRef.current?.action((ctx) => ctx.get(editorViewCtx).focus());
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", className: cn('relative flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { ref: toolbarRef, state: editorState, readOnly: readOnly, 
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", className: cn('relative flex w-full min-w-0 flex-col bg-transparent type-body text-foreground break-words', 
+                // Inline, it's the text itself: the caret shows where it's
+                // edited, and a refusal's reason under it says what's wrong.
+                !inline &&
+                    'rounded-lg border border-input transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', !inline && 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [fixedToolbar && (_jsx(RichTextToolbar, { ref: toolbarRef, state: editorState, readOnly: readOnly, 
                         // Only once the editor is made: until then the editable element,
                         // and its id, aren't in the page (axe: aria-valid-attr-value).
-                        controls: editorState ? editableId : undefined, onFormat: runFormat, onTable: runTable, text: textElement })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
+                        controls: editorState ? editableId : undefined, onFormat: runFormat, onTable: runTable, text: textElement })), _jsx("div", { ref: rootRef, className: cn(!inline && 'min-h-24 px-2.5 py-2', 
                         // Read-only text is muted; the toolbar's buttons say so by being disabled.
                         'has-[[aria-readonly=true]]:text-muted-foreground', 
                         // The same type roles <Markdown> uses, so text reads the same
                         // being edited as being read.
-                        '[&_.ProseMirror]:flex [&_.ProseMirror]:min-h-20 [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', 
+                        '[&_.ProseMirror]:flex [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', !inline && '[&_.ProseMirror]:min-h-20', 
                         // ProseMirror's own required style (prosemirror-view's CSS): spaces
                         // as typed, so one at the end of a line isn't kept as &nbsp;.
                         '[&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words', '[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-1 [&_ul]:pl-6', '[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-1 [&_ol]:pl-6', '[&_li[data-item-type=task]]:-ml-6 [&_li[data-item-type=task]]:flex [&_li[data-item-type=task]]:list-none [&_li[data-item-type=task]]:items-start [&_li[data-item-type=task]]:gap-2', '[&_li[data-item-type=task]>input]:mt-1 [&_li[data-item-type=task]>input]:size-4 [&_li[data-item-type=task]>input]:accent-primary', 

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

@@ -23,10 +23,19 @@ export type RichTextEditorProps = {
      * lists, link, …), each button with its shortcut, and one floating over
      * selected words (bold to link). Alt+F10 reaches them from the text.
      * With them, "/" at a line's start lists the blocks the line can become
-     * (the slash menu). On by default; `false` leaves the text alone, its
-     * shortcuts still working.
+     * (the slash menu). On by default; `'floating'` keeps the floating one
+     * and the slash menu but no bar above the text (Notion-style, with
+     * `inline`); `false` leaves the text alone, its shortcuts still working.
      */
-    toolbar?: boolean;
+    toolbar?: boolean | 'floating';
+    /**
+     * Looks like the text it edits: no border, no box, no padding, so it
+     * sits where `<Markdown>` would and reads the same. For notes that are
+     * always editable in place (`editInPlace`'s `inline`, which the control
+     * gets as `props.inline`); give it `toolbar="floating"` and a
+     * `placeholder`, which is all an empty one shows.
+     */
+    inline?: 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

@@ -21,5 +21,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 rounded-lg border border-input', props.className), children: [props.toolbar !== false && _jsx("div", { className: "h-9 border-b border-input" }), _jsxs("div", { className: "flex min-h-24 flex-col gap-2 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 }) }));
 }

package/dist/hooks/use-document-title.d.ts

@@ -0,0 +1,27 @@
+export declare const DOCUMENT_TITLE_SEPARATOR = " \u00B7 ";
+type TitleTarget = {
+    title: string;
+};
+export type DocumentTitles = {
+    /** AppShell's: the app's name and the nav's page (none on the home page). `null` once it unmounts. */
+    setShell: (shell: {
+        app: string;
+        page?: string;
+    } | null) => void;
+    /** A view's page title, by the view's id. `undefined` (not loaded yet) leaves the tab to the others; its place is kept. */
+    setView: (id: string, page: string | undefined) => void;
+    /** The view unmounted. */
+    releaseView: (id: string) => void;
+};
+export declare function createDocumentTitles(target: TitleTarget): DocumentTitles;
+/**
+ * Names the browser tab after this screen while it's mounted: "New Widget"
+ * reads "New Widget · <app>" inside `AppShell`. Wins over the page the nav
+ * names, whichever arrives first; when the screen goes, the nav's title
+ * comes back. `undefined` (a record still loading) leaves the nav's.
+ * `EntityView` already does this with its `title`.
+ */
+export declare function useDocumentTitle(title: string | undefined): void;
+/** AppShell's side: the app's name and the page its nav names. */
+export declare function useShellDocumentTitle(app: string, page: string | undefined): void;
+export {};

package/dist/hooks/use-document-title.js

@@ -0,0 +1,72 @@
+import { useEffect, useId } from 'react';
+// The browser tab's title, "<page> · <app>", from two sources that can
+// arrive in either order: AppShell's (the app's name, and the page its nav
+// names for the current path) and the views' own (useDocumentTitle, and
+// EntityView's record once it loads). A view's title wins over the nav's
+// while that view is mounted, whichever was set first, and the nav's comes
+// back when it goes. With neither, the tab keeps the title it had before
+// (index.html's).
+//
+// createDocumentTitles takes the document, so the rules are unit tested
+// against a fake one (tests/use-document-title.test.ts).
+export const DOCUMENT_TITLE_SEPARATOR = ' · ';
+export function createDocumentTitles(target) {
+    let shell = null;
+    // In the order views first set a title: the latest one showing wins.
+    const views = new Map();
+    // The title before anything here set one, put back once nothing sets one.
+    let before = null;
+    function apply() {
+        const view = [...views.values()].reverse().find((page) => page);
+        const page = view ?? shell?.page;
+        const title = shell ? (page ? `${page}${DOCUMENT_TITLE_SEPARATOR}${shell.app}` : shell.app) : page;
+        if (title) {
+            before ??= target.title;
+            target.title = title;
+        }
+        else if (before !== null) {
+            target.title = before;
+            before = null;
+        }
+    }
+    return {
+        setShell(next) {
+            shell = next;
+            apply();
+        },
+        setView(id, page) {
+            views.set(id, page || undefined);
+            apply();
+        },
+        releaseView(id) {
+            views.delete(id);
+            apply();
+        },
+    };
+}
+// One per page, made on first use (never while rendering on a server).
+let documentTitles;
+const titles = () => (documentTitles ??= createDocumentTitles(document));
+/**
+ * Names the browser tab after this screen while it's mounted: "New Widget"
+ * reads "New Widget · <app>" inside `AppShell`. Wins over the page the nav
+ * names, whichever arrives first; when the screen goes, the nav's title
+ * comes back. `undefined` (a record still loading) leaves the nav's.
+ * `EntityView` already does this with its `title`.
+ */
+export function useDocumentTitle(title) {
+    const id = useId();
+    // Two effects, so a changed title keeps this screen's place among others
+    // and only unmounting gives it up.
+    useEffect(() => {
+        titles().setView(id, title);
+    }, [id, title]);
+    useEffect(() => () => titles().releaseView(id), [id]);
+}
+/** AppShell's side: the app's name and the page its nav names. */
+export function useShellDocumentTitle(app, page) {
+    useEffect(() => {
+        titles().setShell({ app, page });
+    }, [app, page]);
+    useEffect(() => () => titles().setShell(null), []);
+}

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { createQueryClient } from './api/query-client.js';
 export { useTableUrlState } from './hooks/use-table-url-state.js';
 export type { TableView, UrlChanges } from './hooks/table-url-changes.js';
 export { useDebouncedValue } from './hooks/use-debounced-value.js';
+export { useDocumentTitle } from './hooks/use-document-title.js';
 export { useRecordUpdate, type RecordChange, type RecordUpdateOptions, } from './hooks/use-record-update.js';
 export { useIsMobile } from './hooks/use-mobile.js';
 export { useWakeLock } from './hooks/use-wake-lock.js';

package/dist/index.js

@@ -50,6 +50,7 @@ export { createQueryClient } from './api/query-client.js';
 // Hooks
 export { useTableUrlState } from './hooks/use-table-url-state.js';
 export { useDebouncedValue } from './hooks/use-debounced-value.js';
+export { useDocumentTitle } from './hooks/use-document-title.js';
 export { useRecordUpdate, } from './hooks/use-record-update.js';
 export { useIsMobile } from './hooks/use-mobile.js';
 // Timed screens (docs/foundation/timed-screens.md)

package/dist/testing/index.js

@@ -13,7 +13,7 @@
 // are optional peer dependencies, needed only by apps that import this.
 import AxeBuilder from '@axe-core/playwright';
 import { expect, test } from '@playwright/test';
-import { isNavSection } from '../components/app/app-shell-nav.js';
+import { navPathname, navTargets } from '../components/app/app-shell-nav.js';
 /**
  * Forces a response for the page's *first* load: set before navigation, so
  * it wins the race against the app's own first fetch. For states forced
@@ -80,7 +80,8 @@ export async function expectNoAxeViolations(page, options = {}) {
     const results = await builder.analyze();
     expect(results.violations).toEqual([]);
 }
-// The app's own pages, read from the Primary nav. Below the sidebar's
+// The app's own pages, read from the Primary nav: each link's path and
+// query string, as it would be visited. Below the sidebar's
 // mobile breakpoint the nav renders into an off-canvas Sheet *portaled to
 // document.body*, outside the <nav aria-label="Primary"> landmark, so the
 // links are read from the sheet there. Keyed off the `isMobile` fixture,
@@ -100,13 +101,14 @@ async function navRoutes(page, isMobile) {
         .evaluateAll((links) => links.map((link) => link.href));
     // Only this app's pages: a sidebarExtra group may link to other sites.
     const origin = new URL(page.url()).origin;
-    return [...new Set(hrefs.filter((href) => new URL(href).origin === origin).map((href) => new URL(href).pathname))];
+    const own = hrefs.map((href) => new URL(href)).filter((url) => url.origin === origin);
+    return [...new Set(own.map((url) => `${url.pathname}${url.search}`))];
 }
+// The pages a list of routes names, by path: a `to` that opens a list on a
+// saved view ('/widgets?status=active') is the /widgets page.
+const pagePaths = (routes) => [...new Set(routes.map(navPathname))].sort();
 // A page's share of the one discovering test's time: load, data, axe.
 const NAV_PAGE_BUDGET_MS = 10_000;
-function navEntryRoutes(nav) {
-    return [...new Set(nav.flatMap((entry) => (isNavSection(entry) ? entry.items : [entry]).map((item) => item.to)))];
-}
 /**
  * Every data view on the page has loaded: at least one shows its data (or,
  * with `{ success: false }`, the page has its screen up), and none still
@@ -144,11 +146,13 @@ async function expectNavPageAccessible(page, route, colorScheme) {
  * emulateMedia switches it.
  */
 export function defineA11ySuite({ formRoutes, viewRoutes = [], loggedOutRoutes, nav }) {
-    const listed = nav && navEntryRoutes(nav);
+    // Each `to` as given, query string and all, so a page that opens on a
+    // saved view is checked on it.
+    const listed = nav && navTargets(nav);
     if (listed) {
         test('the sidebar links exactly the pages in nav', async ({ page, isMobile }) => {
             const rendered = await navRoutes(page, isMobile);
-            expect([...rendered].sort(), 'The sidebar and the nav given to defineA11ySuite differ: pass the same NavEntry[] AppShell gets').toEqual([...listed].sort());
+            expect(pagePaths(rendered), 'The sidebar and the nav given to defineA11ySuite differ: pass the same NavEntry[] AppShell gets').toEqual(pagePaths(listed));
         });
     }
     for (const colorScheme of ['light', 'dark']) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.19.0",
+  "version": "4.21.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": {