it-data-nexus-ui-library 1.0.1 → 1.0.2

package/dist/components/NexusBarChart.mjs

@@ -1 +1 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useId as r}from"react";import{useTheme as s,alpha as e}from"@mui/material/styles";import{getChartColours as i}from"../theme/chartColours.mjs";import{BarChart as p}from"../node_modules/@mui/x-charts/BarChart/BarChart.mjs";function l({slotProps:l,slots:a,...m}){const c=s(),d=i(c.palette.mode),f=r().replace(/:/g,""),n="horizontal"===m.layout,h=d.map((o,t)=>({id:`${f}bg${t}`,color:o}));return o(p,{colors:h.map(({id:o})=>`url(#${o})`),...m,grid:{vertical:!0,horizontal:!0},slots:a,slotProps:{...l,tooltip:{popperOptions:{strategy:"fixed"},sx:{zIndex:1300},...l?.tooltip}},children:o("defs",{children:h.map(({id:r,color:s})=>t("linearGradient",n?{id:r,x1:"0",y1:"0",x2:"1",y2:"0",children:[o("stop",{offset:"0%",stopColor:e(s,.15)}),o("stop",{offset:"100%",stopColor:s,stopOpacity:1})]}:{id:r,x1:"0",y1:"0",x2:"0",y2:"1",children:[o("stop",{offset:"0%",stopColor:s,stopOpacity:1}),o("stop",{offset:"100%",stopColor:e(s,.15)})]},r))})})}export{l as NexusBarChart};
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useId as r}from"react";import{useTheme as s,alpha as e}from"@mui/material/styles";import{getChartColours as i}from"../theme/chartColours.mjs";import{BarChart as p}from"../node_modules/@mui/x-charts/BarChart/BarChart.mjs";function l({slotProps:l,slots:a,...m}){const c=s(),d=i(c.palette.mode),n=r().replace(/:/g,""),f="horizontal"===m.layout,h=d.map((o,t)=>({id:`${n}bg${t}`,color:o}));return o(p,{colors:h.map(({id:o})=>`url(#${o})`),...m,grid:{vertical:!0,horizontal:!0},slots:a,slotProps:{...l,tooltip:{popperOptions:{strategy:"fixed"},sx:{zIndex:1300},container:()=>document.body,...l?.tooltip}},children:o("defs",{children:h.map(({id:r,color:s})=>t("linearGradient",f?{id:r,x1:"0",y1:"0",x2:"1",y2:"0",children:[o("stop",{offset:"0%",stopColor:e(s,.15)}),o("stop",{offset:"100%",stopColor:s,stopOpacity:1})]}:{id:r,x1:"0",y1:"0",x2:"0",y2:"1",children:[o("stop",{offset:"0%",stopColor:s,stopOpacity:1}),o("stop",{offset:"100%",stopColor:e(s,.15)})]},r))})})}export{l as NexusBarChart};

package/dist/components/NexusLineChart.mjs

