it-data-nexus-ui-library 2.11.1 → 2.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/MetricStat.mjs +1 -1
  2. package/dist/generated/version.mjs +1 -1
  3. package/package.json +159 -159
  4. package/readme.md +167 -167
package/dist/components/MetricStat.mjs CHANGED
@@ -1 +1 @@
1
- import{jsxs as e,jsx as o}from"react/jsx-runtime";import{Stack as r}from"./_Primitives/Stack.mjs";import{H4 as i,MetricValue as a,Caption as l}from"./Typography.mjs";const t=({label:t,value:n,delta:s,deltaColor:c,valueColor:m,size:p,icon:d,iconColor:x,iconSize:h,valueRowGap:g=1,labelGap:u=.25,alignValueToBottom:y=!1,sx:f})=>e(r,{sx:[{gap:u,...y?{height:"100%",justifyContent:"space-between"}:{}},...Array.isArray(f)?f:f?[f]:[]],children:[o(i,{sx:{color:"text.secondary"},children:t}),e(r,{direction:"row",sx:{alignItems:"baseline",gap:g},children:[d&&o(d,{"aria-hidden":"true",sx:{alignSelf:"center",color:x,fontSize:h??("lg"===p?40:"sm"===p?28:"xs"===p?22:34)}}),o(a,{size:p,sx:m?{color:m}:void 0,children:n}),s&&o(l,{component:"span",sx:[...c?[{color:c}]:[]],children:s})]})]});t.displayName="MetricStat";export{t as MetricStat};
1
+ import{jsxs as e,jsx as o}from"react/jsx-runtime";import{Stack as r}from"./_Primitives/Stack.mjs";import{H4 as i,MetricValue as t,Caption as a}from"./Typography.mjs";const l=({label:l,value:n,delta:s,deltaColor:c,valueColor:m,size:d,icon:p,iconColor:x,iconSize:h,valueRowGap:g=1,labelGap:u=.25,alignValueToBottom:y=!1,sx:f})=>e(r,{sx:[{gap:u,...y?{height:"100%",justifyContent:"space-between"}:{}},...Array.isArray(f)?f:f?[f]:[]],children:[o(i,{sx:{color:"text.secondary"},children:l}),e(r,{direction:"row",sx:{alignItems:"flex-end",gap:g},children:[p&&o(p,{"aria-hidden":"true",sx:{color:x,fontSize:h??("lg"===d?40:"sm"===d?28:"xs"===d?22:34)}}),o(t,{size:d,sx:m?{color:m}:void 0,children:n}),s&&o(a,{component:"span",sx:[...c?[{color:c}]:[]],children:s})]})]});l.displayName="MetricStat";export{l as MetricStat};
package/dist/generated/version.mjs CHANGED
@@ -1 +1 @@
1
- const o="2.11.1";export{o as SAGE_NEXUS_UI_VERSION};
1
+ const o="2.11.2";export{o as SAGE_NEXUS_UI_VERSION};
package/package.json CHANGED
@@ -1,159 +1,159 @@
1
- {
2
- "name": "it-data-nexus-ui-library",
3
- "version": "2.11.1",
4
- "description": "Nexus core components",
5
- "license": "ISC",
6
- "author": "emsmart-sage",
7
- "type": "module",
8
- "main": "dist/index.mjs",
9
- "module": "dist/index.mjs",
10
- "types": "dist/index.d.ts",
11
- "exports": {
12
- ".": {
13
- "import": "./dist/index.mjs",
14
- "types": "./dist/index.d.ts"
15
- },
16
- "./schema-form": {
17
- "import": "./dist/schema-form.mjs",
18
- "types": "./dist/schema-form.d.ts"
19
- },
20
- "./react-flow.css": {
21
- "types": "./dist/react-flow.css.d.ts",
22
- "default": "./dist/react-flow.css"
23
- }
24
- },
25
- "engines": {
26
- "node": ">=18.18.0",
27
- "npm": ">=9"
28
- },
29
- "files": [
30
- "dist"
31
- ],
32
- "sideEffects": [
33
- "**/*.css"
34
- ],
35
- "scripts": {
36
- "prebuild": "node scripts/write-version.mjs",
37
- "build": "node -e \"require('fs').rmSync('dist', {recursive:true, force:true})\" && rollup -c && node scripts/copy-react-flow-styles.mjs",
38
- "build-storybook": "storybook build",
39
- "generate-favicon": "node scripts/generate-favicon.mjs",
40
- "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
41
- "prepublishOnly": "npm run lint && npm run build",
42
- "storybook": "storybook dev -p 6006",
43
- "test:unit": "vitest run --config vitest.unit.config.ts",
44
- "test": "echo \"Error: no test specified\" && exit 1"
45
- },
46
- "dependencies": {
47
- "@mui/x-charts": "^9.4.0",
48
- "@radix-ui/react-popover": "^1.1.15",
49
- "dompurify": "3.4.13",
50
- "diff": "^9.0.0",
51
- "react-json-view-lite": "^2.5.0"
52
- },
53
- "peerDependencies": {
54
- "@xyflow/react": "^12.12.0",
55
- "@emotion/react": "^11.14.0",
56
- "@emotion/styled": "^11.14.1",
57
- "@mui/icons-material": "^7 || ^8 || ^9",
58
- "@mui/material": "^7 || ^8 || ^9",
59
- "@mui/x-data-grid": "^7 || ^8 || ^9",
60
- "@mui/x-date-pickers": "^7 || ^8 || ^9",
61
- "date-fns": "^3 || ^4",
62
- "react": "^18 || ^19",
63
- "react-day-picker": "^9",
64
- "react-dom": "^18 || ^19",
65
- "react-markdown": "^10",
66
- "remark-gfm": "^4",
67
- "@rjsf/core": "^6.11.0",
68
- "@rjsf/mui": "^6.11.0",
69
- "@rjsf/utils": "^6.11.0",
70
- "@rjsf/validator-ajv8": "^6.11.0"
71
- },
72
- "peerDependenciesMeta": {
73
- "@radix-ui/react-popover": {
74
- "optional": false
75
- },
76
- "react-day-picker": {
77
- "optional": true
78
- },
79
- "react-markdown": {
80
- "optional": true
81
- },
82
- "remark-gfm": {
83
- "optional": true
84
- },
85
- "@mui/x-data-grid": {
86
- "optional": true
87
- },
88
- "@mui/x-date-pickers": {
89
- "optional": true
90
- },
91
- "@rjsf/core": {
92
- "optional": true
93
- },
94
- "@rjsf/mui": {
95
- "optional": true
96
- },
97
- "@rjsf/utils": {
98
- "optional": true
99
- },
100
- "@rjsf/validator-ajv8": {
101
- "optional": true
102
- }
103
- },
104
- "devDependencies": {
105
- "@xyflow/react": "^12.12.0",
106
- "@chromatic-com/storybook": "^5.3.0",
107
- "@emotion/react": "^11.14.0",
108
- "@emotion/styled": "^11.14.1",
109
- "@eslint/js": "9.39.4",
110
- "@mui/icons-material": "^9.0.1",
111
- "@mui/material": "^9.0.1",
112
- "@mui/x-data-grid": "^9.0.0",
113
- "@mui/x-date-pickers": "^9.3.0",
114
- "@radix-ui/react-popover": "^1.1.15",
115
- "@rjsf/core": "^6.11.0",
116
- "@rjsf/mui": "^6.11.0",
117
- "@rjsf/utils": "^6.11.0",
118
- "@rjsf/validator-ajv8": "^6.11.0",
119
- "@rollup/plugin-alias": "^6.0.0",
120
- "@rollup/plugin-commonjs": "^29.0.2",
121
- "@rollup/plugin-json": "^6.0.0",
122
- "@rollup/plugin-node-resolve": "^16.0.3",
123
- "@rollup/plugin-terser": "^1.0.0",
124
- "@rollup/plugin-typescript": "^12.3.0",
125
- "@rollup/plugin-url": "^8.0.2",
126
- "@storybook/addon-a11y": "^10.5.10",
127
- "@storybook/addon-docs": "^10.5.10",
128
- "@storybook/addon-vitest": "^10.5.10",
129
- "@storybook/react-vite": "^10.5.10",
130
- "@types/node": "^25.6.0",
131
- "@types/react": "^19.2.14",
132
- "@types/rollup-plugin-peer-deps-external": "^2.2.6",
133
- "@vitejs/plugin-react": "^6.0.1",
134
- "@vitest/browser-playwright": "^4.1.4",
135
- "@vitest/coverage-v8": "^4.1.4",
136
- "date-fns": "^4.1.0",
137
- "eslint": "9.39.4",
138
- "eslint-plugin-import": "^2.32.0",
139
- "eslint-plugin-react": "^7.37.5",
140
- "globals": "^17.5.0",
141
- "playwright": "^1.59.1",
142
- "png-to-ico": "^2.1.8",
143
- "react": "^19.2.5",
144
- "react-day-picker": "^9.13.2",
145
- "react-dom": "^19.2.5",
146
- "react-markdown": "^10",
147
- "remark-gfm": "^4",
148
- "rollup": "^4.60.1",
149
- "rollup-plugin-dts": "^6.4.1",
150
- "rollup-plugin-peer-deps-external": "^2.2.4",
151
- "rollup-plugin-postcss": "^4.0.2",
152
- "sharp": "^0.34.5",
153
- "storybook": "^10.5.10",
154
- "tslib": "^2.8.1",
155
- "typescript": "^6.0.2",
156
- "typescript-eslint": "8.58.2",
157
- "vitest": "^4.1.4"
158
- }
159
- }
1
+ {
2
+ "name": "it-data-nexus-ui-library",
3
+ "version": "2.11.2",
4
+ "description": "Nexus core components",
5
+ "license": "ISC",
6
+ "author": "emsmart-sage",
7
+ "type": "module",
8
+ "main": "dist/index.mjs",
9
+ "module": "dist/index.mjs",
10
+ "types": "dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "import": "./dist/index.mjs",
14
+ "types": "./dist/index.d.ts"
15
+ },
16
+ "./schema-form": {
17
+ "import": "./dist/schema-form.mjs",
18
+ "types": "./dist/schema-form.d.ts"
19
+ },
20
+ "./react-flow.css": {
21
+ "types": "./dist/react-flow.css.d.ts",
22
+ "default": "./dist/react-flow.css"
23
+ }
24
+ },
25
+ "engines": {
26
+ "node": ">=18.18.0",
27
+ "npm": ">=9"
28
+ },
29
+ "files": [
30
+ "dist"
31
+ ],
32
+ "sideEffects": [
33
+ "**/*.css"
34
+ ],
35
+ "scripts": {
36
+ "prebuild": "node scripts/write-version.mjs",
37
+ "build": "node -e \"require('fs').rmSync('dist', {recursive:true, force:true})\" && rollup -c && node scripts/copy-react-flow-styles.mjs",
38
+ "build-storybook": "storybook build",
39
+ "generate-favicon": "node scripts/generate-favicon.mjs",
40
+ "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
41
+ "prepublishOnly": "npm run lint && npm run build",
42
+ "storybook": "storybook dev -p 6006",
43
+ "test:unit": "vitest run --config vitest.unit.config.ts",
44
+ "test": "echo \"Error: no test specified\" && exit 1"
45
+ },
46
+ "dependencies": {
47
+ "@mui/x-charts": "^9.4.0",
48
+ "@radix-ui/react-popover": "^1.1.15",
49
+ "dompurify": "3.4.13",
50
+ "diff": "^9.0.0",
51
+ "react-json-view-lite": "^2.5.0"
52
+ },
53
+ "peerDependencies": {
54
+ "@xyflow/react": "^12.12.0",
55
+ "@emotion/react": "^11.14.0",
56
+ "@emotion/styled": "^11.14.1",
57
+ "@mui/icons-material": "^7 || ^8 || ^9",
58
+ "@mui/material": "^7 || ^8 || ^9",
59
+ "@mui/x-data-grid": "^7 || ^8 || ^9",
60
+ "@mui/x-date-pickers": "^7 || ^8 || ^9",
61
+ "date-fns": "^3 || ^4",
62
+ "react": "^18 || ^19",
63
+ "react-day-picker": "^9",
64
+ "react-dom": "^18 || ^19",
65
+ "react-markdown": "^10",
66
+ "remark-gfm": "^4",
67
+ "@rjsf/core": "^6.11.0",
68
+ "@rjsf/mui": "^6.11.0",
69
+ "@rjsf/utils": "^6.11.0",
70
+ "@rjsf/validator-ajv8": "^6.11.0"
71
+ },
72
+ "peerDependenciesMeta": {
73
+ "@radix-ui/react-popover": {
74
+ "optional": false
75
+ },
76
+ "react-day-picker": {
77
+ "optional": true
78
+ },
79
+ "react-markdown": {
80
+ "optional": true
81
+ },
82
+ "remark-gfm": {
83
+ "optional": true
84
+ },
85
+ "@mui/x-data-grid": {
86
+ "optional": true
87
+ },
88
+ "@mui/x-date-pickers": {
89
+ "optional": true
90
+ },
91
+ "@rjsf/core": {
92
+ "optional": true
93
+ },
94
+ "@rjsf/mui": {
95
+ "optional": true
96
+ },
97
+ "@rjsf/utils": {
98
+ "optional": true
99
+ },
100
+ "@rjsf/validator-ajv8": {
101
+ "optional": true
102
+ }
103
+ },
104
+ "devDependencies": {
105
+ "@xyflow/react": "^12.12.0",
106
+ "@chromatic-com/storybook": "^5.3.0",
107
+ "@emotion/react": "^11.14.0",
108
+ "@emotion/styled": "^11.14.1",
109
+ "@eslint/js": "9.39.4",
110
+ "@mui/icons-material": "^9.0.1",
111
+ "@mui/material": "^9.0.1",
112
+ "@mui/x-data-grid": "^9.0.0",
113
+ "@mui/x-date-pickers": "^9.3.0",
114
+ "@radix-ui/react-popover": "^1.1.15",
115
+ "@rjsf/core": "^6.11.0",
116
+ "@rjsf/mui": "^6.11.0",
117
+ "@rjsf/utils": "^6.11.0",
118
+ "@rjsf/validator-ajv8": "^6.11.0",
119
+ "@rollup/plugin-alias": "^6.0.0",
120
+ "@rollup/plugin-commonjs": "^29.0.2",
121
+ "@rollup/plugin-json": "^6.0.0",
122
+ "@rollup/plugin-node-resolve": "^16.0.3",
123
+ "@rollup/plugin-terser": "^1.0.0",
124
+ "@rollup/plugin-typescript": "^12.3.0",
125
+ "@rollup/plugin-url": "^8.0.2",
126
+ "@storybook/addon-a11y": "^10.5.10",
127
+ "@storybook/addon-docs": "^10.5.10",
128
+ "@storybook/addon-vitest": "^10.5.10",
129
+ "@storybook/react-vite": "^10.5.10",
130
+ "@types/node": "^25.6.0",
131
+ "@types/react": "^19.2.14",
132
+ "@types/rollup-plugin-peer-deps-external": "^2.2.6",
133
+ "@vitejs/plugin-react": "^6.0.1",
134
+ "@vitest/browser-playwright": "^4.1.4",
135
+ "@vitest/coverage-v8": "^4.1.4",
136
+ "date-fns": "^4.1.0",
137
+ "eslint": "9.39.4",
138
+ "eslint-plugin-import": "^2.32.0",
139
+ "eslint-plugin-react": "^7.37.5",
140
+ "globals": "^17.5.0",
141
+ "playwright": "^1.59.1",
142
+ "png-to-ico": "^2.1.8",
143
+ "react": "^19.2.5",
144
+ "react-day-picker": "^9.13.2",
145
+ "react-dom": "^19.2.5",
146
+ "react-markdown": "^10",
147
+ "remark-gfm": "^4",
148
+ "rollup": "^4.60.1",
149
+ "rollup-plugin-dts": "^6.4.1",
150
+ "rollup-plugin-peer-deps-external": "^2.2.4",
151
+ "rollup-plugin-postcss": "^4.0.2",
152
+ "sharp": "^0.34.5",
153
+ "storybook": "^10.5.10",
154
+ "tslib": "^2.8.1",
155
+ "typescript": "^6.0.2",
156
+ "typescript-eslint": "8.58.2",
157
+ "vitest": "^4.1.4"
158
+ }
159
+ }
package/readme.md CHANGED
@@ -1,167 +1,167 @@
1
- Small component library for personal use.
2
-
3
- <!-- test change -->
4
-
5
- ## Favicon usage
6
-
7
- This package exports the favicon assets and a small helper to make adding
8
- favicon links in consuming apps trivial.
9
-
10
- Files available in package:
11
-
12
- - `nexus-logo-favicon.svg` — modern SVG favicon
13
- - `favicon.ico` — multi-size ICO (legacy support)
14
-
15
- Quick copy approach (recommended):
16
-
17
- 1. Add and then run these asset copy scripts in the consuming project's package.json:
18
-
19
- ```json
20
- "scripts": {
21
- "copy-sage-assets": "cpx \"node_modules/it-data-nexus-ui-library/dist/assets/images/*\" public/assets/it-data-nexus-ui-library/",
22
- "postinstall": "npm run copy-sage-assets"
23
- }
24
- ```
25
-
26
- 2. Add links in your HTML head:
27
-
28
- ```html
29
- <link
30
- rel="icon"
31
- type="image/svg+xml"
32
- href="/assets/it-data-nexus-ui-library/nexus-logo-favicon.svg"
33
- />
34
- <link rel="icon" href="/assets/it-data-nexus-ui-library/favicon.ico" />
35
- ```
36
-
37
- Or, use the React helper exported by this package:
38
-
39
- ```tsx
40
- import { FaviconLinks } from "it-data-nexus-ui-library";
41
-
42
- function AppHead() {
43
- return <FaviconLinks />; // adds versioned SVG and ICO links
44
- }
45
- ```
46
-
47
- ### Next.js example
48
-
49
- If you use Next.js (Pages or App router), you can copy the built assets into your `public/` folder and render the helper component from the app head so the favicon is present on first render.
50
-
51
- 1. Copy assets during install/build (example `package.json` scripts in the consuming app):
52
-
53
- ```json
54
- "scripts": {
55
- "copy-sage-assets": "cpx \"node_modules/it-data-nexus-ui-library/dist/assets/images/*\" public/assets/it-data-nexus-ui-library/",
56
- "postinstall": "npm run copy-sage-assets"
57
- }
58
- ```
59
-
60
- 2. Pages router (`pages/_document.tsx`) example — server-side rendered so the links are available immediately:
61
-
62
- ```tsx
63
- // pages/_document.tsx
64
- import Document, { Html, Head, Main, NextScript } from "next/document";
65
- import { FaviconLinks } from "it-data-nexus-ui-library";
66
-
67
- class MyDocument extends Document {
68
- render() {
69
- return (
70
- <Html>
71
- <Head>
72
- <FaviconLinks />
73
- </Head>
74
- <body>
75
- <Main />
76
- <NextScript />
77
- </body>
78
- </Html>
79
- );
80
- }
81
- }
82
-
83
- export default MyDocument;
84
- ```
85
-
86
- 3. App router (`app/layout.tsx`) example:
87
-
88
- ```tsx
89
- // app/layout.tsx
90
- import { FaviconLinks } from "it-data-nexus-ui-library";
91
-
92
- export default function RootLayout({
93
- children,
94
- }: {
95
- children: React.ReactNode;
96
- }) {
97
- return (
98
- <html>
99
- <head>
100
- <FaviconLinks />
101
- </head>
102
- <body>{children}</body>
103
- </html>
104
- );
105
- }
106
- ```
107
-
108
- Notes:
109
-
110
- - Copying assets into `public/` ensures the files are served as static assets (no runtime JS required) and avoids a flash-of-default-favicon.
111
- - The `FaviconLinks` helper uses versioned URLs by default to help cache-busting when you publish a new library version.
112
-
113
- ## SchemaForm (separate entry)
114
-
115
- `SchemaForm` wraps `@rjsf/mui`, which is heavy, so it is not in the main
116
- entry. Import it from the subpath and install its optional peers:
117
-
118
- ```bash
119
- npm i @rjsf/mui @rjsf/core @rjsf/utils @rjsf/validator-ajv8
120
- ```
121
-
122
- ```tsx
123
- import { SchemaForm } from "it-data-nexus-ui-library/schema-form";
124
- ```
125
-
126
- Apps that never import `it-data-nexus-ui-library/schema-form` do not need the
127
- `@rjsf/*` packages and never load them.
128
-
129
- ## NexusFlow (node graphs)
130
-
131
- `NexusFlow` is a themed wrapper over [`@xyflow/react`](https://reactflow.dev)
132
- 12. `@xyflow/react` is a **required peer dependency**: install it in the app
133
- alongside the library, and import the stylesheet once in the app entry.
134
-
135
- ```bash
136
- npm i @xyflow/react@^12
137
- ```
138
-
139
- ```tsx
140
- import "it-data-nexus-ui-library/react-flow.css";
141
- import { NexusFlow, FlowControls } from "it-data-nexus-ui-library";
142
-
143
- <Box sx={{ height: 480 }}>
144
- <NexusFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} fitView>
145
- <FlowControls />
146
- </NexusFlow>
147
- </Box>;
148
- ```
149
-
150
- - `NexusFlow` takes every `ReactFlowProps` prop (`nodes`, `edges`,
151
- `nodeTypes`, `edgeTypes`, handlers…) plus `background`
152
- (`BackgroundVariant` or `false`). It does no auto-layout: pass positioned
153
- nodes (for example, positions computed with dagre in the app).
154
- - `colorMode` follows the MUI theme; edges default to `smoothstep` unless
155
- `defaultEdgeOptions.type` says otherwise.
156
- - `it-data-nexus-ui-library/react-flow.css` is the upstream xyflow stylesheet
157
- plus Nexus font inheritance. The canvas fills its parent, so give the parent
158
- a height.
159
- - Why a peer, not a dependency: xyflow keeps its store in React context, so an
160
- app that also uses `FlowProvider` or the xyflow hooks needs the same single
161
- copy as the library. It is **not** optional, so npm 7+ installs it
162
- automatically and the barrel's import always resolves. (An optional peer
163
- imported from the barrel fails vite 8 / rolldown builds with
164
- `MISSING_EXPORT`.) Declare it explicitly anyway.
165
- - `FlowNodePaletteProvider`, `FlowNodePalette` and `FlowNodePaletteItem` add
166
- a drag-or-keyboard palette whose items drop onto the canvas at the flow
167
- position.
1
+ Small component library for personal use.
2
+
3
+ <!-- test change -->
4
+
5
+ ## Favicon usage
6
+
7
+ This package exports the favicon assets and a small helper to make adding
8
+ favicon links in consuming apps trivial.
9
+
10
+ Files available in package:
11
+
12
+ - `nexus-logo-favicon.svg` — modern SVG favicon
13
+ - `favicon.ico` — multi-size ICO (legacy support)
14
+
15
+ Quick copy approach (recommended):
16
+
17
+ 1. Add and then run these asset copy scripts in the consuming project's package.json:
18
+
19
+ ```json
20
+ "scripts": {
21
+ "copy-sage-assets": "cpx \"node_modules/it-data-nexus-ui-library/dist/assets/images/*\" public/assets/it-data-nexus-ui-library/",
22
+ "postinstall": "npm run copy-sage-assets"
23
+ }
24
+ ```
25
+
26
+ 2. Add links in your HTML head:
27
+
28
+ ```html
29
+ <link
30
+ rel="icon"
31
+ type="image/svg+xml"
32
+ href="/assets/it-data-nexus-ui-library/nexus-logo-favicon.svg"
33
+ />
34
+ <link rel="icon" href="/assets/it-data-nexus-ui-library/favicon.ico" />
35
+ ```
36
+
37
+ Or, use the React helper exported by this package:
38
+
39
+ ```tsx
40
+ import { FaviconLinks } from "it-data-nexus-ui-library";
41
+
42
+ function AppHead() {
43
+ return <FaviconLinks />; // adds versioned SVG and ICO links
44
+ }
45
+ ```
46
+
47
+ ### Next.js example
48
+
49
+ If you use Next.js (Pages or App router), you can copy the built assets into your `public/` folder and render the helper component from the app head so the favicon is present on first render.
50
+
51
+ 1. Copy assets during install/build (example `package.json` scripts in the consuming app):
52
+
53
+ ```json
54
+ "scripts": {
55
+ "copy-sage-assets": "cpx \"node_modules/it-data-nexus-ui-library/dist/assets/images/*\" public/assets/it-data-nexus-ui-library/",
56
+ "postinstall": "npm run copy-sage-assets"
57
+ }
58
+ ```
59
+
60
+ 2. Pages router (`pages/_document.tsx`) example — server-side rendered so the links are available immediately:
61
+
62
+ ```tsx
63
+ // pages/_document.tsx
64
+ import Document, { Html, Head, Main, NextScript } from "next/document";
65
+ import { FaviconLinks } from "it-data-nexus-ui-library";
66
+
67
+ class MyDocument extends Document {
68
+ render() {
69
+ return (
70
+ <Html>
71
+ <Head>
72
+ <FaviconLinks />
73
+ </Head>
74
+ <body>
75
+ <Main />
76
+ <NextScript />
77
+ </body>
78
+ </Html>
79
+ );
80
+ }
81
+ }
82
+
83
+ export default MyDocument;
84
+ ```
85
+
86
+ 3. App router (`app/layout.tsx`) example:
87
+
88
+ ```tsx
89
+ // app/layout.tsx
90
+ import { FaviconLinks } from "it-data-nexus-ui-library";
91
+
92
+ export default function RootLayout({
93
+ children,
94
+ }: {
95
+ children: React.ReactNode;
96
+ }) {
97
+ return (
98
+ <html>
99
+ <head>
100
+ <FaviconLinks />
101
+ </head>
102
+ <body>{children}</body>
103
+ </html>
104
+ );
105
+ }
106
+ ```
107
+
108
+ Notes:
109
+
110
+ - Copying assets into `public/` ensures the files are served as static assets (no runtime JS required) and avoids a flash-of-default-favicon.
111
+ - The `FaviconLinks` helper uses versioned URLs by default to help cache-busting when you publish a new library version.
112
+
113
+ ## SchemaForm (separate entry)
114
+
115
+ `SchemaForm` wraps `@rjsf/mui`, which is heavy, so it is not in the main
116
+ entry. Import it from the subpath and install its optional peers:
117
+
118
+ ```bash
119
+ npm i @rjsf/mui @rjsf/core @rjsf/utils @rjsf/validator-ajv8
120
+ ```
121
+
122
+ ```tsx
123
+ import { SchemaForm } from "it-data-nexus-ui-library/schema-form";
124
+ ```
125
+
126
+ Apps that never import `it-data-nexus-ui-library/schema-form` do not need the
127
+ `@rjsf/*` packages and never load them.
128
+
129
+ ## NexusFlow (node graphs)
130
+
131
+ `NexusFlow` is a themed wrapper over [`@xyflow/react`](https://reactflow.dev)
132
+ 12. `@xyflow/react` is a **required peer dependency**: install it in the app
133
+ alongside the library, and import the stylesheet once in the app entry.
134
+
135
+ ```bash
136
+ npm i @xyflow/react@^12
137
+ ```
138
+
139
+ ```tsx
140
+ import "it-data-nexus-ui-library/react-flow.css";
141
+ import { NexusFlow, FlowControls } from "it-data-nexus-ui-library";
142
+
143
+ <Box sx={{ height: 480 }}>
144
+ <NexusFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} edgeTypes={edgeTypes} fitView>
145
+ <FlowControls />
146
+ </NexusFlow>
147
+ </Box>;
148
+ ```
149
+
150
+ - `NexusFlow` takes every `ReactFlowProps` prop (`nodes`, `edges`,
151
+ `nodeTypes`, `edgeTypes`, handlers…) plus `background`
152
+ (`BackgroundVariant` or `false`). It does no auto-layout: pass positioned
153
+ nodes (for example, positions computed with dagre in the app).
154
+ - `colorMode` follows the MUI theme; edges default to `smoothstep` unless
155
+ `defaultEdgeOptions.type` says otherwise.
156
+ - `it-data-nexus-ui-library/react-flow.css` is the upstream xyflow stylesheet
157
+ plus Nexus font inheritance. The canvas fills its parent, so give the parent
158
+ a height.
159
+ - Why a peer, not a dependency: xyflow keeps its store in React context, so an
160
+ app that also uses `FlowProvider` or the xyflow hooks needs the same single
161
+ copy as the library. It is **not** optional, so npm 7+ installs it
162
+ automatically and the barrel's import always resolves. (An optional peer
163
+ imported from the barrel fails vite 8 / rolldown builds with
164
+ `MISSING_EXPORT`.) Declare it explicitly anyway.
165
+ - `FlowNodePaletteProvider`, `FlowNodePalette` and `FlowNodePaletteItem` add
166
+ a drag-or-keyboard palette whose items drop onto the canvas at the flow
167
+ position.