Adopt @microbit/ui

.eslintrc.cjs

@@ -12,6 +12,7 @@ module.exports = {
   ],
   ignorePatterns: [
     "dist",
+    "styled-system",
     ".eslintrc.cjs",
     "deployment.cjs",
     "bin/**/*.js",

.github/workflows/build.yml

@@ -40,7 +40,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.48 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-experiment.rai.62 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -11,6 +11,9 @@
 # production
 /build
 
+# Panda CSS generated output
+/styled-system
+
 # misc
 .DS_Store
 .env.local

.prettierignore

@@ -1 +1,3 @@
 src/editor/codemirror/lint/lint.ts
+styled-system
+src/styled-system.css

AGENTS.md

@@ -0,0 +1,29 @@
+# AI agent notes
+
+## 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
+`../python-editor-v3-microbit` (consumed via a manual `node_modules`
+symlink locally — re-create it after `npm install`).
+
+`@microbit/ui` is consumed as the **published package**, pinned in
+`package.json`. To develop against a local `../ui` checkout instead — what you
+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.
+`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.
+
+## Commands
+
+- Unit tests: `npm test` (vitest). E2e: run headlessly via
+  `npm run test:e2e:headless`.
+- `npm run typecheck`, `npm run lint`.
+- Format with Prettier: `npx prettier --write` (no npm script).
+- New source files need the licensing header — `npm run fix-licensing-headers` applies it.

bin/compile-lang.mjs

@@ -0,0 +1,51 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Compiles lang/ui.<locale>.json into the formatjs AST catalogs in
+ * src/messages/, merging in the source catalogs shipped by packages
+ * (currently @microbit/ui) so their strings ride in the app's lazily
+ * loaded per-locale chunks rather than being bundled eagerly for every
+ * locale. Package message ids are namespaced (`ui.`), so a collision with
+ * an app id fails the compile.
+ */
+import { execFileSync } from "node:child_process";
+import fs from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const require = createRequire(import.meta.url);
+const root = path.join(path.dirname(fileURLToPath(import.meta.url)), "..");
+const formatjs = require.resolve("@formatjs/cli/bin/formatjs");
+const packageLangDirs = ["@microbit/ui"].map((name) => ({
+  name,
+  dir: path.dirname(require.resolve(`${name}/lang/ui.en.json`)),
+}));
+
+for (const file of fs.readdirSync(path.join(root, "lang")).sort()) {
+  const inputs = [path.join(root, "lang", file)];
+  for (const { name, dir } of packageLangDirs) {
+    const packageFile = path.join(dir, file);
+    if (fs.existsSync(packageFile)) {
+      inputs.push(packageFile);
+    } else {
+      console.warn(`${name} has no ${file}; its English text will be used`);
+    }
+  }
+  execFileSync(
+    process.execPath,
+    [
+      formatjs,
+      "compile",
+      ...inputs,
+      "--ast",
+      "--out-file",
+      path.join(root, "src", "messages", file),
+    ],
+    { stdio: "inherit" }
+  );
+}

lang/ui.ca.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "Logotip tàctil",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "Deixar de silenciar",
     "description": "Aria label for the unmute simulator button"

lang/ui.de.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "Touch-Logo",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "Lautlos beenden",
     "description": "Aria label for the unmute simulator button"

lang/ui.en.json

@@ -1043,6 +1043,22 @@
     "defaultMessage": "Touch logo",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "Unmute",
     "description": "Aria label for the unmute simulator button"

lang/ui.es-es.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "Logotipo táctil",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "No silenciar",
     "description": "Aria label for the unmute simulator button"

lang/ui.fr.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "Logo tactile",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "Démuter",
     "description": "Aria label for the unmute simulator button"

lang/ui.ga-ie.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "Lógó tadhaill",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "Díbholadh",
     "description": "Aria label for the unmute simulator button"

lang/ui.ja.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "タッチロゴ",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "ミュート解除",
     "description": "Aria label for the unmute simulator button"

lang/ui.ko.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "터치 로고",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "음소거 해제",
     "description": "Aria label for the unmute simulator button"

lang/ui.lol.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "crwdns334598:0crwdne334598:0",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "crwdns334600:0crwdne334600:0",
     "description": "Aria label for the unmute simulator button"

lang/ui.nl.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "Aanraak logo",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "Niet meer dempen",
     "description": "Aria label for the unmute simulator button"

lang/ui.pl.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "Logo dotykowe",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "Wycisz",
     "description": "Aria label for the unmute simulator button"

lang/ui.zh-cn.json

@@ -1042,6 +1042,22 @@
     "defaultMessage": "触摸标志",
     "description": "Name for the touch logo pin on the V2 micro:bit board. Used in the simulator."
   },
+  "simulator-unit-celsius": {
+    "defaultMessage": "degrees Celsius",
+    "description": "Unit for the temperature slider, used in its accessible name"
+  },
+  "simulator-unit-degrees": {
+    "defaultMessage": "degrees",
+    "description": "Unit for the compass heading slider, used in its accessible name"
+  },
+  "simulator-unit-milli-g": {
+    "defaultMessage": "milli-g",
+    "description": "Unit for the accelerometer axis sliders (thousandths of g-force), used in their accessible names"
+  },
+  "simulator-unit-nanotesla": {
+    "defaultMessage": "nanotesla",
+    "description": "Unit for the compass axis sliders, used in their accessible names"
+  },
   "simulator-unmute": {
     "defaultMessage": "取消静音",
     "description": "Aria label for the unmute simulator button"