@microbit/ui 0.0.0-gray.ramp.90

package/src/button-icon.ts

@@ -0,0 +1,23 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { cva } from "styled-system/css";
+
+// Chakra's ButtonIcon: keeps the glyph centred and spaced from the label
+// (iconSpacing 0.5rem). Shared by Button and LinkButton; deliberately not
+// exported from the package index.
+export const buttonIcon = cva({
+  base: {
+    display: "inline-flex",
+    alignSelf: "center",
+    flexShrink: 0,
+  },
+  variants: {
+    side: {
+      left: { marginEnd: "2" },
+      right: { marginStart: "2" },
+    },
+  },
+});

package/src/data-attrs.ts

@@ -0,0 +1,16 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * The `data-*` entries of a props object, for components that let a caller
+ * put test hooks on an inner element rather than the one their props land on.
+ *
+ * Internal: not exported from the package.
+ */
+export const dataAttrs = (props: object): Record<string, unknown> =>
+  Object.fromEntries(
+    Object.entries(props).filter(([key]) => key.startsWith("data-")),
+  );

package/src/dense-preset.ts

@@ -0,0 +1,108 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { definePreset } from "@pandacss/dev";
+
+const toTokens = (values: Record<string, string>) =>
+  Object.fromEntries(
+    Object.entries(values).map(([k, value]) => [k, { value }]),
+  ) as Record<string, { value: string }>;
+
+/**
+ * The numeric spacing/size grid, Chakra's 0.25rem step × 0.88.
+ *
+ * Only the numeric scale is touched: the named `sizes` (`xs`…`8xl`, `max`,
+ * `full`, `container.*`) stay at their base-preset values, as they did in
+ * both apps' Chakra themes.
+ */
+const scale = toTokens({
+  px: "1px",
+  0.5: "0.11rem",
+  1: "0.22rem",
+  1.5: "0.33rem",
+  2: "0.44rem",
+  2.5: "0.55rem",
+  3: "0.66rem",
+  3.5: "0.77rem",
+  4: "0.88rem",
+  5: "1.1rem",
+  6: "1.32rem",
+  7: "1.54rem",
+  8: "1.76rem",
+  9: "1.98rem",
+  10: "2.2rem",
+  12: "2.64rem",
+  14: "3.08rem",
+  16: "3.52rem",
+  20: "4.4rem",
+  24: "5.28rem",
+  28: "6.16rem",
+  32: "7.04rem",
+  36: "7.92rem",
+  40: "8.8rem",
+  44: "9.68rem",
+  48: "10.56rem",
+  52: "11.44rem",
+  56: "12.32rem",
+  60: "13.2rem",
+  64: "14.08rem",
+  72: "15.84rem",
+  80: "17.6rem",
+  96: "21.12rem",
+});
+
+/**
+ * Font sizes from `md` up, × 0.9. `xs`/`sm` keep their full size so small
+ * text never gets too small, and `3xs`/`2xs` (which neither app's theme
+ * listed) stay at their base-preset values.
+ */
+const denseFontSizes = toTokens({
+  md: "0.9rem",
+  lg: "1.012rem",
+  xl: "1.125rem",
+  "2xl": "1.35rem",
+  "3xl": "1.687rem",
+  "4xl": "2.025rem",
+  "5xl": "2.7rem",
+  "6xl": "3.375rem",
+  "7xl": "4.05rem",
+  "8xl": "5.4rem",
+  "9xl": "7.2rem",
+});
+
+/**
+ * The dense preset — an optional density override for the information-dense
+ * apps in the family. Stacks between the base preset and the app preset:
+ *
+ * ```ts
+ * presets: ["@pandacss/preset-base", basePreset, densePreset, appPreset]
+ * ```
+ *
+ * Both python-editor and classroom shipped the same "make everything
+ * smaller" Chakra theme change (2022): the numeric spacing/sizes grid at
+ * × 0.88 and `fontSizes` from `md` up at × 0.9. The two themes' values were
+ * byte-identical, so the scale lives here rather than being replicated in
+ * each app preset (migration-playbook gotcha #25 — a global scale override
+ * hides from every safeguard, so it needs to be explicit and shared).
+ *
+ * Whether this density stays or the family aligns on one scale is an open
+ * design question; when it is answered, this preset is the single place the
+ * answer lands (deleting it from an app's stack un-shrinks that app).
+ * ml-trainer and data-microbit-org do not use it.
+ */
+export const densePreset = definePreset({
+  name: "microbit-ui-dense",
+  theme: {
+    extend: {
+      tokens: {
+        spacing: scale,
+        sizes: scale,
+        fontSizes: denseFontSizes,
+      },
+    },
+  },
+});
+
+export default densePreset;

