Remove Chakra migration residue

The migration is complete: swept Chakra/gotcha/playbook references from
comments and docs, normalised agent notes to plain app/tooling notes
(pointing at ui's docs/hints.md), and removed fidelity leftovers.

Author: microbit-matt-hillsdon

.eslintrc.cjs

@@ -35,7 +35,7 @@ module.exports = {
   rules: {
     // More trouble than it's worth
     "react/no-unescaped-entities": "off",
-    // False positives from library imports from Chakra UI
+    // False positives from library imports
     "@typescript-eslint/unbound-method": "off",
     "@typescript-eslint/no-misused-promises": [
       "error",

AGENTS.md

@@ -2,11 +2,9 @@
 
 ## Styling/theming
 
-This app uses react-aria-components + Panda CSS via `@microbit/ui`
-(migrated from Chakra UI, July 2026). **Read the gotcha catalog in
-`../ui/docs/migration-playbook.md` before styling/theming/UI work** —
-Panda's static extraction rules and RAC behaviours catalogued there still
-apply to new code. The private theme package is the sibling repo
+This app uses react-aria-components + Panda CSS via `@microbit/ui`.
+Read `../ui/docs/hints.md` before styling/theming/UI work.
+The private theme package is the sibling repo
 `../python-editor-v3-microbit` (consumed via a manual `node_modules`
 symlink locally — re-create it after `npm install`).
 
@@ -15,8 +13,7 @@ symlink locally — re-create it after `npm install`).
 want whenever a change spans the library and this app — symlink
 `node_modules/@microbit/ui` to `../ui/packages/ui`, the same arrangement as the
 theme package above. Re-create it after `npm install` (which restores the pinned
-version), and regenerate clean afterwards (`rm -rf styled-system && npm run
-panda`) — incremental codegen does not detect external preset changes.
+version), and regenerate clean afterwards (`rm -rf styled-system && npm run panda`) — incremental codegen does not detect external preset changes.
 `resolve.dedupe` in `vite.config.ts` is what stops the symlinked package loading
 its own copies of React and friends, so leave it in place either way.
 

docs/tech-overview.md

@@ -8,7 +8,7 @@ The document assumes some familiarity with the app as a user. [Try it out](http:
 
 The editor is written in [TypeScript](https://www.typescriptlang.org/) using [React](https://reactjs.org/).
 
-We use the [Chakra UI component library](https://chakra-ui.com/docs/getting-started) which provides a base set of accessible components. We're currently using Chakra UI 2.x.
+The user interface is built with the Foundation's shared `@microbit/ui` component library, which combines [react-aria-components](https://react-spectrum.adobe.com/react-aria/) for accessible component behaviour with [Panda CSS](https://panda-css.com/) for styling.
 
 The project is bundled using [Vite](https://vitejs.dev/). The test runner is [Vitest](https://vitest.dev/) and we're using [eslint](https://eslint.org/).
 

panda.config.ts

@@ -12,7 +12,7 @@ import { appPreset } from "./src/deployment/default/panda-preset";
 // alias swap in vite.config.ts. When the private package is installed it
 // overrides brand tokens (colour ramps, code palette, semantic tokens);
 // otherwise the OSS default preset stands alone. Panda merges them at codegen
-// time — the build-time equivalent of Chakra's runtime theme swap.
+// time.
 //
 // Panda loads this config as CommonJS, so `require` is the real (sync) require;
 // Node 24 resolves the ESM private package through it.
@@ -29,12 +29,12 @@ export default defineConfig({
   preflight: true,
   jsxFramework: "react",
   // Drop Panda's default theme preset; the preset stack below supplies the full
-  // token system (ported from Chakra). preset-base still provides the utilities.
+  // token system. preset-base still provides the utilities.
   eject: true,
   // Later presets override earlier ones: @microbit/ui's base preset (the
   // complete design system + recipes, OSS default brand values), the shared
   // dense preset (this app's × 0.88 spacing / × 0.9 font-size density, shared
-  // with classroom — see playbook gotcha #25), this app's own preset, then the
+  // with classroom), this app's own preset, then the
   // optional private brand preset which overrides the OSS brand values.
   // staticCss lives in the base preset.
   presets: [

src/common/ConfirmDialog.tsx

@@ -37,7 +37,7 @@ export const ConfirmDialog = ({
       <ModalBody>{body}</ModalBody>
       <ModalFooter>
         {/* Least-destructive initial focus: RAC honours autoFocus within the
-            dialog's FocusScope, replacing Chakra's leastDestructiveRef. */}
+            dialog's FocusScope. */}
         <Button autoFocus onPress={() => callback(false)}>
           <FormattedMessage id="cancel-action" />
         </Button>

src/common/ExpandCollapseIcon.tsx

@@ -10,8 +10,6 @@ interface ExpandCollapseIconProps extends Omit<IconProps, "as"> {
   open: boolean;
 }
 
-// The Material arrow glyphs are the same paths as the Chakra chevron icons
-// this replaced.
 const ExpandCollapseIcon = ({ open, ...props }: ExpandCollapseIconProps) =>
   open ? (
     <Icon as={MdKeyboardArrowUp} {...props} />

src/common/SplitView/HideSplitViewButton.tsx

@@ -78,8 +78,7 @@ const HideSplitViewButton = React.forwardRef(
             width: mode === "icon" ? "20px" : "auto",
             background: "#eaecf1",
             // The flat background is a utility, which beats the ghost
-            // variant's recipe-layer hover/active — restate them (Chakra's
-            // ghost-over-gray values).
+            // variant's recipe-layer hover/active — restate them.
             _hover: { background: "gray.100" },
             _active: { background: "gray.200" },
             // Likewise a flat boxShadow from a call site (e.g. Simulator's

src/deployment/default/panda-preset.ts

@@ -10,20 +10,17 @@ import { definePreset } from "@pandacss/dev";
  * after the shared-ui base preset (@microbit/ui) and before the optional
  * private brand preset (see panda.config.ts). Kept minimal — the base preset
  * already supplies the token scales, recipes, `radii.button`, focus shadows,
- * Helvetica fonts and most semantic tokens.
- *
- * Values mirror the OSS Chakra theme (src/deployment/default) as converged
- * during the semantic-token pre-work; the private brand preset overrides the
- * brand-divergent token values.
+ * Helvetica fonts and most semantic tokens. The private brand preset overrides
+ * the brand-divergent token values.
  */
 export const appPreset = definePreset({
   name: "python-editor-v3",
   theme: {
     extend: {
       tokens: {
         // This app's stacking contexts, calibrated against third-party
-        // layers (xterm.js ~10, the library's Chakra-derived overlay scale
-        // from 1000). Token references are required in Panda styles: an
+        // layers (xterm.js ~10, the library's overlay scale from 1000).
+        // Token references are required in Panda styles: an
         // imported constant in a zIndex prop is not statically extractable
         // (silently unstyled).
         zIndex: {
@@ -45,16 +42,15 @@ export const appPreset = definePreset({
         },
         colors: {
           // This app's very light grays differ slightly from the family base
-          // preset's (gray.75 is #f5f6f8 here vs #f5f5f5): mirror the OSS
-          // Chakra theme's values (src/deployment/default/colors.ts).
+          // preset's (gray.75 is #f5f6f8 here vs #f5f5f5).
           gray: {
             10: { value: "#fcfcfc" },
             75: { value: "#f5f6f8" },
           },
           // Syntax-highlight / code-block palette. Consumed outside React as
           // CSS vars (CodeMirror highlight styles, structure highlighting), so
           // it's an app-preset token category; the private preset overrides the
-          // values. OSS values are the Chakra defaults the old theme resolved.
+          // values.
           code: {
             blockBorder: { value: "#A0AEC0" }, // gray.400
             blockBackground: { value: "rgba(185, 185, 185, 0.1)" },
@@ -94,35 +90,29 @@ export const appPreset = definePreset({
         },
       },
       recipes: {
-        // The Chakra theme defaulted Text to `md` — 0.9rem on this app's
-        // shrunken scale, vs the 16px an unsized <Text> would inherit.
-        // App-level because other apps rely on inheritance (Text.recipe.ts).
+        // Default Text to `md` — 0.9rem on this app's shrunken scale, vs the
+        // 16px an unsized <Text> would inherit. App-level because other apps
+        // rely on inheritance (Text.recipe.ts).
         text: {
           defaultVariants: { size: "md" },
         },
-        // python-editor's default button variant is `outline` (census: the
-        // OSS theme applies withDefaultVariant("outline"); the family base
-        // recipe defaults to `secondary`). Ported from the Chakra `outline`
-        // variant, resolved at the brand colorScheme (the app applies
-        // withDefaultColorScheme("brand")): brand text over a transparent,
-        // brand-bordered button. Non-brand outline cases use `warning`.
+        // python-editor's default button variant is `outline` (the family
+        // base recipe defaults to `secondary`): brand text over a
+        // transparent, brand-bordered button. Non-brand outline cases use
+        // `warning`.
         button: {
           variants: {
             variant: {
               // Icon buttons on the app's dark chrome (sidebar header,
-              // serial bar): white glyph, white pill on hover. The Chakra
-              // variant was ghost-based with callers passing color="white";
-              // the base colour is folded in here instead (both call sites
-              // used white).
+              // serial bar): white glyph, white pill on hover.
               sidebar: {
                 color: "white",
                 bg: "transparent",
                 _hover: { bg: "white", color: "gray.700" },
                 _active: { bg: "white", color: "gray.800" },
               },
-              // The editor zoom / undo-redo pill pairs: Chakra solid+gray
-              // with darker hover/active. (The Chakra theme comment said
-              // "ideally we'd drop this variant" — carried as-is.)
+              // The editor zoom / undo-redo pill pairs: gray fill with
+              // darker hover/active.
               zoom: {
                 color: "gray.800",
                 bg: "gray.100",

src/documentation/api/ApiNode.tsx

@@ -271,8 +271,6 @@ const ApiNodeChildren = ({ docs, anchor }: ApiNodeChildrenProps) => {
           (childKind) =>
             groupedChildren?.get(childKind as any) && (
               <Box mb="5" key={childKind}>
-                {/* The Chakra original had fontWeight="lg", an invalid
-                    token that never resolved, so this renders normal. */}
                 <Text mb="2">{groupHeading(intl, kind, childKind)}</Text>
                 {groupedChildren?.get(childKind as any)?.map((c) => (
                   <ApiNode

src/documentation/common/DocumentationTopLevelItem.tsx

@@ -59,8 +59,8 @@ const DocumentationTopLevelItem = ({
             size="sm"
             css={{ color: "brand.200", fontSize: "2xl" }}
             variant="ghost"
-            // The Chakra button relied on its click bubbling to the list
-            // item's onClick; react-aria's press handling suppresses that.
+            // react-aria's press handling doesn't produce a click that
+            // bubbles to the list item's onClick, so forward explicitly.
             onPress={onForward}
           >
             <RiArrowRightLine />