fix: make the ESM bundle load under native Node, fix ConnectionChip in dark mode, and require React 18

[jijillery]

Intent

Your standing instructions for this session are to merge when green and release as needed.

Context: while building the GitHub connection primitives for #1847 (merged in #1870), the worker found three pre-existing defects in this repo:

1. js-yaml 5 has no default ESM export, but src/custom/CustomCatalog/Helper.ts and the CatalogDetail helper.ts use import jsyaml from 'js-yaml'. The CommonJS build works; ESM resolution breaks.
2. ConnectionChip hardcodes white and black colors, so it is broken in dark mode.
3. package.json still declares React 17 peer support, but React.useId (React 18+) is already used by permissions.tsx, which every Sistent Button depends on, so React 17 consumers are already broken.

What Changed

• The ESM bundle now loads under native Node ESM.
  • The CustomCatalog and CatalogDetail helpers now use import { load } from 'js-yaml' instead of the default import. js-yaml 5 has no default ESM export.
  • The lodash debounce imports now point at lodash/debounce.js. This affects SearchBar, StyledSearchBar, ShareModal and TeamSearchField.
  • tsup.config.ts now marks every dependency and peer dependency as external through a custom esbuild plugin. @meshery/schemas is still bundled. In the ESM build, inlined CommonJS that calls require() on an external (for example use-sync-external-store requiring react) now gets a static import instead. Before, that call became a runtime require that fails with "Dynamic require ... is not supported". The new esmBundleLoads.test.ts loads dist/index.mjs with native import() to guard this.
• ConnectionChip now uses theme tokens instead of hardcoded black, white and #51636B. The text color is text.default, the border is border.strong and the background is background.card, so the chip renders correctly in dark mode. The change adds ConnectionChip.test.tsx and a light/dark Storybook story.
• The react and react-dom peer ranges no longer include 17. They are now ^18.0.0 || ^19.0.0. React.useId, which permissions.tsx already uses (and every Sistent Button depends on), needs React 18. This is a consumer-visible change to the peer range.

Risk Assessment

✅ Low: All three fixes are small and well-bounded. The two js-yaml imports now use named load/dump, and no other default imports of js-yaml remain in src. ConnectionChip uses existing palette tokens the way sibling components do, and the peer range now matches the React 18 APIs the code already uses. The new tests check behavior: computed chip styles, and an actual esbuild ESM link of dist.

Testing

I rebuilt the target, packed it and installed it into a throwaway consumer that has React 18 but neither optional peer. In that consumer, native Node ESM import, CJS require and SSR rendering of ConnectionChip (dark), SearchBar and Button all succeeded. Undoing the fix makes both a direct import and the new jest guard fail, so the guard does catch the regression. The packed tarball rejects a React 17 install. The js-yaml/esbuild link test, the ConnectionChip theme-token test, and the export-parity and optional-peer guards passed in jest, but those are not live runs, so the js-yaml and ConnectionChip theme-token scenarios are marked untested for this round. I took no new screenshots because this round only changed bundling and import paths. I removed the temporary consumer, the tarballs and dist/; the worktree is clean.

• Live validation: ✅ go - 6 of 8 scenarios driven live against the product

