@microbit/ui 0.5.1 → 0.6.0

package/README.md

@@ -25,10 +25,12 @@ setup below, minus the app/brand presets. Everything an app must do:
 
    Later presets override earlier ones token-by-token — the base recipes and
    semantic tokens reference the brand tokens, which is how a brand swap
-   restyles everything without touching recipes. Set `eject: true` (the stack
-   supplies the full token system). After changing an _external_ preset
-   dependency, regenerate clean: `rm -rf styled-system && npm run panda` —
-   incremental codegen does not detect external preset changes.
+   restyles everything without touching recipes. Install
+   `@pandacss/preset-base` as a direct dependency: `@pandacss/dev` no longer
+   pulls it in, and nothing is added to the stack implicitly. After changing
+   an _external_ preset dependency, regenerate clean:
+   `rm -rf styled-system && npm run panda` — incremental codegen does not
+   detect external preset changes.
 
 2. **Include this package's source** in `panda.config.ts` so Panda extracts
    the styles the components use:
@@ -42,6 +44,14 @@ setup below, minus the app/brand presets. Everything an app must do:
    importers, this package's source included — a `styled-system` alias in
    both `tsconfig.json` `paths` and the bundler config (see the
    `viteFinal` in `apps/storybook`'s `.storybook/main.ts`).
+
+   App code imports `css`, `cx`, `cva` and `sva` from `styled-system/css`
+   and `styled` from `styled-system/jsx`, not from `@microbit/ui`: Panda
+   extracts those only when they are imported from the generated module, and
+   a call through a re-export emits no CSS and no diagnostic. What
+   `@microbit/ui` does export — the components, the layout patterns,
+   `token` — is safe wherever it is used.
+
 4. **Generate and load the CSS** with Panda's PostCSS plugin. Keep Vite's
    default transformer — do **not** set `css.transformer: "lightningcss"`,
    which disables PostCSS. Add a `postcss.config.cjs`:
@@ -209,7 +219,8 @@ Panda emits every token as a CSS custom property with its default naming —
 - `fonts.display` → `var(--fonts-display)`
 
 These names are **API** for styling that lives outside React/Panda — e.g.
-CodeMirror highlight styles or xterm themes written as raw CSS. Two rules
+CodeMirror highlight styles, xterm themes, or `@microbit/ui-code-view`'s
+stylesheet, which reads the `code.*` syntax-highlighting colours. Two rules
 keep them stable:
 
 - Never set `hashing` or `prefix` in `panda.config.ts`.

package/lang/ui.es-ES.json

@@ -1,6 +1,6 @@
 {
   "ui.breadcrumb": {
-    "defaultMessage": "Sendero de navegación"
+    "defaultMessage": "Breadcrumb"
   },
   "ui.cancel-action": {
     "defaultMessage": "Cancelar"
@@ -18,13 +18,13 @@
     "defaultMessage": "Cargando"
   },
   "ui.numberfield-decrease": {
-    "defaultMessage": "Reducir {fieldLabel}"
+    "defaultMessage": "Disminuir {fieldLabel}"
   },
   "ui.numberfield-increase": {
     "defaultMessage": "Aumentar {fieldLabel}"
   },
   "ui.select-placeholder": {
-    "defaultMessage": "Seleccionar un artículo"
+    "defaultMessage": "Selecciona un elemento"
   },
   "ui.select-row-action": {
     "defaultMessage": "Seleccionar"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "repository": {
@@ -35,31 +35,32 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.11.4",
-    "react": "^18.3.1",
+    "@pandacss/dev": "^2.4.0",
+    "react": "^18.3.1 || ^19.0.0",
     "react-aria": "^3.50.0",
     "react-aria-components": "^1.19.0",
     "react-icons": "^4.12.0 || ^5.0.0",
-    "react-intl": "^6.6.8 || ^7.0.0"
+    "react-intl": "^6.6.8 || ^7.0.0 || ^10.1.14 || ^12.0.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "^1.11.4",
+    "@pandacss/dev": "^2.4.0",
+    "@pandacss/preset-base": "^2.4.0",
     "@storybook/react-vite": "^10.5.2",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^26.1.1",
+    "@types/node": "^24.13.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^5.2.0",
-    "jsdom": "^29.1.1",
+    "jsdom": "^30.1.3",
     "react": "^18.3.1",
     "react-aria": "^3.50.0",
     "react-aria-components": "^1.19.0",
     "react-dom": "^18.3.1",
     "react-icons": "^4.12.0",
-    "react-intl": "^6.6.8",
+    "react-intl": "^12.1.5",
     "typescript": "^5.4.2",
     "vite": "^7.3.6",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.5"
   }
 }

package/src/ComboBox.tsx

@@ -7,6 +7,7 @@ import {
   ForwardedRef,
   forwardRef,
   ReactNode,
+  useContext,
   useLayoutEffect,
   useRef,
   useState,
@@ -15,6 +16,7 @@ import {
   Button as RACButton,
   ComboBox as RACComboBox,
   ComboBoxProps as RACComboBoxProps,
+  ComboBoxStateContext,
   Input as RACInput,
   ListBox as RACListBox,
   Popover,
@@ -74,9 +76,14 @@ export interface ComboBoxProps<T extends object>
    */
   emptyState?: ReactNode;
   /**
-   * Keep the dropdown shut until this prop is true. For gating on a minimum
+   * Keep the dropdown shut while this prop is true. For gating on a minimum
    * query length — react-aria has no `minLength`, and rendering an empty list
-   * still opens an empty card.
+   * still opens an empty card. Derive it from a controlled `inputValue`, so
+   * the keystroke that clears the gate is the one that opens the list.
+   *
+   * While true, nothing can open the list: the chevron is disabled, and
+   * ArrowUp/ArrowDown are stopped before they reach the input (so an
+   * `onKeyDown` you pass won't see them either).
    */
   isPopoverHidden?: boolean;
   placement?: PopoverProps["placement"];
@@ -98,6 +105,24 @@ export interface ComboBoxProps<T extends object>
   className?: string;
 }
 
+/**
+ * Closes a list left open when `isPopoverHidden` turns on (deleting back
+ * below the minimum query length). Opening is blocked at source — see the
+ * `menuTrigger` override and arrow-key guard below — and this also catches
+ * RAC's rarer open paths, such as the iPad VoiceOver tap on the input.
+ *
+ * Layout effect, not a passive one, so the stale list never reaches a paint.
+ */
+const ClosePopoverWhenHidden = ({ isHidden }: { isHidden?: boolean }) => {
+  const state = useContext(ComboBoxStateContext);
+  useLayoutEffect(() => {
+    if (isHidden && state?.isOpen) {
+      state.setOpen(false);
+    }
+  });
+  return null;
+};
+
 /**
  * ComboBox — a text input that filters a listbox, for choosing one of a known
  * set where typing to narrow it down is the point. Use Select where the list
@@ -117,6 +142,7 @@ const ComboBoxInner = <T extends object>(
     indicator,
     emptyState,
     isPopoverHidden,
+    menuTrigger,
     placement = "bottom start",
     maxHeight,
     helperText,
@@ -167,6 +193,8 @@ const ComboBoxInner = <T extends object>(
       <RACComboBox
         allowsEmptyCollection={emptyState != null}
         {...rest}
+        // "manual" stops typing and focus from opening the list at all.
+        menuTrigger={isPopoverHidden ? "manual" : menuTrigger}
         className={cx(fieldSlots.root, slots.root, className)}
       >
         {label != null && (
@@ -182,6 +210,17 @@ const ComboBoxInner = <T extends object>(
         <div
           ref={triggerRef}
           data-keyboard-modality={isFocusVisible || undefined}
+          // "manual" still lets the arrow keys open the list, and RAC's
+          // handler is on the input, so stop them on the way down.
+          onKeyDownCapture={
+            isPopoverHidden
+              ? (e) => {
+                  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                    e.stopPropagation();
+                  }
+                }
+              : undefined
+          }
           className={cx(
             slots.trigger,
             triggerCss ? css(triggerCss) : undefined,
@@ -196,36 +235,45 @@ const ComboBoxInner = <T extends object>(
           {indicator !== null && (
             <RACButton
               aria-label={intl.formatMessage(uiMessage("ui.combobox-trigger"))}
+              isDisabled={isPopoverHidden}
               className={slots.indicator}
             >
               {indicator ?? <Icon as={RiArrowDownSLine} />}
             </RACButton>
           )}
         </div>
-        {!isPopoverHidden && (
-          <Popover
-            triggerRef={triggerRef}
-            placement={placement}
-            maxHeight={maxHeight}
-            style={triggerWidth ? { width: triggerWidth } : undefined}
-            className={cx(
-              slots.content,
-              contentCss ? css(contentCss) : undefined,
-            )}
+        <ClosePopoverWhenHidden isHidden={isPopoverHidden} />
+        {/*
+          Always mounted, even while isPopoverHidden: RAC builds the
+          collection from the ListBox children inside the popover, so
+          unmounting it also empties the collection — and an empty
+          collection can't open (without allowsEmptyCollection), so the next
+          keystroke's open lands before the remounted children have
+          repopulated it and the list never appears. React 18's effect
+          ordering happened to win that race; React 19's does not.
+        */}
+        <Popover
+          triggerRef={triggerRef}
+          placement={placement}
+          maxHeight={maxHeight}
+          style={triggerWidth ? { width: triggerWidth } : undefined}
+          className={cx(
+            slots.content,
+            contentCss ? css(contentCss) : undefined,
+          )}
+        >
+          <RACListBox
+            aria-label={intl.formatMessage(uiMessage("ui.combobox-listbox"))}
+            className={slots.list}
+            renderEmptyState={
+              emptyState
+                ? () => <div className={slots.empty}>{emptyState}</div>
+                : undefined
+            }
           >
-            <RACListBox
-              aria-label={intl.formatMessage(uiMessage("ui.combobox-listbox"))}
-              className={slots.list}
-              renderEmptyState={
-                emptyState
-                  ? () => <div className={slots.empty}>{emptyState}</div>
-                  : undefined
-              }
-            >
-              {children}
-            </RACListBox>
-          </Popover>
-        )}
+            {children}
+          </RACListBox>
+        </Popover>
         <FieldSupport
           helperText={helperText}
           errorMessage={errorMessage}

