{"_id":"@banja-labs/react-jedi","_rev":"5-932721a118cd22ecffb050873bb24724","name":"@banja-labs/react-jedi","dist-tags":{"latest":"1.5.6"},"versions":{"1.5.2":{"name":"@banja-labs/react-jedi","version":"1.5.2","keywords":["react","sdui","server-driven-ui","components","ui-library","json-to-react","dynamic-ui","component-library","tailwind"],"author":"","license":"MIT","_id":"@banja-labs/react-jedi@1.5.2","maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"homepage":"https://github.com/banja-au/jedi#readme","bugs":{"url":"https://github.com/banja-au/jedi/issues"},"dist":{"shasum":"33192bd5306c7f386511753e233ad7393fc1825a","tarball":"https://registry.npmjs.org/@banja-labs/react-jedi/-/react-jedi-1.5.2.tgz","fileCount":447,"integrity":"sha512-z1CLUCS0qkqCKYS+gOZ7DYzvYSHitoJwp7HFomOUe7W4Zzh0qgYDuqKYSzmliSUhZ8uhVR4eWHv53let+6rPPA==","signatures":[{"sig":"MEQCIBFQ2oCImWDjh+VTdxSkNbSm4TwYfLxWfY6s6O/RLPmlAiBQZW2R0Inps3Ij13aIbmw64wp+4dbNLqyeR0m+laMKEg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1603834},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./node":{"types":"./dist/node.d.ts","import":"./dist/node.js","default":"./dist/node.js"},"./validation":{"types":"./dist/validation.d.ts","import":"./dist/validation.js","default":"./dist/validation.js"}},"gitHead":"c0e92a1d4c5b495c3f1f40e073d110b3cb1ecb10","scripts":{"dev":"npm run build:metadata && rollup -c -w","fix":"biome check --write .","lint":"biome lint .","test":"vitest --project=unit --run","build":"rollup -c","check":"biome check .","format":"biome format --write .","release":"npm run check-all && npm publish","test:ui":"vitest --ui","prebuild":"npm run build:metadata","build:all":"npm run build && cd packages/mcp && npm run build","check-all":"npm run check && npm run type-check && npm run validate:components && npm run check:deps && npm test && npm run build","postbuild":"rm -rf dist/types dist/vitest.setup.d.ts dist/vitest.setup.d.ts.map","storybook":"storybook dev -p 6006 --no-open","check:deps":"depcruise --config .dependency-cruiser.js src","test:watch":"vitest --watch","type-check":"tsc --noEmit","format:check":"biome format .","test:coverage":"vitest --coverage","validate:sdui":"npm run build:metadata && tsx scripts/validate-sdui.ts","build:metadata":"tsx scripts/build-metadata.ts && biome check --write src/metadata/index.ts","prepublishOnly":"npm run check && npm run type-check && npm run build","test:storybook":"vitest --project=storybook --run","build-storybook":"storybook build","validate:sdui:help":"tsx scripts/validate-sdui.ts --help","validate:components":"npm run build:metadata && tsx scripts/validate-components.ts","test:storybook:watch":"vitest --project=storybook"},"_npmUser":{"name":"alexberriman","email":"alexb@bezz.com.au"},"repository":{"url":"git+https://github.com/banja-au/jedi.git","type":"git"},"_npmVersion":"11.6.1","description":"A Server-Driven UI (SDUI) component library for React","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","dependencies":{"zod":"^4.1.12","clsx":"^2.1.1","acorn":"^8.15.0","lenis":"^1.3.15","acorn-jsx":"^5.3.2","react-icons":"^5.5.0","framer-motion":"^12.23.24","tailwind-merge":"^3.3.1","tailwindcss-iso":"^1.0.0","react-fast-compare":"^3.2.2","zod-to-json-schema":"^3.25.0","react-just-parallax":"^3.1.16","@monaco-editor/react":"^4.7.0","react-resizable-panels":"^3.0.6"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.20.6","glob":"^13.0.0","chalk":"^5.6.2","jsdom":"^27.0.0","tslib":"^2.8.1","rollup":"^4.52.4","vitest":"^4.0.9","ts-morph":"^27.0.2","storybook":"^10.0.7","@vitest/ui":"^4.0.9","playwright":"^1.56.1","typescript":"^5.9.3","tailwindcss":"^4.1.14","@types/react":"^19.2.2","@biomejs/biome":"^2.2.6","@types/react-dom":"^19.2.2","@tailwindcss/vite":"^4.1.14","rollup-plugin-dts":"^6.2.3","dependency-cruiser":"^17.3.1","@vitest/coverage-v8":"4.0.9","@rollup/plugin-alias":"^6.0.0","@testing-library/dom":"^10.4.1","@storybook/addon-docs":"^10.0.7","@storybook/react-vite":"^10.0.7","rollup-plugin-esbuild":"^6.2.1","@storybook/addon-links":"^10.0.7","@testing-library/react":"^16.3.0","@rollup/plugin-commonjs":"^29.0.0","@storybook/addon-vitest":"^10.0.7","react-syntax-highlighter":"^15.6.6","@rollup/plugin-typescript":"^12.1.4","@testing-library/jest-dom":"^6.9.1","@vitest/browser-playwright":"4.0.9","@rollup/plugin-node-resolve":"^16.0.3","@types/react-syntax-highlighter":"^15.5.13","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-jedi_1.5.2_1765875308306_0.9565961066317943","host":"s3://npm-registry-packages-npm-production"}},"1.5.3":{"name":"@banja-labs/react-jedi","version":"1.5.3","keywords":["react","sdui","server-driven-ui","components","ui-library","json-to-react","dynamic-ui","component-library","tailwind"],"author":"","license":"MIT","_id":"@banja-labs/react-jedi@1.5.3","maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"homepage":"https://github.com/banja-au/jedi#readme","bugs":{"url":"https://github.com/banja-au/jedi/issues"},"dist":{"shasum":"888f76d46362a608f1c8c939701a639dd78e5f50","tarball":"https://registry.npmjs.org/@banja-labs/react-jedi/-/react-jedi-1.5.3.tgz","fileCount":451,"integrity":"sha512-wQWxJBXa1zLdHa2fVvLz7zE5NRtfdbuhH418eG6ANh5aL6iTtM5vo14tSpdAC1+6HacSkylSywv5qdKVJ24crQ==","signatures":[{"sig":"MEYCIQDfRgq9i7DumxeRFhMBXXrspNs6jn+rFcc19ybuGJ1ClQIhAKsj0QgtUeO9lgqcSUSiTmEhFna6UOQE05I6+URW1bJA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1677765},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./node":{"types":"./dist/node.d.ts","import":"./dist/node.js","default":"./dist/node.js"},"./validation":{"types":"./dist/validation.d.ts","import":"./dist/validation.js","default":"./dist/validation.js"}},"gitHead":"c0e92a1d4c5b495c3f1f40e073d110b3cb1ecb10","scripts":{"dev":"npm run build:metadata && rollup -c -w","fix":"biome check --write .","lint":"biome lint .","test":"vitest --project=unit --run","build":"rollup -c","check":"biome check .","format":"biome format --write .","release":"npm run check-all && npm publish","test:ui":"vitest --ui","prebuild":"npm run build:metadata","build:all":"npm run build && cd packages/mcp && npm run build","check-all":"npm run check && npm run type-check && npm run validate:components && npm run check:deps && npm test && npm run build","postbuild":"rm -rf dist/types dist/vitest.setup.d.ts dist/vitest.setup.d.ts.map","storybook":"storybook dev -p 6006 --no-open","check:deps":"depcruise --config .dependency-cruiser.js src","test:watch":"vitest --watch","type-check":"tsc --noEmit","format:check":"biome format .","test:coverage":"vitest --coverage","validate:sdui":"npm run build:metadata && tsx scripts/validate-sdui.ts","build:metadata":"tsx scripts/build-metadata.ts && biome check --write src/metadata/index.ts","prepublishOnly":"npm run check && npm run type-check && npm run build","test:storybook":"vitest --project=storybook --run","build-storybook":"storybook build","validate:sdui:help":"tsx scripts/validate-sdui.ts --help","validate:components":"npm run build:metadata && tsx scripts/validate-components.ts","test:storybook:watch":"vitest --project=storybook"},"_npmUser":{"name":"alexberriman","email":"alexb@bezz.com.au"},"repository":{"url":"git+https://github.com/banja-au/jedi.git","type":"git"},"_npmVersion":"11.6.1","description":"A Server-Driven UI (SDUI) component library for React","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","dependencies":{"zod":"^4.1.12","clsx":"^2.1.1","acorn":"^8.15.0","lenis":"^1.3.15","acorn-jsx":"^5.3.2","react-icons":"^5.5.0","framer-motion":"^12.23.24","tailwind-merge":"^3.3.1","tailwindcss-iso":"^1.0.0","react-fast-compare":"^3.2.2","zod-to-json-schema":"^3.25.0","react-just-parallax":"^3.1.16","@monaco-editor/react":"^4.7.0","react-resizable-panels":"^3.0.6"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.20.6","glob":"^13.0.0","chalk":"^5.6.2","jsdom":"^27.0.0","tslib":"^2.8.1","rollup":"^4.52.4","vitest":"^4.0.9","ts-morph":"^27.0.2","storybook":"^10.0.7","@vitest/ui":"^4.0.9","playwright":"^1.56.1","typescript":"^5.9.3","tailwindcss":"^4.1.14","@types/react":"^19.2.2","@biomejs/biome":"^2.2.6","@types/react-dom":"^19.2.2","@tailwindcss/vite":"^4.1.14","rollup-plugin-dts":"^6.2.3","dependency-cruiser":"^17.3.1","@vitest/coverage-v8":"4.0.9","@rollup/plugin-alias":"^6.0.0","@testing-library/dom":"^10.4.1","@storybook/addon-docs":"^10.0.7","@storybook/react-vite":"^10.0.7","rollup-plugin-esbuild":"^6.2.1","@storybook/addon-links":"^10.0.7","@testing-library/react":"^16.3.0","@rollup/plugin-commonjs":"^29.0.0","@storybook/addon-vitest":"^10.0.7","react-syntax-highlighter":"^15.6.6","@rollup/plugin-typescript":"^12.1.4","@testing-library/jest-dom":"^6.9.1","@vitest/browser-playwright":"4.0.9","@rollup/plugin-node-resolve":"^16.0.3","@types/react-syntax-highlighter":"^15.5.13","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-jedi_1.5.3_1765877826008_0.03650169093129718","host":"s3://npm-registry-packages-npm-production"}},"1.5.4":{"name":"@banja-labs/react-jedi","version":"1.5.4","keywords":["react","sdui","server-driven-ui","components","ui-library","json-to-react","dynamic-ui","component-library","tailwind"],"author":"","license":"MIT","_id":"@banja-labs/react-jedi@1.5.4","maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"homepage":"https://github.com/banja-au/jedi#readme","bugs":{"url":"https://github.com/banja-au/jedi/issues"},"dist":{"shasum":"593b6a6d7a0d263ff6dc67d842c36505a97da696","tarball":"https://registry.npmjs.org/@banja-labs/react-jedi/-/react-jedi-1.5.4.tgz","fileCount":453,"integrity":"sha512-AhE/5G3k3Vf89x/XeVHHnJnI2fxJeXL97qtRPpmOzD4YHVYpWTZIjo1j+/f+DxdTprJFFlHqmk4RXHJRaqz5YA==","signatures":[{"sig":"MEUCIBMZL/QQD5741Gjp+2oPXMwjVjydlhWvsqlWg8Nu0P2vAiEAzNU6s+8wlPXZ/aoL3A8HiKAlVlueHlRKr0VzUpkxCRY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1750638},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./node":{"types":"./dist/node.d.ts","import":"./dist/node.js","default":"./dist/node.js"},"./validation":{"types":"./dist/validation.d.ts","import":"./dist/validation.js","default":"./dist/validation.js"}},"gitHead":"c0e92a1d4c5b495c3f1f40e073d110b3cb1ecb10","scripts":{"dev":"npm run build:metadata && rollup -c -w","fix":"biome check --write .","lint":"biome lint .","test":"vitest --project=unit --run","build":"rollup -c","check":"biome check .","format":"biome format --write .","release":"npm run check-all && npm publish","test:ui":"vitest --ui","prebuild":"npm run build:metadata","build:all":"npm run build && cd packages/mcp && npm run build","check-all":"npm run check && npm run type-check && npm run validate:components && npm run check:deps && npm test && npm run build","postbuild":"rm -rf dist/types dist/vitest.setup.d.ts dist/vitest.setup.d.ts.map","storybook":"storybook dev -p 6006 --no-open","check:deps":"depcruise --config .dependency-cruiser.js src","test:watch":"vitest --watch","type-check":"tsc --noEmit","format:check":"biome format .","test:coverage":"vitest --coverage","validate:sdui":"npm run build:metadata && tsx scripts/validate-sdui.ts","build:metadata":"tsx scripts/build-metadata.ts && biome check --write src/metadata/index.ts","prepublishOnly":"npm run check && npm run type-check && npm run build","test:storybook":"vitest --project=storybook --run","build-storybook":"storybook build","validate:sdui:help":"tsx scripts/validate-sdui.ts --help","validate:components":"npm run build:metadata && tsx scripts/validate-components.ts","test:storybook:watch":"vitest --project=storybook"},"_npmUser":{"name":"alexberriman","email":"alexb@bezz.com.au"},"repository":{"url":"git+https://github.com/banja-au/jedi.git","type":"git"},"_npmVersion":"11.6.1","description":"A Server-Driven UI (SDUI) component library for React","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","dependencies":{"zod":"^4.1.12","clsx":"^2.1.1","acorn":"^8.15.0","lenis":"^1.3.15","acorn-jsx":"^5.3.2","react-icons":"^5.5.0","framer-motion":"^12.23.24","tailwind-merge":"^3.3.1","tailwindcss-iso":"^1.0.0","react-fast-compare":"^3.2.2","zod-to-json-schema":"^3.25.0","react-just-parallax":"^3.1.16","@monaco-editor/react":"^4.7.0","react-resizable-panels":"^3.0.6"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.20.6","glob":"^13.0.0","chalk":"^5.6.2","jsdom":"^27.0.0","tslib":"^2.8.1","rollup":"^4.52.4","vitest":"^4.0.9","ts-morph":"^27.0.2","storybook":"^10.0.7","@vitest/ui":"^4.0.9","playwright":"^1.56.1","typescript":"^5.9.3","tailwindcss":"^4.1.14","@types/react":"^19.2.2","@biomejs/biome":"^2.2.6","@types/react-dom":"^19.2.2","@tailwindcss/vite":"^4.1.14","rollup-plugin-dts":"^6.2.3","dependency-cruiser":"^17.3.1","@vitest/coverage-v8":"4.0.9","@rollup/plugin-alias":"^6.0.0","@testing-library/dom":"^10.4.1","@storybook/addon-docs":"^10.0.7","@storybook/react-vite":"^10.0.7","rollup-plugin-esbuild":"^6.2.1","@storybook/addon-links":"^10.0.7","@testing-library/react":"^16.3.0","@rollup/plugin-commonjs":"^29.0.0","@storybook/addon-vitest":"^10.0.7","react-syntax-highlighter":"^15.6.6","@rollup/plugin-typescript":"^12.1.4","@testing-library/jest-dom":"^6.9.1","@vitest/browser-playwright":"4.0.9","@rollup/plugin-node-resolve":"^16.0.3","@types/react-syntax-highlighter":"^15.5.13","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-jedi_1.5.4_1765878708753_0.01366220890417269","host":"s3://npm-registry-packages-npm-production"}},"1.5.5":{"name":"@banja-labs/react-jedi","version":"1.5.5","keywords":["react","sdui","server-driven-ui","components","ui-library","json-to-react","dynamic-ui","component-library","tailwind"],"author":"","license":"MIT","_id":"@banja-labs/react-jedi@1.5.5","maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"homepage":"https://github.com/banja-au/jedi#readme","bugs":{"url":"https://github.com/banja-au/jedi/issues"},"dist":{"shasum":"6441bb9a9a153a8fec329a2294a418733af6bc96","tarball":"https://registry.npmjs.org/@banja-labs/react-jedi/-/react-jedi-1.5.5.tgz","fileCount":459,"integrity":"sha512-eF8clYd6dCM/pBu187UwoeDX6FcEoKrGFyPaP2XRAwoyyPOhFjW0sJhiIMkQ57fGFIY1qSlgIcUIJ0ixGatl+A==","signatures":[{"sig":"MEYCIQCadTdcrIF0Obkyt7EyBIONadH39b4kpjPD0qG+7MVEawIhANMZ3Flsr/SZuPFTLkuDcLy0xXsz4ofYA2mhx/NDVOTh","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1774864},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./node":{"types":"./dist/node.d.ts","import":"./dist/node.js","default":"./dist/node.js"},"./validation":{"types":"./dist/validation.d.ts","import":"./dist/validation.js","default":"./dist/validation.js"}},"gitHead":"c0e92a1d4c5b495c3f1f40e073d110b3cb1ecb10","scripts":{"dev":"npm run build:metadata && rollup -c -w","fix":"biome check --write .","lint":"biome lint .","test":"vitest --project=unit --run","build":"rollup -c","check":"biome check .","format":"biome format --write .","release":"npm run check-all && npm publish","test:ui":"vitest --ui","prebuild":"npm run build:metadata","build:all":"npm run build && cd packages/mcp && npm run build","check-all":"npm run check && npm run type-check && npm run validate:components && npm run check:deps && npm test && npm run build","postbuild":"rm -rf dist/types dist/vitest.setup.d.ts dist/vitest.setup.d.ts.map","storybook":"storybook dev -p 6006 --no-open","check:deps":"depcruise --config .dependency-cruiser.js src","test:watch":"vitest --watch","type-check":"tsc --noEmit","format:check":"biome format .","test:coverage":"vitest --coverage","validate:sdui":"npm run build:metadata && tsx scripts/validate-sdui.ts","build:metadata":"tsx scripts/build-metadata.ts && biome check --write src/metadata/index.ts","prepublishOnly":"npm run check && npm run type-check && npm run build","test:storybook":"vitest --project=storybook --run","build-storybook":"storybook build","validate:sdui:help":"tsx scripts/validate-sdui.ts --help","validate:components":"npm run build:metadata && tsx scripts/validate-components.ts","test:storybook:watch":"vitest --project=storybook"},"_npmUser":{"name":"alexberriman","email":"alexb@bezz.com.au"},"repository":{"url":"git+https://github.com/banja-au/jedi.git","type":"git"},"_npmVersion":"11.6.1","description":"A Server-Driven UI (SDUI) component library for React","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","dependencies":{"zod":"^4.1.12","clsx":"^2.1.1","acorn":"^8.15.0","lenis":"^1.3.15","acorn-jsx":"^5.3.2","react-icons":"^5.5.0","framer-motion":"^12.23.24","tailwind-merge":"^3.3.1","tailwindcss-iso":"^1.0.0","react-fast-compare":"^3.2.2","zod-to-json-schema":"^3.25.0","react-just-parallax":"^3.1.16","@monaco-editor/react":"^4.7.0","react-resizable-panels":"^3.0.6"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.20.6","glob":"^13.0.0","chalk":"^5.6.2","jsdom":"^27.0.0","tslib":"^2.8.1","rollup":"^4.52.4","vitest":"^4.0.9","ts-morph":"^27.0.2","storybook":"^10.0.7","@vitest/ui":"^4.0.9","playwright":"^1.56.1","typescript":"^5.9.3","tailwindcss":"^4.1.14","@types/react":"^19.2.2","@biomejs/biome":"^2.2.6","@types/react-dom":"^19.2.2","@tailwindcss/vite":"^4.1.14","rollup-plugin-dts":"^6.2.3","dependency-cruiser":"^17.3.1","@vitest/coverage-v8":"4.0.9","@rollup/plugin-alias":"^6.0.0","@testing-library/dom":"^10.4.1","@storybook/addon-docs":"^10.0.7","@storybook/react-vite":"^10.0.7","rollup-plugin-esbuild":"^6.2.1","@storybook/addon-links":"^10.0.7","@testing-library/react":"^16.3.0","@rollup/plugin-commonjs":"^29.0.0","@storybook/addon-vitest":"^10.0.7","react-syntax-highlighter":"^15.6.6","@rollup/plugin-typescript":"^12.1.4","@testing-library/jest-dom":"^6.9.1","@vitest/browser-playwright":"4.0.9","@rollup/plugin-node-resolve":"^16.0.3","@types/react-syntax-highlighter":"^15.5.13","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-jedi_1.5.5_1765881415941_0.25597854055758007","host":"s3://npm-registry-packages-npm-production"}},"1.5.6":{"name":"@banja-labs/react-jedi","version":"1.5.6","description":"A Server-Driven UI (SDUI) component library for React","repository":{"type":"git","url":"git+https://github.com/banja-au/jedi.git"},"type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./node":{"types":"./dist/node.d.ts","import":"./dist/node.js","default":"./dist/node.js"},"./validation":{"types":"./dist/validation.d.ts","import":"./dist/validation.js","default":"./dist/validation.js"}},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"scripts":{"build:metadata":"tsx scripts/build-metadata.ts && biome check --write src/metadata/index.ts","prebuild":"npm run build:metadata","build":"rollup -c","postbuild":"rm -rf dist/types dist/vitest.setup.d.ts dist/vitest.setup.d.ts.map","build-storybook":"storybook build","dev":"npm run build:metadata && rollup -c -w","type-check":"tsc --noEmit","format":"biome format --write .","format:check":"biome format .","lint":"biome lint .","check":"biome check .","check:deps":"depcruise --config .dependency-cruiser.js src","fix":"biome check --write .","storybook":"storybook dev -p 6006 --no-open","test":"vitest --project=unit --run","test:watch":"vitest --watch","test:ui":"vitest --ui","test:coverage":"vitest --coverage","test:storybook":"vitest --project=storybook --run","test:storybook:watch":"vitest --project=storybook","validate:components":"npm run build:metadata && tsx scripts/validate-components.ts","validate:sdui":"npm run build:metadata && tsx scripts/validate-sdui.ts","validate:sdui:help":"tsx scripts/validate-sdui.ts --help","check-all":"npm run check && npm run type-check && npm run validate:components && npm run check:deps && npm test && npm run build","prepublishOnly":"npm run check && npm run type-check && npm run build","build:all":"npm run build && cd packages/mcp && npm run build","release":"npm run check-all && npm publish"},"keywords":["react","sdui","server-driven-ui","components","ui-library","json-to-react","dynamic-ui","component-library","tailwind"],"author":"","license":"MIT","devDependencies":{"@biomejs/biome":"^2.2.6","@rollup/plugin-alias":"^6.0.0","@rollup/plugin-commonjs":"^29.0.0","@rollup/plugin-node-resolve":"^16.0.3","@rollup/plugin-typescript":"^12.1.4","@storybook/addon-docs":"^10.0.7","@storybook/addon-links":"^10.0.7","@storybook/addon-vitest":"^10.0.7","@storybook/react-vite":"^10.0.7","@tailwindcss/vite":"^4.1.14","@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","@types/react-syntax-highlighter":"^15.5.13","@vitest/browser-playwright":"4.0.9","@vitest/coverage-v8":"4.0.9","@vitest/ui":"^4.0.9","chalk":"^5.6.2","dependency-cruiser":"^17.3.1","glob":"^13.0.0","jsdom":"^27.0.0","playwright":"^1.56.1","react-syntax-highlighter":"^15.6.6","rollup":"^4.52.4","rollup-plugin-dts":"^6.2.3","rollup-plugin-esbuild":"^6.2.1","rollup-plugin-peer-deps-external":"^2.2.4","storybook":"^10.0.7","tailwindcss":"^4.1.14","ts-morph":"^27.0.2","tslib":"^2.8.1","tsx":"^4.20.6","typescript":"^5.9.3","vitest":"^4.0.9"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@monaco-editor/react":"^4.7.0","acorn":"^8.15.0","acorn-jsx":"^5.3.2","clsx":"^2.1.1","framer-motion":"^12.23.24","lenis":"^1.3.15","react-fast-compare":"^3.2.2","react-icons":"^5.5.0","react-just-parallax":"^3.1.16","react-resizable-panels":"^3.0.6","tailwind-merge":"^3.3.1","tailwindcss-iso":"^1.0.0","zod":"^4.1.12","zod-to-json-schema":"^3.25.0"},"gitHead":"7932c0f735e2059f1f83dc2fb0bf3b5b19f97594","_id":"@banja-labs/react-jedi@1.5.6","bugs":{"url":"https://github.com/banja-au/jedi/issues"},"homepage":"https://github.com/banja-au/jedi#readme","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-gIAjEhctx6KZOb+s1pWBiOAg+arU8w+8a8Bx7SMSrdDDJtDvIT2x6Y2WLAfIKhSM7heUyqSk7f0wJyrWEaebOA==","shasum":"7ae2cab4165e99565a9cbc721c720919ed01d87b","tarball":"https://registry.npmjs.org/@banja-labs/react-jedi/-/react-jedi-1.5.6.tgz","fileCount":459,"unpackedSize":1782064,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE+UzH88WP/mr3fmJOmtv6sB3Egp4t+oJGON9npcCfkgAiAlozrho/fM+09fBH8th0P3Fn7++xuus5aFBqMwhIEKFA=="}]},"_npmUser":{"name":"alexberriman","email":"alexb@bezz.com.au"},"directories":{},"maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-jedi_1.5.6_1765883781552_0.44302521771238057"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-16T08:55:08.194Z","modified":"2025-12-16T11:16:21.971Z","1.5.2":"2025-12-16T08:55:08.494Z","1.5.3":"2025-12-16T09:37:06.188Z","1.5.4":"2025-12-16T09:51:48.949Z","1.5.5":"2025-12-16T10:36:56.123Z","1.5.6":"2025-12-16T11:16:21.756Z"},"bugs":{"url":"https://github.com/banja-au/jedi/issues"},"license":"MIT","homepage":"https://github.com/banja-au/jedi#readme","keywords":["react","sdui","server-driven-ui","components","ui-library","json-to-react","dynamic-ui","component-library","tailwind"],"repository":{"type":"git","url":"git+https://github.com/banja-au/jedi.git"},"description":"A Server-Driven UI (SDUI) component library for React","maintainers":[{"name":"alexberriman","email":"alexb@bezz.com.au"}],"readme":"
\n \"Jedi\n\n

@banja-au/react-jedi

\n\n

JSON Engine for Dynamic Interfaces // jedi

\n\n

Server-Driven UI (SDUI) component library for React - render dynamic interfaces from JSON configuration.

\n
\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Node.js Usage](#nodejs-usage-mcp-servers-cli-tools-api-routes)\n- [Core Concepts](#core-concepts)\n- [Development](#development)\n - [Project Structure](#project-structure)\n - [Component Validation](#component-validation)\n - [SDUI Configuration Validation](#sdui-configuration-validation)\n - [Running Tests](#running-tests)\n- [Error Handling](#error-handling)\n- [Use Cases](#use-cases)\n- [TypeScript Support](#typescript-support)\n- [Components](#components)\n - [Accordion](#accordion)\n - [AnnouncementBar](#announcementbar)\n - [BackgroundImage](#backgroundimage)\n - [Badge](#badge)\n - [BlogCard](#blogcard)\n - [Button](#button)\n - [Card](#card)\n - [Carousel](#carousel)\n - [Container](#container)\n - [FloatingPanel](#floatingpanel)\n - [Gradient](#gradient)\n - [Icon](#icon)\n - [Image](#image)\n - [Input](#input)\n - [Link](#link)\n - [Resizable](#resizable)\n - [StatBox](#statbox)\n - [Text](#text)\n- [Blocks](#blocks)\n - [BlogGrid](#bloggrid)\n - [CallToAction](#calltoaction)\n - [CaseStudySummaries](#casestudysummaries)\n - [CaseStudySummary](#casestudysummary)\n - [CustomerLogos](#customerlogos)\n - [FeatureGrid](#featuregrid)\n - [FeatureStepGrid](#featurestepgrid)\n - [Footer](#footer)\n - [Header](#header)\n - [Hero](#hero)\n - [MediaContentBox](#mediacontentbox)\n - [PriceCard](#pricecard)\n - [PricingSection](#pricingsection)\n - [Sidebar](#sidebar)\n - [SocialBar](#socialbar)\n - [SocialProof](#socialproof)\n - [Steps](#steps)\n - [TeamCards](#teamcards)\n - [Testimonials](#testimonials)\n - [Form](#form)\n - [FormField](#formfield)\n - [FormButton](#formbutton)\n - [TextField](#textfield)\n - [TextArea](#textarea)\n - [Select](#select)\n - [Checkbox](#checkbox)\n - [RadioGroup](#radiogroup)\n- [Features](#features)\n - [Dynamic Theming](#dynamic-theming)\n - [Google Fonts](#google-fonts)\n - [SEO & Meta Tags](#seo--meta-tags)\n - [Runtime CSS with tailwindcss-iso](#runtime-css-with-tailwindcss-iso)\n - [JediDevTools](#jedidevtools)\n- [JSX-Lite Transpilation](#jsx-lite-transpilation)\n - [What is JSX-Lite?](#what-is-jsx-lite)\n - [Transpiler API](#transpiler-api)\n - [LLM Integration](#llm-integration)\n - [MCP Server](#mcp-server)\n - [Error Handling with Reflexion](#error-handling-with-reflexion)\n- [API Reference](#api-reference)\n- [Examples](#examples)\n- [License](#license)\n\n## Installation\n\n```bash\nnpm install @banja-au/react-jedi\n```\n\n## Quick Start\n\n```tsx\nimport { render, ComponentConfig } from '@banja-au/react-jedi';\nimport { Suspense } from 'react';\n\n// JSON configuration (typically from your API)\nconst config: ComponentConfig = {\n type: \"Button\",\n props: { onClick: () => alert(\"Hello SDUI!\") },\n children: \"Click Me\"\n};\n\n// Render to React elements (async with Suspense)\nfunction App() {\n return (\n Loading...}>\n \n \n );\n}\n\nfunction DynamicContent({ config }: { config: ComponentConfig }) {\n const [element, setElement] = React.useState(null);\n\n React.useEffect(() => {\n render(config).then(setElement);\n }, [config]);\n\n return element;\n}\n```\n\n## Node.js Usage (MCP Servers, CLI Tools, API Routes)\n\nFor Node.js environments (servers, CLI tools, build scripts, MCP servers), use the `/node` export - a complete Node.js API with **zero React dependencies**:\n\n```typescript\n// Safe for any Node.js environment - NO React, NO browser APIs\nimport {\n // Component Registry (27 components)\n COMPONENT_REGISTRY,\n COMPONENT_NAMES,\n hasComponent,\n getComponentMetadata,\n\n // Validation\n validateComponentConfig,\n validateRenderOptions,\n\n // Zod Schemas\n ButtonPropsSchema,\n HeroPropsSchema,\n\n // Logger\n log,\n setLogLevel,\n\n // Types\n type ComponentConfig,\n type ComponentMetadata,\n type ValidationResult,\n} from '@banja-au/react-jedi/node';\n```\n\n### 1. Component Registry\n\nCheck component existence and access metadata without loading React components:\n\n```typescript\nimport { COMPONENT_REGISTRY, COMPONENT_NAMES, hasComponent } from '@banja-au/react-jedi/node';\n\n// Check if component exists\nif (hasComponent('Button')) {\n console.log('Button component is available');\n}\n\n// Get all component names\nconsole.log(COMPONENT_NAMES);\n// ['Accordion', 'Badge', 'Button', 'Card', ... (27 total)]\n\n// Access component metadata\nconst buttonMeta = COMPONENT_REGISTRY['Button'];\nconsole.log(buttonMeta.name); // \"Button\"\nconsole.log(buttonMeta.category); // \"component\"\nconsole.log(buttonMeta.description); // \"A customizable button...\"\nconsole.log(buttonMeta.examples); // Usage examples in ComponentConfig format\n```\n\n### 2. Validation (Next.js API Routes, Servers)\n\nValidate ComponentConfig JSON in server environments:\n\n```typescript\nimport { validateComponentConfig } from '@banja-au/react-jedi/node';\n\n// Next.js API route\nexport async function POST(request: Request) {\n const body = await request.json();\n\n // Validate configuration\n const result = validateComponentConfig(body.config);\n\n if (!result.valid) {\n return Response.json({\n errors: result.errors.map(err => ({\n message: err.message,\n path: err.path,\n suggestion: err.suggestion,\n }))\n }, { status: 400 });\n }\n\n // Process valid config...\n return Response.json({ success: true });\n}\n```\n\n### 3. Zod Schema Validation\n\nRuntime validation with detailed error messages:\n\n```typescript\nimport { ButtonPropsSchema, HeroPropsSchema } from '@banja-au/react-jedi/node';\n\n// Validate button props\nconst result = ButtonPropsSchema.safeParse({\n children: \"Click me\",\n variant: \"primary\",\n size: \"lg\"\n});\n\nif (!result.success) {\n console.error(\"Invalid props:\", result.error.errors);\n // Detailed Zod error messages with paths\n}\n\n// Use validated data\nconst validProps = result.data;\n```\n\n### 4. Pattern Interpreters & MCP Servers\n\nBuild tools that transform patterns into ComponentConfig:\n\n```typescript\nimport {\n COMPONENT_REGISTRY,\n validateComponentConfig,\n hasComponent,\n type ComponentConfig,\n} from '@banja-au/react-jedi/node';\n\nclass PatternInterpreter {\n interpret(pattern: any): ComponentConfig {\n // Check component exists (metadata lookup - no React)\n if (!hasComponent(pattern.type)) {\n throw new Error(`Unknown component: ${pattern.type}`);\n }\n\n // Get metadata for validation\n const metadata = COMPONENT_REGISTRY[pattern.type];\n\n // Transform pattern\n const config = this.transformPattern(pattern);\n\n // Validate result\n const result = validateComponentConfig(config);\n if (!result.valid) {\n throw new Error(`Invalid config: ${result.errors[0].message}`);\n }\n\n return config;\n }\n}\n```\n\n### 5. CLI Tools & Build Scripts\n\n```typescript\nimport {\n COMPONENT_NAMES,\n getComponentsByCategory,\n log,\n setLogLevel,\n} from '@banja-au/react-jedi/node';\n\n// Configure logging\nsetLogLevel('info');\n\n// List all components\nlog.info('system', `Found ${COMPONENT_NAMES.length} components`);\n\n// Filter by category\nconst blocks = getComponentsByCategory('block');\nconst components = getComponentsByCategory('component');\n\nconsole.log('Blocks:', blocks.map(m => m.name).join(', '));\nconsole.log('Components:', components.map(m => m.name).join(', '));\n```\n\n### Available Exports from `/node`\n\n**Component Registry:**\n- `COMPONENT_REGISTRY` - Map of component name → metadata\n- `COMPONENT_NAMES` - Array of all component names (27 total)\n- `hasComponent(name)` - Check if component exists\n- `getComponentMetadata(name)` - Get component metadata\n- `getComponentsByCategory(category)` - Filter by 'component' or 'block'\n\n**Validation:**\n- `validateComponentConfig` - Validate ComponentConfig JSON\n- `validateRenderOptions` - Validate RenderOptions\n- `validateJSON` - Validate JSON syntax\n- `validateSpec` - Validate complete SDUI spec\n\n**Zod Schemas (all 27 components):**\n- Block schemas: `CallToActionPropsSchema`, `HeaderPropsSchema`, `HeroPropsSchema`, etc.\n- Component schemas: `ButtonPropsSchema`, `BadgePropsSchema`, `CardPropsSchema`, etc.\n\n**Logger:**\n- `log` - Structured logger (debug, info, warn, error)\n- `setLogLevel` - Set verbosity level\n- `getLogBuffer` - Get logged entries\n- `clearLogBuffer` - Reset log buffer\n- `LOG_CATEGORIES` - All log categories\n\n**Types:**\n- `ComponentConfig`, `RenderOptions`, `ThemeConfig`\n- `ComponentMetadata`, `ComponentExample`, `PropMetadata`\n- `ValidationResult`, `ValidationError`, `LogLevel`\n\n### Benefits of `/node` Export\n\n- ✅ **Zero React dependencies** - No React, react-icons, or JSX\n- ✅ **Zero browser APIs** - No DOM manipulation, no window/document\n- ✅ **97% smaller bundle** - Only metadata and validators (~5KB vs ~500KB)\n- ✅ **Works everywhere** - MCP servers, CLI tools, Next.js API routes, build scripts\n- ✅ **Complete functionality** - Registry, validation, schemas, logging, types\n- ✅ **TypeScript support** - Full type definitions and auto-completion\n\n### Client-Side Rendering\n\nFor browser environments with React components, use the main import:\n\n```typescript\nimport { render, ComponentMap, cn } from '@banja-au/react-jedi';\nimport { Suspense } from 'react';\n\nfunction App() {\n return (\n Loading...}>\n {render(pageConfig)}\n \n );\n}\n```\n\n## Core Concepts\n\n### ComponentMap\n\nThe `ComponentMap` is the registry that maps string identifiers to React components:\n\n```tsx\nimport { ComponentMap } from '@banja-au/react-jedi';\n\n// Built-in components\nconsole.log(Object.keys(ComponentMap));\n// Output: [\"Accordion\", \"Badge\", \"Button\", \"Card\", \"Carousel\", \"Container\", ...]\n```\n\n### render() Function\n\nThe `render()` function transforms JSON configuration into React elements. **Note: render() is async and returns a Promise.**\n\n
\nView tsx example (18 lines)\n\n```tsx\nimport { render, type ComponentConfig, type RenderOptions } from '@banja-au/react-jedi';\n\n// Single component (async)\nconst element = await render(config);\n\n// Array of components (async)\nconst elements = await render([config1, config2, config3]);\n\n// With custom options (async)\nconst element = await render(config, {\n componentMap: customMap, // Use custom component registry\n maxDepth: 50, // Set recursion depth limit\n theme: { colors: { ... } } // Dynamic theming\n});\n\n// Or use with .then() for Promise handling\nrender(config).then(element => {\n // Use element here\n});\n```\n\n
\n\n### Server-Driven UI Pattern\n\nSDUI enables backend-controlled interfaces:\n\n1. **Server sends JSON** - Backend API returns ComponentConfig objects\n2. **Client renders dynamically** - `render()` transforms JSON to React components\n3. **No frontend deployments** - Update UI by changing server responses\n4. **A/B testing & feature flags** - Serve different UIs to different users\n\n## Development\n\n### Prerequisites\n\n- Node.js 16+ (recommended: 18+)\n- npm or yarn\n- React 18 or 19 (peer dependency)\n\n### Setup\n\n
\nView bash example (32 lines)\n\n```bash\n# Clone the repository\ngit clone https://github.com/yourusername/react-jedi.git\ncd react-jedi\n\n# Install dependencies\nnpm install\n\n# Run tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Type check\nnpm run type-check\n\n# Lint and format (Biome)\nnpm run check # Check for issues\nnpm run fix # Auto-fix issues\nnpm run format # Format code\n\n# Build\nnpm run build\n\n# Development mode (watch + rebuild)\nnpm run dev\n\n# Run all checks (lint + type-check + tests + build)\nnpm run check-all\n```\n\n
\n\n### Project Structure\n\n```\nsrc/\n├── index.ts # Main entry - exports ComponentMap + all components\n├── ComponentMap.ts # Core SDUI mapping (string → React component)\n├── core/\n│ ├── render.tsx # render() function implementation\n│ ├── theme.ts # cn() utility and theme management\n│ ├── types.ts # Core type definitions\n│ └── validation/ # Validation utilities\n├── components/ # SDUI components\n│ ├── index.ts # Barrel export for all components\n│ ├── button/\n│ │ ├── Button.tsx\n│ │ ├── Button.stories.tsx\n│ │ ├── Button.component-config.ts\n│ │ └── index.ts\n│ └── ... # Other components follow same pattern\n├── blocks/ # Page-level SDUI blocks\n│ └── ... # Same pattern as components\n├── transpile/ # JSX-Lite transpiler\n│ ├── transformer.ts # Core JSX → ComponentConfig logic\n│ ├── validator.ts # JSX-Lite syntax validation\n│ ├── stringify.ts # ComponentConfig → JSX converter\n│ └── types.ts # Transpiler type definitions\n└── llm/ # LLM integration utilities\n ├── schema-generator.ts # Compact schema generation\n ├── reference-generator.ts # Markdown documentation\n ├── prompts.ts # Prompt engineering templates\n └── types.ts # LLM utility types\n\npackages/\n└── mcp/ # MCP server package (@banja-labs/react-jedi-mcp)\n ├── src/\n │ ├── server.ts # MCP server implementation\n │ ├── tools.ts # Tool handlers\n │ └── resources.ts # Resource handlers\n └── bin/\n └── react-jedi-mcp.js # CLI entry point\n```\n\n### Adding New Components\n\n1. **Create component directory** (lowercase):\n ```bash\n mkdir src/components/mycomponent\n ```\n\n2. **Create component file** (`MyComponent.tsx`):\n ```tsx\n import React from \"react\";\n import { cn } from \"@/core/theme\";\n\n export interface MyComponentProps {\n title: string;\n className?: string;\n id?: string; // For blocks/containers\n }\n\n export const MyComponent: React.FC = ({\n title,\n className,\n id\n }) => {\n return (\n
\n

{title}

\n
\n );\n };\n\n export default MyComponent;\n ```\n\n3. **Create barrel export** (`index.ts`):\n ```typescript\n export { MyComponent, type MyComponentProps, default } from \"./MyComponent\";\n ```\n\n4. **Add to components index** (`src/components/index.ts`):\n ```typescript\n export * from \"./mycomponent\";\n ```\n\n5. **Register in ComponentMap** (`src/ComponentMap.ts`):\n ```typescript\n import { MyComponent } from \"./components/mycomponent\";\n\n export const ComponentMap = {\n // ... existing components\n MyComponent,\n };\n ```\n\n6. **Validate architecture**:\n ```bash\n npm run validate:components\n ```\n\n7. **Build and verify**:\n ```bash\n npm run build\n npm test\n ```\n\n### Component Validation\n\nThis project enforces SDUI architectural standards through automated validation. Run `npm run validate:components` to check all components against the rules below.\n\n**Validation Rules:**\n\n1. **File Structure** - Required files must exist:\n - `ComponentName.tsx` (implementation)\n - `ComponentName.stories.tsx` (Storybook stories)\n - `ComponentName.component-config.ts` (metadata)\n - `index.ts` (barrel export)\n\n2. **className Prop** - All components must accept `className?: string` for SDUI styling flexibility\n\n3. **cn() Utility** - Components should use `cn()` from `@/core/theme` for className merging\n\n4. **No Hardcoded Backgrounds** - Components must NOT have hardcoded `bg-*` classes (use className prop instead)\n\n5. **ComponentMap Registration** - All components must be registered in `src/ComponentMap.ts`\n\n6. **Metadata Structure** - Config files must use `defineComponentConfig()` helper\n\n7. **render() Import** - Block components should import `render()` from `@/core/render`\n\n8. **Directory Naming** - Component directories must be lowercase only\n\n**Usage:**\n\n```bash\n# Validate all components\nnpm run validate:components\n\n# Stop on first error\nnpm run validate:components -- --fail-fast\n\n# Output JSON format\nnpm run validate:components -- --json\n\n# Run all checks including validation\nnpm run check-all\n```\n\n**Common Fixes:**\n\n
\nMissing className prop\n\n```diff\nexport interface ButtonProps {\n children: React.ReactNode;\n+ className?: string;\n}\n```\n\n
\n\n
\nHardcoded background color\n\n```diff\n- className=\"bg-white rounded-lg\"\n+ className={cn(\"rounded-lg\", className)}\n```\n\n
\n\n
\nNot in ComponentMap\n\n```diff\n// src/ComponentMap.ts\n+import { NewComponent } from \"@/components/newcomponent\";\n\nexport const ComponentMap = {\n Button,\n Link,\n+ NewComponent,\n};\n```\n\n
\n\n### SDUI Configuration Validation\n\nValidate SDUI JSON configurations and render options before runtime to catch errors early. The `validate:sdui` CLI tool provides comprehensive validation with detailed error reporting.\n\n**Features:**\n- ✅ Validates ComponentConfig JSON (single or array)\n- ✅ Validates RenderOptions JSON (theme, pageFeatures, etc.)\n- ✅ File input, stdin input, or both\n- ✅ Colored terminal output with error details\n- ✅ JSON output mode for CI/CD integration\n- ✅ Verbose mode for debugging\n\n**Basic Usage:**\n\n```bash\n# Validate a component configuration file\nnpm run validate:sdui -- --config=page.json\n\n# Validate render options\nnpm run validate:sdui -- --options=theme.json\n\n# Validate both config and options together\nnpm run validate:sdui -- --config=page.json --options=theme.json\n\n# Validate from stdin\necho '{\"type\":\"Button\",\"props\":{\"children\":\"Click me\"}}' | npm run validate:sdui\n\n# Show help\nnpm run validate:sdui:help\n```\n\n**Advanced Usage:**\n\n```bash\n# JSON output for CI/CD pipelines\nnpm run validate:sdui -- --config=page.json --json\n\n# Verbose mode for detailed progress\nnpm run validate:sdui -- --config=page.json --verbose\n\n# Combine flags\nnpm run validate:sdui -- --config=page.json --options=theme.json --verbose\n```\n\n**Exit Codes:**\n- `0` - Validation passed\n- `1` - Validation errors found\n- `2` - Script error (file not found, invalid JSON syntax, etc.)\n\n**Example Output:**\n\n
\nSuccess (exit code 0)\n\n```\n📋 SDUI Configuration Validator\n\n✓ All validations passed!\n```\n\n
\n\n
\nValidation errors (exit code 1)\n\n```\n📋 SDUI Configuration Validator\n\n❌ Validation Errors:\n\n ● :12 at type [UNKNOWN_COMPONENT] Unknown component type: \"Buton\"\n → Did you mean \"Button\"?\n\n ● :25 at props [MISSING_REQUIRED_PROP] Required prop \"children\" is missing\n → Add \"children\" to the props object\n\n━━━ Validation Summary ━━━\nErrors: 2\n\nValidation failed. Fix errors above.\n```\n\n
\n\n
\nJSON output (--json flag)\n\n```json\n{\n \"valid\": false,\n \"summary\": {\n \"errors\": 1\n },\n \"errors\": [\n {\n \"code\": \"UNKNOWN_COMPONENT\",\n \"message\": \"Unknown component type: \\\"Buton\\\"\",\n \"path\": \"type\",\n \"line\": 12,\n \"suggestion\": \"Did you mean \\\"Button\\\"?\",\n \"invalidValue\": \"Buton\",\n \"expectedType\": \"string (valid component name)\"\n }\n ]\n}\n```\n\n
\n\n**Common Validation Errors:**\n\n| Error Code | Description | Fix |\n|------------|-------------|-----|\n| `INVALID_JSON` | JSON syntax error | Check for missing commas, brackets, or quotes |\n| `UNKNOWN_COMPONENT` | Component type not in ComponentMap | Check spelling and capitalization |\n| `MISSING_REQUIRED_PROP` | Required prop missing | Add the required prop to props object |\n| `INVALID_PROP_TYPE` | Prop type mismatch | Check prop value matches expected type |\n| `INVALID_THEME_CONFIG` | Invalid theme structure | Ensure theme.colors is an object |\n\n**Integration with CI/CD:**\n\n```yaml\n# GitHub Actions example\n- name: Validate SDUI Configs\n run: |\n npm run validate:sdui -- --config=config/page.json --json\n```\n\n### Running Tests\n\n
\nView bash example (17 lines)\n\n```bash\n# Run all tests (watch mode)\nnpm test\n\n# Run tests once (CI mode)\nnpm test -- --run\n\n# Run with coverage\nnpm run test:coverage\n\n# Watch mode\nnpm run test:watch\n\n# UI mode\nnpm run test:ui\n\n# Storybook tests\nnpm run test:storybook\n```\n\n
\n\n## Error Handling\n\nThe library provides robust error handling with two modes: **graceful degradation** (enabled by default) and **strict mode** (opt-in for development).\n\n### Graceful Error Handling (Default)\n\n**By default**, error boundaries are enabled to prevent a single invalid component from breaking the entire page:\n\n```tsx\nimport { render } from '@banja-au/react-jedi';\n\n// Default behavior - graceful error handling with silent fallback\nconst element = await render(config);\n// Failed components render as empty space, rest of page works\n\n// Customize fallback mode\nconst element = await render(config, {\n errorHandling: {\n fallback: \"placeholder\", // Show error box for debugging\n logErrors: true // Log errors to console (default: true)\n }\n});\n```\n\n**Fallback Modes:**\n\n```tsx\n// 1. Silent (default) - failed components render nothing\nerrorHandling: { fallback: \"silent\" }\n\n// 2. Placeholder - shows error box for debugging\nerrorHandling: { fallback: \"placeholder\" }\n\n// 3. Dev - detailed error with stack trace\nerrorHandling: { fallback: \"dev\" }\n```\n\n### Custom Error Handling\n\n```tsx\n// Custom error handler callback\nconst element = await render(config, {\n errorHandling: {\n fallback: \"silent\",\n onError: (error, componentType) => {\n // Send to error tracking service\n console.error(`Component ${componentType} failed:`, error);\n trackError({ component: componentType, error: error.message });\n }\n }\n});\n```\n\n### Strict Mode (Opt-In)\n\nTo disable error boundaries and fail fast on invalid components (useful for development):\n\n```tsx\n// Enable strict mode - entire page fails on single invalid component\nconst element = await render(config, {\n errorHandling: {\n mode: \"throw\" // Disable error boundaries\n }\n});\n\n// Examples of errors in strict mode:\nrender({ type: \"NonExistent\", props: {} }, { errorHandling: { mode: \"throw\" } });\n// ❌ Error: Unknown component type: \"NonExistent\". Available types: Button, Link, Card, ...\n\nrender(deeplyNestedConfig, { maxDepth: 5, errorHandling: { mode: \"throw\" } });\n// ❌ Error: Max render depth (5) exceeded\n```\n\n**When to use strict mode:**\n- ✅ Development and testing\n- ✅ When all components are known and validated\n- ✅ When you want to catch errors early\n\n**When to use graceful error handling (default):**\n- ✅ Production environments\n- ✅ Untrusted server JSON\n- ✅ Progressive rendering (partial content better than blank page)\n- ✅ User-facing applications\n\n### Common Issues\n\n- **Component not found**: Ensure component is registered in `ComponentMap`\n- **Recursion limit**: Increase `maxDepth` in `RenderOptions` or simplify nesting\n- **Invalid config**: Validate API responses match `ComponentConfig` interface\n\n## Use Cases\n\nReal-world scenarios where React Jedi excels:\n\n- 🏢 **Multi-tenant SaaS** - Customize UI per tenant/organization from backend configuration\n- 🚩 **Feature Flags** - Gradually roll out features to specific users or segments\n- 🧪 **A/B Testing** - Serve different UI variations for experimentation and optimization\n- 📝 **CMS-driven pages** - Build dynamic pages from headless CMS content\n- 📋 **Dynamic forms** - Generate complex forms from backend schemas and validation rules\n- 🎯 **Promotional banners** - Update marketing content and CTAs instantly without deployments\n- 🚀 **Onboarding flows** - Customize user onboarding experiences per segment or cohort\n- 🎨 **Whitelabel products** - Support multiple brands with different themes and components\n- 📊 **Admin dashboards** - Build configurable dashboards with drag-and-drop layouts\n- 📱 **Mobile app backends** - Drive native mobile UIs from the same backend configs\n\n## TypeScript Support\n\nFull TypeScript support with strict type checking and IntelliSense:\n\n
\nView tsx example (24 lines)\n\n```tsx\nimport type { ComponentConfig, RenderOptions } from '@banja-au/react-jedi';\n\n// Fully typed component config\nconst config: ComponentConfig = {\n type: \"Button\",\n props: {\n variant: \"primary\",\n onClick: () => console.log(\"Clicked\")\n },\n children: \"Click me\"\n};\n\n// Fully typed render options\nconst options: RenderOptions = {\n maxDepth: 100,\n theme: {\n colors: {\n primary: \"#4f46e5\"\n }\n },\n logLevel: \"debug\"\n};\n\nconst element = render(config, options);\n```\n\n
\n\n## Components\n\n
\nAccordion - Interactive accordion with smooth animations\n\n### Props\n\n```typescript\nexport interface AccordionItem {\n id: string;\n title: string;\n content: React.ReactNode;\n icon?: React.ReactNode;\n}\n\nexport interface AccordionProps {\n items: AccordionItem[];\n allowMultiple?: boolean;\n defaultOpenItems?: string[];\n className?: string;\n variant?: \"default\" | \"bordered\" | \"separated\" | \"minimal\";\n id?: string; // Optional ID for anchor linking and scroll targets\n}\n```\n\n### Description\n\nAn interactive accordion component with smooth animations powered by Framer Motion. Perfect for FAQs, collapsible sections, and organizing content into expandable panels.\n\n### Example\n\n```tsx\n{\n type: \"Accordion\",\n props: {\n items: [\n {\n id: \"item-1\",\n title: \"What is Server-Driven UI?\",\n content: \"Server-Driven UI is an architectural pattern...\"\n }\n ],\n variant: \"default\"\n }\n}\n```\n\n
\n\n
\nAnnouncementBar - Prominent announcement banner for the top of pages\n\n### Props\n\n```typescript\nexport interface AnnouncementBarProps {\n /** Main announcement text */\n text: string;\n /** Optional link configuration (using ComponentConfig for SDUI) */\n link?: ComponentConfig;\n /** Optional icon to display before the text (using ComponentConfig for SDUI) */\n icon?: ComponentConfig;\n /** Whether the bar can be dismissed by the user */\n dismissible?: boolean;\n /** Callback when the bar is dismissed */\n onDismiss?: () => void;\n /** Text alignment */\n align?: \"left\" | \"center\" | \"right\";\n /** Whether to use sticky positioning at the top */\n sticky?: boolean;\n /** Additional CSS classes */\n className?: string;\n /** Optional ID for anchor linking and scroll targets */\n id?: string;\n}\n```\n\n### Description\n\nA full-width announcement bar component designed to appear at the top of web pages. Perfect for promoting sales, announcing new features, displaying important notices, or showing maintenance alerts. Supports optional icons, links, dismissibility, and sticky positioning.\n\n### Example\n\n```tsx\n{\n type: \"AnnouncementBar\",\n props: {\n text: \"Plan Smarter. Grow Stronger. Don't miss our latest financial strategies.\",\n link: {\n type: \"Link\",\n props: {\n href: \"/learn-more\",\n className: \"text-current font-semibold no-underline hover:underline inline-flex items-center gap-1\"\n },\n children: [\n \"Learn More\",\n {\n type: \"Icon\",\n props: { name: \"arrow-right\", size: 16 }\n }\n ]\n },\n className: \"bg-amber-400 text-gray-900\"\n }\n}\n```\n\n
\n\n
\nBackgroundImage - Advanced background image layer with parallax and responsive support\n\n### Props\n\n
\nView interface (48 lines)\n\n```typescript\nexport interface EdgeBlurConfig {\n /** Intensity of the edge fade (0-1, default: 0.6) */\n intensity?: number;\n /** Shape of the gradient (default: ellipse) */\n shape?: \"circle\" | \"ellipse\";\n}\n\nexport interface ParallaxConfig {\n /** Strength of parallax effect (default: 0.1). Higher = more movement */\n strength?: number;\n /** Enable parallax on touch devices (default: true) */\n enableOnTouchDevice?: boolean;\n /** Easing for smooth interpolation (default: 0.1). Lower = smoother */\n lerpEase?: number;\n /** Horizontal parallax instead of vertical (default: false) */\n isHorizontal?: boolean;\n}\n\nexport interface ResponsiveBackgroundStyles {\n size?: \"cover\" | \"contain\" | \"auto\";\n position?: string;\n margin?: string;\n transform?: string;\n transformOrigin?: string;\n left?: string;\n opacity?: number;\n}\n\nexport interface BackgroundImageProps {\n url: string;\n alt?: string;\n size?: \"cover\" | \"contain\" | \"auto\";\n position?: string;\n attachment?: \"fixed\" | \"scroll\" | \"local\";\n overlay?: string;\n edgeBlur?: boolean | number | EdgeBlurConfig;\n parallax?: boolean | ParallaxConfig;\n opacity?: number;\n blendMode?: React.CSSProperties[\"mixBlendMode\"];\n zIndex?: number;\n margin?: string;\n transform?: string;\n transformOrigin?: string;\n left?: string;\n mobile?: ResponsiveBackgroundStyles;\n desktop?: ResponsiveBackgroundStyles;\n className?: string;\n id?: string;\n}\n```\n\n
\n\n### Description\n\nA powerful background image component for creating rich visual layers. Supports parallax scrolling, edge blur/vignette effects, responsive breakpoints, and CSS transforms. Perfect for hero backgrounds, decorative elements, and layered compositions.\n\n### Example\n\n```tsx\n{\n type: \"BackgroundImage\",\n props: {\n url: \"/hero-bg.jpg\",\n alt: \"Hero background\",\n parallax: { strength: 0.15 },\n edgeBlur: 0.4,\n overlay: \"rgba(0,0,0,0.3)\",\n mobile: { position: \"center top\" },\n desktop: { position: \"center center\" }\n }\n}\n```\n\n
\n\n
\nBadge - Simple badge component for labels and tags\n\n### Props\n\n```typescript\nexport interface BadgeProps {\n text: string;\n icon?: ComponentConfig;\n className?: string;\n}\n```\n\n### Description\n\nA simple, clean badge component for labels, tags, and status indicators. Features optional icons and customizable styling.\n\n### Example\n\n```tsx\n{\n type: \"Badge\",\n props: {\n text: \"New\",\n className: \"bg-gradient-to-r from-purple-500 to-pink-600\"\n }\n}\n```\n\n
\n\n
\nBlogCard - Versatile blog post card with multiple layout variants\n\n### Props\n\n
\nView interface (44 lines)\n\n```typescript\nexport interface BlogCardAuthor {\n /** Author's name */\n name: string;\n /** Author's avatar image (ComponentConfig for Image component) */\n avatar?: ComponentConfig;\n /** Author's role or title */\n role?: string;\n}\n\nexport interface BlogCardProps {\n /** Optional ID for anchor linking and scroll targets */\n id?: string;\n /** Blog post title */\n title: string;\n /** Brief excerpt or description */\n excerpt?: string;\n /** Publication date (formatted string) */\n date?: string;\n /** Category or tag label */\n category?: string;\n /** Reading time estimate (e.g., \"5 min read\") */\n readTime?: string;\n /** Featured image (ComponentConfig for Image component) */\n image?: ComponentConfig;\n /** Link to the full blog post */\n href?: string;\n /** Author information */\n author?: BlogCardAuthor;\n /** Layout variant */\n variant?: \"default\" | \"horizontal\" | \"minimal\" | \"featured\";\n /** Image aspect ratio */\n imageAspectRatio?: \"auto\" | \"square\" | \"video\" | \"portrait\" | \"wide\";\n /** Show/hide category badge */\n showCategory?: boolean;\n /** Show/hide date */\n showDate?: boolean;\n /** Show/hide read time */\n showReadTime?: boolean;\n /** Show/hide author info */\n showAuthor?: boolean;\n /** Show/hide excerpt */\n showExcerpt?: boolean;\n /** Additional CSS classes */\n className?: string;\n /** Custom className for the image container */\n imageClassName?: string;\n /** Custom className for the content section */\n contentClassName?: string;\n /** Custom className for the title */\n titleClassName?: string;\n /** Custom className for the excerpt */\n excerptClassName?: string;\n /** Custom className for the date */\n dateClassName?: string;\n /** Custom className for the category badge */\n categoryClassName?: string;\n}\n```\n\n
\n\n### Description\n\nA versatile blog post card component with multiple layout variants (default, horizontal, minimal, featured). Displays post title, excerpt, date, category, read time, featured image, and author information. Perfect for blog listings, news feeds, and content showcases.\n\n### Variants\n\n- **default**: Standard vertical card with image on top\n- **horizontal**: Side-by-side image and content layout\n- **minimal**: Clean, text-focused card without prominent image\n- **featured**: Large hero-style card for featured content\n\n### Example\n\n```tsx\n{\n type: \"BlogCard\",\n props: {\n title: \"The Power of Compound Interest Explained\",\n excerpt: \"Discover how compound interest can accelerate your wealth building journey.\",\n date: \"May 21, 2025\",\n category: \"Finance\",\n readTime: \"5 min read\",\n variant: \"default\",\n href: \"/blog/compound-interest\",\n image: {\n type: \"Image\",\n props: {\n src: \"https://example.com/blog-image.jpg\",\n alt: \"Blog post image\",\n className: \"w-full h-full object-cover\"\n }\n },\n author: {\n name: \"Sarah Chen\",\n role: \"Financial Advisor\",\n avatar: {\n type: \"Image\",\n props: {\n src: \"https://example.com/avatar.jpg\",\n alt: \"Sarah Chen\"\n }\n }\n }\n }\n}\n```\n\n
\n\n
\nButton - Standard button component\n\n### Props\n\n```typescript\nexport interface ButtonProps {\n children: React.ReactNode;\n onClick?: () => void;\n href?: string;\n type?: \"button\" | \"submit\" | \"reset\";\n disabled?: boolean;\n variant?: \"primary\" | \"secondary\" | \"ghost\" | \"outline\";\n size?: \"sm\" | \"md\" | \"lg\";\n className?: string;\n}\n```\n\n### Description\n\nA flexible button component with full HTML button support. Supports click handlers, links (href), variants, sizes, and custom styling.\n\n### Example\n\n```tsx\n{\n type: \"Button\",\n props: {\n onClick: () => console.log(\"Clicked!\"),\n variant: \"primary\",\n size: \"lg\"\n },\n children: \"Get Started\"\n}\n```\n\n
\n\n
\nCard - Card container with title and variants\n\n### Props\n\n```typescript\nexport interface CardProps {\n children: ComponentConfig | ComponentConfig[] | React.ReactNode;\n title?: string;\n subtitle?: string;\n className?: string;\n variant?: \"default\" | \"elevated\" | \"outlined\";\n id?: string; // Optional ID for anchor linking and scroll targets\n}\n```\n\n### Description\n\nA versatile card component with optional title/subtitle and multiple style variants (default with border, elevated with shadow, outlined with thicker border).\n\n### Example\n\n```tsx\n{\n type: \"Card\",\n props: {\n title: \"Feature Card\",\n subtitle: \"Supporting text\",\n variant: \"elevated\",\n className: \"p-6\"\n },\n children: \"Card content here\"\n}\n```\n\n
\n\n
\nCarousel - Interactive carousel with multiple animation styles\n\n### Props\n\n```typescript\nexport interface CarouselItem {\n id: string;\n content: ComponentConfig;\n}\n\nexport interface CarouselProps {\n items: CarouselItem[];\n variant?: \"default\" | \"cards\" | \"fade\" | \"scale\" | \"slide-3d\";\n autoPlay?: number;\n showArrows?: boolean;\n showIndicators?: boolean;\n loop?: boolean;\n animationDuration?: number;\n enableSwipe?: boolean;\n pauseOnHover?: boolean;\n itemsPerView?: 1 | 2 | 3;\n gap?: \"none\" | \"sm\" | \"md\" | \"lg\";\n arrowVariant?: \"default\" | \"minimal\" | \"rounded\" | \"pill\";\n className?: string;\n itemClassName?: string;\n id?: string; // Optional ID for anchor linking and scroll targets\n}\n```\n\n### Description\n\nAn interactive carousel component with multiple animation styles (default slide, fade, scale, 3D, multi-item cards), auto-play, and swipe gestures. Perfect for image galleries, testimonials, and product showcases.\n\n### Example\n\n```tsx\n{\n type: \"Carousel\",\n props: {\n items: [\n { id: \"1\", content: { type: \"Image\", props: { src: \"https://placehold.co/800x400\", alt: \"Image 1\" } } }\n ],\n variant: \"fade\",\n autoPlay: 5000,\n showArrows: true\n }\n}\n```\n\n
\n\n
\nContainer - Flexbox layout container\n\n### Props\n\n```typescript\nexport interface ContainerProps {\n children: ComponentConfig | ComponentConfig[] | React.ReactNode;\n direction?: \"row\" | \"column\";\n gap?: number;\n className?: string;\n backgroundImage?: BackgroundImageConfig | BackgroundImageConfig[];\n style?: React.CSSProperties;\n id?: string;\n}\n```\n\n### Description\n\nA flexible container component for organizing layouts with flexbox. Supports row/column direction, customizable gap spacing, and optional background images.\n\n### Example\n\n```tsx\n{\n type: \"Container\",\n props: {\n direction: \"column\",\n gap: 6,\n className: \"p-8\"\n },\n children: [\n { type: \"Text\", props: { variant: \"h2\" }, children: \"Title\" },\n { type: \"Text\", props: { variant: \"p\" }, children: \"Description\" }\n ]\n}\n```\n\n
\n\n
\nFloatingPanel - Floating button with expandable panel overlay\n\n### Props\n\n```typescript\nexport interface FloatingPanelProps {\n isOpen: boolean;\n onToggle: () => void;\n buttonIcon?: React.ReactNode;\n buttonPosition?: \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\";\n panelPosition?: \"bottom-right\" | \"left\" | \"right\" | \"top\";\n panelWidth?: string;\n panelMaxHeight?: string;\n title?: string;\n children: React.ReactNode;\n className?: string;\n buttonClassName?: string;\n zIndex?: number;\n id?: string;\n}\n```\n\n### Description\n\nA floating action button that expands to reveal a panel overlay. Supports multiple positioning options, keyboard navigation (Escape to close), and click-outside-to-close behavior. Perfect for debug tools, settings panels, chat widgets, or contextual controls.\n\n### Example\n\n```tsx\n{\n type: \"FloatingPanel\",\n props: {\n isOpen: true,\n onToggle: () => {},\n title: \"Settings\",\n buttonPosition: \"bottom-right\",\n panelPosition: \"left\",\n panelWidth: \"w-full max-w-md\"\n },\n children: \"Panel content here\"\n}\n```\n\n
\n\n
\nGradient - Gradient overlay component\n\n### Props\n\n```typescript\nexport interface GradientProps {\n color: string;\n direction?: \"vertical\" | \"horizontal\";\n height: string;\n width?: string;\n absolute?: boolean;\n className?: string;\n}\n```\n\n### Description\n\nA gradient overlay component that fades from transparent to a specified color. Perfect for creating visual fade effects over images, backgrounds, or content sections.\n\n### Example\n\n```tsx\n{\n type: \"Gradient\",\n props: {\n color: \"white\",\n direction: \"vertical\",\n height: \"h-24\",\n absolute: true\n }\n}\n```\n\n
\n\n
\nIcon - Flexible icon component supporting multiple libraries\n\n### Props\n\n```typescript\nexport interface IconProps {\n library: \"fa\" | \"fi\" | \"ai\" | \"bs\" | \"md\" | \"io\" | \"hi\" | \"ri\";\n name: string;\n size?: number | string;\n color?: string;\n className?: string;\n}\n```\n\n### Description\n\nFlexible icon component supporting multiple icon libraries from react-icons (Font Awesome, Feather, Ant Design, Bootstrap, Material Design, Ionicons, Hero Icons, Remix Icon).\n\n### Example\n\n```tsx\n{\n type: \"Icon\",\n props: {\n library: \"hi\",\n name: \"HiRocketLaunch\",\n size: 32,\n color: \"#8b5cf6\"\n }\n}\n```\n\n
\n\n
\nImage - Image component with lazy loading\n\n### Props\n\n```typescript\nexport interface ImageProps {\n src: string;\n alt: string;\n width?: number | string;\n height?: number | string;\n loading?: \"lazy\" | \"eager\";\n className?: string;\n}\n```\n\n### Description\n\nAn image component with built-in lazy loading support and responsive sizing. Automatically applies object-cover and rounded corners.\n\n**Note:** For placeholder images, use `https://placehold.co/{width}x{height}` (e.g., `https://placehold.co/800x600`).\n\n### Example\n\n```tsx\n{\n type: \"Image\",\n props: {\n src: \"https://placehold.co/800x600\",\n alt: \"Example image\",\n width: 800,\n height: 600,\n loading: \"lazy\"\n }\n}\n```\n\n
\n\n
\nInput - Form input component\n\n### Props\n\n```typescript\nexport interface InputProps {\n type?: \"text\" | \"email\" | \"password\" | \"number\" | \"tel\" | \"url\";\n placeholder?: string;\n value?: string;\n onChange?: (e: React.ChangeEvent) => void;\n disabled?: boolean;\n required?: boolean;\n className?: string;\n id?: string; // Optional ID for anchor linking and scroll targets\n}\n```\n\n### Description\n\nA standard form input component with support for various input types (text, email, password, etc.), validation states, and custom styling.\n\n### Example\n\n```tsx\n{\n type: \"Input\",\n props: {\n type: \"email\",\n placeholder: \"Enter your email\",\n required: true\n }\n}\n```\n\n
\n\n
\nLink - Anchor component for navigation\n\n### Props\n\n```typescript\nexport interface LinkProps {\n children: React.ReactNode;\n href: string;\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n rel?: string;\n className?: string;\n}\n```\n\n### Description\n\nAn anchor component for navigation with support for external links (target=\"_blank\"), custom rel attributes, and styling.\n\n### Example\n\n```tsx\n{\n type: \"Link\",\n props: {\n href: \"/about\",\n target: \"_self\"\n },\n children: \"Learn More\"\n}\n```\n\n
\n\n
\nResizable - Resizable panel container with draggable handles\n\n### Props\n\n```typescript\nexport interface ResizableProps {\n children: React.ReactNode;\n className?: string;\n id?: string;\n direction?: \"horizontal\" | \"vertical\";\n}\n\nexport interface ResizableHandleProps {\n withHandle?: boolean;\n className?: string;\n}\n```\n\n### Description\n\nA resizable panel container built on react-resizable-panels. Create split-pane layouts with draggable resize handles. Supports horizontal and vertical directions. Use with ResizablePanel and ResizableHandle sub-components.\n\n### Example\n\n```tsx\n{\n type: \"Resizable\",\n props: {\n direction: \"horizontal\",\n className: \"min-h-[200px]\"\n },\n children: [\n { type: \"ResizablePanel\", props: { defaultSize: 50 }, children: \"Left panel\" },\n { type: \"ResizableHandle\", props: { withHandle: true } },\n { type: \"ResizablePanel\", props: { defaultSize: 50 }, children: \"Right panel\" }\n ]\n}\n```\n\n
\n\n
\nStatBox - Statistic display component with animated counting\n\n### Props\n\n
\nView interface (28 lines)\n\n```typescript\nexport interface StatBoxProps {\n /** The numeric value to display (e.g., 150, 99.9, 1000000) */\n value: number;\n /** Optional prefix before the value (e.g., \"$\", \"€\") */\n prefix?: string;\n /** Optional suffix after the value (e.g., \"+\", \"%\", \"K\", \"M\") */\n suffix?: string;\n /** Label text describing the stat (e.g., \"Projects Completed\") */\n label: string;\n /** Optional description or subtitle text */\n description?: string;\n /** Optional icon to display */\n icon?: ComponentConfig;\n /** Layout variant */\n layout?: \"vertical\" | \"horizontal\" | \"centered\";\n /** Size variant affecting typography scale */\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** Whether to animate the number counting up */\n animate?: boolean;\n /** Animation duration in milliseconds */\n animationDuration?: number;\n /** Animation easing function */\n animationEasing?: \"linear\" | \"easeOut\" | \"easeInOut\" | \"spring\" | \"bounce\";\n /** Start animation when element enters viewport (requires animate=true) */\n animateOnScroll?: boolean;\n /** Decimal places to show (auto-detected from value if not specified) */\n decimals?: number;\n /** Format large numbers with separators (e.g., 1,000,000) */\n formatNumber?: boolean;\n /** Locale for number formatting (e.g., \"en-US\", \"de-DE\") */\n locale?: string;\n /** Additional CSS classes */\n className?: string;\n /** CSS classes for the value text */\n valueClassName?: string;\n /** CSS classes for the label text */\n labelClassName?: string;\n /** CSS classes for the description text */\n descriptionClassName?: string;\n /** CSS classes for the icon container */\n iconClassName?: string;\n /** Optional ID for anchor linking and scroll targets */\n id?: string;\n}\n```\n\n
\n\n### Description\n\nA stat box component for displaying numeric statistics with optional counting animation, icons, and multiple layout options. Features smooth easing animations (linear, easeOut, easeInOut, spring, bounce) that can trigger on scroll. Perfect for dashboards, landing pages, and data visualizations.\n\n### Example\n\n```tsx\n{\n type: \"StatBox\",\n props: {\n value: 150,\n suffix: \"+\",\n label: \"Projects Completed\",\n animate: true,\n animationDuration: 2000,\n animationEasing: \"easeOut\",\n layout: \"centered\",\n className: \"text-gray-900\"\n }\n}\n```\n\n
\n\n
\nText - Typography component\n\n### Props\n\n```typescript\nexport interface TextProps {\n variant?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"label\";\n children: React.ReactNode;\n className?: string;\n}\n```\n\n### Description\n\nA flexible typography component that renders semantic HTML elements (h1-h6, p, span, label) with consistent styling based on variant.\n\n### Example\n\n```tsx\n{\n type: \"Text\",\n props: {\n variant: \"h2\",\n className: \"text-gray-900\"\n },\n children: \"Welcome to our site\"\n}\n```\n\n
\n\n## Blocks\n\n
\nBlogGrid - Flexible blog grid section with multiple layout options\n\n### Props\n\n
\nView interface (55 lines)\n\n```typescript\nexport interface BlogPost {\n /** Unique key for the post */\n key?: string;\n /** Blog post title */\n title: string;\n /** Brief excerpt or description */\n excerpt?: string;\n /** Publication date (formatted string) */\n date?: string;\n /** Category or tag label */\n category?: string;\n /** Reading time estimate */\n readTime?: string;\n /** Featured image (ComponentConfig for Image component) */\n image?: ComponentConfig;\n /** Link to the full blog post */\n href?: string;\n /** Author information */\n author?: BlogCardAuthor;\n}\n\nexport interface BlogGridProps {\n /** Optional ID for anchor linking and scroll targets */\n id?: string;\n /** Section heading */\n heading?: string;\n /** Section subheading or description */\n subheading?: string;\n /** Array of blog posts to display */\n posts: BlogPost[];\n /** Grid layout style */\n layout?: \"grid\" | \"list\" | \"masonry\" | \"featured\" | \"magazine\" | \"cards\" | \"minimal\" | \"hero-grid\";\n /** Number of columns (for grid layout) */\n columns?: 1 | 2 | 3 | 4;\n /** Gap size between items */\n gap?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n /** BlogCard variant to use */\n cardVariant?: \"default\" | \"horizontal\" | \"minimal\" | \"featured\";\n /** Image aspect ratio for cards */\n imageAspectRatio?: \"auto\" | \"square\" | \"video\" | \"portrait\" | \"wide\";\n /** Show category on cards */\n showCategory?: boolean;\n /** Show date on cards */\n showDate?: boolean;\n /** Show read time on cards */\n showReadTime?: boolean;\n /** Show author on cards */\n showAuthor?: boolean;\n /** Show excerpt on cards */\n showExcerpt?: boolean;\n /** Heading alignment */\n align?: \"left\" | \"center\" | \"right\";\n /** CTA button/link (ComponentConfig) */\n cta?: ComponentConfig;\n /** Additional CSS classes */\n className?: string;\n /** Custom className for the heading section */\n headingClassName?: string;\n /** Custom className for the grid container */\n gridClassName?: string;\n /** Custom className for individual cards */\n cardClassName?: string;\n}\n```\n\n
\n\n### Description\n\nA flexible blog grid section that displays multiple blog posts in various layouts. Supports grid, list, featured, magazine, masonry, cards, minimal, and hero-grid layouts. Perfect for blog listing pages, news sections, and content hubs.\n\n### Layouts\n\n- **grid**: Standard responsive grid (default)\n- **list**: Vertical list with horizontal cards\n- **featured**: One large featured post with smaller posts alongside\n- **magazine**: Hero article with grid below\n- **masonry**: Pinterest-style masonry layout\n- **cards**: Elevated card style with shadows\n- **minimal**: Text-focused minimal design\n- **hero-grid**: Large hero post + grid below\n\n### Example\n\n```tsx\n{\n type: \"BlogGrid\",\n props: {\n heading: \"Latest Articles\",\n subheading: \"Stay informed with our latest insights and updates\",\n layout: \"grid\",\n columns: 3,\n posts: [\n {\n title: \"The Power of Compound Interest\",\n excerpt: \"Discover how compound interest can accelerate wealth building.\",\n date: \"May 21, 2025\",\n category: \"Finance\",\n readTime: \"5 min read\",\n href: \"/blog/compound-interest\",\n image: {\n type: \"Image\",\n props: {\n src: \"https://example.com/image.jpg\",\n alt: \"Blog image\",\n className: \"w-full h-full object-cover\"\n }\n }\n },\n {\n title: \"5 Smart Ways to Save More\",\n excerpt: \"Learn practical strategies to increase your savings.\",\n date: \"May 20, 2025\",\n category: \"Savings\",\n readTime: \"4 min read\",\n href: \"/blog/save-more\"\n }\n ],\n cta: {\n type: \"Button\",\n props: { variant: \"secondary\", href: \"/blog\" },\n children: \"View All Articles\"\n }\n }\n}\n```\n\n
\n\n
\nCallToAction - Full-width CTA section with grid background\n\n### Props\n\n```typescript\nexport interface CallToActionProps {\n icon?: ComponentConfig;\n title: string;\n description?: string;\n button?: ComponentConfig;\n className?: string;\n titleClassName?: string;\n descriptionClassName?: string;\n id?: string;\n}\n```\n\n### Description\n\nA full-width call-to-action section with decorative grid background and glowing dots. Perfect for conversion sections, newsletter signups, and promotional content.\n\n### Example\n\n```tsx\n{\n type: \"CallToAction\",\n props: {\n title: \"Ready to get started?\",\n description: \"Join thousands of users who have already transformed their workflow\",\n button: {\n type: \"Button\",\n props: { variant: \"primary\", size: \"lg\" },\n children: \"Get Started Free\"\n }\n }\n}\n```\n\n
\n\n
\nCaseStudySummaries - Container for multiple case study summaries with layout options\n\n### Props\n\n
\nView interface (55 lines)\n\n```typescript\nexport interface CaseStudyItem {\n key?: string;\n media: ComponentConfig;\n logo?: ComponentConfig;\n logoPosition?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n headline: string;\n headlineTag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n headlineClassName?: string;\n description?: string;\n descriptionClassName?: string;\n badge?: ComponentConfig;\n companyName?: string;\n companyNameClassName?: string;\n metrics?: Array<{ value: string; label: string }>;\n metricsClassName?: string;\n cta?: ComponentConfig;\n mediaPosition?: \"left\" | \"right\";\n contentClassName?: string;\n mediaClassName?: string;\n logoClassName?: string;\n mediaAspectRatio?: \"auto\" | \"square\" | \"video\" | \"portrait\";\n className?: string;\n}\n\nexport interface CaseStudySummariesProps {\n id?: string;\n heading?: string;\n headingClassName?: string;\n subheading?: string;\n subheadingClassName?: string;\n items: CaseStudyItem[];\n layout?: \"stacked\" | \"alternating\";\n gap?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\";\n align?: \"left\" | \"center\" | \"right\";\n showDividers?: boolean;\n dividerClassName?: string;\n cta?: ComponentConfig;\n className?: string;\n headerClassName?: string;\n itemsClassName?: string;\n}\n```\n\n
\n\n### Description\n\nA container block for displaying multiple case study summaries in a consistent layout. Supports stacked and alternating layouts, configurable spacing, optional dividers, and section-level heading/CTA. Each item renders as a CaseStudySummary component.\n\n### Example\n\n```tsx\n{\n type: \"CaseStudySummaries\",\n props: {\n heading: \"Customer Success Stories\",\n subheading: \"See how our clients achieved remarkable results\",\n layout: \"alternating\",\n gap: \"lg\",\n items: [\n {\n media: { type: \"Image\", props: { src: \"/case1.jpg\", alt: \"Case study 1\" } },\n headline: \"40% Increase in Revenue\",\n description: \"How Company X transformed their business\",\n companyName: \"Company X\",\n cta: { type: \"Link\", props: { href: \"/case-studies/company-x\" }, children: \"Read more\" }\n }\n ]\n }\n}\n```\n\n
\n\n
\nCaseStudySummary - Flexible case study/testimonial block with media and metrics\n\n### Props\n\n```typescript\nexport interface CaseStudyMetric {\n /** Metric value (e.g., \"40%\", \"3x\", \"$2M\") */\n value: string;\n /** Metric label (e.g., \"Growth\", \"ROI\", \"Savings\") */\n label: string;\n}\n\nexport interface CaseStudySummaryProps {\n /** Optional ID for anchor linking and scroll targets */\n id?: string;\n /** Media content (typically Image with logo overlay) */\n media: ComponentConfig;\n /** Logo overlay on the media (positioned bottom-left by default) */\n logo?: ComponentConfig;\n /** Position of logo overlay on media */\n logoPosition?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n /** Main headline/result statement */\n headline: string;\n /** HTML tag for headline (default: h3) */\n headlineTag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n /** Custom className for headline */\n headlineClassName?: string;\n /** Optional description/subtext */\n description?: string;\n /** Custom className for description */\n descriptionClassName?: string;\n /** Optional badge above headline (e.g., \"Case Study\", \"Success Story\") */\n badge?: ComponentConfig;\n /** Optional company name text */\n companyName?: string;\n /** Custom className for company name */\n companyNameClassName?: string;\n /** Optional key metrics to highlight */\n metrics?: CaseStudyMetric[];\n /** Custom className for metrics container */\n metricsClassName?: string;\n /** CTA link configuration */\n cta?: ComponentConfig;\n /** Position of media content (default: left) */\n mediaPosition?: \"left\" | \"right\";\n /** Custom className for content section */\n contentClassName?: string;\n /** Custom className for media section */\n mediaClassName?: string;\n /** Custom className for logo container */\n logoClassName?: string;\n /** Aspect ratio for media container (default: auto) */\n mediaAspectRatio?: \"auto\" | \"square\" | \"video\" | \"portrait\";\n /** Additional CSS classes for the block */\n className?: string;\n}\n```\n\n### Description\n\nA versatile case study/testimonial block that displays customer success stories with media, logo overlay, headline, optional metrics, and CTA. Supports multiple layouts (image left/right), logo positioning, and aspect ratio control. Perfect for showcasing customer results, testimonials, and success stories.\n\n### Example\n\n```tsx\n{\n type: \"CaseStudySummary\",\n props: {\n media: {\n type: \"Image\",\n props: {\n src: \"https://images.unsplash.com/photo-1600880292203-757bb62b4baf\",\n alt: \"Team collaboration\",\n className: \"w-full h-auto rounded-lg\"\n }\n },\n logo: {\n type: \"Container\",\n props: {\n className: \"bg-black/70 backdrop-blur-sm px-4 py-2 rounded-md flex items-center gap-2\"\n },\n children: [\n { type: \"Icon\", props: { name: \"Zap\", size: 20, className: \"text-white\" } },\n { type: \"Text\", props: { className: \"text-white font-semibold\" }, children: \"ZenZap\" }\n ]\n },\n headline: \"Achieved 40% net portfolio growth in 3 years through disciplined wealth management.\",\n metrics: [\n { value: \"40%\", label: \"Growth\" },\n { value: \"3 years\", label: \"Timeline\" }\n ],\n cta: {\n type: \"Link\",\n props: {\n href: \"/case-studies/zenzap\",\n className: \"text-blue-600 hover:text-blue-700 font-medium inline-flex items-center\"\n },\n children: [\n { type: \"Text\", children: \"Read Case Study\" },\n { type: \"Icon\", props: { name: \"ArrowRight\", size: 16, className: \"ml-2\" } }\n ]\n }\n }\n}\n```\n\n
\n\n
\nCustomerLogos - Logo showcase with optional scrolling animation\n\n### Props\n\n```typescript\nexport interface CustomerLogo {\n name: string;\n image: string;\n alt?: string;\n href?: string;\n}\n\nexport interface CustomerLogosProps {\n logos: CustomerLogo[];\n title?: string;\n className?: string;\n variant?: \"default\" | \"compact\" | \"large\";\n scrolling?: boolean;\n scrollSpeed?: number;\n mobileScrollSpeedMultiplier?: number;\n fade?: boolean;\n fadeColor?: string;\n pauseOnHover?: boolean;\n id?: string;\n}\n```\n\n### Description\n\nA customer/partner logo showcase with optional infinite scrolling animation. Perfect for social proof sections and partner displays.\n\n### Example\n\n```tsx\n{\n type: \"CustomerLogos\",\n props: {\n title: \"Trusted by leading companies\",\n logos: [\n { name: \"Company 1\", image: \"/logos/company1.png\" },\n { name: \"Company 2\", image: \"/logos/company2.png\" }\n ],\n scrolling: true,\n fade: true,\n variant: \"default\"\n }\n}\n```\n\n
\n\n
\nFeatureGrid - Grid layout for feature showcases\n\n### Props\n\n```typescript\nexport interface Feature {\n id?: string;\n title: string;\n description: string;\n icon?: React.ReactNode;\n iconColor?: string;\n iconTextColor?: string;\n onClick?: () => void;\n href?: string;\n}\n\nexport interface FeatureGridProps {\n heading?: React.ReactNode;\n subheading?: React.ReactNode;\n features: Feature[];\n columns?: 1 | 2 | 3 | 4 | 5 | 6;\n gap?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n variant?: \"default\" | \"bordered\" | \"elevated\" | \"minimal\";\n className?: string;\n headingClassName?: string;\n gridClassName?: string;\n align?: \"left\" | \"center\" | \"right\";\n id?: string;\n}\n```\n\n### Description\n\nA flexible grid layout for showcasing features with optional icons, multiple column configurations, and style variants.\n\n### Example\n\n```tsx\n{\n type: \"FeatureGrid\",\n props: {\n heading: \"Powerful Features\",\n subheading: \"Everything you need to build amazing products\",\n features: [\n {\n title: \"Fast Performance\",\n description: \"Lightning-fast load times\",\n icon: { type: \"Icon\", props: { library: \"hi\", name: \"HiBolt\", size: 24 } }\n }\n ],\n columns: 3,\n variant: \"elevated\"\n }\n}\n```\n\n
\n\n
\nFeatureStepGrid - Step-by-step feature showcase with images\n\n### Props\n\n```typescript\nexport interface FeatureStepItem {\n id: string;\n image: ComponentConfig;\n badge: ComponentConfig;\n title: string;\n description: string;\n cardClassName?: string;\n imageClassName?: string;\n contentClassName?: string;\n badgeClassName?: string;\n titleClassName?: string;\n descriptionClassName?: string;\n imageBlur?: number | string;\n imageBlurColor?: string;\n}\n\nexport interface FeatureStepGridProps {\n id?: string;\n items: FeatureStepItem[];\n className?: string;\n gridClassName?: string;\n columns?: 1 | 2 | 3 | 4;\n}\n```\n\n### Description\n\nA grid layout for step-by-step features with images, badges, and blur effects. Perfect for onboarding flows and product tours.\n\n### Example\n\n```tsx\n{\n type: \"FeatureStepGrid\",\n props: {\n items: [\n {\n id: \"step-1\",\n badge: { type: \"Badge\", props: { text: \"STEP 1\" } },\n image: { type: \"Image\", props: { src: \"https://placehold.co/400x300\", alt: \"Step 1\" } },\n title: \"Create Account\",\n description: \"Sign up in seconds\",\n imageBlur: 80\n }\n ],\n columns: 3\n }\n}\n```\n\n
\n\n
\nFooter - Website footer with columns and branding\n\n### Props\n\n```typescript\nexport interface FooterColumn {\n header: string;\n links: Array<{ text: string; href: string }>;\n}\n\nexport interface FooterProps {\n logo?: ComponentConfig;\n brandText?: string;\n brandClassName?: string;\n columns?: FooterColumn[];\n columnHeaderClassName?: string;\n columnClassName?: string;\n copyright: string;\n bottomBadge?: ComponentConfig;\n bottomClassName?: string;\n links?: Array<{ text: string; href: string }>;\n className?: string;\n innerClassName?: string;\n id?: string;\n}\n```\n\n### Description\n\nA comprehensive footer component with logo, brand description, link columns, and copyright section. Supports both enhanced layout and simple centered layout.\n\n### Example\n\n```tsx\n{\n type: \"Footer\",\n props: {\n logo: { type: \"Image\", props: { src: \"https://placehold.co/120x40\", alt: \"Logo\", width: 120 } },\n brandText: \"Building the future of web development\",\n columns: [\n {\n header: \"Product\",\n links: [\n { text: \"Features\", href: \"/features\" },\n { text: \"Pricing\", href: \"/pricing\" }\n ]\n }\n ],\n copyright: \"© 2025 YourCompany. All rights reserved.\"\n }\n}\n```\n\n
\n\n
\nHeader - Navigation header with mobile menu\n\n### Props\n\n```typescript\nexport interface HeaderProps {\n layout?: \"default\" | \"logo-nav-cta\" | \"centered\" | \"minimal\";\n logo?: {\n src: string;\n alt: string;\n href?: string;\n width?: number;\n height?: number;\n className?: string;\n };\n links?: Array<{\n text: string;\n href: string;\n active?: boolean;\n children?: Array<{\n text: string;\n href: string;\n active?: boolean;\n }>;\n }>;\n ctas?: Array<{\n text: string;\n href?: string;\n onClick?: () => void;\n variant?: \"primary\" | \"secondary\" | \"ghost\" | \"outline\";\n size?: \"sm\" | \"md\" | \"lg\";\n }>;\n title?: string;\n maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n sticky?: boolean;\n className?: string;\n containerClassName?: string;\n linkClassName?: string;\n activeLinkClassName?: string;\n navClassName?: string;\n mobileMenuIconClassName?: string;\n mobileMenuClassName?: string;\n id?: string;\n}\n```\n\n### Description\n\nA flexible navigation header with multiple layouts, dropdown support, mobile menu, and sticky positioning. Includes accessibility features and smooth animations.\n\n### Example\n\n```tsx\n{\n type: \"Header\",\n props: {\n layout: \"logo-nav-cta\",\n logo: { src: \"/logo.png\", alt: \"Logo\", href: \"/\" },\n links: [\n { text: \"Features\", href: \"/features\" },\n { text: \"Pricing\", href: \"/pricing\" }\n ],\n ctas: [\n { text: \"Sign In\", variant: \"ghost\" },\n { text: \"Get Started\", variant: \"primary\" }\n ],\n sticky: true\n }\n}\n```\n\n
\n\n
\nHero - Hero section with multiple layouts\n\n### Props\n\n```typescript\nexport interface HeroProps {\n title: string | ComponentConfig[];\n subtitle?: React.ReactNode;\n ctaText?: string;\n ctaOnClick?: () => void;\n ctaHref?: string;\n align?: \"left\" | \"center\" | \"right\";\n size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n layout?: \"default\" | \"split\" | \"centered\";\n logo?: {\n src: string;\n alt: string;\n width?: number;\n height?: number;\n href?: string;\n className?: string;\n };\n badge?: {\n text: string;\n icon?: ComponentConfig;\n className?: string;\n };\n image?: {\n src: string;\n alt: string;\n width?: number;\n height?: number;\n className?: string;\n containerClassName?: string;\n };\n className?: string;\n titleClassName?: string;\n subtitleClassName?: string;\n ctaClassName?: string;\n background?: string;\n backgroundImage?: BackgroundImageConfig | BackgroundImageConfig[];\n innerBackgroundImage?: BackgroundImageConfig | BackgroundImageConfig[];\n maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n blur?: number;\n blurColor?: string;\n id?: string;\n}\n```\n\n### Description\n\nA powerful hero section with multiple layouts (default stacked, split two-column, centered), size variants, optional logo/badge, and background image support.\n\n### Example\n\n```tsx\n{\n type: \"Hero\",\n props: {\n title: \"Build Better Products Faster\",\n subtitle: \"The complete platform for modern development teams\",\n ctaText: \"Get Started Free\",\n ctaHref: \"/signup\",\n layout: \"centered\",\n size: \"lg\",\n badge: { text: \"New Release\", className: \"bg-purple-600 text-white\" }\n }\n}\n```\n\n
\n\n
\nMediaContentBox - Media + content layout section\n\n### Props\n\n```typescript\nexport interface MediaContentBoxStat {\n icon: ComponentConfig;\n label: string;\n value: string;\n}\n\nexport interface MediaContentBoxProps {\n badge?: ComponentConfig;\n title: string;\n titleTag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n description: string;\n media: ComponentConfig;\n mediaPosition?: \"left\" | \"right\";\n stats?: MediaContentBoxStat[];\n className?: string;\n id?: string; // Optional ID for anchor linking and scroll targets\n}\n```\n\n### Description\n\nA flexible content section displaying media (image/video) alongside text with optional statistics. Perfect for feature showcases and product highlights.\n\n### Example\n\n```tsx\n{\n type: \"MediaContentBox\",\n props: {\n title: \"Powerful Analytics\",\n description: \"Track your performance with real-time insights\",\n media: { type: \"Image\", props: { src: \"https://plac","readmeFilename":"README.md"}