Scenario	Result	Live	Evidence
A consumer with React 18 and no optional peers runs await import('@sistent/sistent/dist/index.mjs') under native Node ESM and gets the full export set	✅ pass	live	native-esm-clean-consumer-transcript.txt: 'native ESM OK; exports: 748', contract version 1, date-fns and @mui/x-date-pickers absent
The same consumer server-renders ConnectionChip (dark theme), SearchBar (lodash debounce) and Button (React.useId) through the ESM bundle	✅ pass	live	native-esm-clean-consumer-transcript.txt: node ssr.mjs output
CJS consumers can still require('@sistent/sistent') after the tsup externals change	✅ pass	live	native-esm-clean-consumer-transcript.txt: 'CJS OK; exports: 748'
Adversarial: undoing the extension fix breaks native ESM, and the new jest guard catches it	✅ pass	live	native-esm-clean-consumer-transcript.txt (ERR_MODULE_NOT_FOUND lodash/debounce); esm-native-guard-mutation.txt (1 failed)
Adversarial: the tsup externals plugin does not hoist an optional peer into a module-scope import	✅ pass	live	Clean consumer without date-fns/@mui/x-date-pickers loads both ESM and CJS; dist/index.mjs only has dynamic import() of @mui/x-date-pickers
ESM bundle links under esbuild (js-yaml named import) and exports match the declarations	⏸️ untested	no	The earlier payload only had jest-test evidence for this round (esmBundleLoads/declarationRuntimeExportParity). It did not drive a live bundler consumer against this target, so there is no live result…
A React 17 consumer is rejected at install time by the peer range	✅ pass	live	react17-peer-rerun-target.txt: ERESOLVE; packed peer react ^18.0.0 || ^19.0.0
ConnectionChip takes colors from theme tokens in dark mode	⏸️ untested	no	This round's earlier payload had only a jest test and round-1 screenshots for this. Neither is a live visual check of the target commit, so there is no live result.

Evidence: Native ESM + CJS + SSR in clean consumer, plus the fix-undone check

## clean consumer: npm install sistent-sistent-0.23.0.tgz (target c153b456) react@18 react-dom@18
v24.18.0
optional peer @mui/x-date-pickers absent
optional peer date-fns absent


$ node --input-type=module -e "const s = await import(\"@sistent/sistent/dist/index.mjs\") ..."
native ESM OK; exports: 748 ConnectionChip: function SearchBar: function MESHERY_EXTENSION_CONTRACT_VERSION: 1
exit 0

$ node -e "require(\"@sistent/sistent\")"
CJS OK; exports: 748 ConnectionChip: function contract: 1
exit 0

$ node ssr.mjs   # renderToString through native ESM import of dist/index.mjs
MUI: You have provided a `title` prop to the child of <Tooltip />.
Remove this title prop `github` or the Tooltip component.
ConnectionChip (dark) SSR: 9425 chars; MuiChip rendered
SearchBar (lodash/debounce.js) SSR: 14512 chars
Button (permissions useId) SSR: ok
exit 0

## adversarial: same bundle with the fix undone (lodash/debounce.js -> lodash/debounce)
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/tmp/nm-consumer-pLBG/node_modules/lodash/debounce' imported from /tmp/nm-consumer-pLBG/node_modules/@sistent/sistent/dist/mutant-extensionless.mjs
exit 1

Evidence: Jest native-ESM guard failing on the fix-undone bundle

    Error [ERR_MODULE_NOT_FOUND]: Cannot find module '~/.no-mistakes/worktrees/fd5744b3ca4d/01M50XSDFRQ85QFTVH9A9J6Q4J/node_modules/lodash/debounce' imported from ~/.no-mistakes/worktrees/fd5744b3ca4d/01M50XSDFRQ85QFTVH9A9J6Q4J/dist/index.mjs
        code: 'ERR_MODULE_NOT_FOUND',
Tests:       1 failed, 2 skipped, 3 total

Evidence: React 17 install rejected by target tarball

$ npm install --dry-run <target tarball> react@17 react-dom@17
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error Found: react@17.0.2
npm error   peer react@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/icons-material@9.5.0
npm error Could not resolve dependency:
npm error peer react@">=18" from @rjsf/utils@6.11.0
exit 1
packed peer react: ^18.0.0 || ^19.0.0 react-dom: ^18.0.0 || ^19.0.0

  - Outcome: 🔧 3 issues found → auto-fixed ✅ across 2 runs (35m33s)

Pipeline

Updates from git push no-mistakes

✅ **intent** - passed

✅ No issues found.

✅ **Rebase** - passed

✅ No issues found.

⚠️ **Review** - 1 info