package/src/hooks/useBreakpointValue.ts

@@ -0,0 +1,63 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useEffect, useState } from "react";
+import { token } from "styled-system/tokens";
+
+// Min-width breakpoints from the preset's token scale (runtime lookup so the
+// hook tracks any preset override rather than duplicating the values).
+const BREAKPOINTS = {
+  sm: token("breakpoints.sm"),
+  md: token("breakpoints.md"),
+  lg: token("breakpoints.lg"),
+  xl: token("breakpoints.xl"),
+  "2xl": token("breakpoints.2xl"),
+} as const;
+
+type Breakpoint = "base" | keyof typeof BREAKPOINTS;
+
+const ORDER: Breakpoint[] = ["base", "sm", "md", "lg", "xl", "2xl"];
+
+const activeBreakpoint = (): Breakpoint => {
+  let current: Breakpoint = "base";
+  for (const [name, min] of Object.entries(BREAKPOINTS)) {
+    if (window.matchMedia(`(min-width: ${min})`).matches) {
+      current = name as Breakpoint;
+    }
+  }
+  return current;
+};
+
+/**
+ * JS-side responsive value resolver, replacing Chakra's `useBreakpointValue`.
+ * Panda handles responsive *styles* in CSS; this is for responsive *logic*
+ * (choosing a prop value, branching behaviour). Resolves to the value at the
+ * active breakpoint, falling back to the nearest smaller one that is defined.
+ */
+export function useBreakpointValue<T>(
+  values: Partial<Record<Breakpoint, T>>,
+): T | undefined {
+  const [bp, setBp] = useState<Breakpoint>(() =>
+    typeof window === "undefined" ? "base" : activeBreakpoint(),
+  );
+
+  useEffect(() => {
+    const update = () => setBp(activeBreakpoint());
+    update();
+    const lists = Object.values(BREAKPOINTS).map((min) =>
+      window.matchMedia(`(min-width: ${min})`),
+    );
+    lists.forEach((l) => l.addEventListener("change", update));
+    return () => lists.forEach((l) => l.removeEventListener("change", update));
+  }, []);
+
+  for (let i = ORDER.indexOf(bp); i >= 0; i--) {
+    const value = values[ORDER[i]];
+    if (value !== undefined) {
+      return value;
+    }
+  }
+  return undefined;
+}

package/src/hooks/useClipboard.ts

@@ -0,0 +1,64 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Copy a value to the clipboard with a transient `hasCopied` flag for
+ * "Copied!" feedback. Replaces Chakra's `useClipboard`.
+ */
+export function useClipboard(
+  value: string,
+  timeoutMs = 1500,
+): { onCopy: () => void; hasCopied: boolean } {
+  const [hasCopied, setHasCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const markCopied = useCallback(() => {
+    setHasCopied(true);
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setHasCopied(false), timeoutMs);
+  }, [timeoutMs]);
+  const onCopy = useCallback(() => {
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard
+        .writeText(value)
+        .then(markCopied, () => execCommandCopy(value) && markCopied());
+    } else if (execCommandCopy(value)) {
+      markCopied();
+    }
+  }, [value, markCopied]);
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+  return { onCopy, hasCopied };
+}
+
+/**
+ * Chakra's useClipboard wrapped the execCommand-based copy-to-clipboard
+ * package, which works on a user gesture in contexts the async API refuses:
+ * insecure (non-localhost http) origins, where `navigator.clipboard` is
+ * undefined, and frames without a clipboard-write permissions policy, where
+ * `writeText` rejects.
+ */
+function execCommandCopy(value: string): boolean {
+  const active = document.activeElement;
+  const textarea = document.createElement("textarea");
+  textarea.value = value;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  let copied = false;
+  try {
+    copied = document.execCommand("copy");
+  } catch {
+    // Unsupported (execCommand is deprecated but universally kept for copy);
+    // report failure so the caller shows no false "Copied!".
+  }
+  textarea.remove();
+  if (active instanceof HTMLElement) {
+    active.focus();
+  }
+  return copied;
+}

package/src/hooks/useDisclosure.ts

