@nxgt/material 3.70.0 → 3.72.0

package/docs/guides/csp.md

@@ -28,7 +28,7 @@ Content-Security-Policy:
 | `style-src-elem 'self' 'nonce-X'` | Your stylesheet and the `<style>` elements that carry the nonce. No component needs `'unsafe-inline'` here, apart from the [known gaps](#known-gaps): see [the `<style>` elements the components inject](#style-elements-the-components-inject) |
 | `style-src-attr 'unsafe-inline'` | The `style="…"` attributes in the server-rendered HTML and those set through `setAttribute('style', …)`. CSP blocks only these two; `el.style.x = …` and `style.setProperty` are not blocked. An attribute cannot carry a nonce, so this is the only way to allow it. It does not allow `<style>` elements or scripts |
 | `font-src 'self'` | The library ships no web font (host Inter yourself: [Inter / the sans font](#inter--the-sans-font)), and KaTeX's fonts are files, never `data:` URIs: see [KaTeX fonts](#katex-fonts) for the one Vite setting the Tailwind route needs |
-| `img-src 'self' data: blob:` | `data:` for the cropper's output, a captured `Camera` photo, a `Markdown` mermaid diagram and the PDF reader's annotation icons (SVG `data:` images; the icons the components draw are inline `<svg>` elements and need none); `blob:` for previews of a file the user picked. Drop what you do not use |
+| `img-src 'self' data: blob:` | `data:` for the cropper's output, a captured `Camera` photo, and the PDF reader's annotation icons (SVG `data:` images; the icons the components draw are inline `<svg>` elements and need none); `blob:` for previews of a file the user picked and for a `Markdown` mermaid diagram (an SVG image from a `blob:` URL). Drop what you do not use |
 | `worker-src 'self'` | The pdf.js worker of `PdfReader`: the build ships it as a file, `dist/pdf.worker.min.mjs`, referenced relative to the module that loads it, so `'self'` is enough with no setting and no `data:`. `configurePdfReader({ workerSrc })` overrides it ([PDF reader guide](pdf-reader.md#content-security-policy)). Monaco: see below |
 | `connect-src 'self'` | `PdfReader` fetches the PDF from its `url` and its pdf.js assets from `assetsUrl`: add those origins when they are not yours |
 
@@ -38,7 +38,7 @@ Components outside this table need nothing more. Measured per component:
 | --- | --- | --- |
 | `PdfReader` | `worker-src 'self'` (the worker is a file of the package), `connect-src` for the PDF's and the assets' origins, and `script-src 'wasm-unsafe-eval'` for the JPEG 2000 and ICC WebAssembly decoders (without it: a JavaScript fallback for JPEG 2000, device colours for ICC profiles) | worker checked in the same Playwright run (Vite production build under `worker-src 'self'`), the rest read from pdf.js's code: [PDF reader guide](pdf-reader.md#content-security-policy) |
 | `CodeEditor`, `CodeDiff` (Monaco) | `@monaco-editor/react` loads Monaco from `https://cdn.jsdelivr.net/npm/monaco-editor@…/min/vs` by default: that host in `style-src-elem` (Monaco's CSS) and `font-src` (its icon font), plus `worker-src blob:` | not yet verified in a browser. Safe default: allow `https://cdn.jsdelivr.net` in `script-src`, `style-src-elem` and `font-src`, and `worker-src blob:`; or stay on `'self'` by [serving Monaco yourself](#monaco-on-self) |
-| `Markdown` with a `mermaid` block | mermaid is imported lazily and runs with `securityLevel: 'strict'` | whether mermaid needs `'unsafe-eval'` is not yet verified. Safe default: keep `'unsafe-eval'` out and report any violation you see; its SVG carries a `<style>` element, see [gaps](#known-gaps) |
+| `Markdown` (maths, mermaid, code) | nothing beyond the policy above, in a client render | checked in Chromium under that policy with `style-src-attr 'none'`, no `img-src data:` and no `'unsafe-eval'`: [Markdown under a strict CSP](#markdown-katex-mermaid-and-code-under-a-strict-csp) |
 | `RichTextViewer` (`@nxgt/material/editor/viewer`) | none, but it emits `style` attributes: a text colour, a highlight, a text alignment or a table cell's background in the saved document becomes an inline `style` (only allow-listed properties with plain values survive), so a page that shows such a document needs `style-src-attr 'unsafe-inline'`. A document with none sends no style | measured by reading the renderers; a strict `style-src-attr 'none'` page shows the document without those colours |
 | `Camera` | none: `getUserMedia` is not governed by CSP; the captured photo is a `data:` image | `media-src` for the live preview is not yet verified. Safe default: `media-src 'self' blob:` (a `srcObject` stream usually needs nothing) |
 | `MediaPlayer` with `hlsStreaming()` | `connect-src` and `media-src blob:` for the stream; `worker-src blob:` only with `config: { enableWorker: true }` (the adapter defaults to no worker) | see the [streaming guide](media-streaming.md#content-security-policy) |
@@ -201,8 +201,8 @@ instead.
 `style-src-elem 'self' 'nonce-X'` is enough for every component below: your
 stylesheet carries the CSS the dependencies used to inject, and under a
 `NonceProvider` the few `<style>` elements left carry the nonce. No route
-needs `'unsafe-inline'` in `style-src-elem` for them; mermaid and pdf.js's
-font fallback are the [known gaps](#known-gaps).
+needs `'unsafe-inline'` in `style-src-elem` for them; the mindmap diagrams of
+mermaid and pdf.js's font fallback are the [known gaps](#known-gaps).
 
 | Component | What it needs | How |
 | --- | --- | --- |
@@ -261,12 +261,50 @@ when the page carries it nowhere. `setCspNonce` does nothing on a server (no
 `document`), so a request's nonce never lands in a module global there: see
 [SSR](#ssr).
 
+### Markdown (KaTeX, mermaid and code) under a strict CSP
+
+The full `Markdown` (and `ChatMarkdown`) needs no relaxed directive: no
+`'unsafe-inline'`, no `'unsafe-eval'`, no `style-src-attr`, no `img-src data:`.
+Only `img-src blob:` (already in the policy above) for the diagrams. The
+`Data display/Markdown > StrictCsp` story plays maths, two flowcharts (one with
+an `<img>` in a label, removed before the render, since mermaid would load it in the page) and a code block in a document served
+`script-src 'self' 'nonce-X'` (no `'unsafe-eval'`),
+`style-src-elem 'self' 'nonce-X'`, `style-src-attr 'none'`,
+`img-src 'self' blob:` and `font-src 'self'`, and expects not one violation.
+What the app does: wrap the app in [`NonceProvider`](#nonceprovider) (or let
+the page carry the nonce in its meta tag).
+
+- **Code blocks**: the scheme's colours are classes of the stylesheet
+  (`data-scheme`), and `maxHeight` is a custom property written through the
+  CSSOM in a layout effect (a server-rendered block is full height until
+  hydration).
+- **KaTeX**: on a client render React writes its styles through the CSSOM.
+  Its fonts are files ([KaTeX fonts](#katex-fonts)).
+- **Mermaid**: the diagram stays an image, now from a `blob:` URL (revoked when
+  the diagram goes), so the SVG's own `<style>` and `style` attributes live in
+  the image and the page needs neither `data:` nor `style-src-attr` for them.
+  While a diagram renders, mermaid builds it in a temporary element of the
+  page and sanitises it with DOMPurify, which a strict policy reports. For
+  that render only, and only for the elements of that diagram, a short-lived
+  scope gives mermaid's `<style>` the nonce, writes its `style` attributes
+  through the CSSOM and parks the `style` attributes of the string DOMPurify
+  parses (patches of `Document.prototype.createElement`,
+  `Element.prototype.setAttribute` and `DOMParser.prototype.parseFromString`;
+  each is a pass-through once the last render ends and is restored only if
+  no other script patched it since). Unrelated calls, such as an editor
+  parsing HTML, are left alone.
+- **Left**: a page whose HTML the server renders with math carries KaTeX's
+  `style="…"` attributes in the markup, which `style-src-attr 'none'` blocks
+  (the formula loses its spacing until `style-src-attr 'unsafe-inline'`, or a
+  client-only render of the `Markdown`). Mermaid's mindmap and architecture
+  diagrams add a `<style>` to `<head>` ([known gaps](#known-gaps)).
+
 ### Known gaps
 
 Not fixable by configuration yet, and still reported by a strict policy:
 
-- the `<style>` element inside mermaid's SVG, and the one cytoscape adds to
-  `<head>` for mermaid's mindmap and architecture diagrams;
+- the `<style>` element cytoscape adds to `<head>` for mermaid's mindmap and
+  architecture diagrams (flowcharts, sequences and the like add none);
 - the font fallback of pdf.js, when a PDF font is not embedded;
 - this repository's Storybook, or an app that imports react-use's barrel
   itself on a dev server: react-use served as one module, whose `useCss`

package/docs/guides/forms.md

@@ -279,10 +279,11 @@ the form, on a translucent, blurred background, so Cancel and Save stay in
 reach while the fields scroll under them; a form shorter than the screen
 shows them right under its fields.
 
-- In a `DialogContent` or a `SheetContent`, which are capped to the screen
+- In a `DialogContent` without a `DialogBody`, or a `SheetContent`, which are capped to the screen
   and scroll themselves, the actions stick to the dialog's or the sheet's
   bottom. A `DrawerContent` does not scroll: a form that is its direct child
   is the scroll box there.
+- A long form in a `Dialog` can pin its own header and `DialogFooter` instead: put the fields in a `DialogBody` and only the body scrolls (see the Dialog section of the overlays page). Do not combine it with `form-actions`: they would stick inside the body, so use a `DialogFooter` for the buttons and `form="id"` on the submit button.
 - In an `AlertDialogContent` (the rich text editor's edit dialogs use one),
   the actions stick to its bottom the same way, over its padding.
 - `ConfirmationDialog` holds a form when you pass it `formOptions` (a schema, its `defaultValues` and `renderForm`): it renders the
@@ -608,7 +609,7 @@ export function SupplierForm({ onSave }: { onSave: (values: Values) => void }) {
 
 | Wrapper | Value | Notes |
 | --- | --- | --- |
-| `ContactsFormField` | `Contact[]` | Edited in place by default (one `primary` per type); `editing="dialog"` goes through `ContactDialog`. `ContactType` is `EMAIL`, `FAX`, `MOBILE`, `PHONE`, `WEBSITE` |
+| `ContactsFormField` | `Contact[]` | Edited in place by default (one `primary` per type); `editing="dialog"` goes through `ContactDialog`. `ContactType` is `EMAIL`, `FAX`, `MOBILE`, `PHONE`, `WEBSITE`; `types={['EMAIL', 'PHONE']}` limits the offered types and `primary={false}` hides the star (inline only) |
 | `OpeningHoursFormField` | `OpeningHour[]` | Edits the week inline by default (`weekStartsOn` and `locale` apply there); `editing="dialog"` keeps the list and dialog, where `showAddAllDays` adds Monday–Friday 09:00–17:00 and a closed weekend in one click |
 | `PostalAddressFormField` | `PostalAddressFieldValue` | Deleting the address writes `{}`, not `null` |
 | `AttributesFormField` | `Attribute[]` | A typed attribute editor, in place by default (rows that open, drag and keyboard reorder that sets `priority`, unique names); `editing="dialog"` keeps the list and dialog. Its `label` prop is required |
@@ -628,7 +629,11 @@ export function SupplierForm({ onSave }: { onSave: (values: Values) => void }) {
   `form.setValue()` replace the list it shows.
 - `AttributeValuesFormFieldSet` is the other half: given `attributes`, it
   renders one input per attribute and writes `{ [attribute.name]: value }` to
-  its `name`.
+  its `name`. It reads the value the form already holds at `name` (and shows
+  a `reset()` or `setValue()`), so `defaultValues` is only the fallback while
+  the form value is empty (`undefined`, `null` or `{}`). Its fields fill the row, and `hideLabel` keeps
+  `label` as the group's accessible name without drawing it, under a
+  `FormSection` that already has the title.
 
 ### Rows a user adds and removes
 
@@ -786,8 +791,9 @@ form.setFocus('email'); // or without an error
 
 ## A form that is quick to fill
 
-`useFastForm` and `useFocusOnRefusal` (`@nxgt/material/components`) are the
-two habits of a record form, in one place. `useFastForm(props, first, active?)`
+`useFastForm`, `useFocusOnRefusal` and `useServerFieldErrors`
+(`@nxgt/material/components`) are the three habits of a record form, in one
+place; the first two are below, the third under [Server errors](#server-errors). `useFastForm(props, first, active?)`
 is `useForm` with `mode: 'onTouched'` (an error shows once the user leaves the
 field, then follows each change; a `mode` in `props` wins) that also focuses
 the `first` field when the form opens, so typing starts at once. It waits a
@@ -821,8 +827,24 @@ Storybook: `Guides/Forms/useFastForm`. If the focus does not move, see
 
 ## Server errors
 
-Map an API's field errors onto the form with `setError`, and put anything that
-belongs to no field under `root`, shown in an `Alert`:
+`useServerFieldErrors(form, fieldErrors)` (`@nxgt/material/components`) puts an
+action's `{ path: message }` field errors on the form, each under its field
+with `type: 'server'`, and focuses the first. It runs when the `fieldErrors`
+object changes, so pass the answer's own object (one per answer) and
+`undefined` while a request runs or when the answer is not a refusal; entries
+with an empty message are skipped, and the keys must be names of the form's
+fields.
+
+```tsx
+import { useFastForm, useServerFieldErrors } from '@nxgt/material/components';
+
+const form = useFastForm<Values>({ defaultValues }, 'email');
+useServerFieldErrors(form, actionData?.fieldErrors); // { email: 'Already used' }
+```
+
+It pairs with `useFastForm` and `useFocusOnRefusal` above. To write the same
+mapping by hand, or to put anything that belongs to no field under `root`,
+shown in an `Alert`, use `setError`:
 
 ```tsx
 import { useForm } from 'react-hook-form';
@@ -870,6 +892,36 @@ export function SignInForm() {
 - `Alert` `variant` is one of `primary`, `secondary`, `error`, `success`,
   `info`, `warning`, `foreground`.
 
+### A save refused because another write came first
+
+When the API refuses a versioned save (`stale-version`), keep the form as it is
+and show a `StaleNotice` above it. It takes the focus and scrolls into view on
+mount, and its one action reads the record again. There is no overwrite.
+
+```tsx
+import type { FormEventHandler } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+import { Button, StaleNotice, TextFormField } from '@nxgt/material/components';
+
+type Props = {
+  form: UseFormReturn<{ title: string }>;
+  stale: boolean; // the save was refused with `stale-version`
+  reload: () => void; // read the record again
+  reloading: boolean;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+};
+
+function EditNote({ form, stale, reload, reloading, onSubmit }: Props) {
+  return (
+    <form onSubmit={onSubmit} className="grid gap-4">
+      {stale && <StaleNotice onReload={reload} busy={reloading} />}
+      <TextFormField control={form.control} name="title" label="Title" />
+      <Button type="submit">Save</Button>
+    </form>
+  );
+}
+```
+
 ## Dialogs and steps
 
 ### A form in a dialog

package/docs/guides/i18n.md

@@ -236,7 +236,7 @@ the camera's button, toggle and image (`material.camera.capture`, `captured`,
 barcode accessible names, the calendar's navigation tooltips
 (`material.calendar.*`), the data table's selection checkboxes, the filter's
 presets and `Min`/`Max` fields, the `variant="4"` spinner's label,
-`ScrollToTop`, the network upload field's `Retry`/`Remove`, the map's
+`ScrollToTop`, the network upload field's `Retry` and `Remove {name}`, the map's
 `You are here` and zoom buttons, and the icon-only close button of
 `DialogClose`, `DrawerClose`, `SheetClose` and `SheetContent`'s
 `withCloseButton`. A range `Slider`'s readout inputs read
@@ -320,11 +320,11 @@ those words as an optional third argument); the `aria-label` of `Breadcrumb`
 and `Pagination` and the breadcrumb ellipsis's "More"
 (`material.breadcrumb.*`, `material.pagination.label`), and `DocHeader`'s
 breadcrumb (`material.doc.breadcrumb`); `MessageCard`'s "Unread"
-(`material.cards.unread`); the network upload field's "Replace {name}", "Upload
+(`material.cards.unread`); the network upload field's "Replace {name}", "Remove {name}", "Upload
 failed", its type, size and count errors (`material.upload.replace-named`,
-`failed`, `invalid-type`, `too-large`, `max-files`; an error keeps the language
+`remove-named`, `failed`, `invalid-type`, `too-large`, `max-files`; an error keeps the language
 it was raised in) and the drop zone's "Max {size}" and "Up to {count} files"
-(`material.upload.dropzone.max-size` / `max-files`); the editor's
+(`material.upload.dropzone.max-size` / `max-files`) and the names `accept` wildcards read as (`material.upload.accept.images`, `audio`, `video`, `text`, `application`); the editor's
 placeholder, which follows a language change without rebuilding the editor,
 and its emoji buttons (`material['rich-text-editor'].placeholder` /
 `insert-emoji`); `CircularProgress`'s "Progress: {value}%"
@@ -485,8 +485,9 @@ and description and against the English ones, ignoring accents: in French,
 
 Some strings are still English in every language, among them the filter's
 validation messages, the camera's error messages, the editor's callout type
-names and default block content. File sizes (`2 KB`) and the filter chips' dates are not formatted for
-the provider's language.
+names and default block content. The filter chips' dates, and file sizes outside the upload field (`2 KB`),
+are not formatted for the provider's language; the upload field writes its
+size in it (`10,4 ko`).
 
 The emoji picker's category tabs are icon-only; their name, read by screen
 readers and shown as a tooltip, comes from `material.emoji.groups.<group>`.

package/docs/guides/printing.md

@@ -1013,7 +1013,7 @@ it:
 | `heading` | `heading(text, level?)` | A title, level `1`, `2` or `3` |
 | `text` | `text(content, { variant?, style? })` | A paragraph: a string, or runs `{ text, bold?, italic?, color?, href? }`; `variant` is `'body'`, `'muted'`, `'caption'` or `'label'` |
 | `stack` / `row` | `stack(children, { gap?, style?, keepTogether? })`, `row(children, { gap?, align?, justify?, style? })` | Children one under the other, or side by side |
-| `section` | `section(title, children, { keepTogether? })` | A titled block, as `PrintSection`; `keepTogether` as on a `stack` |
+| `section` | `section(title, children, { keepTogether? })` | A titled block, as `PrintSection`; `keepTogether` as on a `stack`; a block taller than a page breaks normally, see [Keeping a block on one page](#keeping-a-block-on-one-page) |
 | `table` | `table({ columns, rows, footer?, labelTotals?, striped?, repeatHeader?, keepRowsWhole?, emptyText?, hideWhenEmpty? })`, or `dataTable(columns, rows, options?)` from [column definitions](#tables-from-column-definitions-datatable-and-keyvalueof) | A table of `PrintValue`s, as `PrintDataTable`; a row or a cell may carry a `style`, see [Row and cell styles](#row-and-cell-styles-in-a-table); with `labelTotals`, an empty first cell of a `footer` row reads "Total" in the document's language |
 | `keyValue` | `keyValue(items, { columns?, keepEmpty? })`, or `keyValueOf(fields, data, options?)` from column definitions | Label and value pairs, as `PrintKeyValue` |
 | `totals` | `totals(rows)` | Label and value rows; `emphasis` makes one bold |
@@ -1140,12 +1140,22 @@ section(group.title, rows, { keepTogether: true });
 stack([heading('Result'), table(result)], { keepTogether: true });
 ```
 
-Use it on a block you know is shorter than a page. react-pdf cannot split a
-block that opted out of wrapping: a block taller than the page area is not
-broken, it overflows the page and is cut off at the edge (react-pdf logs
-"can't wrap between pages and it's bigger than available page height").
-Leave `keepTogether` off for a block that may grow past a page, and use
-`keepRowsWhole` and `repeatHeader` on a long table instead.
+A block taller than a page breaks normally. react-pdf cannot split a block
+that opted out of wrapping (it overflows and is cut off at the edge), and
+cannot measure ahead, so for a document as data `renderPdfBuffer`,
+`renderPdfBlob`, `renderPdfStream`, `downloadPdf`, `openPdf` and `pdfResponse`
+first render each `keepTogether` block alone, on a page like the one it sits
+on, and drop the option of those that need more than one page. A block that
+fits keeps it, so its output does not change; a document with no
+`keepTogether` pays for no extra pass. The measure is made at the page's
+width: a block inside a `row` is measured with that row, but a parent's padding or narrower style is not applied.
+
+This holds for a document as data only. `<PrintSection keepTogether>` in a
+`PrintDocument` element, and a document you render yourself with
+`renderPdfElement`, are not measured: use `keepTogether` there on a block
+shorter than a page, or call `resolveKeepTogether(doc)` from
+`@nxgt/material-core/pdf/render` first and render its result. For a long
+table, `keepRowsWhole` and `repeatHeader` keep the rows apart from each other.
 
 ### Row and cell styles in a table
 

package/docs/roadmap.md

@@ -6,6 +6,8 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
+- **Calculator** — `@nxgt/material/calculator` adds `Calculator`, in six variants (Standard, Scientific, point of sale, Financial, Unit conversion, Programmer) chosen by `variant` or by its own switcher, and `CalculatorField` / `CalculatorFormField`, a number field whose button opens it in a popover, or a bottom sheet on a phone. Every variant shows the whole expression above the result, honours operator precedence and computes in exact decimals (0.1 + 0.2 = 0.3) without `eval`, so a strict CSP holds. A history tape (persisted, with an opt-out), memory keys, the physical keyboard, copy and paste, locale formatting and screen-reader announcements come with each; haptic and sound feedback are opt-in. Point of sale charges through `onCharge(total)`; currency rates come from the app. React only for now; the Vue port is tracked in [#2100](https://github.com/softistx/nxgt-material/issues/2100). Tracked in [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
 - **Barcodes and label sheets** — `@nxgt/material/barcode` draws Code 128
   and Data Matrix as accessible SVG (themed, dark-aware, black on white in
   print) and lays labels out on a sheet to print: label size, columns, rows,
@@ -15,6 +17,10 @@ version they shipped in, and planned entries may name the major they target.
 - **Toast texts follow app translations** — the toast presets read the
   app's `I18nProvider` `resources`, so an override under `material.*`
   changes their wording ([#1855](https://github.com/softistx/nxgt-material/issues/1855)).
+- **A record page layout** — `RecordPage` and `RecordDetails` lay out one
+  record: a header card, the content, and its facts as a side panel from `xl`
+  that stacks after or before the content, with a created / updated line
+  ([#1689](https://github.com/softistx/nxgt-material/issues/1689)).
 - **A decision bar for phone pages** — `StickyActionBar` holds a long page's
   main decision at the bottom of a phone, above the keyboard and clear of the
   safe areas, and inline from `md`
@@ -157,6 +163,8 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Next
 
+- **Layouts: adaptive navigation, headers and page layouts** — `ActivityLayout` takes `navigation` (a bottom bar, a rail with a FAB, standard and modal drawers, a collapsible sidebar, a top navigation with dropdowns, two-level navigation or a floating toolbar, chosen for phone, tablet and desktop) and `header` (small, center-aligned, medium and large collapsing on scroll, a search bar with full-screen search on a phone, sticky tabs, hide on scroll); each piece is also exported. Page layouts grow with it: an inspector pane and URL state for `ListDetailsLayout`, phone modes for `PaneLayout`, spans and masonry for `ResponsiveGrid`, tabs for `Kanban` on a phone, and new settings, dashboard (rearranging tiles), editor and landing layouts, each with a screen recipe. Everything is opt-in; the shell's default is unchanged. Tracked in [#2103](https://github.com/softistx/nxgt-material/issues/2103).
+
 - **FilterBar "Add a filter" stays on its row** — the button no longer wraps
   alone onto a second row on a desktop screen ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
 
@@ -241,7 +249,6 @@ version they shipped in, and planned entries may name the major they target.
   slot; the bar's `views` slot is planned with it. They are meant to replace
   the legacy `FilterPresets`. Tracked in [#1876](https://github.com/softistx/nxgt-material/issues/1876).
 
-- **RecordActionsMenu** — one menu for a record's lifecycle: archive with an Undo toast (or confirm first with `archivePolicy="confirm"`), restore, and delete that always confirms and shows the backend's refusal, with `ConfirmDialog` gaining `details` and `refusal` slots.
 - **Cursor trail cap** — `ServerTable` and `PageFooter` keep cursor URLs short: the trail is encoded once and capped by `maxTrail` (20 by default) with an exact page count, and `totalCount` becomes optional for APIs that do not count.
 
 ## Later
@@ -364,6 +371,9 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **RecordActionsMenu (next minor)** — one menu for a record's lifecycle: archive with an Undo toast (or confirm first with `archivePolicy="confirm"`), restore, and delete that always confirms and shows the backend's refusal, with `ConfirmDialog` gaining `details` and `refusal` slots.
+- **Assistant approval card (next minor)** — `ChatActionProposal` shows an action an assistant proposes, with its status, deadline and Confirm / Reject, and `ChatToolActivity` is a compact row for a tool step in a chat thread ([#2134](https://github.com/softistx/nxgt-material/issues/2134)).
+
 - **Link navigation (3.66.0)** — `TabsNav` and `SegmentedNav` render route tabs and segmented navigation as a `nav` of links with `aria-current="page"`, looking like Tabs and the segmented ToggleGroup, plus `useTabParam`, `skipTabChange` and `tabIds` to keep the current tab in the URL. Tracked in [#2029](https://github.com/softistx/nxgt-material/issues/2029).
 
 - **Smaller, easier-to-read components (3.58.0)** — the library's own source

package/docs/troubleshooting.md

@@ -11,6 +11,7 @@ words in your error.
 - [`Cannot find package '@react-pdf/renderer'`](#cannot-find-package-react-pdfrenderer)
 - [`Cannot find package 'react-router'` after upgrading to 3.0](#cannot-find-package-react-router-after-upgrading-to-30) (and `ERESOLVE` on `react` or `react-router`; `Element type is invalid` for `ViewTransition` or `browser is not a function` from a stale Storybook or Vitest pre-bundle)
 - [`Conflicting peer dependency: @react-pdf/renderer` (`ERESOLVE`)](#conflicting-peer-dependency-react-pdfrenderer)
+- [`AttributeValuesFormFieldSet` shows empty fields, or ignores my `defaultValues`](#attributevaluesformfieldset-shows-empty-fields-or-ignores-my-defaultvalues)
 - [`Cannot find package 'leaflet'`](#cannot-find-package-leaflet)
 - [`hls.js could not be loaded. Install it (`npm i hls.js`) to play HLS streams in this browser.`](#hlsjs-could-not-be-loaded-install-it-npm-i-hlsjs-to-play-hls-streams-in-this-browser)
 - [`This browser cannot play HLS streams.`](#this-browser-cannot-play-hls-streams)
@@ -66,7 +67,10 @@ words in your error.
 - [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-on-a-phone)
 - [A ResponsiveButton no longer shows its tooltip next to its visible label](#a-responsivebutton-no-longer-shows-its-tooltip-next-to-its-visible-label)
 - [An input now has `placeholder=" "` in the DOM](#an-input-now-has-placeholder--in-the-dom)
+- ["Select all" runs under the sort, "Filters" or the actions in a cards or tiles list on a phone](#select-all-runs-under-the-sort-filters-or-the-actions-in-a-cards-or-tiles-list-on-a-phone)
 - [A dialog or sheet scrolls, or clips a child, after upgrading](#a-dialog-or-sheet-scrolls-or-clips-a-child-after-upgrading)
+- [A `DialogBody`'s header and footer do not stay pinned](#a-dialogbodys-header-and-footer-do-not-stay-pinned)
+- [A form's `form-actions` bar sticks inside a `DialogBody`](#a-forms-form-actions-bar-sticks-inside-a-dialogbody)
 - [A form's fields no longer scroll in their own box after upgrading](#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
 - [My activity content lost its side padding, or the rail's entries moved up](#my-activity-content-lost-its-side-padding-or-the-rails-entries-moved-up)
 - [axe reports `target-size` on a control under a form's sticky actions](#axe-reports-target-size-on-a-control-under-a-forms-sticky-actions)
@@ -380,6 +384,7 @@ words in your error.
 - [`` [@nxgt/material] DataTable: `tableRef` stays null in the `cards` layout; use `focusRef`. ``](#nxgtmaterial-datatable-tableref-stays-null-in-the-cards-layout-use-focusref)
 - [`defineCodeTheme: "keyword" must be a hex colour`](#definecodetheme-keyword-must-be-a-hex-colour-rgb-or-rrggbb)
 - [A `CodeEditor` shows its code in one colour after another Monaco editor mounts](#a-codeeditor-shows-its-code-in-one-colour-after-another-monaco-editor-mounts)
+- [`primary={false}` has no effect on a `ContactsFormField` with `editing="dialog"`](#primaryfalse-has-no-effect-on-a-contactsformfield-with-editingdialog)
 
 **PDF reader**
 
@@ -535,7 +540,28 @@ bun add @react-pdf/renderer@^4.9
 `--legacy-peer-deps` silences the error but keeps a renderer the print
 entry is not tested against.
 
-### `Cannot find package 'leaflet'`
+### `AttributeValuesFormFieldSet` shows empty fields, or ignores my `defaultValues`
+
+**When:** the set comes up empty although you pass `defaultValues`, or shows
+other values than the ones you passed.
+
+**Why:** the set reads the form value at `name` first. `defaultValues`
+is only a fallback while that value is empty: `undefined`, `null` or an object
+with no keys. A form that already holds `{ color: 'red' }` at `name` wins over
+`defaultValues`; a form that holds `{ color: undefined }` has a key, so it is
+not empty either.
+
+**Fix:** put the values in the form, where every other field reads them:
+
+```tsx
+const form = useForm({ defaultValues: { attributes: { size: 'M' } } });
+// or, for a record loaded later
+form.reset({ attributes: record.attributes });
+```
+
+Keep `defaultValues` on the set only for a fallback when the form holds nothing.
+
+## `Cannot find package 'leaflet'`
 
 **When:** at build or at the first import of `@nxgt/material/map`. The missing
 name may also be `react-leaflet`, `@react-leaflet/core`,
@@ -613,6 +639,14 @@ never receives the press.
 forwards `ref` and `...props` to its root. Or skip `trigger` and open it from
 your own state with `open` / `onOpenChange`.
 
+### A test that read the upload hint now sees "JPEG, PNG, WebP" or "Images"
+
+**When:** after upgrading, a test or snapshot that matched the drop zone's hint
+(`image/jpeg,image/png · Max 2 MB`, `image/*`) fails.
+**Why:** the hint shows short names derived from `accept` instead of the raw
+list: `JPEG, PNG · Max 2 MB`, `Images`.
+**Fix:** match the names, or pass `acceptLabel="..."` to fix the text.
+
 ### `This browser cannot play HLS streams.`
 
 **When:** an HLS track on a browser without Media Source Extensions where
@@ -1427,6 +1461,18 @@ your own through `className`. With `asChild`, put the label in a `<span>` (on a
 </Button>
 ```
 
+### "Select all" runs under the sort, "Filters" or the actions in a cards or tiles list on a phone
+
+**When:** below 768px, a `ServerTable` in `cards` or `tiles` with `filter` and
+`actions` draws "Select all" over the sort menu and "Filters (N)" when an action
+has a long label ("Add a measurement unit").
+**Why:** up to 3.70.0, the label of row 2 neither shrank nor truncated, and the
+end group (sort, "Filters (N)", actions) never gave up its width.
+**Fix:** update. The "Select all" text now ends in "…" (the box keeps its name,
+"Select all on this page"), and an end group too wide for the row wraps to its
+own line under it. Until then, use a `Fab` for the create action on phones, or
+a short or icon-only label.
+
 ### A dialog or sheet scrolls, or clips a child, after upgrading
 
 **When:** after upgrading, a tall `DialogContent`, `AlertDialogContent` or
@@ -1448,6 +1494,38 @@ with `className="max-h-none overflow-visible"`; to change the cap, pass your own
 For a dialog that should grow taller than the screen and scroll inside the
 overlay instead of capping, use `DialogScrollContent`.
 
+With a `DialogBody` as a direct child, the content is `overflow-hidden` (a
+clipped flex column) and only the body scrolls, so a child that sticks out of
+the content is clipped there too; keep popovers in a portal.
+
+### A `DialogBody`'s header and footer do not stay pinned
+
+**When:** a long dialog with a `DialogBody` still scrolls as a whole, or the
+footer sits at the end of the fields.
+**Why:** the content only turns into a column when the `DialogBody` is a
+*direct* child of `DialogContent` (`has-[>[data-slot=dialog-body]]`). Inside a
+`<form>` or another wrapper it is not. Another cause: a `max-h-none` or
+`overflow-visible` in the content's `className`.
+**Fix:** make the body a direct child, and put the `<form>` around the whole
+content, or keep the body inside and submit with `form="id"` on the footer button:
+
+```tsx
+<DialogContent>
+	<DialogHeader>…</DialogHeader>
+	<DialogBody>…</DialogBody>
+	<DialogFooter>…</DialogFooter>
+</DialogContent>
+```
+
+### A form's `form-actions` bar sticks inside a `DialogBody`
+
+**When:** a `.form-grid-layout` form with `form-actions` in a `DialogBody` shows
+its Save bar at the bottom of the body, not of the dialog.
+**Why:** the bar is sticky at the bottom of whatever scrolls, and the body now
+scrolls.
+**Fix:** use the `DialogFooter` for the buttons, with `form="my-form"` on the
+submit button and `id="my-form"` on the form, and leave `form-actions` out.
+
 ### A form's fields no longer scroll in their own box after upgrading
 
 **When:** after upgrading, a `.form-grid-layout` form grows with the page
@@ -2128,6 +2206,12 @@ settles, with `focusRef` on the table. It matches the row by id, not by label.
 See "Handing the focus back to a row" in
 [RowMenu](components/data-table-filter-and-lists.md#handing-the-focus-back-to-a-row).
 
+### A `RecordActionsMenu` or `ConfirmDialog` refusal shows no action, or its link reloads the page
+
+**When:** `send` rejects (or a `ConfirmDialog`'s `onConfirm` throws) with an error that should offer a link, but the dialog or toast shows only the message; or the link of a toast action reloads the whole app.
+**Why:** only an `ActionRefusal` carries an action (a plain `Error`, or a rethrown copy of its message, does not). A toast's `href` is a plain navigation (`window.location.assign`), since a toast is outside your router.
+**Fix:** reject with `new ActionRefusal(message, { action: { label, href } })` and keep it as thrown (do not wrap it in another `Error`). For a client-side navigation use `action: { label, onAction: () => navigate(...) }`. A `ConfirmDialog` renders it by default; a `refusal` prop of your own replaces that rendering, so it must show the details and the action itself. See [ConfirmDialog](components/feedback-and-status.md#confirmdialog) and [RecordActionsMenu](components/data-table-filter-and-lists.md#recordactionsmenu).
+
 ### A `ConfirmationDialog` reopened with new content blocks clicks
 
 **When:** a `ConfirmationDialog` or a `ConfirmDialog` (or a `Dialog`,
@@ -3649,6 +3733,26 @@ fill is now left empty, and the title stays centred.
 <PrintHeader title="Invoice" logoText="LOGO" />
 ```
 
+### A `keepTogether` block is cut off at the bottom of the page
+
+**When:** the console shows `Node of type VIEW can't wrap between pages and
+it's bigger than available page height` and the rows of a `PrintSection` or
+a `section` / `stack` with `keepTogether` run past the page edge.
+**Why:** react-pdf keeps a block whole with `wrap={false}` and cannot split
+one taller than a page, nor measure it ahead.
+**Fix:** for a document as data, render it with `renderPdfBuffer`,
+`renderPdfBlob`, `renderPdfStream`, `downloadPdf` or `pdfResponse`: they
+measure each `keepTogether` block and let a too-tall one break normally. For a
+`<PrintSection keepTogether>` in a `PrintDocument`, or your own call to
+`renderPdfElement`, remove `keepTogether` from blocks that can outgrow a page,
+or resolve the document first:
+
+```ts
+import { resolveKeepTogether } from '@nxgt/material-core/pdf/render';
+
+const element = renderPdfElement(await resolveKeepTogether(doc));
+```
+
 ### French amounts print with a slash, as in `1/234,50`
 
 **When:** before 2.2.0, `formatAmount(1234.5, 'EUR', { locale: 'fr-FR' })`
@@ -5142,7 +5246,7 @@ such as `getByRole('navigation', { name: 'pagination' })`,
 | `No filters available`, `+2 more` | `Aucun filtre disponible`, `+2 de plus` | `filter.empty`, `filter.more` |
 | `Yes` / `No`, `From 5`, `Until …`, `Up to 9` (filter chips) | `Oui` / `Non`, `À partir de 5`, `Jusqu'au …`, `Jusqu'à 9` | `filter.value.*` |
 | `Unread` (`MessageCard`) | `Non lu` | `cards.unread` |
-| `Replace {name}`, `Upload failed` | `Remplacer {name}`, `Échec de l'envoi` | `upload.replace-named`, `upload.failed` |
+| `Replace {name}`, `Remove {name}`, `Upload failed` | `Remplacer {name}`, `Supprimer {name}`, `Échec de l'envoi` | `upload.replace-named`, `upload.remove-named`, `upload.failed` |
 | `File type not accepted`, `File exceeds maximum size of …`, `Maximum of 3 files reached` | `Type de fichier non accepté`, `Le fichier dépasse la taille maximale de …`, `Maximum de 3 fichiers atteint` | `upload.invalid-type`, `upload.too-large`, `upload.max-files` |
 | `Write something …`, `Insert {name} emoji` (editor) | `Écrire quelque chose…`, `Insérer l'emoji {name}` | `rich-text-editor.placeholder`, `rich-text-editor.insert-emoji` |
 | `Progress: 40%` | `Progression : 40 %` | `circular-progress.label` |
@@ -6911,6 +7015,19 @@ structural theme back when it mounts, but not while the other editor stays.
 **Fix:** keep that editor on a page of its own, or stop it calling `setTheme`
 (`CodeEditor`'s `ref` handle gives Monaco's editor for the options you need).
 
+### `primary={false}` has no effect on a `ContactsFormField` with `editing="dialog"`
+
+**When:** `<ContactsFormField editing="dialog" primary={false} />` looks the
+same as without the prop.
+
+**Why:** `primary` hides the star and the primary marks of the inline editor.
+The dialog edits `type`, `value` and `label` only; it has no star to hide, and
+the `primary` flag already in the value is left untouched. `types` does work
+in both modes.
+
+**Fix:** use the default `editing="inline"` when the star must go, or drop the
+`primary` flag from the value before saving.
+
 ## PDF reader
 
 ### PDF text is missing or in the wrong font in `PdfReader` (cMaps and standard fonts)
@@ -7748,8 +7865,13 @@ one. The usual sources are the components listed in
 [the guide](guides/csp.md#style-elements-the-components-inject).
 `ScrollArea`, `Select`, `RichTextEditor` and the scroll lock of dialogs and
 sheets take the nonce from `NonceProvider`, and report this when the app has
-none (or gives it another nonce than the header's). A `<style>` in mermaid's
-SVG is a [known gap](guides/csp.md#known-gaps). `Toaster`, `Drawer`,
+none (or gives it another nonce than the header's). Mermaid and KaTeX
+need none of this on a client render
+([Markdown under a strict CSP](guides/csp.md#markdown-katex-mermaid-and-code-under-a-strict-csp));
+the two left are a server-rendered page with math (KaTeX's `style` attributes
+need `style-src-attr 'unsafe-inline'`) and the `<style>` cytoscape adds to
+`<head>` for mermaid's mindmap and architecture diagrams.
+`Toaster`, `Drawer`,
 `InputOTP`, `ImageCropper`, `Spinner` and `PdfReader` create none: their CSS is in the stylesheet, so if one of them looks unstyled, the
 app imports neither `styles.css` nor `dist/material.css`.
 **Fix:** for `style-src-attr`, allow attributes: they cannot be nonced.
@@ -7770,10 +7892,6 @@ import { NonceProvider } from '@nxgt/material';
 </NonceProvider>;
 ```
 
-For a mermaid diagram, serve that route with `'unsafe-inline'` in
-`style-src-elem` instead of the nonce (a nonce in the same directive makes
-browsers ignore `'unsafe-inline'`).
-
 Once a page has a header-delivered CSP, browsers blank the `nonce` attribute, so React's development build may warn of an attribute mismatch when it hydrates a server-rendered `<style nonce>`. The warning is harmless.
 
 ### `Refused to load the font 'data:font/woff2…' because it violates the following Content Security Policy directive: "font-src 'self'"`

package/lib/components/ui/collections/server-table/server-table-phone-row.css

@@ -187,3 +187,9 @@
 		gap: 0.75rem;
 	}
 }
+/* A wide action (#2168): the actions may shrink within the row, so a long
+ * label ends in "..." (the button's own ellipsis) instead of overflowing. */
+[data-slot="server-table-phone-row-end"] > [data-slot="server-table-actions"] {
+	flex-shrink: 1;
+	min-width: 0;
+}

package/lib/components/ui/display/code/code-moonlight.css

@@ -1,3 +1,40 @@
+/* The scheme's colours as custom properties on the block: classes of the
+   stylesheet, never an inline `style` (strict CSP). Same values as
+   moonlight-tokens.ts; code-block-scheme.test.ts keeps them equal. */
+[data-slot="code-block"][data-scheme="dark"] {
+	--code-bg: #222436;
+	--code-fg: #c8d3f5;
+	--code-comment: #7a88cf;
+	--code-blue: #82aaff;
+	--code-cyan: #86e1fc;
+	--code-green: #c3e88d;
+	--code-orange: #ff966c;
+	--code-yellow: #ffc777;
+	--code-red: #ff757f;
+	--code-magenta: #c099ff;
+	--code-pink: #fca7ea;
+	--code-selection: #2f334d;
+}
+
+[data-slot="code-block"][data-scheme="light"] {
+	--code-bg: #f5f7ff;
+	--code-fg: #383a51;
+	--code-comment: #7a88cf;
+	--code-blue: #3e68d7;
+	--code-cyan: #0b8ec2;
+	--code-green: #4db380;
+	--code-orange: #c44c22;
+	--code-yellow: #ac8300;
+	--code-red: #c53b40;
+	--code-magenta: #7a5af5;
+	--code-pink: #b04d9a;
+	--code-selection: #d4daf0;
+}
+
+[data-slot="code-block"] [data-code-scroll] {
+	max-height: var(--code-max-height, none);
+}
+
 [data-slot="code-block"] {
 	background: var(--code-bg);
 	color: var(--code-fg);

package/lib/components/ui/fields/attributes/attribute-values-form/attribute-values-form.css

@@ -3,6 +3,11 @@
 	form {
 		@apply grid @xl:grid-cols-2 @2xl:grid-cols-3 @3xl:grid-cols-4 gap-2;
 
+		/* Every field takes its cell's full width, whatever its own slot. */
+		> * {
+			@apply w-full min-w-0;
+		}
+
 		[data-slot="separator"] {
 			@apply col-start-full;
 		}