Upgrade to Panda CSS v2 and @microbit/ui 0.6

package.json

@@ -6,6 +6,7 @@
   "private": true,
   "type": "module",
   "allowScripts": {
+    "@parcel/watcher": false,
     "@sentry/cli": true,
     "aws-sdk": false,
     "core-js": false,
@@ -23,8 +24,8 @@
     "@microbit/microbit-connection": "^1.0.0",
     "@microbit/microbit-fs": "^0.11.0",
     "@microbit/micropython-microbit-stubs": "^1.0.1",
-    "@microbit/ui": "^0.5.0",
-    "@microbit/ui-patterns": "^0.7.0",
+    "@microbit/ui": "^0.6.0",
+    "@microbit/ui-patterns": "^0.8.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",
     "@sentry/browser": "^10.71.0",
@@ -60,7 +61,8 @@
     "@microbit/eslint-config": "^0.2.1",
     "@microbit/i18n-tools": "^0.2.0",
     "@microbit/website-deploy-s3": "^1.2.0",
-    "@pandacss/dev": "^1.11.4",
+    "@pandacss/dev": "^2.4.0",
+    "@pandacss/preset-base": "^2.4.0",
     "@playwright/test": "^1.58.2",
     "@sentry/vite-plugin": "^5.4.0",
     "@testing-library/dom": "^10.4.2",

panda.config.ts

@@ -5,7 +5,10 @@
  */
 import { basePreset } from "@microbit/ui/base-preset";
 import { densePreset } from "@microbit/ui/dense-preset";
-import { defineConfig } from "@pandacss/dev";
+import { defineConfig, Preset } from "@pandacss/dev";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
 import { appPreset } from "./src/deployment/default/panda-preset";
 
 // Optionally pull in the private brand preset, mirroring the `theme-package`
@@ -14,23 +17,29 @@ import { appPreset } from "./src/deployment/default/panda-preset";
 // otherwise the OSS default preset stands alone. Panda merges them at codegen
 // time.
 //
-// Panda loads this config as CommonJS, so `require` is the real (sync) require;
-// Node 24 resolves the ESM private package through it.
-let brandPreset: unknown;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const mod = require("@microbit-foundation/python-editor-v3-microbit/panda-preset");
-  brandPreset = (mod as { default: unknown }).default;
-} catch {
-  brandPreset = undefined;
-}
+// Panda bundles this config into a `data:` URL module, where a bare specifier
+// has no base to resolve against, and a static import would fail the OSS build
+// that lacks the package. So resolve it against the cwd (the app root, where
+// the npm scripts run) and import it by absolute file URL.
+const loadBrandPreset = async (): Promise<Preset | undefined> => {
+  let resolved: string;
+  try {
+    resolved = createRequire(path.join(process.cwd(), "package.json")).resolve(
+      "@microbit-foundation/python-editor-v3-microbit/panda-preset"
+    );
+  } catch {
+    return undefined;
+  }
+  const mod = (await import(pathToFileURL(resolved).href)) as {
+    default: Preset;
+  };
+  return mod.default;
+};
+const brandPreset = await loadBrandPreset();
 
 export default defineConfig({
   preflight: true,
   jsxFramework: "react",
-  // Drop Panda's default theme preset; the preset stack below supplies the full
-  // 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

src/common/GenericDialog.tsx

@@ -78,7 +78,9 @@ export const GenericDialogFooter = ({
           variant="link"
           size="lg"
           onPress={onCloseDontShowAgain}
-          css={{ color: "brand.500", mr: "auto" }}
+          // The link variant has no padding; inset it to line up with the
+          // dialog title.
+          css={{ color: "brand.500", mr: "auto", px: "6" }}
         >
           <FormattedMessage id="dont-show-again" />
         </Button>

src/common/SplitView/HideSplitViewButton.tsx

@@ -75,7 +75,10 @@ const HideSplitViewButton = React.forwardRef(
             py: "3",
             borderColor: "black",
             minW: "unset",
-            width: mode === "icon" ? "20px" : "auto",
+            // Test `text`, not `mode`: Panda can't see both values of a
+            // variable initialised with a ternary, so it would only emit
+            // one width (chakra-ui/panda#4056).
+            width: text ? "auto" : "20px",
             background: "#eaecf1",
             // The flat background is a utility, which beats the ghost
             // variant's recipe-layer hover/active — restate them.

src/documentation/common/DocString.tsx

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { css, cx } from "@microbit/ui";
 import React from "react";
+import { css, cx } from "styled-system/css";
 import { styled } from "styled-system/jsx";
 import { SystemStyleObject } from "styled-system/types";
 import { renderMarkdown } from "../../editor/codemirror/language-server/documentation";

src/documentation/common/DocumentationContent.test.tsx

@@ -58,7 +58,7 @@ describe("DocumentationContent", () => {
     ];
     const view = render(<DocumentationContent blocks={content} />);
     expect(view.container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="d_flex flex-d_column gap_3 mt_3"><div class="w_300px max-w_100% pos_relative before:content_&quot;&quot; before:d_block before:h_0 before:pb_var(--aspect-ratio-padding) [&amp;_>_*]:pos_absolute [&amp;_>_*]:inset_0 [&amp;_>_*]:w_100% [&amp;_>_*]:h_100%" style="--aspect-ratio-padding: 117.70114942528735%;"><img src="https://cdn.sanity.io/images/project/dataset/9fccaf51a164fedc98662188593de19bfb9be8ad-435x512.png?w=300&amp;q=80&amp;fit=max&amp;auto=format" alt="micro:bit showing X axis going across the front, Y axis going down and up, Z axis going back to front" class="max-w_100% bdr_lg bd_solid_1px bd-c_gray.300"></div></div>"`
+      `"<div class="d_flex flex-d_column gap_3 mt_3"><div style="--aspect-ratio-padding: 117.70114942528735%;" class="w_300px max-w_100% pos_relative before:content_&quot;&quot; before:d_block before:h_0 before:pb_var(--aspect-ratio-padding) [&amp;_>_*]:pos_absolute [&amp;_>_*]:inset_0 [&amp;_>_*]:w_100% [&amp;_>_*]:h_100%"><img src="https://cdn.sanity.io/images/project/dataset/9fccaf51a164fedc98662188593de19bfb9be8ad-435x512.png?w=300&amp;q=80&amp;fit=max&amp;auto=format" alt="micro:bit showing X axis going across the front, Y axis going down and up, Z axis going back to front" class="max-w_100% bdr_lg bd_solid_1px bd-c_gray.300"></div></div>"`
     );
   });
 });

src/documentation/ideas/IdeasDocumentation.tsx

@@ -78,8 +78,6 @@ const ActiveLevel = ({
   const ref = useRef<HTMLDivElement>(null);
   const contentRect = useResizeObserverContentRect(ref);
   const contentWidth = contentRect?.width ?? 0;
-  const numCols =
-    !contentWidth || contentWidth > 1100 ? 3 : contentWidth > 550 ? 2 : 1;
   if (activeIdea) {
     // Runtime value derived from the image reference.
     const imagePadding = activeIdea.image
@@ -155,7 +153,12 @@ const ActiveLevel = ({
       }
     >
       <Grid
-        columns={numCols === 3 ? 3 : numCols === 2 ? 2 : 1}
+        // Inline rather than via a variable: Panda can't see both values of
+        // a variable initialised with a ternary, so it would only emit one
+        // column count (chakra-ui/panda#4056).
+        columns={
+          !contentWidth || contentWidth > 1100 ? 3 : contentWidth > 550 ? 2 : 1
+        }
         gap="5"
         p="5"
         ref={ref}

src/documentation/search/SearchResultList.tsx

@@ -3,11 +3,11 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Divider, styled, Text } from "@microbit/ui";
+import { Divider, Text } from "@microbit/ui";
 import { ComponentProps } from "react";
 import { FormattedMessage } from "react-intl";
 import { Link as RouterLink } from "react-router";
-import { Stack } from "styled-system/jsx";
+import { Stack, styled } from "styled-system/jsx";
 import { link } from "styled-system/recipes";
 import { RouterState } from "../../router-hooks";
 import { createEditorUrl } from "../../urls";

src/editor/ModuleOverlay.tsx

@@ -48,16 +48,14 @@ const ModuleOverlay = ({ moduleData }: ModuleOverlayProps) => {
                   color="gray.500"
                   px="6"
                   py="3"
-                  borderBottom="1px solid"
-                  borderColor="gray.100"
+                  borderBottom="1px solid {colors.gray.100}"
                 >
                   Module name
                 </styled.th>
                 <styled.td
                   px="6"
                   py="4"
-                  borderBottom="1px solid"
-                  borderColor="gray.100"
+                  borderBottom="1px solid {colors.gray.100}"
                 >
                   {moduleData.name}
                 </styled.td>
@@ -73,16 +71,14 @@ const ModuleOverlay = ({ moduleData }: ModuleOverlayProps) => {
                   color="gray.500"
                   px="6"
                   py="3"
-                  borderBottom="1px solid"
-                  borderColor="gray.100"
+                  borderBottom="1px solid {colors.gray.100}"
                 >
                   Module version
                 </styled.th>
                 <styled.td
                   px="6"
                   py="4"
-                  borderBottom="1px solid"
-                  borderColor="gray.100"
+                  borderBottom="1px solid {colors.gray.100}"
                 >
                   {moduleData.version}
                 </styled.td>

src/simulator/RangeSensor.tsx

@@ -191,8 +191,11 @@ const ThresholdMark = ({ value, label, min, max }: ThresholdMarkProps) => {
         bg="brand.200"
         height="2"
         width="2"
-        borderLeft="1px solid"
-        borderRight="1px solid"
+        // Separate width/style/color: a side shorthand like borderLeft
+        // resets the side's colour, and Panda doesn't order it relative to
+        // borderColor.
+        borderWidth="0 1px"
+        borderStyle="solid"
         borderColor="gray.75"
         // Track position is a runtime value.
         style={{ left: percentLeft }}

src/workbench/SideBarTab.tsx

@@ -106,9 +106,8 @@ const SideBarTab = ({
               // in Chromium, and react-aria's data-focus-visible does so in
               // Firefox. Keyboard focus sets both in all modern browsers.
               ".sidebar-tab[data-focus-visible]:focus-visible &": {
-                borderBottom: "3px solid",
                 // To match the active/inactive colour.
-                borderColor: active ? "brand.300" : "gray.75",
+                borderBottomColor: active ? "brand.300" : "gray.75",
               },
             }}
           >

src/workbench/connect-dialogs/ConnectDialog.tsx

@@ -102,7 +102,9 @@ const ConnectDialogFooter = ({
           variant="link"
           size="lg"
           onPress={onNextDontShowAgain}
-          css={{ color: "brand.500", mr: "auto" }}
+          // The link variant has no padding; inset it to line up with the
+          // dialog title.
+          css={{ color: "brand.500", mr: "auto", px: "6" }}
         >
           <FormattedMessage id="dont-show-again" />
         </Button>