@@ -0,0 +1,32 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useCallback, useMemo, useState } from "react";
+
+export interface Disclosure {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  onToggle: () => void;
+}
+
+/**
+ * useDisclosure — Chakra's hook of the same name: the open/closed state of a
+ * dialog, menu or drawer, and the three functions that change it.
+ *
+ * A thin `useState` wrapper, kept because it is the shape a Chakra app's
+ * dialog call sites are written in, and because a stable object means a
+ * disclosure can be passed to a memoised child without re-rendering it.
+ */
+export const useDisclosure = (defaultIsOpen = false): Disclosure => {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+  const onOpen = useCallback(() => setIsOpen(true), []);
+  const onClose = useCallback(() => setIsOpen(false), []);
+  const onToggle = useCallback(() => setIsOpen((open) => !open), []);
+  return useMemo(
+    () => ({ isOpen, onOpen, onClose, onToggle }),
+    [isOpen, onOpen, onClose, onToggle],
+  );
+};

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,28 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useCallback, useSyncExternalStore } from "react";
+
+/**
+ * Tracks a raw CSS media query, replacing Chakra's `useMediaQuery` for
+ * queries that aren't breakpoint-based (custom widths, height-based
+ * queries). For the preset's breakpoint scale prefer `useBreakpointValue`.
+ * Returns false during SSR.
+ */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const list = window.matchMedia(query);
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    },
+    [query],
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,18 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { useEffect, useRef } from "react";
+
+/**
+ * The value from the previous render (undefined on the first render).
+ * Replaces Chakra's `usePrevious`.
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * shared-ui — react-aria-components + Panda CSS primitives replacing Chakra,
+ * designed to be extracted into a library shared across sibling apps. Visuals
+ * match the Chakra theme; behaviour follows react-aria patterns.
+ */
+export * from "./system";
+export * from "./Avatar";
+export * from "./Button";
+export * from "./LinkButton";
+export * from "./ButtonGroup";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./IconButton";
+export * from "./Image";
+export * from "./Input";
+export * from "./InputGroup";
+export * from "./LinkBox";
+export * from "./NativeSelect";
+export * from "./NumberField";
+export * from "./ProgressBar";
+export * from "./Radio";
+export * from "./Skeleton";
+export * from "./Slide";
+export * from "./Slider";
+export * from "./Select";
+export * from "./Spinner";
+export * from "./Svg";
+export * from "./Switch";
+export * from "./Text";
+export * from "./TextField";
+export * from "./Heading";
+export * from "./Link";
+export * from "./Icon";
+export * from "./CloseButton";
+export * from "./CloseIcon";
+export * from "./Code";
+export * from "./Collapse";
+export * from "./Fade";
+export * from "./Kbd";
+export * from "./Divider";
+export * from "./GridList";
+export * from "./Drawer";
+export * from "./List";
+export * from "./ListBox";
+export * from "./ComboBox";
+export * from "./Menu";
+export * from "./Modal";
+export * from "./PopoverArrow";
+export * from "./SharedUIProvider";
+export * from "./Tooltip";
+export * from "./Toast";
+export * from "./VisuallyHidden";
+export { useBreakpointValue } from "./hooks/useBreakpointValue";
+export { useClipboard } from "./hooks/useClipboard";
+export { useDisclosure } from "./hooks/useDisclosure";
+export type { Disclosure } from "./hooks/useDisclosure";
+export { useMediaQuery } from "./hooks/useMediaQuery";
+export { usePrevious } from "./hooks/usePrevious";

package/src/messages.ts

@@ -0,0 +1,17 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import en from "../lang/ui.en.json";
+
+/**
+ * Descriptor for one of this package's messages. The English text rides along
+ * as defaultMessage so components render English without any catalog merging;
+ * for other locales apps compile lang/ui.<locale>.json into their per-locale
+ * catalogs (see README "Strings").
+ */
+export const uiMessage = (id: keyof typeof en) => ({
+  id,
+  defaultMessage: en[id].defaultMessage,
+});

package/src/system.ts

@@ -0,0 +1,45 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Stable re-export of the Panda styling primitives and layout patterns, so
+ * shared-ui consumers (and a future extracted library) import from one place
+ * rather than reaching into the generated `styled-system` directly.
+ */
+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.
+export type { Key, Selection } from "react-aria-components";
+export type {
+  BoxProps,
+  FlexProps,
+  StackProps,
+  HstackProps,
+  VstackProps,
+  GridProps,
+} from "styled-system/jsx";
+
+// Layout patterns — the Panda-native equivalents of Chakra's 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 (playbook gotcha #41).
+export {
+  AspectRatio,
+  Box,
+  Container,
+  Flex,
+  Stack,
+  HStack,
+  VStack,
+  Grid,
+  GridItem,
+  Center,
+  Wrap,
+  styled,
+} from "styled-system/jsx";