microbit-foundation · microbit-matt-hillsdon · Aug 12, 2026 · Jul 24, 2026 · Jul 24, 2026 · Jul 27, 2026
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -12,6 +12,7 @@ module.exports = {
   ],
   ignorePatterns: [
     "dist",
+    "styled-system",
     ".eslintrc.cjs",
     "deployment.cjs",
     "bin/**/*.js",
@@ -34,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",

diff --git a/.github/workflows/build.yml b/.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-dev.72 @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 }}

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

diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,3 @@
 src/editor/codemirror/lint/lint.ts
+styled-system
+src/styled-system.css
diff --git a/AGENTS.md b/AGENTS.md
@@ -0,0 +1,28 @@
+# AI agent notes
+
+## Styling/theming
+
+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`).
+
+`@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.
+After bumping the pinned `@microbit/ui` version, follow "Upgrading in an app" in
+`../ui/packages/ui/README.md`.
+
+## 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.
diff --git a/bin/compile-lang.mjs b/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" }
+  );
+}
diff --git a/docs/tech-overview.md b/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/).
 

diff --git a/lang/ui.ca.json b/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"

diff --git a/lang/ui.de.json b/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"

diff --git a/lang/ui.en.json b/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"

diff --git a/lang/ui.es-es.json b/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"

diff --git a/lang/ui.fr.json b/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"

diff --git a/lang/ui.ga-ie.json b/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"

diff --git a/lang/ui.ja.json b/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"

diff --git a/lang/ui.ko.json b/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"

diff --git a/lang/ui.lol.json b/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"

diff --git a/lang/ui.nl.json b/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"

diff --git a/lang/ui.pl.json b/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"