@nxgt/material 3.82.0 → 3.83.0

package/dist/{use-chat-composer-BfFcmDua.js → use-chat-composer-DG9YkB4L.js}

@@ -20005,18 +20005,22 @@ function RN({ className: e }) {
 //#endregion
 //#region lib/components/ui/media/galleries/partials/gallery-selection-bar.tsx
 function zN() {
-	let { state: e, selectable: t, clearSelection: n } = KC(), { t: r } = L();
+	let { state: e, selectable: t, selectionActions: n, clearSelection: r } = KC(), { t: i } = L();
 	return !t || e.selectedIds.length === 0 ? null : /* @__PURE__ */ K("div", {
 		"data-slot": "gallery-selection-bar",
 		className: "mb-2 flex flex-wrap items-center justify-between gap-2 rounded-(--nxgt-shape-corner-lg) border border-border bg-background px-3 py-2",
 		children: [/* @__PURE__ */ G(Ot, {
 			className: "text-sm",
-			children: r("material.gallery.selected", "{count} selected", { count: e.selectedIds.length })
-		}), /* @__PURE__ */ G(St, {
-			variant: "ghost",
-			color: "default",
-			onClick: n,
-			children: r("material.gallery.clear-selection", "Clear selection")
+			children: i("material.gallery.selected", "{count} selected", { count: e.selectedIds.length })
+		}), /* @__PURE__ */ K("div", {
+			"data-slot": "gallery-selection-actions",
+			className: "flex flex-wrap items-center gap-2",
+			children: [typeof n == "function" ? n(e.selectedIds) : n, /* @__PURE__ */ G(St, {
+				variant: "ghost",
+				color: "default",
+				onClick: r,
+				children: i("material.gallery.clear-selection", "Clear selection")
+			})]
 		})]
 	});
 }
@@ -20342,68 +20346,69 @@ function oP({ open: e, close: t, currentIndex: n, lightboxOpen: r }) {
 //#endregion
 //#region lib/components/ui/media/galleries/use-gallery.ts
 function sP(e) {
-	let { items: t, defaultIndex: n = 0, defaultOpen: r = !1, onDelete: i, trigger: a, selectable: o = !1 } = e, s = eP(e), [c, l] = Vt(UM, {
+	let { items: t, defaultIndex: n = 0, defaultOpen: r = !1, onDelete: i, trigger: a, selectable: o = !1, selectionActions: s } = e, c = eP(e), [l, u] = Vt(UM, {
 		currentIndex: n,
-		loop: s.loop ?? !1,
+		loop: c.loop ?? !1,
 		lightboxOpen: r
 	});
-	nP(e, c, l);
-	let { next: u, prev: d, select: f, downloadCurrent: p } = XN(t, c, l), m = oP({
-		lightboxOpen: c.lightboxOpen,
-		open: l.openLightbox,
-		close: l.closeLightbox,
-		currentIndex: c.currentIndex
-	}), h = B((e, t) => {
-		s.lightbox ? m.openWith(e, t) : l.setIndex(e);
+	nP(e, l, u);
+	let { next: d, prev: f, select: p, downloadCurrent: m } = XN(t, l, u), h = oP({
+		lightboxOpen: l.lightboxOpen,
+		open: u.openLightbox,
+		close: u.closeLightbox,
+		currentIndex: l.currentIndex
+	}), g = B((e, t) => {
+		c.lightbox ? h.openWith(e, t) : u.setIndex(e);
 	}, [
-		s.lightbox,
-		l,
-		m.openWith
-	]), g = qN({
+		c.lightbox,
+		u,
+		h.openWith
+	]), _ = qN({
 		items: t,
-		state: c,
-		sliceActions: l,
-		resolved: s,
-		next: u,
-		prev: d,
-		close: m.closeWith,
-		downloadCurrent: p,
-		zoomable: t[c.currentIndex]?.kind !== "video"
+		state: l,
+		sliceActions: u,
+		resolved: c,
+		next: d,
+		prev: f,
+		close: h.closeWith,
+		downloadCurrent: m,
+		zoomable: t[l.currentIndex]?.kind !== "video"
 	});
 	return {
 		items: t,
-		resolved: s,
-		state: c,
-		current: WM.selectCurrent(c, t),
-		canNext: WM.selectCanNext(c, t.length),
-		canPrev: WM.selectCanPrev(c, t.length),
+		resolved: c,
+		state: l,
+		current: WM.selectCurrent(l, t),
+		canNext: WM.selectCanNext(l, t.length),
+		canPrev: WM.selectCanPrev(l, t.length),
 		onDelete: i,
 		trigger: a,
-		openAt: h,
-		select: f,
-		next: u,
-		prev: d,
-		closeLightbox: m.closeWith,
-		setZoom: l.setZoom,
-		setPan: l.setPan,
-		morph: m.morph,
-		toggleLoop: l.toggleLoop,
-		goToFirst: () => l.setIndex(0),
-		goToLast: () => l.setIndex(Math.max(0, t.length - 1)),
-		downloadCurrent: p,
+		openAt: g,
+		select: p,
+		next: d,
+		prev: f,
+		closeLightbox: h.closeWith,
+		setZoom: u.setZoom,
+		setPan: u.setPan,
+		morph: h.morph,
+		toggleLoop: u.toggleLoop,
+		goToFirst: () => u.setIndex(0),
+		goToLast: () => u.setIndex(Math.max(0, t.length - 1)),
+		downloadCurrent: m,
 		selectable: o,
-		toggleSelected: l.toggleSelected,
-		clearSelection: l.clearSelection,
-		onKeyDown: g
+		selectionActions: s,
+		toggleSelected: u.toggleSelected,
+		clearSelection: u.clearSelection,
+		onKeyDown: _
 	};
 }
 //#endregion
 //#region lib/components/ui/media/galleries/gallery.tsx
 function cP(e) {
-	let t = sP(e), { items: n, preset: r, layout: i, columns: a, aspect: o, loop: s, maxItems: c, lightbox: l, captions: u, shape: d, carousel: f, carouselAlign: p, carouselOrientation: m, defaultIndex: h, currentIndex: g, onIndexChange: _, open: v, defaultOpen: y, onOpenChange: b, onDelete: x, selectable: S, onSelectionChange: C, trigger: w, ...T } = e;
+	let t = sP(e), { items: n, preset: r, layout: i, columns: a, aspect: o, loop: s, maxItems: c, lightbox: l, captions: u, shape: d, carousel: f, carouselAlign: p, carouselOrientation: m, defaultIndex: h, currentIndex: g, onIndexChange: _, open: v, defaultOpen: y, onOpenChange: b, onDelete: x, selectable: S, onSelectionChange: C, selectionActions: w, trigger: T, ...E } = e;
 	return /* @__PURE__ */ G(GC, {
 		value: t,
-		children: /* @__PURE__ */ G(lP, { ...T })
+		children: /* @__PURE__ */ G(lP, { ...E })
 	});
 }
 function lP({ className: e, onKeyDown: t, ...r }) {

package/docs/components/data-display.md

@@ -18,6 +18,7 @@ from `@nxgt/material/components`.
 | <img src="../previews/data-display-periodcards.webp" width="96" alt=""> | [PeriodCards](#periodcards) | Consecutive date ranges (terms, sprints) as cards, with a current marker and an optional link per card |
 | <img src="../previews/data-display-chip.webp" width="96" alt=""> | [Chip](#chip) | Three looks and a dashed add pill, with slots, a selected state and a dismiss button |
 | <img src="../previews/data-display-statcard.webp" width="96" alt=""> | [StatCard](#statcard) | KPI tile with value, hint, icon and toned delta; `href` makes it one link |
+| | [TotalsList](#totalslist) | Labelled figures in a `dl`, amounts right-aligned, a ruled grand-total row; the screen twin of `PrintTotals` |
 | <img src="../previews/data-display-metric-cards.webp" width="96" alt=""> | [Metric cards](#metric-cards) | Sixteen dashboard tiles |
 | <img src="../previews/data-display-card-presets.webp" width="96" alt=""> | [Card presets](#card-presets) | Twenty-seven ready-made cards |
 | <img src="../previews/data-display-statusindicator.webp" width="96" alt=""> | [StatusIndicator](#statusindicator) | Coloured status dot with a label |
@@ -194,7 +195,7 @@ no `style` attribute and a strict CSP is fine.
 - Seat changes are not animated beyond a colour fade, which stops under
   `prefers-reduced-motion`.
 
-**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#2470) (#1931)
+**Storybook:** `Data display/SeatRing` · **Vue:** not yet (#1931)
 
 ---
 
@@ -269,7 +270,7 @@ const [open, setOpen] = useState(false);
   the layout follows `dir` (RTL) and dark mode.
 - Keep `front` and `description` free of the secret: they are always in the page.
 
-**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#2470) (#1938)
+**Storybook:** `Data display/SecretCard` · **Vue:** not yet (#1938)
 
 ---
 
@@ -603,6 +604,35 @@ pass `disabled` with a `Spinner` in `leading`, or use a `Button`.
 
 ---
 
+## TotalsList
+
+On-screen counterpart of `PrintTotals`: a `dl` of labelled figures, labels at the start, amounts right-aligned in tabular figures, one column at any width (a side rail, a phone). Rows have the shape of `PrintTotalRow` (`label`, `value`, `last`), so one array feeds the screen and its print.
+
+```tsx
+import { TotalsList } from '@nxgt/material/components';
+
+<TotalsList
+  label="Order totals"
+  rows={[
+    { label: 'Subtotal', value: '1,000.00' },
+    { label: 'Tax (19%)', value: '190.00' },
+    { label: 'Total', value: '1,190.00', last: true },
+  ]}
+/>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `rows` | `{ label, value, last?, strong?, tone? }[]` | required | `last` makes the grand total larger and bold with a rule above; `strong` emphasises a row with no rule; `tone` colours the amount (`error` for a due or negative amount, `success` for a credit; an `AppTones` tone works too) |
+| `label` | `string` | — | accessible name: the block becomes a `group` named by it |
+| `variant` | `'card' \| 'plain'` | `'card'` | `plain` has no border or padding, to sit inside a card you already have |
+
+Format the amounts for the locale before passing them (`Intl.NumberFormat`); a long label wraps and the amount stays whole.
+
+**Storybook:** `Data display/TotalsList`
+
+---
+
 ## StatCard
 
 ![StatCard](../previews/data-display-statcard.webp)
@@ -812,7 +842,7 @@ import { TubeCap } from '@nxgt/material/components';
 | `action` | `ReactNode` | none | trailing slot, such as an `IconButton` |
 | `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | cap of 20, 28 or 40px |
 
-`TUBE_CAP_KINDS` lists the kinds. The look is CSS on `data-kind`, with no inline style (strict CSP). The cap is `aria-hidden`.
+`TUBE_CAP_KINDS` lists the kinds, and `TubeCapKind` is the exported type of `kind`. The look is CSS on `data-kind`, with no inline style (strict CSP). The cap is `aria-hidden`.
 
 **Storybook:** `Data display/TubeCap` · **Vue:** `TubeCap` (`@nxgt/material-vue/components`)
 
@@ -1367,7 +1397,7 @@ and the user's zone) and both sides agree:
 <ChangeHistory entries={entries} now={loaderData.now} timeZone={loaderData.timeZone} />
 ```
 
-**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (#2470) (tracked as a `vue` issue)
+**Storybook:** `Data display/ChangeHistory` · **Vue:** not yet (tracked as a `vue` issue)
 
 ---
 
@@ -1404,7 +1434,7 @@ The offset follows the instant (`Europe/Paris` is `UTC+1` in winter and
 `UTC+2` in summer). `ChangeHistory` takes a `timeZone` and `RelativeTime` a `now`
 the same way; pass the app's zone from the server so every screen agrees.
 
-**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (#2470) (tracked as a `vue` issue)
+**Storybook:** `Data display/ZonedTime` · **Vue:** not yet (tracked as a `vue` issue)
 
 ---
 
@@ -1473,7 +1503,7 @@ own, so they add up to less.
 - Bar widths are SVG attributes, so server markup has no `style` attribute and
   a strict CSP is fine.
 
-**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#2470) (#1940)
+**Storybook:** `Data display/VoteTally` · **Vue:** not yet (#1940)
 
 ---
 
@@ -1806,7 +1836,7 @@ lock set by another code form disables its field and leaves Cancel usable.
 button by `getByRole('button', { name: 'Activate' })` and the lock by
 `getByRole('alert')`.
 
-**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet (#2470)
+**Storybook:** `Data display/EnrolmentCard`, `…/Shared lock`, `Guides/Accessibility/Touch targets/Verification code` · **Vue:** not yet
 
 ---
 
@@ -1949,4 +1979,4 @@ import { RecoveryCodesStatus, VerificationLockProvider } from '@nxgt/material/co
 
 It reads the page-wide lock like [EnrolmentCard](#enrolmentcard) does. With `requireCode={false}` there is no code form, so `error` and `attemptsLeft` are not shown: the plain button follows `pending`, and is disabled by `locked` and by the page-wide lock; then the lock's text (the message of the answer that locked, or "Too many wrong codes. Try again later.") shows above it as a muted line that describes the button.
 
-**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet (#2470)
+**Storybook:** `Data display/RecoveryCodesStatus`, `Data display/EnrolmentCard/Shared lock` · **Vue:** not yet

package/docs/components/media-and-files.md

@@ -602,6 +602,14 @@ const items: GalleryItem[] = [
 
 <Gallery items={items} preset="grid" selectable onSelectionChange={console.log} />;
 
+// Bulk actions on the selection: they appear in the "n selected" bar.
+<Gallery
+  items={items}
+  preset="grid"
+  selectable
+  selectionActions={(ids) => <Button onClick={() => removeAll(ids)}>Delete</Button>}
+/>;
+
 <LightboxGallery items={items} trigger={<button type="button">Open gallery</button>} />;
 
 <MiniGallery items={items} maxItems={5} />;
@@ -622,6 +630,7 @@ with a `+N` tile).
 | `carouselAlign` / `carouselOrientation` | `'start' \| 'center'` / `'horizontal' \| 'vertical'` | `'start'` / `'horizontal'` | where the large tile of `hero` sits; the scroll axis |
 | `lightbox` | `boolean` | from `preset` | click opens the full-screen viewer (gestures, zoom, filmstrip, download, keyboard) |
 | `selectable` | `boolean` | — | checkboxes on tiles; `onSelectionChange(ids)` |
+| `selectionActions` | `ReactNode \| (selectedIds: string[]) => ReactNode` | — | bulk actions (download, move, delete) at the end of the "n selected" bar of a `selectable` gallery; a render function receives the selected ids. Hidden while nothing is selected; wraps under the count on a phone |
 | `open` / `defaultOpen` / `onOpenChange` | `boolean` | — | control the lightbox |
 | `onDelete` | `(item) => void` | — | adds a delete button on each tile |
 | `aria-label` / `aria-labelledby` | `string` | `'Gallery'` label | names the gallery (the root has `role="application"`); a given `aria-labelledby` replaces the default label. `MiniGallery` and `LightboxGallery` take both. Other `div` props (`id`, `data-*`, `onKeyDown`) reach the root element |
@@ -1913,6 +1922,8 @@ Parts: `PrintDocument`, `PrintHeader`, `PrintSection`, `PrintInfoRow`,
 `definePrintColumns` and the helpers `resolvePrintTable`,
 `resolvePrintFields`, `toPrintValue` and `formatPrintValue`.
 
+For the same rows on screen, use [`TotalsList`](data-display.md#totalslist).
+
 **To get the file**, pass the document to one function: `downloadPdf`
 saves it, `openPdf` opens it in a new tab (a download when a popup blocker
 stops the tab), `usePdfFile` keeps a preview current, and `pdfResponse`

package/docs/guides/layouts.md

@@ -204,8 +204,11 @@ The props of each are in
 The `Guides/Recipes` stories in Storybook are tested whole screens (the code
 ships with the `screen-recipes` skill of the `nxgt-material` plugin): a home
 dashboard, a list and detail, a form and dialog, a table and settings, a dense
-detail page, a status board, a landing page and a search dialog with its
-results page. Start from the closest one and replace the data.
+detail page, a status board, a landing page, a search dialog with its results
+page, a team feed, the sign-in, sign-up and forgotten-password screens, a
+gallery of pictures, settings with sections, a messages thread, an overview of
+rearrangeable widgets on `DashboardGrid` and a document editor. Start from the
+closest one and replace the data.
 
 ## See also
 

package/docs/roadmap.md

@@ -166,13 +166,10 @@ version they shipped in, and planned entries may name the major they target.
   descriptions, a small empty state, loading rows and an in-list search
   pill. What changes on upgrade:
   [The field look (2.x)](guides/field-look-2-x.md)
+- **`TotalsList`** — the on-screen `PrintTotals` (#2490): React only for now; Vue twin is #2492.
 
 ## Next
 
-- **Seven more layout recipes** — Feed, Gallery, Auth, Thread, settings,
-  dashboard and editor screens, each a tested Storybook recipe under
-  Guides/Recipes with its code beside it, on the layouts the shell now ships
-  ([#2413](https://github.com/softistx/nxgt-material/issues/2413)).
 - **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)).
 
@@ -383,6 +380,8 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Seven more layout recipes (next minor)** — whole screens to start from under Guides/Recipes, each a tested Storybook story with its code in the plugin's `screen-recipes` skill: a team feed, a gallery of pictures by day, sign-in, sign-up and forgotten-password screens, a messages thread, settings with sections, an overview of rearrangeable widgets and a document editor, on the layouts the shell ships ([#2413](https://github.com/softistx/nxgt-material/issues/2413)).
+
 - **Search dialog and results page recipe (next patch)** — a command dialog (Ctrl/Cmd+K and a header button), debounced grouped suggestions, type chips, a conditional filter and highlighted result cards, with its code in the plugin's `screen-recipes` skill ([#2333](https://github.com/softistx/nxgt-material/issues/2333)).
 
 - **Layouts: adaptive navigation, headers and page layouts (3.80.0)** — `ActivityLayout` takes `navigation` (a bottom bar with More and badges, a rail with a FAB or expanded, a standard or modal drawer, a collapsible sidebar, a top navigation with dropdowns, two-level navigation, a floating toolbar or none, chosen for phone, tablet and desktop) and `header` (small, center-aligned, medium and large collapsing on scroll, hide on scroll, a search bar that opens full screen on a phone, sticky tabs), and a route adds a back arrow with `handle.back`; each piece is also exported. Page layouts grow with it: an inspector pane and the selection in the URL for `ListDetailsLayout`, phone modes and a container breakpoint for `PaneLayout`, a centred form and wizard for `ThreadLayout`, a split `AuthCard`, spans and masonry for `ResponsiveGrid`, tabs for `Kanban` on a phone, `Doc` drawn inside the shell, and new `SettingsLayout`, `DashboardGrid` (tiles the user rearranges), `EditorLayout` and `LandingLayout` (with `LandingSection` and `SiteFooter`). Everything is opt-in; the shell's default is unchanged. [Layouts guide](guides/layouts.md) ([#2103](https://github.com/softistx/nxgt-material/issues/2103)). Follow-ups: a resize handle for `EditorLayout`'s properties panel and a separate open state for its phone sheet.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.82.0",
+	"version": "3.83.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"