@nxgt/material 3.70.0 → 3.71.0

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,9 +320,9 @@ 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
 placeholder, which follows a language change without rebuilding the editor,
@@ -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

@@ -66,6 +66,7 @@ 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 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)
@@ -1427,6 +1428,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
@@ -2128,6 +2141,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 +3668,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 +5181,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` |
@@ -7748,8 +7787,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 +7814,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.70.0",
+	"version": "3.71.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -372,7 +372,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.45.1",
+		"@nxgt/material-core": "^0.46.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",