@@ -1 +1 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useId as r,useRef as o,useMemo as s}from"react";import{useTheme as i}from"@mui/material/styles";import{getChartColours as a}from"../theme/chartColours.mjs";import{AnimatedArea as n}from"../node_modules/@mui/x-charts/LineChart/AnimatedArea.mjs";import{LineChart as p}from"../node_modules/@mui/x-charts/LineChart/LineChart.mjs";function m({sx:m,xAxis:l,grid:d,series:c=[],slots:f,slotProps:x,children:h,...u}){const g=i(),y=a(g.palette.mode),C=r().replace(/:/g,""),w=l?.map(t=>({scaleType:"point",...t})),A=c.map((t,e)=>t.area&&!t.id?{...t,id:`${C}s${e}`}:t),j=new Map(A.map((t,e)=>({s:t,i:e})).filter(({s:t})=>t.area).map(({s:t,i:e})=>[t.id,`${C}g${e}`])),S=o(j);S.current=j;const $=s(()=>function(e){const r=e.ownerState?.seriesId,o=r?S.current.get(r):void 0;return t(n,{...e,ownerState:o?{...e.ownerState,gradientId:o}:e.ownerState})},[C]);return e(p,{colors:y,xAxis:w,grid:d??{horizontal:!0,vertical:!0},series:A,slots:{area:$,...f},slotProps:{...x,tooltip:{popperOptions:{strategy:"fixed"},sx:{zIndex:1300},...x?.tooltip}},sx:m,...u,children:[j.size>0&&t("defs",{children:Array.from(j.entries()).map(([,r],o)=>e("linearGradient",{id:r,x1:"0",y1:"0",x2:"0",y2:"1",children:[t("stop",{offset:"0%",stopColor:y[o%y.length],stopOpacity:.4}),t("stop",{offset:"100%",stopColor:y[o%y.length],stopOpacity:0})]},r))}),h]})}export{m as NexusLineChart};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useId as r,useRef as o,useMemo as s}from"react";import{useTheme as i}from"@mui/material/styles";import{getChartColours as a}from"../theme/chartColours.mjs";import{AnimatedArea as n}from"../node_modules/@mui/x-charts/LineChart/AnimatedArea.mjs";import{LineChart as p}from"../node_modules/@mui/x-charts/LineChart/LineChart.mjs";function m({sx:m,xAxis:l,grid:d,series:c=[],slots:f,slotProps:x,children:h,...u}){const g=i(),y=a(g.palette.mode),C=r().replace(/:/g,""),w=l?.map(t=>({scaleType:"point",...t})),A=c.map((t,e)=>t.area&&!t.id?{...t,id:`${C}s${e}`}:t),j=new Map(A.map((t,e)=>({s:t,i:e})).filter(({s:t})=>t.area).map(({s:t,i:e})=>[t.id,`${C}g${e}`])),S=o(j);S.current=j;const $=s(()=>function(e){const r=e.ownerState?.seriesId,o=r?S.current.get(r):void 0;return t(n,{...e,ownerState:o?{...e.ownerState,gradientId:o}:e.ownerState})},[C]);return e(p,{colors:y,xAxis:w,grid:d??{horizontal:!0,vertical:!0},series:A,slots:{area:$,...f},slotProps:{...x,tooltip:{popperOptions:{strategy:"fixed"},sx:{zIndex:1300},container:()=>document.body,...x?.tooltip}},sx:m,...u,children:[j.size>0&&t("defs",{children:Array.from(j.entries()).map(([,r],o)=>e("linearGradient",{id:r,x1:"0",y1:"0",x2:"0",y2:"1",children:[t("stop",{offset:"0%",stopColor:y[o%y.length],stopOpacity:.4}),t("stop",{offset:"100%",stopColor:y[o%y.length],stopOpacity:0})]},r))}),h]})}export{m as NexusLineChart};

package/dist/components/NexusPieChart.mjs