• ℹ️ package.json:108 - Narrowing the react/react-dom peer range from ^17 || ^18 || ^19 to ^18 || ^19 is consumer-visible. CLAUDE.md treats that as a minor release in this pre-1.0 package, and .github/release-drafter.yml defaults to patch. The PR this run opens should carry the minor label, or the narrowed range ships as a patch. The source change is correct: React.useId is already used at module-reachable paths in src/custom/permissions.tsx:549, GitHubRepositoryPicker.tsx:62, and GitHubFileTree.tsx:125, so React 17 consumers already fail.

🔧 **Test** - 3 issues found → auto-fixed ✅

• ⚠️ src/__testing__/esmBundleLoads.test.ts - Existing ESM defect, related to the js-yaml fix: native Node ESM import('@sistent/sistent/dist/index.mjs') fails in both base and change with ERR_MODULE_NOT_FOUND for lodash/debounce (an extensionless deep import that only resolves under CJS or bundlers). Bundlers (esbuild) link fine after this change, but Node-ESM/SSR consumers of index.mjs still break. Fix direction: import lodash/debounce.js or { debounce } from 'lodash-es', and extend esmBundleLoads.test.ts with a native import() check.
• ℹ️ package.json - package.json has no exports map and module points at the CJS ./dist/index.js, so by default consumer bundlers never select dist/index.mjs. The js-yaml ESM break only hit consumers who deep-import the .mjs file. Worth deciding whether index.mjs should be wired into module/exports now that it links.
• ℹ️ src/custom/ConnectionChip/ConnectionChip.tsx:31 - Design nit seen in the screenshots: the dark chip surface (background.card, neutral #212121) sits on a blue-tinted page (#000d12), and the dark-mode delete icon uses MUI's default rgba(255,255,255,0.26), which is low contrast. Both are much better than before, but a tinted card token and a stronger delete-icon color would match the palette more closely.
• Live validation: ✅ go - 6 of 6 scenarios driven live against the product

Scenario	Result	Live	Evidence
Consumer bundler links the ESM build: esbuild bundling an app that imports @sistent/sistent/dist/index.mjs succeeds, with no js-yaml default-import error	✅ pass	live	esm-js-yaml-bundler-transcript.txt: base exits 1 with No matching export in js-yaml.mjs for import "default" at both catalog-helper sites; change exits 0. The browser-platform bundle also failed on…
Adversarial: the new ESM guard catches the regression (fails on the base build, passes on the change)	✅ pass	live	esm-guard-against-base-build.txt (1 failed with the js-yaml link errors); CI=1 npx jest src/__testing__/esmBundleLoads.test.ts passes on the change
ConnectionChip in dark mode takes theme colors: dark chip, light text, visible border and delete icon, not a white slab	✅ pass	live	connectionchip-new-light-dark.png vs connectionchip-base-light-dark.png; computed JSON: dark bg rgb(33,33,33) / text rgb(253,253,253) / border rgb(141,159,167) on change vs bg rgb(255,255,255) / text…
ConnectionChip in light mode still renders correctly (light surface, dark ink, strong border, delete icon visible)	✅ pass	live	connectionchip-new-light-dark.png light row; computed bg rgb(253,253,253), text rgb(0,13,18), border rgb(40,53,58)
React 17 consumer is told sistent doesn't support it: the packed peer range excludes 17 and npm flags sistent's peer as unmet; React 18/19 still satisfy it	✅ pass	live	react17-peer-npm-ls.txt: base 0 lines naming sistent as unmet peer and 17.0.2 satisfies; change 29 lines and 17.0.2 -> false, 18.3.1/19.0.0 -> true; react-peer-install-transcript.txt: react@18 consume…
Premise check: the base build already fails under React 17 (so dropping 17 removes no working support)	✅ pass	live	React 17 consumer on base: React.useId is undefined, and require('@sistent/sistent') throws Cannot find module react/jsx-runtime from react-dnd (recorded in session transcript; temp consumer removed…

• npm ci && npm run build (change) and tsup on a git archive e6dd03e5 copy (base), then npm pack for each
• Clean-consumer installs of each tarball with react@17 and react@18 (npm install, then npm install --legacy-peer-deps + npm ls react), plus a semver check of the packed peerDependencies.react
• Rendered a sistent Button with react-dom/server in a react@17 consumer (base build) to check the React 17 claim
• esbuild bundle (format=esm, platform=node and browser) of a consumer app importing @sistent/sistent/dist/index.mjs, base vs change
• Node native ESM import('@sistent/sistent/dist/index.mjs'), base vs change
• Browser page (React 18 createRoot, SistentThemeProvider light+dark, ConnectionChip plain/clickable/deletable) bundled from each tarball and rendered in headless Chromium via playwright-core; screenshots + getComputedStyle captured
• CI=1 npx jest src/__testing__/ConnectionChip.test.tsx src/__testing__/esmBundleLoads.test.ts on the change (pass)
• CI=1 npx jest src/__testing__/esmBundleLoads.test.ts against the base build (fails with the js-yaml default-import error, so the guard reproduces the regression)

🔧 Fix applied.
✅ Re-checked - no issues remain.

• Live validation: ✅ go - 6 of 8 scenarios driven live against the product

Scenario	Result	Live	Evidence
A consumer with React 18 and no optional peers runs await import('@sistent/sistent/dist/index.mjs') under native Node ESM and gets the full export set	✅ pass	live	native-esm-clean-consumer-transcript.txt: 'native ESM OK; exports: 748', contract version 1, date-fns and @mui/x-date-pickers absent
The same consumer server-renders ConnectionChip (dark theme), SearchBar (lodash debounce) and Button (React.useId) through the ESM bundle	✅ pass	live	native-esm-clean-consumer-transcript.txt: node ssr.mjs output
CJS consumers can still require('@sistent/sistent') after the tsup externals change	✅ pass	live	native-esm-clean-consumer-transcript.txt: 'CJS OK; exports: 748'
Adversarial: undoing the extension fix breaks native ESM, and the new jest guard catches it	✅ pass	live	native-esm-clean-consumer-transcript.txt (ERR_MODULE_NOT_FOUND lodash/debounce); esm-native-guard-mutation.txt (1 failed)
Adversarial: the tsup externals plugin does not hoist an optional peer into a module-scope import	✅ pass	live	Clean consumer without date-fns/@mui/x-date-pickers loads both ESM and CJS; dist/index.mjs only has dynamic import() of @mui/x-date-pickers
ESM bundle links under esbuild (js-yaml named import) and exports match the declarations	⏸️ untested	no	The earlier payload only had jest-test evidence for this round (esmBundleLoads/declarationRuntimeExportParity). It did not drive a live bundler consumer against this target, so there is no live result…
A React 17 consumer is rejected at install time by the peer range	✅ pass	live	react17-peer-rerun-target.txt: ERESOLVE; packed peer react ^18.0.0 || ^19.0.0
ConnectionChip takes colors from theme tokens in dark mode	⏸️ untested	no	This round's earlier payload had only a jest test and round-1 screenshots for this. Neither is a live visual check of the target commit, so there is no live result.

• npm run build at c153b456, then a check that dist/index.mjs has no __require/'Dynamic require' left, still exports MESHERY_EXTENSION_CONTRACT_VERSION in index.js/index.mjs/index.d.ts/index.d.mts, and has no module-scope import of date-fns or @mui/x-date-pickers (only the lazy import() remains)
• npm pack -> throwaway consumer npm install <tgz> react@18 react-dom@18 (optional peers checked absent) -> node --input-type=module -e 'await import("@sistent/sistent/dist/index.mjs")'
• Same consumer: node -e 'require("@sistent/sistent")' (CJS)
• Same consumer: node ssr.mjs - renderToString of ConnectionChip in dark SistentThemeProvider, SearchBar (lodash/debounce.js) and Button (permissions useId) through the native ESM import
• Adversarial: same bundle with lodash/debounce.js rewritten to lodash/debounce -> native import fails with ERR_MODULE_NOT_FOUND
• Adversarial: dist/index.mjs in the worktree mutated the same way -> CI=true npx jest src/__testing__/esmBundleLoads.test.ts -t native fails (1 failed), then restored
• CI=true npx jest src/__testing__/esmBundleLoads.test.ts src/__testing__/ConnectionChip.test.tsx src/__testing__/declarationRuntimeExportParity.test.ts src/__testing__/optionalPeerDependencies.test.ts (36 passed)
• npm install --dry-run <target tgz> react@17 react-dom@17 -> ERESOLVE; packed peer range is ^18.0.0 || ^19.0.0
• Compared against published @sistent/sistent@0.23.0: its index.mjs already imports node builtins path/process/url, so that is not new

✅ **Document** - passed

✅ No issues found.

✅ **Lint** - passed

✅ No issues found.

✅ **Push** - passed

✅ No issues found.

Summary by CodeRabbit

• Compatibility
  • Updated supported React peer dependency versions to 18 and 19; React 17 is no longer included.
• Bug Fixes
  • Connection chips now use colors from the active theme, improving their appearance in both light and dark modes.
  • YAML import and download flows now use compatible parsing and serialization interfaces.

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⛔ Files ignored due to path filters: 1

• package-lock.json is excluded by !**/package-lock.json

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: a1dacaaa-3c61-401d-a289-15b1f036fc37

📥 Commits

Reviewing files that changed from the base of the PR and between e1b8f06 and 908842f.

⛔ Files ignored due to path filters: 1

• package-lock.json is excluded by !**/package-lock.json

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ec1fe837-9b9b-40dd-92c2-fa68a001a425

📥 Commits

Reviewing files that changed from the base of the PR and between e6dd03e and e1b8f06.

⛔ Files ignored due to path filters: 1

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing: 12

• package.json
• src/__testing__/ConnectionChip.test.tsx
• src/__testing__/esmBundleLoads.test.ts
• src/custom/CatalogDetail/helper.ts
• src/custom/ConnectionChip/ConnectionChip.stories.tsx
• src/custom/ConnectionChip/ConnectionChip.tsx
• src/custom/CustomCatalog/Helper.ts
• src/custom/DashboardWidgets/GettingStartedWidget/TeamSearchField.tsx
• src/custom/SearchBar.tsx
• src/custom/ShareModal/ShareModal.tsx
• src/custom/StyledSearchBar/StyledSearchBar.tsx
• tsup.config.ts

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

📝 Walkthrough

The pull request updates dependency imports and ESM bundle handling, adds bundle-loading tests, changes React peer dependency ranges to versions 18 and 19, and updates ConnectionChip colors to use the active theme.

Changes: ESM compatibility

Layer / File(s)	Summary
Dependency ranges and imports package.json, src/custom/CatalogDetail/helper.ts, src/custom/CustomCatalog/Helper.ts, src/custom/DashboardWidgets/GettingStartedWidget/TeamSearchField.tsx, src/custom/SearchBar.tsx, src/custom/ShareModal/ShareModal.tsx, src/custom/StyledSearchBar/StyledSearchBar.tsx	The React peer dependency ranges now include versions 18 and 19. The js-yaml imports use named exports, and lodash imports use explicit module paths.
Bundle externalization and ESM require handling tsup.config.ts	The config derives external package matches from package metadata. Its esbuild plugin keeps matching packages external except for ESM require() calls, which resolve through generated static imports.
ESM bundle validation src/__testing__/esmBundleLoads.test.ts	Tests check bundle presence in CI, esbuild linking, and loading with Node’s native ESM loader.

ConnectionChip theming

Layer / File(s)	Summary
Theme-based chip colors and examples src/custom/ConnectionChip/ConnectionChip.tsx, src/custom/ConnectionChip/ConnectionChip.stories.tsx, src/__testing__/ConnectionChip.test.tsx	ConnectionChip uses the active theme’s text, border, and background colors. Light and dark stories and tests compare rendered colors with the corresponding palette values.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to e1b8f

The reviewed changes have no identified issue requiring resolution before merge.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 11 files. (1 skipped: 1…	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly summarizes the three main changes: native Node ESM loading, dark-mode support for ConnectionChip, and the React peer dependency update. The phrase "require React 18" is slightly inco…

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 11 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches: 💡 1

📝 Generate docstrings: 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}