@nxgt/material 2.6.1 → 2.7.0

package/README.md

@@ -35,6 +35,7 @@ drag-and-drop, i18n, and `Icon`. Tailwind CSS v4 + Base UI.
 - [Guides](#guides)
 - [Components](#components)
 - [Traps](#traps)
+- [Using with Claude Code](#using-with-claude-code)
 - [Documentation](#documentation)
 - [Development](#development)
 - [License](#license)
@@ -72,8 +73,8 @@ and [maps](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/maps.md) gu
 
 The tarball is the built `dist/`, plus the Tailwind source stylesheet
 (`lib/styles.css` and the component stylesheets it imports,
-`lib/components/**/*.css`), `lib/map/map.css` and `docs/`. There is no
-`postinstall` build.
+`lib/components/**/*.css`), `lib/map/map.css`, `docs/` and, from the release
+after 2.6.1, `CHANGELOG.md`. There is no `postinstall` build.
 
 ## Setup
 
@@ -402,7 +403,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#filter), `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets` · `FilterFormField` | Schema-driven filters with chips, presets, validation, and URL or storage persistence. | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterFormField` |
 | — | [`FilterInline`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer), `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` | The filter panel shown inline, or in a popover, dialog, sheet or drawer. | `FilterInline`, `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems`… | Pagination primitives, with first / last links. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` |
@@ -521,6 +522,27 @@ The ones that cost the most time. Every error message, with its fix, is in
 | `(0 , t.createContext) is not a function` in `next build`, for a route handler that imports `/print` | `export default withNxgtPrint(config)` from `@nxgt/material/next`, or `serverExternalPackages: ['@nxgt/material']` by hand ([troubleshooting](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/troubleshooting.md#typeerror-0--tcreatecontext-is-not-a-function-in-a-nextjs-route-handler)) |
 | Next.js `output: 'standalone'`: the PDF route answers `500`, `Cannot find module '…/pdfkit/js/standard-fonts/Helvetica.cjs'` | `withNxgtPrint(config)` from `@nxgt/material/next`, or pdfkit's `.cjs` fonts in `outputFileTracingIncludes` by hand ([printing](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md#nextjs-serverexternalpackages-and-output-standalone)) |
 
+## Using with Claude Code
+
+The `nxgt-material` plugin teaches Claude Code to build a React app with this
+package. Add the marketplace once, then install the plugin in the app's
+repository:
+
+```
+/plugin marketplace add softistx/nxgt-material
+/plugin install nxgt-material@nxgt-material
+```
+
+The marketplace lives in the `softistx/nxgt-material` GitHub repository,
+which is private: adding it needs a GitHub account with access to it.
+
+| Part | What it does |
+| --- | --- |
+| skill `use-nxgt-material` | picks the component by need, and wires imports, `styles.css` and the tokens, forms, i18n, tests by role and SSR from these docs, read in `node_modules/@nxgt/material/docs/` |
+| agent `screen-builder` | builds a page or a form from the catalogue, with tests by role and name and an accessibility check |
+| agent `upgrade-assistant` | upgrades between two versions: reads the release notes in between, applies the migrations that match, runs the app's typecheck and tests |
+| hook (after Write / Edit) | names the component and its docs page when a file hand-rolls one (a native date input, a home-made dialog or tabs, a paged `<table>`, a file input with a preview). Advisory only; `NXGT_MATERIAL_ADVISOR_DISABLE=1` turns it off |
+
 ## Documentation
 
 - [docs/README.md](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/README.md) — every page, and when to read it

package/dist/{_Uint8Array-CDlDeQmw.js → _Uint8Array-JRUmWcRr.js}

@@ -1,4 +1,4 @@
-import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-CaIYjyFP.js";
+import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-CwpmpI24.js";
 //#region ../../node_modules/lodash-es/_isIndex.js
 var l = 9007199254740991, u = /^(?:0|[1-9]\d*)$/;
 function d(e, t) {

package/dist/{_overRest-CWIWQwDJ.js → _overRest-DvC5rm5s.js}

@@ -1,4 +1,4 @@
-import { m as e, p as t } from "./translator-CaIYjyFP.js";
+import { m as e, p as t } from "./translator-CwpmpI24.js";
 //#region ../../node_modules/lodash-es/identity.js
 function n(e) {
 	return e;

package/dist/{async-slice-Qoen0Mqm.js → async-slice-OftEOtMA.js}

@@ -1,5 +1,5 @@
-import { C as e, S as t, h as n, l as r, m as i, p as a, u as o, v as s, w as c, x as l } from "./translator-CaIYjyFP.js";
-import { a as u, c as d, d as f, i as p, n as m, r as h, t as g, u as _ } from "./_Uint8Array-CDlDeQmw.js";
+import { C as e, S as t, h as n, l as r, m as i, p as a, u as o, v as s, w as c, x as l } from "./translator-CwpmpI24.js";
+import { a as u, c as d, d as f, i as p, n as m, r as h, t as g, u as _ } from "./_Uint8Array-JRUmWcRr.js";
 import { L as v } from "./number.utils-BiBN2hWJ.js";
 import { Suspense as y, createContext as b, createElement as x, useContext as ee, useEffect as te, useMemo as S, useReducer as ne, useState as re, useSyncExternalStore as ie } from "react";
 import { asyncThunkCreator as ae, buildCreateSlice as oe } from "@reduxjs/toolkit";

package/dist/{blockDiagram-BEXU5L5S-_6EVgQ2-.js → blockDiagram-BEXU5L5S-BM-gkWAO.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./graphlib-CQ3hLS1N.js";
+import { t as e } from "./graphlib-DLJn7qS3.js";
 import { n as t, t as n } from "./src-C9kQSo6K.js";
 import { A as r, B as i, C as a, D as o, E as s, F as c, G as l, H as u, I as d, L as f, M as p, N as m, O as h, P as g, R as _, T as v, U as ee, V as y, W as b, b as x, j as S, k as C, l as w, v as T, w as E, z as D } from "./chunk-ZIGJFQKS-C3xUAXJq.js";
 import { n as O } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -12,7 +12,7 @@ import "./chunk-7PRAP22T-_Av9vcXz.js";
 import { i as se, n as ce, o as le, r as ue, s as de } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-BY5n77ka.js";
 import { i as fe, r as pe } from "./chunk-5DYCD2WN-Cja1INgd.js";
-import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-DMTBxZxM.js";
 //#region ../../node_modules/es-toolkit/dist/compat/predicate/isArray.mjs
 function ve(e) {
 	return Array.isArray(e);

package/dist/{chunk-3FUC2YCW-CRQHl-Jx.js → chunk-3FUC2YCW-Cf18L00V.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./graphlib-CQ3hLS1N.js";
+import { t as e } from "./graphlib-DLJn7qS3.js";
 import { n as t } from "./src-C9kQSo6K.js";
 import { g as n } from "./chunk-ZIGJFQKS-C3xUAXJq.js";
 import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
 import { b as i, x as a } from "./chunk-O7XYJQB3-A66QSOPA.js";
 import { o } from "./chunk-7INBJB4K-BY5n77ka.js";
 import { i as s, n as c, r as l, t as u } from "./chunk-5DYCD2WN-Cja1INgd.js";
-import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-DMTBxZxM.js";
 import { r as v, t as y } from "./chunk-UA2S7LBM-BNeHeMx9.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-3FUC2YCW.mjs
 function b(e, { edgePathsClass: t = "edges edgePaths" } = {}) {

package/dist/{chunk-7M6MHVWA-DqXpf6CM.js → chunk-7M6MHVWA-C3x6E3yT.js}

@@ -9,7 +9,7 @@ import { a as b } from "./chunk-7INBJB4K-BY5n77ka.js";
 import { t as x } from "./chunk-GWA4HPMP-Co-A6dtV.js";
 import { t as S } from "./chunk-XXDRQBXY-FgXU14Bh.js";
 import { t as C } from "./chunk-WEXAMYUT-CucJfehv.js";
-import { r as w, t as T } from "./chunk-GNY47TPC-BgMsLbCS.js";
+import { r as w, t as T } from "./chunk-GNY47TPC-D1E6DHDV.js";
 import { n as E, t as D } from "./chunk-LNGE3PJU-DJjGTS7O.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-7M6MHVWA.mjs
 var ie = "flowchart-", ae = class {

package/dist/{chunk-GNY47TPC-BgMsLbCS.js → chunk-GNY47TPC-D1E6DHDV.js}

@@ -5,7 +5,7 @@ import { b as r, s as i } from "./chunk-O7XYJQB3-A66QSOPA.js";
 import { t as a } from "./chunk-DUW6YSOI-9R-v-IIp.js";
 import { o } from "./chunk-7INBJB4K-BY5n77ka.js";
 import { r as s } from "./chunk-5DYCD2WN-Cja1INgd.js";
-import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-DMTBxZxM.js";
 import { r as f } from "./chunk-UA2S7LBM-BNeHeMx9.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-GNY47TPC.mjs
 var p = {
@@ -30,7 +30,7 @@ var p = {
 ], h = /* @__PURE__ */ Object.create(null), g = /* @__PURE__ */ n((e) => {
 	for (let t of e) h[t.name] = t;
 }, "registerLayoutLoaders"), _ = /* @__PURE__ */ n(() => {
-	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-DFn4kTey.js"), "loader");
+	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-DI4eicFj.js"), "loader");
 	return [{
 		name: "elk",
 		loader: e,
@@ -45,11 +45,11 @@ var p = {
 	g([
 		{
 			name: "dagre",
-			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-DXq_YBNL.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-DZF0nICj.js"), "loader")
 		},
 		{
 			name: "swimlane",
-			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-tW3_wBWO.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-BtZ7Di5u.js"), "loader")
 		},
 		{
 			name: "cose-bilkent",

package/dist/{chunk-NETBCI7D-CsyH43bj.js → chunk-NETBCI7D-DJUuN4EY.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import { o as t } from "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import { o as t } from "./chunk-Z7XXMR3K-DMTBxZxM.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-NETBCI7D.mjs
 var n = 5, r = 1e-5, i = 2, a = .6, o = 1e-6;
 function s(e) {

package/dist/{chunk-Z7XXMR3K-CoCjTVVx.js → chunk-Z7XXMR3K-DMTBxZxM.js}

@@ -1,4 +1,4 @@
-import { st as e } from "./components-C3wIUrWw.js";
+import { st as e } from "./components-DrStgM4J.js";
 import { n as t, t as n } from "./src-C9kQSo6K.js";
 import { _ as r, a as i, i as a, n as o, o as s, p as c, r as l, t as u, u as d, v as f } from "./step-Dt43c9X4.js";
 import { K as p, g as m, q as h, u as g } from "./chunk-ZIGJFQKS-C3xUAXJq.js";

package/dist/{classDiagram-v2-NBCMYWYE-j4vk04t-.js → classDiagram-v2-NBCMYWYE-BDaxYvDy.js}

@@ -9,12 +9,12 @@ import "./chunk-7PRAP22T-_Av9vcXz.js";
 import { i as v, n as y, o as b, r as x } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-BY5n77ka.js";
 import "./chunk-5DYCD2WN-Cja1INgd.js";
-import "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import "./chunk-Z7XXMR3K-DMTBxZxM.js";
 import { t as S } from "./chunk-GWA4HPMP-Co-A6dtV.js";
 import { t as C } from "./chunk-XXDRQBXY-FgXU14Bh.js";
 import { t as w } from "./chunk-WEXAMYUT-CucJfehv.js";
 import "./chunk-UA2S7LBM-BNeHeMx9.js";
-import { r as T, t as E } from "./chunk-GNY47TPC-BgMsLbCS.js";
+import { r as T, t as E } from "./chunk-GNY47TPC-D1E6DHDV.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-NBCMYWYE.mjs
 var D = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {