[nklip]

One commit with two changes: Chakra UI 3 in lemon/react-js and portfolio, and bmi's tests moved from Jest to Vitest, which closes Dependabot alert #1.

Chakra UI 3

Chakra 3.37 replaces 2.10 in both apps. lemon's date picker moves from chakra-dayzed-datepicker 0.2 to 3, the release built for Chakra 3. The changes follow Chakra's migration guide by hand. The codemod was not run.

Before migrating, I bumped both apps to 2.10.10, the last 2.x release. That was a safe step: lemon rendered pixel-identical. The 2.10 build is the baseline for every comparison below.

Chakra 2	Chakra 3
<ChakraProvider theme={…}>	<ChakraProvider value={system}>: lemon builds one in src/lib/theme.js, portfolio uses defaultSystem
colorScheme	colorPalette. lemon's palette defines the semantic tokens a custom palette needs
FormControl / FormLabel / FormErrorMessage	Field.Root / Field.Label / Field.ErrorText
Select	NativeSelect
AlertDialog	Dialog with role="alertdialog"
Avatar	Avatar.Root / Fallback / Image, now 2xl, the largest size
spacing, isLoading	gap, loading
Heading sizes	renumbered to the v3 size that matches what each heading rendered at before

@emotion/styled and framer-motion are no longer needed. dayzed and its React override in lemon go with the old picker. The react group in .github/dependabot.yml drops framer-motion.

What looks different

• lemon shows its own design. Chakra 3 puts its styles in CSS cascade layers, so App.css now applies. Chakra 2's global styles used to override it. The page gets:

  • the #edefee background, green on narrow screens;
  • Markazi Text;
  • the 3rem h1.

  index.html loads Markazi Text and Open Sans as the vanilla-js site does. The theme returns <html> to transparent, as Chakra 2 left it, so the background reaches the edges of the window.

• portfolio's avatar is a real 2xl avatar. The old size="3xl" never existed, so it rendered as a tiny fallback box.

• Chakra 3 component defaults:

  • Form labels are 14px rather than 16px.
  • portfolio's purple button is a slightly different shade.

Behaviour kept on purpose

• Alert dialogs close on a click outside. Chakra 3 keeps an alert dialog open on an outside click. These have no button, so on a touch screen, which has no Escape key, they could never be dismissed. closeOnInteractOutside restores the 2.x behaviour.
• The date picker opens from a click anywhere in the field. Version 3's input variant opens only from a small icon, so the default button trigger stays, styled like the inputs around it.

Tests

• Chakra 3 needs a ChakraProvider, so src/tests/test-utils.jsx wraps the component under test in one.
• chakra-dayzed-datepicker has no exports map, so vitest loaded its CommonJS build. That build brings a second copy of Chakra, whose context the provider never reaches. A test-only alias in vite.config.js points vitest at the picker's ES module build, the one the app build already uses.

bmi: Jest to Vitest

The alert is deepmerge 4.3.1, which arrives through jest-config (GHSA-gcqx-w48m-w2h4, low). It can't be fixed while bmi stays on Jest:

• No fixed deepmerge release. The advisory covers 4.2.0 through 4.3.1, and 4.3.1 is the newest release.
• No Jest release without it. Every Jest release since 25.2 depends on deepmerge.
• Downgrading would be a fake fix. deepmerge 4.1.1 falls outside the advisory's range, which would silence the alert. But a {"__proto__": …} source poisons the object 4.1.1 returns, which 4.2.0 began to block, so it is less safe, not more.

What changed:

• bmi now tests with Vitest 5, which lemon, portfolio and weather already use and which has no deepmerge.
• The lockfile falls from 288 entries to 60.
• The glob and minimatch overrides that Jest needed are gone.
• --globals keeps bare test() and expect(), so bmi.test.js is unchanged.
• The page itself is untouched apart from a comment in bmi.js, and still runs unbuilt.
• bmi/README.md, the root README.md and CLAUDE.md now name Vitest.

Verification

Checked in Chromium against the 2.10 build:

• Form validation: 34 cases across both forms produce identical errors.
• Date picker: opens, moves a month ahead and sets the same date.
• Alert dialogs, success and error in both apps:
  • same text and colour;
  • Escape and an outside click both close them;
  • focus now moves into the dialog.
• Navigation: lemon's router links reach the same routes.
• Console: no new errors.

bmi:

• The same 14 tests pass under Vitest as under Jest.
• A bug planted in bmi.js turns one test red and makes npm test exit 1.

Advisories: I matched every lockfile against the GitHub-reviewed advisory database as of today. It finds the one deepmerge alert before this change and none after.

On Node 22 with npm 10 and on Node 26 with npm 11, all of these pass:

• npm ci;
• tests;
• builds;
• npm audit, with 0 findings in every project.

Bundles shrink: lemon goes from 243.5 to 219.4 kB gzip, and portfolio from 233 to 206.3 kB.

🤖 Generated with Claude Code

https://claude.ai/code/session_01PJbZcrXFYA1x2ppHdCG5uT