@@ -1 +1 @@
-import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useId as t,useRef as e}from"react";import{useTheme as s,alpha as i}from"@mui/material/styles";import{getChartColours as p}from"../theme/chartColours.mjs";import{PieArc as c}from"../node_modules/@mui/x-charts/PieChart/PieArc.mjs";import{PieChart as l}from"../node_modules/@mui/x-charts/PieChart/PieChart.mjs";function m({slotProps:m,slots:n,...a}){const d=s(),u=p(d.palette.mode),f=t().replace(/:/g,""),h=u.map((o,r)=>({id:`${f}pg${r}`,color:o})),x=new Map(h.map(({id:o,color:r})=>[r,o])),C=e(x);C.current=x;const P=e(function(r){const t=r.color?C.current.get(r.color):void 0;return o(c,{...r,color:t?`url(#${t})`:r.color})}).current;return o(l,{colors:u,...a,slots:{pieArc:P,...n},slotProps:{...m,tooltip:{popperOptions:{strategy:"fixed"},sx:{zIndex:1300},...m?.tooltip}},children:o("defs",{children:h.map(({id:t,color:e})=>r("linearGradient",{id:t,x1:"0",y1:"0",x2:"0",y2:"1",children:[o("stop",{offset:"0%",stopColor:i(e,.15)}),o("stop",{offset:"100%",stopColor:e,stopOpacity:1})]},t))})})}export{m as NexusPieChart};
+import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useId as t,useRef as e}from"react";import{useTheme as i,alpha as s}from"@mui/material/styles";import{getChartColours as c}from"../theme/chartColours.mjs";import{PieArc as p}from"../node_modules/@mui/x-charts/PieChart/PieArc.mjs";import{PieChart as l}from"../node_modules/@mui/x-charts/PieChart/PieChart.mjs";function m({slotProps:m,slots:n,...a}){const d=i(),u=c(d.palette.mode),f=t().replace(/:/g,""),h=u.map((o,r)=>({id:`${f}pg${r}`,color:o})),x=new Map(h.map(({id:o,color:r})=>[r,o])),y=e(x);y.current=x;const C=e(function(r){const t=r.color?y.current.get(r.color):void 0;return o(p,{...r,color:t?`url(#${t})`:r.color})}).current;return o(l,{colors:u,...a,slots:{pieArc:C,...n},slotProps:{...m,tooltip:{popperOptions:{strategy:"fixed"},sx:{zIndex:1300},container:()=>document.body,...m?.tooltip}},children:o("defs",{children:h.map(({id:t,color:e})=>r("linearGradient",{id:t,x1:"0",y1:"0",x2:"0",y2:"1",children:[o("stop",{offset:"0%",stopColor:s(e,.15)}),o("stop",{offset:"100%",stopColor:e,stopOpacity:1})]},t))})})}export{m as NexusPieChart};

package/dist/generated/version.mjs

@@ -1 +1 @@
-const o="1.0.1";export{o as SAGE_NEXUS_UI_VERSION};
+const o="1.0.2";export{o as SAGE_NEXUS_UI_VERSION};

package/package.json

@@ -1,115 +1,115 @@
-{
-  "name": "it-data-nexus-ui-library",
-  "version": "1.0.1",
-  "description": "Nexus core components",
-  "license": "ISC",
-  "author": "emsmart-sage",
-  "type": "module",
-  "main": "dist/index.mjs",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "engines": {
-    "node": ">=18.18.0",
-    "npm": ">=9"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "prebuild": "node scripts/write-version.mjs",
-    "build": "node -e \"require('fs').rmSync('dist', {recursive:true, force:true})\" && rollup -c",
-    "build-storybook": "storybook build",
-    "generate-favicon": "node scripts/generate-favicon.mjs",
-    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
-    "prepublishOnly": "npm run lint && npm run build",
-    "storybook": "storybook dev -p 6006",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "@mui/x-charts": "^9.4.0",
-    "@radix-ui/react-popover": "^1.1.15",
-    "react-day-picker": "^9.13.2",
-    "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1"
-  },
-  "peerDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7 || ^8 || ^9",
-    "@mui/material": "^7 || ^8 || ^9",
-    "@mui/x-data-grid": "^7 || ^8 || ^9",
-    "@mui/x-date-pickers": "^7 || ^8 || ^9",
-    "date-fns": "^3 || ^4",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
-  },
-  "peerDependenciesMeta": {
-    "@radix-ui/react-popover": {
-      "optional": false
-    },
-    "@mui/x-data-grid": {
-      "optional": true
-    },
-    "@mui/x-date-pickers": {
-      "optional": true
-    },
-    "react-day-picker": {
-      "optional": false
-    }
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^5.1.1",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@eslint/js": "9.39.4",
-    "@mui/icons-material": "^9.0.1",
-    "@mui/material": "^9.0.1",
-    "@mui/x-data-grid": "^9.0.0",
-    "@mui/x-date-pickers": "^9.3.0",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@rollup/plugin-alias": "^6.0.0",
-    "@rollup/plugin-commonjs": "^29.0.2",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^1.0.0",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/react-vite": "^10.3.5",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
-    "@types/rollup-plugin-peer-deps-external": "^2.2.6",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser-playwright": "^4.1.4",
-    "@vitest/coverage-v8": "^4.1.4",
-    "date-fns": "^4.1.0",
-    "eslint": "9.39.4",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-react": "^7.37.5",
-    "globals": "^17.5.0",
-    "playwright": "^1.59.1",
-    "png-to-ico": "^2.1.8",
-    "react": "^19.2.5",
-    "react-day-picker": "^9.13.2",
-    "react-dom": "^19.2.5",
-    "rollup": "^4.60.1",
-    "rollup-plugin-dts": "^6.4.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sharp": "^0.34.5",
-    "storybook": "^10.3.5",
-    "tslib": "^2.8.1",
-    "typescript": "^6.0.2",
-    "typescript-eslint": "8.58.2",
-    "vitest": "^4.1.4"
-  }
-}
+{
+  "name": "it-data-nexus-ui-library",
+  "version": "1.0.2",
+  "description": "Nexus core components",
+  "license": "ISC",
+  "author": "emsmart-sage",
+  "type": "module",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "engines": {
+    "node": ">=18.18.0",
+    "npm": ">=9"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "prebuild": "node scripts/write-version.mjs",
+    "build": "node -e \"require('fs').rmSync('dist', {recursive:true, force:true})\" && rollup -c",
+    "build-storybook": "storybook build",
+    "generate-favicon": "node scripts/generate-favicon.mjs",
+    "lint": "eslint \"src/**/*.{ts,tsx,js,jsx}\"",
+    "prepublishOnly": "npm run lint && npm run build",
+    "storybook": "storybook dev -p 6006",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@mui/x-charts": "^9.4.0",
+    "@radix-ui/react-popover": "^1.1.15",
+    "react-day-picker": "^9.13.2",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7 || ^8 || ^9",
+    "@mui/material": "^7 || ^8 || ^9",
+    "@mui/x-data-grid": "^7 || ^8 || ^9",
+    "@mui/x-date-pickers": "^7 || ^8 || ^9",
+    "date-fns": "^3 || ^4",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@radix-ui/react-popover": {
+      "optional": false
+    },
+    "@mui/x-data-grid": {
+      "optional": true
+    },
+    "@mui/x-date-pickers": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@eslint/js": "9.39.4",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/material": "^9.0.1",
+    "@mui/x-data-grid": "^9.0.0",
+    "@mui/x-date-pickers": "^9.3.0",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@rollup/plugin-alias": "^6.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.6",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
+    "date-fns": "^4.1.0",
+    "eslint": "9.39.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^17.5.0",
+    "playwright": "^1.59.1",
+    "png-to-ico": "^2.1.8",
+    "react": "^19.2.5",
+    "react-day-picker": "^9.13.2",
+    "react-dom": "^19.2.5",
+    "rollup": "^4.60.1",
+    "rollup-plugin-dts": "^6.4.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sharp": "^0.34.5",
+    "storybook": "^10.3.5",
+    "tslib": "^2.8.1",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "8.58.2",
+    "vitest": "^4.1.4"
+  }
+}

package/readme.md