package/src/ConfirmDialog.tsx

@@ -22,7 +22,7 @@ export interface ConfirmDialogProps {
   confirmText: ReactNode;
   /** Defaults to "Cancel". */
   cancelText?: ReactNode;
-  finalFocusRef?: RefObject<HTMLElement>;
+  finalFocusRef?: RefObject<HTMLElement | null>;
   onCloseComplete?: () => void;
 }
 

package/src/Modal.tsx

@@ -173,7 +173,7 @@ export interface ModalOwnProps {
    * Element to focus when the dialog closes, instead of the element that was
    * focused when it opened.
    */
-  finalFocusRef?: RefObject<HTMLElement>;
+  finalFocusRef?: RefObject<HTMLElement | null>;
   /**
    * Accessible name for dialogs without a ModalHeader (which otherwise
    * provides the label). One of the two is required — react-aria warns in

package/src/Select.recipe.ts

@@ -127,6 +127,9 @@ export const select = defineSlotRecipe({
       background: "transparent",
       border: "none",
       cursor: "pointer",
+      // Disabled only while ComboBox's isPopoverHidden withholds the list:
+      // it should stop looking clickable, not look like a disabled field.
+      "&[data-disabled]": { cursor: "default" },
       // No focus styling, deliberately: react-aria keeps a ComboBox's toggle
       // button out of the tab order (the input owns the keyboard), so a ring
       // here would only ever be reachable programmatically, and would suggest

package/src/base-preset.ts

@@ -170,6 +170,20 @@ export const basePreset = definePreset({
         // Removing the slot is a follow-up needing an ml-trainer lockstep.
         brand: colors.blue,
         brand2: colors.gray,
+        // Syntax-highlighting palette, read as CSS variables by the Python
+        // Editor's CodeMirror theme and by @microbit/ui-code-view's stylesheet
+        // (whose var() fallbacks repeat these values for apps without Panda).
+        // Generic OSS defaults; brand presets set the micro:bit palette.
+        code: {
+          default: { value: "black" },
+          comment: { value: "gray" },
+          keyword: { value: "darkblue" },
+          literal: { value: "darkgreen" },
+          string: { value: "green" },
+          // Below the 4.5:1 text floor (gray.500 meets it); matches the
+          // editor's gutter pending a decision on line-number contrast.
+          lineNumber: { value: "{colors.gray.350}" },
+        },
       },
       spacing: {
         ...spacing,

package/src/hooks/useClipboard.ts

@@ -14,7 +14,9 @@ export function useClipboard(
   timeoutMs = 1500,
 ): { onCopy: () => void; hasCopied: boolean } {
   const [hasCopied, setHasCopied] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
   const markCopied = useCallback(() => {
     setHasCopied(true);
     clearTimeout(timeoutRef.current);

package/src/hooks/usePrevious.ts

@@ -7,7 +7,7 @@ import { useEffect, useRef } from "react";
 
 /** The value from the previous render (undefined on the first render). */
 export function usePrevious<T>(value: T): T | undefined {
-  const ref = useRef<T>();
+  const ref = useRef<T | undefined>(undefined);
   useEffect(() => {
     ref.current = value;
   });

package/src/system.ts

@@ -4,11 +4,18 @@
  * SPDX-License-Identifier: MIT
  */
 /**
- * Stable re-export of the Panda styling primitives and layout patterns, so
+ * Stable re-export of the Panda layout patterns and runtime helpers, so
  * shared-ui consumers (and a future extracted library) import from one place
  * rather than reaching into the generated `styled-system` directly.
+ *
+ * `css`, `cva`, `sva`, `cx` and `styled` are deliberately NOT re-exported:
+ * Panda extracts those only when they are imported from `styled-system`, so
+ * calls reaching one through here would produce no CSS and no diagnostic.
+ * (`cx` only joins strings, but it shares the import line with `css`.)
+ * Everything this module does export works wherever it is used: the pattern
+ * components extract by name, and `token` is a runtime variable lookup with
+ * nothing to extract.
  */
-export { css, cva, sva, cx } from "styled-system/css";
 export { token } from "styled-system/tokens";
 export type { SystemStyleObject } from "styled-system/types";
 // react-aria collection types call sites need for selection handlers.
@@ -22,13 +29,10 @@ export type {
   GridProps,
 } from "styled-system/jsx";
 
-// Layout patterns — Box/Flex/Stack/etc.
-//
-// `styled` is re-exported for the `styled(Component)` form, which works from
-// anywhere. The `styled.tag` JSX form does NOT: Panda recognises the factory by
-// the module it was imported from, so `<styled.table css={…}>` on a `styled`
-// imported from here silently produces no CSS. Import it from
-// "styled-system/jsx" for that.
+// Layout patterns — Box/Flex/Stack/etc. These extract by component and prop
+// name, so their style props work through a re-export. `styled` does not:
+// `styled(Component)` would be safe but `<styled.table css={…}>` silently
+// produces no CSS, so it stays in "styled-system/jsx" with the helpers.
 export {
   AspectRatio,
   Box,
@@ -41,7 +45,6 @@ export {
   GridItem,
   Center,
   Wrap,
-  styled,
 } from "styled-system/jsx";
 
 /**