@@ -1,109 +1,111 @@
-Small component library for personal use.
-<!-- test change -->
-## Favicon usage
-
-This package exports the favicon assets and a small helper to make adding
-favicon links in consuming apps trivial.
-
-Files available in package:
-
-- `nexus-logo-favicon.svg` — modern SVG favicon
-- `favicon.ico` — multi-size ICO (legacy support)
-
-Quick copy approach (recommended):
-
-1. Add and then run these asset copy scripts in the consuming project's package.json:
-
-```json
-"scripts": {
-	"copy-sage-assets": "cpx \"node_modules/it-data-nexus-ui-library/dist/assets/images/*\" public/assets/it-data-nexus-ui-library/",
-	"postinstall": "npm run copy-sage-assets"
-}
-```
-
-2. Add links in your HTML head:
-
-```html
-<link
-  rel="icon"
-  type="image/svg+xml"
-  href="/assets/it-data-nexus-ui-library/nexus-logo-favicon.svg"
-/>
-<link rel="icon" href="/assets/it-data-nexus-ui-library/favicon.ico" />
-```
-
-Or, use the React helper exported by this package:
-
-```tsx
-import { FaviconLinks } from "it-data-nexus-ui-library";
-
-function AppHead() {
-  return <FaviconLinks />; // adds versioned SVG and ICO links
-}
-```
-
-### Next.js example
-
-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.
-
-1. Copy assets during install/build (example `package.json` scripts in the consuming app):
-
-```json
-"scripts": {
-  "copy-sage-assets": "cpx \"node_modules/it-data-nexus-ui-library/dist/assets/images/*\" public/assets/it-data-nexus-ui-library/",
-  "postinstall": "npm run copy-sage-assets"
-}
-```
-
-2. Pages router (`pages/_document.tsx`) example — server-side rendered so the links are available immediately:
-
-```tsx
-// pages/_document.tsx
-import Document, { Html, Head, Main, NextScript } from "next/document";
-import { FaviconLinks } from "it-data-nexus-ui-library";
-
-class MyDocument extends Document {
-  render() {
-    return (
-      <Html>
-        <Head>
-          <FaviconLinks />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-
-export default MyDocument;
-```
-
-3. App router (`app/layout.tsx`) example:
-
-```tsx
-// app/layout.tsx
-import { FaviconLinks } from "it-data-nexus-ui-library";
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html>
-      <head>
-        <FaviconLinks />
-      </head>
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-
-Notes:
-
-- Copying assets into `public/` ensures the files are served as static assets (no runtime JS required) and avoids a flash-of-default-favicon.
-- The `FaviconLinks` helper uses versioned URLs by default to help cache-busting when you publish a new library version.
+Small component library for personal use.
+
+<!-- test change -->
+
+## Favicon usage
+
+This package exports the favicon assets and a small helper to make adding
+favicon links in consuming apps trivial.
+
+Files available in package:
+
+- `nexus-logo-favicon.svg` — modern SVG favicon
+- `favicon.ico` — multi-size ICO (legacy support)
+
+Quick copy approach (recommended):
+
+1. Add and then run these asset copy scripts in the consuming project's package.json:
+
+```json
+"scripts": {
+	"copy-sage-assets": "cpx \"node_modules/it-data-nexus-ui-library/dist/assets/images/*\" public/assets/it-data-nexus-ui-library/",
+	"postinstall": "npm run copy-sage-assets"
+}
+```
+
+2. Add links in your HTML head:
+
+```html
+<link
+  rel="icon"
+  type="image/svg+xml"
+  href="/assets/it-data-nexus-ui-library/nexus-logo-favicon.svg"
+/>
+<link rel="icon" href="/assets/it-data-nexus-ui-library/favicon.ico" />
+```
+
+Or, use the React helper exported by this package:
+
+```tsx
+import { FaviconLinks } from "it-data-nexus-ui-library";
+
+function AppHead() {
+  return <FaviconLinks />; // adds versioned SVG and ICO links
+}
+```
+
+### Next.js example
+
+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.
+
+1. Copy assets during install/build (example `package.json` scripts in the consuming app):
+
+```json
+"scripts": {
+  "copy-sage-assets": "cpx \"node_modules/it-data-nexus-ui-library/dist/assets/images/*\" public/assets/it-data-nexus-ui-library/",
+  "postinstall": "npm run copy-sage-assets"
+}
+```
+
+2. Pages router (`pages/_document.tsx`) example — server-side rendered so the links are available immediately:
+
+```tsx
+// pages/_document.tsx
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { FaviconLinks } from "it-data-nexus-ui-library";
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <FaviconLinks />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
+```
+
+3. App router (`app/layout.tsx`) example:
+
+```tsx
+// app/layout.tsx
+import { FaviconLinks } from "it-data-nexus-ui-library";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html>
+      <head>
+        <FaviconLinks />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+Notes:
+
+- Copying assets into `public/` ensures the files are served as static assets (no runtime JS required) and avoids a flash-of-default-favicon.
+- The `FaviconLinks` helper uses versioned URLs by default to help cache-busting when you publish a new library version.